Skip to main content
This refers to the properties of the AIAssistBot component that are available for customisation. The AIAssistBotConfiguration has the below properties,

​
Properties

PropertyTypeDescription
title(bot: CometChat.User) => stringUsed to set a custom title.
botFirstMessageText(bot: CometChat.User) => stringUsed to set the first bot message.
assistBotStyleAIAssistBotStyleUsed to provide custom styling to conversation summary view.
botMessageBubbleStyleAIBotMessageBubbleStyleUsed to customise the bot message bubble style.
senderMessageBubbleStyleAISenderMessageBubbleStyleUsed to customise the sender message bubble style
messageInputStyleMessageInputStyleUsed to customise the message input style.
avatarStyleAvatarStyleUsed to customise the avatar style.
closeIconUrlstringCustom close button icon url.
sendIconURLstringCustom send button icon url.
backIconURLstringCustom back button icon url.
loadingIconUrlstringCustom loading icon url.
errorIconURLstringCustom 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"
});

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

​
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
});
⌘I