AIAssistBot component that are available for customisation.
The AIAssistBotConfiguration has the below properties,
Properties
| Property | Type | Description |
|---|---|---|
| title | (bot: CometChat.User) => string | Used to set a custom title. |
| botFirstMessageText | (bot: CometChat.User) => string | Used to set the first bot message. |
| assistBotStyle | AIAssistBotStyle | Used to provide custom styling to conversation summary view. |
| botMessageBubbleStyle | AIBotMessageBubbleStyle | Used to customise the bot message bubble style. |
| senderMessageBubbleStyle | AISenderMessageBubbleStyle | Used to customise the sender message bubble style |
| messageInputStyle | MessageInputStyle | Used to customise the message input style. |
| avatarStyle | AvatarStyle | Used to customise the avatar style. |
| closeIconUrl | string | Custom close button icon url. |
| sendIconURL | string | Custom send button icon url. |
| backIconURL | string | Custom back button icon url. |
| loadingIconUrl | string | Custom loading icon url. |
| errorIconURL | string | Custom error icon url. |
| apiConfiguration | (user?: CometChat.User, group?: CometChat.Group) => Promise<Object> | The apiConfiguration callback allows you to override the default logic of fetching conversation starters. The apiConfiguration callback passes the user/group object of the conversation. You can use the SDK Method & pass additional configuration to customise the response. |
Usage
Custom icon URLs
- React
- Vue
import { AIAssistBotConfiguration } from "@cometchat/uikit-shared";
const configuration = new AIAssistBotConfiguration({
loadingIconURL: "URL",
errorIconURL: "URL",
closeIconUrl: "URL",
sendIconURL: "URL",
backIconURL: "URL"
});
import { AIAssistBotConfiguration } from "@cometchat/uikit-shared"; const
configuration = new AIAssistBotConfiguration({ loadingIconURL: "URL",
errorIconURL: "URL", closeIconUrl: "URL", sendIconURL: "URL", backIconURL: "URL"
});
Custom style
- React
- Vue
import { AIAssistBotConfiguration, AIAssistBotStyle, AIBotMessageBubbleStyle, AISenderMessageBubbleStyle } from "@cometchat/uikit-shared";
import { AvatarStyle, MessageInputStyle } from "@cometchat/uikit-elements";
const customAssistBotStyle: AIAssistBotStyle = new AIAssistBotStyle({
titleFont: "20px Arial, sans-serif"
});
const customBotMessageBubbleStyle: AIBotMessageBubbleStyle = new AIBotMessageBubbleStyle({
textFont: "20px Arial, sans-serif"
});
const customSenderMessageBubbleStyle: AISenderMessageBubbleStyle = new AISenderMessageBubbleStyle({
textFont: "20px Arial, sans-serif"
});
const customMessageInputStyle: MessageInputStyle = new MessageInputStyle({
textFont: "20px Arial, sans-serif"
});
const customAvatarStyle: AvatarStyle = new AvatarStyle({
borderRadius: "24px"
});
configuration = new AIAssistBotConfiguration({
assistBotStyle: customAssistBotStyle,
botMessageBubbleStyle: customBotMessageBubbleStyle,
senderMessageBubbleStyle: customSenderMessageBubbleStyle,
messageInputStyle: customMessageInputStyle,
avatarStyle: customAvatarStyle
});
import { AIAssistBotConfiguration, AIAssistBotStyle, AIBotMessageBubbleStyle,
AISenderMessageBubbleStyle } from "@cometchat/uikit-shared"; import {
AvatarStyle, MessageInputStyle } from "@cometchat/uikit-elements"; const
customAssistBotStyle: AIAssistBotStyle = new AIAssistBotStyle({ titleFont: "20px
Arial, sans-serif" }); const customBotMessageBubbleStyle:
AIBotMessageBubbleStyle = new AIBotMessageBubbleStyle({ textFont: "20px Arial,
sans-serif" }); const customSenderMessageBubbleStyle: AISenderMessageBubbleStyle
= new AISenderMessageBubbleStyle({ textFont: "20px Arial, sans-serif" }); const
customMessageInputStyle: MessageInputStyle = new MessageInputStyle({ textFont:
"20px Arial, sans-serif" }); const customAvatarStyle: AvatarStyle = new
AvatarStyle({ borderRadius: "24px" }); configuration = new
AIAssistBotConfiguration({ assistBotStyle: customAssistBotStyle,
botMessageBubbleStyle: customBotMessageBubbleStyle, senderMessageBubbleStyle:
customSenderMessageBubbleStyle, messageInputStyle: customMessageInputStyle,
avatarStyle: customAvatarStyle });
API Configuration Callback
- React
- Vue
import { AIAssistBotConfiguration, AIAssistBotStyle, AIBotMessageBubbleStyle, AISenderMessageBubbleStyle } from "@cometchat/uikit-shared";
import { AvatarStyle, MessageInputStyle } from "@cometchat/uikit-elements";
const customAssistBotStyle: AIAssistBotStyle = new AIAssistBotStyle({
titleFont: "20px Arial, sans-serif"
});
const customBotMessageBubbleStyle: AIBotMessageBubbleStyle = new AIBotMessageBubbleStyle({
textFont: "20px Arial, sans-serif"
});
const customSenderMessageBubbleStyle: AISenderMessageBubbleStyle = new AISenderMessageBubbleStyle({
textFont: "20px Arial, sans-serif"
});
const customMessageInputStyle: MessageInputStyle = new MessageInputStyle({
textFont: "20px Arial, sans-serif"
});
const customAvatarStyle: AvatarStyle = new AvatarStyle({
borderRadius: "24px"
});
configuration = new AIAssistBotConfiguration({
assistBotStyle: customAssistBotStyle,
botMessageBubbleStyle: customBotMessageBubbleStyle,
senderMessageBubbleStyle: customSenderMessageBubbleStyle,
messageInputStyle: customMessageInputStyle,
avatarStyle: customAvatarStyle
});
import { CometChat } from "@cometchat/chat-sdk-javascript"; import {
AIAssistBotConfiguration } from "@cometchat/uikit-shared"; const
apiConfiguration = (user?: CometChat.User, group?: CometChat.Group)=> { return
new Promise((resolve, reject) => { const receiverId = user ? user.getUid() :
group.getGuid(); const receiverType = user ? 'user' : 'group'; const botUid =
bot.getUid(); const question = ""; CometChat.askBot(receiverId, receiverType,
botUid, question).then( (response: any)=>{ return resolve(response) })
.catch((err: CometChat.CometChatException)=>{ return reject(err) }) }) } const
configuration = new AIAssistBotConfiguration({apiConfiguration:
apiConfiguration});