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/app/dashboard/conversation-monitor/_components/detail.tsx

@@ -2,13 +2,16 @@
 
 import { CheckCheckIcon, EyeIcon, MessageCircleMoreIcon } from "lucide-react";
 import Image from "next/image";
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from "react";
+import { useEffect } from "react";
 
+import { ConversationMessageBubble } from "@/components/chat/conversation-message-bubble";
+import {
+  ConversationMessageRow,
+} from "@/components/chat/conversation-message-row";
+import {
+  ConversationMessageScroller,
+  ConversationMessageScrollerItem,
+} from "@/components/chat/conversation-message-scroller";
 import { ImMessageHTML } from "@/components/im-message-html";
 import { useImageLightbox } from "@/components/image-lightbox";
 import { ProjectDialog } from "@/components/project-dialog";
@@ -114,51 +117,41 @@ function getParticipantIdentity(
   return participant.participantId || participant.externalParticipantId || "-";
 }
 
-function getMessageLayout(message: AdminMessage) {
-  if (message.senderType === "customer") {
-    return {
-      rowClassName: "justify-start",
-      bubbleClassName: "border-border/70 bg-muted/60 text-foreground shadow-sm",
-      htmlClassName: "[&_a]:text-foreground [&_a]:underline [&_img]:rounded-md",
-      recalledBubbleClassName:
-        "border-dashed border-border/70 bg-muted/40 text-muted-foreground",
-      recalledHtmlClassName: "text-muted-foreground [&_p]:text-muted-foreground",
-      metaClassName: "text-left",
-    };
+function getMessageAlign(message: AdminMessage): "start" | "end" {
+  return message.senderType === "customer" || message.senderType === "system"
+    ? "start"
+    : "end";
+}
+
+function getMessageVariant(message: AdminMessage) {
+  switch (message.senderType) {
+    case "agent":
+      return "agent" as const;
+    case "ai":
+      return "ai" as const;
+    case "system":
+      return "system" as const;
+    default:
+      return "customer" as const;
   }
-  if (message.senderType === "system") {
-    return {
-      rowClassName: "justify-center",
-      bubbleClassName:
-        "border-dashed border-border bg-muted/60 text-muted-foreground",
-      htmlClassName: "[&_a]:text-foreground [&_a]:underline [&_img]:rounded-md",
-      recalledBubbleClassName:
-        "border-dashed border-border/70 bg-muted/40 text-muted-foreground",
-      recalledHtmlClassName: "text-muted-foreground [&_p]:text-muted-foreground",
-      metaClassName: "text-center",
-    };
+}
+
+function getMessageHtmlClassName(message: AdminMessage, isRecalled: boolean) {
+  if (isRecalled) {
+    return message.senderType === "agent" || message.senderType === "ai"
+      ? "text-emerald-800 [&_p]:text-emerald-800"
+      : "text-muted-foreground [&_p]:text-muted-foreground";
   }
-  if (message.senderType === "ai") {
-    return {
-      rowClassName: "justify-end",
-      bubbleClassName: "border-primary/15 bg-primary/5 text-foreground shadow-sm",
-      htmlClassName: "[&_a]:text-foreground [&_a]:underline [&_img]:rounded-md",
-      recalledBubbleClassName:
-        "border-dashed border-emerald-200 bg-emerald-50 text-emerald-800",
-      recalledHtmlClassName: "text-emerald-800 [&_p]:text-emerald-800",
-      metaClassName: "text-right",
-    };
+  if (message.senderType === "agent") {
+    return "[&_p]:text-white [&_a]:text-white [&_a]:underline [&_img]:rounded-md";
   }
-  return {
-    rowClassName: "justify-end",
-    bubbleClassName: "border-transparent bg-emerald-600 text-white shadow-sm",
-    htmlClassName:
-      "[&_p]:text-white [&_a]:text-white [&_a]:underline [&_img]:rounded-md",
-    recalledBubbleClassName:
-      "border-dashed border-emerald-200 bg-emerald-50 text-emerald-800",
-    recalledHtmlClassName: "text-emerald-800 [&_p]:text-emerald-800",
-    metaClassName: "text-right",
-  };
+  return "[&_a]:text-foreground [&_a]:underline [&_img]:rounded-md";
+}
+
+function getRecalledBubbleClassName(message: AdminMessage) {
+  return message.senderType === "agent" || message.senderType === "ai"
+    ? "border-dashed border-emerald-200 bg-emerald-50 text-emerald-800"
+    : "border-dashed border-border/70 bg-muted/40 text-muted-foreground";
 }
 
 export function ConversationDetailDialog({
@@ -187,91 +180,14 @@ export function ConversationDetailDialog({
   const statusMeta = currentConversation
     ? getStatusMeta(currentConversation.status, t)
     : null;
-  const messageBottomRef = useRef<HTMLDivElement | null>(null);
-  const messagesScrollRootRef = useRef<HTMLDivElement | null>(null);
-  const loadMoreSentinelRef = useRef<HTMLDivElement | null>(null);
-  const pendingScrollAnchorRef = useRef<{
-    scrollHeight: number;
-    scrollTop: number;
-  } | null>(null);
-  const prevLoadingMoreRef = useRef(false);
   const { open: openImageLightbox, close: closeImageLightbox } =
     useImageLightbox();
 
-  const getMessagesViewport = useCallback((): HTMLElement | null => {
-    return (
-      messagesScrollRootRef.current?.querySelector(
-        '[data-slot="scroll-area-viewport"]',
-      ) ?? null
-    );
-  }, []);
-
   useEffect(() => {
     if (!open) {
       closeImageLightbox();
-      return;
     }
-    if (loading) {
-      return;
-    }
-    const bottom = messageBottomRef.current;
-    if (!bottom) {
-      return;
-    }
-    bottom.scrollIntoView({ block: "end", behavior: "smooth" });
-  }, [open, loading, closeImageLightbox]);
-
-  useLayoutEffect(() => {
-    const wasLoading = prevLoadingMoreRef.current;
-    prevLoadingMoreRef.current = loadingMoreMessages;
-    if (wasLoading && !loadingMoreMessages && pendingScrollAnchorRef.current) {
-      const vp = getMessagesViewport();
-      const anchor = pendingScrollAnchorRef.current;
-      pendingScrollAnchorRef.current = null;
-      if (vp && anchor) {
-        const delta = vp.scrollHeight - anchor.scrollHeight;
-        vp.scrollTop = anchor.scrollTop + delta;
-      }
-    }
-  }, [loadingMoreMessages, messages, getMessagesViewport]);
-
-  useEffect(() => {
-    if (!open || loading || !messagesHasMore || !onLoadMoreMessages) {
-      return;
-    }
-    const root = getMessagesViewport();
-    const sentinel = loadMoreSentinelRef.current;
-    if (!root || !sentinel) {
-      return;
-    }
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const hit = entries.some((e) => e.isIntersecting);
-        if (!hit || loadingMoreMessages) {
-          return;
-        }
-        const vp = getMessagesViewport();
-        if (vp) {
-          pendingScrollAnchorRef.current = {
-            scrollHeight: vp.scrollHeight,
-            scrollTop: vp.scrollTop,
-          };
-        }
-        void onLoadMoreMessages();
-      },
-      { root, rootMargin: "120px 0px 0px 0px", threshold: 0 },
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [
-    open,
-    loading,
-    messagesHasMore,
-    loadingMoreMessages,
-    messages.length,
-    onLoadMoreMessages,
-    getMessagesViewport,
-  ]);
+  }, [open, closeImageLightbox]);
 
   return (
     <ProjectDialog
@@ -364,8 +280,8 @@ export function ConversationDetailDialog({
           {t("conversationMonitor.loadingDetail")}
         </div>
       ) : currentConversation ? (
-        <div className="flex min-h-0 flex-1 flex-row overflow-hidden border-t">
-          <aside className="flex w-90 h-full shrink-0 flex-col overflow-hidden bg-muted/20 border-r border-b-0">
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden border-t md:flex-row">
+          <aside className="flex max-h-[46%] w-full shrink-0 flex-col overflow-hidden border-b bg-muted/20 md:h-full md:max-h-none md:w-90 md:border-r md:border-b-0">
             <div className="space-y-4 p-6">
               <div className="grid grid-cols-2 gap-3 text-sm">
                 <InfoItem
@@ -452,103 +368,40 @@ export function ConversationDetailDialog({
           </aside>
 
           <section className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background">
-            <div ref={messagesScrollRootRef} className="min-h-0 flex-1">
-              <ScrollArea className="h-full min-h-0 bg-muted/10">
-                <div className="space-y-4 px-6 py-5">
-                  {messagesHasMore ? (
-                    <div
-                      ref={loadMoreSentinelRef}
-                      className="flex min-h-8 flex-col items-center justify-center py-2 text-xs text-muted-foreground"
-                    >
-                      {loadingMoreMessages
-                        ? t("conversationMonitor.loadingOlder")
-                        : t("conversationMonitor.loadOlderHint")}
-                    </div>
-                  ) : null}
-                  {messages.length ? (
-                    messages.map((message) => {
-                      const layout = getMessageLayout(message);
-                      const isRecalled =
-                        Boolean(message.recalledAt) || message.sendStatus === 6;
-                      const isHtmlMessage =
-                        !isRecalled &&
-                        (message.messageType === "html" ||
-                          message.messageType === "attachment");
-                      const isImageMessage = !isRecalled && message.messageType === "image";
-
-                      return (
-                        <div
-                          key={message.id}
-                          className={`flex ${layout.rowClassName}`}
-                        >
-                          <div className="max-w-[85%] space-y-2">
-                            <div
-                              className={`text-xs text-muted-foreground ${layout.metaClassName}`}
-                            >
-                              <span>{getSenderLabel(message, t)}</span>
-                              <span className="mx-2">·</span>
-                              <span>{formatDateTime(message.sentAt)}</span>
-                              {isRecalled ? (
-                                <>
-                                  <span className="mx-2">·</span>
-                                  <span>{t("conversationMonitor.messageRecalled")}</span>
-                                </>
-                              ) : null}
-                            </div>
-                            <div
-                              className={`rounded-2xl border px-4 py-3 text-sm leading-6 ${
-                                isRecalled
-                                  ? layout.recalledBubbleClassName
-                                  : layout.bubbleClassName
-                              }`}
-                            >
-                              {isRecalled ? (
-                                <div className={layout.recalledHtmlClassName}>
-                                  {t("conversationMonitor.messageRecalledBody")}
-                                </div>
-                              ) : isHtmlMessage ? (
-                                <ImMessageHTML
-                                  html={renderIMMessageHTML(message)}
-                                  className={`${layout.htmlClassName} [&_img]:max-w-full [&_img]:cursor-zoom-in`}
-                                  onImageClick={openImageLightbox}
-                                />
-                              ) : isImageMessage ? (
-                                <MessageImage
-                                  src={getImageMessageUrl(message)}
-                                  alt={getMessageContent(message)}
-                                  onPreview={openImageLightbox}
-                                />
-                              ) : (
-                                <div className="whitespace-pre-wrap break-words">
-                                  {getMessageContent(message)}
-                                </div>
-                              )}
-                            </div>
-                            <div
-                              className={`text-xs text-muted-foreground ${layout.metaClassName}`}
-                            >
-                              {t("conversationMonitor.readStatus", {
-                                agent: message.agentRead
-                                  ? t("conversationMonitor.read")
-                                  : t("conversationMonitor.unread"),
-                                customer: message.customerRead
-                                  ? t("conversationMonitor.read")
-                                  : t("conversationMonitor.unread"),
-                              })}
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })
-                  ) : (
-                    <div className="flex h-full min-h-80 items-center justify-center rounded-xl border border-dashed bg-background text-sm text-muted-foreground">
-                      {t("conversationMonitor.emptyMessages")}
-                    </div>
-                  )}
-                  <div ref={messageBottomRef} />
+            <ConversationMessageScroller
+              key={currentConversation.id}
+              className="min-h-0 flex-1"
+              hasMoreOlder={messagesHasMore}
+              loadingOlder={loadingMoreMessages}
+              onLoadOlder={onLoadMoreMessages}
+              topSlot={
+                messagesHasMore ? (
+                  <div className="flex min-h-8 flex-col items-center justify-center py-2 text-xs text-muted-foreground">
+                    {loadingMoreMessages
+                      ? t("conversationMonitor.loadingOlder")
+                      : t("conversationMonitor.loadOlderHint")}
+                  </div>
+                ) : null
+              }
+            >
+              {messages.length ? (
+                messages.map((message) => (
+                  <ConversationMessageScrollerItem
+                    key={message.id}
+                    messageId={`${message.id}`}
+                  >
+                    <ConversationMonitorMessage
+                      message={message}
+                      onImagePreview={openImageLightbox}
+                    />
+                  </ConversationMessageScrollerItem>
+                ))
+              ) : (
+                <div className="flex h-full min-h-80 items-center justify-center rounded-xl border border-dashed bg-background text-sm text-muted-foreground">
+                  {t("conversationMonitor.emptyMessages")}
                 </div>
-              </ScrollArea>
-            </div>
+              )}
+            </ConversationMessageScroller>
           </section>
         </div>
       ) : (
@@ -560,6 +413,82 @@ export function ConversationDetailDialog({
   );
 }
 
+type ConversationMonitorMessageProps = {
+  message: AdminMessage;
+  onImagePreview: (src: string, alt?: string) => void;
+};
+
+function ConversationMonitorMessage({
+  message,
+  onImagePreview,
+}: ConversationMonitorMessageProps) {
+  const t = useI18n();
+  const isRecalled = Boolean(message.recalledAt) || message.sendStatus === 6;
+  const isHtmlMessage =
+    !isRecalled &&
+    (message.messageType === "html" || message.messageType === "attachment");
+  const isImageMessage = !isRecalled && message.messageType === "image";
+  const isSystem = message.senderType === "system";
+  const align = getMessageAlign(message);
+  const variant = isRecalled ? "recalled" : getMessageVariant(message);
+  const htmlClassName = getMessageHtmlClassName(message, isRecalled);
+
+  return (
+    <ConversationMessageRow
+      align={align}
+      centered={isSystem}
+      header={
+        <>
+          <span>{getSenderLabel(message, t)}</span>
+          <span>·</span>
+          <span>{formatDateTime(message.sentAt)}</span>
+          {isRecalled ? (
+            <>
+              <span>·</span>
+              <span>{t("conversationMonitor.messageRecalled")}</span>
+            </>
+          ) : null}
+        </>
+      }
+      footer={t("conversationMonitor.readStatus", {
+        agent: message.agentRead
+          ? t("conversationMonitor.read")
+          : t("conversationMonitor.unread"),
+        customer: message.customerRead
+          ? t("conversationMonitor.read")
+          : t("conversationMonitor.unread"),
+      })}
+    >
+      <ConversationMessageBubble
+        variant={variant}
+        className={isRecalled ? getRecalledBubbleClassName(message) : undefined}
+      >
+        {isRecalled ? (
+          <div className={htmlClassName}>
+            {t("conversationMonitor.messageRecalledBody")}
+          </div>
+        ) : isHtmlMessage ? (
+          <ImMessageHTML
+            html={renderIMMessageHTML(message)}
+            className={`${htmlClassName} [&_img]:max-w-full [&_img]:cursor-zoom-in`}
+            onImageClick={onImagePreview}
+          />
+        ) : isImageMessage ? (
+          <MessageImage
+            src={getImageMessageUrl(message)}
+            alt={getMessageContent(message)}
+            onPreview={onImagePreview}
+          />
+        ) : (
+          <div className="whitespace-pre-wrap break-words">
+            {getMessageContent(message)}
+          </div>
+        )}
+      </ConversationMessageBubble>
+    </ConversationMessageRow>
+  );
+}
+
 type InfoItemProps = {
   label: string;
   value: string;

web/app/dashboard/conversations/_components/chat-panel.tsx

@@ -5,7 +5,6 @@ import {
   type ReactNode,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -20,6 +19,11 @@ import {
 import { toast } from "sonner";
 
 import { ConversationTransferDialog } from "@/components/conversation-actions/transfer-dialog";
+import {
+  ConversationMessageScroller,
+  ConversationMessageScrollerItem,
+  type ConversationMessageScrollerHandle,
+} from "@/components/chat/conversation-message-scroller";
 import { ImMessageHTML } from "@/components/im-message-html";
 import { useImageLightbox } from "@/components/image-lightbox";
 import { JsonTreeViewer } from "@/components/json-tree-viewer";
@@ -158,13 +162,10 @@ export function ChatPanel() {
   const setConversationFilter = useAgentConversationsStore(
     (state) => state.setConversationFilter,
   );
-  const messagesContainerRef = useRef<HTMLDivElement>(null);
-  const messagesContentRef = useRef<HTMLDivElement>(null);
-  const scrollBottomRafRef = useRef<number | null>(null);
-  const shouldStickToBottomRef = useRef(true);
-  const prependScrollAnchorRef = useRef<{ height: number; top: number } | null>(
+  const messagesScrollerRef = useRef<ConversationMessageScrollerHandle | null>(
     null,
   );
+  const shouldStickToBottomRef = useRef(true);
   const [claiming, setClaiming] = useState(false);
   const [claimDialogOpen, setClaimDialogOpen] = useState(false);
   const [transferDialogOpen, setTransferDialogOpen] = useState(false);
@@ -185,66 +186,19 @@ export function ChatPanel() {
     setConversationFilter("active" satisfies AgentConversationFilterKey);
   };
 
-  const getViewport = useCallback(
-    () => messagesContainerRef.current,
-    [],
-  );
-
-  const isNearBottom = useCallback(
-    (element: HTMLElement, threshold = 80) =>
-      element.scrollHeight - element.scrollTop - element.clientHeight <=
-      threshold,
-    [],
-  );
-
   const scrollToBottom = useCallback(() => {
-    const viewport = getViewport();
-    if (!viewport) {
-      return;
-    }
-    viewport.scrollTop = viewport.scrollHeight;
-  }, [getViewport]);
-
-  /**
-   * Match the widget message list: keep scrolling for a few frames until
-   * scrollHeight stabilizes, which prevents stacked scroll jumps.
-   */
-  const scheduleScrollToBottom = useCallback(
-    (attempts = 4) => {
-      if (scrollBottomRafRef.current !== null) {
-        cancelAnimationFrame(scrollBottomRafRef.current);
-      }
-      const run = (remaining: number, previousHeight = -1) => {
-        scrollBottomRafRef.current = requestAnimationFrame(() => {
-          const viewport = getViewport();
-          if (!viewport) {
-            scrollBottomRafRef.current = null;
-            return;
-          }
-          const currentHeight = viewport.scrollHeight;
-          scrollToBottom();
-          if (remaining > 1 && currentHeight !== previousHeight) {
-            run(remaining - 1, currentHeight);
-            return;
-          }
-          scrollBottomRafRef.current = null;
-        });
-      };
-      run(attempts);
-    },
-    [getViewport, scrollToBottom],
-  );
+    messagesScrollerRef.current?.scrollToBottom();
+  }, []);
 
   const handleImageSettled = useCallback(() => {
     if (!shouldStickToBottomRef.current) {
       return;
     }
-    scheduleScrollToBottom();
-  }, [scheduleScrollToBottom]);
+    scrollToBottom();
+  }, [scrollToBottom]);
 
   const maybeMarkConversationRead = useCallback(() => {
-    const viewport = getViewport();
-    if (!viewport || !conversation || loading) {
+    if (!conversation || loading || !shouldStickToBottomRef.current) {
       return;
     }
     if (
@@ -253,87 +207,19 @@ export function ChatPanel() {
     ) {
       return;
     }
-    if (!isNearBottom(viewport)) {
-      return;
-    }
     void markSelectedConversationRead().catch((error) => {
       toast.error(error instanceof Error ? error.message : t("conversation.markReadFailed"));
     });
   }, [
     conversation,
-    getViewport,
-    isNearBottom,
     loading,
     markSelectedConversationRead,
     t,
   ]);
 
   useEffect(() => {
-    const viewport = getViewport();
-    if (!viewport) {
-      return;
-    }
-
-    const handleScroll = () => {
-      shouldStickToBottomRef.current = isNearBottom(viewport);
-      if (shouldStickToBottomRef.current) {
-        maybeMarkConversationRead();
-      }
-    };
-
-    handleScroll();
-    viewport.addEventListener("scroll", handleScroll);
-    return () => {
-      viewport.removeEventListener("scroll", handleScroll);
-    };
-  }, [conversation?.id, getViewport, isNearBottom, maybeMarkConversationRead]);
-
-  useLayoutEffect(() => {
     shouldStickToBottomRef.current = true;
-    scheduleScrollToBottom();
-    return () => {
-      if (scrollBottomRafRef.current !== null) {
-        cancelAnimationFrame(scrollBottomRafRef.current);
-        scrollBottomRafRef.current = null;
-      }
-    };
-  }, [conversation?.id, scheduleScrollToBottom]);
-
-  useLayoutEffect(() => {
-    const viewport = getViewport();
-    if (!viewport) {
-      return;
-    }
-    const anchor = prependScrollAnchorRef.current;
-    if (anchor) {
-      prependScrollAnchorRef.current = null;
-      const nextHeight = viewport.scrollHeight;
-      viewport.scrollTop = nextHeight - anchor.height + anchor.top;
-      return;
-    }
-    if (shouldStickToBottomRef.current) {
-      scheduleScrollToBottom();
-    }
-  }, [messages, getViewport, scheduleScrollToBottom]);
-
-  useEffect(() => {
-    const content = messagesContentRef.current;
-    if (!content) {
-      return;
-    }
-
-    const observer = new ResizeObserver(() => {
-      if (!shouldStickToBottomRef.current) {
-        return;
-      }
-      scheduleScrollToBottom();
-    });
-
-    observer.observe(content);
-    return () => {
-      observer.disconnect();
-    };
-  }, [conversation?.id, scheduleScrollToBottom]);
+  }, [conversation?.id]);
 
   useEffect(() => {
     maybeMarkConversationRead();
@@ -358,18 +244,12 @@ export function ChatPanel() {
   }, [maybeMarkConversationRead]);
 
   const handleLoadOlder = async () => {
-    const viewport = getViewport();
-    if (!viewport || messagesLoadingMore || !messagesHasMore) {
+    if (messagesLoadingMore || !messagesHasMore) {
       return;
     }
-    prependScrollAnchorRef.current = {
-      height: viewport.scrollHeight,
-      top: viewport.scrollTop,
-    };
     try {
       await loadOlderMessages();
     } catch (error) {
-      prependScrollAnchorRef.current = null;
       toast.error(error instanceof Error ? error.message : t("conversation.loadHistoryFailed"));
     }
   };
@@ -450,12 +330,21 @@ export function ChatPanel() {
   }
 
   const messagesScroll = (
-    <div
-      ref={messagesContainerRef}
-      className="h-full min-h-0 flex-1 overflow-y-auto p-4 agent-desk-scrollbar"
-    >
-      <div ref={messagesContentRef} className="flex flex-col">
-        {!loading && messages.length > 0 && messagesHasMore ? (
+    <ConversationMessageScroller
+      key={conversation.id}
+      ref={messagesScrollerRef}
+      className="h-full min-h-0 flex-1"
+      viewportClassName="bg-transparent"
+      contentClassName="gap-0 p-4"
+      hasMoreOlder={!loading && messages.length > 0 && messagesHasMore}
+      loadingOlder={messagesLoadingMore}
+      onLoadOlder={handleLoadOlder}
+      onNearBottomChange={(nearBottom) => {
+        shouldStickToBottomRef.current = nearBottom;
+      }}
+      onNearBottomVisible={maybeMarkConversationRead}
+      topSlot={
+        !loading && messages.length > 0 && messagesHasMore ? (
           <div className="mb-4 flex justify-center">
             <Button
               type="button"
@@ -467,15 +356,20 @@ export function ChatPanel() {
               {messagesLoadingMore ? t("conversation.loading") : t("conversation.loadOlder")}
             </Button>
           </div>
-        ) : null}
-        {loading ? (
-          <div className="py-8 text-center text-sm text-muted-foreground">
-            {t("conversation.loading")}
-          </div>
-        ) : messages.length > 0 ? (
-          messages.map((message) => (
+        ) : null
+      }
+    >
+      {loading ? (
+        <div className="py-8 text-center text-sm text-muted-foreground">
+          {t("conversation.loading")}
+        </div>
+      ) : messages.length > 0 ? (
+        messages.map((message) => (
+          <ConversationMessageScrollerItem
+            key={message.id}
+            messageId={`${message.id}`}
+          >
             <MessageItem
-              key={message.id}
               message={message}
               onImageSettled={handleImageSettled}
               canRecall={message.senderType === "agent" && message.senderId === currentUserId}
@@ -485,14 +379,14 @@ export function ChatPanel() {
               }}
               onOpenWorkflowRun={openWorkflowRunDetail}
             />
-          ))
-        ) : (
-          <div className="py-8 text-center text-sm text-muted-foreground">
-            {t("conversation.emptyMessages")}
-          </div>
-        )}
-      </div>
-    </div>
+          </ConversationMessageScrollerItem>
+        ))
+      ) : (
+        <div className="py-8 text-center text-sm text-muted-foreground">
+          {t("conversation.emptyMessages")}
+        </div>
+      )}
+    </ConversationMessageScroller>
   );
 
   const bottomPanel = (