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

# Conversation List + Message View

> Build a two-panel conversation list + message view layout in Angular with CometChat UI Kit.

<Accordion title="AI Integration Quick Reference">
  | Field        | Value                                                                                                                                      |
  | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
  | Package      | `@cometchat/chat-uikit-angular`                                                                                                            |
  | Framework    | Angular                                                                                                                                    |
  | Components   | `CometChatConversationsComponent`, `CometChatMessageHeaderComponent`, `CometChatMessageListComponent`, `CometChatMessageComposerComponent` |
  | Layout       | Two-panel — conversation list (left) + message view (right)                                                                                |
  | Prerequisite | Complete [Angular Integration](/ui-kit/angular/integration) Steps 1–5 first                                                                |
  | Pattern      | WhatsApp Web, Slack, Microsoft Teams                                                                                                       |
</Accordion>

This guide builds a two-panel chat layout — conversation list on the left, messages on the right. Users tap a conversation to open it.

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/ugckbRl5Q-H7t8X2/images/e6411d13-chat_experience_sidebar_message-35c431d8bf694e5690e4e0f3a74165af.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=22c17684d40b6ecd6be28f4a8d1a7161" width="1282" height="802" data-path="images/e6411d13-chat_experience_sidebar_message-35c431d8bf694e5690e4e0f3a74165af.png" />
</Frame>

***

## What You're Building

Three sections working together:

1. **Sidebar (conversation list)** — shows all active conversations (users and groups)
2. **Message view** — displays chat messages for the selected conversation in real time
3. **Message composer** — text input with support for media, emojis, and reactions

***

## Step 1 — Update AppComponent

Wire the conversation list and message components together in your root component. The UIKit's `ChatStateService` handles all the wiring — when a user clicks a conversation, `cometchat-conversations` updates the service, and the message components automatically react to the change.

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

@Component({
  selector: "app-root",
  standalone: true,
  imports: [
    CometChatConversationsComponent,
    CometChatMessageHeaderComponent,
    CometChatMessageListComponent,
    CometChatMessageComposerComponent,
  ],
  template: `
    @if (isLoggedIn) {
      <div class="chat-layout">
        <div class="sidebar">
          <cometchat-conversations></cometchat-conversations>
        </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;
    }
    .chat-layout {
      display: flex;
      width: 100%;
      height: 100%;
    }
    .sidebar {
      width: 360px;
      border-right: 1px solid #e0e0e0;
    }
    .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);
    }
  `,
})
export class AppComponent implements OnInit {
  chatStateService = inject(ChatStateService);
  isLoggedIn = false;

  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:

* `cometchat-conversations` calls `ChatStateService.setActiveConversation()` automatically when a conversation is clicked.
* `setActiveConversation()` extracts the `User` or `Group` and sets it as the active entity, enforcing mutual exclusivity (setting a user clears the group, and vice versa).
* `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.

<Tip>
  This is the recommended approach for most applications. For advanced use cases like multi-panel layouts
  where each panel needs independent state, you can pass `[user]` or `[group]` via `@Input()` bindings
  to override the service. See the [State Management guide](/ui-kit/angular/guides/state-management) for details.
</Tip>

***

## Step 2 — Run the Project

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

You should see the conversation list on the left. Tap any conversation to load messages 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>