{
  "name": "MemoryList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MemoryList.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "memory-list",
  "elName": "MemoryList",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#memory-list",
  "hasLiveDemo": false,
  "description": "Free-form, agent-summarised memories about a contact — the \"soft\" knowledge a\nstructured form can't hold. Each row: optional icon · text · source · time ·\nconfidence. The differentiating store of an AI-native CRM.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "MemoryList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MemoryListProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "Memory",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { MemoryList } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "memories",
      "optional": false,
      "type": "Memory[]",
      "doc": ""
    },
    {
      "name": "emptyLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Shown when `memories` is empty."
    }
  ],
  "classesUsed": [
    "memory-conf",
    "memory-empty",
    "memory-history",
    "memory-icon",
    "memory-list",
    "memory-meta",
    "memory-quote",
    "memory-row",
    "memory-text",
    "memory-type"
  ],
  "examples": {
    "react": "<MemoryList memories={[\n  { id: \"m1\", text: \"Prefers email over phone calls.\", source: \"Sage\", timestamp: \"across 3 sessions\", confidence: \"high\" },\n]} />",
    "html": "<div class=\"memory-list\">\n  <div class=\"memory-row\"><div class=\"memory-body\"><div class=\"memory-text\">Prefers email over phone calls.</div><div class=\"memory-meta\"><span class=\"memory-source\">Sage</span><span class=\"memory-ts\">across 3 sessions</span><span class=\"memory-conf\" data-conf=\"high\">high</span></div></div></div>\n  <div class=\"memory-row\"><div class=\"memory-body\"><div class=\"memory-text\">Time-sensitive &mdash; wants to close before an expected rate change in July.</div><div class=\"memory-meta\"><span class=\"memory-source\">CREFCO Lead Agent</span><span class=\"memory-ts\">today</span><span class=\"memory-conf\" data-conf=\"high\">high</span></div></div></div>\n  <div class=\"memory-row\"><div class=\"memory-body\"><div class=\"memory-text\">Comparing offers with two other lenders.</div><div class=\"memory-meta\"><span class=\"memory-source\">Renewal Agent</span><span class=\"memory-ts\">2 weeks ago</span><span class=\"memory-conf\" data-conf=\"medium\">medium</span></div></div></div>\n</div>",
    "css": ".memory-conf { font: 600 9px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--r-pill); background: var(--success-soft); color: var(--success-text); }\n\n.memory-empty { font: 400 13px/1.5 var(--f-body); color: var(--fg-faint); margin: 0; padding: var(--s-3) 0; }\n\n.memory-history { font: 600 9px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); }\n\n.memory-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-text); flex: none; }\n\n.memory-list { display: flex; flex-direction: column; }\n\n.memory-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: 4px; font: 500 11px/1 var(--f-body); color: var(--fg-faint); }\n\n.memory-quote { font: 400 12.5px/1.5 var(--f-body); font-style: italic; color: var(--fg-soft); border-left: 2px solid var(--hair); padding-left: var(--s-3); margin-top: 4px; }\n\n.memory-row { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--hair-soft); }\n\n.memory-text { font: 400 14px/1.5 var(--f-body); color: var(--fg); }\n\n.memory-type { font: 600 9px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--r-pill); background: var(--bg-sunk); color: var(--fg-dim); }"
  }
}