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

# AIConversationStarterConfiguration

> AIConversationStarterConfiguration — CometChat documentation.

This refers to the properties of the AIConversationStarter component that are available for customisation.

The `AIConversationStarterConfiguration` has the below properties,

### Properties

| Property                 | Type                                                                    | Description                                                                                                                                                                                                                                                                                                     |
| ------------------------ | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| conversationStarterStyle | [AIConversationStarterStyle](/web-shared/ai-conversation-starter-style) | Used to provide custom styling to conversation starter view.                                                                                                                                                                                                                                                    |
| 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 conversation starters. The `apiConfiguration` callback passes the user/group object of the conversation. You can use the [SDK Method](/ai/conversation-starter) & 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 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 { AIConversationStarterConfiguration } from "@cometchat/chat-uikit-react";

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

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

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

#### Custom state views

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

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

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

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

#### Custom style

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

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

    configuration = new AIConversationStarterConfiguration({conversationStarterStyle: customConversationStarterStyle});
    ```
  </Tab>

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

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

    configuration = new AIConversationStarterConfiguration({conversationStarterStyle: customConversationStarterStyle});
    ```
  </Tab>
</Tabs>

#### API Configuration Callback

<Tabs>
  <Tab title="React">
    ```javascript theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { AIConversationStarterConfiguration } 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.getConversationStarter(receiverId, receiverType).then(
          (response: any)=>{
            return resolve(response)
        })
        .catch((err:CometChat.CometChatException)=>{
          return  reject(err)
        })
      })
    }

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

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

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

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

#### Custom View Callback

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

    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 AIConversationStarterConfiguration({customView: customView});
    ```
  </Tab>

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

    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 AIConversationStarterConfiguration({customView: customView});
    ```
  </Tab>
</Tabs>