\n \n \n \n \n \n);\n\nMicIcon.propTypes = {\n size: PropTypes.number\n};\n\nMicIcon.defaultProps = {\n size: 20\n};\n\nexport default MicIcon;\n","export const isMobile = () => /iphone|ipod|android|ie|blackberry|fennec/i.test(navigator.userAgent);\n\nexport const isString = value => typeof value === 'string';\n","import { isString } from './utils';\n\nexport const getSpeakText = step => {\n const { message, metadata = {} } = step;\n if (isString(metadata.speak)) {\n return metadata.speak;\n }\n if (isString(message)) {\n return message;\n }\n return '';\n};\n\nexport const speakFn = speechSynthesisOptions => (step, previousValue) => {\n const { lang, voice, enable } = speechSynthesisOptions;\n const { user } = step;\n\n if (!window.SpeechSynthesisUtterance || !window.speechSynthesis) {\n return;\n }\n if (user) {\n return;\n }\n if (!enable) {\n return;\n }\n const text = getSpeakText(step);\n const msg = new window.SpeechSynthesisUtterance();\n msg.text = text.replace(/{previousValue}/g, previousValue);\n msg.lang = lang;\n msg.voice = voice;\n window.speechSynthesis.speak(msg);\n};\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport Random from 'random-id';\nimport { CustomStep, OptionsStep, TextStep } from './steps_components';\nimport schema from './schemas/schema';\nimport * as storage from './storage';\nimport {\n ChatBotContainer,\n Content,\n Header,\n HeaderTitle,\n HeaderIcon,\n FloatButton,\n FloatingIcon,\n Footer,\n Input,\n SubmitButton\n} from './components';\nimport Recognition from './recognition';\nimport { ChatIcon, CloseIcon, SubmitIcon, MicIcon } from './icons';\nimport { isMobile } from './utils';\nimport { speakFn } from './speechSynthesis';\n\nclass ChatBot extends Component {\n /* istanbul ignore next */\n constructor(props) {\n super(props);\n\n this.content = null;\n this.input = null;\n\n this.supportsScrollBehavior = false;\n\n this.setContentRef = element => {\n this.content = element;\n };\n\n this.setInputRef = element => {\n this.input = element;\n };\n\n this.state = {\n renderedSteps: [],\n previousSteps: [],\n currentStep: {},\n previousStep: {},\n steps: {},\n disabled: true,\n opened: props.opened || !props.floating,\n inputValue: '',\n inputInvalid: false,\n speaking: false,\n recognitionEnable: props.recognitionEnable && Recognition.isSupported(),\n defaultUserSettings: {}\n };\n\n this.speak = speakFn(props.speechSynthesis);\n }\n\n componentDidMount() {\n const { steps } = this.props;\n const {\n botDelay,\n botAvatar,\n botName,\n cache,\n cacheName,\n customDelay,\n enableMobileAutoFocus,\n userAvatar,\n userDelay\n } = this.props;\n const chatSteps = {};\n\n const defaultBotSettings = { delay: botDelay, avatar: botAvatar, botName };\n const defaultUserSettings = {\n delay: userDelay,\n avatar: userAvatar,\n hideInput: false,\n hideExtraControl: false\n };\n const defaultCustomSettings = { delay: customDelay };\n\n for (let i = 0, len = steps.length; i < len; i += 1) {\n const step = steps[i];\n let settings = {};\n\n if (step.user) {\n settings = defaultUserSettings;\n } else if (step.message || step.asMessage) {\n settings = defaultBotSettings;\n } else if (step.component) {\n settings = defaultCustomSettings;\n }\n\n chatSteps[step.id] = Object.assign({}, settings, schema.parse(step));\n }\n\n schema.checkInvalidIds(chatSteps);\n\n const firstStep = steps[0];\n\n if (firstStep.message) {\n const { message } = firstStep;\n firstStep.message = typeof message === 'function' ? message() : message;\n chatSteps[firstStep.id].message = firstStep.message;\n }\n\n const { recognitionEnable } = this.state;\n const { recognitionLang } = this.props;\n\n if (recognitionEnable) {\n this.recognition = new Recognition(\n this.onRecognitionChange,\n this.onRecognitionEnd,\n this.onRecognitionStop,\n recognitionLang\n );\n }\n\n this.supportsScrollBehavior = 'scrollBehavior' in document.documentElement.style;\n\n if (this.content) {\n this.content.addEventListener('DOMNodeInserted', this.onNodeInserted);\n window.addEventListener('resize', this.onResize);\n }\n\n const { currentStep, previousStep, previousSteps, renderedSteps } = storage.getData(\n {\n cacheName,\n cache,\n firstStep,\n steps: chatSteps\n },\n () => {\n // focus input if last step cached is a user step\n this.setState({ disabled: false }, () => {\n if (enableMobileAutoFocus || !isMobile()) {\n if (this.input) {\n this.input.focus();\n }\n }\n });\n }\n );\n\n this.setState({\n currentStep,\n defaultUserSettings,\n previousStep,\n previousSteps,\n renderedSteps,\n steps: chatSteps\n });\n }\n\n static getDerivedStateFromProps(props, state) {\n const { opened, toggleFloating } = props;\n if (toggleFloating !== undefined && opened !== undefined && opened !== state.opened) {\n return {\n ...state,\n opened\n };\n }\n return state;\n }\n\n componentWillUnmount() {\n if (this.content) {\n this.content.removeEventListener('DOMNodeInserted', this.onNodeInserted);\n window.removeEventListener('resize', this.onResize);\n }\n }\n\n onNodeInserted = event => {\n const { currentTarget: target } = event;\n const { enableSmoothScroll } = this.props;\n\n if (enableSmoothScroll && this.supportsScrollBehavior) {\n target.scroll({\n top: target.scrollHeight,\n left: 0,\n behavior: 'smooth'\n });\n } else {\n target.scrollTop = target.scrollHeight;\n }\n };\n\n onResize = () => {\n this.content.scrollTop = this.content.scrollHeight;\n };\n\n onRecognitionChange = value => {\n this.setState({ inputValue: value });\n };\n\n onRecognitionEnd = () => {\n this.setState({ speaking: false });\n this.handleSubmitButton();\n };\n\n onRecognitionStop = () => {\n this.setState({ speaking: false });\n };\n\n onValueChange = event => {\n this.setState({ inputValue: event.target.value });\n };\n\n getTriggeredStep = (trigger, value) => {\n const steps = this.generateRenderedStepsById();\n return typeof trigger === 'function' ? trigger({ value, steps }) : trigger;\n };\n\n getStepMessage = message => {\n const { previousSteps } = this.state;\n const lastStepIndex = previousSteps.length > 0 ? previousSteps.length - 1 : 0;\n const steps = this.generateRenderedStepsById();\n const previousValue = previousSteps[lastStepIndex].value;\n return typeof message === 'function' ? message({ previousValue, steps }) : message;\n };\n\n generateRenderedStepsById = () => {\n const { previousSteps } = this.state;\n const steps = {};\n\n for (let i = 0, len = previousSteps.length; i < len; i += 1) {\n const { id, message, value, metadata } = previousSteps[i];\n\n steps[id] = {\n id,\n message,\n value,\n metadata\n };\n }\n\n return steps;\n };\n\n triggerNextStep = data => {\n const { enableMobileAutoFocus } = this.props;\n const { defaultUserSettings, previousSteps, renderedSteps, steps } = this.state;\n\n let { currentStep, previousStep } = this.state;\n const isEnd = currentStep.end;\n\n if (data && data.value) {\n currentStep.value = data.value;\n }\n if (data && data.hideInput) {\n currentStep.hideInput = data.hideInput;\n }\n if (data && data.hideExtraControl) {\n currentStep.hideExtraControl = data.hideExtraControl;\n }\n if (data && data.trigger) {\n currentStep.trigger = this.getTriggeredStep(data.trigger, data.value);\n }\n\n if (isEnd) {\n this.handleEnd();\n } else if (currentStep.options && data) {\n const option = currentStep.options.filter(o => o.value === data.value)[0];\n const trigger = this.getTriggeredStep(option.trigger, currentStep.value);\n delete currentStep.options;\n\n // replace choose option for user message\n currentStep = Object.assign({}, currentStep, option, defaultUserSettings, {\n user: true,\n message: option.label,\n trigger\n });\n\n renderedSteps.pop();\n previousSteps.pop();\n renderedSteps.push(currentStep);\n previousSteps.push(currentStep);\n\n this.setState({\n currentStep,\n renderedSteps,\n previousSteps\n });\n } else if (currentStep.trigger) {\n if (currentStep.replace) {\n renderedSteps.pop();\n }\n\n const trigger = this.getTriggeredStep(currentStep.trigger, currentStep.value);\n let nextStep = Object.assign({}, steps[trigger]);\n\n if (nextStep.message) {\n nextStep.message = this.getStepMessage(nextStep.message);\n } else if (nextStep.update) {\n const updateStep = nextStep;\n nextStep = Object.assign({}, steps[updateStep.update]);\n\n if (nextStep.options) {\n for (let i = 0, len = nextStep.options.length; i < len; i += 1) {\n nextStep.options[i].trigger = updateStep.trigger;\n }\n } else {\n nextStep.trigger = updateStep.trigger;\n }\n }\n\n nextStep.key = Random(24);\n\n previousStep = currentStep;\n currentStep = nextStep;\n\n this.setState({ renderedSteps, currentStep, previousStep }, () => {\n if (nextStep.user) {\n this.setState({ disabled: false }, () => {\n if (enableMobileAutoFocus || !isMobile()) {\n if (this.input) {\n this.input.focus();\n }\n }\n });\n } else {\n renderedSteps.push(nextStep);\n previousSteps.push(nextStep);\n\n this.setState({ renderedSteps, previousSteps });\n }\n });\n }\n\n const { cache, cacheName } = this.props;\n if (cache) {\n setTimeout(() => {\n storage.setData(cacheName, {\n currentStep,\n previousStep,\n previousSteps,\n renderedSteps\n });\n }, 300);\n }\n };\n\n handleEnd = () => {\n const { handleEnd } = this.props;\n\n if (handleEnd) {\n const { previousSteps } = this.state;\n\n const renderedSteps = previousSteps.map(step => {\n const { id, message, value, metadata } = step;\n\n return {\n id,\n message,\n value,\n metadata\n };\n });\n\n const steps = [];\n\n for (let i = 0, len = previousSteps.length; i < len; i += 1) {\n const { id, message, value, metadata } = previousSteps[i];\n\n steps[id] = {\n id,\n message,\n value,\n metadata\n };\n }\n\n const values = previousSteps.filter(step => step.value).map(step => step.value);\n\n handleEnd({ renderedSteps, steps, values });\n }\n };\n\n isInputValueEmpty = () => {\n const { inputValue } = this.state;\n return !inputValue || inputValue.length === 0;\n };\n\n isLastPosition = step => {\n const { renderedSteps } = this.state;\n const { length } = renderedSteps;\n const stepIndex = renderedSteps.map(s => s.key).indexOf(step.key);\n\n if (length <= 1 || stepIndex + 1 === length) {\n return true;\n }\n\n const nextStep = renderedSteps[stepIndex + 1];\n const hasMessage = nextStep.message || nextStep.asMessage;\n\n if (!hasMessage) {\n return true;\n }\n\n const isLast = step.user !== nextStep.user;\n return isLast;\n };\n\n isFirstPosition = step => {\n const { renderedSteps } = this.state;\n const stepIndex = renderedSteps.map(s => s.key).indexOf(step.key);\n\n if (stepIndex === 0) {\n return true;\n }\n\n const lastStep = renderedSteps[stepIndex - 1];\n const hasMessage = lastStep.message || lastStep.asMessage;\n\n if (!hasMessage) {\n return true;\n }\n\n const isFirst = step.user !== lastStep.user;\n return isFirst;\n };\n\n handleKeyPress = event => {\n if (event.key === 'Enter') {\n this.submitUserMessage();\n }\n };\n\n handleSubmitButton = () => {\n const { speaking, recognitionEnable } = this.state;\n\n if ((this.isInputValueEmpty() || speaking) && recognitionEnable) {\n this.recognition.speak();\n if (!speaking) {\n this.setState({ speaking: true });\n }\n return;\n }\n\n this.submitUserMessage();\n };\n\n submitUserMessage = () => {\n const { defaultUserSettings, inputValue, previousSteps, renderedSteps } = this.state;\n let { currentStep } = this.state;\n\n const isInvalid = currentStep.validator && this.checkInvalidInput();\n\n if (!isInvalid) {\n const step = {\n message: inputValue,\n value: inputValue\n };\n\n currentStep = Object.assign({}, defaultUserSettings, currentStep, step);\n\n renderedSteps.push(currentStep);\n previousSteps.push(currentStep);\n\n this.setState(\n {\n currentStep,\n renderedSteps,\n previousSteps,\n disabled: true,\n inputValue: ''\n },\n () => {\n if (this.input) {\n this.input.blur();\n }\n }\n );\n }\n };\n\n checkInvalidInput = () => {\n const { enableMobileAutoFocus } = this.props;\n const { currentStep, inputValue } = this.state;\n const result = currentStep.validator(inputValue);\n const value = inputValue;\n\n if (typeof result !== 'boolean' || !result) {\n this.setState(\n {\n inputValue: result.toString(),\n inputInvalid: true,\n disabled: true\n },\n () => {\n setTimeout(() => {\n this.setState(\n {\n inputValue: value,\n inputInvalid: false,\n disabled: false\n },\n () => {\n if (enableMobileAutoFocus || !isMobile()) {\n if (this.input) {\n this.input.focus();\n }\n }\n }\n );\n }, 2000);\n }\n );\n\n return true;\n }\n\n return false;\n };\n\n toggleChatBot = opened => {\n const { toggleFloating } = this.props;\n\n if (toggleFloating) {\n toggleFloating({ opened });\n } else {\n this.setState({ opened });\n }\n };\n\n renderStep = (step, index) => {\n const { renderedSteps } = this.state;\n const {\n avatarStyle,\n bubbleStyle,\n bubbleOptionStyle,\n customStyle,\n hideBotAvatar,\n hideUserAvatar,\n speechSynthesis\n } = this.props;\n const { options, component, asMessage } = step;\n const steps = this.generateRenderedStepsById();\n const previousStep = index > 0 ? renderedSteps[index - 1] : {};\n\n if (component && !asMessage) {\n return (\n \n );\n }\n\n if (options) {\n return (\n \n );\n }\n\n return (\n \n );\n };\n\n render() {\n const {\n currentStep,\n disabled,\n inputInvalid,\n inputValue,\n opened,\n renderedSteps,\n speaking,\n recognitionEnable\n } = this.state;\n const {\n className,\n contentStyle,\n extraControl,\n controlStyle,\n floating,\n floatingIcon,\n floatingStyle,\n footerStyle,\n headerComponent,\n headerTitle,\n hideHeader,\n hideSubmitButton,\n inputStyle,\n placeholder,\n inputAttributes,\n recognitionPlaceholder,\n style,\n submitButtonStyle,\n width,\n height\n } = this.props;\n\n const header = headerComponent || (\n \n {headerTitle}\n {floating && (\n this.toggleChatBot(false)}>\n \n \n )}\n \n );\n\n let customControl;\n if (extraControl !== undefined) {\n customControl = React.cloneElement(extraControl, {\n disabled,\n speaking,\n invalid: inputInvalid\n });\n }\n\n const icon =\n (this.isInputValueEmpty() || speaking) && recognitionEnable ? : ;\n\n const inputPlaceholder = speaking\n ? recognitionPlaceholder\n : currentStep.placeholder || placeholder;\n\n const inputAttributesOverride = currentStep.inputAttributes || inputAttributes;\n\n return (\n \n {floating && (\n
this.toggleChatBot(true)}\n >\n {typeof floatingIcon === 'string' ? : floatingIcon}\n \n )}\n \n {!hideHeader && header}\n \n {renderedSteps.map(this.renderStep)}\n \n \n \n
+ {steps?.name.value} likes {steps?.fruit.value}
+
+);
+
+const steps: Step[] = [
+ { id: '1', message: 'Hello! What is your name?', trigger: 'name' },
+ { id: 'name', user: true, trigger: '3' },
+ { id: '3', message: 'Hi {previousValue}! Which fruit do you like?', trigger: 'fruit' },
+ {
+ id: 'fruit',
+ options: [
+ { label: 'Apple', trigger: 'summary' },
+ { label: 'Banana', trigger: 'summary' }
+ ]
+ },
+ { id: 'summary', component: , asMessage: true, trigger: 'end' },
+ { id: 'end', message: 'Thanks!', end: true }
+];
+
+const ThemedExample = () => (
+
+
+
+);
+
+export default ThemedExample;
diff --git a/example/index.html b/example/index.html
index 52adae25..7fc0bc1e 100644
--- a/example/index.html
+++ b/example/index.html
@@ -6,6 +6,6 @@
-
+
+
- 
+
A simple chatbot component to create conversation chats
@@ -15,18 +10,23 @@ A simple chatbot component to create conversation chats
## Getting Start
+`react-simple-chatbot` uses [styled-components](https://styled-components.com) as a peer dependency, so install both:
+
```bash
-npm install react-simple-chatbot --save
+npm install react-simple-chatbot styled-components
```
+It works with React 18 or 19 and styled-components 5.1 or newer. The library is written in TypeScript, so the types are included.
+
## Usage
There are several examples on the [website](https://lucasbassetti.github.io/react-simple-chatbot/). Here is the first one to get you started:
-``` javascript
-import ChatBot from 'react-simple-chatbot';
+```tsx
+import { createRoot } from 'react-dom/client';
+import ChatBot, { type Step } from 'react-simple-chatbot';
-const steps = [
+const steps: Step[] = [
{
id: '0',
message: 'Welcome to react chatbot!',
@@ -39,33 +39,20 @@ const steps = [
},
];
-ReactDOM.render(
-