Message

1import type * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5const MessageGroup = ({ className, ...props }: React.ComponentProps<"div">) => (
6  <div
7    className={cn("flex min-w-0 flex-col gap-2", className)}
8    data-slot="message-group"
9    {...props}
10  />
11);
12 
13const Message = ({
14  className,
15  align = "start",
16  ...props
17}: React.ComponentProps<"div"> & { align?: "start" | "end" }) => (
18  <div
19    className={cn(
20      "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
21      className,
22    )}
23    data-align={align}
24    data-slot="message"
25    {...props}
26  />
27);
28 
29const MessageAvatar = ({ className, ...props }: React.ComponentProps<"div">) => (
30  <div
31    className={cn(
32      "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
33      className,
34    )}
35    data-slot="message-avatar"
36    {...props}
37  />
38);
39 
40const MessageContent = ({ className, ...props }: React.ComponentProps<"div">) => (
41  <div
42    className={cn(
43      "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
44      className,
45    )}
46    data-slot="message-content"
47    {...props}
48  />
49);
50 
51const MessageHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
52  <div
53    className={cn(
54      "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
55      className,
56    )}
57    data-slot="message-header"
58    {...props}
59  />
60);
61 
62const MessageFooter = ({ className, ...props }: React.ComponentProps<"div">) => (
63  <div
64    className={cn(
65      "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
66      className,
67    )}
68    data-slot="message-footer"
69    {...props}
70  />
71);
72 
73export { MessageGroup, Message, MessageAvatar, MessageContent, MessageFooter, MessageHeader };