feat: implement ConversationMessageBubble component and refactor message display in ChatPanel

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

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from "react"
 
+import { Bubble, BubbleContent } from "@/components/ui/bubble"
 import { cn } from "@/lib/utils"
 
 export type ConversationMessageVariant =
@@ -17,20 +18,33 @@ type ConversationMessageBubbleProps = {
   className?: string
 }
 
-function getBubbleClassName(variant: ConversationMessageVariant) {
+function getBubbleVariant(variant: ConversationMessageVariant) {
   switch (variant) {
     case "customer":
-      return "border-border/70 bg-muted/60 text-foreground shadow-sm"
+      return "secondary" as const
     case "system":
-      return "border-dashed border-border bg-muted/60 text-muted-foreground"
+      return "muted" as const
     case "ai":
-      return "border-primary/15 bg-primary/5 text-foreground shadow-sm"
+      return "tinted" as const
     case "agent":
-      return "border-transparent bg-emerald-600 text-white shadow-sm"
+      return "default" as const
     case "recalled":
-      return "border-dashed border-border/70 bg-muted/40 text-muted-foreground"
+      return "outline" as const
     default:
-      return "border-border/70 bg-muted/60 text-foreground shadow-sm"
+      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
   }
 }
 
@@ -40,14 +54,10 @@ export function ConversationMessageBubble({
   className,
 }: ConversationMessageBubbleProps) {
   return (
-    <div
-      className={cn(
-        "w-fit max-w-full rounded-2xl border px-4 py-3 text-sm leading-6",
-        getBubbleClassName(variant),
-        className,
-      )}
-    >
-      {children}
-    </div>
+    <Bubble variant={getBubbleVariant(variant)}>
+      <BubbleContent className={cn("rounded-2xl px-4 py-3 leading-6", getContentClassName(variant), className)}>
+        {children}
+      </BubbleContent>
+    </Bubble>
   )
 }