@kitn.ai/ui 0.15.0 → 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 (177) hide show
  1. package/dist/kitn-chat.es.js +1 -1
  2. package/package.json +6 -1
  3. package/src/elements/compiled.css +1 -1
  4. package/src/components/artifact.stories.tsx +0 -138
  5. package/src/components/attachments.stories.tsx +0 -303
  6. package/src/components/attachments.test.tsx +0 -64
  7. package/src/components/chain-of-thought.stories.tsx +0 -211
  8. package/src/components/chat-container.stories.tsx +0 -187
  9. package/src/components/chat-thread.test.tsx +0 -58
  10. package/src/components/checkpoint.stories.tsx +0 -102
  11. package/src/components/code-block.stories.tsx +0 -150
  12. package/src/components/confirm-card.stories.tsx +0 -74
  13. package/src/components/context.stories.tsx +0 -229
  14. package/src/components/context.test.tsx +0 -133
  15. package/src/components/conversation-item.stories.tsx +0 -125
  16. package/src/components/conversation-list.stories.tsx +0 -133
  17. package/src/components/default-input.test.tsx +0 -111
  18. package/src/components/empty.stories.tsx +0 -434
  19. package/src/components/feedback-bar.stories.tsx +0 -138
  20. package/src/components/feedback-bar.test.tsx +0 -103
  21. package/src/components/file-tree.stories.tsx +0 -73
  22. package/src/components/file-upload.stories.tsx +0 -156
  23. package/src/components/image.stories.tsx +0 -89
  24. package/src/components/loader.stories.tsx +0 -181
  25. package/src/components/markdown.stories.tsx +0 -180
  26. package/src/components/message-action-bar.test.tsx +0 -128
  27. package/src/components/message-narrow.stories.tsx +0 -329
  28. package/src/components/message-skills.stories.tsx +0 -211
  29. package/src/components/message.stories.tsx +0 -281
  30. package/src/components/model-switcher.stories.tsx +0 -123
  31. package/src/components/model-switcher.test.tsx +0 -65
  32. package/src/components/prompt-input.stories.tsx +0 -222
  33. package/src/components/prompt-suggestion.stories.tsx +0 -142
  34. package/src/components/reasoning.stories.tsx +0 -140
  35. package/src/components/resizable.test.tsx +0 -226
  36. package/src/components/scroll-button.stories.tsx +0 -100
  37. package/src/components/slash-command.stories.tsx +0 -163
  38. package/src/components/source-list.test.tsx +0 -152
  39. package/src/components/source.stories.tsx +0 -124
  40. package/src/components/tasks-card.stories.tsx +0 -78
  41. package/src/components/text-shimmer.stories.tsx +0 -87
  42. package/src/components/thinking-bar.stories.tsx +0 -87
  43. package/src/components/tool.stories.tsx +0 -153
  44. package/src/components/voice-input.stories.tsx +0 -83
  45. package/src/elements/artifact.stories.tsx +0 -506
  46. package/src/elements/attachments.stories.tsx +0 -190
  47. package/src/elements/card.stories.tsx +0 -113
  48. package/src/elements/cards.stories.tsx +0 -59
  49. package/src/elements/catalog.stories.tsx +0 -491
  50. package/src/elements/chain-of-thought.declarative.test.tsx +0 -153
  51. package/src/elements/chain-of-thought.stories.tsx +0 -113
  52. package/src/elements/chat-scope-picker.stories.tsx +0 -73
  53. package/src/elements/chat-workspace.stories.tsx +0 -288
  54. package/src/elements/chat.stories.tsx +0 -151
  55. package/src/elements/checkpoint.stories.tsx +0 -72
  56. package/src/elements/choice.stories.tsx +0 -240
  57. package/src/elements/code-block.stories.tsx +0 -83
  58. package/src/elements/composed-shell.stories.tsx +0 -316
  59. package/src/elements/confirm-card.stories.tsx +0 -227
  60. package/src/elements/context-meter.stories.tsx +0 -151
  61. package/src/elements/conversation-list.declarative.test.tsx +0 -137
  62. package/src/elements/conversation-list.stories.tsx +0 -243
  63. package/src/elements/embed.stories.tsx +0 -213
  64. package/src/elements/empty.stories.tsx +0 -111
  65. package/src/elements/feedback-bar.stories.tsx +0 -114
  66. package/src/elements/file-tree.stories.tsx +0 -134
  67. package/src/elements/file-upload.stories.tsx +0 -82
  68. package/src/elements/form.stories.tsx +0 -248
  69. package/src/elements/image.stories.tsx +0 -71
  70. package/src/elements/link-preview.stories.tsx +0 -209
  71. package/src/elements/loader.stories.tsx +0 -88
  72. package/src/elements/markdown.stories.tsx +0 -76
  73. package/src/elements/message-skills.declarative.test.tsx +0 -104
  74. package/src/elements/message-skills.stories.tsx +0 -114
  75. package/src/elements/message.stories.tsx +0 -218
  76. package/src/elements/model-switcher.declarative.test.tsx +0 -130
  77. package/src/elements/model-switcher.stories.tsx +0 -198
  78. package/src/elements/popover.stories.tsx +0 -80
  79. package/src/elements/prompt-input-slash-command.test.tsx +0 -128
  80. package/src/elements/prompt-input-stoppable.test.tsx +0 -88
  81. package/src/elements/prompt-input-toolbar-actions.test.tsx +0 -120
  82. package/src/elements/prompt-input.stories.tsx +0 -331
  83. package/src/elements/prompt-suggestions.declarative.test.tsx +0 -164
  84. package/src/elements/prompt-suggestions.stories.tsx +0 -213
  85. package/src/elements/reasoning.stories.tsx +0 -77
  86. package/src/elements/remote.stories.tsx +0 -314
  87. package/src/elements/resizable.stories.tsx +0 -426
  88. package/src/elements/response-stream.stories.tsx +0 -79
  89. package/src/elements/scroll-button.stories.tsx +0 -202
  90. package/src/elements/scroll-button.test.tsx +0 -148
  91. package/src/elements/source-list.stories.tsx +0 -143
  92. package/src/elements/source.stories.tsx +0 -88
  93. package/src/elements/switch.stories.tsx +0 -56
  94. package/src/elements/tasks.stories.tsx +0 -237
  95. package/src/elements/text-shimmer.stories.tsx +0 -64
  96. package/src/elements/thinking-bar.stories.tsx +0 -72
  97. package/src/elements/tool.stories.tsx +0 -89
  98. package/src/elements/voice-input.stories.tsx +0 -88
  99. package/src/primitives/controllable.test.ts +0 -47
  100. package/src/stories/chat-panel-layout.stories.tsx +0 -145
  101. package/src/stories/chat-scene.tsx +0 -571
  102. package/src/stories/checkpoint-restore.stories.tsx +0 -256
  103. package/src/stories/context-usage.stories.tsx +0 -212
  104. package/src/stories/conversation-with-reasoning.stories.tsx +0 -182
  105. package/src/stories/conversation-with-sources.stories.tsx +0 -471
  106. package/src/stories/docs/Accessibility.mdx +0 -119
  107. package/src/stories/docs/ChildElements.mdx +0 -269
  108. package/src/stories/docs/ForAIAgents.mdx +0 -162
  109. package/src/stories/docs/GettingStarted.mdx +0 -65
  110. package/src/stories/docs/Installation.mdx +0 -83
  111. package/src/stories/docs/Introduction.mdx +0 -50
  112. package/src/stories/docs/SolidJsAdvanced.mdx +0 -17
  113. package/src/stories/docs/Theming.mdx +0 -85
  114. package/src/stories/docs/element-controls.ts +0 -121
  115. package/src/stories/docs/frameworks/Angular.mdx +0 -245
  116. package/src/stories/docs/frameworks/Html.mdx +0 -227
  117. package/src/stories/docs/frameworks/Overview.mdx +0 -47
  118. package/src/stories/docs/frameworks/React.mdx +0 -227
  119. package/src/stories/docs/frameworks/Solid.mdx +0 -173
  120. package/src/stories/docs/frameworks/Svelte.mdx +0 -194
  121. package/src/stories/docs/frameworks/Vue.mdx +0 -238
  122. package/src/stories/docs/generative-ui-overview.mdx +0 -186
  123. package/src/stories/docs/recipes/SpeechToText.mdx +0 -7
  124. package/src/stories/docs/recipes/Streaming.mdx +0 -68
  125. package/src/stories/docs/recipes/TextToSpeech.mdx +0 -35
  126. package/src/stories/docs/theme-editor/canvas.tsx +0 -32
  127. package/src/stories/docs/theme-editor/inspector.tsx +0 -66
  128. package/src/stories/docs/theme-editor/presets.test.ts +0 -32
  129. package/src/stories/docs/theme-editor/presets.ts +0 -64
  130. package/src/stories/docs/theme-editor/theme-css.test.ts +0 -19
  131. package/src/stories/docs/theme-editor/theme-css.ts +0 -15
  132. package/src/stories/docs/theme-editor/theme-editor.tsx +0 -146
  133. package/src/stories/docs/theme-tokens.tsx +0 -174
  134. package/src/stories/examples/ChoosingComponents.mdx +0 -106
  135. package/src/stories/examples/sample-data.ts +0 -79
  136. package/src/stories/examples/usage/checkpoint-restore.ts +0 -156
  137. package/src/stories/examples/usage/context-usage.ts +0 -591
  138. package/src/stories/examples/usage/conversation-with-reasoning.ts +0 -224
  139. package/src/stories/examples/usage/conversation-with-sources.ts +0 -589
  140. package/src/stories/examples/usage/empty-state.ts +0 -144
  141. package/src/stories/examples/usage/full-chat-app.ts +0 -277
  142. package/src/stories/examples/usage/index.ts +0 -63
  143. package/src/stories/examples/usage/message-actions.ts +0 -704
  144. package/src/stories/examples/usage/pattern-centered-conversation.ts +0 -446
  145. package/src/stories/examples/usage/pattern-chat-panel-layout.ts +0 -442
  146. package/src/stories/examples/usage/pattern-docked-widget.ts +0 -479
  147. package/src/stories/examples/usage/prompt-input-variants.ts +0 -1356
  148. package/src/stories/examples/usage/streaming-response.ts +0 -687
  149. package/src/stories/examples/usage/types.ts +0 -33
  150. package/src/stories/full-chat.stories.tsx +0 -18
  151. package/src/stories/message-actions.stories.tsx +0 -230
  152. package/src/stories/pattern-centered-conversation.stories.tsx +0 -93
  153. package/src/stories/pattern-docked-widget.stories.tsx +0 -93
  154. package/src/stories/pattern-empty-state.stories.tsx +0 -76
  155. package/src/stories/prompt-input-variants.stories.tsx +0 -456
  156. package/src/stories/streaming-response.stories.tsx +0 -438
  157. package/src/stories/theme-editor.stories.tsx +0 -16
  158. package/src/stories/token-reference.stories.tsx +0 -18
  159. package/src/stories/typography.stories.tsx +0 -78
  160. package/src/ui/avatar.stories.tsx +0 -103
  161. package/src/ui/badge.stories.tsx +0 -86
  162. package/src/ui/button.stories.tsx +0 -145
  163. package/src/ui/collapsible.stories.tsx +0 -69
  164. package/src/ui/dropdown.stories.tsx +0 -59
  165. package/src/ui/hover-card.stories.tsx +0 -77
  166. package/src/ui/hover-card.test.tsx +0 -30
  167. package/src/ui/overlay.stories.tsx +0 -115
  168. package/src/ui/popover.stories.tsx +0 -81
  169. package/src/ui/popover.test.tsx +0 -99
  170. package/src/ui/resizable.stories.tsx +0 -236
  171. package/src/ui/scroll-area.stories.tsx +0 -50
  172. package/src/ui/separator.stories.tsx +0 -81
  173. package/src/ui/skeleton.stories.tsx +0 -337
  174. package/src/ui/switch.stories.tsx +0 -51
  175. package/src/ui/switch.test.tsx +0 -59
  176. package/src/ui/textarea.stories.tsx +0 -76
  177. 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
- };