AIConversationStarterConfiguration

This refers to the properties of the AIConversationStarter component that are available for customisation.

The AIConversationStarterConfiguration has the below properties,

Properties

Property	Type	Description
conversationStarterStyle	AIConversationStarterStyle	Used to provide custom styling to conversation starter view.
loadingIconUrl	string	Custom loading icon url.
loadingStateView	() => any	Custom loading state view for the component.
emptyIconURL	string	Custom empty icon url.
emptyStateView	() => any	Custom empty state view for the component.
errorIconURL	string	Custom error icon url.
errorStateView	() => any	Custom error state view for the component.
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.
customView	(response: string[], closeCallBack?: () => void) => Promise<any>	The customView callback allows you to display a custom UI for conversation starters. The customView callback passes the list of conversations starters & a close call back which you can call when you want to hide/close your UI.

Usage

Custom icon URLs

React

import { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-react";

const configuration = new AIConversationStarterConfiguration({
  loadingIconURL: "URL",
  errorIconURL: "URL",
  emptyIconURL: "URL",
});

Vue

import { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-vue";

const configuration = new AIConversationStarterConfiguration({
  loadingIconURL: "URL",
  errorIconURL: "URL",
  emptyIconURL: "URL",
});

Custom state views

React

import { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-react";

const configuration = new AIConversationStarterConfiguration({
  errorStateView: () => <CustomErrorStateView />,
  emptyStateView: () => <CustomEmptyStateView />,
  loadingStateView: () => <CustomLoadingStateView />,
});

Vue

import { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-vue";

const configuration = new AIConversationStarterConfiguration({
  errorStateView: () => ({
      componentName: "CustomErrorStateView";
    }),
  emptyStateView: () => ({
      componentName: "CustomEmptyStateView";
    }),
  loadingStateView: () => ({
      componentName: "CustomLoadingStateView";
    }),
});

Custom style

React

import { AIConversationStarterConfiguration, AIConversationStarterStyle} from "@cometchat/chat-uikit-react";

const customConversationStarterStyle: AIConversationStarterStyle = new AIConversationStarterStyle({
  	textFont: "20px Arial, sans-serif"
})

configuration = new AIConversationStarterConfiguration({conversationStarterStyle: customConversationStarterStyle});

Vue

import { AIConversationStarterConfiguration, AIConversationStarterStyle} from "@cometchat/chat-uikit-vue";

const customConversationStarterStyle: AIConversationStarterStyle = new AIConversationStarterStyle({
  	textFont: "20px Arial, sans-serif"
})

configuration = new AIConversationStarterConfiguration({conversationStarterStyle: customConversationStarterStyle});

API Configuration Callback

React

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-react";

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';
    CometChat.getConversationStarter(receiverId, receiverType).then(
      (response: any)=>{
        return resolve(response)
    })
    .catch((err:CometChat.CometChatException)=>{
      return  reject(err)
    })
  })
}

const configuration = new AIConversationStarterConfiguration({apiConfiguration: apiConfiguration});

Vue

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-vue";

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';
    CometChat.getConversationStarter(receiverId, receiverType).then(
      (response: any)=>{
        return resolve(response)
    })
    .catch((err:CometChat.CometChatException)=>{
      return  reject(err)
    })
  })
}

const configuration = new AIConversationStarterConfiguration({apiConfiguration: apiConfiguration});

Custom View Callback

JavaScript

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-react";

const customView = (response, closeCallBack) => {
	return new Promise((resolve, reject) => {
    /** 
    * Use the response & genrate a custom view for displaying the conversation starter.
    */
  	return resolve(<CustomConversationStarterView />);
	})
}

configuration = new AIConversationStarterConfiguration({customView: customView});

Vue

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-vue";

const customView = (response, closeCallBack) => {
	return new Promise((resolve, reject) => {
    /** 
    * Use the response & genrate a custom view for displaying the conversation starter.
    */
  	return resolve({
    componentName: "CustomConversationStarterView"
    });
	})
}

configuration = new AIConversationStarterConfiguration({customView: customView});