@kitn.ai/chat/src/elements/framework-usage.json

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

[
  {
    "tag": "kc-artifact",
    "displayName": "Artifact",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-artifact></kc-artifact>\n<script type=\"module\">\n  const el = document.querySelector('kc-artifact');\n  el.files = /* … */;\n  el.addEventListener('kc-file-select', (e) => console.log(e.detail));\n  el.addEventListener('kc-maximize-change', (e) => console.log(e.detail));\n  el.addEventListener('kc-navigate', (e) => console.log(e.detail));\n  el.addEventListener('kc-tab-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { Artifact } from '@kitn.ai/chat/react';\n\n<Artifact\n  files={files}\n  onFileSelect={(e) => console.log(e.detail)}\n  onMaximizeChange={(e) => console.log(e.detail)}\n  onNavigate={(e) => console.log(e.detail)}\n  onTabChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-artifact\n  :files.prop=\"files\"\n  @kc-file-select=\"onFileSelect\"\n  @kc-maximize-change=\"onMaximizeChange\"\n  @kc-navigate=\"onNavigate\"\n  @kc-tab-change=\"onTabChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-artifact\n  {files}\n  on:kc-file-select={onFileSelect}\n  on:kc-maximize-change={onMaximizeChange}\n  on:kc-navigate={onNavigate}\n  on:kc-tab-change={onTabChange}\n></kc-artifact>",
      "angular": "<kc-artifact\n  [files]=\"files\"\n  (kc-file-select)=\"onFileSelect($event)\"\n  (kc-maximize-change)=\"onMaximizeChange($event)\"\n  (kc-navigate)=\"onNavigate($event)\"\n  (kc-tab-change)=\"onTabChange($event)\"\n></kc-artifact>",
      "solid": "import { Artifact } from '@kitn.ai/chat';\n\n<Artifact\n  files={files}\n  onFileSelect={(e) => console.log(e.detail)}\n  onMaximizeChange={(e) => console.log(e.detail)}\n  onNavigate={(e) => console.log(e.detail)}\n  onTabChange={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-attachments",
    "displayName": "Attachments",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-attachments></kc-attachments>\n<script type=\"module\">\n  const el = document.querySelector('kc-attachments');\n  el.items = /* … */;\n  el.addEventListener('kc-remove', (e) => console.log(e.detail));\n</script>",
      "react": "import { Attachments } from '@kitn.ai/chat/react';\n\n<Attachments\n  items={items}\n  onRemove={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-attachments\n  :items.prop=\"items\"\n  @kc-remove=\"onRemove\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-attachments\n  {items}\n  on:kc-remove={onRemove}\n></kc-attachments>",
      "angular": "<kc-attachments\n  [items]=\"items\"\n  (kc-remove)=\"onRemove($event)\"\n></kc-attachments>",
      "solid": "import { Attachments } from '@kitn.ai/chat';\n\n<Attachments\n  items={items}\n  onRemove={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-card",
    "displayName": "Card",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-card></kc-card>",
      "react": "import { Card } from '@kitn.ai/chat/react';\n\n<Card />",
      "vue": "<kc-card />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-card></kc-card>",
      "angular": "<kc-card></kc-card>",
      "solid": "import { Card } from '@kitn.ai/chat';\n\n<Card />"
    }
  },
  {
    "tag": "kc-cards",
    "displayName": "Cards",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-cards></kc-cards>",
      "react": "import { Cards } from '@kitn.ai/chat/react';\n\n<Cards />",
      "vue": "<kc-cards />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-cards></kc-cards>",
      "angular": "<kc-cards></kc-cards>"
    }
  },
  {
    "tag": "kc-chain-of-thought",
    "displayName": "ChainOfThought",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-chain-of-thought></kc-chain-of-thought>\n<script type=\"module\">\n  const el = document.querySelector('kc-chain-of-thought');\n  el.steps = /* … */;\n</script>",
      "react": "import { ChainOfThought } from '@kitn.ai/chat/react';\n\n<ChainOfThought\n  steps={steps}\n/>",
      "vue": "<kc-chain-of-thought\n  :steps.prop=\"steps\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-chain-of-thought\n  {steps}\n></kc-chain-of-thought>",
      "angular": "<kc-chain-of-thought\n  [steps]=\"steps\"\n></kc-chain-of-thought>",
      "solid": "import { ChainOfThought } from '@kitn.ai/chat';\n\n<ChainOfThought\n  steps={steps}\n/>"
    }
  },
  {
    "tag": "kc-chat",
    "displayName": "Chat",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-chat></kc-chat>\n<script type=\"module\">\n  const el = document.querySelector('kc-chat');\n  el.messages = /* … */;\n  el.addEventListener('kc-message-action', (e) => console.log(e.detail));\n  el.addEventListener('kc-model-change', (e) => console.log(e.detail));\n  el.addEventListener('kc-search', (e) => console.log(e.detail));\n  el.addEventListener('kc-slash-select', (e) => console.log(e.detail));\n  el.addEventListener('kc-submit', (e) => console.log(e.detail));\n  el.addEventListener('kc-suggestion-click', (e) => console.log(e.detail));\n  el.addEventListener('kc-value-change', (e) => console.log(e.detail));\n  el.addEventListener('kc-voice', (e) => console.log(e.detail));\n</script>",
      "react": "import { Chat } from '@kitn.ai/chat/react';\n\n<Chat\n  messages={messages}\n  onMessageAction={(e) => console.log(e.detail)}\n  onModelChange={(e) => console.log(e.detail)}\n  onSearch={(e) => console.log(e.detail)}\n  onSlashSelect={(e) => console.log(e.detail)}\n  onSubmit={(e) => console.log(e.detail)}\n  onSuggestionClick={(e) => console.log(e.detail)}\n  onValueChange={(e) => console.log(e.detail)}\n  onVoice={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-chat\n  :messages.prop=\"messages\"\n  @kc-message-action=\"onMessageAction\"\n  @kc-model-change=\"onModelChange\"\n  @kc-search=\"onSearch\"\n  @kc-slash-select=\"onSlashSelect\"\n  @kc-submit=\"onSubmit\"\n  @kc-suggestion-click=\"onSuggestionClick\"\n  @kc-value-change=\"onValueChange\"\n  @kc-voice=\"onVoice\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-chat\n  {messages}\n  on:kc-message-action={onMessageAction}\n  on:kc-model-change={onModelChange}\n  on:kc-search={onSearch}\n  on:kc-slash-select={onSlashSelect}\n  on:kc-submit={onSubmit}\n  on:kc-suggestion-click={onSuggestionClick}\n  on:kc-value-change={onValueChange}\n  on:kc-voice={onVoice}\n></kc-chat>",
      "angular": "<kc-chat\n  [messages]=\"messages\"\n  (kc-message-action)=\"onMessageAction($event)\"\n  (kc-model-change)=\"onModelChange($event)\"\n  (kc-search)=\"onSearch($event)\"\n  (kc-slash-select)=\"onSlashSelect($event)\"\n  (kc-submit)=\"onSubmit($event)\"\n  (kc-suggestion-click)=\"onSuggestionClick($event)\"\n  (kc-value-change)=\"onValueChange($event)\"\n  (kc-voice)=\"onVoice($event)\"\n></kc-chat>"
    }
  },
  {
    "tag": "kc-checkpoint",
    "displayName": "Checkpoint",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-checkpoint></kc-checkpoint>\n<script type=\"module\">\n  const el = document.querySelector('kc-checkpoint');\n  el.addEventListener('kc-select', (e) => console.log(e.detail));\n</script>",
      "react": "import { Checkpoint } from '@kitn.ai/chat/react';\n\n<Checkpoint\n  onSelect={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-checkpoint\n  @kc-select=\"onSelect\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-checkpoint\n  on:kc-select={onSelect}\n></kc-checkpoint>",
      "angular": "<kc-checkpoint\n  (kc-select)=\"onSelect($event)\"\n></kc-checkpoint>",
      "solid": "import { Checkpoint } from '@kitn.ai/chat';\n\n<Checkpoint\n  onSelect={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-choice",
    "displayName": "Choice",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-choice></kc-choice>",
      "react": "import { Choice } from '@kitn.ai/chat/react';\n\n<Choice />",
      "vue": "<kc-choice />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-choice></kc-choice>",
      "angular": "<kc-choice></kc-choice>"
    }
  },
  {
    "tag": "kc-code-block",
    "displayName": "CodeBlock",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-code-block code=\"…\"></kc-code-block>",
      "react": "import { CodeBlock } from '@kitn.ai/chat/react';\n\n<CodeBlock\n  code={code}\n/>",
      "vue": "<kc-code-block\n  :code=\"code\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-code-block\n  {code}\n></kc-code-block>",
      "angular": "<kc-code-block\n  [code]=\"code\"\n></kc-code-block>",
      "solid": "import { CodeBlock } from '@kitn.ai/chat';\n\n<CodeBlock\n  code={code}\n/>"
    }
  },
  {
    "tag": "kc-confirm",
    "displayName": "Confirm",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-confirm></kc-confirm>",
      "react": "import { Confirm } from '@kitn.ai/chat/react';\n\n<Confirm />",
      "vue": "<kc-confirm />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-confirm></kc-confirm>",
      "angular": "<kc-confirm></kc-confirm>"
    }
  },
  {
    "tag": "kc-context",
    "displayName": "Context",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-context></kc-context>\n<script type=\"module\">\n  const el = document.querySelector('kc-context');\n  el.addEventListener('kc-threshold-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { Context } from '@kitn.ai/chat/react';\n\n<Context\n  onThresholdChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-context\n  @kc-threshold-change=\"onThresholdChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-context\n  on:kc-threshold-change={onThresholdChange}\n></kc-context>",
      "angular": "<kc-context\n  (kc-threshold-change)=\"onThresholdChange($event)\"\n></kc-context>",
      "solid": "import { Context } from '@kitn.ai/chat';\n\n<Context\n  onThresholdChange={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-conversations",
    "displayName": "Conversations",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-conversations></kc-conversations>\n<script type=\"module\">\n  const el = document.querySelector('kc-conversations');\n  el.groups = /* … */;\n  el.conversations = /* … */;\n  el.addEventListener('kc-conversation-select', (e) => console.log(e.detail));\n  el.addEventListener('kc-new-chat', (e) => console.log(e.detail));\n  el.addEventListener('kc-toggle-sidebar', (e) => console.log(e.detail));\n</script>",
      "react": "import { Conversations } from '@kitn.ai/chat/react';\n\n<Conversations\n  groups={groups}\n  conversations={conversations}\n  onConversationSelect={(e) => console.log(e.detail)}\n  onNewChat={(e) => console.log(e.detail)}\n  onToggleSidebar={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-conversations\n  :groups.prop=\"groups\"\n  :conversations.prop=\"conversations\"\n  @kc-conversation-select=\"onConversationSelect\"\n  @kc-new-chat=\"onNewChat\"\n  @kc-toggle-sidebar=\"onToggleSidebar\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-conversations\n  {groups}\n  {conversations}\n  on:kc-conversation-select={onConversationSelect}\n  on:kc-new-chat={onNewChat}\n  on:kc-toggle-sidebar={onToggleSidebar}\n></kc-conversations>",
      "angular": "<kc-conversations\n  [groups]=\"groups\"\n  [conversations]=\"conversations\"\n  (kc-conversation-select)=\"onConversationSelect($event)\"\n  (kc-new-chat)=\"onNewChat($event)\"\n  (kc-toggle-sidebar)=\"onToggleSidebar($event)\"\n></kc-conversations>",
      "solid": "import { ConversationList } from '@kitn.ai/chat';\n\n<ConversationList\n  groups={groups}\n  conversations={conversations}\n  onConversationSelect={(e) => console.log(e.detail)}\n  onNewChat={(e) => console.log(e.detail)}\n  onToggleSidebar={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-embed",
    "displayName": "Embed",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-embed></kc-embed>",
      "react": "import { Embed } from '@kitn.ai/chat/react';\n\n<Embed />",
      "vue": "<kc-embed />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-embed></kc-embed>",
      "angular": "<kc-embed></kc-embed>",
      "solid": "import { Embed } from '@kitn.ai/chat';\n\n<Embed />"
    }
  },
  {
    "tag": "kc-empty",
    "displayName": "Empty",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-empty></kc-empty>",
      "react": "import { Empty } from '@kitn.ai/chat/react';\n\n<Empty />",
      "vue": "<kc-empty />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-empty></kc-empty>",
      "angular": "<kc-empty></kc-empty>",
      "solid": "import { Empty } from '@kitn.ai/chat';\n\n<Empty />"
    }
  },
  {
    "tag": "kc-feedback-bar",
    "displayName": "FeedbackBar",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-feedback-bar></kc-feedback-bar>\n<script type=\"module\">\n  const el = document.querySelector('kc-feedback-bar');\n  el.addEventListener('kc-close', (e) => console.log(e.detail));\n  el.addEventListener('kc-feedback', (e) => console.log(e.detail));\n  el.addEventListener('kc-feedback-detail', (e) => console.log(e.detail));\n</script>",
      "react": "import { FeedbackBar } from '@kitn.ai/chat/react';\n\n<FeedbackBar\n  onClose={(e) => console.log(e.detail)}\n  onFeedback={(e) => console.log(e.detail)}\n  onFeedbackDetail={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-feedback-bar\n  @kc-close=\"onClose\"\n  @kc-feedback=\"onFeedback\"\n  @kc-feedback-detail=\"onFeedbackDetail\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-feedback-bar\n  on:kc-close={onClose}\n  on:kc-feedback={onFeedback}\n  on:kc-feedback-detail={onFeedbackDetail}\n></kc-feedback-bar>",
      "angular": "<kc-feedback-bar\n  (kc-close)=\"onClose($event)\"\n  (kc-feedback)=\"onFeedback($event)\"\n  (kc-feedback-detail)=\"onFeedbackDetail($event)\"\n></kc-feedback-bar>",
      "solid": "import { FeedbackBar } from '@kitn.ai/chat';\n\n<FeedbackBar\n  onClose={(e) => console.log(e.detail)}\n  onFeedback={(e) => console.log(e.detail)}\n  onFeedbackDetail={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-file-tree",
    "displayName": "FileTree",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-file-tree></kc-file-tree>\n<script type=\"module\">\n  const el = document.querySelector('kc-file-tree');\n  el.files = /* … */;\n  el.addEventListener('kc-select', (e) => console.log(e.detail));\n</script>",
      "react": "import { FileTree } from '@kitn.ai/chat/react';\n\n<FileTree\n  files={files}\n  onSelect={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-file-tree\n  :files.prop=\"files\"\n  @kc-select=\"onSelect\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-file-tree\n  {files}\n  on:kc-select={onSelect}\n></kc-file-tree>",
      "angular": "<kc-file-tree\n  [files]=\"files\"\n  (kc-select)=\"onSelect($event)\"\n></kc-file-tree>",
      "solid": "import { FileTree } from '@kitn.ai/chat';\n\n<FileTree\n  files={files}\n  onSelect={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-file-upload",
    "displayName": "FileUpload",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-file-upload></kc-file-upload>\n<script type=\"module\">\n  const el = document.querySelector('kc-file-upload');\n  el.addEventListener('kc-files-added', (e) => console.log(e.detail));\n</script>",
      "react": "import { FileUpload } from '@kitn.ai/chat/react';\n\n<FileUpload\n  onFilesAdded={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-file-upload\n  @kc-files-added=\"onFilesAdded\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-file-upload\n  on:kc-files-added={onFilesAdded}\n></kc-file-upload>",
      "angular": "<kc-file-upload\n  (kc-files-added)=\"onFilesAdded($event)\"\n></kc-file-upload>",
      "solid": "import { FileUpload } from '@kitn.ai/chat';\n\n<FileUpload\n  onFilesAdded={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-form",
    "displayName": "Form",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-form></kc-form>",
      "react": "import { Form } from '@kitn.ai/chat/react';\n\n<Form />",
      "vue": "<kc-form />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-form></kc-form>",
      "angular": "<kc-form></kc-form>",
      "solid": "import { Form } from '@kitn.ai/chat';\n\n<Form />"
    }
  },
  {
    "tag": "kc-image",
    "displayName": "Image",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-image></kc-image>",
      "react": "import { Image } from '@kitn.ai/chat/react';\n\n<Image />",
      "vue": "<kc-image />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-image></kc-image>",
      "angular": "<kc-image></kc-image>",
      "solid": "import { Image } from '@kitn.ai/chat';\n\n<Image />"
    }
  },
  {
    "tag": "kc-link-preview",
    "displayName": "LinkPreview",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-link-preview></kc-link-preview>",
      "react": "import { LinkPreview } from '@kitn.ai/chat/react';\n\n<LinkPreview />",
      "vue": "<kc-link-preview />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-link-preview></kc-link-preview>",
      "angular": "<kc-link-preview></kc-link-preview>",
      "solid": "import { LinkPreview } from '@kitn.ai/chat';\n\n<LinkPreview />"
    }
  },
  {
    "tag": "kc-loader",
    "displayName": "Loader",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-loader></kc-loader>",
      "react": "import { Loader } from '@kitn.ai/chat/react';\n\n<Loader />",
      "vue": "<kc-loader />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-loader></kc-loader>",
      "angular": "<kc-loader></kc-loader>",
      "solid": "import { Loader } from '@kitn.ai/chat';\n\n<Loader />"
    }
  },
  {
    "tag": "kc-markdown",
    "displayName": "Markdown",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-markdown content=\"…\"></kc-markdown>",
      "react": "import { Markdown } from '@kitn.ai/chat/react';\n\n<Markdown\n  content={content}\n/>",
      "vue": "<kc-markdown\n  :content=\"content\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-markdown\n  {content}\n></kc-markdown>",
      "angular": "<kc-markdown\n  [content]=\"content\"\n></kc-markdown>",
      "solid": "import { Markdown } from '@kitn.ai/chat';\n\n<Markdown\n  content={content}\n/>"
    }
  },
  {
    "tag": "kc-message",
    "displayName": "Message",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-message></kc-message>\n<script type=\"module\">\n  const el = document.querySelector('kc-message');\n  el.addEventListener('kc-message-action', (e) => console.log(e.detail));\n</script>",
      "react": "import { Message } from '@kitn.ai/chat/react';\n\n<Message\n  onMessageAction={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-message\n  @kc-message-action=\"onMessageAction\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-message\n  on:kc-message-action={onMessageAction}\n></kc-message>",
      "angular": "<kc-message\n  (kc-message-action)=\"onMessageAction($event)\"\n></kc-message>",
      "solid": "import { Message } from '@kitn.ai/chat';\n\n<Message\n  onMessageAction={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-model-switcher",
    "displayName": "ModelSwitcher",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-model-switcher></kc-model-switcher>\n<script type=\"module\">\n  const el = document.querySelector('kc-model-switcher');\n  el.models = /* … */;\n  el.addEventListener('kc-model-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { ModelSwitcher } from '@kitn.ai/chat/react';\n\n<ModelSwitcher\n  models={models}\n  onModelChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-model-switcher\n  :models.prop=\"models\"\n  @kc-model-change=\"onModelChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-model-switcher\n  {models}\n  on:kc-model-change={onModelChange}\n></kc-model-switcher>",
      "angular": "<kc-model-switcher\n  [models]=\"models\"\n  (kc-model-change)=\"onModelChange($event)\"\n></kc-model-switcher>",
      "solid": "import { ModelSwitcher } from '@kitn.ai/chat';\n\n<ModelSwitcher\n  models={models}\n  onModelChange={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-popover",
    "displayName": "Popover",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-popover></kc-popover>\n<script type=\"module\">\n  const el = document.querySelector('kc-popover');\n  el.addEventListener('kc-open-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { Popover } from '@kitn.ai/chat/react';\n\n<Popover\n  onOpenChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-popover\n  @kc-open-change=\"onOpenChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-popover\n  on:kc-open-change={onOpenChange}\n></kc-popover>",
      "angular": "<kc-popover\n  (kc-open-change)=\"onOpenChange($event)\"\n></kc-popover>"
    }
  },
  {
    "tag": "kc-prompt-input",
    "displayName": "PromptInput",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-prompt-input></kc-prompt-input>\n<script type=\"module\">\n  const el = document.querySelector('kc-prompt-input');\n  el.addEventListener('kc-search', (e) => console.log(e.detail));\n  el.addEventListener('kc-slash-select', (e) => console.log(e.detail));\n  el.addEventListener('kc-stop', (e) => console.log(e.detail));\n  el.addEventListener('kc-submit', (e) => console.log(e.detail));\n  el.addEventListener('kc-suggestion-click', (e) => console.log(e.detail));\n  el.addEventListener('kc-toolbar-action', (e) => console.log(e.detail));\n  el.addEventListener('kc-value-change', (e) => console.log(e.detail));\n  el.addEventListener('kc-voice', (e) => console.log(e.detail));\n</script>",
      "react": "import { PromptInput } from '@kitn.ai/chat/react';\n\n<PromptInput\n  onSearch={(e) => console.log(e.detail)}\n  onSlashSelect={(e) => console.log(e.detail)}\n  onStop={(e) => console.log(e.detail)}\n  onSubmit={(e) => console.log(e.detail)}\n  onSuggestionClick={(e) => console.log(e.detail)}\n  onToolbarAction={(e) => console.log(e.detail)}\n  onValueChange={(e) => console.log(e.detail)}\n  onVoice={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-prompt-input\n  @kc-search=\"onSearch\"\n  @kc-slash-select=\"onSlashSelect\"\n  @kc-stop=\"onStop\"\n  @kc-submit=\"onSubmit\"\n  @kc-suggestion-click=\"onSuggestionClick\"\n  @kc-toolbar-action=\"onToolbarAction\"\n  @kc-value-change=\"onValueChange\"\n  @kc-voice=\"onVoice\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-prompt-input\n  on:kc-search={onSearch}\n  on:kc-slash-select={onSlashSelect}\n  on:kc-stop={onStop}\n  on:kc-submit={onSubmit}\n  on:kc-suggestion-click={onSuggestionClick}\n  on:kc-toolbar-action={onToolbarAction}\n  on:kc-value-change={onValueChange}\n  on:kc-voice={onVoice}\n></kc-prompt-input>",
      "angular": "<kc-prompt-input\n  (kc-search)=\"onSearch($event)\"\n  (kc-slash-select)=\"onSlashSelect($event)\"\n  (kc-stop)=\"onStop($event)\"\n  (kc-submit)=\"onSubmit($event)\"\n  (kc-suggestion-click)=\"onSuggestionClick($event)\"\n  (kc-toolbar-action)=\"onToolbarAction($event)\"\n  (kc-value-change)=\"onValueChange($event)\"\n  (kc-voice)=\"onVoice($event)\"\n></kc-prompt-input>",
      "solid": "import { PromptInput } from '@kitn.ai/chat';\n\n<PromptInput\n  onSearch={(e) => console.log(e.detail)}\n  onSlashSelect={(e) => console.log(e.detail)}\n  onStop={(e) => console.log(e.detail)}\n  onSubmit={(e) => console.log(e.detail)}\n  onSuggestionClick={(e) => console.log(e.detail)}\n  onToolbarAction={(e) => console.log(e.detail)}\n  onValueChange={(e) => console.log(e.detail)}\n  onVoice={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-reasoning",
    "displayName": "Reasoning",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-reasoning text=\"…\"></kc-reasoning>\n<script type=\"module\">\n  const el = document.querySelector('kc-reasoning');\n  el.addEventListener('kc-open-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { Reasoning } from '@kitn.ai/chat/react';\n\n<Reasoning\n  text={text}\n  onOpenChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-reasoning\n  :text=\"text\"\n  @kc-open-change=\"onOpenChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-reasoning\n  {text}\n  on:kc-open-change={onOpenChange}\n></kc-reasoning>",
      "angular": "<kc-reasoning\n  [text]=\"text\"\n  (kc-open-change)=\"onOpenChange($event)\"\n></kc-reasoning>",
      "solid": "import { Reasoning } from '@kitn.ai/chat';\n\n<Reasoning\n  text={text}\n  onOpenChange={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-remote",
    "displayName": "Remote",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-remote></kc-remote>",
      "react": "import { Remote } from '@kitn.ai/chat/react';\n\n<Remote />",
      "vue": "<kc-remote />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-remote></kc-remote>",
      "angular": "<kc-remote></kc-remote>"
    }
  },
  {
    "tag": "kc-resizable",
    "displayName": "Resizable",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-resizable></kc-resizable>\n<script type=\"module\">\n  const el = document.querySelector('kc-resizable');\n  el.addEventListener('kc-change', (e) => console.log(e.detail));\n  el.addEventListener('kc-maximize-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { Resizable } from '@kitn.ai/chat/react';\n\n<Resizable\n  onChange={(e) => console.log(e.detail)}\n  onMaximizeChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-resizable\n  @kc-change=\"onChange\"\n  @kc-maximize-change=\"onMaximizeChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-resizable\n  on:kc-change={onChange}\n  on:kc-maximize-change={onMaximizeChange}\n></kc-resizable>",
      "angular": "<kc-resizable\n  (kc-change)=\"onChange($event)\"\n  (kc-maximize-change)=\"onMaximizeChange($event)\"\n></kc-resizable>",
      "solid": "import { Resizable } from '@kitn.ai/chat';\n\n<Resizable\n  onChange={(e) => console.log(e.detail)}\n  onMaximizeChange={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-resizable-item",
    "displayName": "ResizableItem",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-resizable-item></kc-resizable-item>\n<script type=\"module\">\n  const el = document.querySelector('kc-resizable-item');\n  el.addEventListener('kc-change', (e) => console.log(e.detail));\n  el.addEventListener('kc-maximize-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { ResizableItem } from '@kitn.ai/chat/react';\n\n<ResizableItem\n  onChange={(e) => console.log(e.detail)}\n  onMaximizeChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-resizable-item\n  @kc-change=\"onChange\"\n  @kc-maximize-change=\"onMaximizeChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-resizable-item\n  on:kc-change={onChange}\n  on:kc-maximize-change={onMaximizeChange}\n></kc-resizable-item>",
      "angular": "<kc-resizable-item\n  (kc-change)=\"onChange($event)\"\n  (kc-maximize-change)=\"onMaximizeChange($event)\"\n></kc-resizable-item>"
    }
  },
  {
    "tag": "kc-response-stream",
    "displayName": "ResponseStream",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-response-stream></kc-response-stream>\n<script type=\"module\">\n  const el = document.querySelector('kc-response-stream');\n  el.addEventListener('kc-complete', (e) => console.log(e.detail));\n</script>",
      "react": "import { ResponseStream } from '@kitn.ai/chat/react';\n\n<ResponseStream\n  onComplete={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-response-stream\n  @kc-complete=\"onComplete\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-response-stream\n  on:kc-complete={onComplete}\n></kc-response-stream>",
      "angular": "<kc-response-stream\n  (kc-complete)=\"onComplete($event)\"\n></kc-response-stream>",
      "solid": "import { ResponseStream } from '@kitn.ai/chat';\n\n<ResponseStream\n  onComplete={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-scope-picker",
    "displayName": "ScopePicker",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-scope-picker></kc-scope-picker>\n<script type=\"module\">\n  const el = document.querySelector('kc-scope-picker');\n  el.availableAuthors = /* … */;\n  el.availableTags = /* … */;\n  el.addEventListener('kc-scope-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { ScopePicker } from '@kitn.ai/chat/react';\n\n<ScopePicker\n  availableAuthors={availableAuthors}\n  availableTags={availableTags}\n  onScopeChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-scope-picker\n  :availableAuthors.prop=\"availableAuthors\"\n  :availableTags.prop=\"availableTags\"\n  @kc-scope-change=\"onScopeChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-scope-picker\n  {availableAuthors}\n  {availableTags}\n  on:kc-scope-change={onScopeChange}\n></kc-scope-picker>",
      "angular": "<kc-scope-picker\n  [availableAuthors]=\"availableAuthors\"\n  [availableTags]=\"availableTags\"\n  (kc-scope-change)=\"onScopeChange($event)\"\n></kc-scope-picker>",
      "solid": "import { ChatScopePicker } from '@kitn.ai/chat';\n\n<ChatScopePicker\n  availableAuthors={availableAuthors}\n  availableTags={availableTags}\n  onScopeChange={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-scroll-button",
    "displayName": "ScrollButton",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-scroll-button></kc-scroll-button>\n<script type=\"module\">\n  const el = document.querySelector('kc-scroll-button');\n  el.addEventListener('kc-scroll', (e) => console.log(e.detail));\n</script>",
      "react": "import { ScrollButton } from '@kitn.ai/chat/react';\n\n<ScrollButton\n  onScroll={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-scroll-button\n  @kc-scroll=\"onScroll\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-scroll-button\n  on:kc-scroll={onScroll}\n></kc-scroll-button>",
      "angular": "<kc-scroll-button\n  (kc-scroll)=\"onScroll($event)\"\n></kc-scroll-button>",
      "solid": "import { ScrollButton } from '@kitn.ai/chat';\n\n<ScrollButton\n  onScroll={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-skills",
    "displayName": "Skills",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-skills></kc-skills>\n<script type=\"module\">\n  const el = document.querySelector('kc-skills');\n  el.skills = /* … */;\n</script>",
      "react": "import { Skills } from '@kitn.ai/chat/react';\n\n<Skills\n  skills={skills}\n/>",
      "vue": "<kc-skills\n  :skills.prop=\"skills\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-skills\n  {skills}\n></kc-skills>",
      "angular": "<kc-skills\n  [skills]=\"skills\"\n></kc-skills>",
      "solid": "import { MessageSkills } from '@kitn.ai/chat';\n\n<MessageSkills\n  skills={skills}\n/>"
    }
  },
  {
    "tag": "kc-source",
    "displayName": "Source",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-source></kc-source>",
      "react": "import { Source } from '@kitn.ai/chat/react';\n\n<Source />",
      "vue": "<kc-source />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-source></kc-source>",
      "angular": "<kc-source></kc-source>",
      "solid": "import { Source } from '@kitn.ai/chat';\n\n<Source />"
    }
  },
  {
    "tag": "kc-sources",
    "displayName": "Sources",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-sources></kc-sources>\n<script type=\"module\">\n  const el = document.querySelector('kc-sources');\n  el.sources = /* … */;\n</script>",
      "react": "import { Sources } from '@kitn.ai/chat/react';\n\n<Sources\n  sources={sources}\n/>",
      "vue": "<kc-sources\n  :sources.prop=\"sources\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-sources\n  {sources}\n></kc-sources>",
      "angular": "<kc-sources\n  [sources]=\"sources\"\n></kc-sources>",
      "solid": "import { SourceList } from '@kitn.ai/chat';\n\n<SourceList\n  sources={sources}\n/>"
    }
  },
  {
    "tag": "kc-suggestions",
    "displayName": "Suggestions",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-suggestions></kc-suggestions>\n<script type=\"module\">\n  const el = document.querySelector('kc-suggestions');\n  el.suggestions = /* … */;\n  el.addEventListener('kc-select', (e) => console.log(e.detail));\n</script>",
      "react": "import { Suggestions } from '@kitn.ai/chat/react';\n\n<Suggestions\n  suggestions={suggestions}\n  onSelect={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-suggestions\n  :suggestions.prop=\"suggestions\"\n  @kc-select=\"onSelect\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-suggestions\n  {suggestions}\n  on:kc-select={onSelect}\n></kc-suggestions>",
      "angular": "<kc-suggestions\n  [suggestions]=\"suggestions\"\n  (kc-select)=\"onSelect($event)\"\n></kc-suggestions>"
    }
  },
  {
    "tag": "kc-switch",
    "displayName": "Switch",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-switch></kc-switch>\n<script type=\"module\">\n  const el = document.querySelector('kc-switch');\n  el.addEventListener('kc-change', (e) => console.log(e.detail));\n</script>",
      "react": "import { Switch } from '@kitn.ai/chat/react';\n\n<Switch\n  onChange={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-switch\n  @kc-change=\"onChange\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-switch\n  on:kc-change={onChange}\n></kc-switch>",
      "angular": "<kc-switch\n  (kc-change)=\"onChange($event)\"\n></kc-switch>"
    }
  },
  {
    "tag": "kc-tasks",
    "displayName": "Tasks",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-tasks></kc-tasks>",
      "react": "import { Tasks } from '@kitn.ai/chat/react';\n\n<Tasks />",
      "vue": "<kc-tasks />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-tasks></kc-tasks>",
      "angular": "<kc-tasks></kc-tasks>"
    }
  },
  {
    "tag": "kc-text-shimmer",
    "displayName": "TextShimmer",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-text-shimmer></kc-text-shimmer>",
      "react": "import { TextShimmer } from '@kitn.ai/chat/react';\n\n<TextShimmer />",
      "vue": "<kc-text-shimmer />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-text-shimmer></kc-text-shimmer>",
      "angular": "<kc-text-shimmer></kc-text-shimmer>",
      "solid": "import { TextShimmer } from '@kitn.ai/chat';\n\n<TextShimmer />"
    }
  },
  {
    "tag": "kc-thinking-bar",
    "displayName": "ThinkingBar",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-thinking-bar></kc-thinking-bar>\n<script type=\"module\">\n  const el = document.querySelector('kc-thinking-bar');\n  el.addEventListener('kc-stop', (e) => console.log(e.detail));\n</script>",
      "react": "import { ThinkingBar } from '@kitn.ai/chat/react';\n\n<ThinkingBar\n  onStop={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-thinking-bar\n  @kc-stop=\"onStop\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-thinking-bar\n  on:kc-stop={onStop}\n></kc-thinking-bar>",
      "angular": "<kc-thinking-bar\n  (kc-stop)=\"onStop($event)\"\n></kc-thinking-bar>",
      "solid": "import { ThinkingBar } from '@kitn.ai/chat';\n\n<ThinkingBar\n  onStop={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-tool",
    "displayName": "Tool",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-tool></kc-tool>",
      "react": "import { Tool } from '@kitn.ai/chat/react';\n\n<Tool />",
      "vue": "<kc-tool />",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-tool></kc-tool>",
      "angular": "<kc-tool></kc-tool>",
      "solid": "import { Tool } from '@kitn.ai/chat';\n\n<Tool />"
    }
  },
  {
    "tag": "kc-voice-input",
    "displayName": "VoiceInput",
    "hasSolid": true,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-voice-input></kc-voice-input>\n<script type=\"module\">\n  const el = document.querySelector('kc-voice-input');\n  el.addEventListener('kc-audio-captured', (e) => console.log(e.detail));\n  el.addEventListener('kc-transcription', (e) => console.log(e.detail));\n</script>",
      "react": "import { VoiceInput } from '@kitn.ai/chat/react';\n\n<VoiceInput\n  onAudioCaptured={(e) => console.log(e.detail)}\n  onTranscription={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-voice-input\n  @kc-audio-captured=\"onAudioCaptured\"\n  @kc-transcription=\"onTranscription\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-voice-input\n  on:kc-audio-captured={onAudioCaptured}\n  on:kc-transcription={onTranscription}\n></kc-voice-input>",
      "angular": "<kc-voice-input\n  (kc-audio-captured)=\"onAudioCaptured($event)\"\n  (kc-transcription)=\"onTranscription($event)\"\n></kc-voice-input>",
      "solid": "import { VoiceInput } from '@kitn.ai/chat';\n\n<VoiceInput\n  onAudioCaptured={(e) => console.log(e.detail)}\n  onTranscription={(e) => console.log(e.detail)}\n/>"
    }
  },
  {
    "tag": "kc-workspace",
    "displayName": "Workspace",
    "hasSolid": false,
    "snippets": {
      "html": "<script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@kitn.ai/chat/dist/kitn-chat.es.js\"></script>\n\n<kc-workspace></kc-workspace>\n<script type=\"module\">\n  const el = document.querySelector('kc-workspace');\n  el.groups = /* … */;\n  el.conversations = /* … */;\n  el.messages = /* … */;\n  el.addEventListener('kc-conversation-select', (e) => console.log(e.detail));\n  el.addEventListener('kc-message-action', (e) => console.log(e.detail));\n  el.addEventListener('kc-model-change', (e) => console.log(e.detail));\n  el.addEventListener('kc-new-chat', (e) => console.log(e.detail));\n  el.addEventListener('kc-search', (e) => console.log(e.detail));\n  el.addEventListener('kc-sidebar-toggle', (e) => console.log(e.detail));\n  el.addEventListener('kc-slash-select', (e) => console.log(e.detail));\n  el.addEventListener('kc-submit', (e) => console.log(e.detail));\n  el.addEventListener('kc-suggestion-click', (e) => console.log(e.detail));\n  el.addEventListener('kc-value-change', (e) => console.log(e.detail));\n  el.addEventListener('kc-voice', (e) => console.log(e.detail));\n</script>",
      "react": "import { Workspace } from '@kitn.ai/chat/react';\n\n<Workspace\n  groups={groups}\n  conversations={conversations}\n  messages={messages}\n  onConversationSelect={(e) => console.log(e.detail)}\n  onMessageAction={(e) => console.log(e.detail)}\n  onModelChange={(e) => console.log(e.detail)}\n  onNewChat={(e) => console.log(e.detail)}\n  onSearch={(e) => console.log(e.detail)}\n  onSidebarToggle={(e) => console.log(e.detail)}\n  onSlashSelect={(e) => console.log(e.detail)}\n  onSubmit={(e) => console.log(e.detail)}\n  onSuggestionClick={(e) => console.log(e.detail)}\n  onValueChange={(e) => console.log(e.detail)}\n  onVoice={(e) => console.log(e.detail)}\n/>",
      "vue": "<kc-workspace\n  :groups.prop=\"groups\"\n  :conversations.prop=\"conversations\"\n  :messages.prop=\"messages\"\n  @kc-conversation-select=\"onConversationSelect\"\n  @kc-message-action=\"onMessageAction\"\n  @kc-model-change=\"onModelChange\"\n  @kc-new-chat=\"onNewChat\"\n  @kc-search=\"onSearch\"\n  @kc-sidebar-toggle=\"onSidebarToggle\"\n  @kc-slash-select=\"onSlashSelect\"\n  @kc-submit=\"onSubmit\"\n  @kc-suggestion-click=\"onSuggestionClick\"\n  @kc-value-change=\"onValueChange\"\n  @kc-voice=\"onVoice\"\n/>",
      "svelte": "<script>\n  import '@kitn.ai/chat/elements';\n</script>\n\n<kc-workspace\n  {groups}\n  {conversations}\n  {messages}\n  on:kc-conversation-select={onConversationSelect}\n  on:kc-message-action={onMessageAction}\n  on:kc-model-change={onModelChange}\n  on:kc-new-chat={onNewChat}\n  on:kc-search={onSearch}\n  on:kc-sidebar-toggle={onSidebarToggle}\n  on:kc-slash-select={onSlashSelect}\n  on:kc-submit={onSubmit}\n  on:kc-suggestion-click={onSuggestionClick}\n  on:kc-value-change={onValueChange}\n  on:kc-voice={onVoice}\n></kc-workspace>",
      "angular": "<kc-workspace\n  [groups]=\"groups\"\n  [conversations]=\"conversations\"\n  [messages]=\"messages\"\n  (kc-conversation-select)=\"onConversationSelect($event)\"\n  (kc-message-action)=\"onMessageAction($event)\"\n  (kc-model-change)=\"onModelChange($event)\"\n  (kc-new-chat)=\"onNewChat($event)\"\n  (kc-search)=\"onSearch($event)\"\n  (kc-sidebar-toggle)=\"onSidebarToggle($event)\"\n  (kc-slash-select)=\"onSlashSelect($event)\"\n  (kc-submit)=\"onSubmit($event)\"\n  (kc-suggestion-click)=\"onSuggestionClick($event)\"\n  (kc-value-change)=\"onValueChange($event)\"\n  (kc-voice)=\"onVoice($event)\"\n></kc-workspace>"
    }
  }
]