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

# UI Components

> Drop-in chat UI widgets: CometChatPanel (tabbed chat) and CometChatButton (floating toggle).

The CometChat Unreal SDK includes two ready-to-use UMG widgets that provide a complete chat experience out of the box. Both are fully styleable and configurable via Blueprint properties.

***

## UCometChatPanel

A game-style tabbed chat panel with a dark translucent HUD aesthetic. It provides:

* **Three tabs**: My Groups, Personal, Browse Groups
* **Search**: Filter conversations and groups by name
* **Inline chat view**: Select a conversation to open the chat within the panel
* **Typing indicators**: Shows who is typing in the active chat
* **Avatar loading**: Async avatar image loading with fallback initials
* **Message filters**: Configurable filters for message types and categories

```mermaid theme={null}
flowchart LR
    A["CometChatPanel"] --> B["Tab: My Groups"]
    A --> C["Tab: Personal"]
    A --> D["Tab: Browse Groups"]
    B --> E["Chat View"]
    C --> E
    D --> E

    style A fill:#444,stroke:#888,color:#fff
    style B fill:#333,stroke:#666,color:#fff
    style C fill:#333,stroke:#666,color:#fff
    style D fill:#333,stroke:#666,color:#fff
    style E fill:#333,stroke:#666,color:#fff
```

### Adding to Viewport

<Tabs>
  <Tab title="Blueprint">
    1. Create a Widget Blueprint with parent class **CometChat Panel**
    2. Set the **App Id**, **Region**, **Auth Key**, and **User Uid** properties
    3. Add to viewport via **Create Widget** → **Add to Viewport**

    Or use the `UCometChatButton` widget which manages the panel automatically.
  </Tab>

  <Tab title="C++">
    ```cpp theme={null}
    void AMyHUD::BeginPlay()
    {
        Super::BeginPlay();

        UCometChatPanel* Panel = CreateWidget<UCometChatPanel>(GetWorld());
        Panel->AppId = TEXT("YOUR_APP_ID");
        Panel->Region = TEXT("us");
        Panel->AuthKey = TEXT("YOUR_AUTH_KEY");
        Panel->UserUid = TEXT("cometchat-uid-1");
        Panel->AddToViewport();
    }
    ```
  </Tab>
</Tabs>

### Configuration Properties

#### SDK Config

| Property | Type | Default | Description |
| - | - | - | - |
| `AppId` | `FString` | — | Your CometChat App ID |
| `Region` | `FString` | `"us"` | App region (`us` or `eu`) |
| `AuthKey` | `FString` | — | Your CometChat Auth Key |
| `UserUid` | `FString` | — | UID of the user to log in as |

#### Panel Style

| Property | Type | Default | Description |
| - | - | - | - |
| `PanelWidth` | `float` | `650` | Panel width in pixels |
| `PanelHeight` | `float` | `450` | Panel height in pixels |
| `PanelBackground` | `FLinearColor` | Dark translucent | Background color |
| `AccentColor` | `FLinearColor` | Blue | Primary accent color |
| `TabActiveColor` | `FLinearColor` | Blue | Active tab color |
| `TabInactiveColor` | `FLinearColor` | Dark gray | Inactive tab color |
| `TextColor` | `FLinearColor` | Light gray | Primary text color |
| `SubTextColor` | `FLinearColor` | Medium gray | Secondary text color |
| `FontSize` | `float` | `12` | Base font size |
| `SmallFontSize` | `float` | `10` | Small text font size |
| `CornerRadius` | `float` | `8` | Border corner radius |
| `SidebarWidth` | `float` | `220` | Sidebar/list width |

#### Message Style

| Property | Type | Default | Description |
| - | - | - | - |
| `ChatMessageFontSize` | `float` | `10` | Message text size |
| `ChatAvatarSize` | `float` | `24` | Avatar image size |
| `ChatUsernameOwnColor` | `FLinearColor` | Blue | Own username color |
| `ChatUsernameOtherColor` | `FLinearColor` | Gold | Other username color |

#### Message Filters

| Property | Type | Default | Description |
| - | - | - | - |
| `bShowTextMessages` | `bool` | `true` | Show text messages |
| `bShowImageMessages` | `bool` | `true` | Show image messages |
| `bShowVideoMessages` | `bool` | `true` | Show video messages |
| `bShowAudioMessages` | `bool` | `true` | Show audio messages |
| `bShowFileMessages` | `bool` | `true` | Show file messages |
| `bShowCustomMessages` | `bool` | `true` | Show custom messages |
| `bShowActionMessages` | `bool` | `false` | Show action messages (join/leave) |
| `bShowCallMessages` | `bool` | `false` | Show call messages |
| `bHideBlockedUserMessages` | `bool` | `false` | Hide messages from blocked users |
| `bHideDeletedMessages` | `bool` | `true` | Hide deleted messages |
| `bHideReplies` | `bool` | `true` | Hide thread replies from main chat |
| `bOnlyWithAttachments` | `bool` | `false` | Only show messages with attachments |
| `bOnlyWithMentions` | `bool` | `false` | Only show messages with mentions |
| `bOnlyWithReactions` | `bool` | `false` | Only show messages with reactions |
| `bOnlyUnread` | `bool` | `false` | Only show unread messages |

***

## UCometChatButton

A floating circular button that toggles the `UCometChatPanel` open and closed. Add it to your HUD for a one-click chat experience.

### Adding to Viewport

<Tabs>
  <Tab title="Blueprint">
    1. Create a Widget Blueprint with parent class **CometChat Button**
    2. Set the **App Id**, **Region**, **Auth Key**, and **User Uid** properties
    3. Add to viewport — the button appears as a floating circle
    4. Clicking the button opens/closes the full chat panel
  </Tab>

  <Tab title="C++">
    ```cpp theme={null}
    void AMyHUD::BeginPlay()
    {
        Super::BeginPlay();

        UCometChatButton* ChatButton = CreateWidget<UCometChatButton>(GetWorld());
        ChatButton->AppId = TEXT("YOUR_APP_ID");
        ChatButton->Region = TEXT("us");
        ChatButton->AuthKey = TEXT("YOUR_AUTH_KEY");
        ChatButton->UserUid = TEXT("cometchat-uid-1");
        ChatButton->AddToViewport();
    }
    ```
  </Tab>
</Tabs>

### Configuration Properties

| Property | Type | Default | Description |
| - | - | - | - |
| `AppId` | `FString` | — | Your CometChat App ID |
| `Region` | `FString` | `"us"` | App region |
| `AuthKey` | `FString` | — | Your CometChat Auth Key |
| `UserUid` | `FString` | — | UID of the user to log in as |
| `ButtonSize` | `float` | `56` | Button diameter in pixels |
| `ButtonColor` | `FLinearColor` | Blue | Button background color |
| `ButtonHoverColor` | `FLinearColor` | Light blue | Button hover color |
| `IconColor` | `FLinearColor` | White | Icon/text color |
| `IconFontSize` | `float` | `20` | Icon font size |

### Blueprint Methods

| Method | Returns | Description |
| - | - | - |
| `ToggleChatPanel()` | `void` | Open or close the chat panel programmatically |
| `IsPanelOpen()` | `bool` | Check if the panel is currently visible |

***

## Usage Pattern

The typical setup is to add `UCometChatButton` to your HUD. It handles creating and managing the `UCometChatPanel` internally:

```mermaid theme={null}
flowchart TD
    A["Add CometChatButton to Viewport"] --> B["User clicks button"]
    B --> C["Panel opens (auto-login + fetch data)"]
    C --> D["User chats"]
    D --> E["User clicks button again"]
    E --> F["Panel closes"]

    style A fill:#333,stroke:#666,color:#fff
    style B fill:#444,stroke:#888,color:#fff
    style C fill:#333,stroke:#666,color:#fff
    style D fill:#333,stroke:#666,color:#fff
    style E fill:#444,stroke:#888,color:#fff
    style F fill:#333,stroke:#666,color:#fff
```

<Info>
  The panel handles SDK initialization, login, and data fetching automatically when opened. You only need to provide the configuration properties.
</Info>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Setup" icon="wrench" href="/sdk/unreal/setup">
    Install the plugin and configure your project.
  </Card>

  <Card title="Advanced Configuration" icon="gear" href="/sdk/unreal/advanced-configuration">
    Fine-tune SDK settings and connection management.
  </Card>
</CardGroup>


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