@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-centered-conversation.ts DELETED
@@ -1,446 +0,0 @@
1
- import type { ExampleUsage, StoryUsage } from './types';
2
-
3
- /**
4
- * Focused — full-window, single-column reading layout (Claude.ai-style).
5
- * A `max-w` measure centered in the viewport; user messages right-aligned,
6
- * assistant messages left-aligned, composer pinned below.
7
- */
8
- const focused: StoryUsage = {
9
- intro:
10
- 'Use **Centered Conversation** for a full-window, distraction-free chat — the Claude.ai layout. A `max-w` reading column is centered in the viewport: user messages align right inside pill bubbles, assistant responses align left with markdown + hover action bar, and the `PromptInput` composer is pinned to the bottom, also constrained to the same max-width. Prefer this over the Chat Panel Layout when the chat *is* the page, not a widget embedded inside one.',
11
- snippets: {
12
- html: `<!-- Register the elements once (CDN or bundler) -->
13
- <script type="module">
14
- import 'https://cdn.jsdelivr.net/npm/@kitn.ai/ui/dist/kitn-chat.es.js';
15
- </script>
16
-
17
- <!-- Outer shell: full-height flex column, rounded card for demo; in
18
- production this is typically the <body> / a top-level <main>. -->
19
- <div class="flex flex-col overflow-hidden bg-background" style="height:100dvh">
20
-
21
- <!-- Optional header (model switcher, title, etc.) -->
22
- <header class="flex h-14 shrink-0 items-center justify-between border-b px-5">
23
- <span class="text-sm font-semibold">New conversation</span>
24
- </header>
25
-
26
- <!-- Scrollable message area -->
27
- <kai-chat-container id="thread" class="relative flex-1 overflow-y-auto">
28
- <div class="space-y-6 px-5 py-6">
29
-
30
- <!-- User message: right-aligned pill bubble -->
31
- <kai-message class="mx-auto flex w-full max-w-2xl flex-col items-end">
32
- <kai-message-content
33
- class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5"
34
- >Why is SolidJS reactivity fast?</kai-message-content>
35
- </kai-message>
36
-
37
- <!-- Assistant message: left-aligned, markdown prose + hover actions -->
38
- <kai-message class="mx-auto flex w-full max-w-2xl flex-col items-start">
39
- <div class="group flex w-full flex-col">
40
- <kai-message-content markdown class="bg-transparent p-0 text-foreground">
41
- Signals are fine-grained — only the DOM nodes that read a signal update.
42
- </kai-message-content>
43
- <kai-message-actions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity group-hover:opacity-100">
44
- <button aria-label="Copy message"><!-- icon --></button>
45
- <button aria-label="Good response"><!-- icon --></button>
46
- </kai-message-actions>
47
- </div>
48
- </kai-message>
49
-
50
- </div>
51
- </kai-chat-container>
52
-
53
- <!-- Composer: same max-width as messages, pinned to bottom -->
54
- <div class="shrink-0 px-5 pb-5">
55
- <div class="mx-auto max-w-2xl">
56
- <kai-prompt-input id="composer">
57
- <kai-prompt-input-textarea placeholder="Reply…"></kai-prompt-input-textarea>
58
- <kai-prompt-input-actions class="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
59
- <button aria-label="Send message"><!-- icon --></button>
60
- </kai-prompt-input-actions>
61
- </kai-prompt-input>
62
- </div>
63
- </div>
64
- </div>
65
-
66
- <script type="module">
67
- document.getElementById('composer').addEventListener('kai-submit', (e) => {
68
- console.log('send', e.detail.value);
69
- });
70
- </script>`,
71
-
72
- react: `import { useState } from 'react';
73
- import {
74
- ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor,
75
- Message, MessageContent, MessageActions,
76
- PromptInput, PromptInputTextarea, PromptInputActions,
77
- Button,
78
- } from '@kitn.ai/ui/react';
79
-
80
- /**
81
- * Centered Conversation — full-window single reading column.
82
- * User messages right-aligned; assistant messages left-aligned with
83
- * markdown + hover actions. Composer constrained to the same max-width.
84
- */
85
- export function CenteredConversation() {
86
- const [input, setInput] = useState('');
87
-
88
- return (
89
- <ChatConfig proseSize="base">
90
- <div className="flex h-dvh flex-col overflow-hidden bg-background">
91
- {/* Optional header */}
92
- <header className="flex h-14 shrink-0 items-center border-b px-5">
93
- <span className="text-sm font-semibold">New conversation</span>
94
- </header>
95
-
96
- {/* Scrollable thread */}
97
- <div className="relative flex-1 overflow-y-auto">
98
- <ChatContainer className="h-full">
99
- <ChatContainerContent className="space-y-6 px-5 py-6">
100
- {/* User message — right-aligned bubble */}
101
- <Message className="mx-auto flex w-full max-w-2xl flex-col items-end">
102
- <MessageContent className="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
103
- Why is SolidJS reactivity fast?
104
- </MessageContent>
105
- </Message>
106
-
107
- {/* Assistant message — left-aligned with hover actions */}
108
- <Message className="mx-auto flex w-full max-w-2xl flex-col items-start">
109
- <div className="group flex w-full flex-col">
110
- <MessageContent markdown className="bg-transparent p-0 text-foreground">
111
- Signals are fine-grained — only the DOM nodes that read a signal update.
112
- </MessageContent>
113
- <MessageActions className="-ml-2.5 flex gap-0 opacity-0 transition-opacity group-hover:opacity-100">
114
- <Button variant="ghost" size="icon-sm" className="rounded-full" aria-label="Copy">
115
- {/* icon */}
116
- </Button>
117
- </MessageActions>
118
- </div>
119
- </Message>
120
- <ChatContainerScrollAnchor />
121
- </ChatContainerContent>
122
- </ChatContainer>
123
- </div>
124
-
125
- {/* Composer — same max-width as messages */}
126
- <div className="shrink-0 px-5 pb-5">
127
- <div className="mx-auto max-w-2xl">
128
- <PromptInput value={input} onValueChange={setInput} onSubmit={() => setInput('')}>
129
- <PromptInputTextarea placeholder="Reply…" className="min-h-[44px] pt-3 pl-4" />
130
- <PromptInputActions className="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
131
- <Button size="icon-sm" className="rounded-full" disabled={!input.trim()} aria-label="Send">
132
- {/* icon */}
133
- </Button>
134
- </PromptInputActions>
135
- </PromptInput>
136
- </div>
137
- </div>
138
- </div>
139
- </ChatConfig>
140
- );
141
- }`,
142
-
143
- vue: `<script setup>
144
- import '@kitn.ai/ui/elements';
145
- import { ref } from 'vue';
146
-
147
- const input = ref('');
148
-
149
- function onSubmit(e) {
150
- console.log('send', e.detail.value);
151
- input.value = '';
152
- }
153
- </script>
154
-
155
- <!--
156
- Centered Conversation — full-window single reading column.
157
- User messages right-aligned; assistant messages left-aligned with
158
- markdown + hover actions. Composer constrained to the same max-width.
159
- -->
160
- <template>
161
- <div class="flex h-dvh flex-col overflow-hidden bg-background">
162
-
163
- <!-- Optional header -->
164
- <header class="flex h-14 shrink-0 items-center border-b px-5">
165
- <span class="text-sm font-semibold">New conversation</span>
166
- </header>
167
-
168
- <!-- Scrollable thread -->
169
- <kai-chat-container class="relative flex-1 overflow-y-auto">
170
- <div class="space-y-6 px-5 py-6">
171
-
172
- <!-- User message — right-aligned bubble -->
173
- <kai-message class="mx-auto flex w-full max-w-2xl flex-col items-end">
174
- <kai-message-content class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
175
- Why is SolidJS reactivity fast?
176
- </kai-message-content>
177
- </kai-message>
178
-
179
- <!-- Assistant message — left-aligned, markdown, hover actions -->
180
- <kai-message class="mx-auto flex w-full max-w-2xl flex-col items-start">
181
- <div class="group flex w-full flex-col">
182
- <kai-message-content markdown class="bg-transparent p-0 text-foreground">
183
- Signals are fine-grained — only the DOM nodes that read a signal update.
184
- </kai-message-content>
185
- <kai-message-actions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity group-hover:opacity-100">
186
- <button aria-label="Copy"><!-- icon --></button>
187
- </kai-message-actions>
188
- </div>
189
- </kai-message>
190
-
191
- </div>
192
- </kai-chat-container>
193
-
194
- <!-- Composer — same max-width as messages -->
195
- <div class="shrink-0 px-5 pb-5">
196
- <div class="mx-auto max-w-2xl">
197
- <kai-prompt-input
198
- :value="input"
199
- @kai-value-change="input = $event.detail.value"
200
- @kai-submit="onSubmit"
201
- >
202
- <kai-prompt-input-textarea placeholder="Reply…"></kai-prompt-input-textarea>
203
- <kai-prompt-input-actions class="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
204
- <button :disabled="!input.trim()" aria-label="Send"><!-- icon --></button>
205
- </kai-prompt-input-actions>
206
- </kai-prompt-input>
207
- </div>
208
- </div>
209
- </div>
210
- </template>`,
211
-
212
- svelte: `<script>
213
- import '@kitn.ai/ui/elements';
214
- let input = '';
215
- </script>
216
-
217
- <!--
218
- Centered Conversation — full-window single reading column.
219
- User messages right-aligned; assistant messages left-aligned with
220
- markdown + hover actions. Composer constrained to the same max-width.
221
- -->
222
- <div class="flex h-dvh flex-col overflow-hidden bg-background">
223
-
224
- <!-- Optional header -->
225
- <header class="flex h-14 shrink-0 items-center border-b px-5">
226
- <span class="text-sm font-semibold">New conversation</span>
227
- </header>
228
-
229
- <!-- Scrollable thread -->
230
- <kai-chat-container class="relative flex-1 overflow-y-auto">
231
- <div class="space-y-6 px-5 py-6">
232
-
233
- <!-- User message — right-aligned bubble -->
234
- <kai-message class="mx-auto flex w-full max-w-2xl flex-col items-end">
235
- <kai-message-content class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
236
- Why is SolidJS reactivity fast?
237
- </kai-message-content>
238
- </kai-message>
239
-
240
- <!-- Assistant message — left-aligned, markdown, hover actions -->
241
- <kai-message class="mx-auto flex w-full max-w-2xl flex-col items-start">
242
- <div class="group flex w-full flex-col">
243
- <kai-message-content markdown class="bg-transparent p-0 text-foreground">
244
- Signals are fine-grained — only the DOM nodes that read a signal update.
245
- </kai-message-content>
246
- <kai-message-actions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity group-hover:opacity-100">
247
- <button aria-label="Copy"><!-- icon --></button>
248
- </kai-message-actions>
249
- </div>
250
- </kai-message>
251
-
252
- </div>
253
- </kai-chat-container>
254
-
255
- <!-- Composer — same max-width as messages -->
256
- <div class="shrink-0 px-5 pb-5">
257
- <div class="mx-auto max-w-2xl">
258
- <kai-prompt-input
259
- value={input}
260
- on:kai-value-change={(e) => (input = e.detail.value)}
261
- on:kai-submit={() => (input = '')}
262
- >
263
- <kai-prompt-input-textarea placeholder="Reply…"></kai-prompt-input-textarea>
264
- <kai-prompt-input-actions class="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
265
- <button disabled={!input.trim()} aria-label="Send"><!-- icon --></button>
266
- </kai-prompt-input-actions>
267
- </kai-prompt-input>
268
- </div>
269
- </div>
270
- </div>`,
271
-
272
- angular: `// main.ts: import '@kitn.ai/ui/elements' before bootstrapApplication,
273
- // and add CUSTOM_ELEMENTS_SCHEMA to the component.
274
- import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
275
- import { FormsModule } from '@angular/forms';
276
-
277
- /**
278
- * Centered Conversation — full-window single reading column.
279
- * User messages right-aligned; assistant messages left-aligned with
280
- * markdown + hover actions. Composer constrained to the same max-width.
281
- */
282
- @Component({
283
- selector: 'app-centered-conversation',
284
- standalone: true,
285
- imports: [FormsModule],
286
- schemas: [CUSTOM_ELEMENTS_SCHEMA],
287
- template: \`
288
- <div class="flex h-dvh flex-col overflow-hidden bg-background">
289
-
290
- <!-- Optional header -->
291
- <header class="flex h-14 shrink-0 items-center border-b px-5">
292
- <span class="text-sm font-semibold">New conversation</span>
293
- </header>
294
-
295
- <!-- Scrollable thread -->
296
- <kai-chat-container class="relative flex-1 overflow-y-auto">
297
- <div class="space-y-6 px-5 py-6">
298
-
299
- <!-- User message — right-aligned bubble -->
300
- <kai-message class="mx-auto flex w-full max-w-2xl flex-col items-end">
301
- <kai-message-content class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
302
- Why is SolidJS reactivity fast?
303
- </kai-message-content>
304
- </kai-message>
305
-
306
- <!-- Assistant message — left-aligned, markdown, hover actions -->
307
- <kai-message class="mx-auto flex w-full max-w-2xl flex-col items-start">
308
- <div class="group flex w-full flex-col">
309
- <kai-message-content markdown class="bg-transparent p-0 text-foreground">
310
- Signals are fine-grained — only the DOM nodes that read a signal update.
311
- </kai-message-content>
312
- <kai-message-actions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity group-hover:opacity-100">
313
- <button aria-label="Copy"><!-- icon --></button>
314
- </kai-message-actions>
315
- </div>
316
- </kai-message>
317
-
318
- </div>
319
- </kai-chat-container>
320
-
321
- <!-- Composer — same max-width as messages -->
322
- <div class="shrink-0 px-5 pb-5">
323
- <div class="mx-auto max-w-2xl">
324
- <kai-prompt-input
325
- [value]="input"
326
- (kai-value-change)="input = $event.detail.value"
327
- (kai-submit)="input = ''"
328
- >
329
- <kai-prompt-input-textarea placeholder="Reply…"></kai-prompt-input-textarea>
330
- <kai-prompt-input-actions class="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
331
- <button [disabled]="!input.trim()" aria-label="Send"><!-- icon --></button>
332
- </kai-prompt-input-actions>
333
- </kai-prompt-input>
334
- </div>
335
- </div>
336
- </div>
337
- \`,
338
- })
339
- export class CenteredConversationComponent {
340
- input = '';
341
- }`,
342
-
343
- solid: `import { createSignal } from 'solid-js';
344
- import {
345
- ChatConfig, ChatContainer, ChatContainerContent, ChatContainerScrollAnchor,
346
- Message, MessageContent, MessageActions,
347
- PromptInput, PromptInputTextarea, PromptInputActions,
348
- ModelSwitcher, Button,
349
- } from '@kitn.ai/ui';
350
- import type { ModelOption } from '@kitn.ai/ui';
351
- import { Copy, ThumbsUp, ArrowUp } from 'lucide-solid';
352
-
353
- const models: ModelOption[] = [
354
- { id: 'claude-4', name: 'Claude 4 Opus', provider: 'Anthropic' },
355
- { id: 'gpt-4o', name: 'GPT-4o', provider: 'OpenAI' },
356
- ];
357
-
358
- /**
359
- * Centered Conversation — full-window single reading column.
360
- * User messages right-aligned; assistant messages left-aligned with
361
- * markdown + hover actions. Composer constrained to the same max-width.
362
- */
363
- export function CenteredConversation() {
364
- const [input, setInput] = createSignal('');
365
- const [model, setModel] = createSignal('claude-4');
366
-
367
- return (
368
- <ChatConfig proseSize="base">
369
- <div class="flex h-dvh flex-col overflow-hidden bg-background">
370
-
371
- {/* Optional header */}
372
- <header class="flex h-14 shrink-0 items-center justify-between border-b border-border px-5">
373
- <span class="text-sm font-semibold text-foreground">New conversation</span>
374
- <ModelSwitcher models={models} currentModelId={model()} onModelChange={setModel} />
375
- </header>
376
-
377
- {/* Scrollable thread */}
378
- <div class="relative flex-1 overflow-y-auto">
379
- <ChatContainer class="h-full">
380
- <ChatContainerContent class="space-y-6 px-5 py-6">
381
-
382
- {/* User message — right-aligned bubble */}
383
- <Message class="mx-auto flex w-full max-w-2xl flex-col items-end">
384
- <MessageContent class="bg-muted text-primary max-w-[85%] rounded-3xl px-5 py-2.5">
385
- Why is SolidJS reactivity fast?
386
- </MessageContent>
387
- </Message>
388
-
389
- {/* Assistant message — left-aligned, markdown, hover actions */}
390
- <Message class="mx-auto flex w-full max-w-2xl flex-col items-start">
391
- <div class="group flex w-full flex-col">
392
- <MessageContent markdown class="bg-transparent p-0 text-foreground">
393
- Signals are fine-grained — only the DOM nodes that read a signal update.
394
- </MessageContent>
395
- <MessageActions class="-ml-2.5 flex gap-0 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
396
- <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Copy message">
397
- <Copy class="size-3.5" />
398
- </Button>
399
- <Button variant="ghost" size="icon-sm" class="rounded-full" aria-label="Good response">
400
- <ThumbsUp class="size-3.5" />
401
- </Button>
402
- </MessageActions>
403
- </div>
404
- </Message>
405
-
406
- <ChatContainerScrollAnchor />
407
- </ChatContainerContent>
408
- </ChatContainer>
409
- </div>
410
-
411
- {/* Composer — constrained to the same max-width as messages */}
412
- <div class="shrink-0 px-5 pb-5">
413
- <div class="mx-auto max-w-2xl">
414
- <PromptInput value={input()} onValueChange={setInput} onSubmit={() => setInput('')}>
415
- <PromptInputTextarea placeholder="Reply…" class="min-h-[44px] pt-3 pl-4" />
416
- <PromptInputActions class="mt-2 flex w-full items-center justify-end gap-2 px-3 pb-3">
417
- <Button size="icon-sm" class="rounded-full" disabled={!input().trim()} aria-label="Send message">
418
- <ArrowUp class="size-4" />
419
- </Button>
420
- </PromptInputActions>
421
- </PromptInput>
422
- </div>
423
- </div>
424
- </div>
425
- </ChatConfig>
426
- );
427
- }`,
428
- },
429
- };
430
-
431
- /**
432
- * Pattern: Centered Conversation — full-window, single-column reading layout
433
- * (Claude.ai-style). `max-w` measure centered in the viewport; user bubbles
434
- * right-aligned, assistant prose left-aligned with hover action bar, composer
435
- * pinned to the bottom. Per-story: the Usage tab shows the snippet for the
436
- * story you're on; the example-level fields below are the fallback.
437
- */
438
- const centeredConversation: ExampleUsage = {
439
- title: 'Patterns/Centered Conversation',
440
- ...focused,
441
- stories: {
442
- Focused: focused,
443
- },
444
- };
445
-
446
- export default centeredConversation;