> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# AISmartRepliesConfiguration

> AISmartRepliesConfiguration — CometChat documentation.

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](/web-shared/ai-smart-replies-style) | 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](/ai/smart-replies) & 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

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-react";

    const configuration = new AISmartRepliesConfiguration({
      backIconUrl: "URL",
      loadingIconURL: "URL",
      errorIconURL: "URL",
      emptyIconURL: "URL",
    });
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    import { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-vue";

    const configuration = new AISmartRepliesConfiguration({
      backIconUrl: "URL",
      loadingIconURL: "URL",
      errorIconURL: "URL",
      emptyIconURL: "URL",
    });
    ```
  </Tab>
</Tabs>

#### Custom state views

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-react";

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

  <Tab title="Vue">
    ```javascript theme={null}
    import { AISmartRepliesConfiguration } from "@cometchat/chat-uikit-react";

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

#### Custom style

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { AISmartRepliesConfiguration, AISmartRepliesStyle} from "@cometchat/chat-uikit-react";

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

    configuration = new AISmartRepliesConfiguration({smartRepliesStyle: customSmartRepliesStyle});
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    import { AISmartRepliesConfiguration, AISmartRepliesStyle} from "@cometchat/chat-uikit-react";

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

    configuration = new AISmartRepliesConfiguration({smartRepliesStyle: customSmartRepliesStyle});
    ```
  </Tab>
</Tabs>

#### API Configuration Callback

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    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});
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    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});
    ```
  </Tab>
</Tabs>

#### Custom View Callback

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    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});
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    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});
    ```
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.