Small tweaks to thinking

web/src/app/chat/message/AgenticMessage.tsx

@@ -43,7 +43,7 @@ import { LlmDescriptor } from "@/lib/hooks";
 import { ContinueGenerating } from "./ContinueMessage";
 import { MemoizedAnchor, MemoizedParagraph } from "./MemoizedTextComponents";
 import { extractCodeText, preprocessLaTeX } from "./codeUtils";
-import { ThinkingBox } from "./ThinkingBox";
+import { ThinkingBox } from "./thinkingBox/ThinkingBox";
 import {
   hasCompletedThinkingTokens,
   hasPartialThinkingTokens,
@@ -147,7 +147,10 @@ export const AgenticMessage = ({
     let processed = incoming;
 
     // Apply thinking tokens processing first
-    if (hasCompletedThinkingTokens(processed) || hasPartialThinkingTokens(processed)) {
+    if (
+      hasCompletedThinkingTokens(processed) ||
+      hasPartialThinkingTokens(processed)
+    ) {
       processed = removeThinkingTokens(processed) as string;
     }
 
@@ -190,7 +193,9 @@ export const AgenticMessage = ({
 
   // Check if content contains thinking tokens
   const hasThinkingTokens = useMemo(() => {
-    return hasCompletedThinkingTokens(content) || hasPartialThinkingTokens(content);
+    return (
+      hasCompletedThinkingTokens(content) || hasPartialThinkingTokens(content)
+    );
   }, [content]);
 
   // Extract thinking content
@@ -493,9 +498,9 @@ export const AgenticMessage = ({
                   {/* Render thinking box if thinking tokens exist */}
                   {hasThinkingTokens && thinkingContent && (
                     <div className="mb-2 mt-1">
-                      <ThinkingBox 
-                        content={thinkingContent} 
-                        isComplete={isComplete || false} 
+                      <ThinkingBox
+                        content={thinkingContent}
+                        isComplete={isComplete || false}
                         isStreaming={!isThinkingTokenComplete || !isComplete}
                       />
                     </div>

web/src/app/chat/message/Messages.tsx

@@ -73,7 +73,7 @@ import rehypeKatex from "rehype-katex";
 import "katex/dist/katex.min.css";
 import { copyAll, handleCopy } from "./copyingUtils";
 import { transformLinkUri } from "@/lib/utils";
-import { ThinkingBox } from "./ThinkingBox";
+import { ThinkingBox } from "./thinkingBox/ThinkingBox";
 import {
   hasCompletedThinkingTokens,
   hasPartialThinkingTokens,
@@ -278,7 +278,9 @@ export const AIMessage = ({
 
   // Check if content contains thinking tokens (complete or partial)
   const hasThinkingTokens = useMemo(() => {
-    return hasCompletedThinkingTokens(content) || hasPartialThinkingTokens(content);
+    return (
+      hasCompletedThinkingTokens(content) || hasPartialThinkingTokens(content)
+    );
   }, [content]);
 
   // Extract thinking content
@@ -302,19 +304,19 @@ export const AIMessage = ({
   // or there are no thinking tokens to begin with
   const shouldShowContent = useMemo(() => {
     if (!hasThinkingTokens) return true;
-    
+
     // If the message is complete, we always show the content
     if (isComplete) return true;
-    
+
     // If thinking is not complete, we don't show the content yet
     if (!isThinkingTokenComplete) return false;
-    
+
     // If thinking is complete but we're not done with the message yet,
     // only show the content if there's actually something to show
-    const cleanedContent = (typeof finalContent === 'string') ? 
-      finalContent.trim() : finalContent;
-    
-    return !!cleanedContent && cleanedContent !== '';
+    const cleanedContent =
+      typeof finalContent === "string" ? finalContent.trim() : finalContent;
+
+    return !!cleanedContent && cleanedContent !== "";
   }, [hasThinkingTokens, isComplete, isThinkingTokenComplete, finalContent]);
 
   const processContent = (content: string | JSX.Element) => {
@@ -688,10 +690,10 @@ export const AIMessage = ({
 
                     {/* Render thinking box if thinking tokens exist */}
                     {hasThinkingTokens && thinkingContent && (
-                      <div className="mb-2 mt-1">
-                        <ThinkingBox 
-                          content={thinkingContent} 
-                          isComplete={isComplete || false} 
+                      <div className="mb-2">
+                        <ThinkingBox
+                          content={thinkingContent}
+                          isComplete={isComplete || false}
                           isStreaming={!isThinkingTokenComplete || !isComplete}
                         />
                       </div>
@@ -761,7 +763,10 @@ export const AIMessage = ({
                           <CustomTooltip showTick line content="Copy">
                             <CopyButton
                               copyAllFn={() =>
-                                copyAll(finalContentProcessed as string, markdownRef)
+                                copyAll(
+                                  finalContentProcessed as string,
+                                  markdownRef
+                                )
                               }
                             />
                           </CustomTooltip>
@@ -840,7 +845,10 @@ export const AIMessage = ({
                           <CustomTooltip showTick line content="Copy">
                             <CopyButton
                               copyAllFn={() =>
-                                copyAll(finalContentProcessed as string, markdownRef)
+                                copyAll(
+                                  finalContentProcessed as string,
+                                  markdownRef
+                                )
                               }
                             />
                           </CustomTooltip>

web/src/app/chat/message/ThinkingBox.css → web/src/app/chat/message/thinkingBox/ThinkingBox.css

@@ -1,4 +1,12 @@
 /* ThinkingBox.css */
+
+/* Apply transition to dark mode as well to ensure smooth color changes */
+html {
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+}
+
 :root {
   --thinking-border-color: rgba(0, 0, 0, 0.1);
   --thinking-bg-color: transparent;
@@ -22,10 +30,14 @@
 .thinking-box {
   width: 98%;
   max-width: 100%;
-  margin: 0.75rem 0;
   position: relative;
 }
 
+/* Simple direct rule to prevent border flash in dark mode */
+.dark .thinking-box * {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .thinking-box__container {
   border: 1px solid var(--thinking-border-color);
   border-radius: 0.75rem;
@@ -55,6 +67,28 @@
   border-bottom: none;
 }
 
+/* Style for the transitioning state to prevent flashing */
+.thinking-box__container--transitioning {
+  pointer-events: none; /* Prevent interactions during transition */
+}
+
+/* Fix for the flashing white border in dark mode */
+.dark .thinking-box__container--transitioning {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.dark .thinking-box__container--transitioning .thinking-box__header {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+
+.dark .thinking-box__container--transitioning .thinking-box__content {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
+.dark .thinking-box__container--transitioning .thinking-box__preview--crawling {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+
 .thinking-box__header {
   display: flex;
   align-items: center;
@@ -95,7 +129,6 @@
 .thinking-box__timer {
   font-size: 0.8rem;
   color: var(--thinking-text-color);
-  margin-left: 0.25rem;
 }
 
 .thinking-box__collapse-icon {
@@ -167,37 +200,37 @@
 .thinking-box__fade-container::before {
   top: 0;
   background: linear-gradient(
-    to bottom, 
-    var(--thinking-fade-start), 
-    rgba(var(--thinking-fade-start-rgb, 249, 250, 251), 0.85) 25%, 
+    to bottom,
+    var(--thinking-fade-start),
+    rgba(var(--thinking-fade-start-rgb, 249, 250, 251), 0.85) 25%,
     var(--thinking-fade-end) 100%
   );
 }
 
 .thinking-box__fade-container::after {
   bottom: 0;
   background: linear-gradient(
-    to top, 
-    var(--thinking-fade-start), 
-    rgba(var(--thinking-fade-start-rgb, 249, 250, 251), 0.85) 25%, 
+    to top,
+    var(--thinking-fade-start),
+    rgba(var(--thinking-fade-start-rgb, 249, 250, 251), 0.85) 25%,
     var(--thinking-fade-end) 100%
   );
 }
 
 .dark .thinking-box__fade-container::before {
   background: linear-gradient(
-    to bottom, 
-    var(--thinking-fade-start), 
-    rgba(var(--thinking-fade-start-rgb, 30, 41, 59), 0.85) 25%, 
+    to bottom,
+    var(--thinking-fade-start),
+    rgba(var(--thinking-fade-start-rgb, 30, 41, 59), 0.85) 25%,
     var(--thinking-fade-end) 100%
   );
 }
 
 .dark .thinking-box__fade-container::after {
   background: linear-gradient(
-    to top, 
-    var(--thinking-fade-start), 
-    rgba(var(--thinking-fade-start-rgb, 30, 41, 59), 0.85) 25%, 
+    to top,
+    var(--thinking-fade-start),
+    rgba(var(--thinking-fade-start-rgb, 30, 41, 59), 0.85) 25%,
     var(--thinking-fade-end) 100%
   );
 }
@@ -218,8 +251,20 @@
   transform: translateZ(0);
   backface-visibility: hidden;
   -webkit-font-smoothing: antialiased;
-  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
-  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 12%,
+    black 88%,
+    transparent
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 12%,
+    black 88%,
+    transparent
+  );
 }
 
 /* Enhanced text during crawling */
@@ -235,25 +280,39 @@
 
 /* Animation for thinking indicator */
 @keyframes pulse {
-  0% { opacity: 0.5; }
-  50% { opacity: 1; }
-  100% { opacity: 0.5; }
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
 }
 
 /* Fade in animation */
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Smooth scrolling effect */
 @keyframes scrollText {
-  0% { transform: translateY(0); }
-  100% { transform: translateY(-100%); }
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
 }
 
 .thinking-box__preview-text {
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 0.7rem;
   color: var(--thinking-text-color);
   white-space: pre-wrap;
@@ -266,17 +325,23 @@
 
 /* Enhanced masking during crawling */
 .thinking-box__preview--crawling .thinking-box__scroll-content {
-  -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
-  mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 8%,
+    black 92%,
+    transparent
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black 8%,
+    black 92%,
+    transparent
+  );
   padding: 0.75rem 1rem;
 }
 
-.thinking-box__icon--active {
-  animation: pulse 1.5s infinite ease-in-out;
-  opacity: 1;
-  color: var(--thinking-title-color);
-}
-
 /* Make sure the preview adjusts immediately when new content arrives */
 .thinking-box__preview--crawling .thinking-box__scroll-content {
   transition: height 0.3s ease-out;
@@ -302,4 +367,4 @@
 
 .dark .thinking-box__container--collapsed .thinking-box__header:hover {
   background-color: rgba(255, 255, 255, 0.03);
-} 
+}