npm - create-kai - Versions diffs - 0.1.0 - Mend

create-kai 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

package/dist/templates/nextjs/postcss.config.mjs ADDED Viewed

@@ -0,0 +1,16 @@
+// NO PLUGINS, ON PURPOSE — and the reason is not "our CSS is plain".
+//
+// This config used to say the app imports "@kitn.ai/ui/theme.css — just custom
+// properties", and that was wrong in a way that built green: `theme.css` is
+// Tailwind v4 SOURCE, its light tokens live in an `@theme { … }` at-rule, and with
+// no Tailwind in this pipeline the browser discarded the whole block. The app now
+// imports the pre-compiled `@kitn.ai/ui/theme.tokens.css` instead (see the note in
+// `app/layout.tsx`), which is real CSS and needs no plugin.
+//
+// The empty config still has a job: without it Next walks up the tree and picks up
+// the monorepo root's Tailwind PostCSS config, which is not installed here. A
+// standalone app outside this repo would not need the file at all — and an app
+// that DOES add Tailwind should add the plugin here and switch the import back to
+// `theme.css`, which is then compiled rather than discarded.
+const config = { plugins: {} };
+export default config;

package/dist/templates/nextjs/tsconfig.json ADDED Viewed

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/dist/templates/react/_gitignore ADDED Viewed

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

package/dist/templates/react/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@kitn.ai/ui React example</title>
+    <style>
+      * { box-sizing: border-box; margin: 0; padding: 0; }
+      html, body, #root { height: 100%; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/dist/templates/react/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "@kitn.ai/ui-example-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kitn.ai/ui": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.19.21",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/dist/templates/react/src/App.tsx ADDED Viewed

@@ -0,0 +1,108 @@
+import { useCallback, useState } from 'react';
+import { Button, Resizable, ResizableItem, useKaiChat } from '@kitn.ai/ui/react';
+import { readOpenAIStream } from '@kitn.ai/ui/wire';
+import { CONVERSATIONS, THREADS, SUGGESTIONS, TRIGGERS, newId, mockResponse } from './chat-data';
+import { Sidebar } from './components/Sidebar';
+import { ThreadView } from './components/ThreadView';
+import { Composer } from './components/Composer';
+import { ThemeToggle } from './components/ThemeToggle';
+import { useConversations } from './hooks';
+export type Theme = 'light' | 'dark';
+/**
+ * A mini chat **workspace composed by hand** from @kitn.ai/ui's individual
+ * elements — to show how the pieces fit together (vs. dropping in one
+ * batteries-included <kai-chat>/<kai-workspace> tag):
+ *
+ *   <Resizable>/<ResizableItem>  — the draggable sidebar | main split (the divider
+ *                                  is the kit's default `line` hairline)
+ *   <Conversations>  — the sidebar list (fed `conversations`, emits select/new)
+ *   <Thread>         — the scrolling message list (kai-thread; stick-to-bottom built in)
+ *   <PromptInput>    — the composer at the bottom
+ *
+ * The pieces are split into `components/` (the UI subcomponents + the example's own
+ * moon/sun icons) and `hooks/` (the
+ * conversation stash; voice input + the thread scroll now come from the kit), so the
+ * structure reads top-down. `useKaiChat` owns the
+ * message array + streaming; everything else is plain React state. Swap
+ * `mockResponse(text)` for a real `fetch` to ship a real app.
+ */
+export default function App() {
+  const [theme, setTheme] = useState<Theme>('dark');
+  const [collapsed, setCollapsed] = useState(false);
+  const chat = useKaiChat({ initialMessages: THREADS[CONVERSATIONS[0].id] ?? [] });
+  const { conversations, activeId, selectConversation, newChat } = useConversations(chat, CONVERSATIONS);
+  const send = useCallback(
+    async (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.
+      chat.append({ id: newId(), role: 'user', parts: [{ type: 'text', text }] });
+      const stream = 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(chat.messages) as the body. The line below stays.
+      await readOpenAIStream(mockResponse(text), stream);
+      stream.done();
+    },
+    [chat],
+  );
+  return (
+    <div className={`app${theme === 'dark' ? ' dark' : ''}`}>
+      {/* <kai-resizable> owns the sidebar width + the divider. The handle defaults
+          to the new `line` hairline (transparent at rest, tinting on hover/drag);
+          collapsing the sidebar maps to <ResizableItem collapsed>. */}
+      <Resizable theme={theme} orientation="horizontal">
+        <ResizableItem theme={theme} size="280px" min="220px" max="420px" collapsed={collapsed}>
+          <Sidebar
+            theme={theme}
+            conversations={conversations}
+            activeId={activeId}
+            collapsed={collapsed}
+            onSelect={selectConversation}
+            onNewChat={newChat}
+            onToggle={() => setCollapsed((c) => !c)}
+          />
+        </ResizableItem>
+        <ResizableItem theme={theme}>
+          <main className="main">
+            <header className="bar">
+              <div className="bar-left">
+                {collapsed && (
+                  <Button
+                    theme={theme}
+                    variant="ghost"
+                    size="icon"
+                    icon="panel-left"
+                    label="Show sidebar"
+                    onClick={() => setCollapsed(false)}
+                  />
+                )}
+                <span className="brand">@kitn.ai/ui · composed chat</span>
+              </div>
+              <ThemeToggle theme={theme} onToggle={() => setTheme((t) => (t === 'light' ? 'dark' : 'light'))} />
+            </header>
+            <ThreadView theme={theme} messages={chat.messages} />
+            <Composer
+              theme={theme}
+              loading={chat.loading}
+              suggestions={chat.messages.length <= 1 ? SUGGESTIONS : []}
+              triggers={TRIGGERS}
+              onSubmit={send}
+              onSuggestionClick={send}
+            />
+          </main>
+        </ResizableItem>
+      </Resizable>
+    </div>
+  );
+}

package/dist/templates/react/src/chat-data.ts ADDED Viewed

@@ -0,0 +1,106 @@
+// Self-contained sample data + the kit's shared mock responder — no backend.
+import type { MessagePart } from '@kitn.ai/ui';
+import { createMockResponder } from '@kitn.ai/ui/state';
+export interface Conversation {
+  id: string;
+  title: string;
+  scope: { type: 'document' | 'collection' };
+  messageCount: number;
+  lastMessageAt: string;
+  updatedAt: string;
+}
+export interface Msg {
+  id: string;
+  role: 'user' | 'assistant';
+  parts: MessagePart[];
+}
+export function newId(): string {
+  return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+    ? crypto.randomUUID()
+    : 'id-' + Math.random().toString(36).slice(2);
+}
+const iso = (daysAgo = 0) => new Date(Date.now() - daysAgo * 86_400_000).toISOString();
+export const CONVERSATIONS: Conversation[] = [
+  { id: 'c1', title: 'Getting started', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(0), updatedAt: iso(0) },
+  { id: 'c2', title: 'Composing your own chat', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(0), updatedAt: iso(0) },
+  { id: 'c3', title: 'Theming + dark mode', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(1), updatedAt: iso(1) },
+];
+export const THREADS: Record<string, Msg[]> = {
+  c1: [
+    { id: 'c1u', role: 'user', parts: [{ type: 'text', text: 'What is @kitn.ai/ui?' }] },
+    { id: 'c1a', role: 'assistant', parts: [{ type: 'text', text: '**@kitn.ai/ui** is a set of framework-agnostic web components for AI chat UIs — message threads, streaming, markdown, tool panels, and more. This demo composes its `<kai-conversations>`, `<kai-message>`, and `<kai-prompt-input>` elements by hand.' }] },
+  ],
+  c2: [
+    { id: 'c2u', role: 'user', parts: [{ type: 'text', text: 'How do I build my own chat instead of dropping in `<kai-chat>`?' }] },
+    { id: 'c2a', role: 'assistant', parts: [{ type: 'text', text: "Map your `messages` to `<Message>` elements inside a scroll area, put a `<PromptInput>` below, and wire `onSubmit` to append + stream. That's exactly what this example does — read `App.tsx`." }] },
+  ],
+  c3: [
+    { id: 'c3u', role: 'user', parts: [{ type: 'text', text: 'How does dark mode work?' }] },
+    { id: 'c3a', role: 'assistant', parts: [{ type: 'text', text: "Each element takes a `theme` prop (`light` / `dark` / `auto`). Drive it from app state — toggle it with the button top-right. The kit's `--color-*` tokens flip under a `.dark` class for your own surrounding chrome." }] },
+  ],
+};
+export const SUGGESTIONS = ['What is @kitn.ai/ui?', 'How do I install it?', 'Show me some markdown'];
+// Rich entity triggers for the prompt input: typing `/` opens the skills menu,
+// `@` opens the agents menu. Each selection inserts an atomic pill. Set on
+// <PromptInput> as the `triggers` JS property (a TriggerDef[]).
+export const TRIGGERS = [
+  {
+    char: '/',
+    kind: 'skill',
+    items: [
+      { id: 'summarize', label: 'Summarize', description: 'Summarize the thread', promptText: 'Summarize the thread.' },
+      { id: 'translate', label: 'Translate', description: 'Translate to English', promptText: 'Translate to English.' },
+      { id: 'rewrite', label: 'Rewrite', description: 'Rewrite for clarity', promptText: 'Rewrite this for clarity.' },
+    ],
+  },
+  {
+    char: '@',
+    kind: 'agent',
+    items: [
+      { id: 'researcher', label: 'Researcher', description: 'Deep web research', group: 'Agents' },
+      { id: 'coder', label: 'Coder', description: 'Writes and edits code', group: 'Agents' },
+      { id: 'designer', label: 'Designer', description: 'UI and visual design', group: 'Agents' },
+    ],
+  },
+];
+// The replies the mock cycles through, one per turn. Markdown-rich on purpose:
+// the thread renders markdown, code blocks and blockquotes, so the canned
+// replies exercise that instead of only proving text arrives.
+//
+// The first one says it is a mock in words. That is the WEAKEST of the
+// responder's tells and the only one a real model could imitate, which is
+// exactly why it is not the only one — the rest are on the wire, below.
+const MOCK_REPLIES = [
+  "This reply streams token-by-token from the kit's own mock responder — no API key, no backend, no provider was contacted. Replace `mockResponse(text)` with a real model call (Anthropic, OpenAI, your own endpoint) to ship a real app.",
+  "Install it:\n\n```bash\nnpm install @kitn.ai/ui\n```\n\nThen import the wrappers + tokens:\n\n```tsx\nimport { Conversations, Message, PromptInput } from '@kitn.ai/ui/react';\nimport '@kitn.ai/ui/theme.tokens.css';\n```",
+  "I render **bold**, *italic*, `inline code`, lists, and code blocks:\n\n```ts\nconst stream = chat.streamAssistant();\nawait readOpenAIStream(mockResponse(text), stream);\nstream.done();\n```\n\n> Blockquotes too.",
+  "This chat is **composed by hand**: `<Conversations>` for the sidebar, a `<Message>` per item in a scroll area, and `<PromptInput>` at the bottom — all wired with React state. Swap `mockResponse(text)` for your own model call and you're shipping.",
+];
+/**
+ * The kit's own mock responder, shared with the `kai` MCP scaffolder and
+ * `create-kai` so there is ONE implementation of this and not seven.
+ *
+ * It yields canned SSE frames in the OpenAI chat-completions shape, which
+ * `readOpenAIStream` parses exactly as it parses a real provider's. So this
+ * no-backend preview runs the kit's REAL streaming path — the SSE reader, the
+ * part folding, all of it — rather than a hand-rolled loop that merely
+ * resembles it. Going live then changes one expression, not the handler.
+ *
+ * It also cannot be mistaken for a real turn: the stream opens with a
+ * `: kai-mock` SSE comment, every frame carries a `_kai_mock` field, `model`
+ * reports as `kai-mock` (no provider serves that, so an echoed mock frame is
+ * rejected upstream rather than quietly believed), and usage is all zeros.
+ *
+ * MODULE scope, not per-send: the responder owns the cursor into the replies
+ * above, so rebuilding it each turn would answer with the first one forever.
+ */
+export const mockResponse = createMockResponder({ replies: MOCK_REPLIES });

package/dist/templates/react/src/components/Composer.tsx ADDED Viewed

@@ -0,0 +1,87 @@
+import { useCallback, useRef } from 'react';
+import { PromptInput } from '@kitn.ai/ui/react';
+import type { PromptInputProps } from '@kitn.ai/ui/react';
+import type { Theme } from '../App';
+import { useVoiceInput } from '@kitn.ai/ui/react';
+interface ComposerProps {
+  theme: Theme;
+  loading: boolean;
+  suggestions: string[];
+  triggers: PromptInputProps['triggers'];
+  onSubmit: (value: string) => void;
+  onSuggestionClick: (value: string) => 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. Assigning a plain STRING `value` flips the element into controlled mode,
+ * which re-applies the property and collapses the shadow-DOM selection — that
+ * disables the caret-anchored menu. So we NEVER push a string: 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 into `textRef` (from `onValueChange`) so voice can append.
+ */
+export function Composer({ theme, loading, suggestions, triggers, onSubmit, onSuggestionClick }: ComposerProps) {
+  // Ref to the underlying <kai-prompt-input> element for the imperative pushes
+  // (clear() on submit, ComposerDoc seed from voice); textRef mirrors the live text.
+  const promptRef = useRef<HTMLElement>(null);
+  const textRef = useRef('');
+  // 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.
+  const { supported: voiceSupported, start: startVoice } = useVoiceInput((transcript) => {
+    const next = (textRef.current ? textRef.current + ' ' : '') + transcript;
+    textRef.current = next;
+    const el = promptRef.current as (HTMLElement & { value?: unknown }) | null;
+    if (el) el.value = [{ type: 'text', text: next }];
+  });
+  const handleVoice = useCallback(() => {
+    // Mic is Chromium-only; degrade gracefully everywhere else.
+    if (!voiceSupported) {
+      alert('Voice input needs a Chromium browser.');
+      return;
+    }
+    startVoice();
+  }, [voiceSupported, startVoice]);
+  const handleSubmit = useCallback(
+    (value: string) => {
+      // Clear our own uncontrolled input first — reset the mirror + call the
+      // element's clear() method (uncontrolled-safe, it fires kai-value-change
+      // internally; never a string assignment) — then hand the text up. The parent
+      // owns append + streaming.
+      textRef.current = '';
+      (promptRef.current as (HTMLElement & { clear?: () => void }) | null)?.clear?.();
+      onSubmit(value);
+    },
+    [onSubmit],
+  );
+  return (
+    <div className="composer">
+      <PromptInput
+        ref={promptRef}
+        theme={theme}
+        placeholder="Message the demo…"
+        loading={loading}
+        suggestions={suggestions}
+        triggers={triggers}
+        voice
+        onVoice={handleVoice}
+        onValueChange={(e) => { textRef.current = e.detail.value; }}
+        onSubmit={(e) => handleSubmit(e.detail.value)}
+        onSuggestionClick={(e) => onSuggestionClick(e.detail.value)}
+      />
+      <p className="composer-hint">
+        Type <kbd>/</kbd> for skills · <kbd>@</kbd> for agents
+      </p>
+    </div>
+  );
+}

package/dist/templates/react/src/components/Sidebar.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import { Conversations } from '@kitn.ai/ui/react';
+import type { Theme } from '../App';
+import type { Conversation } from '../chat-data';
+interface SidebarProps {
+  theme: Theme;
+  conversations: Conversation[];
+  activeId: string;
+  collapsed: boolean;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  onToggle: () => void;
+}
+/**
+ * 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 `<ResizableItem collapsed>` and re-expands the list on restore;
+ * `onToggleSidebar` still reports the toggle intent up via `onToggle`.
+ */
+export function Sidebar({ theme, conversations, activeId, collapsed, onSelect, onNewChat, onToggle }: SidebarProps) {
+  return (
+    <aside className="sidebar">
+      <Conversations
+        theme={theme}
+        groups={[]} /* flat list: the element buckets `conversations` by recency itself */
+        conversations={conversations}
+        activeId={activeId}
+        collapsed={collapsed}
+        onConversationSelect={(e) => onSelect(e.detail.id)}
+        onNewChat={onNewChat}
+        onToggleSidebar={onToggle}
+      />
+    </aside>
+  );
+}

package/dist/templates/react/src/components/ThemeToggle.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import { Button } from '@kitn.ai/ui/react';
+import type { Theme } from '../App';
+import { MoonIcon, SunIcon } from './icons';
+interface ThemeToggleProps {
+  theme: Theme;
+  onToggle: () => void;
+}
+/**
+ * Light/dark switch for the top bar. Shows the moon in light mode (tap → dark) and
+ * the sun in dark mode. The `<Button>` is icon-only, so it carries the accessible
+ * label; the glyph is decorative (`aria-hidden`) and sits in the `icon` slot.
+ */
+export function ThemeToggle({ theme, onToggle }: ThemeToggleProps) {
+  const Glyph = theme === 'light' ? MoonIcon : SunIcon;
+  return (
+    <Button theme={theme} variant="ghost" size="icon" label="Toggle light/dark theme" onClick={onToggle}>
+      <Glyph slot="icon" aria-hidden />
+    </Button>
+  );
+}

package/dist/templates/react/src/components/ThreadView.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import { Thread } from '@kitn.ai/ui/react';
+import type { ChatMessage } from '@kitn.ai/ui/react';
+import { partsToText } from '@kitn.ai/ui/state';
+import type { Theme } from '../App';
+interface ThreadViewProps {
+  theme: Theme;
+  messages: ChatMessage[];
+}
+/**
+ * The scrolling message list. `<kai-thread>` (React `<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.
+ */
+export function ThreadView({ theme, messages }: ThreadViewProps) {
+  // <Thread> reads `actions` off each message; only assistant replies get them.
+  const withActions: ChatMessage[] = messages.map((m) =>
+    m.role === 'assistant'
+      ? { ...m, actions: ['copy', { id: 'speak', label: 'Read aloud', icon: 'volume-2' }] }
+      : m,
+  );
+  return (
+    <Thread
+      className="thread"
+      theme={theme}
+      messages={withActions}
+      onMessageAction={(e) => {
+        if (e.detail.action === 'speak') {
+          const m = messages.find((x) => x.id === e.detail.messageId);
+          if (!m) return;
+          window.speechSynthesis.cancel();
+          window.speechSynthesis.speak(new SpeechSynthesisUtterance(partsToText(m.parts)));
+        }
+      }}
+    />
+  );
+}

package/dist/templates/react/src/components/icons/MoonIcon.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+/**
+ * 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. Props spread straight onto the
+ * `<svg>`, so `slot="icon"`, `className`, and `aria-hidden` pass through and it
+ * drops into `<Button>`'s icon slot.
+ */
+export function MoonIcon({ size = 20, ...props }: { size?: number } & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+    </svg>
+  );
+}

package/dist/templates/react/src/components/icons/SunIcon.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react';
+/**
+ * Sun glyph — shown in dark mode (tap the toggle → light). See `MoonIcon` for why
+ * the example owns these icons. Props spread straight onto the `<svg>`.
+ */
+export function SunIcon({ size = 20, ...props }: { size?: number } & SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <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/react/src/components/icons/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { MoonIcon } from './MoonIcon';
2	+ export { SunIcon } from './SunIcon';

package/dist/templates/react/src/hooks/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { useConversations } from './useConversations';

package/dist/templates/react/src/hooks/useConversations.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { useCallback, useState } from 'react';
+import type { KaiChatController } from '@kitn.ai/ui/react';
+import { THREADS, newId, type Conversation } from '../chat-data';
+/**
+ * Owns the conversation list + which one is active, plus the in-memory `THREADS`
+ * stash: on select/new we swap the OPEN thread out to `THREADS` and swap the picked
+ * one in. Takes the `useKaiChat` controller so it can read the live messages when
+ * stashing and reset them when loading another thread.
+ */
+export function useConversations(chat: KaiChatController, initial: Conversation[]) {
+  const [conversations, setConversations] = useState<Conversation[]>(initial);
+  const [activeId, setActiveId] = useState(initial[0].id);
+  const selectConversation = useCallback(
+    (id: string) => {
+      THREADS[activeId] = chat.messages; // stash the open thread
+      setActiveId(id);
+      chat.setMessages(THREADS[id] ?? []); // load the picked one
+    },
+    [activeId, chat],
+  );
+  const newChat = useCallback(() => {
+    const id = newId();
+    THREADS[activeId] = chat.messages;
+    THREADS[id] = [];
+    setConversations((cs) => [
+      { id, title: 'New conversation', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: new Date().toISOString(), updatedAt: new Date().toISOString() },
+      ...cs,
+    ]);
+    setActiveId(id);
+    chat.setMessages([]);
+  }, [activeId, chat]);
+  return { conversations, activeId, selectConversation, newChat };
+}