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

# Messages

> Messages — CometChat documentation.

## Overview

The Messages is a [Composite Component](/ui-kit/react/v4/components-overview#composite-components) that manages messages for users and groups.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/FQNeiVxajtzWdB3i/images/ba8c04cb-messages_overview_web_screens-22e012840727aca444490c497dc4704a.png?fit=max&auto=format&n=FQNeiVxajtzWdB3i&q=85&s=788b2d3f0a9e62dc94a3afb9861062fe" width="3600" height="2400" data-path="images/ba8c04cb-messages_overview_web_screens-22e012840727aca444490c497dc4704a.png" />
</Frame>

The Messages component is composed of three individual components, [MessageHeader](/ui-kit/react/v4/message-header), [MessageList](/ui-kit/react/v4/message-list), and [MessageComposer](/ui-kit/react/v4/message-composer). In addition, the Messages component also navigates to the [Details](/ui-kit/react/v4/group-details) and [ThreadedMessages](/ui-kit/react/v4/threaded-messages) components.

| Components                                             | Description                                                                                                                                                                                              |
| ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [MessageHeader](/ui-kit/react/v4/message-header)       | `CometChatMessageHeader` displays the `User` or `Group` information using CometChat SDK's `User` or `Group object.` It also shows the typing indicator when the user starts typing in `MessageComposer`. |
| [MessageList](/ui-kit/react/v4/message-list)           | `CometChatMessageList` is one of the core UI components. It displays a list of messages and handles real-time operations.                                                                                |
| [MessageComposer](/ui-kit/react/v4/message-composer)   | `CometChatMessageComposer` is an independent and critical component that allows users to compose and send various types of messages includes text, image, video and custom messages.                     |
| [Details](/ui-kit/react/v4/group-details)              | `CometChatDetails` is a component that displays all the available options available for `Users` & `Groups`                                                                                               |
| [ThreadedMessages](/ui-kit/react/v4/threaded-messages) | `CometChatThreadedMessages` is a component that displays all replies made to a particular message in a conversation.                                                                                     |

## Usage

### Integration

The following code snippet illustrates how you can directly incorporate the Messages component.

<Tabs>
  <Tab title="MessagesDemo.tsx">
    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessages } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

      return (
        <>
          {chatUser &&
            <CometChatMessages
                user={chatUser}
            />
          }
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="App.tsx">
    ```typescript theme={null}
    import { MessagesDemo } from "./MessagesDemo";

    export default function App() {
      return (
        <div className="App">
          <div>
            <MessagesDemo />
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

***

### Actions

[Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

The Messages component does not have its actions. However, since it's a [Composite Component](/ui-kit/react/v4/components-overview#composite-components), you can use the actions of its components by utilizing the [Configurations](#configuration) object of each component.

**Example**

In this example, we are employing the [onThreadRepliesClick](/ui-kit/react/v4/message-list#1-onthreadrepliesclick) action from the MessageList Component through the MessageListConfiguration object.

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React, { useEffect, useState } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessages,
      MessageListConfiguration,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState<CometChat.User | null>(null);

      useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const getOnThreadRepliesClick = () => {
        // your custom actions
      };

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser}
              messageListConfiguration={
                new MessageListConfiguration({
                  onThreadRepliesClick: { getOnThreadRepliesClick },
                })
              }
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React, { useEffect, useState } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessages,
      MessageListConfiguration,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState(null);

      useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const getOnThreadRepliesClick = () => {
        // your custom actions
      };

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser}
              messageListConfiguration={
                new MessageListConfiguration({
                  onThreadRepliesClick: { getOnThreadRepliesClick },
                })
              }
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

***

On thread replies click:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/RI0xrNuukR5gbXqh/images/dd7f44b3-on_thread_replies_click_threaded_message-ca4103d17d05178575cd0afcc00b3224.png?fit=max&auto=format&n=RI0xrNuukR5gbXqh&q=85&s=5b939ccbce590c14f7b9234147a99035" width="1800" height="1199" data-path="images/dd7f44b3-on_thread_replies_click_threaded_message-ca4103d17d05178575cd0afcc00b3224.png" />
</Frame>

Thread Screen:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/wITpHRGFWGJvJnmU/images/f14d441a-Threaded_messages_web_screens-6f3b877a0fe2abb8a1965f1aef7af690.png?fit=max&auto=format&n=wITpHRGFWGJvJnmU&q=85&s=99c84ce2f53bff25d8dc36f7cfe8eedc" width="3600" height="2400" data-path="images/f14d441a-Threaded_messages_web_screens-6f3b877a0fe2abb8a1965f1aef7af690.png" />
</Frame>

<Info>
  The Messages Component overrides the [onThreadRepliesClick](/ui-kit/react/v4/message-list#1-onthreadrepliesclick) action to navigate to the [ThreadedMessages](/ui-kit/react/v4/threaded-messages) component. If you override `onThreadRepliesClick`, it will also override the default behavior of the Messages Component.
</Info>

### Filters

**Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.

The Messages component does not have its filters. But as it is a [Composite Component](/ui-kit/react/v4/components-overview#composite-components), you can use the filters of its components by using the [Configurations](#configuration) object of each component. For more details on the filters of its components, please refer to [MessageList Filters](/ui-kit/react/v4/message-list#filters).

**Example**

In this example, we're applying the MessageList Component filter to the Messages Component using `MessageListConfiguration`.

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessages,
      MessageListConfiguration,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser}
              messageListConfiguration={
                new MessageListConfiguration({
                  messagesRequestBuilder: new CometChat.MessagesRequestBuilder()
                    .setSearchKeyword("Your Search Keyword")
                    .setLimit(10),
                })
              }
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessages,
      MessageListConfiguration,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState(null);

      useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser}
              messageListConfiguration={
                new MessageListConfiguration({
                  messagesRequestBuilder: new CometChat.MessagesRequestBuilder()
                    .setSearchKeyword("Your Search Keyword")
                    .setLimit(10),
                })
              }
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

***

### Events

[Events](/ui-kit/react/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

The `Messages` component does not produce any events directly.

## Customization

To fit your app's design requirements, you can customize the appearance of the Messages component. We provide exposed methods that allow you to modify the experience and behavior according to your specific needs.

### Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

#### 1. Messages Style

You can customize the appearance of the Messages Component by applying the MessagesStyle to it using the following code snippet.

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React, { useEffect, useState } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessages, MessagesStyle } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState<CometChat.User | null>(null);

      useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const messagesStyle = new MessagesStyle({
        background: "transparent",
        border: "1px solid black",
        borderRadius: "20px",
        height: "100vh",
      });

      return (
        <>
          {chatUser && (
            <CometChatMessages user={chatUser} messagesStyle={messagesStyle} />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React, { useEffect, useState } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessages, MessagesStyle } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState(null);

      useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const messagesStyle = new MessagesStyle({
        background: "transparent",
        border: "1px solid black",
        borderRadius: "20px",
        height: "100vh",
      });

      return (
        <>
          {chatUser && (
            <CometChatMessages user={chatUser} messagesStyle={messagesStyle} />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

List of properties exposed by MessagesStyle

| Property         | Description                                                                                            | Code                    |
| ---------------- | ------------------------------------------------------------------------------------------------------ | ----------------------- |
| **background**   | Sets all background style properties at once, such as color, image, origin and size, or repeat method. | `background:"sting",`   |
| **border**       | Sets the border of the component                                                                       | `border:"string"`       |
| **borderRadius** | Sets the border radius of the component                                                                | `borderRadius:"string"` |
| **height**       | Sets the height of the component                                                                       | `height:"string"`       |
| **width**        | Sets the width of the component                                                                        | `width:"string"`        |

#### 2. Component's Styles

Being a [Composite component](/ui-kit/react/v4/components-overview#composite-components), the Messages Component allows you to customize the styles of its components using their respective Configuration objects.

For a list of all available properties, refer to each component's styling documentation: [MesssageHeader Styles](/ui-kit/react/v4/message-header#1-messageheader-style), [MessageList Styles](/ui-kit/react/v4/message-list#style), [MessageComposer Styles](/ui-kit/react/v4/message-composer#style), [Details Styles](/ui-kit/react/v4/group-details#style), [ThreadMessages Styles](/ui-kit/react/v4/threaded-messages#style).

**Example**

In this example, we are creating `MessageListStyle` and `MessageComposerStyle` and then applying them to the Messages Component using `MessageListConfiguration` and `MessageComposerConfiguration`.

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessages,
      MessageComposerConfiguration,
      MessageComposerStyle,
      MessageListConfiguration,
      MessageListStyle,
    } from "@cometchat/chat-uikit-react";

    const messageListStyle = new MessageListStyle({
      background: "transparent",
      border: "1px solid black",
      borderRadius: "20px",
      height: "100%",
      width: "100%",
      loadingIconTint: "red",
      nameTextColor: "pink",
      threadReplyTextColor: "green",
    });
    const messageComposerStyle = new MessageComposerStyle({
      AIIconTint: "#ec03fc",
      attachIcontint: "#ec03fc",
      background: "#fffcff",
      border: "2px solid #b30fff",
      borderRadius: "20px",
      inputBackground: "#e2d5e8",
      textColor: "#ff299b",
      sendIconTint: "#ff0088",
    });

    function MessagesDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);
      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser!}
              messageComposerConfiguration={
                new MessageComposerConfiguration({
                  messageComposerStyle: messageComposerStyle,
                })
              }
              messageListConfiguration={
                new MessageListConfiguration({
                  messageListStyle: messageListStyle,
                })
              }
            />
          )}
        </>
      );
    }
    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessages,
      MessageComposerConfiguration,
      MessageComposerStyle,
      MessageListConfiguration,
      MessageListStyle,
    } from "@cometchat/chat-uikit-react";

    const messageListStyle = new MessageListStyle({
      background: "transparent",
      border: "1px solid black",
      borderRadius: "20px",
      height: "100%",
      width: "100%",
      loadingIconTint: "red",
      nameTextColor: "pink",
      threadReplyTextColor: "green",
    });

    const messageComposerStyle = new MessageComposerStyle({
      AIIconTint: "#ec03fc",
      attachIcontint: "#ec03fc",
      background: "#fffcff",
      border: "2px solid #b30fff",
      borderRadius: "20px",
      inputBackground: "#e2d5e8",
      textColor: "#ff299b",
      sendIconTint: "#ff0088",
    });

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState(null);

      useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser}
              messageComposerConfiguration={
                new MessageComposerConfiguration({
                  messageComposerStyle: messageComposerStyle,
                })
              }
              messageListConfiguration={
                new MessageListConfiguration({
                  messageListStyle: messageListStyle,
                })
              }
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    <CometChatMessages user={chatUser!} hideDetails={true} disableTyping={true} />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
     <CometChatMessages
      user={chatUser!}
      hideDetails={true}
      disableTyping={true}
    />
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property                           | Description                                                                                                              | Code                                                                   |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
| **User** [report]()                | Used to pass user object of which header specific details will be shown                                                  | `user={chatUser!}`                                                     |
| **Group** [report]()               | Used to pass group object of which header specific details will be shown                                                 | `group={chatGroup!}`                                                   |
| **Hide MessageComposer**           | Used to toggle visibility for CometChatMessageComposer, default false                                                    | `hideMessageComposer={true}`                                           |
| **Hide MessageHeader**             | Used to toggle visibility for CometChatMessageHeader, default false                                                      | `hideMessageHeader={true}`                                             |
| **Disable Typing**                 | Used to toggle functionality for showing typing indicator and also enable/disable sending message delivery/read receipts | `disableTyping={true}`                                                 |
| **Disable SoundForMessages**       | Used to toggle sound for messages                                                                                        | `disableSoundForMessages={true}`                                       |
| **CustomSoundForIncomingMessages** | Used to set custom sound asset's path for incoming messages                                                              | `customSoundForIncomingMessages="your custom sound for incoming call"` |
| **CustomSoundForOutgoingMessages** | Used to set custom sound asset's path for outgoing messages                                                              | `customSoundForOutgoingMessages="your custom sound for outgoing call"` |
| **Hide Details**                   | Used to toggle visibility for details icon in CometChatMessageHeader                                                     | `hideDetails={true}`                                                   |

### Advanced

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

***

#### MessageHeaderView

You can set your custom message header view using the `messageHeaderView` property. But keep in mind, by using this you will override the default message header functionality.

```javascript theme={null}
  messageHeaderView={CustomHeader()}
```

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/hvldi1e9uY_02hWX/images/871977ae-message_header_view_default_web_screens-fd53c28b6773fc9a63e184181265fce5.png?fit=max&auto=format&n=hvldi1e9uY_02hWX&q=85&s=a918b799c98a846521bc5b832a8d7d9f" width="3600" height="2400" data-path="images/871977ae-message_header_view_default_web_screens-fd53c28b6773fc9a63e184181265fce5.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-4h3cKAJUX2gQz_u/images/b112cb8d-message_header_view_custom_web_screens-10940f6db054a4b1d2be6fae70a9afcc.png?fit=max&auto=format&n=-4h3cKAJUX2gQz_u&q=85&s=75a49ee833bad47e4a78888014f63fe0" width="3600" height="2400" data-path="images/b112cb8d-message_header_view_custom_web_screens-10940f6db054a4b1d2be6fae70a9afcc.png" />
</Frame>

<Tabs>
  <Tab title="MessagesDemo.tsx">
    ```typescript theme={null}
      <CometChatMessages
      user={chatUser!}
      messageHeaderView={CustomHeader()}
      />
    ```
  </Tab>

  <Tab title="CustomHeader.tsx">
    ```typescript theme={null}
    import React, { useEffect, useState } from "react";
    import {
      CometChatUIEvents,
      IActiveChatChanged,
    } from "@cometchat/chat-uikit-react";

    export const CustomHeader = () => {
      const [data, setData] = useState < any > null;
      useEffect(() => {
        CometChatUIEvents.ccActiveChatChanged.subscribe(
          (data: IActiveChatChanged) => {
            console.log("my data", data);
            setData(data);
          }
        );
      }, []);

      return (
        <div style={{ display: "flex", marginBottom: "10px" }}>
          <cometchat-avatar
            image={data?.user?.getAvatar() ?? data?.group?.getIcon()}
            name={data?.user ? data?.user?.getAvatar() : data?.group?.getName()}
          ></cometchat-avatar>
          <p style={{ marginLeft: "20px", marginTop: "8px" }}>
            {data?.user ? data?.user?.getName() : data?.group?.getName()}
          </p>
        </div>
      );
    };
    ```
  </Tab>
</Tabs>

***

#### MessageListView

You can set your custom message list view using the `messageListView` property. But keep in mind, by using this you will override the default message ListView functionality.

```javascript theme={null}
messageListView = { CustomListItem };
```

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/JoK2O2F7IYCQF1_g/images/19a21493-message_list_view_default_web_screens-114b0cdcdf4968978684b0c200cf18ab.png?fit=max&auto=format&n=JoK2O2F7IYCQF1_g&q=85&s=aa1f88f04068795bcc27b6bc4111c7af" width="3600" height="2400" data-path="images/19a21493-message_list_view_default_web_screens-114b0cdcdf4968978684b0c200cf18ab.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/FQNeiVxajtzWdB3i/images/b9c94500-message_list_view_custom_web_screens-ba70aeb87f9a4db083c3a32a1e059a8b.png?fit=max&auto=format&n=FQNeiVxajtzWdB3i&q=85&s=81cdbe2ff784827d4095883888100c9d" width="3600" height="2400" data-path="images/b9c94500-message_list_view_custom_web_screens-ba70aeb87f9a4db083c3a32a1e059a8b.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessageList,
      CometChatMessages,
      MessageListAlignment,
      MessageListStyle,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("UID").then((user) => {
          setChatUser(user);
        });
      }, []);

      const messageListStyle = new MessageListStyle({
        background: "#fdf2ff",
        border: "1px solid #d608ff",
        borderRadius: "20px",
        loadingIconTint: "red",
        nameTextColor: "pink",
        threadReplyTextColor: "green",
      });
      const CustomListItem = React.useMemo(
        () => (
          <div style={{ height: "500px" }}>
            <CometChatMessageList
              user={chatUser!}
              messageListStyle={messageListStyle}
              alignment={MessageListAlignment.left}
            />
          </div>
        ),
        []
      );

      return (
        <>
          {chatUser && (
            <CometChatMessages user={chatUser!} messageListView={CustomListItem} />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React, { useState, useEffect, useMemo } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessageList,
      CometChatMessages,
      MessageListAlignment,
      MessageListStyle,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState(null);

      useEffect(() => {
        CometChat.getUser("UID").then((user) => {
          setChatUser(user);
        });
      }, []);

      const messageListStyle = useMemo(
        () =>
          new MessageListStyle({
            background: "#fdf2ff",
            border: "1px solid #d608ff",
            borderRadius: "20px",
            loadingIconTint: "red",
            nameTextColor: "pink",
            threadReplyTextColor: "green",
          }),
        []
      );

      const CustomListItem = useMemo(
        () => (
          <div style={{ height: "500px" }}>
            <CometChatMessageList
              user={chatUser}
              messageListStyle={messageListStyle}
              alignment={MessageListAlignment.left}
            />
          </div>
        ),
        [chatUser, messageListStyle]
      );

      return (
        <>
          {chatUser && (
            <CometChatMessages user={chatUser} messageListView={CustomListItem} />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

***

#### MessageComposerView

You can set your custom Message Composer view using the `messageComposerView` property. But keep in mind, by using this you will override the default message composer functionality.

**Example**

```javascript theme={null}
messageComposerView={CustomComposerView}
```

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/iIeExfBhmmmkVYg_/images/5fcab6b9-composer_view_default_web_screens-cdb99c6277114015af25eed0dc901a67.png?fit=max&auto=format&n=iIeExfBhmmmkVYg_&q=85&s=e049ce62fd39903c02820612acb49464" width="3600" height="2400" data-path="images/5fcab6b9-composer_view_default_web_screens-cdb99c6277114015af25eed0dc901a67.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/fW0PxkjcCIs_jips/images/d45fac1f-composer_view_custom_web_screens-51e12b0a1bd9c6a0a1ca4d584fddee46.png?fit=max&auto=format&n=fW0PxkjcCIs_jips&q=85&s=8850363137805524ed3257b51fc9b1b1" width="3600" height="2400" data-path="images/d45fac1f-composer_view_custom_web_screens-51e12b0a1bd9c6a0a1ca4d584fddee46.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessageComposer,
      CometChatMessages,
      AuxiliaryButtonAlignment,
      MessageComposerStyle,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("UID").then((user) => {
          setChatUser(user);
        });
      }, []);

      const messageComposerStyle = new MessageComposerStyle({
        AIIconTint: "#ec03fc",
        attachIcontint: "#ec03fc",
        background: "#fffcff",
        border: "2px solid #b30fff",
        borderRadius: "20px",
        inputBackground: "#e2d5e8",
        textColor: "#ff299b",
        sendIconTint: "#ff0088",
      });
      const CustomComposerView = React.useMemo(
        () => (
          <div>
            <CometChatMessageComposer
              messageComposerStyle={messageComposerStyle}
              auxiliaryButtonAlignment={AuxiliaryButtonAlignment.left}
              text="Enter your text here"
            />
          </div>
        ),
        []
      );

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser!}
              messageComposerView={CustomComposerView}
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React, { useState, useEffect, useMemo } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessageComposer,
      CometChatMessages,
      AuxiliaryButtonAlignment,
      MessageComposerStyle,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState(null);

      useEffect(() => {
        CometChat.getUser("UID").then((user) => {
          setChatUser(user);
        });
      }, []);

      const messageComposerStyle = useMemo(
        () =>
          new MessageComposerStyle({
            AIIconTint: "#ec03fc",
            attachIcontint: "#ec03fc",
            background: "#fffcff",
            border: "2px solid #b30fff",
            borderRadius: "20px",
            inputBackground: "#e2d5e8",
            textColor: "#ff299b",
            sendIconTint: "#ff0088",
          }),
        []
      );

      const CustomComposerView = useMemo(
        () => (
          <div>
            <CometChatMessageComposer
              messageComposerStyle={messageComposerStyle}
              auxiliaryButtonAlignment={AuxiliaryButtonAlignment.left}
              text="Enter your text here"
            />
          </div>
        ),
        [messageComposerStyle]
      );

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser}
              messageComposerView={CustomComposerView}
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

***

#### AuxiliaryMenu

You can set a custom header menu option by using the `auxiliaryMenu` property.

```javascript theme={null}
auxiliaryMenu={CustomAuxilaryMenu()}
```

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/fW0PxkjcCIs_jips/images/d57af411-auxiliary_header_menu_default_web_screens-aad95a6f4bd04319124030a4202a4671.png?fit=max&auto=format&n=fW0PxkjcCIs_jips&q=85&s=c6823ea53514864882498817baa4b4d1" width="3600" height="2400" data-path="images/d57af411-auxiliary_header_menu_default_web_screens-aad95a6f4bd04319124030a4202a4671.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-aV5rjAnFmfmGI_M/images/857306ba-auxiliary_header_menu_custom_web_screens-871da1024c7c55667bf98574d6222e0a.png?fit=max&auto=format&n=-aV5rjAnFmfmGI_M&q=85&s=cea2706fa525189ca16ed4aef8bbcf48" width="3600" height="2400" data-path="images/857306ba-auxiliary_header_menu_custom_web_screens-871da1024c7c55667bf98574d6222e0a.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessages, IconStyle } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("UID").then((user) => {
          setChatUser(user);
        });
      }, []);

      const CustomAuxilaryMenu = () => {
        const iconStyle = new IconStyle({
          iconTint: "#d400ff",
        });
        return <cometchat-icon URL={Icon} iconStyle={JSON.stringify(iconStyle)} />;
      };
      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser!}
              auxiliaryMenu={CustomAuxilaryMenu()}
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}

    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessages, IconStyle } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {

        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("UID").then((user) => {
                setChatUser(user);
            })
        }, [])

        const CustomAuxilaryMenu = () =>{
                  const iconStyle = new IconStyle({
                    iconTint:"#d400ff"
                  })
                  return (
                    <cometchat-icon URL={Icon} iconStyle={JSON.stringify(iconStyle)}/>
                  )
                }
      return (
        <>
          {chatUser &&
            <CometChatMessages
                user={chatUser!}
                auxiliaryMenu={CustomAuxilaryMenu()}
            />
          }
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

***

## Configuration

Configurations offer the ability to customize the properties of each individual component within a Composite Component.

The Messages Component is a Composite Component and it has a specific set of configuration for each of its components.

### MessageHeader

If you want to customize the properties of the [MessageHeader](/ui-kit/react/v4/message-header) Component inside Messages Component, you need use the `MessageHeaderConfiguration` object.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    <CometChatMessages
      messageHeaderConfiguration={
        new MessageHeaderConfiguration({
          //properties of message header
        })
      }
    />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    <CometChatMessages
      messageHeaderConfiguration={
        new MessageHeaderConfiguration({
          //properties of message header
        })
      }
    />
    ```
  </Tab>
</Tabs>

The `MessageHeaderConfiguration` provides access to all the [Action](/ui-kit/react/v4/message-header#actions), [Filters](/ui-kit/react/v4/message-header#filters), [Styles](/ui-kit/react/v4/message-header#style), [Functionality](/ui-kit/react/v4/message-header#functionality), and [Advanced](/ui-kit/react/v4/message-header#advanced) properties of the [MessageHeader](/ui-kit/react/v4/message-header) component.

<Info>
  Please note that the properties marked with the [report]() symbol are not accessible within the Configuration Object.
</Info>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-4h3cKAJUX2gQz_u/images/b305c6e2-message_header_configuration_web_screens-fcd80b681fa778ec546b52be6b300962.png?fit=max&auto=format&n=-4h3cKAJUX2gQz_u&q=85&s=b648da1880545d78b07ddbadfe58114f" width="3600" height="2400" data-path="images/b305c6e2-message_header_configuration_web_screens-fcd80b681fa778ec546b52be6b300962.png" />
</Frame>

In this example, we will style the Avatar and MessageHeader of the [MessageHeader](/ui-kit/react/v4/message-header) component using `MessageHeaderConfiguration`.

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import {
      AvatarStyle,
      CometChatMessages,
      MessageHeaderConfiguration,
      MessageHeaderStyle,
    } from "@cometchat/chat-uikit-react";

    const avatarStyle = new AvatarStyle({
      backgroundColor: "#cdc2ff",
      border: "2px solid #6745ff",
      borderRadius: "10px",
      outerViewBorderColor: "#ca45ff",
      outerViewBorderRadius: "5px",
      nameTextColor: "#4554ff",
    });
    const messageHeaderStyle = new MessageHeaderStyle({
      background: "#f2f3ff",
      border: "2px solid #a117eb",
      borderRadius: "20px",
      subtitleTextColor: "#2d55a6",
    });

    function MessagesDemo() {
      return (
        <>
          {chatUser && (
            <CometChatMessages
              messageHeaderConfiguration={
                new MessageHeaderConfiguration({
                  avatarStyle: avatarStyle,
                  messageHeaderStyle: messageHeaderStyle,
                })
              }
            />
          )}
        </>
      );
    }
    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React from "react";
    import {
      AvatarStyle,
      CometChatMessages,
      MessageHeaderConfiguration,
      MessageHeaderStyle,
    } from "@cometchat/chat-uikit-react";

    const avatarStyle = new AvatarStyle({
      backgroundColor: "#cdc2ff",
      border: "2px solid #6745ff",
      borderRadius: "10px",
      outerViewBorderColor: "#ca45ff",
      outerViewBorderRadius: "5px",
      nameTextColor: "#4554ff",
    });

    const messageHeaderStyle = new MessageHeaderStyle({
      background: "#f2f3ff",
      border: "2px solid #a117eb",
      borderRadius: "20px",
      subtitleTextColor: "#2d55a6",
    });

    function MessagesDemo() {
      return (
        <>
          <CometChatMessages
            messageHeaderConfiguration={
              new MessageHeaderConfiguration({
                avatarStyle: avatarStyle,
                messageHeaderStyle: messageHeaderStyle,
              })
            }
          />
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

### MessageList

If you want to customize the properties of the [MessageList](/ui-kit/react/v4/message-list) Component inside Messages Component, you need use the `MessageListConfiguration` object.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    <CometChatMessages
      messageListConfiguration={
        new MessageListConfiguration({
          //properties of messages list
        })
      }
    />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    <CometChatMessages
      messageListConfiguration={
        new MessageListConfiguration({
          //properties of messages list
        })
      }
    />
    ```
  </Tab>
</Tabs>

The `MessageListConfiguration` provides access to all the [Action](/ui-kit/react/v4/message-list#actions), [Filters](/ui-kit/react/v4/message-list#filters), [Styles](/ui-kit/react/v4/message-list#style), [Functionality](/ui-kit/react/v4/message-list#functionality), and [Advanced](/ui-kit/react/v4/message-list#functionality) properties of the [MessageList](/ui-kit/react/v4/message-list) component.

<Info>
  Please note that the properties marked with the [report]() symbol are not accessible within the Configuration Object.
</Info>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/ISrSQKUqQ1MtSM8O/images/2ff15274-message_list_configuration_web_screens-8b7ca6429b421f672e06ce1ab33990fb.png?fit=max&auto=format&n=ISrSQKUqQ1MtSM8O&q=85&s=ea8b38cda6a2d1ceea20ba8884281c96" width="3600" height="2400" data-path="images/2ff15274-message_list_configuration_web_screens-8b7ca6429b421f672e06ce1ab33990fb.png" />
</Frame>

In this example, we will be changing the list alignment and modifying the message list styles in the [MessageList](/ui-kit/react/v4/message-list) component using `MessageListConfiguration`.

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}
    import React, { useMemo } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessages MessageListAlignment, MessageListConfiguration, MessageListStyle } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

    const messageListStyle = new MessageListStyle({
            background:"#d8cae6",
            border:"2px solid #6107ba",
            borderRadius:"20px",
            loadingIconTint:"red",
            nameTextColor:"pink",
            threadReplyTextColor:"green"
          })
    return (
    <>
      {chatUser &&
      <CometChatMessages
        user={chatUser!}
        messageListConfiguration={new MessageListConfiguration({
          messageListStyle={messageListStyle},
          alignment:MessageListAlignment.left
        })}
      />
      }
    </>
    );
    };
    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React, { useState, useEffect, useMemo } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessages,
      MessageListAlignment,
      MessageListConfiguration,
      MessageListStyle,
    } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState(null);

      useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      const messageListStyle = useMemo(
        () =>
          new MessageListStyle({
            background: "#d8cae6",
            border: "2px solid #6107ba",
            borderRadius: "20px",
            loadingIconTint: "red",
            nameTextColor: "pink",
            threadReplyTextColor: "green",
          }),
        []
      );

      return (
        <>
          {chatUser && (
            <CometChatMessages
              user={chatUser}
              messageListConfiguration={
                new MessageListConfiguration({
                  messageListStyle: messageListStyle,
                  alignment: MessageListAlignment.left,
                })
              }
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

### MessageComposer

If you want to customize the properties of the [MessageComposer](/ui-kit/react/v4/message-composer) Component inside Messages Component, you need use the `MessageComposerConfiguration` object.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
     <CometChatMessages
        messageComposerConfiguration={new MessageComposerConfiguration({
          // properties of message composer
        })}
     />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
     <CometChatMessages
        messageComposerConfiguration={new MessageComposerConfiguration({
          // properties of message composer
        })}
     />
    ```
  </Tab>
</Tabs>

The `MessageComposerConfiguration` provides access to all the [Action](/ui-kit/react/v4/message-composer#actions), [Filters](/ui-kit/react/v4/message-composer#filters), [Styles](/ui-kit/react/v4/message-composer#style), [Functionality](/ui-kit/react/v4/message-composer#functionality), and [Advanced](/ui-kit/react/v4/message-composer#advanced) properties of the [MessageComposer](/ui-kit/react/v4/message-composer) component.

<Info>
  Please note that the properties marked with the [report]() symbol are not accessible within the Configuration Object.
</Info>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/-MogY9MW_bOB3epD/images/4bca88bd-message_composer_configuration_web_screens-35dac706672e29440cb12b40818bb6d9.png?fit=max&auto=format&n=-MogY9MW_bOB3epD&q=85&s=b164da10f86ec4fd22ff3c4371381937" width="3600" height="2400" data-path="images/4bca88bd-message_composer_configuration_web_screens-35dac706672e29440cb12b40818bb6d9.png" />
</Frame>

In this example, we'll be adding styling to the message composer and custom text to the [MessageComposer](/ui-kit/react/v4/message-composer) component using `MessageComposerConfiguration`.

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}

    import React from "react";
    import {CometChatMessages,MessageComposerConfiguration, MessageComposerStyle} from "@cometchat/chat-uikit-react";

    const messageComposerStyle = new MessageComposerStyle({
      AIIconTint:"#ec03fc",
      attachIcontint:"#ec03fc",
      background:"#fffcff",
      border:"2px solid #b30fff",
      borderRadius:"20px",
      inputBackground:"#e2d5e8",
      textColor:"#ff299b",
      sendIconTint:"#ff0088",
    })

    function MessagesDemo() {
      return (
        messageComposerConfiguration={new MessageComposerConfiguration({
          text:"Type Your Custom Text Message",
          messageComposerStyle: messageComposerStyle,
        })}
      );
    }
    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}

    import React from "react";
    import {CometChatMessages,MessageComposerConfiguration, MessageComposerStyle} from "@cometchat/chat-uikit-react";

    const messageComposerStyle = new MessageComposerStyle({
      AIIconTint:"#ec03fc",
      attachIcontint:"#ec03fc",
      background:"#fffcff",
      border:"2px solid #b30fff",
      borderRadius:"20px",
      inputBackground:"#e2d5e8",
      textColor:"#ff299b",
      sendIconTint:"#ff0088",
    })

    function MessagesDemo() {
      return (
        messageComposerConfiguration={new MessageComposerConfiguration({
          text:"Type Your Custom Text Message",
          messageComposerStyle: messageComposerStyle,
        })}
      );
    }
    export default MessagesDemo;
    ```
  </Tab>
</Tabs>

### ThreadedMessages

If you want to customize the properties of the [ThreadedMessages](/ui-kit/react/v4/threaded-messages) Component inside Messages Component, you need use the `ThreadedMessagesConfiguration` object.

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
     <CometChatMessages
        threadedMessagesConfiguration={new ThreadedMessagesConfiguration({
          //properties of the threaded messages
        })}
     />
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
     <CometChatMessages
        threadedMessagesConfiguration={new ThreadedMessagesConfiguration({
          //properties of the threaded messages
        })}
     />
    ```
  </Tab>
</Tabs>

The `ThreadedMessagesConfiguration` provides access to all the [Action](/ui-kit/react/v4/threaded-messages#actions), [Filters](/ui-kit/react/v4/threaded-messages#filters), [Styles](/ui-kit/react/v4/threaded-messages#style), [Functionality](/ui-kit/react/v4/threaded-messages#functionality), and [Advanced](/ui-kit/react/v4/threaded-messages#advanced) properties of the [ThreadedMessages](/ui-kit/react/v4/threaded-messages) component.

<Info>
  Please note that the properties marked with the [report]() symbol are not accessible within the Configuration Object.
</Info>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/k82rLv-mRy38q-bk/images/e5690f59-threaded_message_configuration_web_screens-8bd41c18cccc2c734c1645d8d661988f.png?fit=max&auto=format&n=k82rLv-mRy38q-bk&q=85&s=ad45fa2bd16c1ff4d4d826f5f030f41b" width="3600" height="2400" data-path="images/e5690f59-threaded_message_configuration_web_screens-8bd41c18cccc2c734c1645d8d661988f.png" />
</Frame>

In this example, we are adding a custom close icon to the Threaded Message component and also adding custom properties to the [MessageList](#messagelist) using `MessageListConfiguration`. We then apply these changes to the [ThreadedMessages](/ui-kit/react/v4/message-composer) component using `ThreadedMessagesConfiguration`.

<Tabs>
  <Tab title="TypeScript">
    MessagesDemo.tsx

    ```typescript theme={null}

    import React from "react";
    import {CometChatMessages, MessageListAlignment, MessageListConfiguration, MessageListStyle, ThreadedMessagesConfiguration } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
        const messageListStyle = new MessageListStyle({
            background:"#fdf2ff",
            border:"1px solid #d608ff",
            borderRadius:"20px",
            loadingIconTint:"red",
            nameTextColor:"pink",
            threadReplyTextColor:"green"
          })
    return (
        <>
          {chatUser &&
            <CometChatMessages
                threadedMessagesConfiguration={new ThreadedMessagesConfiguration({
                    //properties of the threaded messages
                   closeIconURL:Icon,
                   messageListConfiguration:new MessageListConfiguration({
                    messageListStyle: messageListStyle,
                    alignment:MessageListAlignment.left
                   })
                })}
            />
          }
        </>
      );
    }
    export default MessagesDemo;
    ```
  </Tab>

  <Tab title="JavaScript">
    MessagesDemo.jsx

    ```javascript theme={null}
    import React, { useState, useEffect } from "react";
    import { CometChatMessages, MessageListAlignment, MessageListConfiguration, MessageListStyle, ThreadedMessagesConfiguration } from "@cometchat/chat-uikit-react";

    function MessagesDemo() {
      const [chatUser, setChatUser] = useState(null);

      useEffect(() => {
        // Fetch or set chat user here
        // For example:
        // setChatUser(someUser);
      }, []);

      const messageListStyle = new MessageListStyle({
        background: "#fdf2ff",
        border: "1px solid #d608ff",
        borderRadius: "20px",
        loadingIconTint: "red",
        nameTextColor: "pink",
        threadReplyTextColor: "green"
      });

      // Assuming Icon is defined somewhere
      const Icon = "...";

      return (
        <>
          {chatUser && (
            <CometChatMessages
              threadedMessagesConfiguration={new ThreadedMessagesConfiguration({
                closeIconURL: Icon,
                messageListConfiguration: new MessageListConfiguration({
                  messageListStyle: messageListStyle,
                  alignment: MessageListAlignment.left
                })
              })}
            />
          )}
        </>
      );
    }

    export default MessagesDemo;
    ```
  </Tab>
</Tabs>