Thinking mode UI. (#4370)

* Update web connector implementation and fix line length issues

* Update configurations and fix connector issues

* Update Slack connector

* Update connectors and add jira_test_env to gitignore, removing sensitive information

* Restore checkpointing functionality and remove sensitive information

* Fix agent mode to properly handle thinking tokens

* up

* Enhance ThinkingBox component with improved content handling and animations. Added support for partial thinking tokens, refined scrolling behavior, and updated CSS for better visual feedback during thinking states.

* Create clean branch with frontend thinking mode changes only

* Update ThinkingBox component to include new props for completion and streaming states. Refactor smooth scrolling logic into a dedicated function for improved readability. Add new entry to .gitignore for jira_test_env.

* Remove autoCollapse prop from AIMessage component for improved flexibility in message display.

* Update thinking tokens handling in chat utils

* Remove unused cleanThinkingContent import from Messages component to streamline code.

---------

Co-authored-by: ferdinand loesch <f.loesch@sportradar.com>
Co-authored-by: EC2 Default User <ec2-user@ip-10-73-128-233.eu-central-1.compute.internal>
Co-authored-by: Your Name <you@example.com>
Co-authored-by: Chris Weaver <25087905+Weves@users.noreply.github.com>

.gitignore

@@ -10,3 +10,4 @@
 /web/test-results/
 backend/onyx/agent_search/main/test_data.json
 backend/tests/regression/answer_quality/test_data.json
+jira_test_env/

backend/onyx/connectors/web/connector.py

@@ -47,6 +47,40 @@ IFRAME_TEXT_LENGTH_THRESHOLD = 700
 # Message indicating JavaScript is disabled, which often appears when scraping fails
 JAVASCRIPT_DISABLED_MESSAGE = "You have JavaScript disabled in your browser"
 
+# Define common headers that mimic a real browser
+DEFAULT_USER_AGENT = (
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 "
+    "(KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36"
+)
+DEFAULT_HEADERS = {
+    "User-Agent": DEFAULT_USER_AGENT,
+    "Accept": (
+        "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,"
+        "image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7"
+    ),
+    "Accept-Language": "en-US,en;q=0.9",
+    "Accept-Encoding": "gzip, deflate, br",
+    "Connection": "keep-alive",
+    "Upgrade-Insecure-Requests": "1",
+    "Sec-Fetch-Dest": "document",
+    "Sec-Fetch-Mode": "navigate",
+    "Sec-Fetch-Site": "none",
+    "Sec-Fetch-User": "?1",
+    "Sec-CH-UA": '"Google Chrome";v="123", "Not:A-Brand";v="8"',
+    "Sec-CH-UA-Mobile": "?0",
+    "Sec-CH-UA-Platform": '"macOS"',
+}
+
+# Common PDF MIME types
+PDF_MIME_TYPES = [
+    "application/pdf",
+    "application/x-pdf",
+    "application/acrobat",
+    "application/vnd.pdf",
+    "text/pdf",
+    "text/x-pdf",
+]
+
 
 class WEB_CONNECTOR_VALID_SETTINGS(str, Enum):
     # Given a base site, index everything under that path
@@ -95,7 +129,7 @@ def protected_url_check(url: str) -> None:
 
 def check_internet_connection(url: str) -> None:
     try:
-        response = requests.get(url, timeout=3)
+        response = requests.get(url, timeout=3, headers=DEFAULT_HEADERS)
         response.raise_for_status()
     except requests.exceptions.HTTPError as e:
         # Extract status code from the response, defaulting to -1 if response is None
@@ -155,12 +189,40 @@ def get_internal_links(
     return internal_links
 
 
+def is_pdf_content(response: requests.Response) -> bool:
+    """Check if the response contains PDF content based on content-type header"""
+    content_type = response.headers.get("content-type", "").lower()
+    return any(pdf_type in content_type for pdf_type in PDF_MIME_TYPES)
+
+
 def start_playwright() -> Tuple[Playwright, BrowserContext]:
     playwright = sync_playwright().start()
 
     browser = playwright.chromium.launch(headless=True)
 
-    context = browser.new_context()
+    # Create a context with realistic browser properties
+    context = browser.new_context(
+        user_agent=DEFAULT_USER_AGENT,
+        viewport={"width": 1440, "height": 900},
+        device_scale_factor=2.0,
+        locale="en-US",
+        timezone_id="America/Los_Angeles",
+        has_touch=False,
+        java_script_enabled=True,
+        color_scheme="light",
+    )
+
+    # Set additional headers to mimic a real browser
+    context.set_extra_http_headers(
+        {
+            "Accept": DEFAULT_HEADERS["Accept"],
+            "Accept-Language": DEFAULT_HEADERS["Accept-Language"],
+            "Sec-Fetch-Dest": DEFAULT_HEADERS["Sec-Fetch-Dest"],
+            "Sec-Fetch-Mode": DEFAULT_HEADERS["Sec-Fetch-Mode"],
+            "Sec-Fetch-Site": DEFAULT_HEADERS["Sec-Fetch-Site"],
+            "Sec-Fetch-User": DEFAULT_HEADERS["Sec-Fetch-User"],
+        }
+    )
 
     if (
         WEB_CONNECTOR_OAUTH_CLIENT_ID
@@ -183,7 +245,7 @@ def start_playwright() -> Tuple[Playwright, BrowserContext]:
 
 def extract_urls_from_sitemap(sitemap_url: str) -> list[str]:
     try:
-        response = requests.get(sitemap_url)
+        response = requests.get(sitemap_url, headers=DEFAULT_HEADERS)
         response.raise_for_status()
 
         soup = BeautifulSoup(response.content, "html.parser")
@@ -330,9 +392,15 @@ class WebConnector(LoadConnector):
                     playwright, context = start_playwright()
                     restart_playwright = False
 
-                if initial_url.split(".")[-1] == "pdf":
+                # First do a HEAD request to check content type without downloading the entire content
+                head_response = requests.head(
+                    initial_url, headers=DEFAULT_HEADERS, allow_redirects=True
+                )
+                is_pdf = is_pdf_content(head_response)
+
+                if is_pdf or initial_url.lower().endswith(".pdf"):
                     # PDF files are not checked for links
-                    response = requests.get(initial_url)
+                    response = requests.get(initial_url, headers=DEFAULT_HEADERS)
                     page_text, metadata, images = read_pdf_file(
                         file=io.BytesIO(response.content)
                     )

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

@@ -43,6 +43,14 @@ import { LlmDescriptor } from "@/lib/hooks";
 import { ContinueGenerating } from "./ContinueMessage";
 import { MemoizedAnchor, MemoizedParagraph } from "./MemoizedTextComponents";
 import { extractCodeText, preprocessLaTeX } from "./codeUtils";
+import { ThinkingBox } from "./ThinkingBox";
+import {
+  hasCompletedThinkingTokens,
+  hasPartialThinkingTokens,
+  extractThinkingContent,
+  isThinkingComplete,
+  removeThinkingTokens,
+} from "../utils/thinkingTokens";
 
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
@@ -138,6 +146,11 @@ export const AgenticMessage = ({
 
     let processed = incoming;
 
+    // Apply thinking tokens processing first
+    if (hasCompletedThinkingTokens(processed) || hasPartialThinkingTokens(processed)) {
+      processed = removeThinkingTokens(processed) as string;
+    }
+
     const codeBlockRegex = /```(\w*)\n[\s\S]*?```|```[\s\S]*?$/g;
     const matches = processed.match(codeBlockRegex);
     if (matches) {
@@ -175,6 +188,29 @@ export const AgenticMessage = ({
   const finalContent = processContent(content) as string;
   const finalAlternativeContent = processContent(alternativeContent) as string;
 
+  // Check if content contains thinking tokens
+  const hasThinkingTokens = useMemo(() => {
+    return hasCompletedThinkingTokens(content) || hasPartialThinkingTokens(content);
+  }, [content]);
+
+  // Extract thinking content
+  const thinkingContent = useMemo(() => {
+    if (!hasThinkingTokens) return "";
+    return extractThinkingContent(content);
+  }, [content, hasThinkingTokens]);
+
+  // Track if thinking is complete
+  const isThinkingTokenComplete = useMemo(() => {
+    return isThinkingComplete(thinkingContent);
+  }, [thinkingContent]);
+
+  // Enable streaming when thinking tokens are detected
+  useEffect(() => {
+    if (hasThinkingTokens) {
+      setAllowStreaming(true);
+    }
+  }, [hasThinkingTokens]);
+
   const [isViewingInitialAnswer, setIsViewingInitialAnswer] = useState(true);
 
   const [canShowResponse, setCanShowResponse] = useState(isComplete);
@@ -454,6 +490,16 @@ export const AgenticMessage = ({
                       unToggle={false}
                     />
                   )}
+                  {/* Render thinking box if thinking tokens exist */}
+                  {hasThinkingTokens && thinkingContent && (
+                    <div className="mb-2 mt-1">
+                      <ThinkingBox 
+                        content={thinkingContent} 
+                        isComplete={isComplete || false} 
+                        isStreaming={!isThinkingTokenComplete || !isComplete}
+                      />
+                    </div>
+                  )}
                   {/* For debugging purposes */}
                   {/* <SubQuestionProgress subQuestions={subQuestions || []} /> */}
                   {/*  */}

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

@@ -73,6 +73,14 @@ 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 {
+  hasCompletedThinkingTokens,
+  hasPartialThinkingTokens,
+  extractThinkingContent,
+  isThinkingComplete,
+  removeThinkingTokens,
+} from "../utils/thinkingTokens";
 import { FileResponse } from "../my-documents/DocumentsContext";
 
 const TOOLS_WITH_CUSTOM_HANDLING = [
@@ -268,6 +276,47 @@ export const AIMessage = ({
 }) => {
   const toolCallGenerating = toolCall && !toolCall.tool_result;
 
+  // Check if content contains thinking tokens (complete or partial)
+  const hasThinkingTokens = useMemo(() => {
+    return hasCompletedThinkingTokens(content) || hasPartialThinkingTokens(content);
+  }, [content]);
+
+  // Extract thinking content
+  const thinkingContent = useMemo(() => {
+    if (!hasThinkingTokens) return "";
+    return extractThinkingContent(content);
+  }, [content, hasThinkingTokens]);
+
+  // Track if thinking is complete
+  const isThinkingTokenComplete = useMemo(() => {
+    return isThinkingComplete(thinkingContent);
+  }, [thinkingContent]);
+
+  // Extract final content (remove thinking tokens)
+  const finalContent = useMemo(() => {
+    if (!hasThinkingTokens) return content;
+    return removeThinkingTokens(content);
+  }, [content, hasThinkingTokens]);
+
+  // Only show the message content when we've completed the thinking section
+  // 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 !== '';
+  }, [hasThinkingTokens, isComplete, isThinkingTokenComplete, finalContent]);
+
   const processContent = (content: string | JSX.Element) => {
     if (typeof content !== "string") {
       return content;
@@ -299,7 +348,7 @@ export const AIMessage = ({
     );
   };
 
-  const finalContent = processContent(content as string);
+  const finalContentProcessed = processContent(finalContent as string);
 
   const [isRegenerateDropdownVisible, setIsRegenerateDropdownVisible] =
     useState(false);
@@ -403,7 +452,7 @@ export const AIMessage = ({
       code: ({ node, className, children }: any) => {
         const codeText = extractCodeText(
           node,
-          finalContent as string,
+          finalContentProcessed as string,
           children
         );
 
@@ -414,15 +463,15 @@ export const AIMessage = ({
         );
       },
     }),
-    [anchorCallback, paragraphCallback, finalContent]
+    [anchorCallback, paragraphCallback, finalContentProcessed]
   );
   const markdownRef = useRef<HTMLDivElement>(null);
 
   // Process selection copying with HTML formatting
 
   const renderedMarkdown = useMemo(() => {
-    if (typeof finalContent !== "string") {
-      return finalContent;
+    if (typeof finalContentProcessed !== "string") {
+      return finalContentProcessed;
     }
 
     return (
@@ -433,10 +482,10 @@ export const AIMessage = ({
         rehypePlugins={[[rehypePrism, { ignoreMissing: true }], rehypeKatex]}
         urlTransform={transformLinkUri}
       >
-        {finalContent}
+        {finalContentProcessed}
       </ReactMarkdown>
     );
-  }, [finalContent, markdownComponents]);
+  }, [finalContentProcessed, markdownComponents]);
 
   const includeMessageSwitcher =
     currentMessageInd !== undefined &&
@@ -636,7 +685,20 @@ export const AIMessage = ({
                         </div>
                       </div>
                     )}
-                    {content || files ? (
+
+                    {/* Render thinking box if thinking tokens exist */}
+                    {hasThinkingTokens && thinkingContent && (
+                      <div className="mb-2 mt-1">
+                        <ThinkingBox 
+                          content={thinkingContent} 
+                          isComplete={isComplete || false} 
+                          isStreaming={!isThinkingTokenComplete || !isComplete}
+                        />
+                      </div>
+                    )}
+
+                    {/* Only show the message content once thinking is complete or if there's no thinking */}
+                    {shouldShowContent && (content || files) ? (
                       <>
                         <FileDisplay
                           setPresentingDocument={setPresentingDocument}
@@ -699,7 +761,7 @@ export const AIMessage = ({
                           <CustomTooltip showTick line content="Copy">
                             <CopyButton
                               copyAllFn={() =>
-                                copyAll(finalContent as string, markdownRef)
+                                copyAll(finalContentProcessed as string, markdownRef)
                               }
                             />
                           </CustomTooltip>
@@ -778,7 +840,7 @@ export const AIMessage = ({
                           <CustomTooltip showTick line content="Copy">
                             <CopyButton
                               copyAllFn={() =>
-                                copyAll(finalContent as string, markdownRef)
+                                copyAll(finalContentProcessed as string, markdownRef)
                               }
                             />
                           </CustomTooltip>

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

@@ -0,0 +1,305 @@
+/* ThinkingBox.css */
+:root {
+  --thinking-border-color: rgba(0, 0, 0, 0.1);
+  --thinking-bg-color: transparent;
+  --thinking-text-color: #6b7280;
+  --thinking-title-color: #374151;
+  --thinking-fade-start: rgba(249, 250, 251, 1);
+  --thinking-fade-end: rgba(249, 250, 251, 0);
+  --thinking-fade-start-rgb: 249, 250, 251;
+}
+
+.dark {
+  --thinking-border-color: rgba(255, 255, 255, 0.1);
+  --thinking-bg-color: transparent;
+  --thinking-text-color: #9ca3af;
+  --thinking-title-color: #e5e7eb;
+  --thinking-fade-start: rgba(30, 41, 59, 1);
+  --thinking-fade-end: rgba(30, 41, 59, 0);
+  --thinking-fade-start-rgb: 30, 41, 59;
+}
+
+.thinking-box {
+  width: 98%;
+  max-width: 100%;
+  margin: 0.75rem 0;
+  position: relative;
+}
+
+.thinking-box__container {
+  border: 1px solid var(--thinking-border-color);
+  border-radius: 0.75rem;
+  background-color: var(--thinking-bg-color);
+  overflow: hidden;
+  transition: all 0.2s ease-in-out;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+/* More subtle collapsed state */
+.thinking-box__container--collapsed {
+  border-color: var(--thinking-border-color);
+  opacity: 0.9;
+}
+
+/* No preview - make the bottom border curved too */
+.thinking-box__container--no-preview {
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
+/* Remove the bottom border when there's no preview */
+.thinking-box__container--no-preview .thinking-box__header {
+  border-bottom: none;
+}
+
+.thinking-box__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  user-select: none;
+  border-bottom: 1px solid var(--thinking-border-color);
+}
+
+.thinking-box__header:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.dark .thinking-box__header:hover {
+  background-color: rgba(255, 255, 255, 0.02);
+}
+
+.thinking-box__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--thinking-title-color);
+}
+
+.thinking-box__icon {
+  color: var(--thinking-text-color);
+  margin-right: 0.25rem;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.thinking-box__title-text {
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.thinking-box__timer {
+  font-size: 0.8rem;
+  color: var(--thinking-text-color);
+  margin-left: 0.25rem;
+}
+
+.thinking-box__collapse-icon {
+  color: var(--thinking-text-color);
+  display: flex;
+  align-items: center;
+}
+
+.thinking-box__content {
+  border-top: 1px solid var(--thinking-border-color);
+  padding: 1.25rem;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--thinking-text-color);
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.thinking-box__markdown {
+  font-size: 0.875rem;
+  color: var(--thinking-text-color);
+  line-height: 1.5;
+  overflow-wrap: break-word;
+}
+
+/* Preview container (collapsed state) */
+.thinking-box__preview {
+  position: relative;
+  height: 2.5rem;
+  overflow: hidden;
+  width: 100%;
+  padding: 0.15rem 0;
+  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Active animation styling - highlight active thinking */
+.thinking-box__preview--crawling {
+  height: 5rem;
+  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  border-top: 1px solid var(--thinking-border-color);
+  background-color: rgba(0, 0, 0, 0.01);
+}
+
+.dark .thinking-box__preview--crawling {
+  background-color: rgba(255, 255, 255, 0.025);
+}
+
+.thinking-box__fade-container {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Create fade effect at top and bottom */
+.thinking-box__fade-container::before,
+.thinking-box__fade-container::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0.85rem; /* Increased for more visible gradient */
+  z-index: 10;
+  pointer-events: none;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0.95;
+}
+
+/* Enhanced gradients with smoother transitions */
+.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%, 
+    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%, 
+    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%, 
+    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%, 
+    var(--thinking-fade-end) 100%
+  );
+}
+
+/* Make gradients more visible during crawling */
+.thinking-box__preview--crawling .thinking-box__fade-container::before,
+.thinking-box__preview--crawling .thinking-box__fade-container::after {
+  height: 1.5rem;
+  opacity: 0.95;
+}
+
+.thinking-box__scroll-content {
+  padding: 0.75rem 1rem;
+  height: 100%;
+  width: 100%;
+  overflow-y: hidden;
+  will-change: transform;
+  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);
+}
+
+/* Enhanced text during crawling */
+.thinking-box__preview--crawling .thinking-box__preview-text {
+  opacity: 0.98;
+  font-size: 0.75rem;
+  line-height: 1.6;
+}
+
+.thinking-box__expand-prompt {
+  display: none;
+}
+
+/* Animation for thinking indicator */
+@keyframes pulse {
+  0% { opacity: 0.5; }
+  50% { opacity: 1; }
+  100% { opacity: 0.5; }
+}
+
+/* Fade in animation */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Smooth scrolling effect */
+@keyframes scrollText {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-100%); }
+}
+
+.thinking-box__preview-text {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.7rem;
+  color: var(--thinking-text-color);
+  white-space: pre-wrap;
+  margin: 0;
+  display: block;
+  opacity: 0.85;
+  line-height: 1.4;
+  transition: all 0.3s ease;
+}
+
+/* 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);
+  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;
+}
+
+/* Enhance visibility of actual content */
+.thinking-box__preview--crawling .thinking-box__preview-text {
+  opacity: 0.98;
+  font-size: 0.75rem;
+  line-height: 1.7;
+  text-shadow: 0 0 0.1px rgba(0, 0, 0, 0.2);
+}
+
+/* Faster transition for expanding preview */
+.thinking-box__preview {
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Enhanced hover feedback for collapsed header */
+.thinking-box__container--collapsed .thinking-box__header:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.dark .thinking-box__container--collapsed .thinking-box__header:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+} 

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

@@ -0,0 +1,266 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { FiChevronDown, FiChevronUp } from "react-icons/fi";
+import { TbBrain } from "react-icons/tb";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypePrism from "rehype-prism-plus";
+import rehypeKatex from "rehype-katex";
+import "katex/dist/katex.min.css";
+import { transformLinkUri } from "@/lib/utils";
+import { handleCopy } from "./copyingUtils";
+import { cleanThinkingContent, hasPartialThinkingTokens, isThinkingComplete } from "../utils/thinkingTokens";
+import "./ThinkingBox.css";
+
+interface ThinkingBoxProps {
+  content: string;
+  isComplete: boolean;
+  isStreaming?: boolean;
+}
+
+export const ThinkingBox: React.FC<ThinkingBoxProps> = ({
+  content,
+  isComplete = false,
+  isStreaming = false,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [elapsedTime, setElapsedTime] = useState(0);
+  
+  // DOM refs
+  const markdownRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  
+  // Timing refs
+  const startTimeRef = useRef<number | null>(null);
+  
+  // Content tracking refs
+  const previousContentRef = useRef<string>("");
+  const contentLinesRef = useRef<string[]>([]);
+  const lastLineCountRef = useRef<number>(0);
+  
+  // Token state tracking - separate from streaming state
+  const hasOpeningTokenRef = useRef<boolean>(false);
+  const hasClosingTokenRef = useRef<boolean>(false);
+  const thinkingStoppedTimeRef = useRef<number | null>(null); // Store the exact time when thinking stops
+  
+  // Smooth scrolling state
+  const targetScrollTopRef = useRef<number>(0);
+  const currentScrollTopRef = useRef<number>(0);
+  const scrollAnimationRef = useRef<number | null>(null);
+  
+  // Clean the thinking content
+  const cleanedThinkingContent = cleanThinkingContent(content);
+  
+  // Smooth scroll to latest content
+  const scrollToLatestContent = () => {
+    if (!scrollContainerRef.current) {
+      scrollAnimationRef.current = null;
+      return;
+    }
+    
+    const container = scrollContainerRef.current;
+    
+    // Calculate how far to move this frame (15% of remaining distance)
+    const remainingDistance = targetScrollTopRef.current - currentScrollTopRef.current;
+    const step = remainingDistance * 0.15;
+    
+    // Update position
+    currentScrollTopRef.current += step;
+    container.scrollTop = Math.round(currentScrollTopRef.current);
+    
+    // Continue animation if we're not close enough yet
+    if (Math.abs(remainingDistance) > 1) {
+      scrollAnimationRef.current = requestAnimationFrame(scrollToLatestContent);
+    } else {
+      scrollAnimationRef.current = null;
+    }
+  };
+  
+  // Detect thinking token states
+  useEffect(() => {
+    // For past messages with complete thinking tokens, initialize both as true
+    if (!hasOpeningTokenRef.current && !hasClosingTokenRef.current && (isComplete || isThinkingComplete(content))) {
+      hasOpeningTokenRef.current = true;
+      hasClosingTokenRef.current = true;
+      
+      // For past messages, set the elapsed time based on content length as an approximation
+      const approximateTimeInSeconds = Math.max(
+        3, // Minimum 3 seconds
+        Math.min(
+          Math.floor(cleanedThinkingContent.length / 30), // ~30 chars per second as a rough estimate
+          120 // Cap at 2 minutes
+        )
+      );
+      setElapsedTime(approximateTimeInSeconds);
+      return;
+    }
+    
+    // Check if we have the opening token
+    if (!hasOpeningTokenRef.current && hasPartialThinkingTokens(content)) {
+      hasOpeningTokenRef.current = true;
+      startTimeRef.current = Date.now(); // Only set start time when thinking actually begins
+    }
+    
+    // Check if we have the closing token
+    if (hasOpeningTokenRef.current && !hasClosingTokenRef.current && isThinkingComplete(content)) {
+      hasClosingTokenRef.current = true;
+      thinkingStoppedTimeRef.current = Date.now(); // Record exactly when thinking stopped
+      
+      // Immediately update elapsed time to final value
+      const finalElapsedTime = Math.floor((thinkingStoppedTimeRef.current - startTimeRef.current!) / 1000);
+      setElapsedTime(finalElapsedTime);
+    }
+  }, [content, cleanedThinkingContent, isComplete]);
+  
+  // Track content changes and new lines
+  useEffect(() => {
+    // Skip animation for past messages that are already complete
+    if (hasClosingTokenRef.current && (isComplete || isThinkingComplete(content))) {
+      // For past messages, just store the content lines without animating
+      const currentLines = cleanedThinkingContent.split('\n').filter(line => line.trim());
+      contentLinesRef.current = currentLines;
+      previousContentRef.current = cleanedThinkingContent;
+      lastLineCountRef.current = currentLines.length;
+      return;
+    }
+    
+    // Don't process if thinking is not active
+    if (!hasOpeningTokenRef.current || hasClosingTokenRef.current) return;
+    
+    // Process content changes if we have new content
+    if (cleanedThinkingContent !== previousContentRef.current) {
+      const currentLines = cleanedThinkingContent.split('\n').filter(line => line.trim());
+      contentLinesRef.current = currentLines;
+      
+      // If we have new lines, update scroll position to show them
+      if (currentLines.length > lastLineCountRef.current && scrollContainerRef.current) {
+        // Calculate position to show the latest content
+        const container = scrollContainerRef.current;
+        targetScrollTopRef.current = container.scrollHeight - container.clientHeight;
+        
+        // Start smooth scroll animation if not already running
+        if (!scrollAnimationRef.current) {
+          currentScrollTopRef.current = container.scrollTop;
+          scrollToLatestContent();
+        }
+      }
+      
+      lastLineCountRef.current = currentLines.length;
+      previousContentRef.current = cleanedThinkingContent;
+    }
+  }, [cleanedThinkingContent, content, isComplete]);
+  
+  // Update elapsed time
+  useEffect(() => {
+    // Only count time while thinking is active and we have a start time
+    if (!hasOpeningTokenRef.current || hasClosingTokenRef.current || startTimeRef.current === null) return;
+    
+    const timer = setInterval(() => {
+      // If thinking has stopped, use the final time
+      if (thinkingStoppedTimeRef.current) {
+        setElapsedTime(Math.floor((thinkingStoppedTimeRef.current - startTimeRef.current!) / 1000));
+        return;
+      }
+      
+      // Otherwise, use the current time
+      setElapsedTime(Math.floor((Date.now() - startTimeRef.current!) / 1000));
+    }, 1000);
+    
+    return () => clearInterval(timer);
+  }, []);
+  
+  // Clean up animations on unmount
+  useEffect(() => {
+    return () => {
+      if (scrollAnimationRef.current) {
+        cancelAnimationFrame(scrollAnimationRef.current);
+        scrollAnimationRef.current = null;
+      }
+    };
+  }, []);
+  
+  // Get suitable preview content for collapsed view
+  const getPeekContent = () => {
+    const lines = contentLinesRef.current;
+    
+    if (lines.length <= 3) return lines.join('\n');
+    
+    // Show a combination of first and last lines with preference to recent content
+    const maxLines = 7;
+    const startIndex = Math.max(0, lines.length - maxLines);
+    const endIndex = lines.length;
+    
+    const previewLines = lines.slice(startIndex, endIndex);
+    return previewLines.join('\n');
+  };
+  
+  // Don't render anything if content is empty 
+  if (!cleanedThinkingContent.trim()) return null;
+  
+  // Determine if thinking is active (has opening token but not closing token)
+  const isThinkingActive = hasOpeningTokenRef.current && !hasClosingTokenRef.current;
+  
+  // Determine if we should show the preview section
+  const shouldShowPreview = !isExpanded && cleanedThinkingContent.trim().length > 0;
+  const hasPreviewContent = getPeekContent().trim().length > 0;
+  
+  return (
+    <div className="thinking-box my-4">
+      <div className={`thinking-box__container ${!isExpanded && "thinking-box__container--collapsed"} ${(!shouldShowPreview || !hasPreviewContent) && "thinking-box__container--no-preview"}`}>
+        <div 
+          className="thinking-box__header"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <div className="thinking-box__title">
+            <TbBrain className={`thinking-box__icon ${isThinkingActive ? 'thinking-box__icon--active' : ''}`} />
+            <span className="thinking-box__title-text">
+              {isThinkingActive ? "Thinking" : "Thought for"}
+            </span>
+            <span className="thinking-box__timer">
+              {elapsedTime}s
+            </span>
+          </div>
+          <div className="thinking-box__collapse-icon">
+            {isExpanded ? <FiChevronUp size={16} /> : <FiChevronDown size={16} />}
+          </div>
+        </div>
+        
+        {isExpanded ? (
+          <div className="thinking-box__content">
+            <div
+              ref={markdownRef}
+              className="thinking-box__markdown focus:outline-none cursor-text select-text"
+              onCopy={(e) => handleCopy(e, markdownRef)}
+            >
+              <ReactMarkdown
+                className="prose dark:prose-invert max-w-full"
+                remarkPlugins={[remarkGfm, remarkMath]}
+                rehypePlugins={[[rehypePrism, { ignoreMissing: true }], rehypeKatex]}
+                urlTransform={transformLinkUri}
+              >
+                {cleanedThinkingContent}
+              </ReactMarkdown>
+            </div>
+          </div>
+        ) : (
+          shouldShowPreview && hasPreviewContent && (
+            <div className={`thinking-box__preview ${isThinkingActive ? 'thinking-box__preview--crawling' : ''}`}>
+              <div className="thinking-box__fade-container">
+                <div 
+                  ref={scrollContainerRef}
+                  className="thinking-box__scroll-content"
+                >
+                  <pre className="thinking-box__preview-text">{getPeekContent()}</pre>
+                </div>
+              </div>
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ThinkingBox;

web/src/app/chat/utils/thinkingTokens.ts

@@ -0,0 +1,122 @@
+/**
+ * Utility functions to handle thinking tokens in AI messages
+ */
+
+/**
+ * Check if a message contains complete thinking tokens
+ */
+export function hasCompletedThinkingTokens(content: string | JSX.Element): boolean {
+  if (typeof content !== 'string') return false;
+  
+  return /<think>[\s\S]*?<\/think>/.test(content) || 
+         /<thinking>[\s\S]*?<\/thinking>/.test(content);
+}
+
+/**
+ * Check if a message contains partial thinking tokens (streaming)
+ */
+export function hasPartialThinkingTokens(content: string | JSX.Element): boolean {
+  if (typeof content !== 'string') return false;
+  
+  // Count opening and closing tags
+  const thinkOpenCount = (content.match(/<think>/g) || []).length;
+  const thinkCloseCount = (content.match(/<\/think>/g) || []).length;
+  const thinkingOpenCount = (content.match(/<thinking>/g) || []).length;
+  const thinkingCloseCount = (content.match(/<\/thinking>/g) || []).length;
+  
+  // Return true if we have any unmatched tags
+  return thinkOpenCount > thinkCloseCount || thinkingOpenCount > thinkingCloseCount;
+}
+
+/**
+ * Extract thinking content from a message
+ */
+export function extractThinkingContent(content: string | JSX.Element): string {
+  if (typeof content !== 'string') return '';
+  
+  // For complete thinking tags, extract all sections
+  const completeThinkRegex = /<think>[\s\S]*?<\/think>/g;
+  const completeThinkingRegex = /<thinking>[\s\S]*?<\/thinking>/g;
+  
+  const thinkMatches = Array.from(content.matchAll(completeThinkRegex));
+  const thinkingMatches = Array.from(content.matchAll(completeThinkingRegex));
+  
+  if (thinkMatches.length > 0 || thinkingMatches.length > 0) {
+    // Combine all matches and sort by their position in the original string
+    const allMatches = [...thinkMatches, ...thinkingMatches]
+      .sort((a, b) => (a.index || 0) - (b.index || 0));
+    return allMatches.map(match => match[0]).join('\n');
+  }
+  
+  // For partial thinking tokens (streaming)
+  if (hasPartialThinkingTokens(content)) {
+    // Find the last opening tag position
+    const lastThinkPos = content.lastIndexOf('<think>');
+    const lastThinkingPos = content.lastIndexOf('<thinking>');
+    
+    // Use the position of whichever tag appears last
+    const startPos = Math.max(lastThinkPos, lastThinkingPos);
+    
+    if (startPos >= 0) {
+      // Extract everything from the last opening tag to the end
+      return content.substring(startPos);
+    }
+  }
+  
+  return '';
+}
+
+/**
+ * Check if thinking tokens are complete
+ */
+export function isThinkingComplete(content: string | JSX.Element): boolean {
+  if (typeof content !== 'string') return false;
+  
+  // Count opening and closing tags
+  const thinkOpenCount = (content.match(/<think>/g) || []).length;
+  const thinkCloseCount = (content.match(/<\/think>/g) || []).length;
+  const thinkingOpenCount = (content.match(/<thinking>/g) || []).length;
+  const thinkingCloseCount = (content.match(/<\/thinking>/g) || []).length;
+  
+  // All tags must be matched
+  return thinkOpenCount === thinkCloseCount && thinkingOpenCount === thinkingCloseCount;
+}
+
+/**
+ * Remove thinking tokens from content
+ */
+export function removeThinkingTokens(content: string | JSX.Element): string | JSX.Element {
+  if (typeof content !== 'string') return content;
+  
+  // First, remove complete thinking blocks
+  let result = content.replace(/<think>[\s\S]*?<\/think>/g, '');
+  result = result.replace(/<thinking>[\s\S]*?<\/thinking>/g, '');
+  
+  // Handle case where there's an incomplete thinking token at the end
+  if (hasPartialThinkingTokens(result)) {
+    // Find the last opening tag position
+    const lastThinkPos = result.lastIndexOf('<think>');
+    const lastThinkingPos = result.lastIndexOf('<thinking>');
+    
+    // Use the position of whichever tag appears last
+    const startPos = Math.max(lastThinkPos, lastThinkingPos);
+    
+    if (startPos >= 0) {
+      // Only keep content before the last opening tag
+      result = result.substring(0, startPos);
+    }
+  }
+  
+  return result.trim();
+}
+
+// /**
+//  * Clean the extracted thinking content (remove tags)
+//  */
+export function cleanThinkingContent(thinkingContent: string): string {
+  if (!thinkingContent) return '';
+  
+  return thinkingContent
+    .replace(/<think>|<\/think>|<thinking>|<\/thinking>/g, '')
+    .trim();
+}