This refers to the properties of the AISmartReplies component that are available for customisation. The AISmartRepliesConfiguration has the below properties,

​
Properties

PropertyTypeDescription
smartRepliesStyleAISmartRepliesStyleUsed to provide custom styling to smart replies view.
backIconUrlstringCustom back button icon.
loadingIconUrlstringCustom loading icon url.
loadingStateView() => anyCustom loading state view for the component.
emptyIconURLstringCustom empty icon url.
emptyStateView() => anyCustom empty state view for the component.
errorIconURLstringCustom error icon url.
errorStateView() => anyCustom 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

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

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

​
Custom state views

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

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

​
Custom style

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

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

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