{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"message-bubble","type":"registry:component","title":"Message Bubble","description":"A focused conversational surface with visual tones, independent alignment, and a speech-bubble tail that pops in on arrival.","author":"Ryan","dependencies":["clsx","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/message-bubble.tsx","type":"registry:component","target":"@components/motion/message-bubble.tsx","content":"\"use client\";\n// easeui.dev/components/agents/message-bubble\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type MessageBubbleTone = \"neutral\" | \"accent\";\nexport type MessageBubbleAlign = \"start\" | \"end\";\n\nexport interface MessageBubbleProps {\n  /** Which side the bubble sits on, matching who sent it. Default \"start\". */\n  align?: MessageBubbleAlign;\n  /** Visual treatment. Default \"neutral\". */\n  tone?: MessageBubbleTone;\n  children: ReactNode;\n  className?: string;\n}\n\nconst TONE_CLASS: Record<MessageBubbleTone, string> = {\n  neutral: \"bg-card text-foreground shadow-[0_0_0_1px_var(--border)]\",\n  accent: \"bg-accent text-accent-foreground\",\n};\n\nconst EASE = [0.23, 1, 0.32, 1] as const;\n\n/** A chat message surface with a speech-bubble tail that pops in from the side it belongs to. */\nexport function MessageBubble({\n  align = \"start\",\n  tone = \"neutral\",\n  children,\n  className,\n}: MessageBubbleProps) {\n  const reduce = useReducedMotion();\n  const fromX = align === \"end\" ? 10 : -10;\n\n  return (\n    <motion.div\n      initial={reduce ? { opacity: 0 } : { opacity: 0, x: fromX, scale: 0.97 }}\n      animate={{ opacity: 1, x: 0, scale: 1 }}\n      transition={{ duration: reduce ? 0.1 : 0.2, ease: EASE }}\n      className={cn(\n        \"max-w-[85%] text-pretty rounded-2xl px-3.5 py-2.5 text-sm leading-6\",\n        align === \"end\" ? \"ml-auto rounded-br-sm\" : \"mr-auto rounded-bl-sm\",\n        TONE_CLASS[tone],\n        className,\n      )}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"}]}