Chat Message

1"use client";
2 
3import { forwardRef, type ReactNode } from "react";
4import { motion, type HTMLMotionProps } from "framer-motion";
5import { cn } from "@/lib/utils";
6import { spring } from "@/lib/springs";
7import { useShape } from "@/lib/shape-context";
8import { useTouchPrimary } from "@/hooks/use-touch-primary";
9import { FileThumbnail } from "@/registry/default/file-thumbnail";
10 
11interface ChatMessageProps
12  extends Omit<HTMLMotionProps<"div">, "children"> {
13  /** Who sent the message. Drives alignment and bubble colour:
14   *  `user` → right-aligned accent bubble, `assistant` → left-aligned plain text. */
15  from: "user" | "assistant";
16  /** Optional attachments rendered as square thumbnails above the bubble. */
17  files?: File[];
18  /** Side length of each attachment thumbnail in pixels. Defaults to 64. */
19  thumbnailSize?: number;
20  /** Timestamp shown in the hover-revealed meta row, before the actions.
21   *  User-message only — ignored on assistant replies. Caller pre-formats it
22   *  (e.g. `"Wednesday 6:08 PM"`). */
23  time?: ReactNode;
24  /** Icon-only action buttons shown in the hover-revealed meta row (e.g. copy,
25   *  edit, regenerate). Rendered next to the timestamp. */
26  actions?: ReactNode;
27  /** Message body. When omitted the text bubble is dropped (attachment-only message). */
28  children?: ReactNode;
29}
30 
31// ─── ChatMessage ──────────────────────────────────────────────────────────
32// A single transcript entry with baked-in entrance + layout motion. Pairs with
33// InputMessage's onSend: render one per sent/received message. `layout="position"`
34// lets earlier messages slide up smoothly when a new one is appended.
35const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
36  (
37    { from, files, thumbnailSize = 64, time, actions, children, className, ...props },
38    ref
39  ) => {
40    const shape = useShape();
41    const isUser = from === "user";
42    // Hover-reveal is unreachable on touch — keep the meta row visible there.
43    const isTouch = useTouchPrimary();
44    // Timestamps are a user-message affordance; assistant replies show actions only.
45    const showTime = isUser && time != null;
46 
47    return (
48      <motion.div
49        ref={ref}
50        layout="position"
51        initial={{ opacity: 0, y: 8, scale: 0.96 }}
52        animate={{ opacity: 1, y: 0, scale: 1 }}
53        transition={spring.moderate}
54// … truncated