Message

1import { ComponentProps } from "react"
2
3import { cn } from "@/lib/utils"
4
5function MessageGroup({ className, ...props }: ComponentProps<"div">) {
6  return (
7    <div
8      data-slot="message-group"
9      className={cn("flex min-w-0 flex-col gap-2", className)}
10      {...props}
11    />
12  )
13}
14
15function Message({
16  className,
17  align = "start",
18  ...props
19}: ComponentProps<"div"> & { align?: "start" | "end" }) {
20  return (
21    <div
22      data-slot="message"
23      data-align={align}
24      className={cn(
25        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
26        className
27      )}
28      {...props}
29    />
30  )
31}
32
33function MessageAvatar({ className, ...props }: ComponentProps<"div">) {
34  return (
35    <div
36      data-slot="message-avatar"
37      className={cn(
38        "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",
39        className
40      )}
41      {...props}
42    />
43  )
44}
45
46function MessageContent({ className, ...props }: ComponentProps<"div">) {
47  return (
48    <div
49      data-slot="message-content"
50      className={cn(
51        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
52        className
53      )}
54      {...props}
55    />
56  )
57}
58
59function MessageHeader({ className, ...props }: ComponentProps<"div">) {
60  return (
61    <div
62      data-slot="message-header"
63      className={cn(
64        "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",
65        className
66      )}
67      {...props}
68    />
69  )
70}
71
72function MessageFooter({ className, ...props }: ComponentProps<"div">) {
73  return (
74    <div
75      data-slot="message-footer"
76      className={cn(
77        "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",
78        className
79      )}
80      {...props}
81    />
82  )
83}
84
85export {
86  MessageGroup,
87  Message,
88  MessageAvatar,
89  MessageContent,
90  MessageFooter,
91  MessageHeader,
92}