ChatSidebarComponent

ChatSidebarComponent is a composition that renders a slide-in chat panel anchored to the right edge of the screen. Unlike a popup window, the sidebar can optionally push your app content aside rather than overlaying it, keeping both the chat and your UI visible at the same time.

Selector: chat-sidebar

Import:

import { ChatSidebarComponent } from '@threadplane/chat';

#When to Use It

Use ChatSidebarComponent when you want the chat to be accessible without completely obscuring the underlying application. It works well for copilot-style experiences where the user references the app while talking to the assistant.

If you need a floating overlay that does not affect layout, use <chat-popup>. If you need the chat to always fill its container, use <chat>.

#Basic Usage

import { Component, ChangeDetectionStrategy, signal } from '@angular/core';
import { injectAgent, provideAgent } from '@threadplane/langgraph';
import { ChatSidebarComponent } from '@threadplane/chat';
 
@Component({
  selector: 'app-shell',
  standalone: true,
  imports: [ChatSidebarComponent],
  providers: [provideAgent({ apiUrl: 'http://localhost:2024', assistantId: 'chat', threadId: signal(null) })],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <chat-sidebar [agent]="chatAgent">
      <!-- your app content -->
      <main>
        <router-outlet />
      </main>
    </chat-sidebar>
  `,
})
export class AppShellComponent {
  protected readonly chatAgent = injectAgent();
}

#Push-Content Mode

When pushContent is true, the sidebar shifts the projected <ng-content> to the left rather than overlaying it. This keeps your application content fully visible alongside the chat panel.

<chat-sidebar [agent]="chatAgent" [pushContent]="true">
  <main>
    <router-outlet />
  </main>
</chat-sidebar>

Layout requirements

In push-content mode, ChatSidebarComponent uses display: flex on its host. The projected content should be designed to reflow gracefully when its available width is reduced.

#API

#Inputs

Input	Type	Default	Description
`agent`	`Agent`	Required	The agent providing streaming state
`views`	`ViewRegistry \| undefined`	`undefined`	A2UI/json-render component registry forwarded to the inner `<chat>`
`clientTools`	`ClientToolRegistry \| undefined`	`undefined`	Frontend-declared client tools forwarded to the inner `<chat>`
`modelOptions`	`readonly ChatSelectOption[]`	`[]`	Options for the chat input model picker
`showModelPicker`	`boolean`	`true`	Hides the model picker when `false`, even when `modelOptions` is non-empty
`selectedModel`	`string` (two-way)	`''`	Current selected model value
`open`	`boolean` (two-way)	`false`	Two-way bindable. Controls whether the sidebar is open
`closeOnEscape`	`boolean`	`true`	Closes the sidebar when Escape is pressed
`pushContent`	`boolean`	`false`	When `true`, the sidebar shifts projected content rather than overlaying it

#Outputs

Output	Type	Description
`openChange`	`boolean`	Emits when the sidebar opens or closes. Use with `[(open)]` for two-way binding

#Slots

Slot	Selector	Description
App content	(default)	Projected via `<ng-content>`. Rendered alongside or behind the chat panel
Header content	`[chatHeader]`	Projected into the sidebar header bar. Replaces the default title

#Methods

Method	Description
`toggle()`	Toggles the sidebar between open and closed
`openWindow()`	Opens the sidebar
`closeWindow()`	Closes the sidebar

#Controlled Open State

@Component({
  template: `
    <button (click)="sidebarOpen.set(!sidebarOpen())">Toggle Chat</button>
 
    <chat-sidebar
      [agent]="chatAgent"
      [pushContent]="true"
      [(open)]="sidebarOpen"
    >
      <main><router-outlet /></main>
    </chat-sidebar>
  `,
  providers: [provideAgent({ apiUrl: 'http://localhost:2024', assistantId: 'chat', threadId: signal(null) })],
})
export class AppShellComponent {
  sidebarOpen = signal(false);
  chatAgent = injectAgent();
}

#A2UI and Client Tools

ChatSidebarComponent forwards views and clientTools to the inner <chat>. Use these inputs when the sidebar should render A2UI surfaces or expose browser-declared tools to the agent:

<chat-sidebar
  [agent]="chatAgent"
  [views]="a2uiViews"
  [clientTools]="clientTools"
>
  <main><router-outlet /></main>
</chat-sidebar>

#Styling

Override the sidebar width using a CSS custom property:

chat-sidebar {
  --tplane-chat-sidebar-width: 420px;
}

See Theming for the full token reference.