{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent-conversation",
  "type": "registry:ui",
  "description": "Scrollable conversation transcript with auto-scroll",
  "files": [
    {
      "path": "components/ui/AgentConversation.tsx",
      "content": "import { useEffect, useRef } from \"react\";\nimport { useAgentConversation, type ConversationEntry } from \"@deepgram/react\";\nimport { cn } from \"@/lib/utils\";\n\n// ── AgentConversation ─────────────────────────────────────────────────────────\n\nexport interface AgentConversationProps {\n  children?: React.ReactNode;\n  className?: string;\n  autoScroll?: boolean;\n}\n\nexport function AgentConversation({\n  children,\n  className,\n  autoScroll = true,\n}: AgentConversationProps) {\n  const { conversation } = useAgentConversation();\n  const bottomRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (autoScroll && conversation.length > 0) {\n      bottomRef.current?.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n    }\n  }, [conversation, autoScroll]);\n\n  return (\n    <div\n      className={cn(\"dg:flex-1 dg:min-h-0 dg:overflow-y-auto\", className)}\n      style={{ scrollbarWidth: \"thin\" } as React.CSSProperties}\n      data-agent-conversation\n      aria-live=\"polite\"\n      aria-label=\"Conversation\"\n    >\n      <div className=\"dg:flex dg:flex-col dg:gap-3 dg:p-5 dg:min-h-full\">\n        {children}\n        <div ref={bottomRef} aria-hidden=\"true\" />\n      </div>\n    </div>\n  );\n}\n\n// ── AgentMessage ──────────────────────────────────────────────────────────────\n\nexport interface AgentMessageProps {\n  entry: ConversationEntry;\n  children?: React.ReactNode;\n  className?: string;\n  showRole?: boolean;\n  showTimestamp?: boolean;\n}\n\nfunction formatTime(ts: number): string {\n  return new Date(ts).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n}\n\nexport function AgentMessage({\n  entry,\n  children,\n  className,\n  showRole = false,\n  showTimestamp = true,\n}: AgentMessageProps) {\n  const isUser = entry.role === \"user\";\n\n  return (\n    <div\n      data-role={entry.role}\n      className={cn(\n        \"dg:flex dg:flex-col dg:gap-1 dg:max-w-[82%]\",\n        isUser ? \"dg:self-end dg:items-end\" : \"dg:self-start dg:items-start\",\n        className,\n      )}\n    >\n      {/* Role label */}\n      {showRole && (\n        <span className=\"dg:text-[10px] dg:font-semibold dg:uppercase dg:tracking-widest dg:opacity-50 dg:px-1\">\n          {isUser ? \"You\" : \"Agent\"}\n        </span>\n      )}\n\n      {/* Avatar + bubble */}\n      <div className={cn(\n        \"dg:flex dg:items-end dg:gap-2\",\n        isUser ? \"dg:flex-row-reverse\" : \"dg:flex-row\",\n      )}>\n        {/* Gradient avatar — assistant only */}\n        {!isUser && (\n          <div\n            aria-hidden=\"true\"\n            className=\"dg:size-6 dg:rounded-full dg:shrink-0 dg:flex dg:items-center dg:justify-center dg:mb-px dg:bg-gradient-to-br dg:from-primary dg:to-[#149afb]\"\n          >\n            <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M12 2a3 3 0 0 1 3 3v7a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3Z\" fill=\"white\"/>\n              <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" stroke=\"white\" strokeWidth=\"2.5\" fill=\"none\" strokeLinecap=\"round\"/>\n              <line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\" stroke=\"white\" strokeWidth=\"2.5\" strokeLinecap=\"round\"/>\n            </svg>\n          </div>\n        )}\n\n        {/* Bubble */}\n        <div className={cn(\n          \"dg:px-4 dg:py-3 dg:text-sm dg:leading-normal dg:break-words dg:border dg:text-foreground\",\n          isUser\n            ? \"dg:rounded-2xl dg:rounded-br-sm dg:bg-[var(--msg-user-bg)] dg:border-[var(--msg-user-border)]\"\n            : \"dg:rounded-2xl dg:rounded-bl-sm dg:bg-card dg:border-border dg:shadow-sm\",\n        )}>\n          {children ?? entry.content}\n        </div>\n      </div>\n\n      {/* Timestamp */}\n      {showTimestamp && entry.timestamp && (\n        <span className=\"dg:text-[10px] dg:opacity-40 dg:px-1 dg:tabular-nums\">\n          {formatTime(entry.timestamp)}\n        </span>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "dependencies": [
    "@deepgram/react"
  ],
  "registryDependencies": [
    "utils"
  ]
}