Chat Bubble

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6function ChatPanel({ className, ...props }: React.ComponentProps<"div">) {
7  return (
8    <div
9      data-slot="chat-panel"
10      className={cn(
11        "flex w-full flex-col gap-2.5 overflow-hidden rounded-xl border border-[#c9ccd1] bg-[#f4f5f8] p-5 [--chat-panel:#f4f5f8]",
12        className
13      )}
14      {...props}
15    />
16  )
17}
18 
19const chatBubbleVariants = cva(
20  "relative w-fit max-w-[85%] rounded-[18px] px-4 py-2.5 text-[15px] leading-[1.35] before:absolute before:top-0 before:bottom-[-2px] before:w-5 before:[clip-path:inset(calc(100%_-_22px)_0_0_0)] before:content-[''] after:absolute after:bottom-[-2px] after:h-6 after:w-[26px] after:bg-[var(--chat-panel,#f4f5f8)] after:content-['']",
21  {
22    variants: {
23      from: {
24        me: "self-start bg-[linear-gradient(180deg,#e4f1fd_0%,#b8d8f7_55%,#8dbdf0_100%)] text-[#1a2a44] shadow-[inset_0_1px_0_rgba(255,255,255,0.8),0_1px_2px_rgba(30,60,110,0.18)] before:left-[-7px] before:rounded-br-[16px_14px] before:bg-[linear-gradient(180deg,#e4f1fd_0%,#b8d8f7_55%,#8dbdf0_100%)] after:left-[-26px] after:rounded-br-[10px]",
25        them: "self-end bg-[linear-gradient(180deg,#fde8d2_0%,#f8c99a_55%,#f2ae6e_100%)] text-[#4a2a10] shadow-[inset_0_1px_0_rgba(255,255,255,0.7),0_1px_2px_rgba(120,70,20,0.18)] before:right-[-7px] before:rounded-bl-[16px_14px] before:bg-[linear-gradient(180deg,#fde8d2_0%,#f8c99a_55%,#f2ae6e_100%)] after:right-[-26px] after:rounded-bl-[10px]",
26      },
27    },
28    defaultVariants: {
29      from: "me",
30    },
31  }
32)
33 
34function ChatBubble({
35  className,
36  from,
37  ...props
38}: React.ComponentProps<"div"> & VariantProps<typeof chatBubbleVariants>) {
39  return (
40    <div
41      data-slot="chat-bubble"
42      className={cn(chatBubbleVariants({ from, className }))}
43      {...props}
44    />
45  )
46}
47 
48export { ChatPanel, ChatBubble, chatBubbleVariants }