Angular-Chat-UI-Komponenten für Coding Agents

Angular-Komponenten, die Ereignisströme als Nachrichten, Tool-Aktivitäten, Wartezeiten und Entscheidungen darstellen. Kompatibel mit coding-agent-runner und jedem Backend, das dieselben Ereignisse ausgibt. 

npm install coding-agent-chat

DemoDokumentationGitHubnpm

Demo

Gesprächswiedergabe

Zwei ConversationEvent[]-Transkripte, dargestellt mit <cac-conversation-view>. Jede Wiedergabe enthält einen Composer und eine eigene Theme-Steuerung.

1

Erfolgsfall

Planung, Tool-Aufrufe, eine Code-Antwort und die Freigabe durch den Orchestrator. Der Composer enthält Steuerelemente für Modell, Reasoning, Berechtigungen, Anhänge und Kontext.

Feature run · replay scroll or press play
2

Fehlerfall

Ein fehlgeschlagener Befehl, ein Watchdog-Timeout und ein erneuter Versuch des Orchestrators. Fehler und Erfolg verwenden dasselbe Ereignismodell.

Bugfix session · replay failing command → watchdog → retry → green
GruppierungNeun Tool-Aufrufe erscheinen als ein Block mit Anzahl, Kategorien, Fehlern und Tests.
EinklappenLange Pläne werden unter Mehr anzeigen gekürzt.
Aufklappbare DetailsAusgaben, Traces und Rohprotokolle lassen sich pro Zeile öffnen.
Live-FortsetzungEingaben im Composer fügen Gesprächsrunden hinzu. Verbinde den Composer mit deinem Backend.

Darstellung

Code und Bilder

Syntaxhervorhebung unterstützt 23 Grammatiken. Inline-Bilder und artifact.image-Ereignisse öffnen sich in einer vom Host bereitgestellten Lightbox. Wähle ein Bild, um die Galerie zu öffnen.

Rendering · static transcripthighlighted code · artifact row · inline image

Die Syntaxhervorhebung nutzt lowlight mit Größenlimit und Memoisierung je Block. CHAT_MEDIA_LIGHTBOX verarbeitet Bildklicks; der Host stellt das Overlay bereit.

Übersicht

Inhalt der Bibliothek

23+ Ereignistypen · 7 Einstiegspunkte · 379 bestandene Specs · keine Angular-Imports in core · Apache-2.0

Ereignistypen

Ein append-only ConversationEvent-Union-Typ deckt Nachrichten, Tool-Blöcke, Wartezeiten und Orchestrator-Entscheidungen ab. Unbekannte Typen erscheinen als Fallback-Zeilen.

Framework-unabhängiger Kern

coding-agent-chat/core ist reines TypeScript: der ConversationEvent-Vertrag plus projectConversation(). Backends, SSR-Code und Tests können es ohne Angular importieren.

Einstiegspunkte

Sieben Importpfade halten optionale Funktionen getrennt. core ist reines TypeScript ohne Angular-Abhängigkeit. Beispiele ansehen.

Host-Integrationen

Vier Injection Tokens haben Standardwerte. Stelle CHAT_MEDIA_LIGHTBOX bereit, um Bilder vergrößerbar zu machen. Darstellungsdemo ansehen.

Theme

Importiere das optionale Stylesheet für das Standard-Theme. Setze data-studio-theme="light" auf einem beliebigen Elternelement für die helle Palette.

Zoneless & OnPush

Signalbasierte Komponenten mit strikten Templates, ausgeliefert als Partial-Ivy-Paket. Diese Seite läuft ohne Zone.js.

Tests

246 Komponenten-Specs laufen gegen das gebaute Paket. Projektions- und Markdown-Hilfsfunktionen haben 133 weitere Specs.

Dokumentation

Erste Schritte

1Installieren

terminal
npm install coding-agent-chat
# peer deps: @angular/core, @angular/common, @angular/forms (>=21 <22), rxjs ~7.8

2Bereitstellen

app.config.ts
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideCodingAgentChat } from 'coding-agent-chat';

export const appConfig: ApplicationConfig = {
  providers: [
    // Every integration point has a safe default.
    provideCodingAgentChat(),
  ],
};

3Darstellen

run-view.ts
// any component
import { ConversationViewComponent } from 'coding-agent-chat/conversation';
import type { ConversationEvent } from 'coding-agent-chat/core';

@Component({
  imports: [ConversationViewComponent],
  template: '<cac-conversation-view [events]="events()" />',
})
export class RunView {
  readonly events = signal<readonly ConversationEvent[]>([]);
}

Beispiele für Einstiegspunkte

Sieben Importpfade halten Wire-Vertrag, Renderer und optionale Funktionen getrennt. Jeder Tab zeigt ein Komponentenbeispiel und den zugehörigen Code. Der Root-Import coding-agent-chat exportiert alle Einstiegspunkte und provideCodingAgentChat() erneut.

ConversationEvent und projectConversation() sind reines TypeScript ohne Angular-Abhängigkeit.

live
ConversationNext-gen chat preview
  1. You

    1. The date formatter breaks on 29 Feb — fix it and add a spec.

  3. Agent

    1. Fixed — the formatter used getYear() % 4 for leap years; it now delegates to Intl:

      const fmt = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
return fmt.format(date); // 29 Feb 2024 ✓

      Two new specs cover the leap-day and the 1900 century case — 7/7 pass.

Host-Integrationen

Alle vier Integrationen haben Standardwerte. Konfiguriere bei Bedarf Task-Links, Bildvergrößerung, Verlaufsdaten oder die Bestätigung für Verläufe.

CHAT_TASK_REFERENCE_PROVIDERmarkdown

Liefert Task-Referenzen für die automatische Markdown-Verlinkung und übernimmt die Navigation beim Anklicken. Standard: Task-Schlüssel erscheinen als Klartext.

CHAT_MEDIA_LIGHTBOXshared

Steuert das Bild-Overlay zum Vergrößern per Klick (Modal-Stack, Fokusfalle). Standard: Bilder werden nicht vergrößert.

PROJECT_CHAT_DATA_SOURCEhistory

Der Transport für Scroll-, Such-, Statistik- und Turn-Daten hinter <cac-project-chat-list>. Standard: ein leerer Verlauf.

CHAT_HISTORY_CONFIRMhistory

Bestätigungsabfrage vor dem Laden eines vollständigen, langen Verlaufs. Standard: automatische Bestätigung.

app.config.ts: Root-Tokens
// Both services bind via useExisting and retain their root instances.
provideCodingAgentChat({
  taskReferences: TaskReferenceNavigationService, // implements ChatTaskReferenceProvider
  mediaLightbox: MediaLightboxService,            // implements ChatMediaLightbox
});
app.config.ts: Verlaufs-Tokens
// The history entry point adds two more seams, provided directly:
import { CHAT_HISTORY_CONFIRM, PROJECT_CHAT_DATA_SOURCE } from 'coding-agent-chat/history';

providers: [
  // scroll/search/stats/turn transport behind <cac-project-chat-list>
  { provide: PROJECT_CHAT_DATA_SOURCE, useClass: MyProjectChatDataSource },
  // guard prompt before loading an entire deep history (defaults to auto-confirm)
  { provide: CHAT_HISTORY_CONFIRM, useClass: MyHistoryConfirm },
];
Datenquellenvertrag
// Four read methods. This page implements them in memory.
export interface ProjectChatDataSource {
  scroll(project: string, request: ProjectChatScrollRequest): Observable<ProjectChatScrollResponse>;
  search(project: string, query: string, limit: number): Observable<ProjectChatSearchResponse>;
  stats(project: string): Observable<ProjectChatStatsResponse>;
  turn(project: string, turnId: string): Observable<ProjectChatTurnResponse>;
}
nur core: kein Renderer
// Angular-free core for backends, SSR, and tests.
// contract + projection without pulling in the renderer.
import { projectConversation } from 'coding-agent-chat/core';
import type { ConversationEvent } from 'coding-agent-chat/core';

// Convert CLI lines, timeline data, tokens, screenshots, and commits
// into an ordered ConversationEvent[].
const events: ConversationEvent[] = projectConversation({ source: jobId, lines });

Theme-Anpassung

Importiere das optionale Stylesheet. Setze data-studio-theme auf <html>. Überschreibe nach dem Import CSS-Variablen, um Farben anzupassen.

styles.scss: import
/* styles.scss */
@import 'coding-agent-chat/theme/cac-theme.css';
template.html: Theme-Bereich
<!-- Dark is the default. Use "dark" to force it. -->
<html lang="en" data-studio-theme="light">
  ...
</html>
styles.scss: Token-Überschreibungen
/* styles.scss, after the theme import */
:root {
  --studio-accent: #7c3aed;
  --studio-on-accent: #ffffff;
  --studio-accent-2: #0f766e;
}