{ "name": "DialogueContrast", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/DialogueContrast.tsx", "chapterTag": "11 Narrative Systems", "chapter": "12-narrative-systems.html", "sectionId": "dialogue-contrast", "elName": "Reliability Gap — OnePrompt vs MagicBlocks", "demoUrl": "https://brand.magicblocks.ai/components/12-narrative-systems#dialogue-contrast", "hasLiveDemo": false, "description": "Two-column conversation comparison container. Designed for product /\nbehaviour / before-after comparison content — e.g. \"how does our agent\nhandle this prompt vs theirs\", \"support response, old script vs new\".\nWraps two `` children side-by-side; collapses to a\nsingle column below 720px.", "useClient": false, "interactivity": "display", "namedExports": [ { "name": "DialogueContrast", "isPrincipal": true, "isType": false }, { "name": "DialogueContrastProps", "isPrincipal": false, "isType": true }, { "name": "DialogueColumn", "isPrincipal": false, "isType": true }, { "name": "DialogueColumnProps", "isPrincipal": false, "isType": true }, { "name": "DialogueTone", "isPrincipal": false, "isType": true }, { "name": "DialogueOutcome", "isPrincipal": false, "isType": false }, { "name": "DialogueMessage", "isPrincipal": false, "isType": true }, { "name": "DialogueMessageProps", "isPrincipal": false, "isType": true }, { "name": "DialogueEllip", "isPrincipal": false, "isType": false }, { "name": "DialogueEllipProps", "isPrincipal": false, "isType": true } ], "importStatement": "import { DialogueContrast } from \"@magicblocksai/ui\";", "props": [ { "name": "children", "optional": false, "type": "ReactNode", "doc": "Two `` children (left + right)." } ], "classesUsed": [ "dialogue-avatar", "dialogue-bubble", "dialogue-bubble-ellip", "dialogue-column", "dialogue-contrast", "dialogue-head", "dialogue-msg", "dialogue-msgs", "dialogue-outcome", "dialogue-outcome-label", "dialogue-status", "dialogue-tag", "dialogue-who" ], "examples": { "react": "\n Failed}\n outcome={{ tone: \"bad\", label: \"Outcome\", text: \"Agent forgot the phone number.\" }}>\n What is your phone number?\n Why do you need that?\n \n Completed}\n outcome={{ tone: \"good\", label: \"Outcome\", text: \"Refused to progress past Contact without phone.\" }}>\n What is your phone number?\n Why do you need that?\n \n", "html": "
\n
\n
\n OnePrompt\n · run #400\n Failed\n
\n
\n
\n AI\n What is your phone number?\n
\n
\n C\n Why do you need that?\n
\n
\n AI\n [explains privacy policy for 3 long paragraphs]\n
\n
\n C\n Okay. Are rates going up next week?\n
\n
\n
\n Outcome\n The agent forgot it never got the phone number and moved on.\n
\n
\n
\n
\n MagicBlocks\n · run #400\n Completed\n
\n
\n
\n AI\n What is your phone number?\n
\n
\n C\n Why do you need that?\n
\n
\n AI\n I still need your phone number to continue your application.\n
\n
\n
\n Outcome\n The agent refused to progress past Contact until phone_number was collected.\n
\n
\n
", "css": ".dialogue-avatar {\n width: 28px;\n height: 28px;\n border-radius: 999px;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font: 700 12px/1 var(--f-display);\n background: var(--bg-warm);\n color: var(--fg);\n}\n\n.dialogue-bubble {\n padding: 10px 14px;\n border-radius: 14px;\n font-size: 14px;\n line-height: 1.5;\n background: var(--bg-warm);\n color: var(--fg);\n}\n\n.dialogue-bubble-ellip {\n color: color-mix(in oklab, currentColor 60%, transparent);\n font-style: italic;\n font-size: 12.5px;\n}\n\n.dialogue-column {\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-lg);\n padding: var(--s-5);\n box-shadow: var(--sh-1);\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n\n.dialogue-contrast {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--s-5);\n margin-top: var(--s-5);\n}\n\n.dialogue-head {\n display: flex;\n align-items: center;\n gap: var(--s-3);\n padding-bottom: var(--s-3);\n border-bottom: 1px solid var(--hair-soft);\n}\n\n.dialogue-msg {\n display: flex;\n gap: 10px;\n max-width: 92%;\n}\n\n.dialogue-msgs {\n display: flex;\n flex-direction: column;\n gap: var(--s-3);\n margin-top: var(--s-3);\n flex: 1;\n}\n\n.dialogue-outcome {\n margin-top: var(--s-4);\n padding: var(--s-3) var(--s-4);\n border-radius: var(--r-md);\n font-size: 13.5px;\n line-height: 1.5;\n display: flex;\n gap: 10px;\n align-items: flex-start;\n background: var(--bg-warm);\n}\n\n.dialogue-outcome-label {\n font: 600 10.5px/1 var(--f-mono);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n flex-shrink: 0;\n padding-top: 2px;\n opacity: 0.85;\n}\n\n.dialogue-status { margin-left: auto; }\n\n.dialogue-tag {\n font: 500 10.5px/1 var(--f-mono);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--fg-dim);\n}\n\n.dialogue-who {\n font: 700 18px/1.2 var(--f-display);\n letter-spacing: -0.01em;\n}" } }