feat(frontend): implement (thought for x second) thinking duration indicator (#3627)

frontend/src/components/ai-elements/reasoning.tsx

@@ -19,6 +19,7 @@ type ReasoningContextValue = {
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
   duration: number | undefined;
+  startTime: number | null;
 };
 
 const ReasoningContext = createContext<ReasoningContextValue | null>(null);
@@ -37,6 +38,7 @@ export type ReasoningProps = ComponentProps<typeof Collapsible> & {
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
   duration?: number;
+  startTimeProp?: number | null;
 };
 
 const AUTO_CLOSE_DELAY = 1000;
@@ -50,6 +52,7 @@ export const Reasoning = memo(
     defaultOpen = true,
     onOpenChange,
     duration: durationProp,
+    startTimeProp,
     children,
     ...props
   }: ReasoningProps) => {
@@ -64,19 +67,24 @@ export const Reasoning = memo(
     });
 
     const [hasAutoClosed, setHasAutoClosed] = useState(false);
-    const [startTime, setStartTime] = useState<number | null>(null);
+    const [startTime, setStartTime] = useState<number | null>(
+      () => startTimeProp ?? (isStreaming ? Date.now() : null),
+    );
 
     // Track duration when streaming starts and ends
     useEffect(() => {
       if (isStreaming) {
-        if (startTime === null) {
+        // Force sync the start time with the Turn start time if provided
+        if (startTimeProp != null && startTime !== startTimeProp) {
+          setStartTime(startTimeProp);
+        } else if (startTimeProp == null && startTime === null) {
           setStartTime(Date.now());
         }
       } else if (startTime !== null) {
         setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
         setStartTime(null);
       }
-    }, [isStreaming, startTime, setDuration]);
+    }, [isStreaming, startTimeProp, startTime, setDuration]);
 
     // Auto-open when streaming starts, auto-close when streaming ends (once only)
     useEffect(() => {
@@ -97,7 +105,7 @@ export const Reasoning = memo(
 
     return (
       <ReasoningContext.Provider
-        value={{ isStreaming, isOpen, setIsOpen, duration }}
+        value={{ isStreaming, isOpen, setIsOpen, duration, startTime }}
       >
         <Collapsible
           className={cn("not-prose mb-4", className)}
@@ -115,10 +123,44 @@ export const Reasoning = memo(
 export type ReasoningTriggerProps = ComponentProps<
   typeof CollapsibleTrigger
 > & {
-  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+  getThinkingMessage?: (
+    isStreaming: boolean,
+    duration?: number,
+    startTime?: number | null,
+  ) => ReactNode;
+  hasContent?: boolean;
 };
 
-const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+const LiveTimer = ({ startTime }: { startTime: number }) => {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    const calculateElapsed = () => Math.ceil((Date.now() - startTime) / 1000);
+    setElapsed(calculateElapsed());
+
+    const interval = setInterval(() => {
+      setElapsed(calculateElapsed());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [startTime]);
+
+  return (
+    <span className="flex items-center gap-2">
+      <Shimmer duration={1}>Thinking...</Shimmer>
+      <span className="text-muted-foreground/80">({elapsed}s)</span>
+    </span>
+  );
+};
+
+const defaultGetThinkingMessage = (
+  isStreaming: boolean,
+  duration?: number,
+  startTime?: number | null,
+) => {
+  if (isStreaming && startTime != null && startTime !== undefined) {
+    return <LiveTimer startTime={startTime} />;
+  }
   if (isStreaming || duration === 0) {
     return <Shimmer duration={1}>Thinking...</Shimmer>;
   }
@@ -133,14 +175,16 @@ export const ReasoningTrigger = memo(
     className,
     children,
     getThinkingMessage = defaultGetThinkingMessage,
+    hasContent = true,
     ...props
   }: ReasoningTriggerProps) => {
-    const { isStreaming, isOpen, duration } = useReasoning();
+    const { isStreaming, isOpen, duration, startTime } = useReasoning();
 
     return (
       <CollapsibleTrigger
         className={cn(
           "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
+          !hasContent && "cursor-default",
           className,
         )}
         {...props}
@@ -148,13 +192,15 @@ export const ReasoningTrigger = memo(
         {children ?? (
           <>
             <BrainIcon className="size-4" />
-            {getThinkingMessage(isStreaming, duration)}
+            {getThinkingMessage(isStreaming, duration, startTime)}
-            <ChevronDownIcon
+            {hasContent && (
-              className={cn(
+              <ChevronDownIcon
-                "size-4 transition-transform",
+                className={cn(
-                isOpen ? "rotate-180" : "rotate-0",
+                  "size-4 transition-transform",
-              )}
+                  isOpen ? "rotate-180" : "rotate-0",
-            />
+                )}
+              />
+            )}
           </>
         )}
       </CollapsibleTrigger>

frontend/src/components/workspace/messages/message-list-item.tsx

@@ -10,6 +10,7 @@ import {
   useCallback,
   useMemo,
   useState,
+  useEffect,
   type AnchorHTMLAttributes,
   type ImgHTMLAttributes,
 } from "react";
@@ -124,6 +125,7 @@ export function MessageListItem({
   runId,
   threadId,
   showCopyButton = true,
+  turnStartTime,
 }: {
   className?: string;
   message: Message;
@@ -132,6 +134,7 @@ export function MessageListItem({
   feedback?: FeedbackData | null;
   runId?: string;
   showCopyButton?: boolean;
+  turnStartTime?: number | null;
 }) {
   const isHuman = message.type === "human";
   return (
@@ -144,6 +147,7 @@ export function MessageListItem({
         message={message}
         isLoading={isLoading}
         threadId={threadId}
+        turnStartTime={turnStartTime}
       />
       {!isLoading && showCopyButton && (
         <MessageToolbar
@@ -211,14 +215,20 @@ function MessageContent_({
   message,
   isLoading = false,
   threadId,
+  turnStartTime,
 }: {
   className?: string;
   message: Message;
   isLoading?: boolean;
   threadId: string;
+  turnStartTime?: number | null;
 }) {
   const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
   const isHuman = message.type === "human";
+  const [wasLoading, setWasLoading] = useState(isLoading);
+  useEffect(() => {
+    if (isLoading) setWasLoading(true);
+  }, [isLoading]);
   const components = useMemo(
     () => ({
       img: (props: ImgHTMLAttributes<HTMLImageElement>) => (
@@ -324,6 +334,14 @@ function MessageContent_({
   return (
     <AIElementMessageContent className={className}>
       {filesList}
+      {!isHuman && (!!reasoningContent || wasLoading) && (
+        <Reasoning isStreaming={isLoading} startTimeProp={turnStartTime}>
+          <ReasoningTrigger hasContent={!!reasoningContent} />
+          {reasoningContent && (
+            <ReasoningContent>{reasoningContent}</ReasoningContent>
+          )}
+        </Reasoning>
+      )}
       <MarkdownContent
         content={contentToDisplay}
         isLoading={isLoading}

frontend/src/components/workspace/messages/message-list.tsx

@@ -1,12 +1,16 @@
 import type { Message } from "@langchain/langgraph-sdk";
 import type { BaseStream } from "@langchain/langgraph-sdk/react";
 import { ChevronUpIcon, Loader2Icon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import {
   Conversation,
   ConversationContent,
 } from "@/components/ai-elements/conversation";
+import {
+  Reasoning,
+  ReasoningTrigger,
+} from "@/components/ai-elements/reasoning";
 import { Button } from "@/components/ui/button";
 import { useI18n } from "@/core/i18n/hooks";
 import {
@@ -179,10 +183,32 @@ export function MessageList({
   isHistoryLoading?: boolean;
 }) {
   const { t } = useI18n();
-  const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
+  const [turnStartTime, setTurnStartTime] = useState<number | null>(null);
-  const updateSubtask = useUpdateSubtask();
+  const prevIsLoading = useRef(thread.isLoading);
+
+  useEffect(() => {
+    if (thread.isLoading && !prevIsLoading.current) {
+      setTurnStartTime(Date.now());
+    }
+    prevIsLoading.current = thread.isLoading;
+  }, [thread.isLoading]);
   const messages = thread.messages;
   const groupedMessages = getMessageGroups(messages);
+  const hasActiveAssistantText = useMemo(() => {
+    let lastHumanIndex = -1;
+    for (let i = groupedMessages.length - 1; i >= 0; i--) {
+      if (groupedMessages[i]?.type === "human") {
+        lastHumanIndex = i;
+        break;
+      }
+    }
+    if (lastHumanIndex === -1) return false;
+    return groupedMessages
+      .slice(lastHumanIndex)
+      .some((g) => g.type === "assistant");
+  }, [groupedMessages]);
+  const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
+  const updateSubtask = useUpdateSubtask();
   const lastGroupIndex = groupedMessages.length - 1;
   const turnUsageMessagesByGroupIndex =
     getAssistantTurnUsageMessages(groupedMessages);
@@ -296,9 +322,17 @@ export function MessageList({
                     <MessageListItem
                       key={`${group.id}/${msg.id}`}
                       message={msg}
-                      isLoading={thread.isLoading}
+                      isLoading={
+                        thread.isLoading &&
+                        groupIndex === groupedMessages.length - 1
+                      }
                       threadId={threadId}
                       showCopyButton={group.type !== "assistant"}
+                      turnStartTime={
+                        groupIndex === groupedMessages.length - 1
+                          ? turnStartTime
+                          : null
+                      }
                     />
                   );
                 })}
@@ -479,7 +513,13 @@ export function MessageList({
             </div>
           );
         })}
-        {thread.isLoading && <StreamingIndicator className="my-4" />}
+        {thread.isLoading && !hasActiveAssistantText && (
+          <div className="w-full">
+            <Reasoning isStreaming={true} startTimeProp={turnStartTime}>
+              <ReasoningTrigger hasContent={false} />
+            </Reasoning>
+          </div>
+        )}
         <div style={{ height: `${paddingBottom}px` }} />
       </ConversationContent>
     </Conversation>