AIConversationSummaryConfiguration

Property	Type	Description
conversationSummaryStyle	AIConversationSummaryStyle	Used to provide custom styling to conversation summary view.
closeIconUrl	string	Custom close button icon url.
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.
unreadMessageThreshold	number	Conversation summary will be generated only if a conversation has same or more number of unread messages than unreadMessageThreshold.
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 conversation summary & a close call back which you can call when you want to hide/close your UI.

Usage

Custom icon URLs

React

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

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

Vue

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

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

Custom state views

React

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

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

Vue

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

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

Custom style

React

import { AIConversationSummaryConfiguration, AIConversationSummaryStyle} from "@cometchat/uikit-shared";

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

configuration = new AIConversationSummaryConfiguration({conversationSummaryStyle: customConversationSummaryStyle});

Vue

import { AIConversationSummaryConfiguration, AIConversationSummaryStyle} from "@cometchat/uikit-shared";

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

configuration = new AIConversationSummaryConfiguration({conversationSummaryStyle: customConversationSummaryStyle});

API Configuration Callback

React

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AIConversationSummaryConfiguration } 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';
    CometChat.getConversationSummary(receiverId, receiverType).then(
      (response: any)=>{
        return resolve(response)
    })
    .catch((err: CometChat.CometChatException)=>{
      return  reject(err)
    })
  })
}

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

Vue

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AIConversationSummaryConfiguration } 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';
    CometChat.getConversationSummary(receiverId, receiverType).then(
      (response: any)=>{
        return resolve(response)
    })
    .catch((err: CometChat.CometChatException)=>{
      return  reject(err)
    })
  })
}

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

Custom View Callback

Javascript

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AIConversationSummaryConfiguration } from "@cometchat/uikit-shared";

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 AIConversationSummaryConfiguration({customView: customView});

Vue

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { AIConversationSummaryConfiguration } from "@cometchat/uikit-shared";

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 AIConversationSummaryConfiguration({customView: customView});