{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-shared-conversation",
  "type": "registry:component",
  "title": "Shared conversation",
  "description": "A read-only transcript someone sent you, with a way to pick it up yourself.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/shared-conversation.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/shared-conversation.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { LinkIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { inkButton, mono, paper } from \"./surfaces\";\n\nexport interface SharedTurn {\n  id: string;\n  role: \"user\" | \"assistant\";\n  text: string;\n}\n\nexport function SharedConversation({\n  title,\n  sharedBy,\n  sharedAt,\n  turns,\n  onContinue,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"sharedBy\" | \"sharedAt\" | \"turns\" | \"onContinue\"\n> & {\n  title: string;\n  sharedBy: string;\n  sharedAt: string;\n  turns: readonly SharedTurn[];\n  onContinue?: () => void;\n}) {\n  return (\n    <div\n      data-slot=\"shared-conversation\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col overflow-hidden rounded-2xl\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex items-center gap-2.5 px-4 pt-3.5 pb-3\">\n        <LinkIcon className=\"text-foreground/30 size-3.5 shrink-0\" />\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <span className=\"truncate text-[13.5px] font-medium\">{title}</span>\n          <span className={cn(mono, \"text-foreground/30 truncate\")}>\n            shared by {sharedBy} · {sharedAt}\n          </span>\n        </div>\n      </div>\n\n      <div className=\"border-foreground/[0.07] flex flex-col gap-2.5 border-t px-4 py-3.5\">\n        {turns.map((turn) => (\n          <div\n            key={turn.id}\n            className={cn(\n              \"text-[13px] leading-relaxed\",\n              turn.role === \"user\"\n                ? \"bg-foreground/[0.05] ms-auto max-w-[85%] rounded-2xl px-3 py-2\"\n                : \"text-foreground/70\",\n            )}\n          >\n            {turn.text}\n          </div>\n        ))}\n      </div>\n\n      <div className=\"border-foreground/[0.07] flex items-center gap-2 border-t px-4 py-3\">\n        <span className={cn(mono, \"text-foreground/30\")}>read only</span>\n        <button\n          type=\"button\"\n          onClick={onContinue}\n          className={cn(\n            inkButton,\n            \"ms-auto flex h-8 items-center rounded-full px-3.5 text-xs font-medium\",\n          )}\n        >\n          Continue in your own chat\n        </button>\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}