@threadplane/chatClassv0.3.4

ChatSidenavComponent

The conversation sidebar: thread list, projects, search, and the new-chat action. Pair it with a runtime's thread store (e.g. LangGraphThreadsAdapter) and a ThreadActionAdapter for the per-row rename/delete/archive menu.

This component renders the sidebar only — it is not a layout wrapper. Its <ng-content> slots are all named (sidenavHeader, sidenavPrimary, sidenavSections, sidenavFooterLeft, sidenavFooterRight, sidenavAccount) and target regions inside the sidebar. There is no default slot, so a <chat> placed between the tags is silently dropped. Render the chat as a sibling and lay the two out yourself:

View source View Markdown

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

Declaration

export declare class ChatSidenavComponent  {
  constructor();
  readonly actions: import("@angular/core").InputSignal<ThreadActionAdapter | null>;
  readonly activeThreadId: import("@angular/core").InputSignal<string | null>;
  readonly agent: import("@angular/core").InputSignal<Agent<unknown> | AgentWithHistory<unknown> | null>;
  readonly archivedThreads: import("@angular/core").InputSignal<Thread[] | null>;
  readonly debug: import("@angular/core").InputSignal<boolean>;
  readonly mode: import("@angular/core").InputSignal<ChatSidenavMode>;
  readonly modeChange: import("@angular/core").OutputEmitterRef<ChatSidenavMode>;
  readonly newChat: import("@angular/core").OutputEmitterRef<void>;
  readonly newProjectRequested: import("@angular/core").OutputEmitterRef<void>;
  readonly open: import("@angular/core").InputSignal<boolean>;
  readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;
  readonly projectActions: import("@angular/core").InputSignal<ProjectActionAdapter | null>;
  readonly projects: import("@angular/core").InputSignal<Project[] | null>;
  readonly projectSelected: import("@angular/core").OutputEmitterRef<string>;
  readonly searchOpened: import("@angular/core").OutputEmitterRef<void>;
  readonly selectedProjectId: import("@angular/core").InputSignal<string | null>;
  readonly threads: import("@angular/core").InputSignal<Thread[] | null>;
  readonly threadSelected: import("@angular/core").OutputEmitterRef<string>;
}

Angular template API

Selector: chat-sidenav

Inputs

actions: ThreadActionAdapter | null
activeThreadId: string | null
agent: Agent<unknown> | AgentWithHistory<unknown> | null
archivedThreads: Thread[] | null
debug: boolean
mode: ChatSidenavMode
open: boolean
projectActions: ProjectActionAdapter | null
projects: Project[] | null
selectedProjectId: string | null
threads: Thread[] | null

Outputs

modeChange: ChatSidenavMode
newChat: void
newProjectRequested: void
openChange: boolean
projectSelected: string
searchOpened: void
threadSelected: string

Examples

<chat-sidenav
  [threads]="threads.threads()"
  [activeThreadId]="activeThread()"
  [actions]="threadActions"
  [agent]="agent"
  (newChat)="activeThread.set(null)"
  (threadSelected)="activeThread.set($event)"
/>
<main class="chat-pane">
  <chat [agent]="agent" />
</main>

:host { display: flex; height: 100dvh; }
.chat-pane { flex: 1; min-width: 0; }

Members

Constructor · overload 1

Constructs a new instance of the ChatSidenavComponent class

constructor();

actions

readonly actions: import("@angular/core").InputSignal<ThreadActionAdapter | null>;

activeThreadId

readonly activeThreadId: import("@angular/core").InputSignal<string | null>;

agent

readonly agent: import("@angular/core").InputSignal<Agent<unknown> | AgentWithHistory<unknown> | null>;

archivedThreads

readonly archivedThreads: import("@angular/core").InputSignal<Thread[] | null>;

debug

readonly debug: import("@angular/core").InputSignal<boolean>;

mode

readonly mode: import("@angular/core").InputSignal<ChatSidenavMode>;

modeChange

readonly modeChange: import("@angular/core").OutputEmitterRef<ChatSidenavMode>;

newChat

readonly newChat: import("@angular/core").OutputEmitterRef<void>;

newProjectRequested

readonly newProjectRequested: import("@angular/core").OutputEmitterRef<void>;

open

readonly open: import("@angular/core").InputSignal<boolean>;

openChange

readonly openChange: import("@angular/core").OutputEmitterRef<boolean>;

projectActions

readonly projectActions: import("@angular/core").InputSignal<ProjectActionAdapter | null>;

projects

readonly projects: import("@angular/core").InputSignal<Project[] | null>;

projectSelected

readonly projectSelected: import("@angular/core").OutputEmitterRef<string>;

searchOpened

readonly searchOpened: import("@angular/core").OutputEmitterRef<void>;

selectedProjectId

readonly selectedProjectId: import("@angular/core").InputSignal<string | null>;

threads

readonly threads: import("@angular/core").InputSignal<Thread[] | null>;

threadSelected

readonly threadSelected: import("@angular/core").OutputEmitterRef<string>;