@kitn.ai/chat
Version:
Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.
1,293 lines • 122 kB
JSON
[
{
"tag": "kc-artifact",
"className": "KcArtifactElement",
"displayName": "Artifact",
"props": [
{
"name": "src",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "URL the preview iframe frames. Consumer-controlled.",
"displayType": "undefined | string"
},
{
"name": "files",
"type": "{ path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | \"html\" | \"pdf\" | \"image\" | \"other\" }[]",
"optional": false,
"scalar": false,
"description": "Files for the Code tab tree + each file's preview `url`. Set as a JS property (array).",
"typeName": "FileTreeFile[]",
"typeShape": "{ path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | \"html\" | \"pdf\" | \"image\" | \"other\" }[]",
"default": "[]",
"typeImport": "FileTreeFile",
"displayType": "{ path: string; url?: undefined | string; code?: undefined | string; language?: undefined | string; type?: undefined | \"html\" | \"pdf\" | \"image\" | \"other\" }[]"
},
{
"name": "tab",
"type": "undefined | \"preview\" | \"code\"",
"optional": true,
"scalar": true,
"description": "Active tab: `preview` (default) or `code`.",
"default": "'preview'",
"displayType": "undefined | \"preview\" | \"code\""
},
{
"name": "activeFile",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Selected file path — syncs the tree highlight, Code source, and preview.",
"displayType": "undefined | string"
},
{
"name": "sandbox",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "iframe `sandbox` override. Secure default `allow-scripts allow-forms` (NOT `allow-same-origin`).",
"default": "'allow-scripts allow-forms'",
"displayType": "undefined | string"
},
{
"name": "iframeTitle",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Accessible title for the preview iframe.",
"displayType": "undefined | string"
},
{
"name": "maximized",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Reflects the artifact's own maximized view-state (usually driven by the protocol).",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "expandable",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the expand-to-fill button (OPT-IN).",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "openInTab",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the open-in-new-tab button (OPT-IN).",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "noNav",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Hide back/forward.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "noReload",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Hide reload.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "noHome",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Hide home.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "noPathField",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Hide the address field.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "noTabs",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Hide the Preview|Code toggle.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "standalone",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Standalone chrome: rounded corners + border (else square, borderless in-panel).",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "readonlyPath",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the address but make it read-only (visible, nav-tracking, non-editable).",
"default": "false",
"displayType": "undefined | false | true"
}
],
"events": [
{
"name": "kc-file-select",
"detail": "{ path: string }",
"description": "Fired when a file is selected. `detail.path`.",
"displayDetail": "{ path: string }"
},
{
"name": "kc-maximize-change",
"detail": "{ maximized: false | true }",
"description": "Artifact's own maximize button toggled (consumer-observable; non-bubbling).",
"displayDetail": "{ maximized: false | true }"
},
{
"name": "kc-navigate",
"detail": "{ url: string }",
"description": "Fired when the preview navigates. `detail.url` = the new location.",
"displayDetail": "{ url: string }"
},
{
"name": "kc-tab-change",
"detail": "{ tab: \"preview\" | \"code\" }",
"description": "Fired when the Preview|Code tab changes. `detail.tab`.",
"displayDetail": "{ tab: \"preview\" | \"code\" }"
}
],
"composedFrom": [
{
"name": "Artifact",
"group": "Components",
"storyId": "solid-advanced-elements-artifact--docs"
}
],
"tokens": []
},
{
"tag": "kc-attachments",
"className": "KcAttachmentsElement",
"displayName": "Attachments",
"props": [
{
"name": "items",
"type": "{ id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]",
"optional": false,
"scalar": false,
"description": "The attachments to render. Set as a JS property (array).",
"typeName": "AttachmentData[]",
"typeShape": "{ id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[]",
"default": "[]",
"typeImport": "AttachmentData",
"displayType": "AttachmentData[]"
},
{
"name": "variant",
"type": "undefined | \"grid\" | \"inline\" | \"list\"",
"optional": true,
"scalar": true,
"description": "Layout: `grid` = visual tiles, `inline` = icon + label chips, `list` = rows.",
"default": "'grid'",
"displayType": "undefined | \"grid\" | \"inline\" | \"list\""
},
{
"name": "hoverCard",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Wrap each item in a hover card that previews its details.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "removable",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show a remove button per item; clicking it fires a `kc-remove` event.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "showMediaType",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Also show the media type beneath the filename (non-grid variants).",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "emptyText",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Text shown when `items` is empty.",
"displayType": "undefined | string"
}
],
"events": [
{
"name": "kc-remove",
"detail": "{ id: string }",
"description": "A remove button was clicked.",
"displayDetail": "{ id: string }"
}
],
"composedFrom": [
{
"name": "Attachments",
"group": "Components",
"storyId": "solid-advanced-elements-attachments--docs"
},
{
"name": "Attachment",
"group": "Components",
"storyId": "solid-advanced-elements-attachment--docs"
},
{
"name": "AttachmentPreview",
"group": "Components",
"storyId": "solid-advanced-elements-attachmentpreview--docs"
},
{
"name": "AttachmentInfo",
"group": "Components",
"storyId": "solid-advanced-elements-attachmentinfo--docs"
},
{
"name": "AttachmentRemove",
"group": "Components",
"storyId": "solid-advanced-elements-attachmentremove--docs"
},
{
"name": "AttachmentHoverCard",
"group": "Components",
"storyId": "solid-advanced-elements-attachmenthovercard--docs"
},
{
"name": "AttachmentHoverCardTrigger",
"group": "Components",
"storyId": "solid-advanced-elements-attachmenthovercardtrigger--docs"
},
{
"name": "AttachmentHoverCardContent",
"group": "Components",
"storyId": "solid-advanced-elements-attachmenthovercardcontent--docs"
},
{
"name": "AttachmentEmpty",
"group": "Components",
"storyId": "solid-advanced-elements-attachmentempty--docs"
}
],
"tokens": []
},
{
"tag": "kc-card",
"className": "KcCardElement",
"displayName": "Card",
"props": [
{
"name": "heading",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.",
"displayType": "undefined | string"
},
{
"name": "description",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Supporting text under the heading. Attribute: `description`.",
"displayType": "undefined | string"
},
{
"name": "errorMessage",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "When set, the card renders its inline error state instead of the body. Attribute: `error-message`.",
"displayType": "undefined | string"
},
{
"name": "dense",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Compact spacing for dense lists. Attribute: `dense`.",
"default": "false",
"displayType": "undefined | false | true"
}
],
"events": [],
"composedFrom": [
{
"name": "Card",
"group": "Components",
"storyId": "solid-advanced-elements-card--docs"
}
],
"tokens": []
},
{
"tag": "kc-cards",
"className": "KcCardsElement",
"displayName": "Cards",
"props": [
{
"name": "cards",
"type": "undefined | { type: string; id: string; data: unknown; title?: undefined | string; resolution?: undefined | { kind: \"action\"; action: string; payload?: unknown; at?: undefined | string } | { kind: \"submit\"; data: unknown; at?: undefined | string } }[]",
"optional": true,
"scalar": false,
"description": "The stream of card envelopes to render. Set as a JS PROPERTY: `el.cards = [...]`.",
"displayType": "undefined | { type: string; id: string; data: unknown; title?: undefined | string; resolution?: undefined | { kind: \"action\"; action: string; payload?: unknown; at?: undefined | string } | { kind: \"submit\"; data: unknown; at?: undefined | string } }[]"
},
{
"name": "types",
"type": "undefined | Record<string, string>",
"optional": true,
"scalar": false,
"description": "Optional type→tag overrides/additions (merged over the built-ins). Property: `el.types`. Typed as a plain string map (not the `CardTagMap` alias) so the generated React wrapper inlines it instead of emitting an unresolved named type.",
"displayType": "undefined | Record<string, string>"
},
{
"name": "policy",
"type": "undefined | { onSubmit?: undefined | (cardId: string, data: unknown) => void; onAction?: undefined | (cardId: string, action: string, payload?: unknown) => void; onSendPrompt?: undefined | (text: string, opts: { mode: \"compose\" | \"send\"; context?: unknown; }) => void; onOpen?: undefined | (url: string, target: \"tab\" | \"artifact\") => void; onState?: undefined | (cardId: string, patch: unknown) => void; onDismiss?: undefined | (cardId: string) => void; onError?: undefined | (cardId: string, message: string) => void; maxSendPromptMode?: undefined | \"compose\" | \"send\" }",
"optional": true,
"scalar": false,
"description": "Optional CardPolicy handling child events. Property: `el.policy`.",
"displayType": "undefined | { onSubmit?: undefined | (cardId: string, data: unknown) => void; onAction?: undefined | (cardId: string, action: string, payload?: unknown) => void; onSendPrompt?: undefined | (text: string, opts: { mode: \"compose\" | \"send\"; context?: unknown; }) => void; onOpen?: undefined | (url: string, target: \"tab\" | \"artifact\") => void; onState?: undefined | (cardId: string, patch: unknown) => void; onDismiss?: undefined | (cardId: string) => void; onError?: undefined | (cardId: string, message: string) => void; maxSendPromptMode?: undefined | \"compose\" | \"send\" }"
}
],
"events": [],
"composedFrom": [
{
"name": "CardFallback",
"group": "Components",
"storyId": "solid-advanced-elements-cardfallback--docs"
}
],
"tokens": []
},
{
"tag": "kc-chain-of-thought",
"className": "KcChainOfThoughtElement",
"displayName": "ChainOfThought",
"props": [
{
"name": "steps",
"type": "{ label: string; content?: undefined | string }[]",
"optional": false,
"scalar": false,
"description": "The reasoning steps. Set as a JS property. Compound sub-parts collapse to this one data model (Route 1).",
"typeName": "Step[]",
"typeShape": "{ label: string; content?: undefined | string }[]",
"default": "[]",
"displayType": "{ label: string; content?: undefined | string }[]"
}
],
"events": [],
"composedFrom": [
{
"name": "ChainOfThought",
"group": "Components",
"storyId": "solid-advanced-elements-chainofthought--docs"
},
{
"name": "ChainOfThoughtStep",
"group": "Components",
"storyId": "solid-advanced-elements-chainofthoughtstep--docs"
},
{
"name": "ChainOfThoughtTrigger",
"group": "Components",
"storyId": "solid-advanced-elements-chainofthoughttrigger--docs"
},
{
"name": "ChainOfThoughtContent",
"group": "Components",
"storyId": "solid-advanced-elements-chainofthoughtcontent--docs"
},
{
"name": "ChainOfThoughtItem",
"group": "Components",
"storyId": "solid-advanced-elements-chainofthoughtitem--docs"
}
],
"tokens": []
},
{
"tag": "kc-chat",
"className": "KcChatElement",
"displayName": "Chat",
"props": [
{
"name": "messages",
"type": "{ 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\" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string } }[]",
"optional": false,
"scalar": false,
"description": "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 = [...]`).",
"typeName": "ChatMessage[]",
"typeShape": "{ 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\" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string } }[]",
"default": "[]",
"displayType": "{ 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\" | { id: string; label: string; icon?: undefined | string; tooltip?: undefined | string })[]; avatar?: undefined | { src?: undefined | string; fallback?: undefined | string; alt?: undefined | string } }[]"
},
{
"name": "value",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Controlled value of the input. When set, the host owns the input text and must update it on `kc-value-change`; leave unset for uncontrolled behavior.",
"displayType": "undefined | string"
},
{
"name": "placeholder",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Placeholder text shown in the empty input.",
"default": "'Send a message...'",
"displayType": "undefined | string"
},
{
"name": "loading",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "When true, shows the loading/streaming state and disables submit (use while awaiting the assistant's reply).",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "suggestions",
"type": "undefined | string[]",
"optional": true,
"scalar": false,
"description": "Starter prompts shown above the input when the thread is empty. Clicking one follows `suggestionMode`. Set as a JS property.",
"displayType": "undefined | string[]"
},
{
"name": "suggestionMode",
"type": "undefined | \"submit\" | \"fill\"",
"optional": true,
"scalar": true,
"description": "What clicking a suggestion does: `'submit'` (default) sends it immediately as if typed and submitted; `'fill'` just places it in the input.",
"default": "'submit'",
"displayType": "undefined | \"submit\" | \"fill\""
},
{
"name": "persistSuggestions",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Keep suggestions visible after the conversation starts. By default suggestions are conversation starters and hide once `messages` is non-empty; set this to keep them always shown. Default false.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "proseSize",
"type": "undefined | \"xs\" | \"sm\" | \"base\" | \"lg\"",
"optional": true,
"scalar": true,
"description": "Body/prose font scale for rendered markdown (`'xs' | 'sm' | 'base' | 'lg'`). Defaults to `'sm'`.",
"default": "'sm'",
"displayType": "undefined | \"xs\" | \"sm\" | \"base\" | \"lg\""
},
{
"name": "codeTheme",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Shiki theme name for syntax-highlighted code blocks (e.g. `'github-dark-dimmed'`).",
"default": "'github-dark-dimmed'",
"displayType": "undefined | string"
},
{
"name": "codeHighlight",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Enable Shiki syntax highlighting in code blocks. Turn off to render plain `<pre>` blocks (lighter, no highlighter load). Default true.",
"default": "true",
"displayType": "undefined | false | true"
},
{
"name": "chatTitle",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Optional header title shown on the left of the header.",
"displayType": "undefined | string"
},
{
"name": "models",
"type": "undefined | { id: string; name: string; provider?: undefined | string; description?: undefined | string; group?: undefined | string }[]",
"optional": true,
"scalar": false,
"description": "Optional model list. When set (>1 model) a ModelSwitcher is shown in the header and a `kc-model-change` event fires on selection.",
"displayType": "undefined | { id: string; name: string; provider?: undefined | string; description?: undefined | string; group?: undefined | string }[]"
},
{
"name": "currentModel",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "The currently selected model id (pairs with `models`).",
"displayType": "undefined | string"
},
{
"name": "context",
"type": "undefined | { usedTokens: number; maxTokens: number; inputTokens?: undefined | number; outputTokens?: undefined | number; estimatedCost?: undefined | number }",
"optional": true,
"scalar": false,
"description": "Optional context-window token usage. When set, a Context token meter is shown in the header.",
"displayType": "ContextData | undefined"
},
{
"name": "scrollButton",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show the scroll-to-bottom button inside the scroll area. Default true.",
"default": "true",
"displayType": "undefined | false | true"
},
{
"name": "headerStart",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Whether the host has `slot=\"header-start\"` content (left of the title) — set by the `<kc-chat>` facade so a custom control forces the header open.",
"displayType": "undefined | false | true"
},
{
"name": "headerEnd",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Whether the host has `slot=\"header-end\"` content (right of the controls).",
"displayType": "undefined | false | true"
},
{
"name": "search",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show a Search (Globe) button in the input toolbar; fires a `search` event.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "voice",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Show a Voice (Mic) button in the input toolbar; fires a `voice` event.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "slashCommands",
"type": "undefined | { id: string; label: string; description?: undefined | string; category?: undefined | string }[]",
"optional": true,
"scalar": false,
"description": "Slash commands — when set, typing `/` in the input opens the command palette and fires `kc-slash-select`. Set as a JS property.",
"displayType": "SlashCommandItem[] | undefined"
},
{
"name": "slashActiveIds",
"type": "undefined | string[]",
"optional": true,
"scalar": false,
"description": "Command ids to highlight as active in the palette.",
"displayType": "undefined | string[]"
},
{
"name": "slashCompact",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Single-line palette rows.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "actionsReveal",
"type": "undefined | \"always\" | \"hover\"",
"optional": true,
"scalar": true,
"description": "Whether each message's action bar is always visible (`'always'`, default) or only revealed on hover of that message row (`'hover'`).",
"default": "'always'",
"displayType": "undefined | \"always\" | \"hover\""
}
],
"events": [
{
"name": "kc-message-action",
"detail": "{ messageId: string; action: string }",
"description": "An action button on a message was clicked. `action` is the built-in name or custom id.",
"displayDetail": "{ messageId: string; action: string }"
},
{
"name": "kc-model-change",
"detail": "{ modelId: string }",
"description": "The header model switcher changed.",
"displayDetail": "{ modelId: string }"
},
{
"name": "kc-search",
"detail": "Record<string, never>",
"description": "The Search button was clicked.",
"displayDetail": "Record<string, never>"
},
{
"name": "kc-slash-select",
"detail": "{ command: { id: string; label: string; description?: undefined | string; category?: undefined | string } }",
"description": "A slash command was chosen from the palette.",
"displayDetail": "{ command: SlashCommandItem }"
},
{
"name": "kc-submit",
"detail": "{ value: string; attachments: { id: string; type: \"file\" | \"source-document\"; filename?: undefined | string; mediaType?: undefined | string; url?: undefined | string; title?: undefined | string }[] }",
"description": "User submitted a message.",
"displayDetail": "{ value: string; attachments: AttachmentData[] }"
},
{
"name": "kc-suggestion-click",
"detail": "{ value: string }",
"description": "A suggestion chip was clicked (only in `suggestion-mode=\"fill\"`).",
"displayDetail": "{ value: string }"
},
{
"name": "kc-value-change",
"detail": "{ value: string }",
"description": "Fired on every input change.",
"displayDetail": "{ value: string }"
},
{
"name": "kc-voice",
"detail": "Record<string, never>",
"description": "The Mic / voice button was clicked.",
"displayDetail": "Record<string, never>"
}
],
"composedFrom": [
{
"name": "ChatThread",
"group": "Components",
"storyId": "solid-advanced-elements-chatthread--docs"
}
],
"tokens": []
},
{
"tag": "kc-checkpoint",
"className": "KcCheckpointElement",
"displayName": "Checkpoint",
"props": [
{
"name": "label",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Optional text beside the icon.",
"displayType": "undefined | string"
},
{
"name": "tooltip",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Tooltip on hover.",
"displayType": "undefined | string"
},
{
"name": "variant",
"type": "undefined | \"ghost\" | \"default\" | \"outline\"",
"optional": true,
"scalar": true,
"description": "Visual button style.",
"default": "'ghost'",
"displayType": "undefined | \"ghost\" | \"default\" | \"outline\""
},
{
"name": "size",
"type": "undefined | \"sm\" | \"lg\" | \"md\" | \"icon\" | \"icon-sm\"",
"optional": true,
"scalar": true,
"description": "Button size (use an `icon*` size for an icon-only checkpoint).",
"default": "'sm'",
"displayType": "undefined | \"sm\" | \"lg\" | \"md\" | \"icon\" | \"icon-sm\""
}
],
"events": [
{
"name": "kc-select",
"detail": null,
"description": "The checkpoint was clicked.",
"displayDetail": null
}
],
"composedFrom": [
{
"name": "Checkpoint",
"group": "Components",
"storyId": "solid-advanced-elements-checkpoint--docs"
},
{
"name": "CheckpointIcon",
"group": "Components",
"storyId": "solid-advanced-elements-checkpointicon--docs"
},
{
"name": "CheckpointTrigger",
"group": "Components",
"storyId": "solid-advanced-elements-checkpointtrigger--docs"
}
],
"tokens": []
},
{
"tag": "kc-choice",
"className": "KcChoiceElement",
"displayName": "Choice",
"props": [
{
"name": "data",
"type": "undefined | Record<string, unknown>",
"optional": true,
"scalar": false,
"description": "The choice definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { prompt, options:[…], allowOther?, submitLabel? }`. Import `ChoiceCardData` from `@kitn.ai/chat` for the full shape.",
"displayType": "undefined | Record<string, unknown>"
},
{
"name": "cardId",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Stable card id correlating every emitted CardEvent. Attribute: `card-id`.",
"displayType": "undefined | string"
},
{
"name": "heading",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.",
"displayType": "undefined | string"
},
{
"name": "resolution",
"type": "undefined | Record<string, unknown>",
"optional": true,
"scalar": false,
"description": "Set when the user resolved this card; renders the read-only view. Property: `el.resolution = { kind:'action', action:'…' }`.",
"displayType": "undefined | Record<string, unknown>"
}
],
"events": [],
"composedFrom": [
{
"name": "ChoiceCard",
"group": "Components",
"storyId": "solid-advanced-elements-choicecard--docs"
}
],
"tokens": []
},
{
"tag": "kc-code-block",
"className": "KcCodeBlockElement",
"displayName": "CodeBlock",
"props": [
{
"name": "code",
"type": "string",
"optional": false,
"scalar": true,
"description": "The source code to render.",
"default": "''",
"displayType": "string"
},
{
"name": "language",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Language grammar (e.g. `js`, `python`). Defaults to `tsx`.",
"displayType": "undefined | string"
},
{
"name": "codeTheme",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Shiki theme name.",
"default": "'github-dark-dimmed'",
"displayType": "undefined | string"
},
{
"name": "codeHighlight",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Disable syntax highlighting (renders plain text, no Shiki).",
"default": "true",
"displayType": "undefined | false | true"
},
{
"name": "proseSize",
"type": "undefined | \"xs\" | \"sm\" | \"base\" | \"lg\"",
"optional": true,
"scalar": true,
"description": "Code text sizing.",
"default": "'sm'",
"displayType": "undefined | \"xs\" | \"sm\" | \"base\" | \"lg\""
}
],
"events": [],
"composedFrom": [
{
"name": "CodeBlock",
"group": "Components",
"storyId": "solid-advanced-elements-codeblock--docs"
},
{
"name": "CodeBlockCode",
"group": "Components",
"storyId": "solid-advanced-elements-codeblockcode--docs"
}
],
"tokens": [
"--color-code-foreground"
]
},
{
"tag": "kc-confirm",
"className": "KcConfirmElement",
"displayName": "Confirm",
"props": [
{
"name": "data",
"type": "undefined | Record<string, unknown>",
"optional": true,
"scalar": false,
"description": "The confirm definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { body, tone, actions:[…] }`. Import `ConfirmCardData` from `@kitn.ai/chat` for the full shape.",
"displayType": "undefined | Record<string, unknown>"
},
{
"name": "cardId",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Stable card id correlating every emitted CardEvent. Attribute: `card-id`.",
"displayType": "undefined | string"
},
{
"name": "heading",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.",
"displayType": "undefined | string"
},
{
"name": "autofocus",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "Focus the default action on mount (off by default — no focus-stealing). Attribute: `autofocus`.",
"default": "false",
"displayType": "undefined | false | true"
},
{
"name": "resolution",
"type": "undefined | Record<string, unknown>",
"optional": true,
"scalar": false,
"description": "Set when the user resolved this card; renders the read-only view. Property: `el.resolution = { kind:'action', action:'…' }`.",
"displayType": "undefined | Record<string, unknown>"
}
],
"events": [],
"composedFrom": [
{
"name": "ConfirmCard",
"group": "Components",
"storyId": "solid-advanced-elements-confirmcard--docs"
}
],
"tokens": []
},
{
"tag": "kc-context",
"className": "KcContextElement",
"displayName": "Context",
"props": [
{
"name": "context",
"type": "undefined | { usedTokens: number; maxTokens: number; inputTokens?: undefined | number; outputTokens?: undefined | number; reasoningTokens?: undefined | number; cacheTokens?: undefined | number; estimatedCost?: undefined | number }",
"optional": true,
"scalar": false,
"description": "Token-usage data. Set as a JS property.",
"displayType": "ContextData | undefined"
},
{
"name": "warnThreshold",
"type": "undefined | number",
"optional": true,
"scalar": true,
"description": "Fraction (0–1) above which the meter turns yellow. Defaults to `0.7` (70%).",
"displayType": "undefined | number"
},
{
"name": "dangerThreshold",
"type": "undefined | number",
"optional": true,
"scalar": true,
"description": "Fraction (0–1) above which the meter turns red. Defaults to `0.9` (90%).",
"displayType": "undefined | number"
}
],
"events": [
{
"name": "kc-threshold-change",
"detail": "{ level: \"ok\" | \"warn\" | \"danger\" }",
"description": "Fires when the computed severity level changes (ok → warn → danger or back). `detail.level` is `'ok'`, `'warn'`, or `'danger'`.",
"displayDetail": "{ level: \"ok\" | \"warn\" | \"danger\" }"
}
],
"composedFrom": [
{
"name": "Context",
"group": "Components",
"storyId": "solid-advanced-elements-context--docs"
},
{
"name": "ContextTrigger",
"group": "Components",
"storyId": "solid-advanced-elements-contexttrigger--docs"
},
{
"name": "ContextContent",
"group": "Components",
"storyId": "solid-advanced-elements-contextcontent--docs"
},
{
"name": "ContextContentHeader",
"group": "Components",
"storyId": "solid-advanced-elements-contextcontentheader--docs"
},
{
"name": "ContextContentBody",
"group": "Components",
"storyId": "solid-advanced-elements-contextcontentbody--docs"
},
{
"name": "ContextContentFooter",
"group": "Components",
"storyId": "solid-advanced-elements-contextcontentfooter--docs"
},
{
"name": "ContextInputUsage",
"group": "Components",
"storyId": "solid-advanced-elements-contextinputusage--docs"
},
{
"name": "ContextOutputUsage",
"group": "Components",
"storyId": "solid-advanced-elements-contextoutputusage--docs"
},
{
"name": "ContextReasoningUsage",
"group": "Components",
"storyId": "solid-advanced-elements-contextreasoningusage--docs"
},
{
"name": "ContextCacheUsage",
"group": "Components",
"storyId": "solid-advanced-elements-contextcacheusage--docs"
},
{
"name": "DEFAULT_WARN_THRESHOLD",
"group": "Components",
"storyId": "solid-advanced-elements-defaultwarnthreshold--docs"
},
{
"name": "DEFAULT_DANGER_THRESHOLD",
"group": "Components",
"storyId": "solid-advanced-elements-defaultdangerthreshold--docs"
}
],
"tokens": []
},
{
"tag": "kc-conversations",
"className": "KcConversationsElement",
"displayName": "Conversations",
"props": [
{
"name": "groups",
"type": "{ id: string; userId?: undefined | string; teamId?: undefined | string; name: string; sortOrder: number; createdAt: string }[]",
"optional": false,
"scalar": false,
"description": "Pre-bucketed conversation groups (e.g. \"Today\", \"Yesterday\"), each with its own conversations. Use this when you want to control the grouping/headers yourself; otherwise pass a flat `conversations` array. Set as a JS property.",
"typeName": "ConversationGroup[]",
"typeShape": "{ id: string; userId?: undefined | string; teamId?: undefined | string; name: string; sortOrder: number; createdAt: string }[]",
"default": "[]",
"typeImport": "ConversationGroup",
"displayType": "ConversationGroup[]"
},
{
"name": "conversations",
"type": "{ 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 }[]",
"optional": false,
"scalar": false,
"description": "A flat list of conversation summaries; the component buckets them by recency for you. Ignored when `groups` is provided. Set as a JS property.",
"typeName": "ConversationSummary[]",
"typeShape": "{ 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 }[]",
"default": "[]",
"typeImport": "ConversationSummary",
"displayType": "ConversationSummary[]"
},
{
"name": "activeId",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "The id of the currently-open conversation, highlighted in the list.",
"displayType": "undefined | string"
}
],
"events": [
{
"name": "kc-conversation-select",
"detail": "{ id: string }",
"description": "A conversation was selected.",
"displayDetail": "{ id: string }"
},
{
"name": "kc-new-chat",
"detail": "Record<string, never>",
"description": "The \"New chat\" button was clicked.",
"displayDetail": "Record<string, never>"
},
{
"name": "kc-toggle-sidebar",
"detail": "Record<string, never>",
"description": "The sidebar toggle was clicked.",
"displayDetail": "Record<string, never>"
}
],
"composedFrom": [
{
"name": "ConversationList",
"group": "Components",
"storyId": "solid-advanced-elements-conversationlist--docs"
}
],
"tokens": [
"--color-sidebar",
"--color-scrollbar-thumb"
]
},
{
"tag": "kc-embed",
"className": "KcEmbedElement",
"displayName": "Embed",
"props": [
{
"name": "cardId",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Stable card id correlating every emitted event. Set as an attribute or property.",
"displayType": "undefined | string"
},
{
"name": "data",
"type": "undefined | { provider: \"youtube\" | \"vimeo\" | \"generic\"; id?: undefined | string; url?: undefined | string; title?: undefined | string; poster?: undefined | string; start?: undefined | number; aspectRatio?: undefined | \"16:9\" | \"4:3\" | \"1:1\" | \"9:16\" }",
"optional": true,
"scalar": false,
"description": "The embed payload (provider + id/url + options). Set as a JS **property** (object).",
"displayType": "undefined | { provider: \"youtube\" | \"vimeo\" | \"generic\"; id?: undefined | string; url?: undefined | string; title?: undefined | string; poster?: undefined | string; start?: undefined | number; aspectRatio?: undefined | \"16:9\" | \"4:3\" | \"1:1\" | \"9:16\" }"
}
],
"events": [],
"composedFrom": [
{
"name": "Embed",
"group": "Components",
"storyId": "solid-advanced-elements-embed--docs"
}
],
"tokens": []
},
{
"tag": "kc-empty",
"className": "KcEmptyElement",
"displayName": "Empty",
"props": [
{
"name": "emptyTitle",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Title text. Attribute: `empty-title` (`title` is a global HTML attribute).",
"default": "''",
"displayType": "undefined | string"
},
{
"name": "description",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Description text.",
"default": "''",
"displayType": "undefined | string"
}
],
"events": [],
"composedFrom": [
{
"name": "Empty",
"group": "Components",
"storyId": "solid-advanced-elements-empty--docs"
},
{
"name": "EmptyHeader",
"group": "Components",
"storyId": "solid-advanced-elements-emptyheader--docs"
},
{
"name": "EmptyMedia",
"group": "Components",
"storyId": "solid-advanced-elements-emptymedia--docs"
},
{
"name": "EmptyTitle",
"group": "Components",
"storyId": "solid-advanced-elements-emptytitle--docs"
},
{
"name": "EmptyDescription",
"group": "Components",
"storyId": "solid-advanced-elements-emptydescription--docs"
},
{
"name": "EmptyContent",
"group": "Components",
"storyId": "solid-advanced-elements-emptycontent--docs"
}
],
"tokens": []
},
{
"tag": "kc-feedback-bar",
"className": "KcFeedbackBarElement",
"displayName": "FeedbackBar",
"props": [
{
"name": "barTitle",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "The banner label (e.g. \"Was this helpful?\"). Attribute: `bar-title` (`title` is avoided — it's a global HTML attribute).",
"default": "'Was this helpful?'",
"displayType": "undefined | string"
},
{
"name": "collectDetail",
"type": "undefined | false | true",
"optional": true,
"scalar": true,
"description": "When set, a not-helpful vote opens an optional detail form before the thank-you confirmation. Attribute: `collect-detail`.",
"displayType": "undefined | false | true"
},
{
"name": "categories",
"type": "undefined | string[]",
"optional": true,
"scalar": false,
"description": "Optional category chips for the detail form. Set as a JS property (array).",
"displayType": "undefined | string[]"
},
{
"name": "detailTitle",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Heading for the detail form. Attribute: `detail-title`.",
"displayType": "undefined | string"
},
{
"name": "detailPlaceholder",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Placeholder for the detail comment box. Attribute: `detail-placeholder`.",
"displayType": "undefined | string"
},
{
"name": "submitLabel",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Submit button label in the detail form. Attribute: `submit-label`.",
"displayType": "undefined | string"
},
{
"name": "thanksMessage",
"type": "undefined | string",
"optional": true,
"scalar": true,
"description": "Confirmation copy shown after a vote/submit. Attribute: `thanks-message`.",
"displayType": "undefined | string"
}
],
"events": [
{
"name": "kc-close",
"detail": null,
"description": "The user dismissed the banner.",
"displayDetail": null
},
{
"name": "kc-feedback",
"detail": "{ value: \"helpful\" | \"not-helpful\" }",
"description": "The user rated the response. `value` is `'helpful'` or `'not-helpful'`.",
"displayDetail": "{ value: \"helpful\" | \"not-helpful\" }"
},
{
"name": "kc-feedback-detail",
"detail": "{ value: \"helpful\" | \"not-helpful\"; category?: undefined | string; comment?: undefined | string }",
"description": "The user submitted the optional detail form (`collect-detail`).",
"displayDetail": "{ value: \"helpful\" | \"not-helpful\"; category?: undefined | string; comment?: undefined | string }"
}
],
"composedFrom": [
{
"name": "FeedbackB