feat: refactor chat panel and message components for improved scrolling and message display

- Replaced manual scroll handling in ChatPanel with ConversationMessageScroller for better performance and maintainability.
- Introduced ConversationMessageBubble and ConversationMessageRow components for consistent message styling.
- Updated SupportChatMessageList to utilize new message components and scrolling logic.
- Added utility components for message scroller and message display, enhancing the overall chat experience.
- Updated package dependencies to include @shadcn/react for UI components.

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

@@ -0,0 +1,53 @@
+"use client"
+
+import type { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+export type ConversationMessageVariant =
+  | "customer"
+  | "agent"
+  | "ai"
+  | "system"
+  | "recalled"
+
+type ConversationMessageBubbleProps = {
+  variant: ConversationMessageVariant
+  children: ReactNode
+  className?: string
+}
+
+function getBubbleClassName(variant: ConversationMessageVariant) {
+  switch (variant) {
+    case "customer":
+      return "border-border/70 bg-muted/60 text-foreground shadow-sm"
+    case "system":
+      return "border-dashed border-border bg-muted/60 text-muted-foreground"
+    case "ai":
+      return "border-primary/15 bg-primary/5 text-foreground shadow-sm"
+    case "agent":
+      return "border-transparent bg-emerald-600 text-white shadow-sm"
+    case "recalled":
+      return "border-dashed border-border/70 bg-muted/40 text-muted-foreground"
+    default:
+      return "border-border/70 bg-muted/60 text-foreground shadow-sm"
+  }
+}
+
+export function ConversationMessageBubble({
+  variant,
+  children,
+  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>
+  )
+}