Skip to content

Commit 98e4320

Browse files
tjtanjintjtanjin
committed
docs: Minor updates
1 parent ea011fa commit 98e4320

File tree

13 files changed

+160
-57
lines changed

13 files changed

+160
-57
lines changed

‎docs/api/events.md

+100-25
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,30 @@ Before adding your own listeners with custom logic for events, it may be helpful
1919

2020
Below is a list of available events with a brief description for each one. You can use these events to listen for and respond to key interactions in the chatbot.
2121

22-
| Name | Description |
23-
|----------------------------|--------------------------------------------------------------------|
24-
| RcbChangePathEvent | Emitted when the chatbot changes its conversation path. |
25-
| RcbChunkStreamMessageEvent | Emitted when a chunk of a streamed message is received. |
26-
| RcbDismissToastEvent | Emitted when a toast message is dismissed. |
27-
| RcbLoadChatHistoryEvent | Emitted when the chat history is loaded. |
28-
| RcbPostInjectMessageEvent | Emitted after a message is injected into the chat. |
29-
| RcbPreInjectMessageEvent | Emitted before a message is injected into the chat. |
30-
| RcbRemoveMessageEvent | Emitted when a message is removed from the chat. |
31-
| RcbShowToastEvent | Emitted when a toast message is displayed. |
32-
| RcbStartStreamMessageEvent | Emitted when the chatbot starts streaming a message. |
33-
| RcbStopStreamMessageEvent | Emitted when the chatbot stops streaming a message. |
34-
| RcbStartSpeakAudioEvent | Emitted when a message is read out (audio starts to play) |
35-
| RcbToggleAudioEvent | Emitted when the audio is toggled on or off. |
36-
| RcbToggleChatWindowEvent | Emitted when the chat window is toggled open or closed. |
37-
| RcbToggleNotificationsEvent | Emitted when notifications are toggled on or off. |
38-
| RcbToggleVoiceEvent | Emitted when the voice feature is toggled on or off. |
39-
| RcbUserSubmitTextEvent | Emitted when a user submits text in the chat. |
40-
| RcbUserUploadFileEvent | Emitted when a user uploads a file. |
41-
| RcbTextAreaChangeValueEvent | Emitted when the text area value is changed. |
42-
| RcbPostLoadChatBotEvent | Emitted after the chatbot is loaded. |
43-
| RcbPreLoadChatBotEvent | Emitted before the chatbot is loaded. |
22+
| Name | Description |
23+
|-------------------------------------|-------------------------------------------------------------------|
24+
| RcbChangePathEvent | Emitted when the chatbot changes its conversation path. |
25+
| RcbChunkStreamMessageEvent | Emitted when a chunk of a streamed message is received. |
26+
| RcbDismissToastEvent | Emitted when a toast message is dismissed. |
27+
| RcbLoadChatHistoryEvent | Emitted when the chat history is loaded. |
28+
| RcbPostInjectMessageEvent | Emitted after a message is injected into the chat. |
29+
| RcbPreInjectMessageEvent | Emitted before a message is injected into the chat. |
30+
| RcbRemoveMessageEvent | Emitted when a message is removed from the chat. |
31+
| RcbShowToastEvent | Emitted when a toast message is displayed. |
32+
| RcbStartSimulateStreamMessageEvent | Emitted when the chatbot starts simulating streaming a message. |
33+
| RcbStopSimulateStreamMessageEvent | Emitted when the chatbot finishes simulating streaming a message. |
34+
| RcbStartStreamMessageEvent | Emitted when the chatbot starts streaming a message. |
35+
| RcbStopStreamMessageEvent | Emitted when the chatbot stops streaming a message. |
36+
| RcbStartSpeakAudioEvent | Emitted when a message is read out (audio starts to play) |
37+
| RcbToggleAudioEvent | Emitted when the audio is toggled on or off. |
38+
| RcbToggleChatWindowEvent | Emitted when the chat window is toggled open or closed. |
39+
| RcbToggleNotificationsEvent | Emitted when notifications are toggled on or off. |
40+
| RcbToggleVoiceEvent | Emitted when the voice feature is toggled on or off. |
41+
| RcbUserSubmitTextEvent | Emitted when a user submits text in the chat. |
42+
| RcbUserUploadFileEvent | Emitted when a user uploads a file. |
43+
| RcbTextAreaChangeValueEvent | Emitted when the text area value is changed. |
44+
| RcbPostLoadChatBotEvent | Emitted after the chatbot is loaded. |
45+
| RcbPreLoadChatBotEvent | Emitted before the chatbot is loaded. |
4446

4547
## Event Details
4648

@@ -257,9 +259,6 @@ Emitted before a message is injected into the chat.
257259
| Name | Type | Description |
258260
|------------------|----------------------|-----------------------------------------------------------------|
259261
| message | `Message` | The message being sent into the chat. |
260-
| simStreamChunker | `function` \| `null` | A custom function to parse messages for simulated streaming |
261-
262-
Note: The `simStreamChunker` function takes in a string and returns an array of strings. By default, this field is null and strings are split per-character. A custom function can be passed in to control how simulated streaming is carried out. For example, in the implementation of the [**HTML Renderer Plugin**](https://www.npmjs.com/package/@rcb-plugins/html-renderer), a custom function is passed in to skip over html tags when simulating message stream.
263262

264263
#### Code Example
265264
```jsx
@@ -358,6 +357,82 @@ const MyComponent = () => {
358357
};
359358
```
360359

360+
### RcbStartSimulateStreamMessageEvent
361+
362+
#### Description
363+
Emitted when the chatbot starts simulating streaming a message.
364+
365+
#### Note
366+
- Requires `settings.event.rcbStartSimulateStreamMessage` to be set to true.
367+
- Event is **preventable** with `event.preventDefault()`.
368+
369+
#### Data
370+
| Name | Type | Description |
371+
|-----------------------|----------------------|------------------------------------------------------------- |
372+
| message | `Message` | The full message that will be used for simulated streaming. |
373+
| simulateStreamChunker | `function` \| `null` | A custom function to parse messages for simulated streaming. |
374+
375+
Note: The `simulateStreamChunker` function takes in a string and returns an array of strings. By default, this field is null and strings are split per-character. A custom function can be passed in to control how simulated streaming is carried out. For example, in the implementation of the [**HTML Renderer Plugin**](https://www.npmjs.com/package/@rcb-plugins/html-renderer), a custom function is passed in to skip over html tags when simulating message stream.
376+
377+
#### Code Example
378+
```jsx
379+
import { useEffect } from "react";
380+
import { RcbStartSimulateStreamMessageEvent } from "react-chatbotify";
381+
382+
const MyComponent = () => {
383+
useEffect(() => {
384+
const handleStartSimulateStreamMessage = (event: RcbStartSimulateStreamMessageEvent) => {
385+
// handle the start simulate stream message event
386+
};
387+
388+
window.addEventListener("rcb-start-simulate-stream-message", handleStartSimulateStreamMessage);
389+
return () => {
390+
window.removeEventListener("rcb-start-simulate-stream-message", handleStartSimulateStreamMessage);
391+
};
392+
}, []);
393+
394+
return (
395+
<ExampleComponent/>
396+
);
397+
};
398+
```
399+
400+
### RcbStopSimulateStreamMessageEvent
401+
402+
#### Description
403+
Emitted when the chatbot finishes simulating streaming a message.
404+
405+
#### Note
406+
- Requires `settings.event.rcbStopSimulateStreamMessage` to be set to true.
407+
408+
#### Data
409+
| Name | Type | Description |
410+
|-----------|-----------|-----------------------------------------------------------------|
411+
| message | `Message` | The full message that was used for simulated streaming. |
412+
413+
#### Code Example
414+
```jsx
415+
import { useEffect } from "react";
416+
import { RcbStopSimulateStreamMessageEvent } from "react-chatbotify";
417+
418+
const MyComponent = () => {
419+
useEffect(() => {
420+
const handleStopSimulateStreamMessage = (event: RcbStopSimulateStreamMessageEvent) => {
421+
// handle the stop simulate stream message event
422+
};
423+
424+
window.addEventListener("rcb-stop-simulate-stream-message", handleStopSimulateStreamMessage);
425+
return () => {
426+
window.removeEventListener("rcb-stop-simulate-stream-message", handleStopSimulateStreamMessage);
427+
};
428+
}, []);
429+
430+
return (
431+
<ExampleComponent/>
432+
);
433+
};
434+
```
435+
361436
### RcbStartStreamMessageEvent
362437

363438
#### Description

‎docs/api/hooks.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,11 @@ Below is a detailed description of each hook and the functions they expose.
109109
The `useAudio` hook allows you to track and manage the chatbot's audio functionality.
110110

111111
#### Return Values
112-
| Name | Type | Description |
113-
| -------------- | ---------- | ------------------------------------------------------ |
114-
| audioToggledOn | `boolean ` | Indicates if the chatbot audio is currently on or off. |
115-
| toggleAudio | `async function` | Toggles the chatbot audio on or off. |
112+
| Name | Type | Description |
113+
| -------------- | ---------------- | ----------------------------------------------------------- |
114+
| audioToggledOn | `boolean ` | Indicates if the chatbot audio is currently on or off. |
115+
| toggleAudio | `async function` | Toggles the chatbot audio on or off. |
116+
| speakAudio | `async function` | Speaks out the given text using the chatbot audio settings. |
116117

117118
#### Code Example
118119
```jsx

‎docs/api/params.md

+31-6
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@ The following table provides details about the parameters available for attribut
2020
| prevPath | `string` | All Attributes | Represents the previous path in the chat (can be null if no previous path exists). |
2121
| goToPath | `async function` | All Attributes | A utility function for navigating to another block. |
2222
| injectMessage | `async function` | All Attributes | A utility function to inject a message into the chat. |
23-
| streamMessage | `async function` | All Attributes | Streams a message into the chat. You can refer to the [**Real-Time Streaming**](/docs/examples/real_time_stream) example. |
24-
| endStreamMessage | `async function` | All Attributes | Ends an existing message stream. You can refer to the [**Real-Time Streaming**](/docs/examples/real_time_stream) example. |
23+
| simulateStreamMessage | `async function` | All Attributes | Simulates streaming a message into the chat. You can refer to the [**Simulated Stream**](/docs/examples/simulated_stream) example. |
24+
| streamMessage | `async function` | All Attributes | Streams a message into the chat. You can refer to the [**Real-Time Stream**](/docs/examples/real_time_stream) example. |
25+
| endStreamMessage | `async function` | All Attributes | Ends an existing message stream. You can refer to the [**Real-Time Stream**](/docs/examples/real_time_stream) example. |
2526
| removeMessage | `async function` | All Attributes | Removes a message from the chat by message id. |
2627
| setTextAreaValue| `async function` | All Attributes | Sets a value directly within the text area. |
2728
| showToast | `async function` | All Attributes | Shows a toast that is dismissed after a duration or on user click. |
@@ -135,6 +136,30 @@ start: {
135136
}
136137
```
137138

139+
### simulateStreamMessage
140+
141+
#### Description
142+
Simulates streaming a message into the chat. This works by taking the entire text string and splitting it up to insert into the chat bubbble. For a detailed example on how to use this parameter, refer to the [**simulated stream**](/docs/examples/simulated_stream) example.
143+
144+
#### Type
145+
`async function`
146+
147+
#### Parameters
148+
- `content` (required): a `string` value containing the text to simulate stream for.
149+
- `sender` (optional): a `string` value representing the sender of the message (`user` or `bot`). Defaults to `bot`.
150+
- `simulateStreamChunker` (optional): a `function` containing logic for chunking text content for streaming.
151+
152+
#### Code Example
153+
```jsx
154+
start: {
155+
message: (params) => {
156+
// take for example the text below is streamed in character by character
157+
const textToStream = "I'm just an example text"
158+
await params.simulateStreamMessage(textToStream);
159+
}
160+
}
161+
```
162+
138163
### streamMessage
139164

140165
#### Description
@@ -153,9 +178,9 @@ start: {
153178
message: (params) => {
154179
// take for example the text below is streamed in character by character
155180
const textToStream = "I'm just an example text"
156-
for (let i = 0; i < text.length; i++) {
181+
for (let i = 0; i < textToStream.length; i++) {
157182
// this call replaces the last message sent by the bot with the new content
158-
await params.streamMessage(text.slice(0, i + 1));
183+
await params.streamMessage(textToStream.slice(0, i + 1));
159184
}
160185
// to end the stream once we're done streaming
161186
await params.endStreamMessage();
@@ -180,9 +205,9 @@ start: {
180205
message: (params) => {
181206
// take for example the text below is streamed in character by character
182207
const textToStream = "I'm just an example text"
183-
for (let i = 0; i < text.length; i++) {
208+
for (let i = 0; i < textToStream.length; i++) {
184209
// this call replaces the last message sent by the bot with the new content
185-
await params.streamMessage(text.slice(0, i + 1));
210+
await params.streamMessage(textToStream.slice(0, i + 1));
186211
}
187212
// to end the stream once we're done streaming
188213
await params.endStreamMessage();

‎docs/api/settings.md

+8-6
Original file line numberDiff line numberDiff line change
@@ -108,14 +108,14 @@ const DefaultSettings: Settings = {
108108
animate: true,
109109
showAvatar: false,
110110
avatar: userAvatar,
111-
simStream: false,
111+
simulateStream: false,
112112
streamSpeed: 30,
113113
},
114114
botBubble: {
115115
animate: true,
116116
showAvatar: false,
117117
avatar: botAvatar,
118-
simStream: false,
118+
simulateStream: false,
119119
streamSpeed: 30,
120120
},
121121
voice: {
@@ -177,6 +177,8 @@ const DefaultSettings: Settings = {
177177
event: {
178178
rcbPreInjectMessage: false,
179179
rcbPostInjectMessage: false,
180+
rcbStartSimulateStreamMessage: false,
181+
rcbStopSimulateStreamMessage: false,
180182
rcbStartStreamMessage: false,
181183
rcbChunkStreamMessage: false,
182184
rcbStopStreamMessage: false,
@@ -294,8 +296,8 @@ Properties here handle the chat bubble for messages sent by the bot.
294296
| animate | `boolean` | true | Specifies whether the bot chat bubbles should be animated. |
295297
| showAvatar | `boolean` | false | Specifies whether the avatar should be displayed for bot chat bubbles. |
296298
| avatar | `string` | - | Image import or URL for the avatar to be displayed for bot chat bubbles. | |
297-
| simStream | `boolean` | false | Specifies whether to simulate text messages from the bot as a stream. |
298-
| streamSpeed | `number` | 30 | Specifies the interval in milliseconds between streaming each character (ignored if `simStream` is false). | |
299+
| simulateStream | `boolean` | false | Specifies whether to simulate text messages from the bot as a stream. |
300+
| streamSpeed | `number` | 30 | Specifies the interval in milliseconds between streaming each character (ignored if `simulateStream` is false). | |
299301

300302
### chatButton
301303

@@ -501,8 +503,8 @@ Properties here handle the chat bubble for messages sent by the user.
501503
| animate | `boolean` | true | Specifies whether the user chat bubbles should be animated. |
502504
| showAvatar | `boolean` | false | Specifies whether the avatar should be displayed for user chat bubbles. |
503505
| avatar | `string` | - | Image import or URL for the avatar to be displayed for user chat bubbles. |
504-
| simStream | `boolean` | false | Specifies whether to simulate text messages from the user as a stream. |
505-
| streamSpeed | `number` | 30 | Specifies the interval in milliseconds between streaming each character (ignored if `simStream` is false). |
506+
| simulateStream | `boolean` | false | Specifies whether to simulate text messages from the user as a stream. |
507+
| streamSpeed | `number` | 30 | Specifies the interval in milliseconds between streaming each character (ignored if `simulateStream` is false). |
506508

507509
### voice
508510

‎docs/examples/real_time_stream.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const MyChatBot = () => {
8888
}
8989
}
9090
return (
91-
<ChatBot settings={{general: {embedded: true}, chatHistory: {storageKey: "example_real_time_stream"}, botBubble: {simStream: true}}} flow={flow}/>
91+
<ChatBot settings={{general: {embedded: true}, chatHistory: {storageKey: "example_real_time_stream"}, botBubble: {simulateStream: true}}} flow={flow}/>
9292
);
9393
};
9494

0 commit comments

Comments
 (0)