AISmartRepliesConfiguration

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

The AISmartRepliesConfiguration has the below properties,

Properties

Property	Type	Description
smartRepliesStyle	AISmartRepliesStyle	Used to provide custom styling to smart replies view.
backIconUrl	string	Custom back button icon.
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 smart replies. 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, backCallBack?: () => 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 { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-react";

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

Vue

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

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

Custom state views

React

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

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

Vue

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

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

Custom style

React

import { AISmartRepliesConfiguration, AISmartRepliesStyle} from "@cometchat/chat-uikit-react";

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

configuration = new AISmartRepliesConfiguration({smartRepliesStyle: customSmartRepliesStyle});

Vue

import { AISmartRepliesConfiguration, AISmartRepliesStyle} from "@cometchat/chat-uikit-react";

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

configuration = new AISmartRepliesConfiguration({smartRepliesStyle: customSmartRepliesStyle});

API Configuration Callback

React

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

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

Vue

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

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

Custom View Callback

Javascript

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

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

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

Vue

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

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

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