> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/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>