message

1import type { ComponentProps, HTMLAttributes } from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import {
6  Avatar,
7  AvatarFallback,
8  AvatarImage,
9} from "@/components/ui/avatar"
10 
11export type MessageProps = HTMLAttributes<HTMLDivElement> & {
12  from: "user" | "assistant"
13}
14 
15export const Message = ({ className, from, ...props }: MessageProps) => (
16  <div
17    className={cn(
18      "group flex w-full items-end justify-end gap-2 py-4",
19      from === "user" ? "is-user" : "is-assistant flex-row-reverse justify-end",
20      className
21    )}
22    {...props}
23  />
24)
25 
26const messageContentVariants = cva(
27  "is-user:dark flex flex-col gap-2 overflow-hidden rounded-lg text-sm",
28  {
29    variants: {
30      variant: {
31        contained: [
32          "max-w-[80%] px-4 py-3",
33          "group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground",
34          "group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground",
35        ],
36        flat: [
37          "group-[.is-user]:max-w-[80%] group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
38          "group-[.is-assistant]:text-foreground",
39        ],
40      },
41    },
42    defaultVariants: {
43      variant: "contained",
44    },
45  }
46)
47 
48export type MessageContentProps = HTMLAttributes<HTMLDivElement> &
49  VariantProps<typeof messageContentVariants>
50 
51export const MessageContent = ({
52  children,
53  className,
54  variant,
55  ...props
56}: MessageContentProps) => (
57  <div
58    className={cn(messageContentVariants({ variant, className }))}
59    {...props}
60  >
61    {children}
62  </div>
63)
64 
65export type MessageAvatarProps = ComponentProps<typeof Avatar> & {
66  src: string
67  name?: string
68}
69 
70export const MessageAvatar = ({
71  src,
72  name,
73  className,
74  ...props
75}: MessageAvatarProps) => (
76  <Avatar className={cn("ring-border size-8 ring-1", className)} {...props}>
77    <AvatarImage alt="" className="mt-0 mb-0" src={src} />
78    <AvatarFallback>{name?.slice(0, 2) || "ME"}</AvatarFallback>
79  </Avatar>
80)