@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/elements/artifact.stories.tsx DELETED
@@ -1,506 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { createSignal, onMount, type JSX } from 'solid-js';
3
- import './register'; // side effect: registers the custom elements
4
- import { argTypesFor, specDescription } from '../stories/docs/element-controls';
5
- import type { ArtifactFile } from '../components/artifact';
6
-
7
- // Custom DOM elements — declare the tags for JSX.
8
- declare module 'solid-js' {
9
- // eslint-disable-next-line @typescript-eslint/no-namespace
10
- namespace JSX {
11
- interface IntrinsicElements {
12
- 'kai-artifact': JSX.HTMLAttributes<HTMLElement> & {
13
- src?: string;
14
- tab?: string;
15
- 'active-file'?: string;
16
- sandbox?: string;
17
- 'iframe-title'?: string;
18
- ref?: (el: HTMLElement) => void;
19
- // toolbar composition flags (all boolean attrs)
20
- expandable?: boolean | string;
21
- 'open-in-tab'?: boolean | string;
22
- 'no-nav'?: boolean | string;
23
- 'no-reload'?: boolean | string;
24
- 'no-home'?: boolean | string;
25
- 'no-path-field'?: boolean | string;
26
- 'no-tabs'?: boolean | string;
27
- standalone?: boolean | string;
28
- 'readonly-path'?: boolean | string;
29
- };
30
- }
31
- }
32
- }
33
-
34
- // Storybook serves examples/artifact-fixtures at /artifact-fixtures (see
35
- // .storybook/main.ts staticDirs). These are real, cross-linked pages so
36
- // relative-link nav, back/forward and multi-format all work in the iframe.
37
- const BASE = new URL('artifact-fixtures', document.baseURI).href;
38
-
39
- const FILES: ArtifactFile[] = [
40
- {
41
- path: 'index.html',
42
- url: `${BASE}/index.html`,
43
- type: 'html',
44
- language: 'html',
45
- code: `<!DOCTYPE html>
46
- <html lang="en">
47
- <head>
48
- <link rel="stylesheet" href="css/site.css" />
49
- <title>Starboard — Home</title>
50
- </head>
51
- <body>
52
- <h1>Starboard</h1>
53
- <a href="about.html">About</a>
54
- </body>
55
- </html>`,
56
- },
57
- {
58
- path: 'about.html',
59
- url: `${BASE}/about.html`,
60
- type: 'html',
61
- language: 'html',
62
- code: `<!DOCTYPE html>
63
- <html lang="en">
64
- <head>
65
- <link rel="stylesheet" href="css/site.css" />
66
- <title>Starboard — About</title>
67
- </head>
68
- <body data-page="about">
69
- <h1>About Starboard</h1>
70
- <a href="index.html">← Home</a>
71
- </body>
72
- </html>`,
73
- },
74
- {
75
- path: 'css/site.css',
76
- url: `${BASE}/css/site.css`,
77
- type: 'other',
78
- language: 'css',
79
- code: `:root { --accent: #6ea8fe; }
80
- body { font-family: system-ui, sans-serif; }
81
- .card { border: 1px solid var(--accent); border-radius: 14px; }`,
82
- },
83
- {
84
- path: 'assets/logo.svg',
85
- url: `${BASE}/assets/logo.svg`,
86
- type: 'image',
87
- },
88
- {
89
- path: 'assets/report.pdf',
90
- url: `${BASE}/assets/report.pdf`,
91
- type: 'pdf',
92
- },
93
- ];
94
-
95
- /** A bordered, sized box the artifact fills. */
96
- function Frame(props: { children: JSX.Element; height?: string }) {
97
- return (
98
- <div
99
- style={{
100
- height: props.height ?? '520px',
101
- width: '100%',
102
- 'max-width': '900px',
103
- border: '1px solid var(--color-border, #e4e4e7)',
104
- 'border-radius': '12px',
105
- overflow: 'hidden',
106
- }}
107
- >
108
- {props.children}
109
- </div>
110
- );
111
- }
112
-
113
- const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
114
- <kai-artifact
115
- src="https://your-backend.example/artifacts/abc/index.html"
116
- style="display:block;height:520px"
117
- ></kai-artifact>
118
-
119
- <script type="module">
120
- import '@kitn.ai/ui/elements'; // registers the custom elements
121
-
122
- const el = document.querySelector('kai-artifact');
123
- // \`files\` is a JS property (array): tree labels (folders from \`/\`), a preview
124
- // \`url\` per file, and \`code\` for the Code tab.
125
- el.files = [
126
- { path: 'index.html', url: '…/index.html', type: 'html', code: '<!DOCTYPE …' },
127
- { path: 'about.html', url: '…/about.html', type: 'html', code: '<!DOCTYPE …' },
128
- { path: 'assets/logo.svg', url: '…/logo.svg', type: 'image' },
129
- ];
130
-
131
- el.addEventListener('kai-navigate', (e) => console.log('navigate', e.detail.url));
132
- el.addEventListener('kai-tab-change', (e) => console.log('tab', e.detail.tab));
133
- el.addEventListener('kai-file-select', (e) => console.log('file', e.detail.path));
134
- </script>`;
135
-
136
- const meta = {
137
- title: 'Components/Artifact',
138
- tags: ['autodocs'],
139
- argTypes: argTypesFor('kai-artifact'),
140
- parameters: {
141
- layout: 'padded',
142
- docs: {
143
- description: specDescription('kai-artifact', [
144
- '`<kai-artifact>` is the framework-agnostic **web component** for a framed, switchable **generated-artifact viewer** — the "canvas / artifacts" pattern (Claude Artifacts, ChatGPT Canvas, V0, bolt). It frames a consumer-served URL in a **sandboxed `<iframe>`** with a functional nav toolbar, and a **Preview | Code** toggle whose Code tab shows a file tree (`<kai-file-tree>`) + the active file source (`<kai-code-block>`). Isolated in **Shadow DOM**.',
145
- "**When to use:** to show an AI-generated artifact (a web page, doc, image, or PDF your backend hosts) beside the conversation — typically inside a `<kai-resizable>` panel. The component **frames** content; your backend serves it, so relative links, back/forward, reload and multi-format work natively.",
146
- "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set `src` to the hosted URL, and set the `files` **property** (a JS array of `{ path, url?, code?, language?, type? }`) for the Code tab tree. The iframe `sandbox` defaults to `allow-scripts allow-forms` (**not** `allow-same-origin`); widen it via the `sandbox` attribute only if you trust the artifact. Listen for **`kai-navigate`** (`detail.url`), **`kai-tab-change`** (`detail.tab`), and **`kai-file-select`** (`detail.path`).",
147
- '**Anatomy:** **nav toolbar** (back · forward · reload · home buttons + editable address field + Preview|Code toggle; each affordance individually hideable via `no-*` flags; omitted entirely when all are hidden) → **preview body** (either a sandboxed `<iframe>` for web/image/PDF content, or the **code view**: `<kai-file-tree>` sidebar + `<kai-code-block>` main pane, side by side).',
148
- '**Placement:** the preview/canvas panel of a compose-your-own-chat shell — e.g. `list | chat | artifact`. It **fills** its container, so give the parent (or the element) a height.',
149
- 'See the **Code** tab for HTML usage.',
150
- ]),
151
- },
152
- },
153
- args: { tab: 'preview', sandbox: 'allow-scripts allow-forms' },
154
- } satisfies Meta;
155
-
156
- export default meta;
157
- type Story = StoryObj;
158
-
159
- /** Interactive playground — frames a live, cross-linked fixture. Flip Preview/Code. */
160
- export const Playground: Story = {
161
- render: (args: { src?: string; tab?: string; sandbox?: string }) => {
162
- let el: HTMLElement & { files?: ArtifactFile[] };
163
- onMount(() => {
164
- if (el) el.files = FILES;
165
- });
166
- return (
167
- <Frame>
168
- <kai-artifact
169
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
170
- src={args.src ?? `${BASE}/index.html`}
171
- tab={args.tab ?? 'preview'}
172
- sandbox={args.sandbox ?? 'allow-scripts allow-forms'}
173
- iframe-title="Starboard artifact preview"
174
- />
175
- </Frame>
176
- );
177
- },
178
- parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
179
- };
180
-
181
- /** Opens on the Code tab — file tree + syntax-highlighted source. */
182
- export const CodeTab: Story = {
183
- name: 'Code tab',
184
- render: () => {
185
- let el: HTMLElement & { files?: ArtifactFile[] };
186
- onMount(() => {
187
- if (el) el.files = FILES;
188
- });
189
- return (
190
- <Frame>
191
- <kai-artifact
192
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
193
- src={`${BASE}/index.html`}
194
- tab="code"
195
- active-file="index.html"
196
- iframe-title="Starboard artifact preview"
197
- />
198
- </Frame>
199
- );
200
- },
201
- };
202
-
203
- /** Multi-format: the preview frames an image fixture natively. */
204
- export const ImagePreview: Story = {
205
- name: 'Image (multi-format)',
206
- render: () => {
207
- let el: HTMLElement & { files?: ArtifactFile[] };
208
- onMount(() => {
209
- if (el) el.files = FILES;
210
- });
211
- return (
212
- <Frame>
213
- <kai-artifact
214
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
215
- src={`${BASE}/assets/logo.svg`}
216
- iframe-title="Logo image"
217
- />
218
- </Frame>
219
- );
220
- },
221
- };
222
-
223
- /** Multi-format: PDFs render inline via pdf.js (loaded on demand from a CDN). */
224
- export const PdfPreview: Story = {
225
- name: 'PDF (multi-format)',
226
- render: () => {
227
- let el: HTMLElement & { files?: ArtifactFile[] };
228
- onMount(() => {
229
- if (el) el.files = FILES;
230
- });
231
- return (
232
- <Frame>
233
- <kai-artifact
234
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
235
- src={`${BASE}/assets/report.pdf`}
236
- iframe-title="Report PDF"
237
- />
238
- </Frame>
239
- );
240
- },
241
- };
242
-
243
- /** When inline rendering can't work (CORS / 404 / blocked CDN) the viewer shows
244
- * an "Open in new tab / Download" card. Here the src 404s to force that path. */
245
- export const PdfFallback: Story = {
246
- name: 'PDF (fallback card)',
247
- render: () => (
248
- <Frame>
249
- <kai-artifact
250
- src={`${BASE}/assets/does-not-exist.pdf`}
251
- iframe-title="Missing PDF"
252
- />
253
- </Frame>
254
- ),
255
- };
256
-
257
- /** Logs the emitted events so you can see the controlled nav model in action. */
258
- export const WithEvents: Story = {
259
- name: 'Events',
260
- render: () => {
261
- const [log, setLog] = createSignal<string[]>([]);
262
- let el: HTMLElement & { files?: ArtifactFile[] };
263
- onMount(() => {
264
- if (!el) return;
265
- el.files = FILES;
266
- el.addEventListener('kai-navigate', (e) =>
267
- setLog((l) => [`navigate → ${(e as CustomEvent).detail.url}`, ...l].slice(0, 6)),
268
- );
269
- el.addEventListener('kai-tab-change', (e) =>
270
- setLog((l) => [`kai-tab-change → ${(e as CustomEvent).detail.tab}`, ...l].slice(0, 6)),
271
- );
272
- el.addEventListener('kai-file-select', (e) =>
273
- setLog((l) => [`kai-file-select → ${(e as CustomEvent).detail.path}`, ...l].slice(0, 6)),
274
- );
275
- });
276
- return (
277
- <div style={{ display: 'flex', 'flex-direction': 'column', gap: '8px' }}>
278
- <Frame height="420px">
279
- <kai-artifact
280
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
281
- src={`${BASE}/index.html`}
282
- iframe-title="Starboard artifact preview"
283
- />
284
- </Frame>
285
- <pre
286
- style={{
287
- 'font-size': '12px',
288
- 'max-width': '900px',
289
- padding: '10px 12px',
290
- 'border-radius': '8px',
291
- background: 'var(--color-muted, #f4f4f5)',
292
- color: 'var(--color-muted-foreground, #71717a)',
293
- 'min-height': '96px',
294
- margin: '0',
295
- }}
296
- >
297
- {log().length ? log().join('\n') : '(navigate the preview / switch tabs / pick a file…)'}
298
- </pre>
299
- </div>
300
- );
301
- },
302
- };
303
-
304
- const CONFIGURABLE_TOOLBAR_SNIPPET = `<!-- All toolbar affordances are individually opt-in/out via attributes. -->
305
-
306
- <!-- The five default-shown items each have a "no-*" flag to hide them: -->
307
- <kai-artifact
308
- src="…"
309
- no-nav
310
- no-reload
311
- no-home
312
- ></kai-artifact>
313
-
314
- <!-- Two new buttons are OPT-IN (hidden by default): -->
315
- <kai-artifact
316
- src="…"
317
- expandable
318
- open-in-tab
319
- ></kai-artifact>
320
-
321
- <!-- Standalone chrome: rounded corners + border (default is square/borderless in-panel): -->
322
- <kai-artifact src="…" standalone></kai-artifact>
323
-
324
- <!-- Read-only path: visible, nav-tracking, non-editable: -->
325
- <kai-artifact src="…" readonly-path></kai-artifact>`;
326
-
327
- /**
328
- * Every toolbar affordance is individually configurable.
329
- *
330
- * **Default-shown (`no-*` flags hide):** back/forward (`no-nav`), reload (`no-reload`),
331
- * home (`no-home`), address field (`no-path-field`), Preview|Code toggle (`no-tabs`).
332
- *
333
- * **Opt-in (hidden by default; positive attr enables):** expand-to-fill (`expandable`),
334
- * open-in-new-tab (`open-in-tab`).
335
- *
336
- * **Chrome:** `standalone` adds rounded corners + border (default = square/borderless
337
- * for in-panel use). `readonly-path` makes the address field visible but non-editable.
338
- *
339
- * When ALL affordances are hidden the toolbar bar is omitted entirely (zero height).
340
- */
341
- export const ConfigurableToolbar: Story = {
342
- name: 'Configurable toolbar',
343
- render: (args: {
344
- expandable?: boolean;
345
- openInTab?: boolean;
346
- noNav?: boolean;
347
- noReload?: boolean;
348
- noHome?: boolean;
349
- noPathField?: boolean;
350
- noTabs?: boolean;
351
- standalone?: boolean;
352
- readonlyPath?: boolean;
353
- }) => {
354
- let el: HTMLElement & { files?: ArtifactFile[] };
355
- onMount(() => { if (el) el.files = FILES; });
356
- return (
357
- <Frame>
358
- <kai-artifact
359
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
360
- src={`${BASE}/index.html`}
361
- iframe-title="Starboard artifact preview"
362
- expandable={args.expandable || undefined}
363
- open-in-tab={args.openInTab || undefined}
364
- no-nav={args.noNav || undefined}
365
- no-reload={args.noReload || undefined}
366
- no-home={args.noHome || undefined}
367
- no-path-field={args.noPathField || undefined}
368
- no-tabs={args.noTabs || undefined}
369
- standalone={args.standalone || undefined}
370
- readonly-path={args.readonlyPath || undefined}
371
- />
372
- </Frame>
373
- );
374
- },
375
- args: {
376
- expandable: false,
377
- openInTab: false,
378
- noNav: false,
379
- noReload: false,
380
- noHome: false,
381
- noPathField: false,
382
- noTabs: false,
383
- standalone: false,
384
- readonlyPath: false,
385
- },
386
- argTypes: {
387
- expandable: { control: 'boolean', description: 'Show the expand-to-fill button (opt-in).' },
388
- openInTab: { control: 'boolean', name: 'open-in-tab', description: 'Show the open-in-new-tab button (opt-in).' },
389
- noNav: { control: 'boolean', name: 'no-nav', description: 'Hide the back/forward buttons.' },
390
- noReload: { control: 'boolean', name: 'no-reload', description: 'Hide the reload button.' },
391
- noHome: { control: 'boolean', name: 'no-home', description: 'Hide the home button.' },
392
- noPathField: { control: 'boolean', name: 'no-path-field', description: 'Hide the address field.' },
393
- noTabs: { control: 'boolean', name: 'no-tabs', description: 'Hide the Preview|Code toggle.' },
394
- standalone: { control: 'boolean', description: 'Standalone chrome (rounded + border).' },
395
- readonlyPath: { control: 'boolean', name: 'readonly-path', description: 'Address field is visible but non-editable.' },
396
- },
397
- parameters: { docs: { source: { code: CONFIGURABLE_TOOLBAR_SNIPPET, language: 'html' } } },
398
- };
399
-
400
- const MINIMAL_SNIPPET = `<!-- Minimal: only the preview iframe, no toolbar at all. -->
401
- <kai-artifact
402
- src="…"
403
- no-nav
404
- no-reload
405
- no-home
406
- no-path-field
407
- no-tabs
408
- ></kai-artifact>`;
409
-
410
- /**
411
- * All five default-shown toolbar affordances suppressed — the toolbar bar
412
- * disappears entirely (zero height), leaving just the preview iframe.
413
- * Useful for an embedded, chrome-free artifact tile.
414
- */
415
- export const MinimalPreview: Story = {
416
- name: 'Minimal (preview-only)',
417
- render: () => (
418
- <Frame>
419
- <kai-artifact
420
- src={`${BASE}/index.html`}
421
- iframe-title="Starboard artifact preview"
422
- no-nav
423
- no-reload
424
- no-home
425
- no-path-field
426
- no-tabs
427
- />
428
- </Frame>
429
- ),
430
- parameters: { docs: { source: { code: MINIMAL_SNIPPET, language: 'html' } } },
431
- };
432
-
433
- const OPEN_IN_TAB_SNIPPET = `<!-- open-in-tab: adds a button that opens the current URL in a new tab.
434
- The button is disabled while the src is blank. -->
435
- <kai-artifact
436
- src="https://your-backend.example/artifacts/abc/index.html"
437
- open-in-tab
438
- ></kai-artifact>`;
439
-
440
- /**
441
- * The **open-in-tab** button (opt-in via `open-in-tab`) opens the current
442
- * preview URL in a new browser tab (`window.open`, `noopener,noreferrer`).
443
- * It is disabled while the URL is empty / `about:blank` and follows the live
444
- * navigation state — clicking it after the user has navigated to a sub-page
445
- * opens that sub-page, not the original `src`.
446
- */
447
- export const OpenInTab: Story = {
448
- name: 'Open in new tab',
449
- render: () => {
450
- let el: HTMLElement & { files?: ArtifactFile[] };
451
- onMount(() => { if (el) el.files = FILES; });
452
- return (
453
- <Frame>
454
- <kai-artifact
455
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
456
- src={`${BASE}/index.html`}
457
- iframe-title="Starboard artifact preview"
458
- open-in-tab
459
- />
460
- </Frame>
461
- );
462
- },
463
- parameters: { docs: { source: { code: OPEN_IN_TAB_SNIPPET, language: 'html' } } },
464
- };
465
-
466
- const STANDALONE_SNIPPET = `<!-- standalone: adds rounded corners + a border (like a card).
467
- Suppresses the expand button even when expandable is set.
468
- Use for an artifact rendered outside any panel layout. -->
469
- <kai-artifact
470
- src="…"
471
- standalone
472
- style="display:block;height:520px"
473
- ></kai-artifact>`;
474
-
475
- /**
476
- * `standalone` adds rounded corners and a border — the "card" chrome for an
477
- * artifact rendered outside any panel layout (e.g. as a modal or inline tile).
478
- * In the default in-panel mode the element is square and borderless so it fits
479
- * flush inside a `<kai-resizable>` panel without double-borders.
480
- *
481
- * `standalone` also suppresses the expand button (there is no enclosing resizable
482
- * to maximize into) regardless of `expandable`.
483
- *
484
- * `readonly-path` keeps the address field visible and navigation-tracking but
485
- * non-editable — useful when the consumer drives the URL programmatically.
486
- */
487
- export const StandaloneChrome: Story = {
488
- name: 'Standalone chrome + read-only path',
489
- render: () => {
490
- let el: HTMLElement & { files?: ArtifactFile[] };
491
- onMount(() => { if (el) el.files = FILES; });
492
- return (
493
- <div style={{ padding: '16px', 'max-width': '900px' }}>
494
- <kai-artifact
495
- ref={(e) => (el = e as HTMLElement & { files?: ArtifactFile[] })}
496
- src={`${BASE}/index.html`}
497
- iframe-title="Starboard artifact preview"
498
- standalone
499
- readonly-path
500
- style={{ display: 'block', height: '480px' }}
501
- />
502
- </div>
503
- );
504
- },
505
- parameters: { docs: { source: { code: STANDALONE_SNIPPET, language: 'html' } } },
506
- };
package/src/elements/attachments.stories.tsx DELETED
@@ -1,190 +0,0 @@
1
- import type { Meta, StoryObj } from 'storybook-solidjs-vite';
2
- import { onMount } from 'solid-js';
3
- import './register'; // side effect: registers the custom elements
4
- import type { AttachmentData } from '../components/attachments';
5
- import { argTypesFor, specDescription } from '../stories/docs/element-controls';
6
-
7
- // The web components are custom DOM elements, so declare the tags for JSX.
8
- declare module 'solid-js' {
9
- // eslint-disable-next-line @typescript-eslint/no-namespace
10
- namespace JSX {
11
- interface IntrinsicElements {
12
- 'kai-attachments': JSX.HTMLAttributes<HTMLElement> & {
13
- variant?: string;
14
- 'hover-card'?: boolean | string;
15
- removable?: boolean | string;
16
- 'show-media-type'?: boolean | string;
17
- };
18
- }
19
- }
20
- }
21
-
22
- // Mixed file/source items (icons + labels) — mirrors Components/Attachments.
23
- const sampleItems: AttachmentData[] = [
24
- {
25
- id: '1',
26
- type: 'file',
27
- filename: 'mountain-landscape.jpg',
28
- mediaType: 'image/jpeg',
29
- url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
30
- },
31
- {
32
- id: '2',
33
- type: 'file',
34
- filename: 'sunset-beach.png',
35
- mediaType: 'image/png',
36
- url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=400&fit=crop',
37
- },
38
- { id: '3', type: 'file', filename: 'architecture-report.pdf', mediaType: 'application/pdf' },
39
- { id: '4', type: 'file', filename: 'demo-recording.mp4', mediaType: 'video/mp4' },
40
- { id: '5', type: 'file', filename: 'podcast-episode.mp3', mediaType: 'audio/mpeg' },
41
- { id: '6', type: 'source-document', filename: 'SolidJS Documentation', title: 'SolidJS Reactivity Guide', url: 'https://solidjs.com/docs' },
42
- ];
43
-
44
- // Image-only items — used for the grid thumbnails + hover-card preview stories.
45
- const imageItems: AttachmentData[] = [
46
- {
47
- id: 'img-1',
48
- type: 'file',
49
- filename: 'mountain-landscape.jpg',
50
- mediaType: 'image/jpeg',
51
- url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
52
- },
53
- {
54
- id: 'img-2',
55
- type: 'file',
56
- filename: 'sunset-beach.png',
57
- mediaType: 'image/png',
58
- url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=400&fit=crop',
59
- },
60
- ];
61
-
62
- /** Render `<kai-attachments>` with an `items` property and the given flags. */
63
- function AttachmentsElement(props: {
64
- items: AttachmentData[];
65
- variant?: string;
66
- removable?: boolean;
67
- hoverCard?: boolean;
68
- showMediaType?: boolean;
69
- }) {
70
- let el: (HTMLElement & { items?: AttachmentData[] }) | undefined;
71
- onMount(() => {
72
- if (!el) return;
73
- el.items = props.items;
74
- if (props.variant) el.setAttribute('variant', props.variant);
75
- if (props.hoverCard) el.setAttribute('hover-card', '');
76
- if (props.showMediaType) el.setAttribute('show-media-type', '');
77
- if (props.removable) {
78
- el.setAttribute('removable', '');
79
- el.addEventListener('kai-remove', ((e: CustomEvent<{ id: string }>) => {
80
- el!.items = (el!.items ?? []).filter((x) => x.id !== e.detail.id);
81
- }) as EventListener);
82
- }
83
- });
84
- return (
85
- <kai-attachments
86
- ref={(e) => (el = e as HTMLElement)}
87
- style={{ display: 'block', padding: '24px', 'max-width': '720px' }}
88
- />
89
- );
90
- }
91
-
92
- const HTML_SNIPPET = `<!-- Works in any framework or plain HTML -->
93
- <kai-attachments id="att" variant="grid" removable></kai-attachments>
94
-
95
- <script type="module">
96
- import '@kitn.ai/ui/elements'; // registers the custom elements
97
-
98
- const att = document.getElementById('att');
99
- att.items = [
100
- { id: '1', type: 'file', filename: 'mountain-landscape.jpg',
101
- mediaType: 'image/jpeg', url: 'https://.../mountain.jpg' },
102
- { id: '2', type: 'file', filename: 'spec.pdf', mediaType: 'application/pdf' },
103
- ];
104
-
105
- // events are CustomEvents on the element (they do not bubble)
106
- att.addEventListener('kai-remove', (e) => {
107
- att.items = att.items.filter((x) => x.id !== e.detail.id);
108
- });
109
- </script>`;
110
-
111
- const HOVER_SNIPPET = `<!-- inline/list chips with a hover-card image preview -->
112
- <kai-attachments id="att" variant="inline" hover-card></kai-attachments>
113
-
114
- <script type="module">
115
- import '@kitn.ai/ui/elements';
116
-
117
- const att = document.getElementById('att');
118
- // image attachments show their thumbnail in the hover card on hover;
119
- // non-image attachments show their label + media type instead.
120
- att.items = [
121
- { id: '1', type: 'file', filename: 'mountain-landscape.jpg',
122
- mediaType: 'image/jpeg', url: 'https://.../mountain.jpg' },
123
- ];
124
- </script>`;
125
-
126
- const meta = {
127
- title: 'Components/Attachments',
128
- tags: ['autodocs'],
129
- argTypes: argTypesFor('kai-attachments'),
130
- parameters: {
131
- layout: 'fullscreen',
132
- docs: {
133
- description: specDescription('kai-attachments', [
134
- '`<kai-attachments>` is the framework-agnostic **web component** for a set of file/source attachments, and the exemplar for the "collapse a compound primitive to ONE configurable element" pattern: the sub-parts the SolidJS layer composes become attributes here. Isolated in **Shadow DOM**.',
135
- '**When to use:** rendering attachment chips/tiles in a non-Solid app. In SolidJS, compose the `Attachment*` primitives for fully custom layouts.',
136
- '**Placement:** beneath message content (for received/sent files) or above the prompt input (for staged uploads); fills its container width.',
137
- "**How to use:** register once with `import '@kitn.ai/ui/elements'`, set the data via the `items` **property**, pick a layout with `variant` (`grid` | `inline` | `list`), add `removable` to get per-item remove buttons (emits a `kai-remove` **CustomEvent** with `{ id }`), and `hover-card` for inline/list previews (image attachments preview their thumbnail).",
138
- 'See the **Code** tab for HTML usage.',
139
- ]),
140
- },
141
- },
142
- } satisfies Meta;
143
-
144
- export default meta;
145
- type Story = StoryObj;
146
-
147
- /** Visual tiles (the default `grid` variant) — image attachments render as real
148
- * `<img>` thumbnails; non-image files fall back to a media-type icon. */
149
- export const Grid: Story = {
150
- render: () => <AttachmentsElement items={sampleItems} variant="grid" />,
151
- parameters: { docs: { source: { code: HTML_SNIPPET, language: 'html' } } },
152
- };
153
-
154
- /** Icon + label chips (`inline`) — files shown as a small preview + filename. */
155
- export const Inline: Story = {
156
- render: () => <AttachmentsElement items={sampleItems} variant="inline" />,
157
- };
158
-
159
- /** Detailed rows (`list`) with the media type beneath each filename. */
160
- export const List: Story = {
161
- render: () => <AttachmentsElement items={sampleItems} variant="list" showMediaType />,
162
- };
163
-
164
- /** Removable rows — clicking the remove button fires a `remove` event. */
165
- export const RemovableList: Story = {
166
- name: 'Removable List',
167
- render: () => <AttachmentsElement items={sampleItems} variant="list" removable />,
168
- };
169
-
170
- /** Image thumbnails in a grid (real `<img>` previews). */
171
- export const ImageGrid: Story = {
172
- name: 'Image Grid',
173
- render: () => <AttachmentsElement items={imageItems} variant="grid" />,
174
- };
175
-
176
- /** Inline chips with a hover-card preview — hover an image chip to see its
177
- * thumbnail enlarge in the hover card. */
178
- export const WithHoverCard: Story = {
179
- name: 'With Hover Card',
180
- render: () => <AttachmentsElement items={imageItems} variant="inline" hoverCard />,
181
- parameters: { docs: { source: { code: HOVER_SNIPPET, language: 'html' } } },
182
- };
183
-
184
- /** Grid tiles with a hover-card preview — the tile shows only the image; the
185
- * filename + media type surface in the hover card. (Grid previously skipped
186
- * the hover card entirely.) */
187
- export const GridWithHoverCard: Story = {
188
- name: 'Grid With Hover Card',
189
- render: () => <AttachmentsElement items={imageItems} variant="grid" hoverCard />,
190
- };