fix(code): collapse long queued messages instead of filling the viewport (#3223)

Author: vdekrijger

packages/ui/src/features/sessions/components/session-update/CollapsibleMessageContent.tsx

@@ -0,0 +1,83 @@
+import { CaretDown, CaretUp } from "@phosphor-icons/react";
+import { Box } from "@radix-ui/themes";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+const COLLAPSED_MAX_HEIGHT = 160;
+
+interface CollapsibleMessageContentProps {
+  children: ReactNode;
+  className?: string;
+  /** Extra classes for the inner content box (e.g. per-caller typography). */
+  contentClassName?: string;
+  /** Color the bottom fade blends into — match the caller's background. */
+  fadeColor?: string;
+  style?: CSSProperties;
+}
+
+export function CollapsibleMessageContent({
+  children,
+  className,
+  contentClassName,
+  fadeColor = "var(--gray-2)",
+  style,
+}: CollapsibleMessageContentProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = contentRef.current;
+    if (el) {
+      setIsOverflowing(el.scrollHeight > COLLAPSED_MAX_HEIGHT);
+    }
+  }, []);
+
+  return (
+    <Box className={className} style={style}>
+      <Box
+        ref={contentRef}
+        className={`relative overflow-hidden font-medium text-[13px] [&>*:last-child]:mb-0 ${contentClassName ?? ""}`}
+        style={
+          !isExpanded && isOverflowing
+            ? { maxHeight: COLLAPSED_MAX_HEIGHT }
+            : undefined
+        }
+      >
+        {children}
+        {!isExpanded && isOverflowing && (
+          <Box
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-12"
+            style={{
+              background: `linear-gradient(transparent, ${fadeColor})`,
+            }}
+          />
+        )}
+      </Box>
+      {isOverflowing && (
+        <button
+          type="button"
+          onClick={() => setIsExpanded((prev) => !prev)}
+          className="mt-1 inline-flex items-center gap-1 text-[12px] text-accent-11 hover:text-accent-12"
+        >
+          {isExpanded ? (
+            <>
+              <CaretUp size={12} />
+              Show less
+            </>
+          ) : (
+            <>
+              <CaretDown size={12} />
+              Show more
+            </>
+          )}
+        </button>
+      )}
+    </Box>
+  );
+}

packages/ui/src/features/sessions/components/session-update/QueuedMessageView.tsx

@@ -8,6 +8,7 @@ import { Button } from "@posthog/quill";
 import { Box, Flex, IconButton, Tooltip } from "@radix-ui/themes";
 import { MarkdownRenderer } from "../../../editor/components/MarkdownRenderer";
 import type { QueuedMessage } from "../../sessionStore";
+import { CollapsibleMessageContent } from "./CollapsibleMessageContent";
 import { hasFileMentions, parseFileMentions } from "./parseFileMentions";
 
 interface QueuedMessageViewProps {
@@ -33,13 +34,17 @@ export function QueuedMessageView({
     <Box className="rounded-lg border border-gray-5 bg-card px-3 py-2">
       <Flex align="center" gap="2">
         <Stack size={14} className="shrink-0 text-gray-9" />
-        <Box className="min-w-0 flex-1 font-medium text-[13px] text-gray-12 [&>*:last-child]:mb-0">
+        <CollapsibleMessageContent
+          className="min-w-0 flex-1"
+          contentClassName="text-gray-12"
+          fadeColor="var(--card)"
+        >
           {hasFileMentions(message.content) ? (
             parseFileMentions(message.content)
           ) : (
             <MarkdownRenderer content={message.content} />
           )}
-        </Box>
+        </CollapsibleMessageContent>
         <Flex align="center" gap="1" className="shrink-0">
           {onSteer && (
             <Tooltip content={steerTooltip}>

packages/ui/src/features/sessions/components/session-update/UserMessage.tsx

@@ -1,6 +1,4 @@
 import {
-  CaretDown,
-  CaretUp,
   Check,
   Copy,
   File,
@@ -17,6 +15,7 @@ import { MarkdownRenderer } from "../../../editor/components/MarkdownRenderer";
 import { useFeatureFlag } from "../../../feature-flags/useFeatureFlag";
 import { usePanelLayoutStore } from "../../../panels/panelLayoutStore";
 import type { UserMessageAttachment } from "../../userMessageTypes";
+import { CollapsibleMessageContent } from "./CollapsibleMessageContent";
 import { extractCanvasInstructions } from "./canvasInstructions";
 import { extractChannelContext } from "./channelContext";
 import { extractCustomInstructions } from "./customInstructions";
@@ -26,8 +25,6 @@ import {
   parseFileMentions,
 } from "./parseFileMentions";
 
-const COLLAPSED_MAX_HEIGHT = 160;
-
 interface UserMessageProps {
   content: string;
   timestamp?: number;
@@ -108,16 +105,6 @@ export const UserMessage = memo(function UserMessage({
   const containsFileMentions = hasFileMentions(displayContent);
   const showAttachmentChips = attachments.length > 0 && !containsFileMentions;
   const [copied, setCopied] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const el = contentRef.current;
-    if (el) {
-      setIsOverflowing(el.scrollHeight > COLLAPSED_MAX_HEIGHT);
-    }
-  }, []);
 
   const copiedTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
@@ -142,15 +129,7 @@ export const UserMessage = memo(function UserMessage({
         className="group/msg relative border-l-2 bg-gray-2 py-2 pl-3"
         style={{ borderColor: "var(--accent-9)" }}
       >
-        <Box
-          ref={contentRef}
-          className="relative overflow-hidden font-medium text-[13px] [&>*:last-child]:mb-0 [&_p]:leading-[1.9]"
-          style={
-            !isExpanded && isOverflowing
-              ? { maxHeight: COLLAPSED_MAX_HEIGHT }
-              : undefined
-          }
-        >
+        <CollapsibleMessageContent contentClassName="[&_p]:leading-[1.9]">
           {containsFileMentions ? (
             parseFileMentions(displayContent)
           ) : (
@@ -212,34 +191,7 @@ export const UserMessage = memo(function UserMessage({
               ))}
             </Flex>
           )}
-          {!isExpanded && isOverflowing && (
-            <Box
-              className="pointer-events-none absolute inset-x-0 bottom-0 h-12"
-              style={{
-                background: "linear-gradient(transparent, var(--gray-2))",
-              }}
-            />
-          )}
-        </Box>
-        {isOverflowing && (
-          <button
-            type="button"
-            onClick={() => setIsExpanded((prev) => !prev)}
-            className="mt-1 inline-flex items-center gap-1 text-[12px] text-accent-11 hover:text-accent-12"
-          >
-            {isExpanded ? (
-              <>
-                <CaretUp size={12} />
-                Show less
-              </>
-            ) : (
-              <>
-                <CaretDown size={12} />
-                Show more
-              </>
-            )}
-          </button>
-        )}
+        </CollapsibleMessageContent>
         {sourceUrl && (
           <a
             href={sourceUrl}