{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-ai-conversation",
  "title": "Aurora AI Conversation",
  "author": "jmagar <https://github.com/jmagar>",
  "description": "Aurora-native conversation parity surface from AI Elements.",
  "dependencies": [
    "lucide-react@^0.487.0"
  ],
  "registryDependencies": [
    "@aurora/aurora-tokens",
    "@aurora/aurora-ai-elements",
    "@aurora/aurora-avatar"
  ],
  "files": [
    {
      "path": "registry/aurora/blocks/ai/elements/conversation.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AuroraAvatar } from \"@/registry/aurora/ui/avatar\"\n\n// ─── Types ──────────────────────────────────────────────────────────────────\n\nexport type ConversationProps = React.HTMLAttributes<HTMLDivElement> & {\n  /** Caps the scroll height of the thread (px). Defaults to 520. */\n  maxHeight?: number\n}\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLElement> {\n  role?: \"assistant\" | \"user\" | \"system\"\n}\n\nexport interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string\n  /** Accent family for the avatar ring + glyph. */\n  tone?: \"axon\" | \"cyan\" | \"rose\" | \"muted\"\n}\n\n// ─── Conversation ─────────────────────────────────────────────────────────────\n\nconst Conversation = ({ ref, className, style, maxHeight = 520, ...props }: ConversationProps & { ref?: React.Ref<HTMLDivElement> }) => (\n    <div\n      ref={ref}\n      role=\"log\"\n      aria-live=\"polite\"\n      aria-label=\"Conversation\"\n      className={[\"grid gap-4 border p-4\", className].filter(Boolean).join(\" \")}\n      style={{\n        border: \"1px solid var(--aurora-border-strong)\",\n        borderRadius: \"var(--aurora-radius-1)\",\n        boxShadow: \"var(--aurora-shadow-medium), var(--aurora-highlight-medium)\",\n        background:\n          \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-panel-strong) 96%, transparent), var(--aurora-panel-medium))\",\n        maxHeight,\n        overflowY: \"auto\",\n        ...style,\n      }}\n      {...props}\n    />\n  )\nConversation.displayName = \"Conversation\"\n\n// ─── Message (row) ────────────────────────────────────────────────────────────\n\nconst Message = ({ ref, className, role = \"assistant\", style, ...props }: MessageProps & { ref?: React.Ref<HTMLElement> }) => {\n    const isUser = role === \"user\"\n    return (\n      <article\n        ref={ref}\n        className={[\"flex gap-3\", className].filter(Boolean).join(\" \")}\n        data-role={role}\n        style={{\n          // User rows mirror: avatar moves to the right, bubble hugs the right edge.\n          flexDirection: isUser ? \"row-reverse\" : \"row\",\n          justifyContent: isUser ? \"flex-end\" : \"flex-start\",\n          alignItems: \"flex-start\",\n          color: \"var(--aurora-text-primary)\",\n          ...style,\n        }}\n        {...props}\n      />\n    )\n  }\nMessage.displayName = \"Message\"\n\n// ─── MessageAvatar ────────────────────────────────────────────────────────────\n\nconst MessageAvatar = ({ ref, className, label, tone = \"axon\", style, ...props }: MessageAvatarProps & { ref?: React.Ref<React.ElementRef<typeof AuroraAvatar>> }) => {\n  const color =\n    tone === \"axon\"\n      ? \"var(--axon-orange)\"\n      : tone === \"cyan\"\n      ? \"var(--aurora-accent-primary)\"\n      : tone === \"rose\"\n        ? \"var(--aurora-accent-pink)\"\n        : \"var(--aurora-text-muted)\"\n\n  return (\n    <AuroraAvatar\n      ref={ref}\n      size={36}\n      alt={label}\n      fallback={label.slice(0, 2).toUpperCase()}\n      className={className}\n      style={{\n        borderRadius: \"50%\",\n        border: `1.5px solid color-mix(in srgb, ${color} 45%, var(--aurora-border-default))`,\n        background: `color-mix(in srgb, ${color} 12%, var(--aurora-panel-medium))`,\n        boxShadow: `0 0 0 3px color-mix(in srgb, ${color} 7%, transparent), var(--aurora-highlight-medium)`,\n        color,\n        fontFamily: \"var(--aurora-font-display)\",\n        fontSize: 12,\n        fontWeight: 800,\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\nMessageAvatar.displayName = \"MessageAvatar\"\n\n// ─── MessageContent (bubble) ──────────────────────────────────────────────────\n\nconst bubbleTone = {\n  assistant: {\n    background:\n      \"linear-gradient(180deg, color-mix(in srgb, var(--axon-orange) 9%, var(--aurora-panel-medium)), color-mix(in srgb, var(--axon-orange) 4%, var(--aurora-panel-medium)))\",\n    borderColor:\n      \"color-mix(in srgb, var(--axon-orange) 24%, var(--aurora-border-default))\",\n    shadow:\n      \"0 14px 30px color-mix(in srgb, var(--aurora-page-bg) 48%, transparent), var(--aurora-highlight-medium)\",\n  },\n  user: {\n    background:\n      \"linear-gradient(180deg, color-mix(in srgb, var(--aurora-accent-primary) 13%, var(--aurora-panel-medium)), color-mix(in srgb, var(--aurora-accent-primary) 7%, var(--aurora-panel-medium)))\",\n    borderColor:\n      \"color-mix(in srgb, var(--aurora-accent-primary) 38%, var(--aurora-border-default))\",\n    shadow:\n      \"0 14px 30px color-mix(in srgb, var(--aurora-accent-primary) 7%, transparent), var(--aurora-highlight-medium)\",\n  },\n  system: {\n    background:\n      \"color-mix(in srgb, var(--aurora-text-muted) 8%, var(--aurora-panel-medium))\",\n    borderColor: \"var(--aurora-border-default)\",\n    shadow: \"var(--aurora-highlight-medium)\",\n  },\n} as const\n\nconst MessageContent = ({ ref, className, style, tone = \"assistant\", prose, ...props }: React.HTMLAttributes<HTMLDivElement> & {\n    tone?: MessageProps[\"role\"]\n    /** Constrain prose width like a chat bubble. */\n    prose?: boolean\n  } & { ref?: React.Ref<HTMLDivElement> }) => {\n  const t = tone ?? \"assistant\"\n  return (\n    <div\n      ref={ref}\n      className={[\n        \"min-w-0 border px-4 py-3 aurora-text-body\",\n        t === \"user\"\n          ? \"rounded-[16px_16px_6px_16px]\"\n          : \"rounded-[16px_16px_16px_6px]\",\n        prose ? \"max-w-[42ch]\" : undefined,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{\n        background: bubbleTone[t].background,\n        borderColor: bubbleTone[t].borderColor,\n        boxShadow: bubbleTone[t].shadow,\n        lineHeight: \"var(--aurora-line-body)\",\n        // Hug content so the bubble doesn't stretch the full row width.\n        width: \"fit-content\",\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\nMessageContent.displayName = \"MessageContent\"\n\nexport { Conversation, Message, MessageAvatar, MessageContent }\n",
      "type": "registry:component",
      "target": "@components/aurora/ai/conversation.tsx"
    }
  ],
  "meta": {
    "namespace": "@aurora",
    "style": "aurora",
    "family": "block",
    "requiresTokens": true,
    "sourcePath": "registry/aurora/blocks/ai/elements/conversation.tsx",
    "installTarget": "@components/aurora/ai/conversation.tsx",
    "taxonomy": "ai"
  },
  "docs": "Aurora block that expects `aurora-tokens`, `aurora-ai-elements`, and `aurora-avatar` to be installed first.\n\nDefault install target: `@components/aurora/ai/conversation.tsx`.\n\nRegistry dependencies: `aurora-tokens`, `aurora-ai-elements`, `aurora-avatar`.",
  "categories": [
    "aurora",
    "block",
    "ai"
  ],
  "type": "registry:block"
}