feat(webview): add support for <think> tags in Chat Message

lib/shared/src/sourcegraph-api/completions/CompletionsResponseBuilder.ts

@@ -8,12 +8,39 @@ export class CompletionsResponseBuilder {
     public totalCompletion = ''
     constructor(public readonly apiVersion: number) {}
     public nextCompletion(completion: string | undefined, deltaText: string | undefined): string {
+        const thinkingText = this.getThinkingText()
         if (this.apiVersion >= 2) {
             this.totalCompletion += deltaText ?? ''
-            return this.totalCompletion
+        } else {
+            this.totalCompletion = completion ?? ''
         }
-        this.totalCompletion = completion ?? ''
-        return this.totalCompletion
+        return thinkingText + this.totalCompletion
+    }
+
+    private readonly thinkingBuffer: string[] = []
+    /**
+     * Processes and accumulates thinking steps during the completion stream.
+     * Thinking steps must start at the beginning of completion and are enclosed in <think> tags.
+     * When the completion starts streaming, the previous <think> tag is closed.
+     *
+     * @param deltaThinking - The incremental thinking text to be added
+     * @returns The formatted thinking text wrapped in XML tags
+     */
+    public nextThinking(deltaThinking?: string): string {
+        if (deltaThinking) {
+            this.thinkingBuffer.push(deltaThinking)
+        }
+        return this.getThinkingText()
+    }
+    /**
+     * Generates the formatted thinking text by combining all thinking steps.
+     * Wraps the combined thinking text in <think> tags and adds a newline if content exists.
+     *
+     * @returns Formatted thinking text with XML tags, or empty string if no thinking steps exist
+     */
+    private getThinkingText(): string {
+        const thinking = this.thinkingBuffer.join('')
+        return thinking ? `<think>${thinking}</think>\n` : ''
     }
 
     public static fromUrl(url: string): CompletionsResponseBuilder {

lib/shared/src/sourcegraph-api/completions/parse.ts

@@ -33,6 +33,7 @@ function parseJSON<T>(data: string): T | Error {
 export interface CompletionData {
     completion?: string
     deltaText?: string
+    delta_thinking?: string
     stopReason?: string
 }
 
@@ -56,6 +57,9 @@ function parseEventData(
             if (isError(data)) {
                 return data
             }
+            // Process the delta_thinking and deltaText separately.
+            // The thinking text will be added to the completion text.
+            builder.nextThinking(data.delta_thinking)
             // Internally, don't handle delta text yet and there's limited value
             // in passing around deltas anyways so we concatenate them here.
             const completion = builder.nextCompletion(data.completion, data.deltaText)

lib/shared/src/sourcegraph-api/completions/types.ts

@@ -40,6 +40,7 @@ export interface PromptTokensDetails {
 
 export interface CompletionResponse {
     completion: string
+    thinking?: string
     stopReason?: string
 }
 

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

@@ -3,6 +3,7 @@ import type React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { clsx } from 'clsx'
+import { PlusIcon } from 'lucide-react'
 import type { FixupTaskID } from '../../../src/non-stop/FixupTask'
 import { CodyTaskState } from '../../../src/non-stop/state'
 import { type ClientActionListener, useClientActionListener } from '../../client/clientState'
@@ -39,6 +40,47 @@ interface ChatMessageContentProps {
     className?: string
 }
 
+interface StreamingContent {
+    displayContent: string
+    thinkContent: string
+    hasThinkTag: boolean
+}
+
+const extractThinkContent = (content: string): StreamingContent => {
+    const thinkRegex = /^<think>([\s\S]*?)<\/think>/g
+    const thinkMatches = [...content.matchAll(thinkRegex)]
+
+    // Check if content has an unclosed think tag
+    const lastThinkOpenIndex = content.lastIndexOf('<think>')
+    const lastThinkCloseIndex = content.lastIndexOf('</think>')
+    const hasOpenThinkTag = lastThinkOpenIndex > lastThinkCloseIndex
+
+    // Collect all think content, including partial content from unclosed tag
+    let thinkContent = thinkMatches
+        .map(match => match[1].trim())
+        .filter(Boolean)
+        .join('\n\n')
+
+    // If there's an open think tag, capture everything after it
+    if (hasOpenThinkTag) {
+        const unclosedContent = content.slice(lastThinkOpenIndex + 7)
+        thinkContent = thinkContent ? `${thinkContent}\n\n${unclosedContent}` : unclosedContent
+    }
+
+    // Remove complete think tags from display content
+    let displayContent = content.replace(thinkRegex, '')
+    // Remove any unclosed think tag and its content
+    if (hasOpenThinkTag) {
+        displayContent = displayContent.slice(0, lastThinkOpenIndex)
+    }
+
+    return {
+        displayContent,
+        thinkContent,
+        hasThinkTag: hasOpenThinkTag,
+    }
+}
+
 /**
  * A component presenting the content of a chat message.
  */
@@ -204,10 +246,41 @@ export const ChatMessageContent: React.FunctionComponent<ChatMessageContentProps
         smartApplyStates,
     ])
 
+    const { displayContent, thinkContent, hasThinkTag } = useMemo(
+        () => extractThinkContent(displayMarkdown),
+        [displayMarkdown]
+    )
+
     return (
         <div ref={rootRef} data-testid="chat-message-content">
+            {thinkContent.length > 0 && (
+                <details
+                    open
+                    className="tw-container tw-mb-7 tw-border tw-border-gray-500/20 dark:tw-border-gray-600/40 tw-rounded-lg tw-overflow-hidden tw-backdrop-blur-sm"
+                    title="Thinking / Reasoning Space."
+                >
+                    <summary
+                        className={clsx(
+                            'tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-bg-gray-100/50 dark:tw-bg-gray-800/80 tw-cursor-pointer hover:tw-bg-gray-200/50 dark:hover:tw-bg-gray-700/50 tw-select-none tw-transition-colors',
+                            {
+                                'tw-animate-pulse': hasThinkTag,
+                            }
+                        )}
+                    >
+                        <PlusIcon size={16} className="tw-text-gray-500 dark:tw-text-gray-400" />
+                        <span className="tw-font-medium tw-text-gray-600 dark:tw-text-gray-300">
+                            Thinking...
+                        </span>
+                    </summary>
+                    <div className="tw-px-4 tw-py-3 tw-mx-4 tw-opacity-70 hover:tw-opacity-100">
+                        <div className="tw-text-sm tw-prose dark:tw-prose-invert tw-max-w-none tw-leading-relaxed tw-text-base/7">
+                            {thinkContent}
+                        </div>
+                    </div>
+                </details>
+            )}
             <MarkdownFromCody className={clsx(styles.content, className)}>
-                {displayMarkdown}
+                {displayContent}
             </MarkdownFromCody>
         </div>
     )

vscode/webviews/components/MarkdownFromCody.tsx

@@ -53,6 +53,7 @@ const ALLOWED_ELEMENTS = [
     'h5',
     'h6',
     'br',
+    'think',
 ]
 
 function defaultUrlProcessor(url: string): string {