{"id":14070142,"url":"https://github.com/ckalgos/react-chat-bot","last_synced_at":"2025-03-18T00:31:17.331Z","repository":{"id":107537839,"uuid":"293496624","full_name":"ckalgos/react-chat-bot","owner":"ckalgos","description":"Customizable chat bot library using React and Typescript","archived":false,"fork":false,"pushed_at":"2022-09-02T00:22:23.000Z","size":382,"stargazers_count":15,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-13T21:04:08.368Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ckalgos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-09-07T10:31:56.000Z","updated_at":"2024-02-21T13:12:44.000Z","dependencies_parsed_at":"2023-08-20T13:46:34.008Z","dependency_job_id":null,"html_url":"https://github.com/ckalgos/react-chat-bot","commit_stats":null,"previous_names":["chithakumar13/react-chat-bot"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckalgos%2Freact-chat-bot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckalgos%2Freact-chat-bot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckalgos%2Freact-chat-bot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ckalgos%2Freact-chat-bot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ckalgos","download_url":"https://codeload.github.com/ckalgos/react-chat-bot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221571961,"owners_count":16845553,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-13T07:07:30.380Z","updated_at":"2024-10-27T16:24:17.794Z","avatar_url":"https://github.com/ckalgos.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"**_Build your own chatbot with minimal changes_**\n\n**Comes with 5 predefined styles and you can define your own styles as well**\n\n## **Installation**\n\n```\nnpm install react--customizable-chat-bot or Yarn add  react--customizable-chat-bot\n```\n\n## **Usage**\n\nList of questions to be asked by bot the can be passed . Take a look at example questions structure [here!](https://github.com/ckalgos/react-chat-bot/blob/master/src/config/Question/Questionnare.ts)\n\n```\nimport { Bot, BotConfig } from 'react--customizable-chat-bot'\n```\n\nBotConfig has some default set of questions and styles which you can override.\n\n## **Adding Validators to user response**\n\nIf you need to validate user response , under each question we have a handlers where you can pass validators to validate user response and drive the chat accordingly.\n\nValidators can either be a regex or a function which returns boolean\n\n```\nBotConfig.questions = [{'dob': {\n            id: 1,\n            message: \"What's your Date of Birth (DD/MM/YYYY)?\",\n            questionKey : 'dob',\n            handlers: [\n                {\n                    validators: dateReg,\n                    nextQuestion: 'email',\n                },\n                {\n                    validators: dateRegNeg,\n                    nextQuestion: 'dobWrong',\n                },\n            ],\n        }},'dobWrong': {\n            id: 2,\n            message: \"Please enter a valid date of birth\",\n            questionKey : 'dob',\n            handlers: [\n                {\n                    validators: dateReg,\n                    nextQuestion: 'email',\n                },\n                {\n                    validators: dateRegNeg,\n                    nextQuestion: 'dobWrong',\n                },\n            ],\n        }];\n```\n\n**Customizing the Styles**\n\nBy Default there are 5 themes available\n\n    1.)Default,\n    2.)GoogleAssitant,\n    3.)Facebook,\n    4.)WhatsApp,\n    5.)GradientGreen\n\nYou can chose any of these themes as below\n\n```\nimport { Bot, BotConfig } from 'react--customizable-chat-bot'\nimport { Themes } from 'react--customizable-chat-bot/lib/config/config';\n\nBotConfig.Theme = Themes.GoogleAssitant;\n```\n\nYou can entirely redefine the ui styles based on your brand.\nTake a look at List of custom style option available [here!](https://github.com/ckalgos/react-chat-bot/blob/master/src/config/style.ts)\n\nOnce your styling is ready you can pass it as a props to the bot component\n\n```\nimport { Bot, BotConfig , IStyles } from 'react--customizable-chat-bot'\n\nconst myStyles: IStyles = {\n    primaryColor: \"#4870df\",\n    sendButtonColor: \"#4870df\",\n    userAvatar: '',\n    userAvatarColor: '#4870df',\n    userAvatarTextColor: '#fff',\n    botAvatar: \"https://i.ibb.co/NxZqGVN/bot-avatar.png\",\n    botAvatarColor: '#e6e5eb',\n    botAvatarTextColor: '#000',\n    bubbleRadius: \"0\",\n    botMessageBubbleColor: '#4870df',\n    botMessageTextColor: '#fff',\n    userMessageBubbleColor: '#e6e5eb',\n    userMessageTextColor: '#000',\n    inputBoxBorderRadius: '40px',\n    primaryLabelColor: '#000',\n}\n\nexport const MyFunc() =\u003e \u003cBot config={BotConfig}  customStyles={myStyles}/\u003e\n```\n\nYou should pass a function to onConversationEnd props of Bot component to get the conversation data which we will a json string\n\n```\nimport { Bot, BotConfig } from 'react--customizable-chat-bot'\n\nconst onConversationEnd = (converstationData : string ) =\u003e {\n    console.log(converstationData);\n}\n\nexport const MyFunc() =\u003e \u003cBot config={BotConfig}  onConversationEnd={onConversationEnd}/\u003e\n```\n\n## For more help / settings\n\n\u003ca href=\"https://discord.gg/qkkW7KFxCV\"\u003eJoin the CK Algos Discord\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckalgos%2Freact-chat-bot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fckalgos%2Freact-chat-bot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fckalgos%2Freact-chat-bot/lists"}