feat(completions): add support for thinking steps in completion respo…

…nses

This change adds support for streaming thinking steps in completion responses, allowing Cody to show its reasoning process while generating responses. The thinking steps are wrapped in XML tags and displayed in a collapsible UI element.

Key changes:
- Add thinking buffer and handling in CompletionsResponseBuilder
- Update UI to show thinking steps in a collapsible details element
- Process delta_thinking in completion response parsing
- Increase supported API versions up to v8
- Update types to include thinking-related fields

The thinking steps are designed to appear at the beginning of completions and are properly formatted with XML tags for consistent display.

Test plan:
- Verify thinking steps appear in a collapsible UI element
- Confirm proper handling of both complete and incomplete think tags
- Test streaming behavior with thinking steps
- Validate backwards compatibility with older API versions

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
 }
 

lib/shared/src/sourcegraph-api/siteVersion.ts

@@ -113,17 +113,17 @@ export function checkVersion({
     return (insider && isInsiderBuild) || semver.gte(currentVersion, minimumVersion)
 }
 
-type CodyApiVersion = 0 | 1 | 2
+type CodyApiVersion = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
 
 /** @internal Exported for testing only. */
 export function inferCodyApiVersion(version: string, isDotCom: boolean): CodyApiVersion {
     const parsedVersion = semver.valid(version)
     const isLocalBuild = parsedVersion === '0.0.0'
 
-    if (isDotCom || isLocalBuild) {
+    if (isDotCom || isLocalBuild || version.length > 12) {
         // The most recent version is api-version=2, which was merged on 2024-09-11
         // https://github.com/sourcegraph/sourcegraph/pull/470
-        return 2
+        return 8
     }
 
     // On Cloud deployments from main, the version identifier will use a format

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'
@@ -46,35 +47,37 @@ interface StreamingContent {
 }
 
 const extractThinkContent = (content: string): StreamingContent => {
-    const thinkRegex = /<think>([\s\S]*?)<\/think>/g
+    const thinkRegex = /^<think>([\s\S]*?)<\/think>/g
     const thinkMatches = [...content.matchAll(thinkRegex)]
-    
+
     // Check if content has an unclosed think tag
-    const hasOpenThinkTag = content.includes('<think>') && 
-        (content.lastIndexOf('<think>') > content.lastIndexOf('</think>'))
-
+    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 lastThinkContent = content.slice(content.lastIndexOf('<think>') + 7)
-        thinkContent = thinkContent ? `${thinkContent}\n\n${lastThinkContent}` : lastThinkContent
+        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, displayContent.lastIndexOf('<think>'))
+        displayContent = displayContent.slice(0, lastThinkOpenIndex)
     }
 
-    return { 
-        displayContent, 
+    return {
+        displayContent,
         thinkContent,
-        hasThinkTag: thinkMatches.length > 0 || hasOpenThinkTag
+        hasThinkTag: thinkMatches.length > 0 || hasOpenThinkTag,
     }
 }
 
@@ -251,49 +254,21 @@ export const ChatMessageContent: React.FunctionComponent<ChatMessageContentProps
     return (
         <div ref={rootRef} data-testid="chat-message-content">
             {hasThinkTag && (
-                <details 
-                    open 
-                    className={clsx(
-                        "tw-container tw-mb-4",
-                        "tw-border tw-border-gray-500/20 dark:tw-border-gray-600/40",
-                        "tw-rounded-lg tw-overflow-hidden",
-                        "tw-bg-gray-50/50 dark:tw-bg-gray-800/50",
-                        "tw-backdrop-blur-sm"
-                    )}
+                <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"
-                    )}>
-                        <svg 
-                            className="tw-w-4 tw-h-4 tw-text-gray-500 dark:tw-text-gray-400 tw-animate-pulse" 
-                            viewBox="0 0 24 24" 
-                            fill="none" 
-                            stroke="currentColor" 
-                            strokeWidth="2"
-                        >
-                            <path 
-                                strokeLinecap="round" 
-                                strokeLinejoin="round" 
-                                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"
-                            />
-                        </svg>
-                        <span className="tw-text-sm tw-font-medium tw-text-gray-600 dark:tw-text-gray-300">
+                    <summary className="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">
+                        <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">
-                        <MarkdownFromCody 
-                            className={clsx(
-                                "tw-text-sm tw-text-gray-600 dark:tw-text-gray-300",
-                                "tw-prose dark:tw-prose-invert tw-max-w-none",
-                                "tw-leading-relaxed"
-                            )}
-                        >
+                    <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}
-                        </MarkdownFromCody>
+                        </div>
                     </div>
                 </details>
             )}