Skip to content

Commit 56f99d2

Browse files
tjtanjintjtanjin
committed
chore: Update chatbot api documentation
1 parent 6629e54 commit 56f99d2

File tree

4 files changed

+62
-44
lines changed

4 files changed

+62
-44
lines changed

‎docs/api/events.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -690,7 +690,7 @@ const MyComponent = () => {
690690
};
691691
```
692692

693-
### RcbPostInjectMessageEvent
693+
### RcbPostLoadChatBotEvent
694694

695695
#### Description
696696
Emitted after the chatbot is loaded.
@@ -730,7 +730,7 @@ const MyComponent = () => {
730730
};
731731
```
732732

733-
### RcbPreInjectMessageEvent
733+
### RcbPreLoadChatBotEvent
734734

735735
#### Description
736736
Emitted before the chatbot is loaded.

‎docs/api/settings.md

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const DefaultSettings: Settings = {
3434
text: "Talk to me! 😊",
3535
},
3636
chatButton: {
37-
icon: chatIcon,
37+
icon: ChatIcon,
3838
},
3939
header: {
4040
title: (
@@ -47,13 +47,14 @@ const DefaultSettings: Settings = {
4747
showAvatar: true,
4848
avatar: botAvatar,
4949
buttons: [Button.NOTIFICATION_BUTTON, Button.AUDIO_BUTTON, Button.CLOSE_CHAT_BUTTON],
50-
closeChatIcon: closeChatIcon,
50+
closeChatIcon: CloseChatIcon,
5151
},
5252
notification: {
5353
disabled: false,
5454
defaultToggledOn: true,
5555
volume: 0.2,
56-
icon: notificationIcon,
56+
icon: NotificationIcon,
57+
iconDisabled: NotificationIconDisabled,
5758
sound: notificationSound,
5859
showCount: true,
5960
},
@@ -64,7 +65,8 @@ const DefaultSettings: Settings = {
6465
voiceNames: ["Microsoft David - English (United States)", "Alex (English - United States)"],
6566
rate: 1,
6667
volume: 1,
67-
icon: audioIcon,
68+
icon: AudioIcon,
69+
iconDisabled: AudioIconDisabled,
6870
},
6971
chatHistory: {
7072
disabled: false,
@@ -82,7 +84,7 @@ const DefaultSettings: Settings = {
8284
showCharacterCount: false,
8385
characterLimit: -1,
8486
botDelay: 1000,
85-
sendButtonIcon: sendButtonIcon,
87+
sendButtonIcon: SendButtonIcon,
8688
blockSpam: true,
8789
sendOptionOutput: true,
8890
sendCheckboxOutput: true,
@@ -126,20 +128,29 @@ const DefaultSettings: Settings = {
126128
autoSendDisabled: false,
127129
autoSendPeriod: 1000,
128130
sendAsAudio: false,
129-
icon: voiceIcon,
131+
icon: VoiceIcon,
132+
iconDisabled: VoiceIconDisabled,
130133
},
131134
footer: {
132135
text: (
133136
<div style={{cursor: "pointer", display: "flex", flexDirection: "row", alignItems: "center", columnGap: 3}}
134137
onClick={() => window.open("https://react-chatbotify.com")}
135138
>
136139
<span key={0}>Powered By </span>
137-
<img key={1} style={{
138-
borderRadius: "50%",
139-
width: 14, height: 14, backgroundImage: `url(${chatIcon}),
140-
linear-gradient(to right, #42b0c5, #491d8d)`
141-
}}>
142-
</img>
140+
<div
141+
key={1}
142+
style={{
143+
borderRadius: "50%",
144+
width: 14,
145+
height: 14,
146+
display: "flex",
147+
justifyContent: "center",
148+
alignItems: "center",
149+
background: "linear-gradient(to right, #42b0c5, #491d8d)",
150+
}}
151+
>
152+
<ChatIcon style={{ width: "80%", height: "80%" }} />
153+
</div>
143154
<span key={2} style={{fontWeight: "bold"}}> React ChatBotify</span>
144155
</div>
145156
),
@@ -149,13 +160,15 @@ const DefaultSettings: Settings = {
149160
disabled: false,
150161
multiple: true,
151162
accept: ".png",
152-
icon: fileAttachmentIcon,
163+
icon: FileAttachmentIcon,
164+
iconDisabled: FileAttachmentIcon,
153165
sendFileName: true,
154166
showMediaDisplay: false,
155167
},
156168
emoji: {
157169
disabled: false,
158-
icon: emojiIcon,
170+
icon: EmojiIcon,
171+
iconDisabled: EmojiIcon,
159172
list: ["😀", "😃", "😄", "😅", "😊", "😌", "😇", "🙃", "🤣", "😍", "🥰", "🥳", "🎉", "🎈", "🚀", "⭐️"]
160173
},
161174
toast: {
@@ -181,8 +194,8 @@ const DefaultSettings: Settings = {
181194
rcbUserSubmitText: false,
182195
rcbUserUploadFile: false,
183196
rcbTextAreaChangeValue: false,
184-
rcbPreInjectMessage: false,
185-
rcbPostInjectMessage: false,
197+
rcbPreLoadChatBot: false,
198+
rcbPostLoadChatBot: false,
186199
},
187200
ariaLabel: {
188201
chatButton: "open chat",
@@ -265,7 +278,8 @@ Properties here handle the playing of audio for messages sent by the bot. When t
265278
| voiceNames | `Array<string>` | "Google US English Male" | An array of voice names for the chatbot audio. Voices are based off what is provided in [**SpeechSynthesis**](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/getVoices) - you can provide as many voices as you wish (**the first voice matched will be used**). |
266279
| rate | `number` | 1 | The rate (between 0.1 to 10) at which chatbot audio is played. |
267280
| volume | `number` | 1 | The volume (between 0 to 1) at which chatbot audio is played. |
268-
| icon | `string` | - | Image import or URL for the audio icon to be displayed in the chatbot interface. |
281+
| icon | `SVGElement` \| `string` | - | SVG element import or image URL for the audio icon to be displayed in the chatbot interface. |
282+
| iconDisabled | `SVGElement` \| `string` | - | SVG element import or image URL for the audio icon to be displayed in the chatbot interface **when it is disabled**. |
269283

270284
### botBubble
271285

@@ -286,7 +300,7 @@ Properties here handle the chat button that is used to toggle chat window. Note
286300

287301
| Name | Type | Default | Description |
288302
| -------------------------- | ------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
289-
| icon | `string` | - | Image import or URL for the chatbot button. |
303+
| icon | `SVGElement` \| `string` | - | SVG element import or image URL for the chatbot button. |
290304

291305
### chatWindow
292306

@@ -327,7 +341,7 @@ Properties here handle the chat input sent by the user. Note that when chatbot i
327341
| showCharacterCount | `boolean` | false | Specifies whether to show the character count and limit (note that this value is **ignored if** `characterLimit` **is not set to 0 or more**). |
328342
| characterLimit | `number` | -1 | The maximum number of characters allowed in the chat input, defaults to -1 (no limit). |
329343
| botDelay | `number` | 1000 | The delay in milliseconds before chatbot responses are displayed (**minimum value of 500**). |
330-
| sendButtonIcon | `string` | - | Image import or URL for the send button to be displayed in the chat input. |
344+
| sendButtonIcon | `SVGElement` \| `string` | - | SVG element import or image URL for the send button to be displayed in the chat input. |
331345
| blockSpam | `boolean` | true | Specifies whether user input should be blocked while the bot is processing its next action (highly recommended to keep this `true` as spamming messages can result in unexpected behaviors). |
332346
| sendOptionOutput | `boolean` | true | Specifies whether to send user option as a message to the bot. |
333347
| sendCheckboxOutput | `boolean` | true | Specifies whether to send user selection(s) as a message to the bot. |
@@ -340,7 +354,8 @@ Properties here handle the emoji picker. Note that this feature will be disabled
340354
| Name | Type | Default | Description |
341355
| -------------------------- | ------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
342356
| disabled | `boolean` | false | Specifies whether emoji picker is disabled. |
343-
| icon | `string` | - | Image import or URL for the emoji icon to be displayed in the chatbot footer. |
357+
| icon | `SVGElement` \| `string` | - | SVG element import or image URL for the emoji icon to be displayed in the chatbot footer. |
358+
| iconDisabled | `SVGElement` \| `string` | - | SVG element import or image URL for the emoji icon to be displayed in the chatbot footer **when it is disabled**. |
344359
| list | `Array<string>` | ["😀", "😃", "😄", "😅", "😊", "😌", "😇", "🙃", "🤣", "😍", "🥰", "🥳", "🎉", "🎈", "🚀", "⭐️"] | An array of emojis available for selection in the emoji picker. |
345360

346361
### event
@@ -378,7 +393,8 @@ Properties here handle the file attachment button.
378393
| accept | `string` | * | The accepted file types for file attachments (e.g. `".png, .jpg"` to restrict file types or `*` to accept all file types). |
379394
| sendFileName | `boolean` | true | Specifies whether to send a message with name(s) of file attachments as a message to the bot. |
380395
| showMediaDisplay | `boolean` | true | Specifies whether file attachments that are either image, video or audio will be displayed (previewed). |
381-
| icon | `string` | - | Image import or URL for the file attachment icon to be displayed in the chatbot footer. |
396+
| icon | `SVGElement` \| `string` | - | SVG element import or image URL for the file attachment icon to be displayed in the chatbot footer. |
397+
| iconDisabled | `SVGElement` \| `string` | - | SVG element import or image URL for the file attachment icon to be displayed in the chatbot footer **when it is disabled**. |
382398

383399
### footer
384400

@@ -416,7 +432,7 @@ Properties here handle the chat header.
416432
| title | `string \| JSX.Element` | - | The title to be displayed in the chatbot header. |
417433
| showAvatar | `boolean` | true | Specifies whether the avatar should be displayed in the chatbot header. |
418434
| avatar | `string` | - | Image import or URL for the avatar to be displayed in the chatbot header. | |
419-
| closeChatIcon | `string` | - | Image import or URL for the close chat icon to be displayed in the chatbot header. |
435+
| closeChatIcon | `SVGElement` \| `string` | - | SVG element import or image URL for the close chat icon to be displayed in the chatbot header. |
420436
| buttons | `Array<string \| JSX.Element>` | [Button.NOTIFICATION_BUTTON, Button.AUDIO_BUTTON, Button.CLOSE_CHAT_BUTTON] | An ordered list of buttons to show in the header (supports both default buttons and custom components) - for the list of default buttons, import the `Button` constant from the library. |
421437

422438
### notification
@@ -429,7 +445,8 @@ Properties here handle the message notification sent to the user. When toggled o
429445
| defaultToggledOn | `boolean` | true | Specifies whether chatbot notifications are toggled on by default. |
430446
| volume | `number` | 0.2 | The volume (between 0 to 1) at which notification sound is played. | |
431447
| notificationSound | `string` | - | The sound to be played for chatbot notifications. |
432-
| icon | `string` | - | Image import or URL for the notification icon to be displayed in the chatbot header.
448+
| icon | `SVGElement` \| `string` | - | SVG element import or image URL for the notification icon to be displayed in the chatbot header.
449+
| iconDisabled | `SVGElement` \| `string` | - | SVG element import or image URL for the notification icon to be displayed in the chatbot header **when it is disabled**.
433450
| showCount | `boolean` | true | Specifies whether unread message count is shown on the top right corner of the chatbot button (this option is ignored if notification is `disabled`). |
434451

435452
### sensitiveInput
@@ -488,4 +505,5 @@ Properties here handle the voice to text feature (**feature is available only on
488505
| autoSendDisabled | `boolean` | false | Specifies whether auto-sending of voice messages into the chat is disabled. |
489506
| autoSendPeriod | `number` | 1000 | The period in milliseconds after which voice messages are automatically sent. |
490507
| sendAsAudio | `boolean` | false | Specifies whether voice input will be sent as an audio file instead (note that `autoSend` features will not work if this is `true`). |
491-
| icon | `string` | - | Image import or URL for the voice icon to be displayed in the chatbot interface. |
508+
| icon | `SVGElement` \| `string` | - | SVG element import or image URL for the voice icon to be displayed in the chatbot interface. |
509+
| iconDisabled | `SVGElement` \| `string` | - | SVG element import or image URL for the voice icon to be displayed in the chatbot interface **when it is disabled**. |

‎docs/api/styles.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export const DefaultStyles: Styles = {
7070
voiceIconStyle: {},
7171
voiceIconDisabledStyle: {},
7272
sendIconStyle: {},
73+
sendIconDisabledStyle: {},
7374
rcbTypingIndicatorContainerStyle: {},
7475
rcbTypingIndicatorDotStyle: {},
7576
toastPromptContainerStyle: {},
@@ -145,6 +146,7 @@ If you wish to refine the appearance of the chatbot, these are the list of secti
145146
| voiceIconStyle | `object` | {} | Styles for the voice icon. |
146147
| voiceIconDisabledStyle | `object` | {} | Styles for the disabled voice icon. |
147148
| sendIconStyle | `object` | {} | Styles for the send icon. |
149+
| sendIconDisabledStyle | `object` | {} | Styles for the disabled send icon. |
148150
| rcbTypingIndicatorContainerStyle | `object` | {} | Styles for the typing indicator container. |
149151
| rcbTypingIndicatorDotStyle | `object` | {} | Styles for the typing indicator dot. |
150152
| toastPromptContainerStyle | `object` | {} | Styles for the toast prompt container. |

0 commit comments

Comments
 (0)