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