Message

1"use client";
2import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
3import { cn } from "@/lib/utils";
4import {
5  Tooltip,
6  TooltipProvider,
7  TooltipTrigger,
8  TooltipContent,
9} from "@/components/ui/tooltip";
10import { createContext, useContext } from "react";
11 
12type MessageVariant = "user" | "ai";
13 
14type MessageProps = {
15  children: React.ReactNode;
16  className?: string;
17  variant?: MessageVariant;
18} & React.HTMLProps<HTMLDivElement>;
19 
20type MessageContext = {
21  disabled?: boolean;
22  variant: MessageVariant;
23};
24 
25const MessageContext = createContext<MessageContext>({
26  disabled: false,
27  variant: "ai",
28});
29 
30function useMessageContext() {
31  const ctx = useContext(MessageContext);
32  if (!ctx) {
33    throw Error("useMessageContext must be used within a Message");
34  }
35  return ctx;
36}
37 
38export function Message({
39  children,
40  className,
41  variant = "ai",
42  ...props
43}: MessageProps) {
44  return (
45    <TooltipProvider>
46      <MessageContext.Provider value={{ disabled: false, variant }}>
47        <div
48          className={cn(
49            "flex gap-3 items-end group/message",
50            "animate-in fade-in-0 slide-in-from-bottom-2 duration-300 ease-out",
51            variant === "user" && "flex-row-reverse",
52            className
53          )}
54          {...props}
55        >
56          {children}
57        </div>
58      </MessageContext.Provider>
59    </TooltipProvider>
60  );
61}
62 
63type MessageAvatarProps = {
64  src: string;
65  alt: string;
66  fallback?: string;
67  className?: string;
68};
69 
70export function MessageAvatar({
71  src,
72  alt,
73  fallback,
74  className,
75}: MessageAvatarProps) {
76  const { variant } = useMessageContext();
77 
78  return (
79    <Avatar className={cn("h-8 w-8 shrink-0", className)}>
80      <AvatarImage src={src} alt={alt} className="object-cover" />
81      <AvatarFallback
82        className={cn(
83          "text-xs font-medium",
84          variant === "user"
85            ? "bg-primary text-primary-foreground"
86            : "bg-muted text-muted-foreground"
87        )}
88      >
89        {fallback || alt?.slice(0, 2).toUpperCase()}
90      </AvatarFallback>
91    </Avatar>
92  );
93}
94 
95type MessageContentProps = {
96  className?: string;
97  children: React.ReactNode;
98} & React.HTMLProps<HTMLDivElement>;
99 
100export function MessageContent({ children, className }: MessageContentProps) {
101  const { variant } = useMessageContext();
102  const isUser = variant === "user";
103 
104  return (
105    <div className="relative max-w-[80%]">
106      <div
107        className={cn(
108// … truncated