create-kai 0.1.0

package/dist/templates/angular/_gitignore

@@ -0,0 +1,7 @@
+node_modules/
+dist/
+.angular/
+.env
+.env.local
+*.log
+.DS_Store

package/dist/templates/angular/angular.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ui-example-angular": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/ui-example-angular",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "polyfills": [],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [],
+            "styles": [
+              "node_modules/@kitn.ai/ui/dist/theme.tokens.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "ui-example-angular:build:production"
+            },
+            "development": {
+              "buildTarget": "ui-example-angular:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

package/dist/templates/angular/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@kitn.ai/ui-example-angular",
+  "private": true,
+  "version": "0.0.0",
+  "engines": {
+    "node": ">=22.22.3"
+  },
+  "scripts": {
+    "ng": "ng",
+    "dev": "ng serve",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/platform-browser": "^22.0.0",
+    "@kitn.ai/ui": "workspace:*",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^22.0.0",
+    "@angular/cli": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
+    "typescript": "~6.0.0"
+  }
+}

package/dist/templates/angular/src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { type ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
+
+// Minimal standalone bootstrap config. No router/HTTP needed for the demo; the kit
+// elements register in main.ts before bootstrap. Angular 22 is zoneless by default —
+// no zone.js polyfill. The app is fully signal-based (the chat/conversation stores
+// use signals, components are OnPush-friendly) and the template `(kai-*)` event
+// bindings schedule change detection, so streaming/theme/switch/collapse all update
+// without Zone.
+export const appConfig: ApplicationConfig = {
+  providers: [provideZonelessChangeDetection()],
+};

package/dist/templates/angular/src/app/app.css

@@ -0,0 +1,36 @@
+/* Full-height workspace shell. Colors come from the kit's --color-* tokens, which
+   flip to dark under the `.dark` class we toggle on `.app`. <kai-resizable> fills
+   this box (its `:host` is `height:100%`) and owns the sidebar | main split, the
+   panel widths, and the draggable divider. */
+.app {
+  height: 100dvh;
+  background: var(--color-background);
+  color: var(--color-foreground);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.bar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.brand {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+}

package/dist/templates/angular/src/app/app.html

@@ -0,0 +1,51 @@
+<div class="app" [class.dark]="theme() === 'dark'">
+  <!-- <kai-resizable> owns the sidebar width + the divider. The handle defaults to
+       the `line` hairline (transparent at rest, tinting on hover/drag); collapsing
+       the sidebar maps to <kai-resizable-item [collapsed]>. Pass `theme` to the group
+       AND every item so slotted chrome inherits the right light/dark tokens. -->
+  <kai-resizable [theme]="theme()" orientation="horizontal">
+    <kai-resizable-item [theme]="theme()" size="280px" min="220px" max="420px" [collapsed]="collapsed()">
+      <app-sidebar
+        [theme]="theme()"
+        [conversations]="conversations()"
+        [activeId]="activeId()"
+        [collapsed]="collapsed()"
+        (select)="selectConversation($event)"
+        (newChat)="newChat()"
+        (toggle)="collapsed.set(!collapsed())"
+      ></app-sidebar>
+    </kai-resizable-item>
+
+    <kai-resizable-item [theme]="theme()">
+      <main class="main">
+        <header class="bar">
+          <div class="bar-left">
+            @if (collapsed()) {
+              <kai-button
+                [theme]="theme()"
+                variant="ghost"
+                size="icon"
+                icon="panel-left"
+                label="Show sidebar"
+                (click)="collapsed.set(false)"
+              ></kai-button>
+            }
+            <span class="brand">&#64;kitn.ai/ui · composed chat</span>
+          </div>
+          <app-theme-toggle [theme]="theme()" (toggle)="toggleTheme()"></app-theme-toggle>
+        </header>
+
+        <app-thread-view [theme]="theme()" [messages]="chat.messages()"></app-thread-view>
+
+        <app-composer
+          [theme]="theme()"
+          [loading]="chat.loading()"
+          [suggestions]="suggestions()"
+          [triggers]="triggers"
+          (submit)="send($event)"
+          (suggestion)="send($event)"
+        ></app-composer>
+      </main>
+    </kai-resizable-item>
+  </kai-resizable>
+</div>

package/dist/templates/angular/src/app/app.ts

@@ -0,0 +1,78 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, computed, signal } from '@angular/core';
+import { readOpenAIStream } from '@kitn.ai/ui/wire';
+import { CONVERSATIONS, THREADS, SUGGESTIONS, TRIGGERS, newId, mockResponse } from '../chat-data';
+import type { Theme } from './types';
+import { createChat } from './state/chat.store';
+import { createConversations } from './state/conversations.store';
+import { Sidebar } from './components/sidebar/sidebar';
+import { ThreadView } from './components/thread-view/thread-view';
+import { Composer } from './components/composer/composer';
+import { ThemeToggle } from './components/theme-toggle/theme-toggle';
+
+/**
+ * A mini chat workspace COMPOSED BY HAND from @kitn.ai/ui's individual elements —
+ * the Angular mirror of `examples/react` and `examples/vue`. It shows how the raw
+ * `kai-*` web components fit together (vs. dropping in one batteries-included
+ * `<kai-chat>`/`<kai-workspace>`):
+ *
+ *   <kai-resizable>/<kai-resizable-item>  — the draggable sidebar | main split (the
+ *                                           divider is the kit's default `line` hairline)
+ *   <kai-conversations>  — the sidebar list (fed `conversations`, emits select/new)
+ *   <kai-thread>         — the scrolling message list (stick-to-bottom built in)
+ *   <kai-prompt-input>   — the composer at the bottom
+ *
+ * The pieces are split into standalone sub-components + the example's own moon/sun
+ * icons, and `state/` (`createChat` owns the message array + streaming,
+ * `createConversations` the conversation stash, `useVoiceInput` the mic). Everything
+ * else is plain Angular signals. Swap `mockResponse(text)` for a real `fetch` to ship.
+ *
+ * `CUSTOM_ELEMENTS_SCHEMA` tells Angular to allow the unknown `kai-*` tags and pass
+ * property/event bindings straight through to the DOM.
+ */
+@Component({
+  selector: 'app-root',
+  imports: [Sidebar, ThreadView, Composer, ThemeToggle],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+})
+export class App {
+  readonly theme = signal<Theme>('dark');
+  readonly collapsed = signal(false);
+
+  readonly chat = createChat(THREADS[CONVERSATIONS[0].id] ?? []);
+  private readonly convos = createConversations(this.chat, CONVERSATIONS);
+  readonly conversations = this.convos.conversations;
+  readonly activeId = this.convos.activeId;
+
+  readonly suggestions = computed(() => (this.chat.messages().length <= 1 ? SUGGESTIONS : []));
+  readonly triggers = TRIGGERS;
+
+  toggleTheme() {
+    this.theme.set(this.theme() === 'light' ? 'dark' : 'light');
+  }
+
+  selectConversation(id: string) {
+    this.convos.selectConversation(id);
+  }
+
+  newChat() {
+    this.convos.newChat();
+  }
+
+  async send(raw: string) {
+    const text = raw.trim();
+    if (!text) return;
+    // The Composer already cleared its own input; here we just append the user
+    // message and stream the (mock) assistant reply.
+    this.chat.append({ id: newId(), role: 'user', parts: [{ type: 'text', text }] });
+    const stream = this.chat.streamAssistant();
+    // NO BACKEND AND NO PROVIDER. mockResponse() yields canned SSE frames that go
+    // through the SAME reader a real model's response would, so this preview
+    // exercises the real path. To go live, only this one expression changes —
+    // `mockResponse(text)` becomes a POST to your route, with
+    // toOpenAIMessages(this.chat.messages()) as the body. The line below stays.
+    await readOpenAIStream(mockResponse(text), stream);
+    stream.done();
+  }
+}

package/dist/templates/angular/src/app/components/composer/composer.css

@@ -0,0 +1,31 @@
+/* No top divider above the input — the composer floats against the thread. Extra
+   bottom padding lifts the input + hint off the viewport edge. */
+.composer {
+  padding: 0.75rem 1rem 1.5rem;
+}
+
+/* Match the composer to the centered message column above it. */
+.composer > * {
+  display: block;
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+/* Muted, centered helper line under the input pointing out the / and @ triggers. */
+.composer-hint {
+  margin: 0.5rem auto 0;
+  font-size: 0.75rem;
+  text-align: center;
+  color: var(--color-muted-foreground);
+}
+
+.composer-hint kbd {
+  font-family: inherit;
+  font-size: 0.6875rem;
+  padding: 0.05rem 0.3rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-muted);
+  color: var(--color-foreground);
+}

package/dist/templates/angular/src/app/components/composer/composer.html

@@ -0,0 +1,18 @@
+<div class="composer">
+  <kai-prompt-input
+    #prompt
+    [theme]="theme()"
+    placeholder="Message the demo…"
+    [loading]="loading()"
+    [suggestions]="suggestions()"
+    [triggers]="triggers()"
+    [voice]="true"
+    (kai-voice)="handleVoice()"
+    (kai-value-change)="onValueChange($event)"
+    (kai-submit)="onSubmit($event)"
+    (kai-suggestion-click)="onSuggestionClick($event)"
+  ></kai-prompt-input>
+  <p class="composer-hint">
+    Type <kbd>/</kbd> for skills · <kbd>&#64;</kbd> for agents
+  </p>
+</div>

package/dist/templates/angular/src/app/components/composer/composer.ts

@@ -0,0 +1,81 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, ElementRef, ViewChild, input, output } from '@angular/core';
+import type { Theme } from '../../types';
+import { useVoiceInput } from '../../state/voice-input';
+
+/** The imperative surface of <kai-prompt-input> this composer drives. */
+type PromptInputEl = HTMLElement & { value?: unknown; clear?: () => void };
+
+/**
+ * The bottom composer. Wraps `<kai-prompt-input>` and owns the input-DOM concerns:
+ * the element ref, a live text mirror, clear-on-submit, and seeding voice.
+ *
+ * The prompt input stays UNCONTROLLED so the `/`+`@` trigger menus keep a live
+ * caret. We NEVER bind `[value]` with a plain STRING: that flips the element into
+ * controlled mode, which re-applies the property and collapses the shadow-DOM
+ * selection, disabling the caret-anchored menu. So clear-on-submit goes through the
+ * element's `clear()` method, and voice seeds a ComposerDoc (a non-string value is a
+ * one-time seed that leaves the input uncontrolled). We keep the live text mirrored
+ * in `liveText` (from `kai-value-change`) so voice can append.
+ *
+ * `voice` is set as a truthy PROPERTY (`[voice]="true"`) because the facade's flag()
+ * takes an explicit JS `false` over a present attribute, so the bound property is the
+ * one that can still turn the flag back off. A bare `voice` attribute would also read
+ * as TRUE here — presence is what counts, and only `voice="false"` reads as false.
+ */
+@Component({
+  selector: 'app-composer',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: './composer.html',
+  styleUrl: './composer.css',
+})
+export class Composer {
+  theme = input.required<Theme>();
+  loading = input.required<boolean>();
+  suggestions = input.required<string[]>();
+  triggers = input.required<unknown[]>();
+
+  submit = output<string>();
+  suggestion = output<string>();
+
+  // Ref to the underlying <kai-prompt-input> element for the imperative pushes
+  // (clear() on submit, ComposerDoc seed from voice); `liveText` mirrors the text.
+  @ViewChild('prompt', { static: true }) promptRef!: ElementRef<PromptInputEl>;
+  private liveText = '';
+
+  // Voice: on a transcript, append it to the current text and seed the (uncontrolled)
+  // input as a ComposerDoc. A non-string `value` is a one-time seed into the
+  // element's internal state; a plain STRING would instead flip it into controlled
+  // mode and re-break the `/`+`@` triggers and submit.
+  private readonly voice = useVoiceInput((transcript) => {
+    const next = (this.liveText ? this.liveText + ' ' : '') + transcript;
+    this.liveText = next;
+    const el = this.promptRef?.nativeElement;
+    if (el) el.value = [{ type: 'text', text: next }];
+  });
+
+  handleVoice() {
+    // Mic is Chromium-only; degrade gracefully everywhere else.
+    if (!this.voice.supported) {
+      alert('Voice input needs a Chromium browser.');
+      return;
+    }
+    this.voice.start();
+  }
+
+  onValueChange(e: Event) {
+    this.liveText = (e as CustomEvent<{ value: string }>).detail.value;
+  }
+
+  onSubmit(e: Event) {
+    // Clear our own uncontrolled input first — reset the mirror + call the element's
+    // clear() method (uncontrolled-safe; fires kai-value-change internally, never a
+    // string assignment) — then hand the text up. The parent owns append + streaming.
+    this.liveText = '';
+    this.promptRef?.nativeElement?.clear?.();
+    this.submit.emit((e as CustomEvent<{ value: string }>).detail.value);
+  }
+
+  onSuggestionClick(e: Event) {
+    this.suggestion.emit((e as CustomEvent<{ value: string }>).detail.value);
+  }
+}

package/dist/templates/angular/src/app/components/icons/moon-icon/moon-icon.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

package/dist/templates/angular/src/app/components/icons/moon-icon/moon-icon.html

@@ -0,0 +1,12 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+</svg>

package/dist/templates/angular/src/app/components/icons/moon-icon/moon-icon.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+/**
+ * Moon glyph — shown in light mode (tap the toggle -> dark). moon/sun aren't in the
+ * kit's icon set, so the example owns them. The host is `display: inline-flex` so
+ * the 20x20 svg it wraps drops cleanly into `<kai-button>`'s icon slot (the parent
+ * puts `slot="icon"` on this element).
+ */
+@Component({
+  selector: 'app-moon-icon',
+  standalone: true,
+  templateUrl: './moon-icon.html',
+  styleUrl: './moon-icon.css',
+})
+export class MoonIcon {}

package/dist/templates/angular/src/app/components/icons/sun-icon/sun-icon.css

@@ -0,0 +1,3 @@
+:host {
+  display: inline-flex;
+}

package/dist/templates/angular/src/app/components/icons/sun-icon/sun-icon.html

@@ -0,0 +1,14 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="12" r="4" />
+  <path d="M12 2v2" /><path d="M12 20v2" /><path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" />
+  <path d="M2 12h2" /><path d="M20 12h2" /><path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
+</svg>

package/dist/templates/angular/src/app/components/icons/sun-icon/sun-icon.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+/**
+ * Sun glyph — shown in dark mode (tap the toggle -> light). See MoonIcon for why the
+ * example owns these icons.
+ */
+@Component({
+  selector: 'app-sun-icon',
+  standalone: true,
+  templateUrl: './sun-icon.html',
+  styleUrl: './sun-icon.css',
+})
+export class SunIcon {}

package/dist/templates/angular/src/app/components/sidebar/sidebar.css

@@ -0,0 +1,24 @@
+/* The sidebar is its own surface: `--color-muted` sits a step off `--color-background`
+   in both themes (near-white grey in light, a shade lighter than the base in dark). That
+   #f4f4f5-on-white step is subtle, so a 1px right border marks the at-rest sidebar | main
+   division: <kai-resizable>'s `line` handle is transparent at rest and only tints on
+   hover/drag, so the boundary has to come from the panel itself. The border uses
+   `var(--color-border)`, which now tracks the shell's light/dark tokens because the parent
+   <ResizableItem theme={theme}> forwards the theme (a light hairline in light mode, dark in
+   dark). `box-sizing: border-box` keeps the 1px inside the 280px item so it doesn't shift
+   the content width. Collapse is handled by the parent <ResizableItem collapsed> (the panel
+   + its divider drop out), so the old `.sidebar.collapsed` rule is gone. */
+.sidebar {
+  background: var(--color-muted);
+  border-right: 1px solid var(--color-border);
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.sidebar > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/dist/templates/angular/src/app/components/sidebar/sidebar.html

@@ -0,0 +1,12 @@
+<aside class="sidebar">
+  <kai-conversations
+    [theme]="theme()"
+    [groups]="emptyGroups"
+    [conversations]="conversations()"
+    [attr.active-id]="activeId()"
+    [collapsed]="collapsed()"
+    (kai-conversation-select)="onSelect($event)"
+    (kai-new-chat)="newChat.emit()"
+    (kai-toggle-sidebar)="toggle.emit()"
+  ></kai-conversations>
+</aside>

package/dist/templates/angular/src/app/components/sidebar/sidebar.ts

@@ -0,0 +1,43 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, input, output } from '@angular/core';
+import type { Theme } from '../../types';
+import type { Conversation } from '../../../chat-data';
+
+/**
+ * The conversation rail — a thin wrapper over `<kai-conversations>`. The `.sidebar` div
+ * owns the shell's right border (kept OFF the element so it follows the shell's
+ * light/dark tokens, not the light-mode ones the element pins on itself at `:host`).
+ * The rail's `collapsed` is CONTROLLED by the app's collapsed state, so it stays in
+ * sync with the parent `<kai-resizable-item collapsed>` and re-expands the list on
+ * restore; the internal hamburger still reports the toggle intent up via
+ * `(kai-toggle-sidebar)`.
+ *
+ * Array/object props (`groups`, `conversations`) are set as DOM PROPERTIES via
+ * Angular property binding (`[groups]`, `[conversations]`). `collapsed` is a boolean
+ * PROPERTY. `activeId` is a scalar the element reads as the `active-id` attribute, so
+ * it binds with `[attr.active-id]`. `emptyGroups` is a stable field, not an inline
+ * `[]` literal, so the property isn't re-set (and the list re-cleared) every change
+ * detection.
+ */
+@Component({
+  selector: 'app-sidebar',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: './sidebar.html',
+  styleUrl: './sidebar.css',
+})
+export class Sidebar {
+  theme = input.required<Theme>();
+  conversations = input.required<Conversation[]>();
+  activeId = input.required<string>();
+  collapsed = input(false);
+
+  select = output<string>();
+  newChat = output<void>();
+  toggle = output<void>();
+
+  // Stable empty-groups reference (this demo uses a flat conversation list).
+  readonly emptyGroups: unknown[] = [];
+
+  onSelect(e: Event) {
+    this.select.emit((e as CustomEvent<{ id: string }>).detail.id);
+  }
+}

package/dist/templates/angular/src/app/components/theme-toggle/theme-toggle.html

@@ -0,0 +1,13 @@
+<kai-button
+  [theme]="theme()"
+  variant="ghost"
+  size="icon"
+  label="Toggle light/dark theme"
+  (click)="toggle.emit()"
+>
+  @if (theme() === 'light') {
+    <app-moon-icon slot="icon" aria-hidden="true"></app-moon-icon>
+  } @else {
+    <app-sun-icon slot="icon" aria-hidden="true"></app-sun-icon>
+  }
+</kai-button>

package/dist/templates/angular/src/app/components/theme-toggle/theme-toggle.ts

@@ -0,0 +1,21 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, input, output } from '@angular/core';
+import type { Theme } from '../../types';
+import { MoonIcon } from '../icons/moon-icon/moon-icon';
+import { SunIcon } from '../icons/sun-icon/sun-icon';
+
+/**
+ * Light/dark switch for the top bar. Shows the moon in light mode (tap -> dark) and
+ * the sun in dark mode. `<kai-button>` is icon-only, so it carries the accessible
+ * `label`; the glyph is decorative (`aria-hidden`) in the `icon` slot. The native
+ * click on the shadow-root button bubbles (composed), so a plain `(click)` works.
+ */
+@Component({
+  selector: 'app-theme-toggle',
+  imports: [MoonIcon, SunIcon],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: './theme-toggle.html',
+})
+export class ThemeToggle {
+  theme = input.required<Theme>();
+  toggle = output<void>();
+}

package/dist/templates/angular/src/app/components/thread-view/thread-view.css

@@ -0,0 +1,6 @@
+/* <kai-thread> scrolls internally and centers its own fixed-width column, so the
+   host just needs to fill the remaining height of the main flex column. */
+.thread {
+  flex: 1;
+  min-height: 0;
+}

package/dist/templates/angular/src/app/components/thread-view/thread-view.html

@@ -0,0 +1,6 @@
+<kai-thread
+  class="thread"
+  [theme]="theme()"
+  [messages]="withActions()"
+  (kai-message-action)="onMessageAction($event)"
+></kai-thread>

package/dist/templates/angular/src/app/components/thread-view/thread-view.ts

@@ -0,0 +1,45 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, computed, input } from '@angular/core';
+import type { ChatMessage } from '@kitn.ai/ui';
+import { partsToText } from '@kitn.ai/ui/state';
+import type { Theme } from '../../types';
+
+/**
+ * The scrolling message list. `<kai-thread>` owns the message rendering, the
+ * centered fixed-width column, and stick-to-bottom scroll, so this component just
+ * bakes the per-message actions onto the assistant turns and wires the custom
+ * `speak` action to the browser's speech synthesis. `copy` (and the feedback votes)
+ * are handled inside the element.
+ *
+ * `messages` reaches the element as a DOM PROPERTY (`[messages]`); a NEW array
+ * reference per streaming chunk is what re-renders it. `withActions` is a computed
+ * that derives that fresh array whenever the `messages` signal input changes.
+ */
+@Component({
+  selector: 'app-thread-view',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: './thread-view.html',
+  styleUrl: './thread-view.css',
+})
+export class ThreadView {
+  theme = input.required<Theme>();
+  messages = input.required<ChatMessage[]>();
+
+  // <kai-thread> reads `actions` off each message; only assistant replies get them.
+  withActions = computed<ChatMessage[]>(() =>
+    this.messages().map((m) =>
+      m.role === 'assistant'
+        ? { ...m, actions: ['copy', { id: 'speak', label: 'Read aloud', icon: 'volume-2' }] }
+        : m,
+    ),
+  );
+
+  onMessageAction(e: Event) {
+    const detail = (e as CustomEvent<{ messageId: string; action: string }>).detail;
+    if (detail.action === 'speak') {
+      const m = this.messages().find((x) => x.id === detail.messageId);
+      if (!m) return;
+      window.speechSynthesis.cancel();
+      window.speechSynthesis.speak(new SpeechSynthesisUtterance(partsToText(m.parts)));
+    }
+  }
+}