@kitnai/chat 0.5.0 → 0.7.0

package/dist/llms/llms-full.txt

@@ -240,14 +240,14 @@ _No events._
 
 | Event | `detail` type | Description |
 |---|---|---|
-| `messageaction` | `CustomEvent<unknown>` |  |
-| `modelchange` | `CustomEvent<unknown>` |  |
-| `search` | `CustomEvent<unknown>` |  |
-| `slashselect` | `CustomEvent<unknown>` |  |
-| `submit` | `CustomEvent<unknown>` |  |
-| `suggestionclick` | `CustomEvent<unknown>` |  |
-| `valuechange` | `CustomEvent<unknown>` |  |
-| `voice` | `CustomEvent<unknown>` |  |
+| `messageaction` | `CustomEvent<{ messageId: string; action: "copy" \| "like" \| "dislike" \| "regenerate" \| "edit" }>` | An action button on a message was clicked. |
+| `modelchange` | `CustomEvent<{ modelId: string }>` | The header model switcher changed. |
+| `search` | `CustomEvent<Record<string, never>>` | The Search button was clicked. |
+| `slashselect` | `CustomEvent<{ command: { id: string; label: string; description?: undefined \| string; category?: undefined \| string } }>` | A slash command was chosen from the palette. |
+| `submit` | `CustomEvent<{ value: string; attachments: { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[] }>` | User submitted a message. |
+| `suggestionclick` | `CustomEvent<{ value: string }>` | A suggestion chip was clicked (only in `suggestion-mode="fill"`). |
+| `valuechange` | `CustomEvent<{ value: string }>` | Fired on every input change. |
+| `voice` | `CustomEvent<Record<string, never>>` | The Mic / voice button was clicked. |
 
 ---
 
@@ -306,17 +306,17 @@ _No events._
 
 | 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>` |  |
+| `conversationselect` | `CustomEvent<{ id: string }>` | A conversation was selected in the sidebar. |
+| `messageaction` | `CustomEvent<{ messageId: string; action: "copy" \| "like" \| "dislike" \| "regenerate" \| "edit" }>` | An action button on a message was clicked. |
+| `modelchange` | `CustomEvent<{ modelId: string }>` | The header model switcher changed. |
+| `newchat` | `CustomEvent<Record<string, never>>` | The "New chat" button was clicked. |
+| `search` | `CustomEvent<Record<string, never>>` | The Search button was clicked. |
+| `sidebartoggle` | `CustomEvent<{ collapsed: false \| true }>` | The sidebar was collapsed or expanded. |
+| `slashselect` | `CustomEvent<{ command: { id: string; label: string; description?: undefined \| string; category?: undefined \| string } }>` | A slash command was chosen from the palette. |
+| `submit` | `CustomEvent<{ value: string; attachments: { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[] }>` | User submitted a message. |
+| `suggestionclick` | `CustomEvent<{ value: string }>` | A suggestion chip was clicked (only in `suggestion-mode="fill"`). |
+| `valuechange` | `CustomEvent<{ value: string }>` | Fired on every input change. |
+| `voice` | `CustomEvent<Record<string, never>>` | The Mic / voice button was clicked. |
 
 ---
 
@@ -381,9 +381,9 @@ _No events._
 
 | Event | `detail` type | Description |
 |---|---|---|
-| `newchat` | `CustomEvent<unknown>` |  |
-| `select` | `CustomEvent<unknown>` |  |
-| `togglesidebar` | `CustomEvent<unknown>` |  |
+| `newchat` | `CustomEvent<Record<string, never>>` | The "New chat" button was clicked. |
+| `select` | `CustomEvent<{ id: string }>` | A conversation was selected. |
+| `togglesidebar` | `CustomEvent<Record<string, never>>` | The sidebar toggle was clicked. |
 
 ---
 
@@ -555,12 +555,12 @@ _No events._
 
 | Event | `detail` type | Description |
 |---|---|---|
-| `search` | `CustomEvent<undefined>` | The Search (Globe) toolbar button was clicked. |
+| `search` | `CustomEvent<Record<string, never>>` | The Search (Globe) toolbar button was clicked. |
 | `slashselect` | `CustomEvent<{ command: { id: string; label: string; description?: undefined \| string; category?: undefined \| string } }>` | A slash command was chosen from the palette. |
 | `submit` | `CustomEvent<{ value: string; attachments: { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[] }>` | The user submitted the prompt (Enter or send button) with its attachments. |
 | `suggestionclick` | `CustomEvent<{ value: string }>` | A suggestion was clicked while `suggestion-mode="fill"`. |
 | `valuechange` | `CustomEvent<{ value: string }>` | The input text changed (fires on every keystroke). |
-| `voice` | `CustomEvent<undefined>` | The Voice (Mic) toolbar button was clicked. |
+| `voice` | `CustomEvent<Record<string, never>>` | The Voice (Mic) toolbar button was clicked. |
 
 ---
 

package/dist/theme.tokens.css

@@ -26,6 +26,12 @@
      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%));
@@ -91,6 +97,8 @@
   --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(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%));
 
@@ -134,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

@@ -78,14 +78,22 @@ export interface KitnChatProps extends KitnBaseProps {
   slashActiveIds?: string[];
   /** Single-line palette rows. */
   slashCompact?: boolean;
-  onMessageaction?: (event: CustomEvent<unknown>) => void;
-  onModelchange?: (event: CustomEvent<unknown>) => void;
-  onSearch?: (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;
+  /** An action button on a message was clicked. */
+  onMessageaction?: (event: CustomEvent<{ messageId: string; action: "copy" | "like" | "dislike" | "regenerate" | "edit" }>) => void;
+  /** The header model switcher changed. */
+  onModelchange?: (event: CustomEvent<{ modelId: string }>) => void;
+  /** The Search button was clicked. */
+  onSearch?: (event: CustomEvent<Record<string, never>>) => void;
+  /** A slash command was chosen from the palette. */
+  onSlashselect?: (event: CustomEvent<{ command: { id: string; label: string; description?: undefined | string; category?: undefined | string } }>) => void;
+  /** User submitted a message. */
+  onSubmit?: (event: CustomEvent<{ value: string; attachments: { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[] }>) => void;
+  /** A suggestion chip was clicked (only in `suggestion-mode="fill"`). */
+  onSuggestionclick?: (event: CustomEvent<{ value: string }>) => void;
+  /** Fired on every input change. */
+  onValuechange?: (event: CustomEvent<{ value: string }>) => void;
+  /** The Mic / voice button was clicked. */
+  onVoice?: (event: CustomEvent<Record<string, never>>) => void;
 }
 
 export const KitnChat = createKitnComponent<KitnChatProps>(
@@ -146,17 +154,28 @@ export interface KitnChatWorkspaceProps extends KitnBaseProps {
   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;
+  /** A conversation was selected in the sidebar. */
+  onConversationselect?: (event: CustomEvent<{ id: string }>) => void;
+  /** An action button on a message was clicked. */
+  onMessageaction?: (event: CustomEvent<{ messageId: string; action: "copy" | "like" | "dislike" | "regenerate" | "edit" }>) => void;
+  /** The header model switcher changed. */
+  onModelchange?: (event: CustomEvent<{ modelId: string }>) => void;
+  /** The "New chat" button was clicked. */
+  onNewchat?: (event: CustomEvent<Record<string, never>>) => void;
+  /** The Search button was clicked. */
+  onSearch?: (event: CustomEvent<Record<string, never>>) => void;
+  /** The sidebar was collapsed or expanded. */
+  onSidebartoggle?: (event: CustomEvent<{ collapsed: boolean }>) => void;
+  /** A slash command was chosen from the palette. */
+  onSlashselect?: (event: CustomEvent<{ command: { id: string; label: string; description?: undefined | string; category?: undefined | string } }>) => void;
+  /** User submitted a message. */
+  onSubmit?: (event: CustomEvent<{ value: string; attachments: { id: string; type: "file" | "source-document"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[] }>) => void;
+  /** A suggestion chip was clicked (only in `suggestion-mode="fill"`). */
+  onSuggestionclick?: (event: CustomEvent<{ value: string }>) => void;
+  /** Fired on every input change. */
+  onValuechange?: (event: CustomEvent<{ value: string }>) => void;
+  /** The Mic / voice button was clicked. */
+  onVoice?: (event: CustomEvent<Record<string, never>>) => void;
 }
 
 export const KitnChatWorkspace = createKitnComponent<KitnChatWorkspaceProps>(
@@ -221,9 +240,12 @@ export interface KitnConversationListProps extends KitnBaseProps {
   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 }[];
   /** The id of the currently-open conversation, highlighted in the list. */
   activeId?: string;
-  onNewchat?: (event: CustomEvent<unknown>) => void;
-  onSelect?: (event: CustomEvent<unknown>) => void;
-  onTogglesidebar?: (event: CustomEvent<unknown>) => void;
+  /** The "New chat" button was clicked. */
+  onNewchat?: (event: CustomEvent<Record<string, never>>) => void;
+  /** A conversation was selected. */
+  onSelect?: (event: CustomEvent<{ id: string }>) => void;
+  /** The sidebar toggle was clicked. */
+  onTogglesidebar?: (event: CustomEvent<Record<string, never>>) => void;
 }
 
 export const KitnConversationList = createKitnComponent<KitnConversationListProps>(
@@ -407,7 +429,7 @@ export interface KitnPromptInputProps extends KitnBaseProps {
   /** Attachments to seed the input with (so a consumer can pre-populate staged files without an upload). Set as a JS property; the element then manages its own attachment state from there (add via the paperclip, remove per chip). */
   attachments?: { id: string; type: "file" | "source-document"; filename?: string; mediaType?: string; url?: string; title?: string }[];
   /** The Search (Globe) toolbar button was clicked. */
-  onSearch?: (event: CustomEvent<undefined>) => void;
+  onSearch?: (event: CustomEvent<Record<string, never>>) => void;
   /** A slash command was chosen from the palette. */
   onSlashselect?: (event: CustomEvent<{ command: { id: string; label: string; description?: undefined | string; category?: undefined | string } }>) => void;
   /** The user submitted the prompt (Enter or send button) with its attachments. */
@@ -417,7 +439,7 @@ export interface KitnPromptInputProps extends KitnBaseProps {
   /** The input text changed (fires on every keystroke). */
   onValuechange?: (event: CustomEvent<{ value: string }>) => void;
   /** The Voice (Mic) toolbar button was clicked. */
-  onVoice?: (event: CustomEvent<undefined>) => void;
+  onVoice?: (event: CustomEvent<Record<string, never>>) => void;
 }
 
 export const KitnPromptInput = createKitnComponent<KitnPromptInputProps>(

package/llms-full.txt

@@ -240,14 +240,14 @@ _No events._
 
 | Event | `detail` type | Description |
 |---|---|---|
-| `messageaction` | `CustomEvent<unknown>` |  |
-| `modelchange` | `CustomEvent<unknown>` |  |
-| `search` | `CustomEvent<unknown>` |  |
-| `slashselect` | `CustomEvent<unknown>` |  |
-| `submit` | `CustomEvent<unknown>` |  |
-| `suggestionclick` | `CustomEvent<unknown>` |  |
-| `valuechange` | `CustomEvent<unknown>` |  |
-| `voice` | `CustomEvent<unknown>` |  |
+| `messageaction` | `CustomEvent<{ messageId: string; action: "copy" \| "like" \| "dislike" \| "regenerate" \| "edit" }>` | An action button on a message was clicked. |
+| `modelchange` | `CustomEvent<{ modelId: string }>` | The header model switcher changed. |
+| `search` | `CustomEvent<Record<string, never>>` | The Search button was clicked. |
+| `slashselect` | `CustomEvent<{ command: { id: string; label: string; description?: undefined \| string; category?: undefined \| string } }>` | A slash command was chosen from the palette. |
+| `submit` | `CustomEvent<{ value: string; attachments: { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[] }>` | User submitted a message. |
+| `suggestionclick` | `CustomEvent<{ value: string }>` | A suggestion chip was clicked (only in `suggestion-mode="fill"`). |
+| `valuechange` | `CustomEvent<{ value: string }>` | Fired on every input change. |
+| `voice` | `CustomEvent<Record<string, never>>` | The Mic / voice button was clicked. |
 
 ---
 
@@ -306,17 +306,17 @@ _No events._
 
 | 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>` |  |
+| `conversationselect` | `CustomEvent<{ id: string }>` | A conversation was selected in the sidebar. |
+| `messageaction` | `CustomEvent<{ messageId: string; action: "copy" \| "like" \| "dislike" \| "regenerate" \| "edit" }>` | An action button on a message was clicked. |
+| `modelchange` | `CustomEvent<{ modelId: string }>` | The header model switcher changed. |
+| `newchat` | `CustomEvent<Record<string, never>>` | The "New chat" button was clicked. |
+| `search` | `CustomEvent<Record<string, never>>` | The Search button was clicked. |
+| `sidebartoggle` | `CustomEvent<{ collapsed: false \| true }>` | The sidebar was collapsed or expanded. |
+| `slashselect` | `CustomEvent<{ command: { id: string; label: string; description?: undefined \| string; category?: undefined \| string } }>` | A slash command was chosen from the palette. |
+| `submit` | `CustomEvent<{ value: string; attachments: { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[] }>` | User submitted a message. |
+| `suggestionclick` | `CustomEvent<{ value: string }>` | A suggestion chip was clicked (only in `suggestion-mode="fill"`). |
+| `valuechange` | `CustomEvent<{ value: string }>` | Fired on every input change. |
+| `voice` | `CustomEvent<Record<string, never>>` | The Mic / voice button was clicked. |
 
 ---
 
@@ -381,9 +381,9 @@ _No events._
 
 | Event | `detail` type | Description |
 |---|---|---|
-| `newchat` | `CustomEvent<unknown>` |  |
-| `select` | `CustomEvent<unknown>` |  |
-| `togglesidebar` | `CustomEvent<unknown>` |  |
+| `newchat` | `CustomEvent<Record<string, never>>` | The "New chat" button was clicked. |
+| `select` | `CustomEvent<{ id: string }>` | A conversation was selected. |
+| `togglesidebar` | `CustomEvent<Record<string, never>>` | The sidebar toggle was clicked. |
 
 ---
 
@@ -555,12 +555,12 @@ _No events._
 
 | Event | `detail` type | Description |
 |---|---|---|
-| `search` | `CustomEvent<undefined>` | The Search (Globe) toolbar button was clicked. |
+| `search` | `CustomEvent<Record<string, never>>` | The Search (Globe) toolbar button was clicked. |
 | `slashselect` | `CustomEvent<{ command: { id: string; label: string; description?: undefined \| string; category?: undefined \| string } }>` | A slash command was chosen from the palette. |
 | `submit` | `CustomEvent<{ value: string; attachments: { id: string; type: "file" \| "source-document"; filename?: undefined \| string; mediaType?: undefined \| string; url?: undefined \| string; title?: undefined \| string }[] }>` | The user submitted the prompt (Enter or send button) with its attachments. |
 | `suggestionclick` | `CustomEvent<{ value: string }>` | A suggestion was clicked while `suggestion-mode="fill"`. |
 | `valuechange` | `CustomEvent<{ value: string }>` | The input text changed (fires on every keystroke). |
-| `voice` | `CustomEvent<undefined>` | The Voice (Mic) toolbar button was clicked. |
+| `voice` | `CustomEvent<Record<string, never>>` | The Voice (Mic) toolbar button was clicked. |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitnai/chat",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "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": [

package/src/elements/chat-workspace.tsx

@@ -5,8 +5,9 @@ import { ConversationList } from '../components/conversation-list';
 import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '../ui/resizable';
 import { Button } from '../ui/button';
 import { PanelLeftOpen } from 'lucide-solid';
+import type { AttachmentData } from '../components/attachments';
 import type { SlashCommandItem } from '../components/slash-command';
-import type { ChatMessage } from './chat-types';
+import type { ChatMessage, ChatMessageAction } from './chat-types';
 import type { ProseSize } from '../primitives/chat-config';
 import type { ModelOption, ConversationGroup, ConversationSummary } from '../types';
 
@@ -47,7 +48,32 @@ interface Props extends Record<string, unknown> {
   sidebarCollapsed?: boolean;
 }
 
-defineKitnElement<Props>('kitn-chat-workspace', {
+interface Events {
+  /** A conversation was selected in the sidebar. */
+  conversationselect: { id: string };
+  /** The "New chat" button was clicked. */
+  newchat: Record<string, never>;
+  /** The sidebar was collapsed or expanded. */
+  sidebartoggle: { collapsed: boolean };
+  /** User submitted a message. */
+  submit: { value: string; attachments: AttachmentData[] };
+  /** Fired on every input change. */
+  valuechange: { value: string };
+  /** The header model switcher changed. */
+  modelchange: { modelId: string };
+  /** An action button on a message was clicked. */
+  messageaction: { messageId: string; action: ChatMessageAction };
+  /** The Search button was clicked. */
+  search: Record<string, never>;
+  /** The Mic / voice button was clicked. */
+  voice: Record<string, never>;
+  /** A slash command was chosen from the palette. */
+  slashselect: { command: SlashCommandItem };
+  /** A suggestion chip was clicked (only in `suggestion-mode="fill"`). */
+  suggestionclick: { value: string };
+}
+
+defineKitnElement<Props, Events>('kitn-chat-workspace', {
   groups: [], conversations: [], activeId: undefined, messages: [],
   value: undefined, placeholder: 'Send a message...', loading: false,
   suggestions: undefined, suggestionMode: 'submit', proseSize: 'sm',

package/src/elements/chat.tsx

@@ -1,14 +1,35 @@
 import { defineKitnElement } from './define';
 import { ChatThread, type ChatThreadProps, type ChatThreadContextUsage } from '../components/chat-thread';
+import type { AttachmentData } from '../components/attachments';
 import type { SlashCommandItem } from '../components/slash-command';
 import type { ProseSize } from '../primitives/chat-config';
+import type { ChatMessageAction } from './chat-types';
 import type { ModelOption } from '../types';
 
 type Props = Omit<ChatThreadProps,
   'class' | 'onValueChange' | 'onSubmit' | 'onSuggestionClick' | 'onModelChange'
   | 'onMessageAction' | 'onSearch' | 'onVoice' | 'onSlashSelect'> & Record<string, unknown>;
 
-defineKitnElement<Props>('kitn-chat', {
+interface Events {
+  /** User submitted a message. */
+  submit: { value: string; attachments: AttachmentData[] };
+  /** Fired on every input change. */
+  valuechange: { value: string };
+  /** A suggestion chip was clicked (only in `suggestion-mode="fill"`). */
+  suggestionclick: { value: string };
+  /** An action button on a message was clicked. */
+  messageaction: { messageId: string; action: ChatMessageAction };
+  /** The header model switcher changed. */
+  modelchange: { modelId: string };
+  /** A slash command was chosen from the palette. */
+  slashselect: { command: SlashCommandItem };
+  /** The Search button was clicked. */
+  search: Record<string, never>;
+  /** The Mic / voice button was clicked. */
+  voice: Record<string, never>;
+}
+
+defineKitnElement<Props, Events>('kitn-chat', {
   messages: [], value: undefined, placeholder: 'Send a message...', loading: false,
   suggestions: undefined, suggestionMode: 'submit', proseSize: 'sm',
   codeTheme: 'github-dark-dimmed', codeHighlight: true, chatTitle: undefined,