> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.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>