@kitnai/chat 0.4.0 → 0.6.0

package/dist/llms/llms-full.txt

@@ -3,7 +3,7 @@
 
 # @kitnai/chat
 
-> SolidJS + Shadow-DOM web component kit for building AI chat interfaces. 27 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; SolidJS is bundled in.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 28 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -37,7 +37,7 @@ Drop an element into any framework (React, Vue, plain HTML). Data in via JS prop
 - `<kitn-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitnai/chat'`):
-All 27 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 28 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -99,7 +99,7 @@ For Tailwind builds: `@import "@kitnai/chat/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 27 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 28 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitnai/chat/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/chat/tree/main/examples
 - Storybook: https://storybook.kitn.dev
@@ -173,7 +173,7 @@ The same rule applies to every array/object property (`models`, `context`, `sugg
 
 ---
 
-## Element reference (27 elements, generated from custom-elements.json)
+## Element reference (28 elements, generated from custom-elements.json)
 
 Every element also accepts the `theme` attribute. Array/object properties are marked with a `—` attribute: they must be set as JS properties.
 
@@ -269,6 +269,57 @@ _No events._
 
 ---
 
+### `kitn-chat-workspace` / `KitnChatWorkspace`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `groups` | — | `{ id: string; userId?: undefined \| string; teamId?: undefined \| string; name: string; sortOrder: number; createdAt: string }[]` | Pre-bucketed conversation groups for the sidebar. Set as a JS property. |
+| `conversations` | — | `{ id: string; title: string; groupId?: undefined \| string; scope: { type: "document" \| "collection"; documentId?: undefined \| string; filters?: undefined \| { tags?: undefined \| string[]; authors?: undefined \| string[]; contentType?: undefined \| "transcript" \| "markdown"; dateRange?: undefined \| { from: string; to: string } } }; messageCount: number; lastMessageAt: string; updatedAt: string }[]` | Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property. |
+| `activeId` | `active-id` | `undefined \| string` | Id of the open conversation, highlighted in the sidebar. |
+| `messages` | — | `{ id: string; role: "user" \| "assistant"; content: string; reasoning?: undefined \| { text: string; label?: undefined \| string }; tools?: undefined \| { type: string; state: "input-streaming" \| "input-available" \| "output-available" \| "output-error"; input?: undefined \| Record<string, unknown>; output?: undefined \| Record<string, unknown>; toolCallId?: undefined \| string; errorText?: undefined \| string }[]; attachments?: undefined \| { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[]; actions?: undefined \| ("copy" \| "like" \| "dislike" \| "regenerate" \| "edit")[] }[]` | The active conversation's message thread, newest last. Set as a JS property. |
+| `value` | `value` | `undefined \| string` |  |
+| `placeholder` | `placeholder` | `undefined \| string` |  |
+| `loading` | `loading` | `undefined \| false \| true` |  |
+| `suggestions` | — | `undefined \| string[]` |  |
+| `suggestionMode` | `suggestion-mode` | `undefined \| "submit" \| "fill"` |  |
+| `proseSize` | `prose-size` | `undefined \| "xs" \| "sm" \| "base" \| "lg"` |  |
+| `codeTheme` | `code-theme` | `undefined \| string` |  |
+| `codeHighlight` | `code-highlight` | `undefined \| false \| true` |  |
+| `chatTitle` | `chat-title` | `undefined \| string` |  |
+| `models` | — | `undefined \| { id: string; name: string; provider?: undefined \| string }[]` |  |
+| `currentModel` | `current-model` | `undefined \| string` |  |
+| `context` | — | `undefined \| { usedTokens: number; maxTokens: number; inputTokens?: undefined \| number; outputTokens?: undefined \| number; estimatedCost?: undefined \| number }` |  |
+| `scrollButton` | `scroll-button` | `undefined \| false \| true` |  |
+| `search` | `search` | `undefined \| false \| true` |  |
+| `voice` | `voice` | `undefined \| false \| true` |  |
+| `slashCommands` | — | `undefined \| { id: string; label: string; description?: undefined \| string; category?: undefined \| string }[]` |  |
+| `slashActiveIds` | — | `undefined \| string[]` |  |
+| `slashCompact` | `slash-compact` | `undefined \| false \| true` |  |
+| `sidebarWidth` | `sidebar-width` | `undefined \| number` | Sidebar default width as a percent of the workspace (default 22). |
+| `sidebarMinWidth` | `sidebar-min-width` | `undefined \| number` | Sidebar min width in px (default 200). |
+| `sidebarMaxWidth` | `sidebar-max-width` | `undefined \| number` | Sidebar max width in px (default 420). |
+| `sidebarCollapsed` | `sidebar-collapsed` | `undefined \| false \| true` | Initial collapsed state of the sidebar (default false). |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `conversationselect` | `CustomEvent<unknown>` |  |
+| `messageaction` | `CustomEvent<unknown>` |  |
+| `modelchange` | `CustomEvent<unknown>` |  |
+| `newchat` | `CustomEvent<unknown>` |  |
+| `search` | `CustomEvent<unknown>` |  |
+| `sidebartoggle` | `CustomEvent<unknown>` |  |
+| `slashselect` | `CustomEvent<unknown>` |  |
+| `submit` | `CustomEvent<unknown>` |  |
+| `suggestionclick` | `CustomEvent<unknown>` |  |
+| `valuechange` | `CustomEvent<unknown>` |  |
+| `voice` | `CustomEvent<unknown>` |  |
+
+---
+
 ### `kitn-checkpoint` / `KitnCheckpoint`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):

package/dist/llms/llms.txt

@@ -1,7 +1,7 @@
 <!-- AUTO-GENERATED by scripts/gen-llms.mjs — do not edit by hand. Run `npm run build`. -->
 # @kitnai/chat
 
-> SolidJS + Shadow-DOM web component kit for building AI chat interfaces. 27 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; SolidJS is bundled in.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 28 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -35,7 +35,7 @@ Drop an element into any framework (React, Vue, plain HTML). Data in via JS prop
 - `<kitn-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitnai/chat'`):
-All 27 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 28 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -97,7 +97,7 @@ For Tailwind builds: `@import "@kitnai/chat/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 27 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 28 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitnai/chat/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/chat/tree/main/examples
 - Storybook: https://storybook.kitn.dev

package/dist/theme.tokens.css

@@ -21,7 +21,17 @@
   --color-destructive-foreground: var(--kitn-color-destructive-foreground, hsl(0 0% 98%));
   --color-border: var(--kitn-color-border, hsl(240 5.9% 90%));
   --color-input: var(--kitn-color-input, hsl(240 5.9% 90%));
-  --color-ring: var(--kitn-color-ring, hsl(240 10% 3.9%));
+  /* Focus ring — a deliberate blue (not a neutral) so keyboard focus is always
+     obvious and on-brand in both modes. Light uses a strong blue; dark uses a
+     brighter one for contrast on dark surfaces. Both clear WCAG 2.1 non-text
+     contrast (≥3:1) against the kit's backgrounds. Override via --kitn-color-ring. */
+  --color-ring: var(--kitn-color-ring, hsl(217 91% 53%));
+  /* Custom scrollbars — thin, rounded, subtle; thumb strengthens on hover. A
+     consistent cross-platform look (the kit styles its OWN scroll regions inside
+     the shadow root; the track stays transparent so nothing is forced where no
+     scrollbar is needed). Override via --kitn-color-scrollbar-thumb(-hover). */
+  --color-scrollbar-thumb: var(--kitn-color-scrollbar-thumb, hsl(240 5% 80%));
+  --color-scrollbar-thumb-hover: var(--kitn-color-scrollbar-thumb-hover, hsl(240 4% 64%));
   --color-sidebar: var(--kitn-color-sidebar, hsl(0 0% 100%));
   /* Inline `code` accent. Blue text on a translucent blue chip. */
   --color-code-foreground: var(--kitn-color-code-foreground, hsl(224.3 76.3% 48%));
@@ -86,7 +96,9 @@
   --color-destructive-foreground: var(--kitn-color-destructive-foreground, hsl(0 0% 98%));
   --color-border: var(--kitn-color-border, hsl(45 4% 17%));
   --color-input: var(--kitn-color-input, hsl(45 4% 17%));
-  --color-ring: var(--kitn-color-ring, hsl(45 5% 72%));
+  --color-ring: var(--kitn-color-ring, hsl(217 91% 68%));
+  --color-scrollbar-thumb: var(--kitn-color-scrollbar-thumb, hsl(45 3% 30%));
+  --color-scrollbar-thumb-hover: var(--kitn-color-scrollbar-thumb-hover, hsl(45 3% 42%));
   --color-sidebar: var(--kitn-color-sidebar, hsl(50 2% 7%));
   --color-code-foreground: var(--kitn-color-code-foreground, hsl(213 94% 78%));
 
@@ -130,4 +142,20 @@
 .chat-markdown th, .chat-markdown td { border: 1px solid var(--color-border); padding: 0.4em 0.6em; text-align: left; }
 .chat-markdown th { font-weight: 600; background: color-mix(in oklab, var(--color-muted-foreground) 8%, transparent); }
 
-.scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--color-muted) transparent; }
+/* Cross-platform thin scrollbar utility (Firefox + WebKit). Used by ScrollArea
+   and any scroll region in the SolidJS-component build (web components also get
+   this globally inside their shadow root — see src/elements/styles.css). */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-scrollbar-thumb) transparent;
+}
+.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
+.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: var(--color-scrollbar-thumb);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover { background-color: var(--color-scrollbar-thumb-hover); }
+.scrollbar-thin::-webkit-scrollbar-corner { background: transparent; }

package/frameworks/react/index.tsx

@@ -111,6 +111,60 @@ export const KitnChatScopePicker = createKitnComponent<KitnChatScopePickerProps>
   { onScopechange: 'scopechange' },
 );
 
+export interface KitnChatWorkspaceProps extends KitnBaseProps {
+  /** Pre-bucketed conversation groups for the sidebar. Set as a JS property. */
+  groups: { id: string; userId?: undefined | string; teamId?: undefined | string; name: string; sortOrder: number; createdAt: string }[];
+  /** Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property. */
+  conversations: { id: string; title: string; groupId?: undefined | string; scope: { type: "document" | "collection"; documentId?: undefined | string; filters?: undefined | { tags?: undefined | string[]; authors?: undefined | string[]; contentType?: undefined | "transcript" | "markdown"; dateRange?: undefined | { from: string; to: string } } }; messageCount: number; lastMessageAt: string; updatedAt: string }[];
+  /** Id of the open conversation, highlighted in the sidebar. */
+  activeId?: string;
+  /** The active conversation's message thread, newest last. Set as a JS property. */
+  messages: { id: string; role: "user" | "assistant"; content: string; reasoning?: undefined | { text: string; label?: undefined | string }; tools?: undefined | { type: string; state: "input-streaming" | "input-available" | "output-available" | "output-error"; input?: undefined | Record<string, unknown>; output?: undefined | Record<string, unknown>; toolCallId?: undefined | string; errorText?: undefined | string }[]; attachments?: undefined | { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]; actions?: undefined | ("copy" | "like" | "dislike" | "regenerate" | "edit")[] }[];
+  value?: string;
+  placeholder?: string;
+  loading?: boolean;
+  suggestions?: string[];
+  suggestionMode?: "submit" | "fill";
+  proseSize?: "xs" | "sm" | "base" | "lg";
+  codeTheme?: string;
+  codeHighlight?: boolean;
+  chatTitle?: string;
+  models?: { id: string; name: string; provider?: string }[];
+  currentModel?: string;
+  context?: { usedTokens: number; maxTokens: number; inputTokens?: number; outputTokens?: number; estimatedCost?: number };
+  scrollButton?: boolean;
+  search?: boolean;
+  voice?: boolean;
+  slashCommands?: { id: string; label: string; description?: string; category?: string }[];
+  slashActiveIds?: string[];
+  slashCompact?: boolean;
+  /** Sidebar default width as a percent of the workspace (default 22). */
+  sidebarWidth?: number;
+  /** Sidebar min width in px (default 200). */
+  sidebarMinWidth?: number;
+  /** Sidebar max width in px (default 420). */
+  sidebarMaxWidth?: number;
+  /** Initial collapsed state of the sidebar (default false). */
+  sidebarCollapsed?: boolean;
+  onConversationselect?: (event: CustomEvent<unknown>) => void;
+  onMessageaction?: (event: CustomEvent<unknown>) => void;
+  onModelchange?: (event: CustomEvent<unknown>) => void;
+  onNewchat?: (event: CustomEvent<unknown>) => void;
+  onSearch?: (event: CustomEvent<unknown>) => void;
+  onSidebartoggle?: (event: CustomEvent<unknown>) => void;
+  onSlashselect?: (event: CustomEvent<unknown>) => void;
+  onSubmit?: (event: CustomEvent<unknown>) => void;
+  onSuggestionclick?: (event: CustomEvent<unknown>) => void;
+  onValuechange?: (event: CustomEvent<unknown>) => void;
+  onVoice?: (event: CustomEvent<unknown>) => void;
+}
+
+export const KitnChatWorkspace = createKitnComponent<KitnChatWorkspaceProps>(
+  'kitn-chat-workspace',
+  ["theme","groups","conversations","activeId","messages","value","placeholder","loading","suggestions","suggestionMode","proseSize","codeTheme","codeHighlight","chatTitle","models","currentModel","context","scrollButton","search","voice","slashCommands","slashActiveIds","slashCompact","sidebarWidth","sidebarMinWidth","sidebarMaxWidth","sidebarCollapsed"],
+  { onConversationselect: 'conversationselect', onMessageaction: 'messageaction', onModelchange: 'modelchange', onNewchat: 'newchat', onSearch: 'search', onSidebartoggle: 'sidebartoggle', onSlashselect: 'slashselect', onSubmit: 'submit', onSuggestionclick: 'suggestionclick', onValuechange: 'valuechange', onVoice: 'voice' },
+);
+
 export interface KitnCheckpointProps extends KitnBaseProps {
   /** Optional text beside the icon. */
   label?: string;

package/llms-full.txt

@@ -3,7 +3,7 @@
 
 # @kitnai/chat
 
-> SolidJS + Shadow-DOM web component kit for building AI chat interfaces. 27 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; SolidJS is bundled in.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 28 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -37,7 +37,7 @@ Drop an element into any framework (React, Vue, plain HTML). Data in via JS prop
 - `<kitn-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitnai/chat'`):
-All 27 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 28 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -99,7 +99,7 @@ For Tailwind builds: `@import "@kitnai/chat/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 27 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 28 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitnai/chat/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/chat/tree/main/examples
 - Storybook: https://storybook.kitn.dev
@@ -173,7 +173,7 @@ The same rule applies to every array/object property (`models`, `context`, `sugg
 
 ---
 
-## Element reference (27 elements, generated from custom-elements.json)
+## Element reference (28 elements, generated from custom-elements.json)
 
 Every element also accepts the `theme` attribute. Array/object properties are marked with a `—` attribute: they must be set as JS properties.
 
@@ -269,6 +269,57 @@ _No events._
 
 ---
 
+### `kitn-chat-workspace` / `KitnChatWorkspace`
+
+**Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):
+
+| Property | Attribute | Type | Description |
+|---|---|---|---|
+| `groups` | — | `{ id: string; userId?: undefined \| string; teamId?: undefined \| string; name: string; sortOrder: number; createdAt: string }[]` | Pre-bucketed conversation groups for the sidebar. Set as a JS property. |
+| `conversations` | — | `{ id: string; title: string; groupId?: undefined \| string; scope: { type: "document" \| "collection"; documentId?: undefined \| string; filters?: undefined \| { tags?: undefined \| string[]; authors?: undefined \| string[]; contentType?: undefined \| "transcript" \| "markdown"; dateRange?: undefined \| { from: string; to: string } } }; messageCount: number; lastMessageAt: string; updatedAt: string }[]` | Flat conversation list (auto-bucketed if `groups` is empty). Set as a JS property. |
+| `activeId` | `active-id` | `undefined \| string` | Id of the open conversation, highlighted in the sidebar. |
+| `messages` | — | `{ id: string; role: "user" \| "assistant"; content: string; reasoning?: undefined \| { text: string; label?: undefined \| string }; tools?: undefined \| { type: string; state: "input-streaming" \| "input-available" \| "output-available" \| "output-error"; input?: undefined \| Record<string, unknown>; output?: undefined \| Record<string, unknown>; toolCallId?: undefined \| string; errorText?: undefined \| string }[]; attachments?: undefined \| { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[]; actions?: undefined \| ("copy" \| "like" \| "dislike" \| "regenerate" \| "edit")[] }[]` | The active conversation's message thread, newest last. Set as a JS property. |
+| `value` | `value` | `undefined \| string` |  |
+| `placeholder` | `placeholder` | `undefined \| string` |  |
+| `loading` | `loading` | `undefined \| false \| true` |  |
+| `suggestions` | — | `undefined \| string[]` |  |
+| `suggestionMode` | `suggestion-mode` | `undefined \| "submit" \| "fill"` |  |
+| `proseSize` | `prose-size` | `undefined \| "xs" \| "sm" \| "base" \| "lg"` |  |
+| `codeTheme` | `code-theme` | `undefined \| string` |  |
+| `codeHighlight` | `code-highlight` | `undefined \| false \| true` |  |
+| `chatTitle` | `chat-title` | `undefined \| string` |  |
+| `models` | — | `undefined \| { id: string; name: string; provider?: undefined \| string }[]` |  |
+| `currentModel` | `current-model` | `undefined \| string` |  |
+| `context` | — | `undefined \| { usedTokens: number; maxTokens: number; inputTokens?: undefined \| number; outputTokens?: undefined \| number; estimatedCost?: undefined \| number }` |  |
+| `scrollButton` | `scroll-button` | `undefined \| false \| true` |  |
+| `search` | `search` | `undefined \| false \| true` |  |
+| `voice` | `voice` | `undefined \| false \| true` |  |
+| `slashCommands` | — | `undefined \| { id: string; label: string; description?: undefined \| string; category?: undefined \| string }[]` |  |
+| `slashActiveIds` | — | `undefined \| string[]` |  |
+| `slashCompact` | `slash-compact` | `undefined \| false \| true` |  |
+| `sidebarWidth` | `sidebar-width` | `undefined \| number` | Sidebar default width as a percent of the workspace (default 22). |
+| `sidebarMinWidth` | `sidebar-min-width` | `undefined \| number` | Sidebar min width in px (default 200). |
+| `sidebarMaxWidth` | `sidebar-max-width` | `undefined \| number` | Sidebar max width in px (default 420). |
+| `sidebarCollapsed` | `sidebar-collapsed` | `undefined \| false \| true` | Initial collapsed state of the sidebar (default false). |
+
+**Events** (non-bubbling `CustomEvent`s — listen directly on the element):
+
+| Event | `detail` type | Description |
+|---|---|---|
+| `conversationselect` | `CustomEvent<unknown>` |  |
+| `messageaction` | `CustomEvent<unknown>` |  |
+| `modelchange` | `CustomEvent<unknown>` |  |
+| `newchat` | `CustomEvent<unknown>` |  |
+| `search` | `CustomEvent<unknown>` |  |
+| `sidebartoggle` | `CustomEvent<unknown>` |  |
+| `slashselect` | `CustomEvent<unknown>` |  |
+| `submit` | `CustomEvent<unknown>` |  |
+| `suggestionclick` | `CustomEvent<unknown>` |  |
+| `valuechange` | `CustomEvent<unknown>` |  |
+| `voice` | `CustomEvent<unknown>` |  |
+
+---
+
 ### `kitn-checkpoint` / `KitnCheckpoint`
 
 **Properties** (every element also accepts `theme="light|dark|auto"`; only scalar props work as HTML attributes):

package/llms.txt

@@ -1,7 +1,7 @@
 <!-- AUTO-GENERATED by scripts/gen-llms.mjs — do not edit by hand. Run `npm run build`. -->
 # @kitnai/chat
 
-> SolidJS + Shadow-DOM web component kit for building AI chat interfaces. 27 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; SolidJS is bundled in.
+> Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. 28 `kitn-*` custom elements: streaming responses, markdown + code rendering, reasoning/tool panels, attachments, conversation sidebar, voice input. Zero framework dependency for consumers; the SolidJS runtime it is authored in is bundled in, so the host needs nothing.
 
 ## Install
 
@@ -35,7 +35,7 @@ Drop an element into any framework (React, Vue, plain HTML). Data in via JS prop
 - `<kitn-prompt-input>` — standalone composer with send button.
 
 **Layer 2 — composable primitives** (`import { … } from '@kitnai/chat'`):
-All 27 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
+All 28 elements are also exported individually. Use them for custom layouts or features `<kitn-chat>` does not expose (ChainOfThought, FeedbackBar, ThinkingBar, VoiceInput, …). Your bundler tree-shakes the rest.
 
 ## Key rules for the web components
 
@@ -97,7 +97,7 @@ For Tailwind builds: `@import "@kitnai/chat/theme.css"` in your CSS.
 
 ## Docs
 
-- Full element reference (all 27 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
+- Full element reference (all 28 elements, every prop/event): ./llms-full.txt — https://kitn.dev/llms-full.txt
 - Machine-readable Custom Elements Manifest: https://unpkg.com/@kitnai/chat/dist/custom-elements.json
 - Working examples: https://github.com/kitn-ai/chat/tree/main/examples
 - Storybook: https://storybook.kitn.dev

package/package.json

@@ -1,8 +1,26 @@
 {
   "name": "@kitnai/chat",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
-  "description": "SolidJS + Shadow-DOM web component kit for building AI chat interfaces.",
+  "description": "Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.",
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "shadow-dom",
+    "ai",
+    "chat",
+    "chatbot",
+    "llm",
+    "chat-ui",
+    "streaming",
+    "markdown",
+    "framework-agnostic",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "solid-js"
+  ],
   "license": "MIT",
   "homepage": "https://github.com/kitn-ai/chat#readme",
   "repository": {

package/src/components/chat-thread.tsx

@@ -0,0 +1,217 @@
+import { createSignal, For, Show } from 'solid-js';
+import { ChatConfig, useChatConfig } from '../primitives/chat-config';
+import { ChatContainer, ChatContainerContent, ChatContainerScrollAnchor } from './chat-container';
+import { Message, MessageContent, MessageActions } from './message';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from './reasoning';
+import { Tool } from './tool';
+import { Attachments, Attachment, AttachmentPreview, AttachmentInfo, type AttachmentData } from './attachments';
+import { ModelSwitcher } from './model-switcher';
+import { ScrollButton } from './scroll-button';
+import {
+  Context, ContextTrigger, ContextContent, ContextContentHeader,
+  ContextContentBody, ContextContentFooter, ContextInputUsage, ContextOutputUsage,
+} from './context';
+import { Button } from '../ui/button';
+import { Copy, ThumbsUp, ThumbsDown, RefreshCw, Pencil } from 'lucide-solid';
+import type { Component } from 'solid-js';
+import { DefaultPromptInput } from '../elements/default-input';
+import type { SlashCommandItem } from './slash-command';
+import type { ChatMessage, ChatMessageAction } from '../elements/chat-types';
+import type { ProseSize } from '../primitives/chat-config';
+import type { ModelOption } from '../types';
+
+export interface ChatThreadContextUsage {
+  usedTokens: number;
+  maxTokens: number;
+  inputTokens?: number;
+  outputTokens?: number;
+  estimatedCost?: number;
+}
+
+export interface ChatThreadProps {
+  /** Extra classes for the thread root (e.g. `h-full`). */
+  class?: string;
+  /** The full message thread to render, newest last. Each entry carries its role,
+   *  content, and optional reasoning/tools/attachments/actions. Set as a JS
+   *  property (`el.messages = [...]`). */
+  messages: ChatMessage[];
+  /** Controlled value of the input. When set, the host owns the input text and
+   *  must update it on `valuechange`; leave unset for uncontrolled behavior. */
+  value?: string;
+  /** Placeholder text shown in the empty input. */
+  placeholder?: string;
+  /** When true, shows the loading/streaming state and disables submit (use while
+   *  awaiting the assistant's reply). */
+  loading?: boolean;
+  /** Starter prompts shown above the input when the thread is empty. Clicking one
+   *  follows `suggestionMode`. Set as a JS property. */
+  suggestions?: string[];
+  /** What clicking a suggestion does: `'submit'` (default) sends it immediately
+   *  as if typed and submitted; `'fill'` just places it in the input. */
+  suggestionMode?: 'submit' | 'fill';
+  /** Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`).
+   *  Defaults to `'sm'`. */
+  proseSize?: ProseSize;
+  /** Shiki theme name for syntax-highlighted code blocks (e.g.
+   *  `'github-dark-dimmed'`). */
+  codeTheme?: string;
+  /** Enable Shiki syntax highlighting in code blocks. Turn off to render plain
+   *  `<pre>` blocks (lighter, no highlighter load). Default true. */
+  codeHighlight?: boolean;
+  /** Optional header title shown on the left of the header. */
+  chatTitle?: string;
+  /** Optional model list. When set (>1 model) a ModelSwitcher is shown in the
+   *  header and a `modelchange` event fires on selection. */
+  models?: ModelOption[];
+  /** The currently selected model id (pairs with `models`). */
+  currentModel?: string;
+  /** Optional context-window token usage. When set, a Context token meter is
+   *  shown in the header. */
+  context?: ChatThreadContextUsage;
+  /** Show the scroll-to-bottom button inside the scroll area. Default true. */
+  scrollButton?: boolean;
+  /** Show a Search (Globe) button in the input toolbar; fires a `search` event. */
+  search?: boolean;
+  /** Show a Voice (Mic) button in the input toolbar; fires a `voice` event. */
+  voice?: boolean;
+  /** Slash commands — when set, typing `/` in the input opens the command
+   *  palette and fires `slashselect`. Set as a JS property. */
+  slashCommands?: SlashCommandItem[];
+  /** Command ids to highlight as active in the palette. */
+  slashActiveIds?: string[];
+  /** Single-line palette rows. */
+  slashCompact?: boolean;
+  // callbacks (the facade maps these to dispatch())
+  onValueChange?: (value: string) => void;
+  onSubmit?: (detail: { value: string; attachments: AttachmentData[] }) => void;
+  onSuggestionClick?: (value: string) => void;
+  onModelChange?: (modelId: string) => void;
+  onMessageAction?: (detail: { messageId: string; action: ChatMessageAction }) => void;
+  onSearch?: () => void;
+  onVoice?: () => void;
+  onSlashSelect?: (command: SlashCommandItem) => void;
+}
+
+const ACTION_LABEL: Record<ChatMessageAction, string> = {
+  copy: 'Copy', like: 'Like', dislike: 'Dislike', regenerate: 'Regenerate', edit: 'Edit',
+};
+const ACTION_ICON: Record<ChatMessageAction, Component<{ class?: string }>> = {
+  copy: Copy, like: ThumbsUp, dislike: ThumbsDown, regenerate: RefreshCw, edit: Pencil,
+};
+
+export function ChatThread(props: ChatThreadProps) {
+  const outer = useChatConfig();
+  const [internal, setInternal] = createSignal(props.value ?? '');
+  const [attachments, setAttachments] = createSignal<AttachmentData[]>([]);
+  const current = () => props.value ?? internal();
+  const handleChange = (v: string) => { setInternal(v); props.onValueChange?.(v); };
+  const handleSubmit = () => { props.onSubmit?.({ value: current(), attachments: attachments() }); setAttachments([]); };
+  const handleSuggestionClick = (v: string) => {
+    if ((props.suggestionMode ?? 'submit') === 'fill') { handleChange(v); props.onSuggestionClick?.(v); }
+    else { props.onSubmit?.({ value: v, attachments: attachments() }); setAttachments([]); }
+  };
+  const showHeader = () => !!(props.chatTitle || props.models || props.context);
+  const showScrollButton = () => props.scrollButton !== false;
+
+  return (
+    <ChatConfig proseSize={props.proseSize} codeTheme={props.codeTheme} codeHighlight={props.codeHighlight !== false} portalMount={outer.portalMount()}>
+      <div class={`flex h-full flex-col bg-background ${props.class ?? ''}`}>
+        <Show when={showHeader()}>
+          <header class="flex h-14 shrink-0 items-center justify-between border-b border-border px-5">
+            <div class="text-sm font-semibold text-foreground">{props.chatTitle}</div>
+            <div class="flex items-center gap-2">
+              <Show when={props.models}>
+                <ModelSwitcher
+                  models={props.models!}
+                  currentModelId={props.currentModel ?? props.models![0]?.id ?? ''}
+                  onModelChange={(modelId) => props.onModelChange?.(modelId)}
+                />
+              </Show>
+              <Show when={props.context}>
+                <Context
+                  usedTokens={props.context!.usedTokens} maxTokens={props.context!.maxTokens}
+                  inputTokens={props.context!.inputTokens} outputTokens={props.context!.outputTokens}
+                  estimatedCost={props.context!.estimatedCost}
+                >
+                  <ContextTrigger />
+                  <ContextContent>
+                    <ContextContentHeader />
+                    <ContextContentBody><div class="space-y-1.5"><ContextInputUsage /><ContextOutputUsage /></div></ContextContentBody>
+                    <ContextContentFooter />
+                  </ContextContent>
+                </Context>
+              </Show>
+            </div>
+          </header>
+        </Show>
+        <div class="relative flex-1 overflow-hidden">
+          <ChatContainer class="h-full px-4 py-3">
+            <ChatContainerContent class="mx-auto w-full max-w-3xl space-y-4">
+              <For each={props.messages}>
+                {(m) => (
+                  <Message class={m.role === 'user' ? 'flex-col items-end' : 'flex-col items-start'}>
+                    <Show when={m.reasoning}>
+                      <Reasoning class="mb-2 w-full">
+                        <ReasoningTrigger>{m.reasoning!.label ?? 'Reasoning'}</ReasoningTrigger>
+                        <ReasoningContent markdown>{m.reasoning!.text}</ReasoningContent>
+                      </Reasoning>
+                    </Show>
+                    <For each={m.tools ?? []}>{(tp) => <Tool toolPart={tp} class="mb-2 w-full" />}</For>
+                    <Show when={m.attachments?.length}>
+                      <Attachments variant="inline" class={m.role === 'user' ? 'mb-2 justify-end' : 'mb-2'}>
+                        <For each={m.attachments!}>
+                          {(att) => (<Attachment data={att}><AttachmentPreview /><AttachmentInfo /></Attachment>)}
+                        </For>
+                      </Attachments>
+                    </Show>
+                    <MessageContent
+                      markdown={m.role === 'assistant'}
+                      class={m.role === 'user' ? 'bg-muted text-primary max-w-[85%] rounded-2xl px-4 py-2' : 'bg-transparent p-0'}
+                    >
+                      {m.content}
+                    </MessageContent>
+                    <Show when={m.actions?.length}>
+                      <MessageActions class="mt-1 flex gap-0">
+                        <For each={m.actions!}>
+                          {(a) => (
+                            <Button
+                              variant="ghost" size="icon-sm" class="rounded-full"
+                              data-action={a} aria-label={ACTION_LABEL[a]}
+                              onClick={() => props.onMessageAction?.({ messageId: m.id, action: a })}
+                            >
+                              {(() => { const Icon = ACTION_ICON[a]; return <Icon class="size-3.5" />; })()}
+                            </Button>
+                          )}
+                        </For>
+                      </MessageActions>
+                    </Show>
+                  </Message>
+                )}
+              </For>
+              <ChatContainerScrollAnchor />
+            </ChatContainerContent>
+            <Show when={showScrollButton()}>
+              <div class="absolute bottom-4 left-1/2 flex w-full max-w-3xl -translate-x-1/2 justify-center px-5">
+                <ScrollButton class="shadow-sm" />
+              </div>
+            </Show>
+          </ChatContainer>
+        </div>
+        <div class="shrink-0 px-4 pb-4">
+          <div class="mx-auto max-w-3xl">
+            <DefaultPromptInput
+              value={current()} placeholder={props.placeholder} loading={props.loading === true}
+              suggestions={props.suggestions} attachments={attachments()}
+              search={props.search === true} voice={props.voice === true}
+              slashCommands={props.slashCommands} slashActiveIds={props.slashActiveIds} slashCompact={props.slashCompact === true}
+              onValueChange={handleChange} onSubmit={handleSubmit} onSuggestionClick={handleSuggestionClick}
+              onAttachmentsChange={setAttachments}
+              onSearch={() => props.onSearch?.()} onVoice={() => props.onVoice?.()}
+              onSlashSelect={(command) => props.onSlashSelect?.(command)}
+            />
+          </div>
+        </div>
+      </div>
+    </ChatConfig>
+  );
+}

package/src/components/prompt-input.tsx

@@ -72,7 +72,12 @@ function PromptInput(props: PromptInputProps) {
       <div
         onClick={handleClick}
         class={cn(
+          // The inner textarea neutralizes its own ring (focus-visible:ring-0),
+          // so the FRAME owns the focus affordance: a blue ring whenever a
+          // control inside it is focused. Without this the composer had no
+          // visible keyboard-focus state.
           'bg-muted/40 cursor-text rounded-xl p-2 shadow-xs',
+          'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-0',
           local.disabled && 'cursor-not-allowed opacity-60',
           local.class
         )}