> ## 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.

# AIConversationSummaryConfiguration

> AIConversationSummaryConfiguration — CometChat documentation.

| Property | Type | Description |
| - | - | - |
| conversationSummaryStyle | [AIConversationSummaryStyle](/web-shared/ai-conversation-summary-style) | Used to provide custom styling to conversation summary view. |
| closeIconUrl | string | Custom close button icon url. |
| 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. |
| unreadMessageThreshold | number | Conversation summary will be generated only if a conversation has same or more number of unread messages than `unreadMessageThreshold`. |
| apiConfiguration | (user?: CometChat.User, group?: CometChat.Group) => Promise\<Object> | The `apiConfiguration` callback allows you to override the default logic of fetching conversation starters. The `apiConfiguration` callback passes the user/group object of the conversation. You can use the [SDK Method](/ai/conversation-summary) & pass additional configuration to customise the response. |
| customView | (response: string, closeCallBack?: () => void) => Promise\<any> | The `customView` callback allows you to display a custom UI for conversation starters. The `customView` callback passes the conversation summary & 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 { AIConversationSummaryConfiguration } from "@cometchat/uikit-shared";

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

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

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

#### Custom state views

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

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

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

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

#### Custom style

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { AIConversationSummaryConfiguration, AIConversationSummaryStyle} from "@cometchat/uikit-shared";

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

    configuration = new AIConversationSummaryConfiguration({conversationSummaryStyle: customConversationSummaryStyle});
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    import { AIConversationSummaryConfiguration, AIConversationSummaryStyle} from "@cometchat/uikit-shared";

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

    configuration = new AIConversationSummaryConfiguration({conversationSummaryStyle: customConversationSummaryStyle});
    ```
  </Tab>
</Tabs>

#### API Configuration Callback

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { AIConversationSummaryConfiguration } from "@cometchat/uikit-shared";

    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.getConversationSummary(receiverId, receiverType).then(
          (response: any)=>{
            return resolve(response)
        })
        .catch((err: CometChat.CometChatException)=>{
          return  reject(err)
        })
      })
    }

    const configuration = new AIConversationSummaryConfiguration({apiConfiguration: apiConfiguration});
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { AIConversationSummaryConfiguration } from "@cometchat/uikit-shared";

    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.getConversationSummary(receiverId, receiverType).then(
          (response: any)=>{
            return resolve(response)
        })
        .catch((err: CometChat.CometChatException)=>{
          return  reject(err)
        })
      })
    }

    const configuration = new AIConversationSummaryConfiguration({apiConfiguration: apiConfiguration});
    ```
  </Tab>
</Tabs>

#### Custom View Callback

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { AIConversationSummaryConfiguration } from "@cometchat/uikit-shared";

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

    configuration = new AIConversationSummaryConfiguration({customView: customView});
    ```
  </Tab>

  <Tab title="Vue">
    ```javascript theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { AIConversationSummaryConfiguration } from "@cometchat/uikit-shared";

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

    configuration = new AIConversationSummaryConfiguration({customView: customView});
    ```
  </Tab>
</Tabs>


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