0.0.5 • Published 4 months ago
react-native-logical-tree-bot v0.0.5
react-native-logical-tree-bot
React-native-logical-tree-bot is a versatile React Native package that seamlessly integrates a customizable chatbot component into your applications. Powered by a conditional tree logic, it delivers dynamic and contextually relevant responses based on user answers.
Key Features:
- Conditional Tree Logic: Feed your chatbot with cases (logical nodes) and link them to next cases with a regex check on the user answer.
- Intuitive Integration: Use the power of React to seamlessly feed the logical cases to your Chatbot.
- Customizable UI: Tailor the look and feel of the chat interface to align with your application's design and branding.
Explore a new realm of user interaction and engagement with React-native-logical-tree-bot!
Installation:
Get Started:
<Chatbot initialStepId="init">
{/* Initial case */}
<Chatbot.Case
next={[{stepId: 'caseA', condition: /a/i}, {stepId: 'caseB'}]} // logic for the next step
clickableAnswerOptions={['A', 'B']} // prepared clickable options (user can still use keyboard)
id="init">
<Chatbot.Case.Paragraph>
<Text>First pagraph</Text>
</Chatbot.Case.Paragraph>
<Chatbot.Case.Paragraph>
<Text>Second pagraph</Text>
</Chatbot.Case.Paragraph>
</Chatbot.Case>
{/* Case A */}
<Chatbot.Case id="caseA">
<Chatbot.Case.Paragraph>
<Text>Chose A</Text>
</Chatbot.Case.Paragraph>
</Chatbot.Case>
{/* Case B */}
<Chatbot.Case id="caseB">
<Chatbot.Case.Paragraph>
<Text>Chose B</Text>
</Chatbot.Case.Paragraph>
</Chatbot.Case>
</Chatbot>API:
Chatbot
| Props | Type | Description |
|---|---|---|
initialStepId | string | The id of the Case that will be the first step (using enum is recommended) |
children | Chatbot.Case[] | The cases define the content of the potential chatbot messages and the logic of their display |
Chatbot.Case
| Props | Type | Description | |
|---|---|---|---|
id | string | Unique id of the case (using enum is recommended) | |
clickableAnswerOptions (optional) | string[] | List of prepared clickable answers | |
next (optional) | {stepId:string | null; condition: RegExp;}[] | List of potential next steps identified whith the case id and conditioned with a regexp. The order of priority is descendent in the array (first has higher priority) |
children | Chatbot.Case.Paragraph[] | Each paragraph represent the content of a bot message. The bot can send multiple paragraph in a case |
Chatbot.Case.Paragraph
| Props | Type | Description |
|---|---|---|
children | React.JSX.Element | The content of the paragraph. It can be other than Text. Be creative! |
Slightly more advanced example
You can a more developped example of rn-logical-treebot in src/examples/Demo implementing the following decision tree (and we strongly encourage you to draw a decision tree before coding your logical tree bot):