@theia/ai-chat-ui 1.63.0-next.52 → 1.63.0

package/src/browser/chat-input-widget.tsx

@@ -20,19 +20,21 @@ import {
 import { ChangeSetDecoratorService } from '@theia/ai-chat/lib/browser/change-set-decorator-service';
 import { ImageContextVariable } from '@theia/ai-chat/lib/common/image-context-variable';
 import { AIVariableResolutionRequest } from '@theia/ai-core';
-import { FrontendVariableService } from '@theia/ai-core/lib/browser';
-import { DisposableCollection, InMemoryResources, URI, nls } from '@theia/core';
+import { AgentCompletionNotificationService, FrontendVariableService, AIActivationService } from '@theia/ai-core/lib/browser';
+import { DisposableCollection, Emitter, InMemoryResources, URI, nls } from '@theia/core';
 import { ContextMenuRenderer, LabelProvider, Message, OpenerService, ReactWidget } from '@theia/core/lib/browser';
 import { Deferred } from '@theia/core/lib/common/promise-util';
 import { inject, injectable, optional, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
-import { IMouseEvent } from '@theia/monaco-editor-core';
+import { IMouseEvent, Range } from '@theia/monaco-editor-core';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
 import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
 import { ChangeSetActionRenderer, ChangeSetActionService } from './change-set-actions/change-set-action-service';
 import { ChatInputAgentSuggestions } from './chat-input-agent-suggestions';
 import { CHAT_VIEW_LANGUAGE_EXTENSION } from './chat-view-language-contribution';
 import { ContextVariablePicker } from './context-variable-picker';
+import { TASK_CONTEXT_VARIABLE } from '@theia/ai-chat/lib/browser/task-context-variable';
+import { IModelDeltaDecoration } from '@theia/monaco-editor-core/esm/vs/editor/common/model';
 
 type Query = (query: string) => Promise<void>;
 type Unpin = () => void;
@@ -78,6 +80,9 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(ChangeSetActionService)
     protected readonly changeSetActionService: ChangeSetActionService;
 
+    @inject(AgentCompletionNotificationService)
+    protected readonly agentNotificationService: AgentCompletionNotificationService;
+
     @inject(ChangeSetDecoratorService)
     protected readonly changeSetDecoratorService: ChangeSetDecoratorService;
 
@@ -87,12 +92,16 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(ChatService)
     protected readonly chatService: ChatService;
 
+    @inject(AIActivationService)
+    protected readonly aiActivationService: AIActivationService;
+
     protected editorRef: SimpleMonacoEditor | undefined = undefined;
     protected readonly editorReady = new Deferred<void>();
 
     protected isEnabled = false;
+    protected heightInLines = 12;
 
-    private _branch?: ChatHierarchyBranch;
+    protected _branch?: ChatHierarchyBranch;
     set branch(branch: ChatHierarchyBranch | undefined) {
         if (this._branch !== branch) {
             this._branch = branch;
@@ -100,34 +109,34 @@ export class AIChatInputWidget extends ReactWidget {
         }
     }
 
-    private _onQuery: Query;
+    protected _onQuery: Query;
     set onQuery(query: Query) {
         this._onQuery = query;
     }
-    private _onUnpin: Unpin;
+    protected _onUnpin: Unpin;
     set onUnpin(unpin: Unpin) {
         this._onUnpin = unpin;
     }
-    private _onCancel: Cancel;
+    protected _onCancel: Cancel;
     set onCancel(cancel: Cancel) {
         this._onCancel = cancel;
     }
-    private _onDeleteChangeSet: DeleteChangeSet;
+    protected _onDeleteChangeSet: DeleteChangeSet;
     set onDeleteChangeSet(deleteChangeSet: DeleteChangeSet) {
         this._onDeleteChangeSet = deleteChangeSet;
     }
-    private _onDeleteChangeSetElement: DeleteChangeSetElement;
+    protected _onDeleteChangeSetElement: DeleteChangeSetElement;
     set onDeleteChangeSetElement(deleteChangeSetElement: DeleteChangeSetElement) {
         this._onDeleteChangeSetElement = deleteChangeSetElement;
     }
 
-    private _initialValue?: string;
+    protected _initialValue?: string;
     set initialValue(value: string | undefined) {
         this._initialValue = value;
     }
 
     protected onDisposeForChatModel = new DisposableCollection();
-    private _chatModel: ChatModel;
+    protected _chatModel: ChatModel;
     set chatModel(chatModel: ChatModel) {
         this.onDisposeForChatModel.dispose();
         this.onDisposeForChatModel = new DisposableCollection();
@@ -139,17 +148,25 @@ export class AIChatInputWidget extends ReactWidget {
         this._chatModel = chatModel;
         this.update();
     }
-    private _pinnedAgent: ChatAgent | undefined;
+    protected _pinnedAgent: ChatAgent | undefined;
     set pinnedAgent(pinnedAgent: ChatAgent | undefined) {
         this._pinnedAgent = pinnedAgent;
         this.update();
     }
 
+    protected onDidResizeEmitter = new Emitter<void>();
+    readonly onDidResize = this.onDidResizeEmitter.event;
+
     @postConstruct()
     protected init(): void {
         this.id = AIChatInputWidget.ID;
         this.title.closable = false;
         this.toDispose.push(this.resources.add(this.getResourceUri(), ''));
+        this.toDispose.push(this.aiActivationService.onDidChangeActiveStatus(() => {
+            this.setEnabled(this.aiActivationService.isActive);
+        }));
+        this.toDispose.push(this.onDidResizeEmitter);
+        this.setEnabled(this.aiActivationService.isActive);
         this.update();
     }
 
@@ -162,6 +179,18 @@ export class AIChatInputWidget extends ReactWidget {
         });
     }
 
+    protected async handleAgentCompletion(request: ChatRequestModel): Promise<void> {
+        try {
+            const agentId = request.agentId;
+
+            if (agentId) {
+                await this.agentNotificationService.showCompletionNotification(agentId);
+            }
+        } catch (error) {
+            console.error('Failed to handle agent completion notification:', error);
+        }
+    }
+
     protected getResourceUri(): URI {
         return new URI(`ai-chat:/input.${CHAT_VIEW_LANGUAGE_EXTENSION}`);
     }
@@ -187,12 +216,14 @@ export class AIChatInputWidget extends ReactWidget {
                 onDragOver={this.onDragOver.bind(this)}
                 onDrop={this.onDrop.bind(this)}
                 onPaste={this.onPaste.bind(this)}
+                onEscape={this.onEscape.bind(this)}
                 onDeleteChangeSet={this._onDeleteChangeSet.bind(this)}
                 onDeleteChangeSetElement={this._onDeleteChangeSetElement.bind(this)}
                 onAddContextElement={this.addContextElement.bind(this)}
                 onDeleteContextElement={this.deleteContextElement.bind(this)}
                 onOpenContextElement={this.openContextElement.bind(this)}
                 context={this.getContext()}
+                onAgentCompletion={this.handleAgentCompletion.bind(this)}
                 chatModel={this._chatModel}
                 pinnedAgent={this._pinnedAgent}
                 editorProvider={this.editorProvider}
@@ -216,11 +247,13 @@ export class AIChatInputWidget extends ReactWidget {
                 currentRequest={currentRequest}
                 isEditing={isEditing}
                 pending={pending}
+                heightInLines={this.heightInLines}
                 onResponseChanged={() => {
                     if (isPending() !== pending) {
                         this.update();
                     }
                 }}
+                onResize={() => this.onDidResizeEmitter.fire()}
             />
         );
     }
@@ -279,6 +312,10 @@ export class AIChatInputWidget extends ReactWidget {
         });
     }
 
+    protected onEscape(): void {
+        // No op
+    }
+
     protected async openContextElement(request: AIVariableResolutionRequest): Promise<void> {
         const session = this.chatService.getSessions().find(candidate => candidate.model.id === this._chatModel.id);
         const context = { session };
@@ -333,7 +370,9 @@ interface ChatInputProperties {
     onDeleteChangeSetElement: (sessionId: string, uri: URI) => void;
     onAddContextElement: () => void;
     onDeleteContextElement: (index: number) => void;
+    onEscape: () => void;
     onOpenContextElement: OpenContextElement;
+    onAgentCompletion: (request: ChatRequestModel) => void;
     context?: readonly AIVariableResolutionRequest[];
     isEnabled?: boolean;
     chatModel: ChatModel;
@@ -355,9 +394,16 @@ interface ChatInputProperties {
     currentRequest?: ChatRequestModel;
     isEditing: boolean;
     pending: boolean;
+    heightInLines?: number;
     onResponseChanged: () => void;
+    onResize: () => void;
 }
 
+// Utility to check if we have task context in the chat model
+const hasTaskContext = (chatModel: ChatModel): boolean => chatModel.context.getVariables().some(variable =>
+    variable.variable?.id === TASK_CONTEXT_VARIABLE.id
+);
+
 const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInputProperties) => {
     const onDeleteChangeSet = () => props.onDeleteChangeSet(props.chatModel.id);
     const onDeleteChangeSetElement = (uri: URI) => props.onDeleteChangeSetElement(props.chatModel.id, uri);
@@ -381,6 +427,17 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     // eslint-disable-next-line no-null/no-null
     const containerRef = React.useRef<HTMLDivElement>(null);
 
+    // On the first request of the chat, if the chat has a task context and a pinned
+    // agent, show a "Perform this task." placeholder which is the message to send by default
+    const isFirstRequest = props.chatModel.getRequests().length === 0;
+    const shouldUseTaskPlaceholder = isFirstRequest && props.pinnedAgent && hasTaskContext(props.chatModel);
+    const taskPlaceholder = nls.localize('theia/ai/chat-ui/performThisTask', 'Perform this task.');
+    const placeholderText = !props.isEnabled
+        ? nls.localize('theia/ai/chat-ui/aiDisabled', 'AI features are disabled')
+        : shouldUseTaskPlaceholder
+            ? taskPlaceholder
+            : nls.localizeByDefault('Ask a question');
+
     // Handle paste events on the container
     const handlePaste = React.useCallback((event: ClipboardEvent) => {
         props.onPaste(event);
@@ -403,7 +460,8 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         const createInputElement = async () => {
             const paddingTop = 6;
             const lineHeight = 20;
-            const maxHeight = 240;
+            const maxHeightPx = (props.heightInLines ?? 12) * lineHeight;
+
             const editor = await props.editorProvider.createSimpleInline(uri, editorContainerRef.current!, {
                 language: CHAT_VIEW_LANGUAGE_EXTENSION,
                 // Disable code lens, inlay hints and hover support to avoid console errors from other contributions
@@ -438,12 +496,17 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             if (editorContainerRef.current) {
                 editorContainerRef.current.style.overflowY = 'auto'; // ensure vertical scrollbar
                 editorContainerRef.current.style.height = (lineHeight + (2 * paddingTop)) + 'px';
+
+                editorContainerRef.current.addEventListener('wheel', e => {
+                    // Prevent parent from scrolling
+                    e.stopPropagation();
+                }, { passive: false });
             }
 
             const updateEditorHeight = () => {
                 if (editorContainerRef.current) {
                     const contentHeight = editor.getControl().getContentHeight() + paddingTop;
-                    editorContainerRef.current.style.height = `${Math.min(contentHeight, maxHeight)}px`;
+                    editorContainerRef.current.style.height = `${Math.min(contentHeight, maxHeightPx)}px`;
                 }
             };
 
@@ -453,7 +516,10 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                 updateEditorHeight();
                 handleOnChange();
             });
-            const resizeObserver = new ResizeObserver(updateEditorHeight);
+            const resizeObserver = new ResizeObserver(() => {
+                updateEditorHeight();
+                props.onResize();
+            });
             if (editorContainerRef.current) {
                 resizeObserver.observe(editorContainerRef.current);
             }
@@ -465,12 +531,46 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                 props.contextMenuCallback(e.event)
             );
 
+            const updateLineCounts = () => {
+                // We need the line numbers to allow scrolling by using the keyboard
+                const model = editor.getControl().getModel()!;
+                const lineCount = model.getLineCount();
+                const decorations: IModelDeltaDecoration[] = [];
+
+                for (let lineNumber = 1; lineNumber <= lineCount; lineNumber++) {
+                    decorations.push({
+                        range: new Range(lineNumber, 1, lineNumber, 1),
+                        options: {
+                            description: `line-number-${lineNumber}`,
+                            isWholeLine: false,
+                            className: `line-number-${lineNumber}`,
+                        }
+                    });
+                }
+
+                const lineNumbers = model.getAllDecorations().filter(predicate => predicate.options.description?.startsWith('line-number-'));
+                editor.getControl().removeDecorations(lineNumbers.map(d => d.id));
+                editor.getControl().createDecorationsCollection(decorations);
+            };
+
+            editor.getControl().getModel()?.onDidChangeContent(() => {
+                updateLineCounts();
+            });
+
+            editor.getControl().onDidChangeCursorPosition(e => {
+                const lineNumber = e.position.lineNumber;
+                const line = editor.getControl().getDomNode()?.querySelector(`.line-number-${lineNumber}`);
+                line?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
+            });
+
             editorRef.current = editor;
             props.setEditorRef(editor);
 
             if (props.initialValue) {
                 setValue(props.initialValue);
             }
+
+            updateLineCounts();
         };
         createInputElement();
 
@@ -502,6 +602,15 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                     onDeleteChangeSetElement
                 ));
             }
+            if (event.kind === 'addRequest') {
+                // Listen for when this request's response becomes complete
+                const responseListener = event.request.response.onDidChange(() => {
+                    if (event.request.response.isComplete) {
+                        props.onAgentCompletion(event.request);
+                        responseListener.dispose(); // Clean up the listener once notification is sent
+                    }
+                });
+            }
         });
         return () => {
             listener.dispose();
@@ -536,18 +645,21 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         }
     }, [editorRef]);
 
+    // Without user input, if we can default to "Perform this task.", do so
     const submit = React.useCallback(function submit(value: string): void {
-        if (!value || value.trim().length === 0) {
+        let effectiveValue = value;
+        if ((!value || value.trim().length === 0) && shouldUseTaskPlaceholder) {
+            effectiveValue = taskPlaceholder;
+        }
+        if (!effectiveValue || effectiveValue.trim().length === 0) {
             return;
         }
-
-        props.onQuery(value);
+        props.onQuery(effectiveValue);
         setValue('');
-
-        if (editorRef.current) {
+        if (editorRef.current && !editorRef.current.document.textEditorModel.isDisposed()) {
             editorRef.current.document.textEditorModel.setValue('');
         }
-    }, [props.context, props.onQuery, setValue]);
+    }, [props.context, props.onQuery, setValue, shouldUseTaskPlaceholder, taskPlaceholder]);
 
     const onKeyDown = React.useCallback((event: React.KeyboardEvent) => {
         if (!props.isEnabled) {
@@ -555,7 +667,12 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         }
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
-            submit(editorRef.current?.document.textEditorModel.getValue() || '');
+            // On Enter, read input and submit (handles task context)
+            const currentValue = editorRef.current?.document.textEditorModel.getValue() || '';
+            submit(currentValue);
+        } else if (event.key === 'Escape') {
+            event.preventDefault();
+            props.onEscape();
         }
     }, [props.isEnabled, submit]);
 
@@ -606,7 +723,8 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             ? [{
                 title: nls.localize('theia/ai/chat-ui/attachToContext', 'Attach elements to context'),
                 handler: () => props.onAddContextElement(),
-                className: 'codicon-add'
+                className: 'codicon-add',
+                disabled: !props.isEnabled
             }]
             : []),
         ...(props.showPinnedAgent
@@ -614,6 +732,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                 title: props.pinnedAgent ? nls.localize('theia/ai/chat-ui/unpinAgent', 'Unpin Agent') : nls.localize('theia/ai/chat-ui/pinAgent', 'Pin Agent'),
                 handler: props.pinnedAgent ? props.onUnpin : handlePin,
                 className: 'at-icon',
+                disabled: !props.isEnabled,
                 text: {
                     align: 'right',
                     content: props.pinnedAgent && props.pinnedAgent.name
@@ -640,7 +759,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                 }
             },
             className: 'codicon-send',
-            disabled: isInputEmpty || !props.isEnabled
+            disabled: (isInputEmpty && !shouldUseTaskPlaceholder) || !props.isEnabled
         }];
     } else if (pending) {
         rightOptions = [{
@@ -661,21 +780,21 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
                 }
             },
             className: 'codicon-send',
-            disabled: isInputEmpty || !props.isEnabled
+            disabled: (isInputEmpty && !shouldUseTaskPlaceholder) || !props.isEnabled
         }];
     }
 
     const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement, props.onOpenContextElement);
 
     return (
-        <div className='theia-ChatInput' onDragOver={props.onDragOver} onDrop={props.onDrop} ref={containerRef}>
+        <div className='theia-ChatInput' data-ai-disabled={!props.isEnabled} onDragOver={props.onDragOver} onDrop={props.onDrop} ref={containerRef}>
             {props.showSuggestions !== false && <ChatInputAgentSuggestions suggestions={props.suggestions} opener={props.openerService} />}
             {props.showChangeSet && changeSetUI?.elements &&
                 <ChangeSetBox changeSet={changeSetUI} />
             }
             <div className='theia-ChatInput-Editor-Box'>
                 <div className='theia-ChatInput-Editor' ref={editorContainerRef} onKeyDown={onKeyDown} onFocus={handleInputFocus} onBlur={handleInputBlur}>
-                    <div ref={placeholderRef} className='theia-ChatInput-Editor-Placeholder'>{nls.localizeByDefault('Ask a question')}</div>
+                    <div ref={placeholderRef} className='theia-ChatInput-Editor-Placeholder'>{placeholderText}</div>
                 </div>
                 {props.context && props.context.length > 0 &&
                     <ChatContext context={contextUI.context} />
@@ -829,7 +948,7 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ left
             {leftOptions.map((option, index) => (
                 <span
                     key={index}
-                    className={`option ${option.disabled ? 'disabled' : ''} ${option.text?.align === 'right' ? 'reverse' : ''}`}
+                    className={`option${option.disabled ? ' disabled' : ''}${option.text?.align === 'right' ? ' reverse' : ''}`}
                     title={option.title}
                     onClick={option.handler}
                 >
@@ -842,7 +961,7 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ left
             {rightOptions.map((option, index) => (
                 <span
                     key={index}
-                    className={`option ${option.disabled ? 'disabled' : ''} ${option.text?.align === 'right' ? 'reverse' : ''}`}
+                    className={`option${option.disabled ? ' disabled' : ''}${option.text?.align === 'right' ? ' reverse' : ''}`}
                     title={option.title}
                     onClick={option.handler}
                 >

package/src/browser/chat-response-renderer/toolcall-part-renderer.tsx

@@ -19,11 +19,13 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ReactNode } from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
-import { codicon } from '@theia/core/lib/browser';
+import { codicon, OpenerService } from '@theia/core/lib/browser';
 import * as React from '@theia/core/shared/react';
 import { ToolConfirmation, ToolConfirmationState } from './tool-confirmation';
 import { ToolConfirmationManager, ToolConfirmationMode } from '@theia/ai-chat/lib/browser/chat-tool-preferences';
 import { ResponseNode } from '../chat-tree-view';
+import { useMarkdownRendering } from './markdown-part-renderer';
+import { ToolCallResult } from '@theia/ai-core';
 
 @injectable()
 export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
@@ -31,6 +33,9 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
     @inject(ToolConfirmationManager)
     protected toolConfirmationManager: ToolConfirmationManager;
 
+    @inject(OpenerService)
+    protected openerService: OpenerService;
+
     canHandle(response: ChatResponseContent): number {
         if (ToolCallChatResponseContent.is(response)) {
             return 10;
@@ -47,7 +52,52 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             toolConfirmationManager={this.toolConfirmationManager}
             chatId={chatId}
             renderCollapsibleArguments={this.renderCollapsibleArguments.bind(this)}
-            tryPrettyPrintJson={this.tryPrettyPrintJson.bind(this)} />;
+            responseRenderer={this.renderResult.bind(this)} />;
+    }
+
+    protected renderResult(response: ToolCallChatResponseContent): ReactNode {
+        const result = this.tryParse(response.result);
+        if (!result) {
+            return undefined;
+        }
+        if (typeof result === 'string') {
+            return <pre>{JSON.stringify(result, undefined, 2)}</pre>;
+        }
+        if ('content' in result) {
+            return <div className='theia-toolCall-response-content'>
+                {result.content.map((content, idx) => {
+                    switch (content.type) {
+                        case 'image': {
+                            return <div key={`content-${idx}-${content.type}`} className='theia-toolCall-image-result'>
+                                <img src={`data:${content.mimeType};base64,${content.base64data}`} />
+                            </div>;
+                        }
+                        case 'text': {
+                            return <div key={`content-${idx}-${content.type}`} className='theia-toolCall-text-result'>
+                                <MarkdownRender text={content.text} openerService={this.openerService} />
+                            </div>;
+                        }
+                        case 'audio':
+                        case 'error':
+                        default: {
+                            return <div key={`content-${idx}-${content.type}`} className='theia-toolCall-default-result'><pre>{JSON.stringify(response, undefined, 2)}</pre></div>;
+                        }
+                    }
+                })}
+            </div>;
+        }
+        return <pre>{JSON.stringify(result, undefined, 2)}</pre>;
+    }
+
+    private tryParse(result: ToolCallResult): ToolCallResult {
+        if (!result) {
+            return undefined;
+        }
+        try {
+            return typeof result === 'string' ? JSON.parse(result) : result;
+        } catch (error) {
+            return result;
+        }
     }
 
     protected getToolConfirmationSettings(responseId: string, chatId: string): ToolConfirmationMode {
@@ -75,29 +125,6 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             return args;
         }
     }
-
-    private tryPrettyPrintJson(response: ToolCallChatResponseContent): string | undefined {
-        let responseContent = response.result;
-        try {
-            if (responseContent) {
-                if (typeof responseContent === 'string') {
-                    responseContent = JSON.parse(responseContent);
-                }
-                responseContent = JSON.stringify(responseContent, undefined, 2);
-            }
-        } catch (e) {
-            if (typeof responseContent !== 'string') {
-                responseContent = nls.localize(
-                    'theia/ai/chat-ui/toolcall-part-renderer/prettyPrintError',
-                    "The content could not be converted to string: '{0}'. This is the original content: '{1}'.",
-                    e.message,
-                    responseContent
-                );
-            }
-            // fall through
-        }
-        return responseContent;
-    }
 }
 
 const Spinner = () => (
@@ -110,13 +137,13 @@ interface ToolCallContentProps {
     toolConfirmationManager: ToolConfirmationManager;
     chatId: string;
     renderCollapsibleArguments: (args: string | undefined) => ReactNode;
-    tryPrettyPrintJson: (response: ToolCallChatResponseContent) => string | undefined;
+    responseRenderer: (response: ToolCallChatResponseContent) => ReactNode | undefined;
 }
 
 /**
  * A function component to handle tool call rendering and confirmation
  */
-const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmationMode, toolConfirmationManager, chatId, tryPrettyPrintJson, renderCollapsibleArguments }) => {
+const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmationMode, toolConfirmationManager, chatId, responseRenderer, renderCollapsibleArguments }) => {
     const [confirmationState, setConfirmationState] = React.useState<ToolConfirmationState>('waiting');
 
     React.useEffect(() => {
@@ -163,35 +190,43 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({ response, confirmatio
 
     return (
         <div className='theia-toolCall'>
-            <h4>
-                {confirmationState === 'denied' ? (
-                    <span className="theia-tool-denied">
-                        <span className={codicon('error')}></span> {nls.localize('theia/ai/chat-ui/toolcall-part-renderer/denied', 'Execution denied')}: {response.name}
+            {confirmationState === 'denied' ? (
+                <span className='theia-toolCall-denied'>
+                    <span className={codicon('error')}></span> {nls.localize('theia/ai/chat-ui/toolcall-part-renderer/denied', 'Execution denied')}: {response.name}
+                </span>
+            ) : response.finished ? (
+                <details className='theia-toolCall-finished'>
+                    <summary>
+                        {nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
+                        ({renderCollapsibleArguments(response.arguments)})
+                    </summary>
+                    <div className='theia-toolCall-response-result'>
+                        {responseRenderer(response)}
+                    </div>
+                </details>
+            ) : (
+                confirmationState === 'allowed' && (
+                    <span className='theia-toolCall-allowed'>
+                        <Spinner /> {nls.localizeByDefault('Running')} {response.name}
                     </span>
-                ) : response.finished ? (
-                    <details>
-                        <summary>{nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
-                            ({renderCollapsibleArguments(response.arguments)})
-                        </summary>
-                        <pre>{tryPrettyPrintJson(response)}</pre>
-                    </details>
-                ) : (
-                    confirmationState === 'allowed' && (
-                        <span>
-                            <Spinner /> {nls.localizeByDefault('Running')} {response.name}
-                        </span>
-                    )
-                )}
-            </h4>
+                )
+            )}
 
             {/* Show confirmation UI when waiting for allow */}
             {confirmationState === 'waiting' && (
-                <ToolConfirmation
-                    response={response}
-                    onAllow={handleAllow}
-                    onDeny={handleDeny}
-                />
+                <span className='theia-toolCall-waiting'>
+                    <ToolConfirmation
+                        response={response}
+                        onAllow={handleAllow}
+                        onDeny={handleDeny}
+                    />
+                </span>
             )}
         </div>
     );
 };
+
+const MarkdownRender = ({ text, openerService }: { text: string; openerService: OpenerService }) => {
+    const ref = useMarkdownRendering(text, openerService);
+    return <div ref={ref}></div>;
+};