{ "name": "ReviewerInbox", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/ReviewerInbox.tsx", "chapterTag": "16 Pipeline & CRM", "chapter": "16-app-pipeline.html", "sectionId": "reviewer-inbox", "elName": "Pending agent responses — six items", "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#reviewer-inbox", "hasLiveDemo": false, "description": "Human-in-the-loop review queue. A list of pending agent responses\nawaiting reviewer approval — each row carries a status dot, summary\ncopy, originating-pipeline label, and SLA countdown. Filter chips\nabove the list scope by status; per-row Approve / Reject / Edit\naffordances reveal on hover when wired.", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "ReviewerInbox", "isPrincipal": true, "isType": false }, { "name": "ReviewerInboxProps", "isPrincipal": false, "isType": true }, { "name": "ReviewerInboxItem", "isPrincipal": false, "isType": true }, { "name": "ReviewerInboxStatus", "isPrincipal": false, "isType": false }, { "name": "ReviewerInboxFilter", "isPrincipal": false, "isType": false } ], "importStatement": "import { ReviewerInbox } from \"@magicblocksai/ui\";", "props": [ { "name": "items", "optional": false, "type": "ReviewerInboxItem[]", "doc": "The queue of agent responses awaiting review." }, { "name": "selectedId", "optional": true, "type": "string", "doc": "Controlled selected row id. Pair with `onSelectedChange`." }, { "name": "defaultSelectedId", "optional": true, "type": "string", "doc": "Uncontrolled initial selection." }, { "name": "onSelectedChange", "optional": true, "type": "(id: string | undefined) => void", "doc": "Fires whenever the selected row changes." }, { "name": "filter", "optional": true, "type": "ReviewerInboxFilter", "doc": "Controlled filter. Pair with `onFilterChange`." }, { "name": "defaultFilter", "optional": true, "type": "ReviewerInboxFilter", "doc": "Uncontrolled initial filter. Default `\"all\"`." }, { "name": "onFilterChange", "optional": true, "type": "(filter: ReviewerInboxFilter) => void", "doc": "Fires whenever the active filter changes." }, { "name": "onApprove", "optional": true, "type": "(id: string) => void", "doc": "Approve handler — when omitted, the Approve affordance is hidden." }, { "name": "onReject", "optional": true, "type": "(id: string) => void", "doc": "Reject handler — when omitted, the Reject affordance is hidden." }, { "name": "onEdit", "optional": true, "type": "(id: string) => void", "doc": "Edit handler — when omitted, the Edit affordance is hidden." }, { "name": "className", "optional": true, "type": "string", "doc": "Class merged via `cn()`. Caller wins over defaults." } ], "classesUsed": [ "btn", "btn-sm", "reviewer-inbox", "reviewer-inbox-filter", "reviewer-inbox-filter-count", "reviewer-inbox-filters", "reviewer-inbox-list", "reviewer-inbox-row", "reviewer-inbox-row-actions", "reviewer-inbox-row-pipeline", "reviewer-inbox-row-sla", "reviewer-inbox-row-status", "reviewer-inbox-row-summary" ], "examples": { "react": "", "html": "
  1. Pricing question — agent quoted $4k but $4.2k is currentsales-replies2h 14m
  2. Booking confirmation — agent missed the dietary notebookings5h 42m
  3. Renewal nudge — agent's CTA is for the wrong product linesales-replies1d
", "css": ".btn {\n display: inline-flex; align-items: center; justify-content: center;\n gap: var(--s-2);\n font: 600 14.5px/1 var(--f-display);\n letter-spacing: -0.005em;\n padding: 11px var(--s-5);\n border: 1px solid transparent;\n border-radius: var(--r-md);\n cursor: pointer;\n text-decoration: none;\n transition: background var(--dur-2) var(--ease),\n border-color var(--dur-2) var(--ease),\n transform var(--dur-2) var(--ease),\n box-shadow var(--dur-2) var(--ease),\n color var(--dur-2) var(--ease);\n user-select: none;\n white-space: nowrap;\n appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-sm { padding: 7px var(--s-4); font-size: 13px; border-radius: var(--r-sm); }\n\n.reviewer-inbox {\n display: flex; flex-direction: column;\n gap: var(--s-3);\n background: var(--bg-paper);\n border: 1px solid var(--hair); border-radius: var(--r-md);\n padding: var(--s-4);\n}\n\n.reviewer-inbox-filter {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 6px 10px; min-height: 32px;\n background: var(--bg-sunk); border: 1px solid var(--hair); border-radius: 999px;\n font: 500 12px/1 var(--f-body); color: var(--fg-soft);\n cursor: pointer;\n}\n\n.reviewer-inbox-filter-count {\n font: 600 11px/1 var(--f-mono);\n padding: 2px 6px; border-radius: 999px;\n background: var(--bg-paper); color: var(--fg-faint);\n}\n\n.reviewer-inbox-filters {\n display: flex; gap: var(--s-2); flex-wrap: wrap;\n}\n\n.reviewer-inbox-list {\n list-style: none; margin: 0; padding: 0;\n display: flex; flex-direction: column;\n border: 1px solid var(--hair); border-radius: var(--r-sm);\n overflow: hidden;\n}\n\n.reviewer-inbox-row {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto auto;\n column-gap: var(--s-3); row-gap: 2px;\n padding: var(--s-3) var(--s-4);\n border-bottom: 1px solid var(--hair);\n cursor: pointer;\n align-items: center;\n min-height: 56px;\n}\n\n.reviewer-inbox-row-actions {\n display: inline-flex;\n visibility: hidden;\n opacity: 0;\n grid-row: 1 / 3; grid-column: 4;\n gap: 6px; align-items: center;\n transition: opacity 0.15s ease, visibility 0s linear 0.15s;\n}\n\n.reviewer-inbox-row-pipeline {\n grid-row: 2; grid-column: 2;\n font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em;\n color: var(--fg-faint);\n}\n\n.reviewer-inbox-row-sla {\n grid-row: 1 / 3; grid-column: 3;\n font: 500 12px/1 var(--f-mono); color: var(--fg-dim);\n white-space: nowrap;\n}\n\n.reviewer-inbox-row-status {\n grid-row: 1 / 3;\n width: 8px; height: 8px; border-radius: 50%;\n}\n\n.reviewer-inbox-row-summary {\n grid-row: 1; grid-column: 2;\n font: 500 13px/1.4 var(--f-body); color: var(--fg);\n min-width: 0;\n}" } }