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

# One-to-One / Group Chat

> Build a focused one-to-one or group chat experience in Angular with CometChat UI Kit.

<Accordion title="AI Integration Quick Reference">
  | Field        | Value                                                                                                   |
  | ------------ | ------------------------------------------------------------------------------------------------------- |
  | Package      | `@cometchat/chat-uikit-angular`                                                                         |
  | Framework    | Angular                                                                                                 |
  | Components   | `CometChatMessageHeaderComponent`, `CometChatMessageListComponent`, `CometChatMessageComposerComponent` |
  | Layout       | Single chat window — no sidebar, no conversation list                                                   |
  | Prerequisite | Complete [Angular Integration](/ui-kit/angular/integration) Steps 1–5 first                             |
  | Pattern      | Support chat, embedded widgets, focused messaging                                                       |
</Accordion>

This guide builds a single chat window — no sidebar, no conversation list. Users go directly into a one-to-one or group chat. Good for support chat, embedded widgets, or any focused messaging experience.

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/_MYSdWhXnUkTkjEH/images/4d640baf-chat_experience_one_on_one-db9d6d7716241c59bb026625b05019fe.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=ed194aedec46764a3c88e4ac5f709445" width="1282" height="802" data-path="images/4d640baf-chat_experience_one_on_one-db9d6d7716241c59bb026625b05019fe.png" />
</Frame>

***

## What You're Building

Three components stacked vertically:

1. **Chat header** — displays recipient name, avatar, online status, and optional call buttons
2. **Message list** — real-time chat history with scrolling
3. **Message composer** — text input with media, emojis, and reactions

Everything goes in `AppComponent` — no extra files needed.

***

## Step 1 — Update AppComponent

The app fetches a user (or group) on mount, sets it as the active entity via `ChatStateService`, and renders the three message components. The components auto-subscribe to the service — no prop passing needed.

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

@Component({
  selector: "app-root",
  standalone: true,
  imports: [
    CometChatMessageHeaderComponent,
    CometChatMessageListComponent,
    CometChatMessageComposerComponent,
  ],
  template: `
    @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">
        Loading chat...
      </div>
    }
  `,
  styles: `
    .chat-window {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
    }
    .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);

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

  private loadUser(): void {
    // Fetch the user whose chat you want to load
    const UID = "cometchat-uid-2";

    CometChat.getUser(UID).then(
      (user: CometChat.User) => {
        this.chatStateService.setActiveUser(user);
      },
      (error: CometChat.CometChatException) => {
        console.error("User fetch failed:", error);
      }
    );

    // To load a group chat instead, uncomment below:
    // const GUID = "GUID";
    // CometChat.getGroup(GUID).then(
    //   (group: CometChat.Group) => {
    //     this.chatStateService.setActiveGroup(group);
    //   },
    //   (error: CometChat.CometChatException) => {
    //     console.error("Group fetch failed:", error);
    //   }
    // );
  }
}
```

Key points:

* `CometChat.getUser(UID)` fetches the user object from the SDK — you need a real user object, not a manually constructed one.
* `chatStateService.setActiveUser(user)` sets the active entity — all message components auto-subscribe and render accordingly.
* Setting a user automatically clears any active group (mutual exclusivity).

***

## Switching Between User and Group Chat

To load a group chat instead of one-to-one, replace the `setActiveUser` call with `setActiveGroup`:

```ts highlight={1} theme={null}
const GUID = "GUID"; // Replace with your actual Group ID

CometChat.getGroup(GUID).then(
  (group: CometChat.Group) => {
    this.chatStateService.setActiveGroup(group);
  },
  (error: CometChat.CometChatException) => {
    console.error("Failed to fetch group:", error);
  }
);
```

You can also determine this dynamically — for example, based on a route parameter or a selection from another part of your app.

***

## Step 2 — Run the Project

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

You should see the chat window load with the conversation for the UID you set.

***

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