ShadfinityChatbot
A simple chatbot component with customisable flow.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| name | string | The chatbot's display name. |
| image | string (URL) | The chatbot's avatar image. |
| initialStep | string | The first step in the chatbot flow. |
| tooltip | string | Tooltip text displayed with widgit. |
| defaultOpen | boolean | Controls chatbot's initial visibility. |
| flow | FlowNode[] | Defines chatbot conversation logic. |
FlowNode
Each flow node in the chatbot has the following properties:
| Property | Type | Description |
|---|---|---|
| delay | number (ms) | Delay before showing the message. |
| message | string | The message displayed to the user. |
| options | string[] | List of selectable responses. |
| render() | (onSubmit)=>ReactNode | Used to render custom components, to submit and move to next step, use the onSubmit function, pass the string value and it will be available in validation and next function. (for example, check out the example code given above) |
| inputboxDisabled | boolean | Disables the input field. |
| validation | function | Function to validate user input. Must return a boolean or string. |
| next | string | function | Defines the next step in flow. Can be a string or a function that determines the next step based on input. |
| autoNext | boolean | Automatically moves to next step after displaying the message. |