@kitn.ai/ui 0.14.1 → 0.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/dist/kitn-chat.es.js +1 -1
  2. package/package.json +6 -1
  3. package/src/components/component-meta.json +10 -10
  4. package/src/elements/compiled.css +1 -1
  5. package/src/remote/host-embed.ts +1 -1
  6. package/src/components/artifact.stories.tsx +0 -138
  7. package/src/components/attachments.stories.tsx +0 -303
  8. package/src/components/attachments.test.tsx +0 -64
  9. package/src/components/chain-of-thought.stories.tsx +0 -211
  10. package/src/components/chat-container.stories.tsx +0 -187
  11. package/src/components/chat-thread.test.tsx +0 -58
  12. package/src/components/checkpoint.stories.tsx +0 -102
  13. package/src/components/code-block.stories.tsx +0 -150
  14. package/src/components/confirm-card.stories.tsx +0 -74
  15. package/src/components/context.stories.tsx +0 -229
  16. package/src/components/context.test.tsx +0 -133
  17. package/src/components/conversation-item.stories.tsx +0 -125
  18. package/src/components/conversation-list.stories.tsx +0 -133
  19. package/src/components/default-input.test.tsx +0 -111
  20. package/src/components/empty.stories.tsx +0 -434
  21. package/src/components/feedback-bar.stories.tsx +0 -138
  22. package/src/components/feedback-bar.test.tsx +0 -103
  23. package/src/components/file-tree.stories.tsx +0 -73
  24. package/src/components/file-upload.stories.tsx +0 -156
  25. package/src/components/image.stories.tsx +0 -89
  26. package/src/components/loader.stories.tsx +0 -181
  27. package/src/components/markdown.stories.tsx +0 -180
  28. package/src/components/message-action-bar.test.tsx +0 -128
  29. package/src/components/message-narrow.stories.tsx +0 -329
  30. package/src/components/message-skills.stories.tsx +0 -211
  31. package/src/components/message.stories.tsx +0 -281
  32. package/src/components/model-switcher.stories.tsx +0 -123
  33. package/src/components/model-switcher.test.tsx +0 -65
  34. package/src/components/prompt-input.stories.tsx +0 -222
  35. package/src/components/prompt-suggestion.stories.tsx +0 -142
  36. package/src/components/reasoning.stories.tsx +0 -140
  37. package/src/components/resizable.test.tsx +0 -226
  38. package/src/components/scroll-button.stories.tsx +0 -100
  39. package/src/components/slash-command.stories.tsx +0 -163
  40. package/src/components/source-list.test.tsx +0 -152
  41. package/src/components/source.stories.tsx +0 -124
  42. package/src/components/tasks-card.stories.tsx +0 -78
  43. package/src/components/text-shimmer.stories.tsx +0 -87
  44. package/src/components/thinking-bar.stories.tsx +0 -87
  45. package/src/components/tool.stories.tsx +0 -153
  46. package/src/components/voice-input.stories.tsx +0 -83
  47. package/src/elements/artifact.stories.tsx +0 -506
  48. package/src/elements/attachments.stories.tsx +0 -190
  49. package/src/elements/card.stories.tsx +0 -113
  50. package/src/elements/cards.stories.tsx +0 -59
  51. package/src/elements/catalog.stories.tsx +0 -491
  52. package/src/elements/chain-of-thought.declarative.test.tsx +0 -153
  53. package/src/elements/chain-of-thought.stories.tsx +0 -113
  54. package/src/elements/chat-scope-picker.stories.tsx +0 -73
  55. package/src/elements/chat-workspace.stories.tsx +0 -288
  56. package/src/elements/chat.stories.tsx +0 -151
  57. package/src/elements/checkpoint.stories.tsx +0 -72
  58. package/src/elements/choice.stories.tsx +0 -240
  59. package/src/elements/code-block.stories.tsx +0 -83
  60. package/src/elements/composed-shell.stories.tsx +0 -316
  61. package/src/elements/confirm-card.stories.tsx +0 -227
  62. package/src/elements/context-meter.stories.tsx +0 -151
  63. package/src/elements/conversation-list.declarative.test.tsx +0 -137
  64. package/src/elements/conversation-list.stories.tsx +0 -243
  65. package/src/elements/embed.stories.tsx +0 -213
  66. package/src/elements/empty.stories.tsx +0 -111
  67. package/src/elements/feedback-bar.stories.tsx +0 -114
  68. package/src/elements/file-tree.stories.tsx +0 -134
  69. package/src/elements/file-upload.stories.tsx +0 -82
  70. package/src/elements/form.stories.tsx +0 -248
  71. package/src/elements/image.stories.tsx +0 -71
  72. package/src/elements/link-preview.stories.tsx +0 -209
  73. package/src/elements/loader.stories.tsx +0 -88
  74. package/src/elements/markdown.stories.tsx +0 -76
  75. package/src/elements/message-skills.declarative.test.tsx +0 -104
  76. package/src/elements/message-skills.stories.tsx +0 -114
  77. package/src/elements/message.stories.tsx +0 -218
  78. package/src/elements/model-switcher.declarative.test.tsx +0 -130
  79. package/src/elements/model-switcher.stories.tsx +0 -198
  80. package/src/elements/popover.stories.tsx +0 -80
  81. package/src/elements/prompt-input-slash-command.test.tsx +0 -128
  82. package/src/elements/prompt-input-stoppable.test.tsx +0 -88
  83. package/src/elements/prompt-input-toolbar-actions.test.tsx +0 -120
  84. package/src/elements/prompt-input.stories.tsx +0 -331
  85. package/src/elements/prompt-suggestions.declarative.test.tsx +0 -164
  86. package/src/elements/prompt-suggestions.stories.tsx +0 -213
  87. package/src/elements/reasoning.stories.tsx +0 -77
  88. package/src/elements/remote.stories.tsx +0 -314
  89. package/src/elements/resizable.stories.tsx +0 -426
  90. package/src/elements/response-stream.stories.tsx +0 -79
  91. package/src/elements/scroll-button.stories.tsx +0 -202
  92. package/src/elements/scroll-button.test.tsx +0 -148
  93. package/src/elements/source-list.stories.tsx +0 -143
  94. package/src/elements/source.stories.tsx +0 -88
  95. package/src/elements/switch.stories.tsx +0 -56
  96. package/src/elements/tasks.stories.tsx +0 -237
  97. package/src/elements/text-shimmer.stories.tsx +0 -64
  98. package/src/elements/thinking-bar.stories.tsx +0 -72
  99. package/src/elements/tool.stories.tsx +0 -89
  100. package/src/elements/voice-input.stories.tsx +0 -88
  101. package/src/primitives/controllable.test.ts +0 -47
  102. package/src/stories/chat-panel-layout.stories.tsx +0 -145
  103. package/src/stories/chat-scene.tsx +0 -571
  104. package/src/stories/checkpoint-restore.stories.tsx +0 -256
  105. package/src/stories/context-usage.stories.tsx +0 -212
  106. package/src/stories/conversation-with-reasoning.stories.tsx +0 -182
  107. package/src/stories/conversation-with-sources.stories.tsx +0 -471
  108. package/src/stories/docs/Accessibility.mdx +0 -119
  109. package/src/stories/docs/ChildElements.mdx +0 -269
  110. package/src/stories/docs/ForAIAgents.mdx +0 -162
  111. package/src/stories/docs/GettingStarted.mdx +0 -65
  112. package/src/stories/docs/Installation.mdx +0 -83
  113. package/src/stories/docs/Introduction.mdx +0 -50
  114. package/src/stories/docs/SolidJsAdvanced.mdx +0 -17
  115. package/src/stories/docs/Theming.mdx +0 -85
  116. package/src/stories/docs/element-controls.ts +0 -121
  117. package/src/stories/docs/frameworks/Angular.mdx +0 -245
  118. package/src/stories/docs/frameworks/Html.mdx +0 -227
  119. package/src/stories/docs/frameworks/Overview.mdx +0 -47
  120. package/src/stories/docs/frameworks/React.mdx +0 -227
  121. package/src/stories/docs/frameworks/Solid.mdx +0 -173
  122. package/src/stories/docs/frameworks/Svelte.mdx +0 -194
  123. package/src/stories/docs/frameworks/Vue.mdx +0 -238
  124. package/src/stories/docs/generative-ui-overview.mdx +0 -186
  125. package/src/stories/docs/recipes/SpeechToText.mdx +0 -7
  126. package/src/stories/docs/recipes/Streaming.mdx +0 -68
  127. package/src/stories/docs/recipes/TextToSpeech.mdx +0 -35
  128. package/src/stories/docs/theme-editor/canvas.tsx +0 -32
  129. package/src/stories/docs/theme-editor/inspector.tsx +0 -66
  130. package/src/stories/docs/theme-editor/presets.test.ts +0 -32
  131. package/src/stories/docs/theme-editor/presets.ts +0 -64
  132. package/src/stories/docs/theme-editor/theme-css.test.ts +0 -19
  133. package/src/stories/docs/theme-editor/theme-css.ts +0 -15
  134. package/src/stories/docs/theme-editor/theme-editor.tsx +0 -146
  135. package/src/stories/docs/theme-tokens.tsx +0 -174
  136. package/src/stories/examples/ChoosingComponents.mdx +0 -106
  137. package/src/stories/examples/sample-data.ts +0 -79
  138. package/src/stories/examples/usage/checkpoint-restore.ts +0 -156
  139. package/src/stories/examples/usage/context-usage.ts +0 -591
  140. package/src/stories/examples/usage/conversation-with-reasoning.ts +0 -224
  141. package/src/stories/examples/usage/conversation-with-sources.ts +0 -589
  142. package/src/stories/examples/usage/empty-state.ts +0 -144
  143. package/src/stories/examples/usage/full-chat-app.ts +0 -277
  144. package/src/stories/examples/usage/index.ts +0 -63
  145. package/src/stories/examples/usage/message-actions.ts +0 -704
  146. package/src/stories/examples/usage/pattern-centered-conversation.ts +0 -446
  147. package/src/stories/examples/usage/pattern-chat-panel-layout.ts +0 -442
  148. package/src/stories/examples/usage/pattern-docked-widget.ts +0 -479
  149. package/src/stories/examples/usage/prompt-input-variants.ts +0 -1356
  150. package/src/stories/examples/usage/streaming-response.ts +0 -687
  151. package/src/stories/examples/usage/types.ts +0 -33
  152. package/src/stories/full-chat.stories.tsx +0 -18
  153. package/src/stories/message-actions.stories.tsx +0 -230
  154. package/src/stories/pattern-centered-conversation.stories.tsx +0 -93
  155. package/src/stories/pattern-docked-widget.stories.tsx +0 -93
  156. package/src/stories/pattern-empty-state.stories.tsx +0 -76
  157. package/src/stories/prompt-input-variants.stories.tsx +0 -456
  158. package/src/stories/streaming-response.stories.tsx +0 -438
  159. package/src/stories/theme-editor.stories.tsx +0 -16
  160. package/src/stories/token-reference.stories.tsx +0 -18
  161. package/src/stories/typography.stories.tsx +0 -78
  162. package/src/ui/avatar.stories.tsx +0 -103
  163. package/src/ui/badge.stories.tsx +0 -86
  164. package/src/ui/button.stories.tsx +0 -145
  165. package/src/ui/collapsible.stories.tsx +0 -69
  166. package/src/ui/dropdown.stories.tsx +0 -59
  167. package/src/ui/hover-card.stories.tsx +0 -77
  168. package/src/ui/hover-card.test.tsx +0 -30
  169. package/src/ui/overlay.stories.tsx +0 -115
  170. package/src/ui/popover.stories.tsx +0 -81
  171. package/src/ui/popover.test.tsx +0 -99
  172. package/src/ui/resizable.stories.tsx +0 -236
  173. package/src/ui/scroll-area.stories.tsx +0 -50
  174. package/src/ui/separator.stories.tsx +0 -81
  175. package/src/ui/skeleton.stories.tsx +0 -337
  176. package/src/ui/switch.stories.tsx +0 -51
  177. package/src/ui/switch.test.tsx +0 -59
  178. package/src/ui/textarea.stories.tsx +0 -76
  179. package/src/ui/tooltip.stories.tsx +0 -74
package/src/elements/composed-shell.stories.tsx DELETED
@@ -1,316 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { createSignal, onMount, For, type JSX } from 'solid-js';
3
- import './register'; // side effect: registers the custom elements
4
- import {
5
- conversations,
6
- context,
7
- models,
8
- slashCommands,
9
- thread,
10
- } from '../stories/examples/sample-data';
11
- import type { ArtifactFile } from '../components/artifact';
12
-
13
- /**
14
- * Examples / Composed chat shell — THE headline. A real chat assembled from leaf
15
- * `kai-*` components inside a `<kai-resizable>` layout, wired with sample data +
16
- * event handlers in the story script. Paired with the `<kai-chat>` drop-in so the
17
- * "batteries-included vs compose-your-own — when do I use which?" contrast is
18
- * explicit. Both stories are source-visible (Show code).
19
- */
20
-
21
- type AnyEl = HTMLElement & Record<string, unknown>;
22
- /** Set JS properties (objects/arrays) on an element. */
23
- const setProps = (el: HTMLElement, props: Record<string, unknown>) => {
24
- for (const k in props) (el as AnyEl)[k] = props[k];
25
- };
26
- /** Set string/boolean attributes on an element. */
27
- const setAttrs = (el: HTMLElement, a: Record<string, string | boolean>) => {
28
- for (const k in a) {
29
- const v = a[k];
30
- if (v === false) el.removeAttribute(k);
31
- else el.setAttribute(k, v === true ? '' : v);
32
- }
33
- };
34
-
35
- const BASE = new URL('artifact-fixtures', document.baseURI).href; // served by .storybook/main.ts staticDirs
36
-
37
- const ARTIFACT_FILES: ArtifactFile[] = [
38
- {
39
- path: 'index.html',
40
- url: `${BASE}/index.html`,
41
- type: 'html',
42
- language: 'html',
43
- code: '<!DOCTYPE html>\n<html><head><title>Starboard</title></head>\n<body><h1>Starboard</h1></body></html>',
44
- },
45
- { path: 'css/site.css', url: `${BASE}/css/site.css`, type: 'other', language: 'css', code: 'body { font-family: system-ui; }' },
46
- { path: 'assets/logo.svg', url: `${BASE}/assets/logo.svg`, type: 'image' },
47
- ];
48
-
49
- /** A bordered frame the shell fills. */
50
- function Frame(props: { children: JSX.Element; height?: string }) {
51
- return (
52
- <div
53
- style={{
54
- height: props.height ?? '560px',
55
- width: '100%',
56
- border: '1px solid var(--color-border, #e4e4e7)',
57
- 'border-radius': '12px',
58
- overflow: 'hidden',
59
- }}
60
- >
61
- {props.children}
62
- </div>
63
- );
64
- }
65
-
66
- const meta = {
67
- title: 'Examples/Composed chat shell',
68
- parameters: {
69
- layout: 'padded',
70
- docs: {
71
- description: {
72
- component: [
73
- '# Build your own chat',
74
- 'Two ways to ship a chat, side by side:',
75
- '- **Compose your own** (`Composed shell`) — a `<kai-resizable>` laying out `<kai-conversations>` │ a chat column (`<kai-message>` list + `<kai-context>` meter + `<kai-prompt-input>` + `<kai-suggestions>`) │ `<kai-artifact>`. You own the data flow and event wiring; you control every panel. **Reach for this when the flagship doesn\'t fit** — custom layout, an inspector/canvas panel, bespoke header.',
76
- '- **Batteries-included** (`Drop-in <kai-chat>`) — the whole chat surface in one tag. Set `messages`, listen for `submit`. **Reach for this for the 90% path** — a working chat in minutes.',
77
- 'Same leaf components underneath; the flagship just pre-wires them. See **Examples / Choosing components** for the full decision guide.',
78
- 'Both stories are source-visible — open **Show code** to read the exact composition + wiring.',
79
- ].join('\n\n'),
80
- },
81
- },
82
- },
83
- } satisfies Meta;
84
-
85
- export default meta;
86
- type Story = StoryObj;
87
-
88
- // ── B1 · Composed shell ──────────────────────────────────────────────────────
89
-
90
- const SHELL_SNIPPET = `<!-- Compose-your-own chat: a resizable shell built from leaf components -->
91
- <kai-resizable orientation="horizontal" style="display:block;height:560px">
92
- <!-- start: conversation list -->
93
- <kai-resizable-item size="22%" min="180px" max="40%">
94
- <kai-conversations id="list" style="display:block;height:100%"></kai-conversations>
95
- </kai-resizable-item>
96
-
97
- <!-- main: the chat column (scrolling messages + meter + composer) -->
98
- <kai-resizable-item>
99
- <div class="chat-col">
100
- <div class="messages" id="messages"></div> <!-- <kai-message> per turn -->
101
- <kai-context id="ctx"></kai-context>
102
- <kai-suggestions id="suggs"></kai-suggestions>
103
- <kai-prompt-input id="input" search voice></kai-prompt-input>
104
- </div>
105
- </kai-resizable-item>
106
-
107
- <!-- end: artifact/preview panel (toggle with the 'hidden' attribute) -->
108
- <kai-resizable-item size="32%" min="240px">
109
- <kai-artifact id="artifact" style="display:block;height:100%"></kai-artifact>
110
- </kai-resizable-item>
111
- </kai-resizable>
112
-
113
- <script type="module">
114
- import '@kitn.ai/ui/elements';
115
-
116
- // — data in via properties —
117
- const list = document.getElementById('list');
118
- list.conversations = [/* … */];
119
- list.activeId = 'c1';
120
-
121
- const ctx = document.getElementById('ctx');
122
- ctx.context = { usedTokens: 48200, maxTokens: 200000 };
123
-
124
- const suggs = document.getElementById('suggs');
125
- suggs.suggestions = ['Summarize this thread', 'What changed in v0.3?'];
126
-
127
- const input = document.getElementById('input');
128
- input.slashCommands = [{ id: 'summarize', label: '/summarize', category: 'Actions' }];
129
-
130
- const artifact = document.getElementById('artifact');
131
- artifact.src = 'https://your-backend.example/artifacts/abc/index.html';
132
- artifact.files = [{ path: 'index.html', url: '…', type: 'html', code: '…' }];
133
-
134
- // render the message list yourself (you own the thread state)
135
- const messages = document.getElementById('messages');
136
- let thread = [/* { id, role, content, … } */];
137
- const render = () => {
138
- messages.innerHTML = '';
139
- for (const m of thread) {
140
- const el = document.createElement('kai-message');
141
- el.message = m;
142
- messages.append(el);
143
- }
144
- };
145
- render();
146
-
147
- // — interactions out via events —
148
- list.addEventListener('kai-select', (e) => (list.activeId = e.detail.id));
149
- suggs.addEventListener('kai-select', (e) => (input.value = e.detail.value));
150
- input.addEventListener('kai-submit', (e) => {
151
- thread = [...thread, { id: Date.now() + '', role: 'user', content: e.detail.value }];
152
- render();
153
- // …call your backend, append the assistant reply, re-render…
154
- });
155
- </script>`;
156
-
157
- export const ComposedShell: Story = {
158
- name: 'Composed shell',
159
- render: () => {
160
- const [messages, setMessages] = createSignal<Record<string, unknown>[]>(thread);
161
- let list!: HTMLElement, ctx!: HTMLElement, suggs!: HTMLElement, input!: HTMLElement, artifact!: HTMLElement;
162
- const msgRefs: HTMLElement[] = [];
163
-
164
- onMount(() => {
165
- setProps(list, { conversations, activeId: 'c1' });
166
- list.addEventListener('kai-select', (e) => ((list as AnyEl).activeId = (e as CustomEvent).detail.id));
167
- setProps(ctx, { context });
168
- setProps(suggs, { suggestions: ['Summarize this thread', 'What changed in v0.3?', 'Show me the layout code'] });
169
- suggs.addEventListener('kai-select', (e) => ((input as AnyEl).value = (e as CustomEvent).detail.value));
170
- setProps(input, { slashCommands });
171
- setAttrs(input, { search: true, voice: true, placeholder: 'Message the assistant…' });
172
- input.addEventListener('kai-submit', (e) => {
173
- const value = (e as unknown as CustomEvent).detail.value as string;
174
- if (!value) return;
175
- setMessages((m) => [...m, { id: Date.now() + '', role: 'user', content: value }]);
176
- (input as AnyEl).value = '';
177
- setTimeout(() => {
178
- setMessages((m) => [
179
- ...m,
180
- { id: Date.now() + 'a', role: 'assistant', content: 'Echo: ' + value, actions: ['copy'] },
181
- ]);
182
- }, 500);
183
- });
184
- setProps(artifact, { src: `${BASE}/index.html`, files: ARTIFACT_FILES });
185
- setAttrs(artifact, { 'iframe-title': 'Artifact preview' });
186
- });
187
-
188
- // Keep each <kai-message>'s `message` property in sync as the thread grows.
189
- const syncMessages = () => {
190
- const list = messages();
191
- list.forEach((m, i) => {
192
- if (msgRefs[i]) (msgRefs[i] as AnyEl).message = m;
193
- });
194
- };
195
-
196
- return (
197
- <Frame>
198
- <kai-resizable orientation="horizontal">
199
- <kai-resizable-item size="22%" min="180px" max="40%">
200
- <kai-conversations ref={(e) => (list = e)} style={{ display: 'block', height: '100%' }} />
201
- </kai-resizable-item>
202
-
203
- <kai-resizable-item>
204
- <div style={{ height: '100%', display: 'flex', 'flex-direction': 'column', 'min-height': '0' }}>
205
- <div
206
- style={{
207
- flex: '1',
208
- 'min-height': '0',
209
- 'overflow-y': 'auto',
210
- padding: '16px',
211
- display: 'flex',
212
- 'flex-direction': 'column',
213
- gap: '12px',
214
- }}
215
- >
216
- <For each={messages()}>
217
- {(m, i) => (
218
- <kai-message
219
- ref={(e) => {
220
- msgRefs[i()] = e;
221
- (e as AnyEl).message = m;
222
- queueMicrotask(syncMessages);
223
- }}
224
- />
225
- )}
226
- </For>
227
- </div>
228
- <div
229
- style={{
230
- 'border-top': '1px solid var(--color-border, #e4e4e7)',
231
- padding: '12px 16px',
232
- display: 'flex',
233
- 'flex-direction': 'column',
234
- gap: '8px',
235
- }}
236
- >
237
- <kai-context ref={(e) => (ctx = e)} />
238
- <kai-suggestions ref={(e) => (suggs = e)} />
239
- <kai-prompt-input ref={(e) => (input = e)} />
240
- </div>
241
- </div>
242
- </kai-resizable-item>
243
-
244
- <kai-resizable-item size="32%" min="240px">
245
- <kai-artifact ref={(e) => (artifact = e)} style={{ display: 'block', height: '100%' }} />
246
- </kai-resizable-item>
247
- </kai-resizable>
248
- </Frame>
249
- );
250
- },
251
- parameters: { docs: { source: { code: SHELL_SNIPPET, language: 'html' } } },
252
- };
253
-
254
- // ── B2 · Drop-in <kai-chat> ───────────────────────────────────────────────────
255
-
256
- const DROPIN_SNIPPET = `<!-- Batteries-included: the whole chat surface in one tag -->
257
- <kai-chat id="chat" chat-title="Assistant" search voice
258
- style="display:block;height:560px"></kai-chat>
259
-
260
- <script type="module">
261
- import '@kitn.ai/ui/elements';
262
-
263
- const chat = document.getElementById('chat');
264
- chat.models = [{ id: 'opus', name: 'Claude Opus', provider: 'Anthropic' }];
265
- chat.currentModel = 'opus';
266
- chat.context = { usedTokens: 48200, maxTokens: 200000 };
267
- chat.suggestions = ['Summarize this thread', 'What changed in v0.3?'];
268
- chat.messages = [
269
- { id: '1', role: 'assistant', content: "Hi! I'm the drop-in <kai-chat>. Ask me anything.",
270
- actions: ['copy', 'like', 'dislike'] },
271
- ];
272
-
273
- chat.addEventListener('kai-submit', (e) => {
274
- chat.messages = [...chat.messages, { id: Date.now() + '', role: 'user', content: e.detail.value }];
275
- chat.loading = true;
276
- // …call your backend, then append the reply and clear loading…
277
- });
278
- chat.addEventListener('kai-model-change', (e) => (chat.currentModel = e.detail.modelId));
279
- </script>`;
280
-
281
- export const DropInChat: Story = {
282
- name: 'Drop-in <kai-chat>',
283
- render: () => {
284
- let chat!: HTMLElement;
285
- onMount(() => {
286
- setProps(chat, {
287
- models,
288
- currentModel: 'opus',
289
- context,
290
- suggestions: ['Summarize this thread', 'What changed in v0.3?'],
291
- messages: [
292
- { id: '1', role: 'assistant', content: "Hi! I'm the **drop-in** `<kai-chat>`. Ask me anything.", actions: ['copy', 'like', 'dislike'] },
293
- ],
294
- });
295
- setAttrs(chat, { 'chat-title': 'Assistant', search: true, voice: true });
296
- chat.addEventListener('kai-submit', (e) => {
297
- const value = (e as unknown as CustomEvent).detail.value as string;
298
- const cur = (chat as AnyEl).messages as unknown[];
299
- (chat as AnyEl).messages = [...cur, { id: Date.now() + '', role: 'user', content: value }];
300
- (chat as AnyEl).loading = true;
301
- setTimeout(() => {
302
- const cur2 = (chat as AnyEl).messages as unknown[];
303
- (chat as AnyEl).messages = [...cur2, { id: Date.now() + 'a', role: 'assistant', content: 'Echo: ' + value, actions: ['copy'] }];
304
- (chat as AnyEl).loading = false;
305
- }, 600);
306
- });
307
- chat.addEventListener('kai-model-change', (e) => ((chat as AnyEl).currentModel = (e as CustomEvent).detail.modelId));
308
- });
309
- return (
310
- <Frame>
311
- <kai-chat ref={(e) => (chat = e)} style={{ display: 'block', height: '100%' }} />
312
- </Frame>
313
- );
314
- },
315
- parameters: { docs: { source: { code: DROPIN_SNIPPET, language: 'html' } } },
316
- };
package/src/elements/confirm-card.stories.tsx DELETED
@@ -1,227 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { createSignal, onMount, type JSX } from 'solid-js';
3
- import './confirm-card';
4
- import { argTypesFor, specDescription } from '../stories/docs/element-controls';
5
- import type { ConfirmCardData } from '../components/confirm-card';
6
- import type { CardEvent } from '../primitives/card-contract';
7
-
8
- declare module 'solid-js' {
9
- // eslint-disable-next-line @typescript-eslint/no-namespace
10
- namespace JSX {
11
- interface IntrinsicElements {
12
- 'kai-confirm': JSX.HTMLAttributes<HTMLElement> & {
13
- heading?: string;
14
- 'card-id'?: string;
15
- ref?: (el: HTMLElement) => void;
16
- };
17
- }
18
- }
19
- }
20
-
21
- type ConfirmEl = HTMLElement & { data?: ConfirmCardData; resolution?: Record<string, unknown> };
22
-
23
- function Frame(props: { children: JSX.Element }) {
24
- return <div style={{ 'max-width': '460px' }}>{props.children}</div>;
25
- }
26
-
27
- /** Mounts a <kai-confirm>, sets `.data`, logs the emitted CardEvent under the render. */
28
- function ConfirmDemo(props: { def: ConfirmCardData; cardId: string; heading?: string }) {
29
- const [log, setLog] = createSignal<CardEvent[]>([]);
30
- let el: ConfirmEl | undefined;
31
- onMount(() => {
32
- if (!el) return;
33
- el.data = props.def;
34
- el.addEventListener('kai-card', (e) => {
35
- const detail = (e as CustomEvent<CardEvent>).detail;
36
- setLog((prev) => [...prev, detail]);
37
- });
38
- });
39
- return (
40
- <Frame>
41
- <div style={{ display: 'flex', 'flex-direction': 'column', gap: '12px' }}>
42
- <kai-confirm ref={(e) => (el = e as ConfirmEl)} card-id={props.cardId} heading={props.heading} />
43
- <pre
44
- style={{
45
- margin: 0,
46
- 'max-height': '180px',
47
- overflow: 'auto',
48
- background: 'var(--color-muted, #f4f4f5)',
49
- 'border-radius': '8px',
50
- padding: '8px',
51
- 'font-size': '12px',
52
- }}
53
- >
54
- {log().length === 0 ? '// emitted CardEvents appear here' : JSON.stringify(log(), null, 2)}
55
- </pre>
56
- </div>
57
- </Frame>
58
- );
59
- }
60
-
61
- const APPROVE: ConfirmCardData = {
62
- body: 'This will apply 3 pending migrations to production. This cannot be undone.',
63
- tone: 'warning',
64
- actions: [
65
- { id: 'approve', label: 'Run migration', style: 'primary', default: true },
66
- { id: 'reject', label: 'Cancel' },
67
- ],
68
- };
69
-
70
- const DESTRUCTIVE: ConfirmCardData = {
71
- body: 'Permanently delete 12 files from the workspace? This cannot be undone.',
72
- tone: 'danger',
73
- actions: [
74
- { id: 'delete', label: 'Delete files', style: 'destructive', default: true },
75
- { id: 'cancel', label: 'Keep them' },
76
- ],
77
- };
78
-
79
- const CHOICES: ConfirmCardData = {
80
- heading: 'Where should I deploy?',
81
- body: 'Pick a target environment for this build.',
82
- actions: [
83
- { id: 'staging', label: 'Staging', default: true },
84
- { id: 'preview', label: 'Preview' },
85
- { id: 'prod', label: 'Production', style: 'primary' },
86
- ],
87
- };
88
-
89
- const DISMISSIBLE: ConfirmCardData = {
90
- body: 'Send the drafted email to the customer?',
91
- dismissible: true,
92
- actions: [
93
- { id: 'send', label: 'Send', style: 'primary', default: true },
94
- { id: 'edit', label: 'Edit first' },
95
- ],
96
- };
97
-
98
- const HEADING_MAP: Record<string, string | undefined> = {
99
- 'card-approve': 'Run database migration?',
100
- 'card-delete': 'Delete files?',
101
- 'card-deploy': undefined,
102
- 'card-send': 'Send email?',
103
- };
104
-
105
- const HTML_SNIPPET = (def: ConfirmCardData, cardId: string) => {
106
- const heading = HEADING_MAP[cardId];
107
- return `<kai-confirm${heading ? ` heading="${heading}"` : ''}></kai-confirm>
108
- <script type="module">
109
- import '@kitn.ai/ui/elements'; // registers the custom elements
110
-
111
- const el = document.querySelector('kai-confirm');
112
- // \`data\` is the CardEnvelope.data (set as a property).
113
- el.data = ${JSON.stringify(def, null, 2)};
114
-
115
- // Cards bubble ONE \`kai-card\` CustomEvent carrying a typed CardEvent.
116
- el.addEventListener('kai-card', (e) => {
117
- const ev = e.detail; // { kind:'action', cardId, action, payload? } | { kind:'dismiss', ... } | ...
118
- if (ev.kind === 'action') console.log('chose', ev.action);
119
- });
120
- </script>`;
121
- };
122
-
123
- const meta = {
124
- title: 'Generative UI/Cards/kai-confirm',
125
- tags: ['autodocs'],
126
- argTypes: argTypesFor('kai-confirm'),
127
- parameters: {
128
- layout: 'padded',
129
- docs: {
130
- description: specDescription('kai-confirm', [
131
- "`<kai-confirm>` is a **named-intent approval** card (set via the `data` **property**): a title + body + a small set of action buttons. Activating an action emits the Card contract's **`action`** verb up a bubbling **`kai-card`** CustomEvent of `{ kind: 'action', cardId, action, payload? }`, then **resolves** the card (other actions disabled, the chosen one marked) so the same approval can't double-fire.",
132
- '**Action styles:** `primary` (filled accent), `default` (outline), `destructive` (red/danger). A `tone:\'danger\'` and any destructive action add a warning icon + danger accent — never color alone. At most one action can be `default:true` (the keyboard default; gets focus only when `autofocus` is set, which is **off** by default to avoid focus-stealing mid-stream).',
133
- '**Events** (all frozen Card-contract verbs): `ready` on mount, `action` on choice, `dismiss` for the optional close affordance (`dismissible:true`), `error` for a malformed definition (renders the inline `kai-card` error). It **never invents events**. The same shapes flow over the remote iframe transport unchanged.',
134
- ]),
135
- },
136
- },
137
- } satisfies Meta;
138
-
139
- export default meta;
140
- type Story = StoryObj;
141
-
142
- /** The canonical two-action approval (Approve / Reject). */
143
- export const ApproveReject: Story = {
144
- render: () => <ConfirmDemo def={APPROVE} cardId="card-approve" heading="Run database migration?" />,
145
- parameters: { docs: { source: { code: HTML_SNIPPET(APPROVE, 'card-approve'), language: 'html' } } },
146
- };
147
-
148
- /** A destructive action (`tone:'danger'` + `style:'destructive'`) — danger styling, no color-only cue. */
149
- export const Destructive: Story = {
150
- render: () => <ConfirmDemo def={DESTRUCTIVE} cardId="card-delete" heading="Delete files?" />,
151
- parameters: { docs: { source: { code: HTML_SNIPPET(DESTRUCTIVE, 'card-delete'), language: 'html' } } },
152
- };
153
-
154
- /** A small choice set (3 actions, one `default:true`). */
155
- export const ChoiceSet: Story = {
156
- render: () => <ConfirmDemo def={CHOICES} cardId="card-deploy" />,
157
- parameters: { docs: { source: { code: HTML_SNIPPET(CHOICES, 'card-deploy'), language: 'html' } } },
158
- };
159
-
160
- /** A dismissible approval (a close affordance emits the `dismiss` verb). */
161
- export const Dismissible: Story = {
162
- render: () => <ConfirmDemo def={DISMISSIBLE} cardId="card-send" heading="Send email?" />,
163
- parameters: { docs: { source: { code: HTML_SNIPPET(DISMISSIBLE, 'card-send'), language: 'html' } } },
164
- };
165
-
166
- const RESOLVED_CONFIRM: ConfirmCardData = {
167
- body: 'Apply 3 migrations?',
168
- actions: [
169
- { id: 'approve', label: 'Run migration', style: 'primary' },
170
- { id: 'reject', label: 'Cancel' },
171
- ],
172
- };
173
-
174
- /** The card after the user chose **Run migration** — chromed read-only, no buttons. */
175
- export const Resolved: Story = {
176
- name: 'Resolved (read-only)',
177
- render: () => {
178
- let el: ConfirmEl | undefined;
179
- onMount(() => {
180
- if (!el) return;
181
- el.data = RESOLVED_CONFIRM;
182
- el.resolution = { kind: 'action', action: 'approve' };
183
- });
184
- return (
185
- <Frame>
186
- <kai-confirm ref={(e) => (el = e as ConfirmEl)} card-id="card-resolved-confirm" heading="Run database migration?" />
187
- </Frame>
188
- );
189
- },
190
- parameters: {
191
- docs: {
192
- source: {
193
- code: `<kai-confirm heading="Run database migration?"></kai-confirm>
194
- <script type="module">
195
- import '@kitn.ai/ui/elements';
196
- const el = document.querySelector('kai-confirm');
197
- el.data = ${JSON.stringify(RESOLVED_CONFIRM, null, 2)};
198
- // Setting .resolution renders the chromed read-only view — no interactive controls.
199
- el.resolution = { kind: 'action', action: 'approve' };
200
- </script>`,
201
- language: 'html',
202
- },
203
- },
204
- },
205
- };
206
-
207
- /** A malformed `data` (empty `actions`) → the inline error state + an `error` event. */
208
- export const ErrorState: Story = {
209
- render: () => <ConfirmDemo def={{ actions: [] } as unknown as ConfirmCardData} cardId="card-bad" />,
210
- parameters: {
211
- docs: {
212
- source: {
213
- code: `<kai-confirm></kai-confirm>
214
- <script type="module">
215
- import '@kitn.ai/ui/elements';
216
- const el = document.querySelector('kai-confirm');
217
- // No actions → inline error state + an \`error\` event.
218
- el.data = { actions: [] };
219
- el.addEventListener('kai-card', (e) => {
220
- if (e.detail.kind === 'error') console.warn('confirm error:', e.detail.message);
221
- });
222
- </script>`,
223
- language: 'html',
224
- },
225
- },
226
- },
227
- };