@kitn.ai/ui 0.28.0 → 0.30.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 (615) hide show
  1. package/README.md +11 -7
  2. package/dist/{Icon-DObhsRtm.js → Icon-BzBET3E-.js} +1 -1
  3. package/dist/{action-icons-CcgNN2oT.js → action-icons-DaW2pU6m.js} +1 -1
  4. package/dist/agent-tooling/construct/public.d.ts +15 -0
  5. package/dist/agent-tooling/construct/schema.d.ts +111 -0
  6. package/dist/arrow-down-D783iMJj.js +1 -0
  7. package/dist/arrow-left-0VLM5kyg.js +1 -0
  8. package/dist/artifact-DGjzHYUT.js +1 -0
  9. package/dist/{attachments-Qr4kg-2b.js → attachments-YvXHlg88.js} +1 -1
  10. package/dist/{audio-visualizer-DToYdfSc.js → audio-visualizer-9lz5IHsL.js} +1 -1
  11. package/dist/{badge-CdEu_jn2.js → badge-Dh_vp8A5.js} +1 -1
  12. package/dist/{bell-DQAAOpDz.js → bell-CT7_WUwS.js} +1 -1
  13. package/dist/{button-DkuOnGLy.js → button-C_3te6fm.js} +1 -1
  14. package/dist/{card-renderer-Jx70m6_l.js → card-renderer-DZVaGH2e.js} +1 -1
  15. package/dist/check-CiEOVnEN.js +1 -0
  16. package/dist/{checkbox-D7iRB3nL.js → checkbox-Bu2T2e0U.js} +1 -1
  17. package/dist/{checkbox-group-B2_rpoPM.js → checkbox-group-BiryEXPQ.js} +1 -1
  18. package/dist/chevron-down-CSobuZRG.js +1 -0
  19. package/dist/chevron-right-DR9ZAP-2.js +1 -0
  20. package/dist/{choice-card-m0BYqqOK.js → choice-card-CM6IjkmL.js} +1 -1
  21. package/dist/circle-BC66EYF7.js +1 -0
  22. package/dist/circle-check-BqmahW0O.js +1 -0
  23. package/dist/{circle-x-BPG0iPst.js → circle-x-Bk-dA5Wf.js} +1 -1
  24. package/dist/{code-block-ClMLKb7C.js → code-block-B26t-Q7q.js} +1 -1
  25. package/dist/{collapsible-B4DlWicL.js → collapsible-Bhc636Cf.js} +1 -1
  26. package/dist/components/builder-composer-triggers.d.ts +62 -0
  27. package/dist/components/builder-layout.d.ts +54 -0
  28. package/dist/components/builder-message-actions.d.ts +72 -0
  29. package/dist/components/builder-panel.d.ts +189 -0
  30. package/dist/components/builder-preview.d.ts +11 -0
  31. package/dist/components/builder-shell-controls.d.ts +69 -0
  32. package/dist/components/builder-skeleton.d.ts +58 -0
  33. package/dist/components/builder-start.d.ts +75 -0
  34. package/dist/components/builder-workspace-variants.d.ts +23 -0
  35. package/dist/components/captions.d.ts +66 -0
  36. package/dist/{composer-sQ0HcvyG.js → composer-DMI85B6j.js} +1 -1
  37. package/dist/{confirm-card-rQWDQsnC.js → confirm-card-B0YIAwXp.js} +1 -1
  38. package/dist/construct-cli.es.js +3 -3
  39. package/dist/construct.d.ts +5 -0
  40. package/dist/construct.js +327 -0
  41. package/dist/{context-0kg4ZX1J.js → context-DWgfhqWp.js} +1 -1
  42. package/dist/controllable-BagRpyHv.js +1 -0
  43. package/dist/{conversation-item-BxwQLaFJ.js → conversation-item-BsOsVGmT.js} +1 -1
  44. package/dist/{conversation-list-BCfGN1JU.js → conversation-list-aX3Vtc7L.js} +1 -1
  45. package/dist/{copy-n9u9rqpi.js → copy-BmEwsNhJ.js} +1 -1
  46. package/dist/core-C8fzo39E.js +1 -12
  47. package/dist/{create-tween-uPkArjIG.js → create-tween-CNOAU3Fx.js} +1 -1
  48. package/dist/{create-tween-C-q-JCM-.js → create-tween-WfqiENls.js} +1 -1
  49. package/dist/{create-tween-CRrJXxBd.js → create-tween-wlFtW9Kh.js} +1 -1
  50. package/dist/{create-tween-DZ3RRDHD.js → create-tween-zt79ba32.js} +1 -1
  51. package/dist/{default-input-CaMrJkgH.js → default-input-DMV5Eaze.js} +1 -1
  52. package/dist/define-CI0y3eE4.js +1 -0
  53. package/dist/define.js +40 -40
  54. package/dist/define.server.js +45 -45
  55. package/dist/{disclosure-WUImBbDv.js → disclosure-NnACBxsC.js} +1 -1
  56. package/dist/{dropdown-wZVeJOMd.js → dropdown-DT7G0RGR.js} +1 -1
  57. package/dist/elements/agent-card.js +1 -1
  58. package/dist/elements/artifact.js +1 -1
  59. package/dist/elements/attachments.js +1 -1
  60. package/dist/elements/audio-visualizer.js +1 -1
  61. package/dist/elements/avatar.js +1 -1
  62. package/dist/elements/badge.js +1 -1
  63. package/dist/elements/button.js +1 -1
  64. package/dist/elements/card.js +1 -1
  65. package/dist/elements/cards.js +1 -1
  66. package/dist/elements/chain-of-thought.js +1 -1
  67. package/dist/elements/chat-scope-picker.js +1 -1
  68. package/dist/elements/chat-workspace.js +1 -1
  69. package/dist/elements/chat.js +1 -1
  70. package/dist/elements/checkbox-group.js +1 -1
  71. package/dist/elements/checkbox.js +1 -1
  72. package/dist/elements/checkpoint.js +1 -1
  73. package/dist/elements/choice.js +1 -1
  74. package/dist/elements/coachmark.js +1 -1
  75. package/dist/elements/code-block.js +1 -1
  76. package/dist/elements/command.js +1 -1
  77. package/dist/elements/compare.js +1 -1
  78. package/dist/elements/composer.js +1 -1
  79. package/dist/elements/confirm-card.js +1 -1
  80. package/dist/elements/context-meter.js +1 -1
  81. package/dist/elements/conversation-item.js +1 -1
  82. package/dist/elements/conversation-list.js +1 -1
  83. package/dist/elements/dialog.js +1 -1
  84. package/dist/elements/dock.js +1 -1
  85. package/dist/elements/dropdown.js +1 -1
  86. package/dist/elements/editable-label.js +1 -1
  87. package/dist/elements/embed.js +1 -1
  88. package/dist/elements/empty.js +1 -1
  89. package/dist/elements/feedback-bar.js +1 -1
  90. package/dist/elements/file-tree.js +1 -1
  91. package/dist/elements/file-upload.js +1 -1
  92. package/dist/elements/form.js +1 -1
  93. package/dist/elements/hover-card.js +1 -1
  94. package/dist/elements/icon.js +1 -1
  95. package/dist/elements/image.js +1 -1
  96. package/dist/elements/input.js +1 -1
  97. package/dist/elements/kbd.js +1 -1
  98. package/dist/elements/link-preview.js +1 -1
  99. package/dist/elements/loader.js +1 -1
  100. package/dist/elements/markdown.js +1 -1
  101. package/dist/elements/menu.js +1 -1
  102. package/dist/elements/message-skills.js +1 -1
  103. package/dist/elements/message.js +1 -1
  104. package/dist/elements/model-switcher.js +1 -1
  105. package/dist/elements/nav.js +1 -1
  106. package/dist/elements/notice.js +1 -1
  107. package/dist/elements/pane-grid.js +1 -1
  108. package/dist/elements/pane-group.js +1 -1
  109. package/dist/elements/pane.js +1 -1
  110. package/dist/elements/popover.js +1 -1
  111. package/dist/elements/progress-bar.js +1 -1
  112. package/dist/elements/prompt-dock.js +1 -1
  113. package/dist/elements/prompt-input.js +1 -1
  114. package/dist/elements/prompt-suggestions.js +1 -1
  115. package/dist/elements/radio-group.js +1 -1
  116. package/dist/elements/reasoning.js +1 -1
  117. package/dist/elements/remote.js +1 -1
  118. package/dist/elements/resizable.js +1 -1
  119. package/dist/elements/response-stream.js +1 -1
  120. package/dist/elements/screen.js +1 -1
  121. package/dist/elements/scroll-area.js +1 -1
  122. package/dist/elements/scroll-button.js +1 -1
  123. package/dist/elements/search.js +1 -1
  124. package/dist/elements/segmented.js +1 -1
  125. package/dist/elements/select.js +1 -1
  126. package/dist/elements/separator.js +1 -1
  127. package/dist/elements/setting-item.js +1 -1
  128. package/dist/elements/settings-group.js +1 -1
  129. package/dist/elements/skeleton.js +1 -1
  130. package/dist/elements/slider.js +1 -1
  131. package/dist/elements/source.js +1 -1
  132. package/dist/elements/status.js +1 -1
  133. package/dist/elements/switch.js +1 -1
  134. package/dist/elements/tabs.js +1 -1
  135. package/dist/elements/tasks.js +1 -1
  136. package/dist/elements/text-shimmer.js +1 -1
  137. package/dist/elements/thinking-bar.js +1 -1
  138. package/dist/elements/thread.js +1 -1
  139. package/dist/elements/toast.js +1 -1
  140. package/dist/elements/tool.js +1 -1
  141. package/dist/elements/tooltip.js +1 -1
  142. package/dist/elements/voice-input.js +1 -1
  143. package/dist/elements/voice-output.js +1 -1
  144. package/dist/{ellipsis-CbOpJnU3.js → ellipsis-6pJ7SxYT.js} +1 -1
  145. package/dist/{embed-CrfjkbUG.js → embed-BMje-nxj.js} +1 -1
  146. package/dist/engine-javascript-C1x7zo1_.js +1 -141
  147. package/dist/{external-link-ByXAwBBQ.js → external-link-Beh9DKeR.js} +1 -1
  148. package/dist/{file-text-DMib2qwt.js → file-text-D1GPfZ8Q.js} +1 -1
  149. package/dist/{file-tree-CJqM2aP7.js → file-tree-Dwj2lqg-.js} +1 -1
  150. package/dist/{folder-_BAb929C.js → folder-b6D8x1DY.js} +1 -1
  151. package/dist/{form-DSZgZQZk.js → form-DWgdxDXu.js} +1 -1
  152. package/dist/{hover-card-BQbul9eq.js → hover-card-CWRkqm40.js} +1 -1
  153. package/dist/{icon-CdcfRhYI.js → icon-CL0jdhsf.js} +1 -1
  154. package/dist/index.js +1741 -1725
  155. package/dist/index.server.js +1582 -1566
  156. package/dist/{info-DsFjGuI_.js → info-0cOUherQ.js} +1 -1
  157. package/dist/{input-DKbmkMos.js → input-BH6Ru91Q.js} +1 -1
  158. package/dist/kai.es.js +1 -1
  159. package/dist/{kbd-PvdGhX4s.js → kbd-DRAnVtNX.js} +1 -1
  160. package/dist/{link-zF8PzWfF.js → link-Dlr0vssB.js} +1 -1
  161. package/dist/{link-preview-DbM1866N.js → link-preview-DODgRyV9.js} +1 -1
  162. package/dist/loader-KvJB6NrT.js +1 -0
  163. package/dist/{markdown-LMvmAyBk.js → markdown-DX9tuJVj.js} +1 -1
  164. package/dist/mcp.es.js +9 -5
  165. package/dist/{message-BYZECyek.js → message-BqQ7Ot5q.js} +1 -1
  166. package/dist/{message-BSsgvHvf.js → message-DkaGfBd8.js} +1 -1
  167. package/dist/message-circle-BPpp5QKv.js +1 -0
  168. package/dist/message-square-BLbsd9BJ.js +1 -0
  169. package/dist/{minimize-2-BQRoBV1V.js → minimize-2-CyOHJwcN.js} +1 -1
  170. package/dist/{model-switcher-CMpCOYcB.js → model-switcher-0hrKDiK2.js} +1 -1
  171. package/dist/{overlay-Cb-MkyDa.js → overlay-DBMFXie6.js} +1 -1
  172. package/dist/{panel-right-i8warFxT.js → panel-right-t8SWJL6e.js} +1 -1
  173. package/dist/{paperclip-ByY3UVO6.js → paperclip-CdzuOjbU.js} +1 -1
  174. package/dist/play-BXy1u7rW.js +1 -0
  175. package/dist/primitives/use-auto-resize.d.ts +11 -0
  176. package/dist/{progress-bar-jVAHvMUf.js → progress-bar-CiBtxMWT.js} +1 -1
  177. package/dist/{prompt-suggestion-CD-qtNgC.js → prompt-suggestion-I_DHP21i.js} +1 -1
  178. package/dist/{radio-BsoBMhkF.js → radio-C_p3n39l.js} +1 -1
  179. package/dist/{reasoning-4kBPtlTx.js → reasoning-BDwy_tIe.js} +1 -1
  180. package/dist/register-impl-DvEnhIxx.js +424 -0
  181. package/dist/{resizable-uPmY9VY-.js → resizable-SYC-fStM.js} +1 -1
  182. package/dist/{rotate-ccw-B2xn93py.js → rotate-ccw-B1nwmwuY.js} +1 -1
  183. package/dist/{rotate-cw-CMVLoCyH.js → rotate-cw-CLAnBcm1.js} +1 -1
  184. package/dist/{scroll-area-BqLUo8ZZ.js → scroll-area-zRyXoLhI.js} +1 -1
  185. package/dist/{scroll-button-DslXiJyL.js → scroll-button-jzrbYCG9.js} +1 -1
  186. package/dist/{select-2cLRtPGT.js → select-DM-0nEe0.js} +1 -1
  187. package/dist/{separator-BWQtNJcM.js → separator-BToOOoOt.js} +1 -1
  188. package/dist/{settings-BBR63jLg.js → settings-PaGo_S4U.js} +1 -1
  189. package/dist/{settings-group-B2ciy-Iw.js → settings-group-BFXGIfXq.js} +1 -1
  190. package/dist/{skeleton-CkHI-HgC.js → skeleton-DYpmFnnm.js} +1 -1
  191. package/dist/{slider-DDR9U-i0.js → slider-ebutAmkQ.js} +1 -1
  192. package/dist/{solid-DruVOXnf.js → solid-15v_3WVL.js} +3563 -3412
  193. package/dist/{solid-BzCFdL25.js → solid-5P-otgdi.js} +4502 -4296
  194. package/dist/solid.d.ts +6 -0
  195. package/dist/solid.js +259 -254
  196. package/dist/solid.server.js +259 -254
  197. package/dist/{source-GEnFF528.js → source-c1gpRl9h.js} +1 -1
  198. package/dist/{star-CilHq8GP.js → star-pcV_3LqF.js} +1 -1
  199. package/dist/{store-Ciyk6eZG.js → store-CSgbFFCg.js} +1 -1
  200. package/dist/{switch-KkeQIbuH.js → switch-Bh2OdLV2.js} +1 -1
  201. package/dist/{tasks-card-BrN4bggJ.js → tasks-card-CbqQAn2S.js} +1 -1
  202. package/dist/text-shimmer-BSzgEnDH.js +1 -0
  203. package/dist/textarea-DrYNt_0z.js +1 -0
  204. package/dist/theme.tokens.css +22 -21
  205. package/dist/{thumbs-up-CsT9Wzb9.js → thumbs-up-BL3-NenK.js} +1 -1
  206. package/dist/{toast-store-tgK6MuMv.js → toast-store-DkOlYczt.js} +1 -1
  207. package/dist/{tool-DzUjIBT8.js → tool-CeIWUVUe.js} +1 -1
  208. package/dist/{tooltip-Bkkg_4t0.js → tooltip-GA-nmg06.js} +1 -1
  209. package/dist/{trash-2-jBKxjGGQ.js → trash-2-CT66QWlm.js} +1 -1
  210. package/dist/{triangle-alert-DlQ68ppf.js → triangle-alert-CeHLWxhD.js} +1 -1
  211. package/dist/ui/color-field.d.ts +48 -0
  212. package/dist/ui/textarea.d.ts +4 -0
  213. package/dist/ui/toggle-chip.d.ts +40 -0
  214. package/dist/{upload-TcAHXv9W.js → upload-9Csb0F0J.js} +1 -1
  215. package/dist/{use-card-resolution-DaZqAdWf.js → use-card-resolution-Zg0a08Z-.js} +1 -1
  216. package/dist/{variant-aurora-DbW_OWL2.js → variant-aurora-4VBQHIKV.js} +1 -1
  217. package/dist/{variant-aurora-CNmfHhcx.js → variant-aurora-DBeCAQNk.js} +2 -2
  218. package/dist/{variant-aurora-D6GsdTPA.js → variant-aurora-FzHVXHby.js} +2 -2
  219. package/dist/{variant-aurora-BhLuYxJR.js → variant-aurora-LE3fqxgw.js} +1 -1
  220. package/dist/{variant-custom-BvYHR62b.js → variant-custom-AFRGcOBS.js} +1 -1
  221. package/dist/{variant-custom-DV2x254s.js → variant-custom-BQkNuPpE.js} +2 -2
  222. package/dist/{variant-custom-BRvaNHSi.js → variant-custom-DI5R0rln.js} +1 -1
  223. package/dist/{variant-custom-DMTrEO5w.js → variant-custom-WWnrrRHS.js} +2 -2
  224. package/dist/{variant-wave-CyBueXj9.js → variant-wave-DUCbH5oI.js} +2 -2
  225. package/dist/{variant-wave-BNMGrDfj.js → variant-wave-DuQV7DhQ.js} +2 -2
  226. package/dist/{variant-wave-BpDd8t3Z.js → variant-wave-nSI2sfII.js} +1 -1
  227. package/dist/{variant-wave-sp-qwsdI.js → variant-wave-wTP5v_jU.js} +1 -1
  228. package/dist/x-eiO9V6J6.js +1 -0
  229. package/{src/elements/styles.css → kit-base.css} +27 -44
  230. package/package.json +32 -17
  231. package/solid.css +33 -0
  232. package/theme.css +39 -23
  233. package/bin/route.test.js +0 -58
  234. package/dist/arrow-down-CjRU3JgV.js +0 -1
  235. package/dist/arrow-left-Bnpb1UEW.js +0 -1
  236. package/dist/artifact-Bwt7OgcR.js +0 -1
  237. package/dist/check-njkVdZu2.js +0 -1
  238. package/dist/chevron-down-B72s6PXR.js +0 -1
  239. package/dist/chevron-right-BatuHzUm.js +0 -1
  240. package/dist/circle-check-B62pODB3.js +0 -1
  241. package/dist/circle-zx0ByzY9.js +0 -1
  242. package/dist/controllable-CnGpMF6r.js +0 -1
  243. package/dist/define-By-uL588.js +0 -1
  244. package/dist/loader-BM4CEz4G.js +0 -1
  245. package/dist/message-circle-DruwObfX.js +0 -1
  246. package/dist/message-square-BG6q6mlm.js +0 -1
  247. package/dist/play-BvKKq3fX.js +0 -1
  248. package/dist/register-impl-B1hLkrI8.js +0 -424
  249. package/dist/text-shimmer-Dcj1MHuq.js +0 -1
  250. package/dist/textarea-Dpvbngbg.js +0 -1
  251. package/dist/x-Z5UntkIJ.js +0 -1
  252. package/src/agent-tooling/README.md +0 -192
  253. package/src/agent-tooling/archetypes.ts +0 -205
  254. package/src/agent-tooling/catalog/README.md +0 -676
  255. package/src/agent-tooling/catalog/catalog-types.ts +0 -231
  256. package/src/agent-tooling/catalog/fabrications.ts +0 -96
  257. package/src/agent-tooling/catalog/invariants.ts +0 -284
  258. package/src/agent-tooling/catalog/labs-titles.ts +0 -114
  259. package/src/agent-tooling/catalog/scenarios.ts +0 -87
  260. package/src/agent-tooling/catalog/surfaces.ts +0 -347
  261. package/src/agent-tooling/construct/cli-entry.ts +0 -8
  262. package/src/agent-tooling/construct/cli.ts +0 -147
  263. package/src/agent-tooling/construct/codegen.ts +0 -1635
  264. package/src/agent-tooling/construct/construct.v1.schema.json +0 -319
  265. package/src/agent-tooling/construct/dev.ts +0 -148
  266. package/src/agent-tooling/construct/fixtures/demo-widget.construct.json +0 -7
  267. package/src/agent-tooling/construct/fixtures/ops-console.construct.json +0 -44
  268. package/src/agent-tooling/construct/fixtures/owner-widget.construct.json +0 -32
  269. package/src/agent-tooling/construct/schema.ts +0 -452
  270. package/src/agent-tooling/integrations/anthropic.ts +0 -442
  271. package/src/agent-tooling/integrations/cloudflare.ts +0 -218
  272. package/src/agent-tooling/integrations/langgraph.ts +0 -133
  273. package/src/agent-tooling/integrations/mastra.ts +0 -182
  274. package/src/agent-tooling/integrations/mock.ts +0 -148
  275. package/src/agent-tooling/integrations/ollama.ts +0 -97
  276. package/src/agent-tooling/integrations/openai.ts +0 -95
  277. package/src/agent-tooling/integrations/openrouter.ts +0 -82
  278. package/src/agent-tooling/integrations/pi.ts +0 -176
  279. package/src/agent-tooling/integrations/pydantic-ai.ts +0 -108
  280. package/src/agent-tooling/integrations/vercel-ai-sdk.ts +0 -398
  281. package/src/agent-tooling/mcp/css-raw.d.ts +0 -12
  282. package/src/agent-tooling/mcp/manifest.ts +0 -422
  283. package/src/agent-tooling/mcp/server.ts +0 -116
  284. package/src/agent-tooling/mcp/stdio.ts +0 -18
  285. package/src/agent-tooling/mcp/tools/construct.ts +0 -130
  286. package/src/agent-tooling/mcp/tools/debug.ts +0 -621
  287. package/src/agent-tooling/mcp/tools/reference.ts +0 -980
  288. package/src/agent-tooling/mcp/tools/scaffold.ts +0 -6708
  289. package/src/agent-tooling/mcp/tools/theme.ts +0 -456
  290. package/src/agent-tooling/mcp/tools/types.ts +0 -14
  291. package/src/agent-tooling/mcp/validate-args.ts +0 -141
  292. package/src/agent-tooling/recipes/composed-thread.ts +0 -714
  293. package/src/agent-tooling/recipes/index.ts +0 -22
  294. package/src/agent-tooling/recipes/types.ts +0 -32
  295. package/src/agent-tooling/registry.ts +0 -132
  296. package/src/agent-tooling/route-emit.ts +0 -305
  297. package/src/agent-tooling/types.ts +0 -390
  298. package/src/components/artifact-card.tsx +0 -120
  299. package/src/components/artifact.tsx +0 -914
  300. package/src/components/attachment-types.ts +0 -66
  301. package/src/components/attachments.tsx +0 -536
  302. package/src/components/audio-visualizer/audio-visualizer.voice-fixture.ts +0 -257
  303. package/src/components/audio-visualizer/aurora.glsl.ts +0 -330
  304. package/src/components/audio-visualizer/fit-scale.ts +0 -112
  305. package/src/components/audio-visualizer/index.tsx +0 -528
  306. package/src/components/audio-visualizer/labs/lab-choreography.ts +0 -187
  307. package/src/components/audio-visualizer/labs/lab-shaders.ts +0 -363
  308. package/src/components/audio-visualizer/labs/lab-visualizer.tsx +0 -102
  309. package/src/components/audio-visualizer/shader-canvas.tsx +0 -876
  310. package/src/components/audio-visualizer/sizes.ts +0 -54
  311. package/src/components/audio-visualizer/variant-aurora.tsx +0 -305
  312. package/src/components/audio-visualizer/variant-bar.tsx +0 -175
  313. package/src/components/audio-visualizer/variant-custom.tsx +0 -344
  314. package/src/components/audio-visualizer/variant-grid.tsx +0 -175
  315. package/src/components/audio-visualizer/variant-radial.tsx +0 -163
  316. package/src/components/audio-visualizer/variant-wave.tsx +0 -130
  317. package/src/components/audio-visualizer/wave.glsl.ts +0 -130
  318. package/src/components/card-fallback.tsx +0 -60
  319. package/src/components/card-renderer.tsx +0 -220
  320. package/src/components/card.tsx +0 -212
  321. package/src/components/chain-of-thought.tsx +0 -348
  322. package/src/components/chat-container.tsx +0 -89
  323. package/src/components/chat-scope-picker.tsx +0 -57
  324. package/src/components/chat-thread.tsx +0 -1014
  325. package/src/components/checkpoint.tsx +0 -88
  326. package/src/components/choice-card.tsx +0 -743
  327. package/src/components/coachmark.tsx +0 -249
  328. package/src/components/code-block.tsx +0 -181
  329. package/src/components/composer-dom.ts +0 -159
  330. package/src/components/composer-highlight.ts +0 -242
  331. package/src/components/composer-history.ts +0 -82
  332. package/src/components/composer.tsx +0 -1075
  333. package/src/components/confirm-card.tsx +0 -402
  334. package/src/components/context.tsx +0 -377
  335. package/src/components/conversation-item.tsx +0 -241
  336. package/src/components/conversation-list.tsx +0 -429
  337. package/src/components/conversation-panel.tsx +0 -118
  338. package/src/components/dismissed-stub.tsx +0 -80
  339. package/src/components/embed.tsx +0 -200
  340. package/src/components/empty.tsx +0 -177
  341. package/src/components/feedback-bar.tsx +0 -166
  342. package/src/components/file-tree.tsx +0 -530
  343. package/src/components/file-upload.tsx +0 -167
  344. package/src/components/form-widgets.tsx +0 -525
  345. package/src/components/form.tsx +0 -1296
  346. package/src/components/home-panel.tsx +0 -159
  347. package/src/components/image.tsx +0 -65
  348. package/src/components/link-preview.tsx +0 -195
  349. package/src/components/loader.tsx +0 -367
  350. package/src/components/markdown.tsx +0 -162
  351. package/src/components/message-skills.tsx +0 -40
  352. package/src/components/message.tsx +0 -765
  353. package/src/components/model-switcher.tsx +0 -132
  354. package/src/components/prompt-input.tsx +0 -188
  355. package/src/components/prompt-suggestion.tsx +0 -150
  356. package/src/components/reasoning.tsx +0 -293
  357. package/src/components/response-compare-types.ts +0 -152
  358. package/src/components/response-compare.tsx +0 -455
  359. package/src/components/response-stream.tsx +0 -109
  360. package/src/components/screen.tsx +0 -181
  361. package/src/components/scroll-button.tsx +0 -93
  362. package/src/components/source.tsx +0 -192
  363. package/src/components/tasks-card.tsx +0 -801
  364. package/src/components/text-shimmer.tsx +0 -37
  365. package/src/components/thinking-bar.tsx +0 -50
  366. package/src/components/thread.tsx +0 -228
  367. package/src/components/toast.tsx +0 -503
  368. package/src/components/tool-classify.ts +0 -26
  369. package/src/components/tool-types.ts +0 -49
  370. package/src/components/tool.tsx +0 -190
  371. package/src/components/use-card-resolution.ts +0 -44
  372. package/src/components/voice-input.tsx +0 -222
  373. package/src/components/voice-output.tsx +0 -242
  374. package/src/components/widget-tab-bar.tsx +0 -73
  375. package/src/components/workspace-shell.tsx +0 -285
  376. package/src/diagnostics/hook.ts +0 -352
  377. package/src/diagnostics/index.ts +0 -82
  378. package/src/diagnostics/report-request.ts +0 -296
  379. package/src/elements/agent-card.tsx +0 -67
  380. package/src/elements/artifact.tsx +0 -194
  381. package/src/elements/attachments.tsx +0 -140
  382. package/src/elements/audio-visualizer.tsx +0 -227
  383. package/src/elements/autoloader.ts +0 -89
  384. package/src/elements/avatar.tsx +0 -33
  385. package/src/elements/badge.tsx +0 -32
  386. package/src/elements/button.tsx +0 -149
  387. package/src/elements/card.tsx +0 -133
  388. package/src/elements/cards.tsx +0 -266
  389. package/src/elements/chain-of-thought.tsx +0 -141
  390. package/src/elements/chat-scope-picker.tsx +0 -65
  391. package/src/elements/chat-types.ts +0 -102
  392. package/src/elements/chat-workspace.tsx +0 -188
  393. package/src/elements/chat.tsx +0 -304
  394. package/src/elements/checkbox-group.tsx +0 -164
  395. package/src/elements/checkbox.tsx +0 -134
  396. package/src/elements/checkpoint.tsx +0 -47
  397. package/src/elements/choice.tsx +0 -100
  398. package/src/elements/coachmark.tsx +0 -90
  399. package/src/elements/code-block.tsx +0 -60
  400. package/src/elements/command.tsx +0 -197
  401. package/src/elements/compare.tsx +0 -111
  402. package/src/elements/compiled.css +0 -2
  403. package/src/elements/composer.tsx +0 -162
  404. package/src/elements/confirm-card.tsx +0 -76
  405. package/src/elements/context-meter.tsx +0 -107
  406. package/src/elements/conversation-item.tsx +0 -120
  407. package/src/elements/conversation-list.tsx +0 -203
  408. package/src/elements/css.ts +0 -5
  409. package/src/elements/default-input.tsx +0 -392
  410. package/src/elements/define-entry.ts +0 -12
  411. package/src/elements/define.tsx +0 -563
  412. package/src/elements/diagnostic-events.ts +0 -114
  413. package/src/elements/dialog.tsx +0 -145
  414. package/src/elements/disclosure.ts +0 -95
  415. package/src/elements/dock.tsx +0 -215
  416. package/src/elements/dropdown.tsx +0 -123
  417. package/src/elements/editable-label.tsx +0 -140
  418. package/src/elements/element-data-types.ts +0 -152
  419. package/src/elements/element-diagnostics.ts +0 -392
  420. package/src/elements/element-manifest.json +0 -354
  421. package/src/elements/element-nonscalar.json +0 -187
  422. package/src/elements/element-types.d.ts +0 -4353
  423. package/src/elements/embed.tsx +0 -35
  424. package/src/elements/empty.tsx +0 -29
  425. package/src/elements/feedback-bar.tsx +0 -66
  426. package/src/elements/file-tree.tsx +0 -62
  427. package/src/elements/file-upload.tsx +0 -44
  428. package/src/elements/form.tsx +0 -94
  429. package/src/elements/hover-card.tsx +0 -80
  430. package/src/elements/icon.tsx +0 -41
  431. package/src/elements/image.tsx +0 -32
  432. package/src/elements/input.tsx +0 -492
  433. package/src/elements/kbd.tsx +0 -45
  434. package/src/elements/link-preview.tsx +0 -34
  435. package/src/elements/loader.tsx +0 -25
  436. package/src/elements/markdown.tsx +0 -38
  437. package/src/elements/menu.tsx +0 -241
  438. package/src/elements/message-skills.tsx +0 -83
  439. package/src/elements/message.tsx +0 -361
  440. package/src/elements/model-switcher.tsx +0 -121
  441. package/src/elements/nav.tsx +0 -87
  442. package/src/elements/notice.tsx +0 -53
  443. package/src/elements/pane-grid.tsx +0 -111
  444. package/src/elements/pane-group.tsx +0 -119
  445. package/src/elements/pane.tsx +0 -129
  446. package/src/elements/popover.tsx +0 -81
  447. package/src/elements/progress-bar.tsx +0 -39
  448. package/src/elements/prompt-dock.tsx +0 -82
  449. package/src/elements/prompt-input.tsx +0 -240
  450. package/src/elements/prompt-suggestions.tsx +0 -113
  451. package/src/elements/radio-group.tsx +0 -129
  452. package/src/elements/reasoning.tsx +0 -71
  453. package/src/elements/register-impl.ts +0 -148
  454. package/src/elements/register.ts +0 -76
  455. package/src/elements/remote.tsx +0 -225
  456. package/src/elements/resizable.globals.d.ts +0 -36
  457. package/src/elements/resizable.tsx +0 -704
  458. package/src/elements/response-stream.tsx +0 -40
  459. package/src/elements/screen.tsx +0 -90
  460. package/src/elements/scroll-area.tsx +0 -33
  461. package/src/elements/scroll-button.tsx +0 -179
  462. package/src/elements/search.tsx +0 -185
  463. package/src/elements/segmented.tsx +0 -129
  464. package/src/elements/select.tsx +0 -165
  465. package/src/elements/separator.tsx +0 -36
  466. package/src/elements/setting-item.tsx +0 -50
  467. package/src/elements/settings-group.tsx +0 -37
  468. package/src/elements/skeleton.tsx +0 -45
  469. package/src/elements/slider.tsx +0 -171
  470. package/src/elements/slot-text.ts +0 -73
  471. package/src/elements/slots.ts +0 -787
  472. package/src/elements/source.tsx +0 -126
  473. package/src/elements/status.tsx +0 -42
  474. package/src/elements/switch.tsx +0 -118
  475. package/src/elements/tabs.tsx +0 -95
  476. package/src/elements/tasks.tsx +0 -103
  477. package/src/elements/text-shimmer.tsx +0 -28
  478. package/src/elements/thinking-bar.tsx +0 -43
  479. package/src/elements/thread.tsx +0 -139
  480. package/src/elements/toast.tsx +0 -106
  481. package/src/elements/tool.tsx +0 -78
  482. package/src/elements/tooltip.tsx +0 -85
  483. package/src/elements/validate-messages.ts +0 -76
  484. package/src/elements/voice-input.tsx +0 -100
  485. package/src/elements/voice-output.tsx +0 -82
  486. package/src/index.ts +0 -430
  487. package/src/primitives/audio-bands.ts +0 -174
  488. package/src/primitives/card-component-types.ts +0 -63
  489. package/src/primitives/card-contract.ts +0 -80
  490. package/src/primitives/card-data-types.ts +0 -361
  491. package/src/primitives/card-host.tsx +0 -37
  492. package/src/primitives/card-recovery.ts +0 -160
  493. package/src/primitives/card-registry.tsx +0 -78
  494. package/src/primitives/card-resolution.ts +0 -36
  495. package/src/primitives/card-routing.ts +0 -85
  496. package/src/primitives/card-schemas/artifact.schema.json +0 -92
  497. package/src/primitives/card-schemas/card-envelope.schema.json +0 -14
  498. package/src/primitives/card-schemas/card-event.schema.json +0 -12
  499. package/src/primitives/card-schemas/choice.schema.json +0 -75
  500. package/src/primitives/card-schemas/confirm.schema.json +0 -65
  501. package/src/primitives/card-schemas/embed.schema.json +0 -63
  502. package/src/primitives/card-schemas/form.result.schema.json +0 -7
  503. package/src/primitives/card-schemas/form.schema.json +0 -53
  504. package/src/primitives/card-schemas/link.schema.json +0 -54
  505. package/src/primitives/card-schemas/tasks.result.schema.json +0 -16
  506. package/src/primitives/card-schemas/tasks.schema.json +0 -83
  507. package/src/primitives/card-tags.ts +0 -61
  508. package/src/primitives/card-validate-cards.ts +0 -255
  509. package/src/primitives/card-validate-schemas.ts +0 -58
  510. package/src/primitives/card-validate.ts +0 -131
  511. package/src/primitives/chat-config.tsx +0 -103
  512. package/src/primitives/composer-model.ts +0 -49
  513. package/src/primitives/composer-triggers.ts +0 -35
  514. package/src/primitives/controllable.ts +0 -21
  515. package/src/primitives/conversation-store.ts +0 -248
  516. package/src/primitives/create-kai-chat.ts +0 -66
  517. package/src/primitives/create-tween.ts +0 -266
  518. package/src/primitives/embed-providers.ts +0 -254
  519. package/src/primitives/field-mask.ts +0 -256
  520. package/src/primitives/field-semantics.ts +0 -115
  521. package/src/primitives/highlighter.ts +0 -157
  522. package/src/primitives/input-mask.ts +0 -853
  523. package/src/primitives/link-preview.ts +0 -87
  524. package/src/primitives/message-feedback.ts +0 -124
  525. package/src/primitives/pdf-preview.ts +0 -121
  526. package/src/primitives/toast-store.ts +0 -338
  527. package/src/primitives/url-scheme-policy.ts +0 -70
  528. package/src/primitives/use-audio-analysis.ts +0 -340
  529. package/src/primitives/use-auto-resize.ts +0 -31
  530. package/src/primitives/use-resize-observer.ts +0 -45
  531. package/src/primitives/use-sequencer.ts +0 -72
  532. package/src/primitives/use-speech-recognition.ts +0 -146
  533. package/src/primitives/use-stick-to-bottom.ts +0 -75
  534. package/src/primitives/use-text-stream.ts +0 -143
  535. package/src/primitives/use-voice-recorder.ts +0 -62
  536. package/src/primitives/visualizer-sequences.ts +0 -350
  537. package/src/remote/host-embed.ts +0 -345
  538. package/src/remote/index.ts +0 -2
  539. package/src/remote/origin.ts +0 -30
  540. package/src/remote/provider-runtime.ts +0 -262
  541. package/src/remote/provider.ts +0 -2
  542. package/src/remote/validate.ts +0 -22
  543. package/src/remote/version.ts +0 -12
  544. package/src/remote/wire.ts +0 -48
  545. package/src/schemas/from-tool-call.ts +0 -151
  546. package/src/schemas/index.ts +0 -341
  547. package/src/schemas/provider-subsets.ts +0 -538
  548. package/src/schemas/registry.ts +0 -355
  549. package/src/schemas/tool-defs.ts +0 -793
  550. package/src/solid.ts +0 -173
  551. package/src/state/index.ts +0 -44
  552. package/src/state/messages.ts +0 -53
  553. package/src/state/mock.ts +0 -297
  554. package/src/state/parts.ts +0 -295
  555. package/src/state/persistence.ts +0 -180
  556. package/src/state/stream.ts +0 -246
  557. package/src/state/suggestions.ts +0 -9
  558. package/src/state/threads.ts +0 -142
  559. package/src/test-utils/fake-clock.ts +0 -88
  560. package/src/types.ts +0 -95
  561. package/src/ui/action-icons.ts +0 -53
  562. package/src/ui/agent-card.tsx +0 -218
  563. package/src/ui/avatar.tsx +0 -23
  564. package/src/ui/badge.tsx +0 -21
  565. package/src/ui/button.tsx +0 -49
  566. package/src/ui/card.tsx +0 -245
  567. package/src/ui/checkbox-group.tsx +0 -153
  568. package/src/ui/checkbox.tsx +0 -63
  569. package/src/ui/collapsible.tsx +0 -163
  570. package/src/ui/command.tsx +0 -103
  571. package/src/ui/dialog.tsx +0 -223
  572. package/src/ui/dock.tsx +0 -630
  573. package/src/ui/dropdown.tsx +0 -636
  574. package/src/ui/editable-label.tsx +0 -112
  575. package/src/ui/hover-card.tsx +0 -345
  576. package/src/ui/icon.tsx +0 -167
  577. package/src/ui/input.tsx +0 -391
  578. package/src/ui/kbd.tsx +0 -118
  579. package/src/ui/nav.tsx +0 -282
  580. package/src/ui/notice.tsx +0 -84
  581. package/src/ui/overlay.tsx +0 -277
  582. package/src/ui/pane-grid.tsx +0 -117
  583. package/src/ui/pane-group.tsx +0 -291
  584. package/src/ui/pane.tsx +0 -193
  585. package/src/ui/popover.tsx +0 -106
  586. package/src/ui/progress-bar.tsx +0 -83
  587. package/src/ui/prompt-dock.tsx +0 -145
  588. package/src/ui/radio.tsx +0 -150
  589. package/src/ui/resizable.tsx +0 -693
  590. package/src/ui/scroll-area.tsx +0 -26
  591. package/src/ui/segmented.tsx +0 -109
  592. package/src/ui/select.tsx +0 -168
  593. package/src/ui/separator.tsx +0 -10
  594. package/src/ui/settings-group.tsx +0 -67
  595. package/src/ui/skeleton.tsx +0 -73
  596. package/src/ui/slider.tsx +0 -178
  597. package/src/ui/status.tsx +0 -48
  598. package/src/ui/switch.tsx +0 -119
  599. package/src/ui/tabs.tsx +0 -168
  600. package/src/ui/textarea.tsx +0 -21
  601. package/src/ui/tooltip.tsx +0 -118
  602. package/src/utils/cn.ts +0 -30
  603. package/src/wire/chunk.ts +0 -248
  604. package/src/wire/consume.ts +0 -599
  605. package/src/wire/diagnostics.ts +0 -727
  606. package/src/wire/encode-probe.ts +0 -214
  607. package/src/wire/encode.ts +0 -947
  608. package/src/wire/files.ts +0 -342
  609. package/src/wire/formats/anthropic.ts +0 -274
  610. package/src/wire/formats/openai.ts +0 -228
  611. package/src/wire/index.ts +0 -95
  612. package/src/wire/media-types.ts +0 -344
  613. package/src/wire/read.ts +0 -396
  614. package/src/wire/sink-helpers.ts +0 -50
  615. package/src/wire/sse.ts +0 -153
package/src/agent-tooling/recipes/composed-thread.ts DELETED
@@ -1,714 +0,0 @@
1
- import type { CodeRecipe } from './types';
2
-
3
- /**
4
- * composed-thread — a chat surface hand-composed from standalone elements,
5
- * with `<kai-chat>` deliberately absent (rung-6 finding F-49).
6
- *
7
- * PROVENANCE: derived from the rung-6 clean-room build
8
- * (docs/superpowers/research/2026-08-25-rung-6-front-door/app on main), which
9
- * was independently smoke-verified 22/22 — with its ONE recorded defect
10
- * corrected before it became a teaching artifact: the builder shipped
11
- * `AttachmentData.url = URL.createObjectURL(file)` (finding F-44, the exact
12
- * PR #186 defect), and this recipe stages every picked file as a `data:` URI
13
- * instead, the pattern `src/elements/default-input.tsx` uses and the wire
14
- * encoders require. `verify:scaffold` compiles the module below with a stock
15
- * consumer tsconfig AND asserts the object-URL line has not grown back.
16
- *
17
- * The catalog half of this recipe — ingredients, wiring edges, invariants —
18
- * lives in `../catalog/surfaces.ts` under the same id, where every edge is
19
- * EXECUTED by surfaces.test.ts. This module carries what a data record cannot:
20
- * the complete, compiling host code.
21
- */
22
- export const composedThread: CodeRecipe = {
23
- id: 'composed-thread',
24
- title: 'Hand-composed thread (no kai-chat)',
25
- intent:
26
- 'A full chat surface composed from standalone elements — kai-thread renders the ' +
27
- 'transcript, kai-composer takes input, kai-attachments stages files, kai-toast-region ' +
28
- 'notifies, kai-conversation-item rows form the rail — with a host module doing every ' +
29
- 'bit of wiring (host-coordinates: the kit has no store). Streams through ' +
30
- 'createAssistantStream + createMockResponder, so it runs with no backend and no key; ' +
31
- 'swapping the mock for a real /api/chat changes one line.',
32
- ingredients: [
33
- 'kai-thread',
34
- 'kai-composer',
35
- 'kai-attachments',
36
- 'kai-toast-region',
37
- 'kai-conversation-item',
38
- 'kai-feedback-bar',
39
- ],
40
- notes: [
41
- '`<kai-composer>` is the BARE editing surface — no send button, no attachments. The ' +
42
- 'paperclip, the hidden file input, the staging tray and the send button here are the ' +
43
- "host's. For the batteries-included composer row, use `<kai-prompt-input>` instead.",
44
- 'Attachments are staged as `data:` URIs, NEVER as object URLs (`createObjectURL`). A ' +
45
- '`blob:` URL resolves only inside the tab that minted it; `toOpenAIMessages` / ' +
46
- '`toAnthropicMessages` refuse it with a written reason, and before they refused it an ' +
47
- 'attachment-only turn reached the model as nothing at all.',
48
- 'The HOST resolves tool calls. The mock (like a real provider) only ANNOUNCES one — ' +
49
- 'walk `result.toolCalls` after the read and call `stream.upsertTool(id, { state: ' +
50
- "'output-available', output })`, or the panel sits at input-available forever.",
51
- 'The toast region is driven as DATA (`toasts` property, `kai-dismiss` event) because ' +
52
- 'this app places its own `<kai-toast-region>` and owns the array. Note: `toast()` ' +
53
- 'ADOPTS a markup-placed region (it creates its own only when none exists) and binds ' +
54
- 'its store over `toasts`, replacing a data-driven array — so per region, own the ' +
55
- 'array or call `toast()`, not both.',
56
- 'A standalone `<kai-conversation-item>` (outside `<kai-conversations>`) activates ' +
57
- 'itself: its body is a tabbable button and click / Enter / Space fire `kai-select` ' +
58
- 'on the item with `{ id }` (non-bubbling — listen on the item). What it does NOT ' +
59
- "carry is the container's list story — roving tabindex and arrow-key traversal " +
60
- 'stay yours in a hand-rolled rail.',
61
- '`<kai-thread>` fills the height its parent gives it and scrolls internally, which is ' +
62
- 'why `.pane` is a flex column and `.thread` is `flex: 1; min-height: 0`.',
63
- ],
64
- files: [
65
- {
66
- path: 'index.html',
67
- lang: 'html',
68
- code: `<!doctype html>
69
- <html lang="en">
70
- <head>
71
- <meta charset="UTF-8" />
72
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
73
- <title>Composed thread</title>
74
- <link rel="stylesheet" href="/src/styles.css" />
75
- </head>
76
- <body>
77
- <!-- The thread is composed by hand from standalone kai-* elements;
78
- the kai-chat drop-in is deliberately absent from this app. -->
79
- <div class="app">
80
- <aside class="rail">
81
- <div class="rail-head">
82
- <span class="rail-title">Conversations</span>
83
- <button id="new-chat" class="ghost-btn" type="button">New</button>
84
- </div>
85
- <!-- kai-conversation-item rows are created in src/main.ts -->
86
- <nav id="conversations" class="rail-list" aria-label="Conversations"></nav>
87
- </aside>
88
-
89
- <main class="pane">
90
- <header class="pane-head">
91
- <h1 id="pane-title">New chat</h1>
92
- <span class="badge">mock responder — no provider contacted</span>
93
- </header>
94
-
95
- <kai-thread id="thread" class="thread" prose-size="sm">
96
- <div slot="empty" class="empty">
97
- <strong>Compose a message</strong>
98
- <p>Attach a file with the paperclip and send it — it renders on your message.</p>
99
- </div>
100
- </kai-thread>
101
-
102
- <!-- Shown once an assistant turn settles. -->
103
- <kai-feedback-bar
104
- id="feedback"
105
- class="feedback"
106
- hidden
107
- bar-title="Was this reply helpful?"
108
- collect-detail
109
- detail-title="What went wrong?"
110
- detail-placeholder="Optional details…"
111
- submit-label="Send feedback"
112
- thanks-message="Thanks — logged locally."
113
- ></kai-feedback-bar>
114
-
115
- <div class="composer-bar">
116
- <!-- Staged (not yet sent) attachments. kai-composer has no attachment
117
- support of its own, so the tray + the picker below are ours. -->
118
- <kai-attachments
119
- id="staged"
120
- class="staged"
121
- variant="inline"
122
- removable
123
- hover-card
124
- show-media-type
125
- hidden
126
- ></kai-attachments>
127
-
128
- <div class="composer-row">
129
- <button id="attach" class="icon-btn" type="button" title="Attach a file" aria-label="Attach a file">
130
- <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
131
- </button>
132
- <input id="file-input" type="file" multiple hidden />
133
- <kai-composer
134
- id="composer"
135
- class="composer"
136
- placeholder="Ask anything… (Enter to send)"
137
- ></kai-composer>
138
- <button id="send" class="send-btn" type="button">Send</button>
139
- </div>
140
- </div>
141
- </main>
142
- </div>
143
-
144
- <!-- Placed explicitly rather than letting toast() auto-mount one. -->
145
- <kai-toast-region id="toasts" position="bottom-right" appearance="card"></kai-toast-region>
146
-
147
- <script type="module" src="/src/main.ts"></script>
148
- </body>
149
- </html>
150
- `,
151
- },
152
- {
153
- path: 'src/main.ts',
154
- lang: 'ts',
155
- code: `// The whole app: a chat surface composed by hand from standalone kai-*
156
- // elements. <kai-chat> is deliberately not used — kai-thread renders the
157
- // transcript, kai-composer takes input, and this module is the host that
158
- // wires one to the other (the kit has no store: host-coordinates).
159
- import '@kitn.ai/ui/elements'; // registers every <kai-*>; must come first
160
- import '@kitn.ai/ui/theme.tokens.css';
161
-
162
- import type {
163
- AttachmentData,
164
- ChatMessage,
165
- KaiAttachmentsElement,
166
- KaiComposerElement,
167
- KaiConversationItemElement,
168
- KaiFeedbackBarElement,
169
- KaiThreadElement,
170
- KaiToastRegionElement,
171
- MessagePart,
172
- ToastItem,
173
- } from '@kitn.ai/ui/elements';
174
- import { createAssistantStream, createMockResponder } from '@kitn.ai/ui/state';
175
- import { readOpenAIStream } from '@kitn.ai/ui/wire';
176
-
177
- // ── the fake model ──────────────────────────────────────────────────────────
178
- // No key, no network, no provider. createMockResponder yields real OpenAI
179
- // chat-completions SSE frames that readOpenAIStream parses on exactly the path
180
- // a live route would take. Replies cycle one per turn; the third scripts a
181
- // tool call so the thread's tool panel gets exercised too.
182
- const mockResponse = createMockResponder({
183
- replies: [
184
- 'Hey — this thread is composed from standalone \`kai-*\` elements: ' +
185
- '\`kai-thread\` for the transcript, \`kai-composer\` for input, and a host ' +
186
- 'module wiring them together.\\n\\nAttach a file with the paperclip and send it.',
187
- 'Got it. Anything you attach is staged in \`kai-attachments\` next to the ' +
188
- 'composer, then rides along as a \`file\` part on the message you send.',
189
- {
190
- text: 'Let me look that up.',
191
- toolCalls: [
192
- { name: 'search_docs', arguments: { query: 'composing a kai thread', limit: 3 } },
193
- ],
194
- },
195
- 'Streaming, tool calls, attachments and toasts all run through the same ' +
196
- 'host wiring — swapping the mock for a real \`/api/chat\` changes one line.',
197
- ],
198
- chunkSize: 2,
199
- });
200
-
201
- // ── conversations ───────────────────────────────────────────────────────────
202
-
203
- interface Conversation {
204
- id: string;
205
- title: string;
206
- messages: ChatMessage[];
207
- }
208
-
209
- const conversations: Conversation[] = [
210
- { id: crypto.randomUUID(), title: 'New chat', messages: [] },
211
- ];
212
- let activeId = conversations[0].id;
213
-
214
- const active = (): Conversation =>
215
- conversations.find((c) => c.id === activeId) ?? conversations[0];
216
-
217
- // ── element handles (typed once, after upgrade) ─────────────────────────────
218
-
219
- const el = <T extends HTMLElement>(id: string): T =>
220
- document.getElementById(id) as T;
221
-
222
- /** A picked File as a \`data:\` URI — the ONE form every consumer of
223
- * \`AttachmentData.url\` accepts.
224
- *
225
- * NOT an object URL: a \`blob:\` URL resolves only inside the tab that minted
226
- * it, so it renders a perfect preview here and is meaningless to anything
227
- * downstream — \`toOpenAIMessages\` / \`toAnthropicMessages\` refuse it with a
228
- * written reason, and before they refused it an attachment-only turn reached
229
- * the model as nothing at all. A data URI previews identically, survives a
230
- * reload, needs no revocation bookkeeping, and is what both providers take. */
231
- const readAsDataUrl = (file: File): Promise<string> =>
232
- new Promise((resolve, reject) => {
233
- const reader = new FileReader();
234
- reader.onload = () => resolve(String(reader.result));
235
- reader.onerror = () => reject(reader.error ?? new Error('Could not read ' + file.name));
236
- reader.readAsDataURL(file);
237
- });
238
-
239
- let staged: AttachmentData[] = [];
240
- let sending = false;
241
-
242
- async function main() {
243
- // kai-* register through an async dynamic import (SSR-safety), so a property
244
- // set before the upgrade is dropped. Wait for every element this host drives.
245
- await Promise.all(
246
- [
247
- 'kai-thread',
248
- 'kai-composer',
249
- 'kai-attachments',
250
- 'kai-conversation-item',
251
- 'kai-feedback-bar',
252
- 'kai-toast-region',
253
- ].map((tag) => customElements.whenDefined(tag)),
254
- );
255
-
256
- const thread = el<KaiThreadElement>('thread');
257
- const composer = el<KaiComposerElement>('composer');
258
- const stagedEl = el<KaiAttachmentsElement>('staged');
259
- const feedback = el<KaiFeedbackBarElement>('feedback');
260
- const toastRegion = el<KaiToastRegionElement>('toasts');
261
- const rail = el<HTMLElement>('conversations');
262
- const title = el<HTMLElement>('pane-title');
263
- const sendBtn = el<HTMLButtonElement>('send');
264
- const attachBtn = el<HTMLButtonElement>('attach');
265
- const fileInput = el<HTMLInputElement>('file-input');
266
-
267
- // ── toasts ────────────────────────────────────────────────────────────────
268
- // Driven as data rather than through the imperative toast(), because this app
269
- // places its own <kai-toast-region> and owns the list. Don't ALSO call
270
- // toast(): it would adopt this region and bind its own store over the
271
- // toasts property, replacing the array this module owns.
272
- let toasts: ToastItem[] = [];
273
- const setToasts = (next: ToastItem[]) => {
274
- toasts = next;
275
- toastRegion.toasts = toasts; // new array reference every time
276
- };
277
- const notify = (message: string, item: Partial<ToastItem> = {}) =>
278
- setToasts([...toasts, { id: crypto.randomUUID(), message, duration: 4000, ...item }]);
279
-
280
- toastRegion.addEventListener('kai-dismiss', (event) => {
281
- const { id } = (event as CustomEvent<{ id: string }>).detail;
282
- setToasts(toasts.filter((t) => t.id !== id));
283
- });
284
-
285
- // ── rendering ─────────────────────────────────────────────────────────────
286
-
287
- // Reassign, never mutate: the array reference is what tells the element
288
- // something changed, and the row keys are the message objects themselves.
289
- const setMessages = (next: ChatMessage[]) => {
290
- active().messages = next;
291
- thread.messages = next;
292
- };
293
-
294
- function renderRail() {
295
- rail.replaceChildren(
296
- ...conversations.map((conversation) => {
297
- const row = document.createElement(
298
- 'kai-conversation-item',
299
- ) as KaiConversationItemElement;
300
- row.conversationId = conversation.id;
301
- row.active = conversation.id === activeId;
302
- row.compact = true;
303
- row.textContent = conversation.title;
304
-
305
- const meta = document.createElement('span');
306
- meta.slot = 'meta';
307
- meta.textContent = conversation.messages.length
308
- ? conversation.messages.length + ' messages'
309
- : 'Empty';
310
- row.append(meta);
311
-
312
- // Standalone rows activate THEMSELVES: outside <kai-conversations>
313
- // the item's body is a tabbable button and click / Enter / Space fire
314
- // kai-select on the item (non-bubbling — listen on the row, and take
315
- // the id from detail rather than re-deriving it). What standalone rows
316
- // do not get is the container's LIST story: roving tabindex and
317
- // arrow-key traversal stay yours in a hand-rolled rail.
318
- row.addEventListener('kai-select', (e) => {
319
- select((e as CustomEvent<{ id: string }>).detail.id);
320
- });
321
- return row;
322
- }),
323
- );
324
- }
325
-
326
- function select(id: string) {
327
- activeId = id;
328
- const conversation = active();
329
- title.textContent = conversation.title;
330
- thread.messages = conversation.messages;
331
- feedback.hidden = true;
332
- renderRail();
333
- composer.focus();
334
- }
335
-
336
- function renderStaged() {
337
- stagedEl.items = staged; // JS property, new array each time
338
- stagedEl.hidden = staged.length === 0;
339
- }
340
-
341
- // ── attaching a file ──────────────────────────────────────────────────────
342
- // kai-composer has no attachment affordance of its own (unlike
343
- // kai-prompt-input), so the picker and the staging tray are the host's.
344
-
345
- attachBtn.addEventListener('click', () => fileInput.click());
346
-
347
- fileInput.addEventListener('change', () => {
348
- const picked = [...(fileInput.files ?? [])];
349
- fileInput.value = ''; // so the same file can be picked twice
350
- if (!picked.length) return;
351
- void (async () => {
352
- const added = await Promise.all(
353
- picked.map(
354
- async (file): Promise<AttachmentData> => ({
355
- id: crypto.randomUUID(),
356
- type: 'file',
357
- filename: file.name,
358
- mediaType: file.type || 'application/octet-stream',
359
- url: await readAsDataUrl(file), // data: URI — see readAsDataUrl
360
- }),
361
- ),
362
- );
363
- staged = [...staged, ...added];
364
- renderStaged();
365
- notify(
366
- picked.length === 1 ? 'Attached ' + picked[0].name : 'Attached ' + picked.length + ' files',
367
- { variant: 'success' },
368
- );
369
- })();
370
- composer.focus();
371
- });
372
-
373
- stagedEl.addEventListener('kai-remove', (event) => {
374
- const { id } = (event as CustomEvent<{ id: string }>).detail;
375
- // A data: URI needs no revocation — dropping the item is the whole cleanup.
376
- staged = staged.filter((item) => item.id !== id);
377
- renderStaged();
378
- });
379
-
380
- // ── sending ───────────────────────────────────────────────────────────────
381
-
382
- sendBtn.addEventListener('click', () => composer.send());
383
-
384
- composer.addEventListener('kai-submit', (event) => {
385
- const { text } = (event as CustomEvent<{ text: string }>).detail;
386
- void send(text);
387
- });
388
-
389
- async function send(rawText: string) {
390
- const text = rawText.trim();
391
- // An attachment on its own is a legitimate message; empty + empty is not.
392
- if (sending || (!text && !staged.length)) return;
393
-
394
- const attachments = staged;
395
- staged = [];
396
- renderStaged();
397
- composer.clear();
398
-
399
- // A message's content is an ordered parts array — the file parts sit after
400
- // the text, which is how kai-message renders them under the bubble.
401
- const parts: MessagePart[] = [
402
- ...(text ? [{ type: 'text', text } as const] : []),
403
- ...attachments.map((attachment) => ({ type: 'file', attachment }) as const),
404
- ];
405
-
406
- const history: ChatMessage[] = [
407
- ...active().messages,
408
- { id: crypto.randomUUID(), role: 'user', parts },
409
- ];
410
- setMessages(history);
411
-
412
- // First real message names the conversation.
413
- if (active().title === 'New chat') {
414
- active().title = text
415
- ? text.slice(0, 40)
416
- : (attachments[0]?.filename ?? 'Attachment');
417
- title.textContent = active().title;
418
- }
419
- renderRail();
420
-
421
- setBusy(true);
422
- feedback.hidden = true;
423
-
424
- // createAssistantStream appends the in-flight assistant message and folds
425
- // every delta onto the right part, handing back a fresh array each time.
426
- const stream = createAssistantStream((update) => setMessages(update(active().messages)));
427
-
428
- try {
429
- const prompt = text || (attachments[0]?.filename ?? '');
430
- const result = await readOpenAIStream(mockResponse(prompt), stream);
431
- if (result.error) notify('Model error: ' + result.error.message, { variant: 'error' });
432
-
433
- // The mock announces tool calls but nothing executes them, so the panel
434
- // would sit in \`input-available\` forever. Resolve each one here — the
435
- // same place a real app would put its tool result.
436
- for (const call of result.toolCalls) {
437
- stream.upsertTool(call.id, {
438
- state: 'output-available',
439
- output: {
440
- note: 'Local stub result — the mock responder announces the call, this app answers it.',
441
- query: call.input?.query ?? call.argumentsText,
442
- },
443
- });
444
- }
445
- } catch (error) {
446
- // abort() settles the message AND puts the reason where the user can see
447
- // it, instead of leaving a permanently blank bubble.
448
- stream.abort(
449
- error instanceof Error && error.message ? error.message : 'Request failed',
450
- );
451
- notify('The reply failed.', { variant: 'error' });
452
- console.error(error);
453
- } finally {
454
- stream.done(); // settles the turn; sink calls after this are dropped
455
- setBusy(false);
456
- feedback.hidden = false;
457
- renderRail();
458
- }
459
- }
460
-
461
- function setBusy(busy: boolean) {
462
- sending = busy;
463
- thread.loading = busy;
464
- composer.loading = busy;
465
- sendBtn.disabled = busy;
466
- }
467
-
468
- // ── message actions & feedback ────────────────────────────────────────────
469
-
470
- thread.addEventListener('kai-message-action', (event) => {
471
- const { action, state } = (event as CustomEvent<{
472
- messageId: string;
473
- action: string;
474
- state?: 'on' | 'off';
475
- }>).detail;
476
- if (action === 'copy') notify('Copied to clipboard');
477
- else if (state === 'on') notify(action === 'like' ? 'Marked helpful' : 'Marked unhelpful');
478
- });
479
-
480
- feedback.categories = ['Wrong answer', 'Too slow', 'Missed my attachment', 'Other'];
481
-
482
- feedback.addEventListener('kai-feedback', (event) => {
483
- const { value } = (event as CustomEvent<{ value: 'helpful' | 'not-helpful' }>).detail;
484
- if (value === 'helpful') notify('Thanks for the feedback', { variant: 'success' });
485
- });
486
-
487
- feedback.addEventListener('kai-feedback-detail', (event) => {
488
- const { category } = (event as CustomEvent<{ category?: string }>).detail;
489
- notify(category ? 'Feedback filed: ' + category : 'Feedback filed', {
490
- variant: 'success',
491
- });
492
- });
493
-
494
- feedback.addEventListener('kai-close', () => {
495
- feedback.hidden = true;
496
- });
497
-
498
- // ── new chat ──────────────────────────────────────────────────────────────
499
-
500
- el<HTMLButtonElement>('new-chat').addEventListener('click', () => {
501
- const conversation: Conversation = {
502
- id: crypto.randomUUID(),
503
- title: 'New chat',
504
- messages: [],
505
- };
506
- conversations.unshift(conversation);
507
- select(conversation.id);
508
- });
509
-
510
- // ── boot ──────────────────────────────────────────────────────────────────
511
-
512
- renderRail();
513
- renderStaged();
514
- select(activeId);
515
- }
516
-
517
- void main();
518
- `,
519
- },
520
- {
521
- path: 'src/styles.css',
522
- lang: 'css',
523
- code: `:root {
524
- color-scheme: light;
525
- --rail-w: 15rem;
526
- }
527
-
528
- * { box-sizing: border-box; }
529
-
530
- html, body { height: 100%; }
531
-
532
- body {
533
- margin: 0;
534
- font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
535
- background: var(--color-background, #fff);
536
- color: var(--color-foreground, #111);
537
- }
538
-
539
- .app {
540
- position: fixed;
541
- inset: 0;
542
- display: grid;
543
- grid-template-columns: var(--rail-w) 1fr;
544
- text-align: start;
545
- /* Stays below the toast region's z-index (var(--kai-toast-z, 100)). */
546
- z-index: 90;
547
- }
548
-
549
- /* ── sidebar ─────────────────────────────────────────────── */
550
-
551
- .rail {
552
- display: flex;
553
- flex-direction: column;
554
- min-height: 0;
555
- border-right: 1px solid var(--color-border, #e5e5e5);
556
- background: var(--color-muted, #fafafa);
557
- }
558
-
559
- .rail-head {
560
- display: flex;
561
- align-items: center;
562
- justify-content: space-between;
563
- gap: 0.5rem;
564
- padding: 0.75rem 0.75rem 0.5rem;
565
- }
566
-
567
- .rail-title {
568
- font-size: 0.75rem;
569
- font-weight: 600;
570
- letter-spacing: 0.04em;
571
- text-transform: uppercase;
572
- opacity: 0.6;
573
- }
574
-
575
- .rail-list {
576
- flex: 1;
577
- min-height: 0;
578
- overflow-y: auto;
579
- padding: 0 0.5rem 0.75rem;
580
- display: flex;
581
- flex-direction: column;
582
- gap: 0.125rem;
583
- }
584
-
585
- kai-conversation-item { display: block; }
586
- kai-conversation-item::part(row) { border-radius: 0.5rem; }
587
-
588
- /* ── main pane ───────────────────────────────────────────── */
589
-
590
- .pane {
591
- display: flex;
592
- flex-direction: column;
593
- min-height: 0;
594
- min-width: 0;
595
- }
596
-
597
- .pane-head {
598
- display: flex;
599
- align-items: baseline;
600
- gap: 0.75rem;
601
- padding: 0.75rem 1rem;
602
- border-bottom: 1px solid var(--color-border, #e5e5e5);
603
- }
604
-
605
- .pane-head h1 {
606
- margin: 0;
607
- font-size: 0.9375rem;
608
- font-weight: 600;
609
- }
610
-
611
- .badge {
612
- font-size: 0.6875rem;
613
- padding: 0.125rem 0.5rem;
614
- border-radius: 999px;
615
- border: 1px solid var(--color-border, #e5e5e5);
616
- opacity: 0.7;
617
- }
618
-
619
- /* kai-thread fills the height its parent gives it and scrolls internally,
620
- so the pane is a flex column and the thread is the flexing row. */
621
- .thread {
622
- display: block;
623
- flex: 1;
624
- min-height: 0;
625
- }
626
-
627
- .empty {
628
- display: flex;
629
- flex-direction: column;
630
- align-items: center;
631
- gap: 0.25rem;
632
- padding: 3rem 1rem;
633
- text-align: center;
634
- font-size: 0.875rem;
635
- opacity: 0.75;
636
- }
637
-
638
- .empty p { margin: 0; }
639
-
640
- .feedback {
641
- display: block;
642
- padding: 0 1rem 0.5rem;
643
- }
644
-
645
- .feedback[hidden] { display: none; }
646
-
647
- /* ── composer ────────────────────────────────────────────── */
648
-
649
- .composer-bar {
650
- border-top: 1px solid var(--color-border, #e5e5e5);
651
- padding: 0.625rem 1rem 0.875rem;
652
- display: flex;
653
- flex-direction: column;
654
- gap: 0.5rem;
655
- }
656
-
657
- .staged { display: block; }
658
- .staged[hidden] { display: none; }
659
-
660
- .composer-row {
661
- display: flex;
662
- align-items: flex-end;
663
- gap: 0.5rem;
664
- }
665
-
666
- .composer {
667
- display: block;
668
- flex: 1;
669
- min-width: 0;
670
- }
671
-
672
- .icon-btn,
673
- .send-btn,
674
- .ghost-btn {
675
- font: inherit;
676
- cursor: pointer;
677
- border-radius: 0.5rem;
678
- border: 1px solid var(--color-border, #e5e5e5);
679
- background: var(--color-background, #fff);
680
- color: inherit;
681
- }
682
-
683
- .icon-btn {
684
- display: inline-flex;
685
- align-items: center;
686
- justify-content: center;
687
- width: 2.25rem;
688
- height: 2.25rem;
689
- flex: none;
690
- }
691
-
692
- .send-btn {
693
- height: 2.25rem;
694
- padding: 0 0.875rem;
695
- flex: none;
696
- font-weight: 600;
697
- background: var(--color-primary, #111);
698
- color: var(--color-primary-foreground, #fff);
699
- border-color: transparent;
700
- }
701
-
702
- .send-btn:disabled { opacity: 0.5; cursor: default; }
703
-
704
- .ghost-btn {
705
- padding: 0.25rem 0.5rem;
706
- font-size: 0.75rem;
707
- }
708
-
709
- .icon-btn:hover,
710
- .ghost-btn:hover { background: var(--color-accent, #f0f0f0); }
711
- `,
712
- },
713
- ],
714
- };