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