You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This page documents all the attributes that may be used in a conversation [**Block**](/docs/introduction/Conversations#block). Take note that [**Attributes**](/docs/introduction/conversations#attributes) are divided into **pre-processing** and **post-processing** as listed in the tables below. For a brief example on the usage of attributes, you may refer to the **sample flow** in the dropdown which uses `message` and `path`.
10
+
This page documents all the attributes that may be used in a conversation [**Block**](/docs/concepts/conversations#block). Take note that [**Attributes**](/docs/concepts/conversations#attributes) are divided into **pre-processing** and **post-processing** as listed in the tables below. For a brief example on the usage of attributes, you may refer to the **sample flow** in the dropdown which uses `message` and `path`.
Copy file name to clipboardExpand all lines: docs/api/params.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -18,8 +18,8 @@ The following table provides details about the parameters available for attribut
18
18
| userInput | string | All Attributes | A string representing the user's input in the chat. |
19
19
| prevPath | string | All Attributes | A string representing the previous path in the chat (can be null if not found). |
20
20
| goToPath | function | All Attributes | A utility function for immediately pathing to another block. |
21
-
| injectMessage | async function | All Attributes | A utility function used to inject a message into the chat which takes in 3 properties as represented by the [**Message**](/docs/introduction/conversations#message) type. ||
22
-
| streamMessage | async function | All Attributes | A utility function used to stream messages into the chat which takes in 3 properties as represented by the [**Message**](/docs/introduction/conversations#message) type and you may refer to [**this example**](/docs/examples/real_time_stream) for more details. ||
21
+
| injectMessage | async function | All Attributes | A utility function used to inject a message into the chat which takes in 3 properties as represented by the [**Message**](/docs/concepts/conversations#message) type. ||
22
+
| streamMessage | async function | All Attributes | A utility function used to stream messages into the chat which takes in 3 properties as represented by the [**Message**](/docs/concepts/conversations#message) type and you may refer to [**this example**](/docs/examples/real_time_stream) for more details. ||
23
23
| openChat | function | All Attributes | A utility function used to control the visibility of the chat component. It takes one parameter: <ul><li>`isOpen`:</li> A boolean indicating whether the chat should be opened (`true`) or closed (`false`).</ul> |
24
24
| files | FileList | Only `file` Attribute | A list of file(s) uploaded by the user.
Copy file name to clipboardExpand all lines: docs/concepts/conversations.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -148,7 +148,7 @@ For details and usage on each of these parameters, you may consult the [**API do
148
148
149
149
</div>
150
150
151
-
Not to be confused with `message` from the section on [**Attributes**](/docs/introduction/conversations#attributes), the `Message` component here represents the interactions between the user and the bot. Every element in the chatbot body (including custom components) are considered a Message (as **outlined in red** on the image above). Within a message you will find 3 properties:
151
+
Not to be confused with `message` from the section on [**Attributes**](/docs/concepts/conversations#attributes), the `Message` component here represents the interactions between the user and the bot. Every element in the chatbot body (including custom components) are considered a Message (as **outlined in red** on the image above). Within a message you will find 3 properties:
152
152
153
153
- content (required) - a string or JSX.Element representing the content of the message
154
154
- sender (required) - string representing message sender (can be `user`, `bot` or `system`)
A newly added feature in **v2** of the chatbot, the [**`themes`**](/docs/api/themes) prop allows users a quick and convenient way to customize their chatbot. Browsing of themes can be done on [**React ChatBotify Gallery**](https://gallery.react-chatbotify.com) or manually via the [**GitHub Themes Repository**](https://github.com/tjtanjin/react-chatbotify-themes/tree/main/themes).
10
+
A newly added feature in **v2** of the chatbot, the `themes` prop allows users a quick and convenient way to customize their chatbot. Browsing of themes can be done on [**React ChatBotify Gallery**](https://gallery.react-chatbotify.com) or manually via the [**GitHub Themes Repository**](https://github.com/tjtanjin/react-chatbotify-themes/tree/main/themes).
11
11
12
12
The `theme` prop can accept a single **Theme** object or a list of it. A Theme object contains the following fields:
The following example is a basic recruitment form for a pet store. Note that there are no validations performed for the user input. If you wish to look at an example with validation, you may look at the [**Advanced Form**](/docs/examples/advanced_form).
10
+
The following example is a basic recruitment form for a pet store. Note that there are no validations performed for the user input. If you wish to look at an example with validation, you may look at the [**Advanced Form**](/docs/examples/complex_form).
The following is an example of configuring the chatbot with a single `terminal` theme. You can experiment with various themes available for browsing at [**React ChatBotify Gallery**](https://gallery.react-chatbotify.com).
10
+
The following is an example of configuring the chatbot with a single `terminal` theme. For multiple themes, you may look at this [**example**](/docs/examples/multiple_themes). You can experiment with various themes available for browsing at [**React ChatBotify Gallery**](https://gallery.react-chatbotify.com).
Copy file name to clipboardExpand all lines: docs/introduction/migration_v2.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -45,21 +45,21 @@ Changes Required:
45
45
- Remove all imports of `react-chatbotify.css`
46
46
47
47
### Renamed BotOptions to Settings
48
-
The term **BotOptions** was previously used for the [**`options`**](/legacy/v1/docs/introduction/bot_options) prop, causing confusion with the [**`options attribute`**](/legacy/v1/docs/api/attributes#pre-processing-attributes) in conversation blocks. To minimize the potential for confusion, **BotOptions** is now simply called **Settings**.
48
+
The term **BotOptions** was previously used for the [**`options`**](https://react-chatbotify.com/legacy/v1/docs/introduction/bot_options) prop, causing confusion with the [**`options attribute`**](https://react-chatbotify.com/legacy/v1/docs/api/attributes#pre-processing-attributes) in conversation blocks. To minimize the potential for confusion, **BotOptions** is now simply called **Settings**.
49
49
50
50
Changes Required:
51
51
- Replace `BotOptionsContext` with `SettingsContext`
52
52
- Replace `Options` (BotOptions) type with `Settings` type
53
53
- Replace `getDefaultBotOptions` with `getDefaultSettings`
54
54
55
55
### Renamed Theme Section to General Section
56
-
In version 1, the [**`theme`**](/legacy/v1/docs/api/bot_options#theme) section within `options` (now `settings`) configured generic properties. With the introduction of a `themes` prop in version 2, this section is now called [**`general`**](/docs/api/settings#general) to avoid confusion.
56
+
In version 1, the [**`theme`**](https://react-chatbotify.com/legacy/v1/docs/api/bot_options#theme) section within `options` (now `settings`) configured generic properties. With the introduction of a `themes` prop in version 2, this section is now called [**`general`**](/docs/api/settings#general) to avoid confusion.
57
57
58
58
Changes Required:
59
59
- Replace `theme` section with `general` section inside `settings` prop
60
60
61
61
### Renamed Render Attribute to Component Attribute
62
-
The [**`render`**](/legacy/v1/docs/api/attributes#pre-processing-attributes) is understandably poorly named and has been a source of confusion for some users who mistakenly tried using `component` instead. Indeed, the purpose of this attribute was to allow users to provide their own components. With that said, it felt appropriate to update the name of this attribute to [**`component`**](/docs/api/attributes#pre-processing-attributes).
62
+
The [**`render`**](https://react-chatbotify.com/legacy/v1/docs/api/attributes#pre-processing-attributes) is understandably poorly named and has been a source of confusion for some users who mistakenly tried using `component` instead. Indeed, the purpose of this attribute was to allow users to provide their own components. With that said, it felt appropriate to update the name of this attribute to [**`component`**](/docs/api/attributes#pre-processing-attributes).
63
63
64
64
Changes Required:
65
65
- Replace `render` attribute with `component` attribute inside all applicable conversation blocks
@@ -115,7 +115,7 @@ New Additions:
115
115
Following the removal of `styles` from **BotOptions**, a new [**`styles`**](/docs/concepts/styles) prop has been introduced for tweaking chatbot styles.
116
116
117
117
New Additions:
118
-
- Added [**`styles`**](/docs/concepts/styles) prop (essentially the style sections previously under [**`BotOptions`**](/legacy/v1/docs/api/bot_options#styles))
118
+
- Added [**`styles`**](/docs/concepts/styles) prop (essentially the style sections previously under [**`BotOptions`**](https://react-chatbotify.com/legacy/v1/docs/api/bot_options#styles))
119
119
- Added `getDefaultStyles` which provides an empty default list of styles
120
120
121
121
### Custom Buttons in Header, Chat Input, and Footer
Copy file name to clipboardExpand all lines: docs/introduction/quickstart.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -41,13 +41,13 @@ const MyComponent = () => {
41
41
42
42
:::info Info
43
43
44
-
If you are using [**NextJS**](https://nextjs.org/) and running into errors, look [**here**](/docs/introduction/faq#q8-i-am-using-nextjs-and-running-into-referenceerror-window-is-not-defined-errors-how-can-i-fix-this)!
44
+
If you are using [**NextJS**](https://nextjs.org/) and running into errors, look [**here**](/docs/faq#q8-i-am-using-nextjs-and-running-into-referenceerror-window-is-not-defined-errors-how-can-i-fix-this)!
45
45
46
46
:::
47
47
48
48
## Theming (Optional)
49
49
50
-
If you are looking for a quick way to customize your chatbot, consider browsing for [**`themes`**](/docs/concepts/themes) on [**React ChatBotify Gallery**](https://gallery.react-chatbotify.com). You may then further refine the themes via [**`settings`**](/docs/concepts/settings) and [**`styles`**](/docs/concepts/styles). An example for this can be found [**here**](/docs/examples/basic_theme).
50
+
If you are looking for a quick way to customize your chatbot, consider browsing for [**`themes`**](/docs/concepts/themes) on [**React ChatBotify Gallery**](https://gallery.react-chatbotify.com). You may then further refine the themes via [**`settings`**](/docs/concepts/settings) and [**`styles`**](/docs/concepts/styles). An example for this can be found [**here**](/docs/examples/single_theme).
51
51
52
52
Alternatively, you may also experiment with the `primaryColor` and `secondaryColor` properties in the `general` section of [**`settings`**](/docs/concepts/settings).
0 commit comments