@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/stories/examples/usage/pattern-docked-widget.ts DELETED
@@ -1,479 +0,0 @@
1
- import type { ExampleUsage, StoryUsage } from './types';
2
-
3
- /**
4
- * Support Assistant — a compact chat bubble docked to the bottom-right corner
5
- * of the host page, absolutely positioned over any app content.
6
- */
7
- const supportAssistant: StoryUsage = {
8
- intro:
9
- 'Use **Docked Widget** for a support or assistant chat that floats over any page — the classic bottom-right widget. The widget is an absolutely-positioned card (`position:absolute; bottom:…; right:…`) layered over a relative-positioned host wrapper. Same `ChatContainer` + `Message` + `PromptInput` building blocks as the other patterns, just smaller (`proseSize="sm"`, compact padding) and sized to ~360 × 460 px. Shadow-DOM isolation means zero CSS bleed onto the host page.',
10
- snippets: {
11
- html: `<!-- Register the elements once (CDN or bundler) -->
12
- <script type="module">
13
- import 'https://cdn.jsdelivr.net/npm/@kitn.ai/ui/dist/kitn-chat.es.js';
14
- </script>
15
-
16
- <!--
17
- Docked Widget — position this relative wrapper at the page / app root.
18
- In production the host wrapper is typically <body> or a top-level <div>.
19
- -->
20
- <div class="relative" style="height:100dvh; overflow:hidden">
21
-
22
- <!-- Your page content here -->
23
- <main><!-- ... --></main>
24
-
25
- <!-- Widget: absolutely docked to the bottom-right corner -->
26
- <div id="chat-widget"
27
- class="absolute bottom-5 right-5 flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl"
28
- style="width:360px; height:460px">
29
-
30
- <!-- Widget header -->
31
- <header class="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3">
32
- <div class="flex items-center gap-2">
33
- <span class="size-2 rounded-full bg-green-500"></span>
34
- <span class="text-sm font-semibold">Support</span>
35
- </div>
36
- <button aria-label="Close widget"><!-- × icon --></button>
37
- </header>
38
-
39
- <!-- Scrollable thread -->
40
- <div class="relative flex-1 overflow-y-auto">
41
- <kai-chat-container class="h-full">
42
- <div class="space-y-3 px-3 py-3">
43
-
44
- <!-- Assistant greeting -->
45
- <kai-message>
46
- <kai-message-avatar src="" alt="AI" fallback="AI"></kai-message-avatar>
47
- <kai-message-content markdown class="bg-transparent p-0 pt-1">
48
- Hi! 👋 How can I help you today?
49
- </kai-message-content>
50
- </kai-message>
51
-
52
- <!-- User message -->
53
- <kai-message class="flex-col items-end">
54
- <kai-message-content class="bg-muted text-primary max-w-[85%] rounded-xl px-3.5 py-2">
55
- How do I reset my password?
56
- </kai-message-content>
57
- </kai-message>
58
-
59
- <!-- Assistant reply -->
60
- <kai-message>
61
- <kai-message-avatar src="" alt="AI" fallback="AI"></kai-message-avatar>
62
- <kai-message-content markdown class="bg-transparent p-0 pt-1">
63
- Head to **Settings → Security** and click **Reset password**.
64
- </kai-message-content>
65
- </kai-message>
66
-
67
- </div>
68
- </kai-chat-container>
69
- </div>
70
-
71
- <!-- Composer -->
72
- <div class="flex-shrink-0 px-3 pb-3">
73
- <kai-prompt-input id="widget-composer">
74
- <kai-prompt-input-textarea placeholder="Message support…"></kai-prompt-input-textarea>
75
- <kai-prompt-input-actions class="mt-1.5 flex w-full items-center justify-end gap-2 px-2.5 pb-2.5">
76
- <button aria-label="Send"><!-- icon --></button>
77
- </kai-prompt-input-actions>
78
- </kai-prompt-input>
79
- </div>
80
- </div>
81
-
82
- </div>
83
-
84
- <script type="module">
85
- document.getElementById('widget-composer').addEventListener('kai-submit', (e) => {
86
- console.log('send', e.detail.value);
87
- });
88
- </script>`,
89
-
90
- react: `import { useState } from 'react';
91
- import {
92
- ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor,
93
- Message, MessageAvatar, MessageContent,
94
- PromptInput, PromptInputTextarea, PromptInputActions,
95
- Button,
96
- } from '@kitn.ai/ui/react';
97
-
98
- /**
99
- * Docked Widget — a compact chat bubble docked to the bottom-right of the page.
100
- * Render this inside a relative-positioned root wrapper so the absolute
101
- * positioning stays within your app boundary.
102
- */
103
- export function DockedWidget() {
104
- const [input, setInput] = useState('');
105
- const [open, setOpen] = useState(true);
106
-
107
- if (!open) return null;
108
-
109
- return (
110
- <ChatConfig proseSize="sm">
111
- {/* Widget: docked bottom-right — size to taste */}
112
- <div
113
- className="absolute bottom-5 right-5 flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl"
114
- style={{ width: 360, height: 460 }}
115
- >
116
- {/* Header */}
117
- <header className="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3">
118
- <div className="flex items-center gap-2">
119
- <span className="size-2 rounded-full bg-green-500" />
120
- <span className="text-sm font-semibold">Support</span>
121
- </div>
122
- <Button variant="ghost" size="icon-sm" onClick={() => setOpen(false)} aria-label="Close">
123
- {/* × icon */}
124
- </Button>
125
- </header>
126
-
127
- {/* Scrollable thread */}
128
- <div className="relative flex-1 overflow-y-auto">
129
- <ChatContainer className="h-full">
130
- <ChatContainerContent className="space-y-3 px-3 py-3">
131
- <Message>
132
- <MessageAvatar src="" alt="AI" fallback="AI" />
133
- <MessageContent markdown className="bg-transparent p-0 pt-1">
134
- Hi! 👋 How can I help you today?
135
- </MessageContent>
136
- </Message>
137
- <Message className="flex-col items-end">
138
- <MessageContent className="bg-muted text-primary max-w-[85%] rounded-xl px-3.5 py-2">
139
- How do I reset my password?
140
- </MessageContent>
141
- </Message>
142
- <Message>
143
- <MessageAvatar src="" alt="AI" fallback="AI" />
144
- <MessageContent markdown className="bg-transparent p-0 pt-1">
145
- Head to **Settings → Security** and click **Reset password**.
146
- </MessageContent>
147
- </Message>
148
- <ChatContainerScrollAnchor />
149
- </ChatContainerContent>
150
- </ChatContainer>
151
- </div>
152
-
153
- {/* Composer */}
154
- <div className="flex-shrink-0 px-3 pb-3">
155
- <PromptInput value={input} onValueChange={setInput} onSubmit={() => setInput('')}>
156
- <PromptInputTextarea placeholder="Message support…" className="min-h-[40px] pt-2.5 pl-3.5" />
157
- <PromptInputActions className="mt-1.5 flex w-full items-center justify-end gap-2 px-2.5 pb-2.5">
158
- <Button size="icon-sm" className="rounded-full" disabled={!input.trim()} aria-label="Send">
159
- {/* icon */}
160
- </Button>
161
- </PromptInputActions>
162
- </PromptInput>
163
- </div>
164
- </div>
165
- </ChatConfig>
166
- );
167
- }`,
168
-
169
- vue: `<script setup>
170
- import '@kitn.ai/ui/elements';
171
- import { ref } from 'vue';
172
-
173
- const input = ref('');
174
- const open = ref(true);
175
-
176
- function onSubmit(e) {
177
- console.log('send', e.detail.value);
178
- input.value = '';
179
- }
180
- </script>
181
-
182
- <!--
183
- Docked Widget — render inside a relative-positioned root.
184
- The widget is absolutely positioned to the bottom-right corner.
185
- -->
186
- <template>
187
- <div v-if="open"
188
- class="absolute bottom-5 right-5 flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl"
189
- style="width:360px; height:460px">
190
-
191
- <!-- Header -->
192
- <header class="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3">
193
- <div class="flex items-center gap-2">
194
- <span class="size-2 rounded-full bg-green-500"></span>
195
- <span class="text-sm font-semibold">Support</span>
196
- </div>
197
- <button @click="open = false" aria-label="Close"><!-- × --></button>
198
- </header>
199
-
200
- <!-- Scrollable thread -->
201
- <div class="relative flex-1 overflow-y-auto">
202
- <kai-chat-container class="h-full">
203
- <div class="space-y-3 px-3 py-3">
204
- <kai-message>
205
- <kai-message-avatar src="" alt="AI" fallback="AI"></kai-message-avatar>
206
- <kai-message-content markdown class="bg-transparent p-0 pt-1">
207
- Hi! 👋 How can I help you today?
208
- </kai-message-content>
209
- </kai-message>
210
- <kai-message class="flex-col items-end">
211
- <kai-message-content class="bg-muted text-primary max-w-[85%] rounded-xl px-3.5 py-2">
212
- How do I reset my password?
213
- </kai-message-content>
214
- </kai-message>
215
- <kai-message>
216
- <kai-message-avatar src="" alt="AI" fallback="AI"></kai-message-avatar>
217
- <kai-message-content markdown class="bg-transparent p-0 pt-1">
218
- Head to **Settings → Security** and click **Reset password**.
219
- </kai-message-content>
220
- </kai-message>
221
- </div>
222
- </kai-chat-container>
223
- </div>
224
-
225
- <!-- Composer -->
226
- <div class="flex-shrink-0 px-3 pb-3">
227
- <kai-prompt-input
228
- :value="input"
229
- @kai-value-change="input = $event.detail.value"
230
- @kai-submit="onSubmit"
231
- >
232
- <kai-prompt-input-textarea placeholder="Message support…"></kai-prompt-input-textarea>
233
- <kai-prompt-input-actions class="mt-1.5 flex w-full items-center justify-end gap-2 px-2.5 pb-2.5">
234
- <button :disabled="!input.trim()" aria-label="Send"><!-- icon --></button>
235
- </kai-prompt-input-actions>
236
- </kai-prompt-input>
237
- </div>
238
-
239
- </div>
240
- </template>`,
241
-
242
- svelte: `<script>
243
- import '@kitn.ai/ui/elements';
244
- let input = '';
245
- let open = true;
246
- </script>
247
-
248
- <!--
249
- Docked Widget — render inside a relative-positioned root.
250
- The widget is absolutely positioned to the bottom-right corner.
251
- -->
252
- {#if open}
253
- <div class="absolute bottom-5 right-5 flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl"
254
- style="width:360px; height:460px">
255
-
256
- <!-- Header -->
257
- <header class="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3">
258
- <div class="flex items-center gap-2">
259
- <span class="size-2 rounded-full bg-green-500"></span>
260
- <span class="text-sm font-semibold">Support</span>
261
- </div>
262
- <button on:click={() => (open = false)} aria-label="Close"><!-- × --></button>
263
- </header>
264
-
265
- <!-- Scrollable thread -->
266
- <div class="relative flex-1 overflow-y-auto">
267
- <kai-chat-container class="h-full">
268
- <div class="space-y-3 px-3 py-3">
269
- <kai-message>
270
- <kai-message-avatar src="" alt="AI" fallback="AI"></kai-message-avatar>
271
- <kai-message-content markdown class="bg-transparent p-0 pt-1">
272
- Hi! 👋 How can I help you today?
273
- </kai-message-content>
274
- </kai-message>
275
- <kai-message class="flex-col items-end">
276
- <kai-message-content class="bg-muted text-primary max-w-[85%] rounded-xl px-3.5 py-2">
277
- How do I reset my password?
278
- </kai-message-content>
279
- </kai-message>
280
- <kai-message>
281
- <kai-message-avatar src="" alt="AI" fallback="AI"></kai-message-avatar>
282
- <kai-message-content markdown class="bg-transparent p-0 pt-1">
283
- Head to **Settings → Security** and click **Reset password**.
284
- </kai-message-content>
285
- </kai-message>
286
- </div>
287
- </kai-chat-container>
288
- </div>
289
-
290
- <!-- Composer -->
291
- <div class="flex-shrink-0 px-3 pb-3">
292
- <kai-prompt-input
293
- value={input}
294
- on:kai-value-change={(e) => (input = e.detail.value)}
295
- on:kai-submit={() => (input = '')}
296
- >
297
- <kai-prompt-input-textarea placeholder="Message support…"></kai-prompt-input-textarea>
298
- <kai-prompt-input-actions class="mt-1.5 flex w-full items-center justify-end gap-2 px-2.5 pb-2.5">
299
- <button disabled={!input.trim()} aria-label="Send"><!-- icon --></button>
300
- </kai-prompt-input-actions>
301
- </kai-prompt-input>
302
- </div>
303
-
304
- </div>
305
- {/if}`,
306
-
307
- angular: `// main.ts: import '@kitn.ai/ui/elements' before bootstrapApplication,
308
- // and add CUSTOM_ELEMENTS_SCHEMA to the component.
309
- import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
310
- import { NgIf } from '@angular/common';
311
-
312
- /**
313
- * Docked Widget — a compact chat bubble docked to the bottom-right.
314
- * Render inside a relative-positioned host so absolute positioning works.
315
- */
316
- @Component({
317
- selector: 'app-docked-widget',
318
- standalone: true,
319
- imports: [NgIf],
320
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
321
- styles: [':host { display: contents; }'],
322
- template: \`
323
- <div *ngIf="open"
324
- class="absolute bottom-5 right-5 flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl"
325
- style="width:360px; height:460px">
326
-
327
- <!-- Header -->
328
- <header class="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3">
329
- <div class="flex items-center gap-2">
330
- <span class="size-2 rounded-full bg-green-500"></span>
331
- <span class="text-sm font-semibold">Support</span>
332
- </div>
333
- <button (click)="open = false" aria-label="Close"><!-- × --></button>
334
- </header>
335
-
336
- <!-- Scrollable thread -->
337
- <div class="relative flex-1 overflow-y-auto">
338
- <kai-chat-container class="h-full">
339
- <div class="space-y-3 px-3 py-3">
340
- <kai-message>
341
- <kai-message-avatar src="" alt="AI" fallback="AI"></kai-message-avatar>
342
- <kai-message-content markdown class="bg-transparent p-0 pt-1">
343
- Hi! How can I help you today?
344
- </kai-message-content>
345
- </kai-message>
346
- <kai-message class="flex-col items-end">
347
- <kai-message-content class="bg-muted text-primary max-w-[85%] rounded-xl px-3.5 py-2">
348
- How do I reset my password?
349
- </kai-message-content>
350
- </kai-message>
351
- <kai-message>
352
- <kai-message-avatar src="" alt="AI" fallback="AI"></kai-message-avatar>
353
- <kai-message-content markdown class="bg-transparent p-0 pt-1">
354
- Head to **Settings → Security** and click **Reset password**.
355
- </kai-message-content>
356
- </kai-message>
357
- </div>
358
- </kai-chat-container>
359
- </div>
360
-
361
- <!-- Composer -->
362
- <div class="flex-shrink-0 px-3 pb-3">
363
- <kai-prompt-input
364
- [value]="input"
365
- (kai-value-change)="input = $event.detail.value"
366
- (kai-submit)="input = ''"
367
- >
368
- <kai-prompt-input-textarea placeholder="Message support…"></kai-prompt-input-textarea>
369
- <kai-prompt-input-actions class="mt-1.5 flex w-full items-center justify-end gap-2 px-2.5 pb-2.5">
370
- <button [disabled]="!input.trim()" aria-label="Send"><!-- icon --></button>
371
- </kai-prompt-input-actions>
372
- </kai-prompt-input>
373
- </div>
374
-
375
- </div>
376
- \`,
377
- })
378
- export class DockedWidgetComponent {
379
- open = true;
380
- input = '';
381
- }`,
382
-
383
- solid: `import { createSignal } from 'solid-js';
384
- import {
385
- ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor,
386
- Message, MessageAvatar, MessageContent,
387
- PromptInput, PromptInputTextarea, PromptInputActions,
388
- Button,
389
- } from '@kitn.ai/ui';
390
- import { ArrowUp, X } from 'lucide-solid';
391
-
392
- /**
393
- * Docked Widget — a compact support assistant docked to the bottom-right.
394
- * Render this inside a relative-positioned host element.
395
- * proseSize="sm" gives tighter line-heights suitable for the compact size.
396
- */
397
- export function DockedWidget() {
398
- const [input, setInput] = createSignal('');
399
- const [open, setOpen] = createSignal(true);
400
-
401
- return (
402
- <ChatConfig proseSize="sm">
403
- {/* Widget: absolutely docked — size to taste */}
404
- <div
405
- style={{ width: '360px', height: '460px' }}
406
- class="absolute bottom-5 right-5 flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-xl"
407
- >
408
- {/* Header */}
409
- <header class="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
410
- <div class="flex items-center gap-2">
411
- <span class="size-2 rounded-full bg-green-500" />
412
- <span class="text-sm font-semibold text-foreground">Support</span>
413
- </div>
414
- <Button variant="ghost" size="icon-sm" onClick={() => setOpen(false)} aria-label="Close">
415
- <X class="size-4" />
416
- </Button>
417
- </header>
418
-
419
- {/* Scrollable thread */}
420
- <div class="relative flex-1 overflow-y-auto">
421
- <ChatContainer class="h-full">
422
- <ChatContainerContent class="space-y-3 px-3 py-3">
423
- <Message>
424
- <MessageAvatar src="" alt="AI" fallback="AI" />
425
- <MessageContent markdown class="bg-transparent p-0 pt-1">
426
- Hi! 👋 How can I help you today?
427
- </MessageContent>
428
- </Message>
429
- <Message class="flex-col items-end">
430
- <MessageContent class="bg-muted text-primary max-w-[85%] rounded-xl px-3.5 py-2">
431
- How do I reset my password?
432
- </MessageContent>
433
- </Message>
434
- <Message>
435
- <MessageAvatar src="" alt="AI" fallback="AI" />
436
- <MessageContent markdown class="bg-transparent p-0 pt-1">
437
- Head to **Settings → Security** and click **Reset password**.
438
- </MessageContent>
439
- </Message>
440
- <ChatContainerScrollAnchor />
441
- </ChatContainerContent>
442
- </ChatContainer>
443
- </div>
444
-
445
- {/* Composer */}
446
- <div class="shrink-0 px-3 pb-3">
447
- <PromptInput value={input()} onValueChange={setInput} onSubmit={() => setInput('')}>
448
- <PromptInputTextarea placeholder="Message support…" class="min-h-[40px] pt-2.5 pl-3.5" />
449
- <PromptInputActions class="mt-1.5 flex w-full items-center justify-end gap-2 px-2.5 pb-2.5">
450
- <Button size="icon-sm" class="rounded-full" disabled={!input().trim()} aria-label="Send message">
451
- <ArrowUp class="size-4" />
452
- </Button>
453
- </PromptInputActions>
454
- </PromptInput>
455
- </div>
456
- </div>
457
- </ChatConfig>
458
- );
459
- }`,
460
- },
461
- };
462
-
463
- /**
464
- * Pattern: Docked Widget — a compact floating assistant docked to the
465
- * bottom-right corner of the host page. Same building blocks as the other
466
- * patterns (`ChatContainer` + `Message` + `PromptInput`) at compact sizing;
467
- * absolutely positioned over the host so zero CSS bleed. Per-story: the Usage
468
- * tab shows the snippet for the story you're on; the example-level fields below
469
- * are the fallback.
470
- */
471
- const dockedWidget: ExampleUsage = {
472
- title: 'Patterns/Docked Widget',
473
- ...supportAssistant,
474
- stories: {
475
- 'Support Assistant': supportAssistant,
476
- },
477
- };
478
-
479
- export default dockedWidget;