Message Bubble

1"use client";
2// beui.dev/components/agents/message-bubble
3 
4import { ChevronDown } from "lucide-react";
5import {
6  type HTMLMotionProps,
7  motion,
8  useReducedMotion,
9} from "motion/react";
10import {
11  cloneElement,
12  type ComponentPropsWithRef,
13  createContext,
14  type ReactElement,
15  type ReactNode,
16  type Ref,
17  useCallback,
18  useContext,
19  useId,
20  useState,
21} from "react";
22import {
23  EASE_OUT,
24  SPRING_LAYOUT,
25  SPRING_SWAP,
26} from "@/lib/ease";
27import { cn } from "@/lib/utils";
28import { MessageSideContext } from "@/components/agents/message-context";
29 
30export type MessageBubbleVariant =
31  | "solid"
32  | "soft"
33  | "tint"
34  | "outline"
35  | "ghost"
36  | "danger";
37export type MessageBubbleAlign = "start" | "end";
38 
39interface MessageBubbleContextValue {
40  align?: MessageBubbleAlign;
41  animateIn: boolean;
42  variant: MessageBubbleVariant;
43}
44 
45const MessageBubbleContext = createContext<MessageBubbleContextValue>({
46  animateIn: true,
47  variant: "soft",
48});
49const MessageBubbleLayoutContext = createContext<() => void>(() => {});
50 
51export interface MessageBubbleProps
52  extends Omit<HTMLMotionProps<"div">, "children"> {
53  variant?: MessageBubbleVariant;
54  /** Defaults to the surrounding Message alignment when omitted. */
55  align?: MessageBubbleAlign;
56  /** Plays the bubble entrance once when this component mounts. */
57  animateIn?: boolean;
58  children?: ReactNode;
59}
60 
61export interface MessageBubbleContentProps
62  extends ComponentPropsWithRef<"div"> {
63  /** Replaces the content element while preserving bubble styling. */
64  render?: ReactElement;
65}
66 
67export interface MessageBubbleGroupProps extends ComponentPropsWithRef<"div"> {
68  spacing?: "compact" | "default";
69}
70 
71export interface MessageBubbleCollapsibleProps
72  extends ComponentPropsWithRef<"div"> {
73  open?: boolean;
74  defaultOpen?: boolean;
75  onOpenChange?: (open: boolean) => void;
76  collapsedLines?: 2 | 3 | 4 | 5 | 6;
77  moreLabel?: ReactNode;
78  lessLabel?: ReactNode;
79  contentClassName?: string;
80  triggerClassName?: string;
81  children?: ReactNode;
82}
83 
84function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
85  return (node: T | null) => {
86    for (const ref of refs) {
87      if (typeof ref === "function") ref(node);
88      else if (ref) ref.current = node;
89    }
90  };
91}
92 
93const BUBBLE_CONTENT_REVEAL = {
94  duration: 0.12,
95  ease: EASE_OUT,
96  delay: 0.04,
97} as const;
98 
99// Sent bubbles should pop into place quickly with one restrained overshoot.
100const BUBBLE_POP = {
101  type: "spring",
102  stiffness: 520,
103  damping: 27,
104// … truncated