@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/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;