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

# Tab-Based Chat

> Build a tab-based messaging UI with chats, calls, users, and groups in Angular with CometChat UI Kit.

<Accordion title="AI Integration Quick Reference">
  | Field        | Value                                                                                                                                                                                               |
  | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Package      | `@cometchat/chat-uikit-angular`                                                                                                                                                                     |
  | Framework    | Angular                                                                                                                                                                                             |
  | Components   | `CometChatConversationsComponent`, `CometChatCallLogsComponent`, `CometChatUsersComponent`, `CometChatMessageHeaderComponent`, `CometChatMessageListComponent`, `CometChatMessageComposerComponent` |
  | Layout       | Tabbed sidebar (Chats, Calls, Users) + message view                                                                                                                                                 |
  | Prerequisite | Complete [Angular Integration](/ui-kit/angular/integration) Steps 1–5 first                                                                                                                         |
  | Pattern      | Full-featured messaging app with multiple sections                                                                                                                                                  |
</Accordion>

This guide builds a tabbed messaging UI — Chats, Calls, and Users tabs, with a message view. Good for full-featured apps that need more than just conversations.

This assumes you've already completed [Angular Integration](/ui-kit/angular/integration) (project created, UI Kit installed, init + login working, CSS imported).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/010808a2-multi_tab_ui_web_screens-4c6055da929b73c11d7d45b0112fd5fc.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=fd1d17d34f8164fc1b79b36b930f94a4" width="1282" height="802" data-path="images/010808a2-multi_tab_ui_web_screens-4c6055da929b73c11d7d45b0112fd5fc.png" />
</Frame>

***

## What You're Building

Three sections working together:

1. **Tab bar** — switches between Chats, Call Logs, and Users
2. **List view** — renders the list for the active tab (conversations, call logs, or users)
3. **Message view** — header + messages + composer for the selected item

***

## Step 1 — Update AppComponent

Wire everything together. `ChatStateService` handles the state — `cometchat-conversations` and `cometchat-users` automatically update the service when an item is clicked, and the message components auto-subscribe.

```ts title="src/app/app.component.ts" expandable theme={null}
import { Component, inject, OnInit } from "@angular/core";
import {
  CometChatUIKit,
  CometChatConversationsComponent,
  CometChatUsersComponent,
  CometChatCallLogsComponent,
  CometChatMessageHeaderComponent,
  CometChatMessageListComponent,
  CometChatMessageComposerComponent,
  ChatStateService,
} from "@cometchat/chat-uikit-angular";
import { CometChat } from "@cometchat/chat-sdk-javascript";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [
    CometChatConversationsComponent,
    CometChatUsersComponent,
    CometChatCallLogsComponent,
    CometChatMessageHeaderComponent,
    CometChatMessageListComponent,
    CometChatMessageComposerComponent,
  ],
  template: `
    @if (isLoggedIn) {
      <div class="tab-layout">
        <div class="sidebar">
          <nav class="tab-bar">
            <button
              [class.active]="activeTab === 'chats'"
              (click)="activeTab = 'chats'"
            >
              Chats
            </button>
            <button
              [class.active]="activeTab === 'calls'"
              (click)="activeTab = 'calls'"
            >
              Call Logs
            </button>
            <button
              [class.active]="activeTab === 'users'"
              (click)="activeTab = 'users'"
            >
              Users
            </button>
          </nav>
          <div class="tab-content">
            @switch (activeTab) {
              @case ('chats') {
                <cometchat-conversations></cometchat-conversations>
              }
              @case ('calls') {
                <cometchat-call-logs></cometchat-call-logs>
              }
              @case ('users') {
                <cometchat-users></cometchat-users>
              }
            }
          </div>
        </div>
        @if (chatStateService.activeUser() || chatStateService.activeGroup()) {
          <div class="chat-window">
            <cometchat-message-header></cometchat-message-header>
            <cometchat-message-list></cometchat-message-list>
            <cometchat-message-composer></cometchat-message-composer>
          </div>
        } @else {
          <div class="empty-conversation">
            Select a conversation to start chatting
          </div>
        }
      </div>
    } @else {
      <p>Loading...</p>
    }
  `,
  styles: `
    :host {
      display: flex;
      height: 100vh;
      width: 100vw;
    }
    .tab-layout {
      display: flex;
      width: 100%;
      height: 100%;
    }
    .sidebar {
      width: 400px;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #e0e0e0;
    }
    .tab-bar {
      display: flex;
      border-bottom: 1px solid #e0e0e0;
    }
    .tab-bar button {
      flex: 1;
      padding: 12px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 14px;
    }
    .tab-bar button.active {
      border-bottom: 2px solid #3399ff;
      font-weight: 600;
    }
    .tab-content {
      flex: 1;
      overflow: hidden;
    }
    .chat-window {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .empty-conversation {
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--cometchat-background-color-03, #F5F5F5);
      color: var(--cometchat-text-color-secondary, #727272);
      font: var(--cometchat-font-body-regular, 400 14px Roboto);
    }
    .cometchat .cometchat-message-composer {
      border-radius: 0px;
    }
  `,
})
export class AppComponent implements OnInit {
  chatStateService = inject(ChatStateService);
  isLoggedIn = false;
  activeTab: "chats" | "calls" | "users" = "chats";

  ngOnInit(): void {
    CometChatUIKit.getLoggedinUser().then((user: CometChat.User | null) => {
      if (!user) {
        CometChatUIKit.login("cometchat-uid-1")
          .then(() => (this.isLoggedIn = true))
          .catch(console.log);
      } else {
        this.isLoggedIn = true;
      }
    });
  }
}
```

How it works:

* The `activeTab` property drives which list component renders — `cometchat-conversations`, `cometchat-call-logs`, or `cometchat-users`.
* `cometchat-conversations` calls `ChatStateService.setActiveConversation()` on click, which extracts the `User` or `Group` and sets it as the active entity.
* `cometchat-users` calls `ChatStateService.setActiveUser()` on click.
* `cometchat-message-header`, `cometchat-message-list`, and `cometchat-message-composer` auto-subscribe to `ChatStateService` — no `[user]` or `[group]` bindings needed.
* The `@if` block reads `chatStateService.activeUser()` and `chatStateService.activeGroup()` signals to show the chat window or the empty state.

***

## Step 2 — Run the Project

```bash theme={null}
ng serve
```

You should see the tab bar at the top of the sidebar. Switch between Chats, Call Logs, and Users — tapping any item loads the message view on the right.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Theming" icon="paintbrush" href="/ui-kit/angular/customization/theming">
    Customize colors, fonts, and styles to match your brand
  </Card>

  <Card title="Components Overview" icon="grid-2" href="/ui-kit/angular/components/components-overview">
    Browse all prebuilt UI components
  </Card>

  <Card title="Angular Integration" icon="angular" href="/ui-kit/angular/integration">
    Back to the main setup guide
  </Card>

  <Card title="Core Features" icon="comments" href="/ui-kit/angular/core-features">
    Chat features included out of the box
  </Card>
</CardGroup>