{
  "name": "TopicChip",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TopicChip.tsx",
  "chapterTag": "17 AI Surfaces",
  "chapter": "17-app-ai.html",
  "sectionId": "knowledge-item",
  "elName": "Knowledge item row",
  "demoUrl": "https://brand.magicblocks.ai/components/17-app-ai#knowledge-item",
  "hasLiveDemo": false,
  "description": "Topic chip for the \"When a topic comes up\" lane. Maps the internal topic key\nto its plain label and the kit's green (topic-lane) tone. Wraps `Chip`.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "TopicChip",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "KNOWLEDGE_TOPICS",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "TopicChipProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "KnowledgeTopic",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { TopicChip } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "topic",
      "optional": false,
      "type": "KnowledgeTopic",
      "doc": "One of the 12 conditional-retrieval topics."
    }
  ],
  "classesUsed": [],
  "examples": {
    "react": "<TopicChip topic=\"pricing\" />",
    "html": "<div style=\"display:flex;flex-direction:column;gap:var(--s-2);max-width:520px;margin:0 auto;\">\n  <div class=\"source-row\"><span class=\"icon-chip icon-chip-neutral source-row-icon\" style=\"width:40px;height:40px\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18\"/></svg></span><div class=\"source-row-body\"><span class=\"source-row-name\">What makes a good CRM</span><span class=\"source-row-meta\">A good CRM centralises every customer interaction, automates repetitive data entry, and surfaces the next best action&hellip;</span></div><div class=\"source-row-trailing\"><p class=\"caption\">2d ago</p></div></div>\n  <div class=\"source-row\"><span class=\"icon-chip icon-chip-neutral source-row-icon\" style=\"width:40px;height:40px\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z\"/><path d=\"M14 3v5h5M8 13h8M8 17h5\"/></svg></span><div class=\"source-row-body\"><span class=\"source-row-name\">How much does the Pro plan cost?</span><span class=\"source-row-meta\">Pro is $49 per user / month billed annually ($59 monthly). Includes the automation builder&hellip;</span></div><div class=\"source-row-status\"><span class=\"chip chip-green\">Pricing</span></div></div>\n  <div class=\"source-row\"><span class=\"icon-chip icon-chip-neutral source-row-icon\" style=\"width:40px;height:40px\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20h4L19 9l-4-4L4 16z\"/><path d=\"M14 6l4 4\"/></svg></span><div class=\"source-row-body\"><span class=\"source-row-name\">Never promise migration timelines under 2 weeks.</span></div><div class=\"source-row-trailing\"><p class=\"caption\">3d ago</p></div></div>\n</div>",
    "css": null
  }
}