"use client"; import { motion, useReducedMotion } from "motion/react"; import type * as React from "react"; import { cn } from "@/lib/utils"; type MessageAlign = "start" | "end"; type MessageBubbleVariant = "default" | "primary" | "ghost"; type MessageGroupProps = React.ComponentProps<"div">; type MessageProps = React.ComponentProps & { /** Which side the message belongs to. "end" reads as sent — row reversed, * entrance from the right. "start" reads as received — entrance from * the left. */ align?: MessageAlign; /** Play the slide-in entrance. Set to false for history that is already * on screen, so only newly arriving messages animate. */ animated?: boolean; }; type MessageBubbleProps = React.ComponentProps<"div"> & { /** "default" is a muted pill for received messages, "primary" a filled * primary pill for sent messages, and "ghost" drops the pill entirely * for bare text like streamed AI replies. */ variant?: MessageBubbleVariant; }; function MessageGroup({ className, ...props }: MessageGroupProps) { return (

); } /** The slide distance in px. Small on purpose: the message should feel like * it surfaces beside the composer, not like it crosses the screen. */ const ENTER_OFFSET = 24; /** One spring drives x, scale, and the corner morph together, so the bubble * arrives as a single fluid gesture. Damping is tuned to let it overshoot * just slightly and settle in one soft bounce — noticeable, not springy. */ const ENTER_TRANSITION = { type: "spring", stiffness: 420, damping: 20, mass: 0.9, opacity: { duration: 0.25, ease: "easeOut" }, } as const; /** The resting pose. Always passed to `animate`, so values resolve to their * final state on mount no matter how the row was server-rendered. */ const ENTER_TARGET = { opacity: 1, scale: 1, x: 0 }; function Message({ className, align = "start", animated = true, ...props }: MessageProps) { // Reduced motion drops the entrance entirely — the message just appears. const reduceMotion = useReducedMotion() ?? false; const enter = animated && !reduceMotion; return ( ); } function MessageAvatar({ className, ...props }: React.ComponentProps<"div">) { return (

); } function MessageContent({ className, ...props }: React.ComponentProps<"div">) { return (

); } function MessageBubble({ className, variant = "default", ...props }: MessageBubbleProps) { return (

); } function MessageHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function MessageFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } export { MessageGroup, Message, MessageAvatar, MessageBubble, MessageContent, MessageFooter, MessageHeader, }; export type { MessageAlign, MessageBubbleProps, MessageBubbleVariant, MessageGroupProps, MessageProps, };