AIAssistBotConfiguration

This refers to the properties of the 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

import { AIAssistBotConfiguration } from "@cometchat/uikit-shared";

const configuration = new AIAssistBotConfiguration({
  loadingIconURL: "URL",
  errorIconURL: "URL",
  closeIconUrl: "URL",
  sendIconURL: "URL",
  backIconURL: "URL"
});

Vue

import { AIAssistBotConfiguration } from "@cometchat/uikit-shared"; const
configuration = new AIAssistBotConfiguration({ loadingIconURL: "URL",
errorIconURL: "URL", closeIconUrl: "URL", sendIconURL: "URL", backIconURL: "URL"
});

Custom style

React

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
});

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 });

API Configuration Callback

React

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
});

Vue

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});