@kitnai/chat 0.6.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/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.6.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,