@kitn.ai/ui 0.15.0 → 0.16.0

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 (366) hide show
  1. package/README.md +9 -0
  2. package/bin/mcp.js +22 -0
  3. package/dist/bash-InADTalH.js +6 -1
  4. package/dist/components/artifact.d.ts +58 -0
  5. package/dist/components/attachments.d.ts +67 -0
  6. package/dist/components/card-fallback.d.ts +10 -0
  7. package/dist/components/card-renderer.d.ts +13 -0
  8. package/dist/components/card.d.ts +28 -0
  9. package/dist/components/chain-of-thought.d.ts +29 -0
  10. package/dist/components/chat-container.d.ts +19 -0
  11. package/dist/components/chat-scope-picker.d.ts +9 -0
  12. package/dist/components/chat-thread.d.ts +93 -0
  13. package/dist/components/checkpoint.d.ts +20 -0
  14. package/dist/components/choice-card.d.ts +77 -0
  15. package/dist/components/code-block.d.ts +16 -0
  16. package/dist/components/confirm-card.d.ts +57 -0
  17. package/dist/components/context.d.ts +65 -0
  18. package/dist/components/conversation-item.d.ts +8 -0
  19. package/dist/components/conversation-list.d.ts +11 -0
  20. package/dist/components/embed.d.ts +21 -0
  21. package/dist/components/empty.d.ts +43 -0
  22. package/dist/components/feedback-bar.d.ts +45 -0
  23. package/dist/components/file-tree.d.ts +57 -0
  24. package/dist/components/file-upload.d.ts +16 -0
  25. package/dist/components/form-widgets.d.ts +31 -0
  26. package/dist/components/form.d.ts +103 -0
  27. package/dist/components/image.d.ts +12 -0
  28. package/dist/components/link-preview.d.ts +23 -0
  29. package/dist/components/loader.d.ts +60 -0
  30. package/dist/components/markdown.d.ts +8 -0
  31. package/dist/components/message-skills.d.ts +15 -0
  32. package/dist/components/message.d.ts +54 -0
  33. package/dist/components/model-switcher.d.ts +8 -0
  34. package/dist/components/prompt-input.d.ts +38 -0
  35. package/dist/components/prompt-suggestion.d.ts +13 -0
  36. package/dist/components/reasoning.d.ts +20 -0
  37. package/dist/components/response-stream.d.ts +14 -0
  38. package/dist/components/scroll-button.d.ts +7 -0
  39. package/dist/components/slash-command.d.ts +15 -0
  40. package/dist/components/source.d.ts +23 -0
  41. package/dist/components/tasks-card.d.ts +71 -0
  42. package/dist/components/text-shimmer.d.ts +9 -0
  43. package/dist/components/thinking-bar.d.ts +10 -0
  44. package/dist/components/tool.d.ts +16 -0
  45. package/dist/components/use-card-resolution.d.ts +12 -0
  46. package/dist/components/voice-input.d.ts +7 -0
  47. package/dist/core-AYMC6_lb.js +5874 -12
  48. package/dist/css-M7EaDHN_.js +6 -1
  49. package/dist/elements/artifact.d.ts +1 -0
  50. package/dist/elements/attachments.d.ts +1 -0
  51. package/dist/elements/card.d.ts +1 -0
  52. package/dist/elements/cards.d.ts +0 -0
  53. package/dist/elements/chain-of-thought.d.ts +13 -0
  54. package/dist/elements/chat-scope-picker.d.ts +1 -0
  55. package/dist/elements/chat-types.d.ts +41 -0
  56. package/dist/elements/chat-workspace.d.ts +1 -0
  57. package/dist/elements/chat.d.ts +1 -0
  58. package/dist/elements/checkpoint.d.ts +1 -0
  59. package/dist/elements/choice.d.ts +1 -0
  60. package/dist/elements/code-block.d.ts +1 -0
  61. package/dist/elements/confirm-card.d.ts +1 -0
  62. package/dist/elements/context-meter.d.ts +1 -0
  63. package/dist/elements/conversation-list.d.ts +11 -0
  64. package/dist/elements/css.d.ts +1 -0
  65. package/dist/elements/default-input.d.ts +40 -0
  66. package/dist/elements/define.d.ts +42 -0
  67. package/dist/elements/embed.d.ts +1 -0
  68. package/dist/elements/empty.d.ts +1 -0
  69. package/dist/elements/feedback-bar.d.ts +1 -0
  70. package/dist/elements/file-tree.d.ts +1 -0
  71. package/dist/elements/file-upload.d.ts +1 -0
  72. package/dist/elements/form.d.ts +1 -0
  73. package/dist/elements/image.d.ts +1 -0
  74. package/dist/elements/link-preview.d.ts +1 -0
  75. package/dist/elements/loader.d.ts +1 -0
  76. package/dist/elements/markdown.d.ts +1 -0
  77. package/dist/elements/message-skills.d.ts +17 -0
  78. package/dist/elements/message.d.ts +1 -0
  79. package/dist/elements/model-switcher.d.ts +11 -0
  80. package/dist/elements/popover.d.ts +1 -0
  81. package/dist/elements/prompt-input.d.ts +9 -0
  82. package/dist/elements/prompt-suggestions.d.ts +7 -0
  83. package/dist/elements/reasoning.d.ts +1 -0
  84. package/dist/elements/register-impl.d.ts +0 -0
  85. package/dist/elements/register.d.ts +3 -0
  86. package/dist/elements/remote.d.ts +1 -0
  87. package/dist/elements/resizable.d.ts +17 -0
  88. package/dist/elements/response-stream.d.ts +1 -0
  89. package/dist/elements/scroll-button.d.ts +1 -0
  90. package/dist/elements/source.d.ts +18 -0
  91. package/dist/elements/switch.d.ts +1 -0
  92. package/dist/elements/tasks.d.ts +1 -0
  93. package/dist/elements/text-shimmer.d.ts +1 -0
  94. package/dist/elements/thinking-bar.d.ts +1 -0
  95. package/dist/elements/tool.d.ts +1 -0
  96. package/dist/elements/voice-input.d.ts +1 -0
  97. package/dist/elements.d.ts +732 -0
  98. package/dist/engine-javascript-vq0WuIJl.js +2516 -14
  99. package/dist/github-dark-dimmed-DUshB20C.js +4 -1
  100. package/dist/github-light-JYsPkUQd.js +4 -1
  101. package/dist/html-CPZ3oZQ7.js +10 -1
  102. package/dist/index.d.ts +112 -2
  103. package/dist/index.js +13551 -0
  104. package/dist/javascript-C25yR2R2.js +6 -1
  105. package/dist/json-DxJze_jm.js +6 -1
  106. package/dist/kitn-chat.es.js +1 -77
  107. package/dist/llms/llms-full.txt +1 -1
  108. package/dist/llms/llms.txt +1 -1
  109. package/dist/mcp.es.js +2140 -0
  110. package/dist/primitives/card-contract.d.ts +103 -0
  111. package/dist/primitives/card-host.d.ts +12 -0
  112. package/dist/primitives/card-registry.d.ts +17 -0
  113. package/dist/primitives/card-resolution.d.ts +8 -0
  114. package/dist/primitives/card-routing.d.ts +12 -0
  115. package/dist/primitives/card-validate.d.ts +25 -0
  116. package/dist/primitives/chat-config.d.ts +31 -0
  117. package/dist/primitives/controllable.d.ts +13 -0
  118. package/dist/primitives/embed-providers.d.ts +65 -0
  119. package/dist/primitives/highlighter.d.ts +23 -0
  120. package/dist/primitives/link-preview.d.ts +47 -0
  121. package/dist/primitives/pdf-preview.d.ts +50 -0
  122. package/dist/primitives/use-auto-resize.d.ts +8 -0
  123. package/dist/primitives/use-resize-observer.d.ts +1 -0
  124. package/dist/primitives/use-stick-to-bottom.d.ts +5 -0
  125. package/dist/primitives/use-text-stream.d.ts +19 -0
  126. package/dist/primitives/use-voice-recorder.d.ts +9 -0
  127. package/dist/react/index.d.ts +1118 -0
  128. package/dist/react/runtime.d.ts +15 -0
  129. package/dist/react.js +265 -0
  130. package/dist/register-impl-wCsFPoh9.js +77 -0
  131. package/dist/register-ujhr1nBS.js +1 -0
  132. package/dist/remote/host-embed.d.ts +33 -0
  133. package/dist/remote/index.d.ts +2 -0
  134. package/dist/remote/origin.d.ts +5 -0
  135. package/dist/remote/provider-runtime.d.ts +27 -0
  136. package/dist/remote/provider.d.ts +2 -0
  137. package/dist/remote/validate.d.ts +4 -0
  138. package/dist/remote/version.d.ts +4 -0
  139. package/dist/remote/wire.d.ts +53 -0
  140. package/dist/svelte--5p79yCD.js +15 -1
  141. package/dist/tsx-B8rCNbgL.js +6 -1
  142. package/dist/types.d.ts +42 -0
  143. package/dist/typescript-RycA9KXf.js +6 -1
  144. package/dist/ui/action-icons.d.ts +11 -0
  145. package/dist/ui/avatar.d.ts +8 -0
  146. package/dist/ui/badge.d.ts +9 -0
  147. package/dist/ui/button.d.ts +10 -0
  148. package/dist/ui/collapsible.d.ts +27 -0
  149. package/dist/ui/dropdown.d.ts +20 -0
  150. package/dist/ui/hover-card.d.ts +28 -0
  151. package/dist/ui/overlay.d.ts +67 -0
  152. package/dist/ui/popover.d.ts +32 -0
  153. package/dist/ui/resizable.d.ts +76 -0
  154. package/dist/ui/scroll-area.d.ts +5 -0
  155. package/dist/ui/separator.d.ts +5 -0
  156. package/dist/ui/skeleton.d.ts +5 -0
  157. package/dist/ui/switch.d.ts +19 -0
  158. package/dist/ui/textarea.d.ts +6 -0
  159. package/dist/ui/tooltip.d.ts +8 -0
  160. package/dist/utils/cn.d.ts +2 -0
  161. package/dist/vue-BmIZj4XD.js +33 -1
  162. package/frameworks/react/index.tsx +4 -0
  163. package/frameworks/react/runtime.tsx +16 -2
  164. package/llms-full.txt +1 -1
  165. package/llms.txt +1 -1
  166. package/package.json +29 -11
  167. package/src/agent-tooling/archetypes.ts +46 -0
  168. package/src/agent-tooling/integrations/cloudflare.ts +88 -0
  169. package/src/agent-tooling/integrations/langgraph.ts +60 -0
  170. package/src/agent-tooling/integrations/mastra.ts +27 -0
  171. package/src/agent-tooling/integrations/mock.ts +34 -0
  172. package/src/agent-tooling/integrations/ollama.ts +47 -0
  173. package/src/agent-tooling/integrations/openrouter.ts +26 -0
  174. package/src/agent-tooling/integrations/pi.ts +40 -0
  175. package/src/agent-tooling/integrations/pydantic-ai.ts +52 -0
  176. package/src/agent-tooling/integrations/vercel-ai-sdk.ts +44 -0
  177. package/src/agent-tooling/mcp/manifest.ts +128 -0
  178. package/src/agent-tooling/mcp/server.ts +59 -0
  179. package/src/agent-tooling/mcp/stdio.ts +18 -0
  180. package/src/agent-tooling/mcp/tools/debug.ts +305 -0
  181. package/src/agent-tooling/mcp/tools/reference.ts +132 -0
  182. package/src/agent-tooling/mcp/tools/scaffold.ts +1627 -0
  183. package/src/agent-tooling/mcp/tools/theme.ts +340 -0
  184. package/src/agent-tooling/mcp/tools/types.ts +14 -0
  185. package/src/agent-tooling/registry.ts +41 -0
  186. package/src/agent-tooling/types.ts +30 -0
  187. package/src/elements/compiled.css +1 -1
  188. package/src/elements/define.tsx +7 -1
  189. package/src/elements/element-types.d.ts +2 -1
  190. package/src/elements/register-impl.ts +55 -0
  191. package/src/elements/register.ts +17 -51
  192. package/theme.css +4 -2
  193. package/src/components/artifact.stories.tsx +0 -138
  194. package/src/components/attachments.stories.tsx +0 -303
  195. package/src/components/attachments.test.tsx +0 -64
  196. package/src/components/chain-of-thought.stories.tsx +0 -211
  197. package/src/components/chat-container.stories.tsx +0 -187
  198. package/src/components/chat-thread.test.tsx +0 -58
  199. package/src/components/checkpoint.stories.tsx +0 -102
  200. package/src/components/code-block.stories.tsx +0 -150
  201. package/src/components/confirm-card.stories.tsx +0 -74
  202. package/src/components/context.stories.tsx +0 -229
  203. package/src/components/context.test.tsx +0 -133
  204. package/src/components/conversation-item.stories.tsx +0 -125
  205. package/src/components/conversation-list.stories.tsx +0 -133
  206. package/src/components/default-input.test.tsx +0 -111
  207. package/src/components/empty.stories.tsx +0 -434
  208. package/src/components/feedback-bar.stories.tsx +0 -138
  209. package/src/components/feedback-bar.test.tsx +0 -103
  210. package/src/components/file-tree.stories.tsx +0 -73
  211. package/src/components/file-upload.stories.tsx +0 -156
  212. package/src/components/image.stories.tsx +0 -89
  213. package/src/components/loader.stories.tsx +0 -181
  214. package/src/components/markdown.stories.tsx +0 -180
  215. package/src/components/message-action-bar.test.tsx +0 -128
  216. package/src/components/message-narrow.stories.tsx +0 -329
  217. package/src/components/message-skills.stories.tsx +0 -211
  218. package/src/components/message.stories.tsx +0 -281
  219. package/src/components/model-switcher.stories.tsx +0 -123
  220. package/src/components/model-switcher.test.tsx +0 -65
  221. package/src/components/prompt-input.stories.tsx +0 -222
  222. package/src/components/prompt-suggestion.stories.tsx +0 -142
  223. package/src/components/reasoning.stories.tsx +0 -140
  224. package/src/components/resizable.test.tsx +0 -226
  225. package/src/components/scroll-button.stories.tsx +0 -100
  226. package/src/components/slash-command.stories.tsx +0 -163
  227. package/src/components/source-list.test.tsx +0 -152
  228. package/src/components/source.stories.tsx +0 -124
  229. package/src/components/tasks-card.stories.tsx +0 -78
  230. package/src/components/text-shimmer.stories.tsx +0 -87
  231. package/src/components/thinking-bar.stories.tsx +0 -87
  232. package/src/components/tool.stories.tsx +0 -153
  233. package/src/components/voice-input.stories.tsx +0 -83
  234. package/src/elements/artifact.stories.tsx +0 -506
  235. package/src/elements/attachments.stories.tsx +0 -190
  236. package/src/elements/card.stories.tsx +0 -113
  237. package/src/elements/cards.stories.tsx +0 -59
  238. package/src/elements/catalog.stories.tsx +0 -491
  239. package/src/elements/chain-of-thought.declarative.test.tsx +0 -153
  240. package/src/elements/chain-of-thought.stories.tsx +0 -113
  241. package/src/elements/chat-scope-picker.stories.tsx +0 -73
  242. package/src/elements/chat-workspace.stories.tsx +0 -288
  243. package/src/elements/chat.stories.tsx +0 -151
  244. package/src/elements/checkpoint.stories.tsx +0 -72
  245. package/src/elements/choice.stories.tsx +0 -240
  246. package/src/elements/code-block.stories.tsx +0 -83
  247. package/src/elements/composed-shell.stories.tsx +0 -316
  248. package/src/elements/confirm-card.stories.tsx +0 -227
  249. package/src/elements/context-meter.stories.tsx +0 -151
  250. package/src/elements/conversation-list.declarative.test.tsx +0 -137
  251. package/src/elements/conversation-list.stories.tsx +0 -243
  252. package/src/elements/embed.stories.tsx +0 -213
  253. package/src/elements/empty.stories.tsx +0 -111
  254. package/src/elements/feedback-bar.stories.tsx +0 -114
  255. package/src/elements/file-tree.stories.tsx +0 -134
  256. package/src/elements/file-upload.stories.tsx +0 -82
  257. package/src/elements/form.stories.tsx +0 -248
  258. package/src/elements/image.stories.tsx +0 -71
  259. package/src/elements/link-preview.stories.tsx +0 -209
  260. package/src/elements/loader.stories.tsx +0 -88
  261. package/src/elements/markdown.stories.tsx +0 -76
  262. package/src/elements/message-skills.declarative.test.tsx +0 -104
  263. package/src/elements/message-skills.stories.tsx +0 -114
  264. package/src/elements/message.stories.tsx +0 -218
  265. package/src/elements/model-switcher.declarative.test.tsx +0 -130
  266. package/src/elements/model-switcher.stories.tsx +0 -198
  267. package/src/elements/popover.stories.tsx +0 -80
  268. package/src/elements/prompt-input-slash-command.test.tsx +0 -128
  269. package/src/elements/prompt-input-stoppable.test.tsx +0 -88
  270. package/src/elements/prompt-input-toolbar-actions.test.tsx +0 -120
  271. package/src/elements/prompt-input.stories.tsx +0 -331
  272. package/src/elements/prompt-suggestions.declarative.test.tsx +0 -164
  273. package/src/elements/prompt-suggestions.stories.tsx +0 -213
  274. package/src/elements/reasoning.stories.tsx +0 -77
  275. package/src/elements/remote.stories.tsx +0 -314
  276. package/src/elements/resizable.stories.tsx +0 -426
  277. package/src/elements/response-stream.stories.tsx +0 -79
  278. package/src/elements/scroll-button.stories.tsx +0 -202
  279. package/src/elements/scroll-button.test.tsx +0 -148
  280. package/src/elements/source-list.stories.tsx +0 -143
  281. package/src/elements/source.stories.tsx +0 -88
  282. package/src/elements/switch.stories.tsx +0 -56
  283. package/src/elements/tasks.stories.tsx +0 -237
  284. package/src/elements/text-shimmer.stories.tsx +0 -64
  285. package/src/elements/thinking-bar.stories.tsx +0 -72
  286. package/src/elements/tool.stories.tsx +0 -89
  287. package/src/elements/voice-input.stories.tsx +0 -88
  288. package/src/primitives/controllable.test.ts +0 -47
  289. package/src/stories/chat-panel-layout.stories.tsx +0 -145
  290. package/src/stories/chat-scene.tsx +0 -571
  291. package/src/stories/checkpoint-restore.stories.tsx +0 -256
  292. package/src/stories/context-usage.stories.tsx +0 -212
  293. package/src/stories/conversation-with-reasoning.stories.tsx +0 -182
  294. package/src/stories/conversation-with-sources.stories.tsx +0 -471
  295. package/src/stories/docs/Accessibility.mdx +0 -119
  296. package/src/stories/docs/ChildElements.mdx +0 -269
  297. package/src/stories/docs/ForAIAgents.mdx +0 -162
  298. package/src/stories/docs/GettingStarted.mdx +0 -65
  299. package/src/stories/docs/Installation.mdx +0 -83
  300. package/src/stories/docs/Introduction.mdx +0 -50
  301. package/src/stories/docs/SolidJsAdvanced.mdx +0 -17
  302. package/src/stories/docs/Theming.mdx +0 -85
  303. package/src/stories/docs/element-controls.ts +0 -121
  304. package/src/stories/docs/frameworks/Angular.mdx +0 -245
  305. package/src/stories/docs/frameworks/Html.mdx +0 -227
  306. package/src/stories/docs/frameworks/Overview.mdx +0 -47
  307. package/src/stories/docs/frameworks/React.mdx +0 -227
  308. package/src/stories/docs/frameworks/Solid.mdx +0 -173
  309. package/src/stories/docs/frameworks/Svelte.mdx +0 -194
  310. package/src/stories/docs/frameworks/Vue.mdx +0 -238
  311. package/src/stories/docs/generative-ui-overview.mdx +0 -186
  312. package/src/stories/docs/recipes/SpeechToText.mdx +0 -7
  313. package/src/stories/docs/recipes/Streaming.mdx +0 -68
  314. package/src/stories/docs/recipes/TextToSpeech.mdx +0 -35
  315. package/src/stories/docs/theme-editor/canvas.tsx +0 -32
  316. package/src/stories/docs/theme-editor/inspector.tsx +0 -66
  317. package/src/stories/docs/theme-editor/presets.test.ts +0 -32
  318. package/src/stories/docs/theme-editor/presets.ts +0 -64
  319. package/src/stories/docs/theme-editor/theme-css.test.ts +0 -19
  320. package/src/stories/docs/theme-editor/theme-css.ts +0 -15
  321. package/src/stories/docs/theme-editor/theme-editor.tsx +0 -146
  322. package/src/stories/docs/theme-tokens.tsx +0 -174
  323. package/src/stories/examples/ChoosingComponents.mdx +0 -106
  324. package/src/stories/examples/sample-data.ts +0 -79
  325. package/src/stories/examples/usage/checkpoint-restore.ts +0 -156
  326. package/src/stories/examples/usage/context-usage.ts +0 -591
  327. package/src/stories/examples/usage/conversation-with-reasoning.ts +0 -224
  328. package/src/stories/examples/usage/conversation-with-sources.ts +0 -589
  329. package/src/stories/examples/usage/empty-state.ts +0 -144
  330. package/src/stories/examples/usage/full-chat-app.ts +0 -277
  331. package/src/stories/examples/usage/index.ts +0 -63
  332. package/src/stories/examples/usage/message-actions.ts +0 -704
  333. package/src/stories/examples/usage/pattern-centered-conversation.ts +0 -446
  334. package/src/stories/examples/usage/pattern-chat-panel-layout.ts +0 -442
  335. package/src/stories/examples/usage/pattern-docked-widget.ts +0 -479
  336. package/src/stories/examples/usage/prompt-input-variants.ts +0 -1356
  337. package/src/stories/examples/usage/streaming-response.ts +0 -687
  338. package/src/stories/examples/usage/types.ts +0 -33
  339. package/src/stories/full-chat.stories.tsx +0 -18
  340. package/src/stories/message-actions.stories.tsx +0 -230
  341. package/src/stories/pattern-centered-conversation.stories.tsx +0 -93
  342. package/src/stories/pattern-docked-widget.stories.tsx +0 -93
  343. package/src/stories/pattern-empty-state.stories.tsx +0 -76
  344. package/src/stories/prompt-input-variants.stories.tsx +0 -456
  345. package/src/stories/streaming-response.stories.tsx +0 -438
  346. package/src/stories/theme-editor.stories.tsx +0 -16
  347. package/src/stories/token-reference.stories.tsx +0 -18
  348. package/src/stories/typography.stories.tsx +0 -78
  349. package/src/ui/avatar.stories.tsx +0 -103
  350. package/src/ui/badge.stories.tsx +0 -86
  351. package/src/ui/button.stories.tsx +0 -145
  352. package/src/ui/collapsible.stories.tsx +0 -69
  353. package/src/ui/dropdown.stories.tsx +0 -59
  354. package/src/ui/hover-card.stories.tsx +0 -77
  355. package/src/ui/hover-card.test.tsx +0 -30
  356. package/src/ui/overlay.stories.tsx +0 -115
  357. package/src/ui/popover.stories.tsx +0 -81
  358. package/src/ui/popover.test.tsx +0 -99
  359. package/src/ui/resizable.stories.tsx +0 -236
  360. package/src/ui/scroll-area.stories.tsx +0 -50
  361. package/src/ui/separator.stories.tsx +0 -81
  362. package/src/ui/skeleton.stories.tsx +0 -337
  363. package/src/ui/switch.stories.tsx +0 -51
  364. package/src/ui/switch.test.tsx +0 -59
  365. package/src/ui/textarea.stories.tsx +0 -76
  366. 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;