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
- Vue
import { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-react";
const configuration = new AISmartRepliesConfiguration({
backIconUrl: "URL",
loadingIconURL: "URL",
errorIconURL: "URL",
emptyIconURL: "URL",
});
import { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-vue";
const configuration = new AISmartRepliesConfiguration({
backIconUrl: "URL",
loadingIconURL: "URL",
errorIconURL: "URL",
emptyIconURL: "URL",
});
Custom state views
- React
- Vue
import { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-react";
const configuration = new AISmartRepliesConfiguration({
errorStateView: () => <CustomErrorStateView />,
emptyStateView: () => <CustomEmptyStateView />,
loadingStateView: () => <CustomLoadingStateView />,
});
import { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-react";
const configuration = new AISmartRepliesConfiguration({
errorStateView: () => ({
componentName: "CustomErrorStateView";
}),
emptyStateView: () => ({
componentName: "CustomEmptyStateView";
}),
loadingStateView: () => ({
componentName: "CustomLoadingStateView";
}),
});
Custom style
- React
- Vue
import { AISmartRepliesConfiguration, AISmartRepliesStyle} from "@cometchat/chat-uikit-react";
const customSmartRepliesStyle = new AISmartRepliesStyle({
textFont: "20px Arial, sans-serif"
})
configuration = new AISmartRepliesConfiguration({smartRepliesStyle: customSmartRepliesStyle});
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
- 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});
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
- 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(<CustomSmartRepliesView />);
})
}
configuration = new AISmartRepliesConfiguration({customView: customView});
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});