@vertesia/ui 1.0.0-dev.20260305.083323Z → 1.0.0

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.tsx

@@ -1,6 +1,8 @@
 import { AgentMessage, AgentMessageType, BatchProgressDetails, Plan } from "@vertesia/common";
 import React, { useEffect, useMemo, useState, useRef, useCallback, Component, ReactNode } from "react";
 import { cn } from "@vertesia/ui/core";
+import { useUITranslation } from '../../../../i18n/index.js';
+import { i18nInstance, NAMESPACE } from '../../../../i18n/instance.js';
 import { PulsatingCircle } from "../AnimatedThinkingDots";
 export type AgentConversationViewMode = "stacked" | "sliding";
 import BatchProgressPanel, { type BatchProgressPanelClassNames } from "./BatchProgressPanel";
@@ -8,9 +10,67 @@ import MessageItem, { type MessageItemClassNames, type MessageItemProps } from "
 import StreamingMessage, { type StreamingMessageClassNames } from "./StreamingMessage";
 import ToolCallGroup, { type ToolCallGroupClassNames } from "./ToolCallGroup";
 import WorkstreamTabs, { extractWorkstreams, filterMessagesByWorkstream } from "./WorkstreamTabs";
-import { DONE_STATES, getWorkstreamId, groupMessagesWithStreaming, mergeConsecutiveToolGroups, StreamingData } from "./utils";
+import { DONE_STATES, getSlidingViewMessageBuckets, getWorkstreamId, groupMessagesWithStreaming, mergeConsecutiveToolGroups, RenderableGroup, shouldCollapseAdjacentRenderedMessage, StreamingData } from "./utils";
 import { ThinkingMessages } from "../WaitingMessages";
 
+/** Extended group that may carry preamble info (text from a preceding single/streaming message) */
+type RenderableGroupWithPreamble = RenderableGroup & {
+    preambleText?: string;
+    preambleMessage?: AgentMessage;
+    /** When true, this group was consumed as a preamble and should not render */
+    _consumed?: boolean;
+};
+
+/** Message types that must never be consumed as preamble text */
+const NON_PREAMBLE_TYPES = new Set([
+    AgentMessageType.QUESTION,
+    AgentMessageType.COMPLETE,
+    AgentMessageType.IDLE,
+    AgentMessageType.TERMINATED,
+    AgentMessageType.ERROR,
+    AgentMessageType.REQUEST_INPUT,
+    AgentMessageType.BATCH_PROGRESS,
+]);
+
+/**
+ * Scan grouped messages and attach preamble text to tool_groups.
+ * When a single message (THOUGHT, UPDATE, ANSWER, etc.) immediately precedes
+ * a tool_group, the text is attached as preamble and the single message is marked
+ * as consumed so it doesn't render as a separate "Agent" box.
+ */
+function attachPreambles(groups: RenderableGroup[]): RenderableGroupWithPreamble[] {
+    const result: RenderableGroupWithPreamble[] = groups.map(g => ({ ...g }));
+
+    for (let i = 1; i < result.length; i++) {
+        const current = result[i];
+        const prev = result[i - 1];
+
+        // Only attach preamble to tool_groups
+        if (current.type !== 'tool_group') continue;
+        // Previous must be a single message with text content
+        if (prev.type !== 'single' || prev._consumed) continue;
+
+        const msg = prev.message;
+        const text = typeof msg.message === 'string' ? msg.message.trim() : '';
+        if (!text) continue;
+
+        // Skip messages that are tool activity themselves (already part of tool groups)
+        const isToolActivity = msg.details?.tool || msg.details?.tools;
+        if (isToolActivity) continue;
+
+        // Skip terminal/interactive message types that should always render independently
+        if (NON_PREAMBLE_TYPES.has(msg.type)) continue;
+
+        // Attach as preamble
+        current.preambleText = text;
+        current.preambleMessage = msg;
+        prev._consumed = true;
+    }
+
+    // Filter out consumed groups
+    return result.filter(g => !g._consumed);
+}
+
 // Replace %thinking_message% placeholder with actual thinking message
 const processThinkingPlaceholder = (text: string, thinkingMessageIndex: number): string => {
     if (text.includes('%thinking_message%')) {
@@ -24,19 +84,6 @@ const isBatchProgressMessage = (message: AgentMessage): message is AgentMessage
     return message.type === AgentMessageType.BATCH_PROGRESS && !!message.details?.batch_id;
 };
 
-const shouldDedupeAdjacentMessage = (previous: AgentMessage, current: AgentMessage): boolean => {
-    if (previous.type !== current.type) return false;
-    if (previous.message !== current.message) return false;
-
-    const prevDetails = previous.details as { tool_status?: string } | undefined;
-    const currDetails = current.details as { tool_status?: string } | undefined;
-    if (prevDetails?.tool_status !== "completed" || currDetails?.tool_status !== "completed") return false;
-
-    const prevTs = typeof previous.timestamp === "number" ? previous.timestamp : new Date(previous.timestamp).getTime();
-    const currTs = typeof current.timestamp === "number" ? current.timestamp : new Date(current.timestamp).getTime();
-    return currTs - prevTs < 2000;
-};
-
 // Error boundary to catch and isolate errors in individual message components
 // Note: Markdown parsing errors are handled internally by MarkdownRenderer,
 // so this mainly catches other component errors (e.g., artifact loading, charts)
@@ -66,7 +113,7 @@ class MessageErrorBoundary extends Component<
         if (this.state.hasError) {
             return (
                 <div className="border-l-4 border-l-destructive bg-destructive/10 px-4 py-2 my-2 rounded-r">
-                    <p className="text-sm text-destructive font-medium">Failed to render message</p>
+                    <p className="text-sm text-destructive font-medium">{i18nInstance.getFixedT(null, NAMESPACE)('agent.failedToRenderMessage')}</p>
                     <p className="text-xs text-muted mt-1 truncate">
                         {this.state.error?.message || 'Unknown error'}
                     </p>
@@ -104,6 +151,8 @@ interface AllMessagesMixedProps {
     hideToolCallsInViewMode?: AgentConversationViewMode[];
     streamingMessageClassNames?: StreamingMessageClassNames;
     batchProgressPanelClassNames?: BatchProgressPanelClassNames;
+    /** Run ID used to resolve artifact references in streaming chart specs */
+    artifactRunId?: string;
     /** Hide the workstream tabs entirely */
     hideWorkstreamTabs?: boolean;
     /** className override for the working indicator container */
@@ -136,6 +185,7 @@ function AllMessagesMixedComponent({
     hideToolCallsInViewMode,
     streamingMessageClassNames,
     batchProgressPanelClassNames,
+    artifactRunId,
     hideWorkstreamTabs,
     workingIndicatorClassName,
     messageListClassName,
@@ -143,6 +193,11 @@ function AllMessagesMixedComponent({
     CollectionLinkComponent,
     prependFriendlyMessage,
 }: AllMessagesMixedProps) {
+    if (!artifactRunId) {
+        console.warn('[AllMessagesMixed] artifactRunId prop is missing!');
+    }
+
+    const { t } = useUITranslation();
     const containerRef = useRef<HTMLDivElement | null>(null);
     const [activeWorkstream, setActiveWorkstream] = useState<string>("all");
 
@@ -150,9 +205,35 @@ function AllMessagesMixedComponent({
     // During streaming, scrollIntoView was being called 30+ times/sec
     const lastScrollTimeRef = useRef<number>(0);
     const scrollScheduledRef = useRef<number | null>(null);
+    // Track whether the user has manually scrolled away from the bottom.
+    // When true, auto-scroll is suppressed so the user can read earlier content.
+    const userScrolledUpRef = useRef<boolean>(false);
+    // Guard to distinguish programmatic scrolls from user-initiated ones
+    const programmaticScrollRef = useRef<boolean>(false);
 
     const isStreaming = streamingMessages.size > 0;
 
+    // Detect user scroll: if they scroll away from the bottom, stop auto-scrolling.
+    // Re-enable auto-scroll when they scroll back near the bottom.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        const NEAR_BOTTOM_THRESHOLD = 80; // px from bottom to consider "at bottom"
+
+        const handleScroll = () => {
+            // Ignore scrolls triggered by our own performScroll
+            if (programmaticScrollRef.current) return;
+
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+            userScrolledUpRef.current = distanceFromBottom > NEAR_BOTTOM_THRESHOLD;
+        };
+
+        container.addEventListener('scroll', handleScroll, { passive: true });
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, []);
+
     // Compute bucketed streaming content length for scroll dependency
     // Changes every ~200 chars to trigger scroll without excessive updates
     const streamingContentBucket = useMemo(() => {
@@ -166,15 +247,24 @@ function AllMessagesMixedComponent({
     // Throttled scroll function
     const performScroll = useCallback(() => {
         if (bottomRef.current) {
+            programmaticScrollRef.current = true;
             bottomRef.current.scrollIntoView({ behavior: isStreaming ? "instant" : "smooth" });
             lastScrollTimeRef.current = Date.now();
+            // Reset the programmatic flag after the browser processes the scroll
+            requestAnimationFrame(() => {
+                programmaticScrollRef.current = false;
+            });
         }
         scrollScheduledRef.current = null;
     }, [bottomRef, isStreaming]);
 
     // Auto-scroll to bottom when messages or streaming messages change
     // Throttled to max 10 scrolls/sec to prevent layout thrashing
+    // Skipped when the user has manually scrolled up to read earlier content
     useEffect(() => {
+        // Respect user's scroll position — don't yank them back to the bottom
+        if (userScrolledUpRef.current) return;
+
         const now = Date.now();
         const timeSinceLastScroll = now - lastScrollTimeRef.current;
 
@@ -209,7 +299,11 @@ function AllMessagesMixedComponent({
             const deduped: AgentMessage[] = [];
             for (const msg of sorted) {
                 const previous = deduped[deduped.length - 1];
-                if (previous && shouldDedupeAdjacentMessage(previous, msg)) {
+                if (previous && shouldCollapseAdjacentRenderedMessage(previous, msg)) {
+                    continue;
+                }
+
+                if (previous && shouldDedupeAdjacentCompletedToolMessage(previous, msg)) {
                     continue;
                 }
                 deduped.push(msg);
@@ -259,35 +353,10 @@ function AllMessagesMixedComponent({
     }, [sortedMessages, activeWorkstream]);
 
     // Pre-compute important messages and recent thinking for sliding view (avoid IIFE in render)
-    const { importantMessages, recentThinking } = React.useMemo(() => {
-        const hasStreaming = streamingMessages.size > 0;
-
-        // Important messages include answers, questions, completion states, AND tool progress thoughts
-        const important = displayMessages.filter(msg =>
-            msg.type === AgentMessageType.ANSWER ||
-            msg.type === AgentMessageType.QUESTION ||
-            msg.type === AgentMessageType.COMPLETE ||
-            msg.type === AgentMessageType.IDLE ||
-            msg.type === AgentMessageType.REQUEST_INPUT ||
-            msg.type === AgentMessageType.TERMINATED ||
-            msg.type === AgentMessageType.ERROR ||
-            // Include THOUGHT messages that have tool details (progress from message_to_human or streamed content)
-            (msg.type === AgentMessageType.THOUGHT && (msg.details?.tool || msg.details?.tools || msg.details?.streamed))
-        );
-
-        // Latest thinking: show only the most recent generic thinking message (UPDATE/PLAN or THOUGHT without tool)
-        // Tool progress is already in important messages
-        const thinkingMessages = !isCompleted && !hasStreaming
-            ? displayMessages
-                .filter(msg =>
-                    msg.type === AgentMessageType.UPDATE ||
-                    msg.type === AgentMessageType.PLAN ||
-                    (msg.type === AgentMessageType.THOUGHT && !msg.details?.tool && !msg.details?.tools && !msg.details?.streamed))
-                .slice(-1) // Show only the latest thinking message
-            : [];
-
-        return { importantMessages: important, recentThinking: thinkingMessages };
-    }, [displayMessages, isCompleted, streamingMessages.size]);
+    const { importantMessages, recentThinking } = React.useMemo(
+        () => getSlidingViewMessageBuckets(displayMessages, isCompleted, streamingMessages.size > 0),
+        [displayMessages, isCompleted, streamingMessages.size],
+    );
 
     // Split streaming messages:
     // - complete (or stale incomplete) ones are interleaved chronologically
@@ -313,9 +382,13 @@ function AllMessagesMixedComponent({
             // If a newer persisted message exists, this stream is stale and should be
             // treated as complete for ordering purposes.
             const isStale = data.startTimestamp <= newestMessageTimestamp;
-            if (data.isComplete || isStale) {
+            if (isStale) {
+                // Only interleave chronologically when a newer persisted message
+                // already exists — the streaming message is truly historical.
                 complete.set(id, data);
             } else if (data.text) {
+                // Keep at the bottom (including isComplete streams) until
+                // the persisted ANSWER/THOUGHT arrives and replaces it.
                 incomplete.push({ id, data });
             }
         });
@@ -325,14 +398,15 @@ function AllMessagesMixedComponent({
 
     // Group messages with ONLY complete streaming interleaved for stacked view
     // Incomplete streaming is rendered separately at the end (avoids re-grouping on every chunk)
+    // Then attach preamble text from preceding reasoning messages to tool_groups
     const groupedMessages = React.useMemo(
-        () => mergeConsecutiveToolGroups(groupMessagesWithStreaming(displayMessages, completeStreaming, activeWorkstream)),
+        () => attachPreambles(mergeConsecutiveToolGroups(groupMessagesWithStreaming(displayMessages, completeStreaming, activeWorkstream))),
         [displayMessages, completeStreaming, activeWorkstream]
     );
 
     // Group important messages with ONLY complete streaming interleaved for sliding view
     const groupedImportantMessages = React.useMemo(
-        () => mergeConsecutiveToolGroups(groupMessagesWithStreaming(importantMessages, completeStreaming, activeWorkstream)),
+        () => attachPreambles(mergeConsecutiveToolGroups(groupMessagesWithStreaming(importantMessages, completeStreaming, activeWorkstream))),
         [importantMessages, completeStreaming, activeWorkstream]
     );
 
@@ -359,7 +433,7 @@ function AllMessagesMixedComponent({
             if (!workstreamMessages.has(workstreamId)) {
                 workstreamMessages.set(workstreamId, []);
             }
-            workstreamMessages.get(workstreamId)!.push(message);
+            workstreamMessages.get(workstreamId)?.push(message);
         });
 
         // Check if each workstream is completed
@@ -480,8 +554,8 @@ function AllMessagesMixedComponent({
                 <div className="flex items-center justify-center h-full text-center py-8">
                     <div className="flex items-center px-3 py-2 text-sm text-muted">
                         {activeWorkstream === "all"
-                            ? "Waiting for agent response..."
-                            : "No messages in this workstream yet..."}
+                            ? t('agent.waitingForAgentResponse')
+                            : t('agent.noMessagesInWorkstream')}
                     </div>
                 </div>
             ) : (
@@ -528,6 +602,8 @@ function AllMessagesMixedComponent({
                                                 showPulsatingCircle={isLatest}
                                                 toolRunId={group.toolRunId}
                                                 toolStatus={group.toolStatus}
+                                                preambleText={group.preambleText}
+                                                preambleMessage={group.preambleMessage}
                                                 {...toolCallGroupClassNames}
                                             />
                                         </MessageErrorBoundary>
@@ -541,6 +617,7 @@ function AllMessagesMixedComponent({
                                             workstreamId={group.workstreamId}
                                             isComplete={group.isComplete}
                                             timestamp={group.startTimestamp}
+                                            artifactRunId={artifactRunId}
                                             {...streamingMessageClassNames}
                                         />
                                     );
@@ -586,8 +663,9 @@ function AllMessagesMixedComponent({
                                     key={`streaming-incomplete-${id}`}
                                     text={data.text}
                                     workstreamId={data.workstreamId}
-                                    isComplete={false}
+                                    isComplete={data.isComplete}
                                     timestamp={data.startTimestamp}
+                                    artifactRunId={artifactRunId}
                                     {...streamingMessageClassNames}
                                 />
                             ))}
@@ -595,7 +673,7 @@ function AllMessagesMixedComponent({
                             {isAgentWorking && incompleteStreaming.length === 0 && (
                                 <div className={cn("flex items-center gap-2 pl-3 py-1.5 border-l-2 border-l-purple-500", workingIndicatorClassName)}>
                                     <PulsatingCircle size="sm" color="blue" />
-                                    <span className="text-xs text-muted">Working...</span>
+                                    <span className="text-xs text-muted">{t('agent.working')}</span>
                                 </div>
                             )}
                         </>
@@ -626,6 +704,8 @@ function AllMessagesMixedComponent({
                                                 showPulsatingCircle={isLatest}
                                                 toolRunId={group.toolRunId}
                                                 toolStatus={group.toolStatus}
+                                                preambleText={group.preambleText}
+                                                preambleMessage={group.preambleMessage}
                                                 {...toolCallGroupClassNames}
                                             />
                                         </MessageErrorBoundary>
@@ -639,6 +719,7 @@ function AllMessagesMixedComponent({
                                             workstreamId={group.workstreamId}
                                             isComplete={group.isComplete}
                                             timestamp={group.startTimestamp}
+                                            artifactRunId={artifactRunId}
                                             {...streamingMessageClassNames}
                                         />
                                     );
@@ -687,6 +768,7 @@ function AllMessagesMixedComponent({
                                     workstreamId={getWorkstreamId(thinking)}
                                     isComplete={idx < recentThinking.length - 1} // Only latest is still "streaming"
                                     timestamp={thinking.timestamp}
+                                    artifactRunId={artifactRunId}
                                     {...streamingMessageClassNames}
                                 />
                             ))}
@@ -696,8 +778,9 @@ function AllMessagesMixedComponent({
                                     key={`streaming-incomplete-${id}`}
                                     text={data.text}
                                     workstreamId={data.workstreamId}
-                                    isComplete={false}
+                                    isComplete={data.isComplete}
                                     timestamp={data.startTimestamp}
+                                    artifactRunId={artifactRunId}
                                     {...streamingMessageClassNames}
                                 />
                             ))}
@@ -705,7 +788,7 @@ function AllMessagesMixedComponent({
                             {isAgentWorking && recentThinking.length === 0 && incompleteStreaming.length === 0 && (
                                 <div className={cn("flex items-center gap-2 pl-3 py-1.5 border-l-2 border-l-purple-500", workingIndicatorClassName)}>
                                     <PulsatingCircle size="sm" color="blue" />
-                                    <span className="text-xs text-muted">Working...</span>
+                                    <span className="text-xs text-muted">{t('agent.working')}</span>
                                 </div>
                             )}
                         </>
@@ -717,6 +800,19 @@ function AllMessagesMixedComponent({
     );
 }
 
+const shouldDedupeAdjacentCompletedToolMessage = (previous: AgentMessage, current: AgentMessage): boolean => {
+    if (previous.type !== current.type) return false;
+    if (previous.message !== current.message) return false;
+
+    const prevDetails = previous.details as { tool_status?: string } | undefined;
+    const currDetails = current.details as { tool_status?: string } | undefined;
+    if (prevDetails?.tool_status !== "completed" || currDetails?.tool_status !== "completed") return false;
+
+    const prevTs = typeof previous.timestamp === "number" ? previous.timestamp : new Date(previous.timestamp).getTime();
+    const currTs = typeof current.timestamp === "number" ? current.timestamp : new Date(current.timestamp).getTime();
+    return currTs - prevTs < 2000;
+};
+
 const AllMessagesMixed = React.memo(AllMessagesMixedComponent);
 
 export default AllMessagesMixed;

package/src/features/agent/chat/ModernAgentOutput/BatchProgressPanel.tsx

@@ -12,6 +12,7 @@ import {
 } from "lucide-react";
 import { useState, memo } from "react";
 import { PulsatingCircle } from "../AnimatedThinkingDots";
+import { useUITranslation } from "../../../../i18n/index.js";
 
 export interface BatchProgressPanelProps {
     message: AgentMessage;
@@ -52,6 +53,7 @@ function BatchProgressPanelComponent({
 }: BatchProgressPanelProps) {
     const [isExpanded, setIsExpanded] = useState(false);
     const toast = useToast();
+    const { t } = useUITranslation();
 
     const { tool_name, total, completed, succeeded, failed, items, started_at, completed_at } = batchData;
 
@@ -103,7 +105,7 @@ function BatchProgressPanelComponent({
         navigator.clipboard.writeText(content).then(() => {
             toast({
                 status: "success",
-                title: "Copied batch details to clipboard",
+                title: t('agent.copiedBatchDetails'),
                 duration: 2000,
             });
         });
@@ -123,7 +125,7 @@ function BatchProgressPanelComponent({
             >
                 <div className="flex items-center gap-2">
                     {renderStatusIndicator()}
-                    <span className={cn("text-xs font-medium text-muted", senderClassName)}>Batch</span>
+                    <span className={cn("text-xs font-medium text-muted", senderClassName)}>{t('agent.batch')}</span>
                     <span className="text-xs text-blue-600 dark:text-blue-400 font-medium">
                         {tool_name}
                     </span>
@@ -152,7 +154,7 @@ function BatchProgressPanelComponent({
                             copyToClipboard();
                         }}
                         className="text-muted"
-                        title="Copy batch details"
+                        title={t('agent.copyBatchDetails')}
                     >
                         <CopyIcon className="size-3" />
                     </Button>
@@ -222,7 +224,7 @@ function BatchProgressPanelComponent({
 
                             {/* Message */}
                             <span className="text-muted truncate flex-1" title={item.message}>
-                                {item.message || (item.status === "pending" ? "Waiting..." : "")}
+                                {item.message || (item.status === "pending" ? t('agent.waiting') : "")}
                             </span>
 
                             {/* Duration */}