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:

``javascript

{/ Initial 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">

First pagraph


Second pagraph



{/ Case A /}


Chose A



{/ Case B /}


Chose B



`

API:

$3

| 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 |

$3

| 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 |

$3

| 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):