chore: import clean Agent Desk snapshot (6/7)

web/components/chat/conversation-message-bubble.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { Bubble, BubbleContent } from "@/components/ui/bubble"
+import { cn } from "@/lib/utils"
+
+export type ConversationMessageVariant =
+  | "customer"
+  | "agent"
+  | "ai"
+  | "system"
+  | "recalled"
+
+type ConversationMessageBubbleProps = React.ComponentProps<"div"> & {
+  variant: ConversationMessageVariant
+  children: ReactNode
+  className?: string
+}
+
+function getBubbleVariant(variant: ConversationMessageVariant) {
+  switch (variant) {
+    case "customer":
+      return "secondary" as const
+    case "system":
+      return "muted" as const
+    case "ai":
+      return "tinted" as const
+    case "agent":
+      return "default" as const
+    case "recalled":
+      return "outline" as const
+    default:
+      return "secondary" as const
+  }
+}
+
+function getContentClassName(variant: ConversationMessageVariant) {
+  switch (variant) {
+    case "agent":
+      return "bg-emerald-600 text-white"
+    case "system":
+      return "border-dashed text-muted-foreground"
+    case "recalled":
+      return "border-dashed bg-muted/40 text-muted-foreground"
+    default:
+      return undefined
+  }
+}
+
+export function ConversationMessageBubble({
+  variant,
+  children,
+  className,
+  ...props
+}: ConversationMessageBubbleProps) {
+  return (
+    <Bubble variant={getBubbleVariant(variant)} {...props}>
+      <BubbleContent className={cn("rounded-2xl px-4 py-3 leading-6", getContentClassName(variant), className)}>
+        {children}
+      </BubbleContent>
+    </Bubble>
+  )
+}