Sendsar Docs

Appearance

Angular UI Kit ​

Drop-in chat UI for Angular (@sendsar/chat-uikit-angular). Conversation list, thread, composer, and call UI — no custom screens required.

Before code: mint a session token on your server. Never ship sk_* to the browser.
Guided path: Quick start → Angular UI Kit.
Own the UI instead? Use the JavaScript SDK.

Fast path ​

Do this in order — most integrations are these steps.

1. Install ​

bash
pnpm add @sendsar/chat-uikit-angular @sendsar/chat-sdk-javascript @sendsar/call-sdk-javascript @sendsar/protocol

Add kit styles in angular.json (theme tokens + Material Icons):

json
"styles": [
  "node_modules/@sendsar/chat-uikit-angular/styles/sendsar-uikit.css"
]

2. Provide + mount the shell ​

The shell auto-starts the session. You do not call session.start() unless you set autoStartSession: false.

Standalone (app.config.ts + chat page):

ts
import { Component, inject } from "@angular/core";
import {
  provideSendsar,
  SendsarChatShellComponent,
  SendsarSessionService,
  type UserDirectoryEntry,
} from "@sendsar/chat-uikit-angular";

// Register once in app.config.ts — fetchSession talks to YOUR BFF (cookie auth).
provideSendsar({
  fetchSession: () =>
    fetch("/api/chat/session", {
      method: "POST",
      credentials: "include",
    }).then((r) => {
      if (!r.ok) throw new Error("session failed");
      // SessionResponse: { token, expiresAt, apiUrl, chatUserId, displayName }
      return r.json();
    }),
});

@Component({
  standalone: true,
  imports: [SendsarChatShellComponent],
  template: `
    <sc-chat-shell
      [users]="users"
      [createRoom]="createRoom"
    />
  `,
})
export class ChatPageComponent {
  private readonly session = inject(SendsarSessionService);

  // New Chat picker — peer ids must already exist in Sendsar
  users: UserDirectoryEntry[] = [
    { id: "user_bob", displayName: "Bob" },
  ];

  // Required in production — default handler hits the demo BFF
  createRoom = async (
    request:
      | { kind: "direct"; peerId: string }
      | { kind: "group"; name: string; memberIds: string[] },
    selfId: string,
  ) => {
    const client = this.session.client!;
    if (request.kind === "direct") {
      const ids = [selfId, request.peerId].sort();
      const room = await client.createRoom({
        externalId: `dm:${ids[0]}:${ids[1]}`,
        participants: [{ id: selfId }, { id: request.peerId }],
      });
      return { roomId: room.id };
    }
    const room = await client.createRoom({
      name: request.name,
      participants: [
        { id: selfId },
        ...request.memberIds.map((id) => ({ id })),
      ],
    });
    return { roomId: room.id };
  };
}

Inject SendsarSessionService only if you need client for a custom createRoom (as above). For a demo-only shell, [users] is enough.

NgModule apps:

ts
import { SendsarChatModule } from "@sendsar/chat-uikit-angular";

@NgModule({
  imports: [
    SendsarChatModule.forRoot({
      fetchSession: () =>
        fetch("/api/chat/session", {
          method: "POST",
          credentials: "include",
        }).then((r) => {
          if (!r.ok) throw new Error("session failed");
          return r.json();
        }),
    }),
  ],
})
export class AppModule {}
html
<sc-chat-shell [users]="users" [createRoom]="createRoom" />

Pass a user directory so DMs show names instead of raw ids. Override createRoom in production — the default hits /api/chat/demo/ensure-*. Peers must already exist (logged in once, or upserted with sk_*).

3. Light / dark ​

The kit follows data-theme on <html> (default light). Tokens are --sc-* in sendsar-uikit.css. Call overlay stays dark.

html
<html lang="en" data-theme="light">
ts
document.documentElement.setAttribute("data-theme", "dark"); // or "light"
css
[data-theme="light"] {
  --sc-accent: #0096c8;
  --sc-bubble-mine: #0096c8;
}

4. Voice & video (optional) ​

Call UI ships in the shell. Enable Calls in the dashboard, then open a room and use voice / video in the header. No CallClient in your app.

Use HTTPS (or localhost) so the browser can grant mic/camera.

What the shell includes ​

  • Conversation list (unread, presence) + message thread + composer
  • Reactions, edit / delete, pin / unpin, forward, files
  • Leave group / delete chat / clear history; group members (add / kick for operators)
  • Voice & video overlay (incoming, active call, call-log redial)
  • Light / dark via data-theme and --sc-* tokens

Checklist ​

  • [ ] Session from your BFF — no sk_* in the browser
  • [ ] Kit styles imported (sendsar-uikit.css)
  • [ ] provideSendsar or SendsarChatModule.forRoot — shell auto-starts
  • [ ] User directory for readable DM titles
  • [ ] Production createRoom (not the demo BFF default)
  • [ ] Theme: data-theme on <html> if you need dark
  • [ ] Calls (if needed): dashboard flag + HTTPS / permissions

Next ​

Copyright © 2026 Sendsar