Message

1"use client";
2// beui.dev/components/agents/message
3 
4import { motion, useReducedMotion } from "motion/react";
5import {
6  type ComponentPropsWithRef,
7  createContext,
8  type ReactNode,
9  useContext,
10} from "react";
11import { EASE_OUT } from "@/lib/ease";
12import { cn } from "@/lib/utils";
13import { MessageSideContext } from "@/components/agents/message-context";
14 
15export {
16  MessageBubble,
17  MessageBubbleCollapsible,
18  MessageBubbleContent,
19  MessageBubbleGroup,
20} from "@/components/agents/message-bubble";
21export { MessageScroller } from "@/components/agents/message-scroller";
22export type { MessageScrollerProps } from "@/components/agents/message-scroller";
23 
24export type MessageFrom = "user" | "assistant";
25 
26interface MessageContextValue {
27  from: MessageFrom;
28}
29 
30const MessageContext = createContext<MessageContextValue>({
31  from: "assistant",
32});
33 
34export interface MessageProps
35  extends Omit<ComponentPropsWithRef<typeof motion.article>, "children"> {
36  from: MessageFrom;
37  /** Plays a trailing-edge pop-up once when this message row mounts. */
38  animateIn?: boolean;
39  children: ReactNode;
40}
41 
42export interface MessageGroupProps extends ComponentPropsWithRef<"div"> {
43  spacing?: "compact" | "default";
44}
45 
46export interface MessageAvatarProps extends ComponentPropsWithRef<"div"> {
47  /** Keep an empty avatar slot so grouped messages remain aligned. */
48  placeholder?: boolean;
49}
50 
51export type MessageContentProps = ComponentPropsWithRef<"div">;
52export type MessageHeaderProps = ComponentPropsWithRef<"div">;
53export type MessageFooterProps = ComponentPropsWithRef<"div">;
54 
55export type MessageMarkerProps = ComponentPropsWithRef<"div">;
56 
57export interface MessageTypingProps extends ComponentPropsWithRef<"span"> {
58  label?: string;
59}
60 
61// A sent row should rise from the live edge without changing measured layout.
62const MESSAGE_POP_UP = {
63  type: "spring",
64  stiffness: 480,
65  damping: 32,
66  mass: 0.62,
67} as const;
68 
69export function Message({
70  from,
71  animateIn = false,
72  children,
73  className,
74  initial,
75  animate,
76  transition,
77  exit,
78  style,
79  ...props
80}: MessageProps) {
81  const reduce = useReducedMotion() ?? false;
82 
83  return (
84    <MessageSideContext.Provider value={from === "user" ? "end" : "start"}>
85      <MessageContext.Provider value={{ from }}>
86        <motion.article
87          data-slot="message"
88          data-from={from}
89          aria-label={props["aria-label"] ?? `${from} message`}
90          initial={
91            initial ??
92            (animateIn && !reduce
93// … truncated