@theia/ai-chat-ui 1.58.3 → 1.59.0-next.62

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

@@ -13,8 +13,8 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { ChangeSet, ChangeSetElement, ChatChangeEvent, ChatModel, ChatRequestModel } from '@theia/ai-chat';
-import { Disposable, UntitledResourceResolver } from '@theia/core';
+import { ChangeSet, ChangeSetElement, ChatAgent, ChatChangeEvent, ChatModel, ChatRequestModel } from '@theia/ai-chat';
+import { Disposable, InMemoryResources, URI, nls } from '@theia/core';
 import { ContextMenuRenderer, LabelProvider, Message, 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';
@@ -23,8 +23,12 @@ import { IMouseEvent } from '@theia/monaco-editor-core';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
 import { CHAT_VIEW_LANGUAGE_EXTENSION } from './chat-view-language-contribution';
+import { AIVariableResolutionRequest } from '@theia/ai-core';
+import { FrontendVariableService } from '@theia/ai-core/lib/browser';
+import { ContextVariablePicker } from './context-variable-picker';
 
-type Query = (query: string) => Promise<void>;
+type Query = (query: string, context?: AIVariableResolutionRequest[]) => Promise<void>;
+type Unpin = () => void;
 type Cancel = (requestModel: ChatRequestModel) => void;
 type DeleteChangeSet = (requestModel: ChatRequestModel) => void;
 type DeleteChangeSetElement = (requestModel: ChatRequestModel, index: number) => void;
@@ -32,6 +36,7 @@ type DeleteChangeSetElement = (requestModel: ChatRequestModel, index: number) =>
 export const AIChatInputConfiguration = Symbol('AIChatInputConfiguration');
 export interface AIChatInputConfiguration {
     showContext?: boolean;
+    showPinnedAgent?: boolean;
 }
 
 @injectable()
@@ -42,8 +47,8 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(MonacoEditorProvider)
     protected readonly editorProvider: MonacoEditorProvider;
 
-    @inject(UntitledResourceResolver)
-    protected readonly untitledResourceResolver: UntitledResourceResolver;
+    @inject(InMemoryResources)
+    protected readonly resources: InMemoryResources;
 
     @inject(ContextMenuRenderer)
     protected readonly contextMenuRenderer: ContextMenuRenderer;
@@ -51,18 +56,30 @@ export class AIChatInputWidget extends ReactWidget {
     @inject(AIChatInputConfiguration) @optional()
     protected readonly configuration: AIChatInputConfiguration | undefined;
 
+    @inject(FrontendVariableService)
+    protected readonly variableService: FrontendVariableService;
+
     @inject(LabelProvider)
     protected readonly labelProvider: LabelProvider;
 
+    @inject(ContextVariablePicker)
+    protected readonly contextVariablePicker: ContextVariablePicker;
+
     protected editorRef: MonacoEditor | undefined = undefined;
     private editorReady = new Deferred<void>();
 
     protected isEnabled = false;
 
+    protected context: AIVariableResolutionRequest[] = [];
+
     private _onQuery: Query;
     set onQuery(query: Query) {
         this._onQuery = query;
     }
+    private _onUnpin: Unpin;
+    set onUnpin(unpin: Unpin) {
+        this._onUnpin = unpin;
+    }
     private _onCancel: Cancel;
     set onCancel(cancel: Cancel) {
         this._onCancel = cancel;
@@ -75,11 +92,17 @@ export class AIChatInputWidget extends ReactWidget {
     set onDeleteChangeSetElement(deleteChangeSetElement: DeleteChangeSetElement) {
         this._onDeleteChangeSetElement = deleteChangeSetElement;
     }
+
     private _chatModel: ChatModel;
     set chatModel(chatModel: ChatModel) {
         this._chatModel = chatModel;
         this.update();
     }
+    private _pinnedAgent: ChatAgent | undefined;
+    set pinnedAgent(pinnedAgent: ChatAgent | undefined) {
+        this._pinnedAgent = pinnedAgent;
+        this.update();
+    }
 
     @postConstruct()
     protected init(): void {
@@ -101,12 +124,19 @@ export class AIChatInputWidget extends ReactWidget {
         return (
             <ChatInput
                 onQuery={this._onQuery.bind(this)}
+                onUnpin={this._onUnpin.bind(this)}
                 onCancel={this._onCancel.bind(this)}
+                onDragOver={this.onDragOver.bind(this)}
+                onDrop={this.onDrop.bind(this)}
                 onDeleteChangeSet={this._onDeleteChangeSet.bind(this)}
                 onDeleteChangeSetElement={this._onDeleteChangeSetElement.bind(this)}
+                onAddContextElement={this.addContextElement.bind(this)}
+                onDeleteContextElement={this.deleteContextElement.bind(this)}
+                context={this.context}
                 chatModel={this._chatModel}
+                pinnedAgent={this._pinnedAgent}
                 editorProvider={this.editorProvider}
-                untitledResourceResolver={this.untitledResourceResolver}
+                resources={this.resources}
                 contextMenuCallback={this.handleContextMenu.bind(this)}
                 isEnabled={this.isEnabled}
                 setEditorRef={editor => {
@@ -114,16 +144,64 @@ export class AIChatInputWidget extends ReactWidget {
                     this.editorReady.resolve();
                 }}
                 showContext={this.configuration?.showContext}
+                showPinnedAgent={this.configuration?.showPinnedAgent}
                 labelProvider={this.labelProvider}
             />
         );
     }
 
+    protected onDragOver(event: React.DragEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        this.node.classList.add('drag-over');
+        if (event.dataTransfer?.types.includes('text/plain')) {
+            event.dataTransfer!.dropEffect = 'copy';
+        } else {
+            event.dataTransfer!.dropEffect = 'link';
+        }
+    }
+
+    protected onDrop(event: React.DragEvent): void {
+        event.preventDefault();
+        event.stopPropagation();
+        this.node.classList.remove('drag-over');
+        const dataTransferText = event.dataTransfer?.getData('text/plain');
+        const position = this.editorRef?.getControl().getTargetAtClientPoint(event.clientX, event.clientY)?.position;
+        this.variableService.getDropResult(event.nativeEvent, { type: 'ai-chat-input-widget' }).then(result => {
+            result.variables.forEach(variable => this.addContext(variable));
+            const text = result.text ?? dataTransferText;
+            if (position && text) {
+                this.editorRef?.getControl().executeEdits('drag-and-drop', [{
+                    range: {
+                        startLineNumber: position.lineNumber,
+                        startColumn: position.column,
+                        endLineNumber: position.lineNumber,
+                        endColumn: position.column
+                    },
+                    text
+                }]);
+            }
+        });
+    }
+
     public setEnabled(enabled: boolean): void {
         this.isEnabled = enabled;
         this.update();
     }
 
+    protected addContextElement(): void {
+        this.contextVariablePicker.pickContextVariable().then(contextElement => {
+            if (contextElement) {
+                this.addContext(contextElement);
+            }
+        });
+    }
+
+    protected deleteContextElement(index: number): void {
+        this.context.splice(index, 1);
+        this.update();
+    }
+
     protected handleContextMenu(event: IMouseEvent): void {
         this.contextMenuRenderer.render({
             menuPath: AIChatInputWidget.CONTEXT_MENU,
@@ -132,20 +210,35 @@ export class AIChatInputWidget extends ReactWidget {
         event.preventDefault();
     }
 
+    addContext(variableRequest: AIVariableResolutionRequest): void {
+        if (this.context.some(existing => existing.variable.id === variableRequest.variable.id && existing.arg === variableRequest.arg)) {
+            return;
+        }
+        this.context.push(variableRequest);
+        this.update();
+    }
 }
 
 interface ChatInputProperties {
     onCancel: (requestModel: ChatRequestModel) => void;
-    onQuery: (query: string) => void;
+    onQuery: (query: string, context?: AIVariableResolutionRequest[]) => void;
+    onUnpin: () => void;
+    onDragOver: (event: React.DragEvent) => void;
+    onDrop: (event: React.DragEvent) => void;
     onDeleteChangeSet: (sessionId: string) => void;
     onDeleteChangeSetElement: (sessionId: string, index: number) => void;
+    onAddContextElement: () => void;
+    onDeleteContextElement: (index: number) => void;
+    context?: AIVariableResolutionRequest[];
     isEnabled?: boolean;
     chatModel: ChatModel;
+    pinnedAgent?: ChatAgent;
     editorProvider: MonacoEditorProvider;
-    untitledResourceResolver: UntitledResourceResolver;
+    resources: InMemoryResources;
     contextMenuCallback: (event: IMouseEvent) => void;
     setEditorRef: (editor: MonacoEditor | undefined) => void;
     showContext?: boolean;
+    showPinnedAgent?: boolean;
     labelProvider: LabelProvider;
 }
 
@@ -166,12 +259,13 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
     const editorRef = React.useRef<MonacoEditor | undefined>(undefined);
 
     React.useEffect(() => {
+        const uri = new URI(`ai-chat:/input.${CHAT_VIEW_LANGUAGE_EXTENSION}`);
+        const resource = props.resources.add(uri, '');
         const createInputElement = async () => {
             const paddingTop = 6;
             const lineHeight = 20;
             const maxHeight = 240;
-            const resource = await props.untitledResourceResolver.createUntitledResource('', CHAT_VIEW_LANGUAGE_EXTENSION);
-            const editor = await props.editorProvider.createInline(resource.uri, editorContainerRef.current!, {
+            const editor = await props.editorProvider.createInline(uri, editorContainerRef.current!, {
                 language: CHAT_VIEW_LANGUAGE_EXTENSION,
                 // Disable code lens, inlay hints and hover support to avoid console errors from other contributions
                 codeLens: false,
@@ -234,7 +328,9 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             props.setEditorRef(editor);
         };
         createInputElement();
+
         return () => {
+            resource.dispose();
             props.setEditorRef(undefined);
             if (editorRef.current) {
                 editorRef.current.dispose();
@@ -277,7 +373,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             return;
         }
         setInProgress(true);
-        props.onQuery(value);
+        props.onQuery(value, props.context);
         if (editorRef.current) {
             editorRef.current.document.textEditorModel.setValue('');
         }
@@ -319,15 +415,46 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
         }
     };
 
-    const leftOptions = props.showContext ? [{
-        title: 'Attach elements to context',
-        handler: () => { /* TODO */ },
-        className: 'codicon-add'
-    }] : [];
+    const handlePin = () => {
+        if (editorRef.current) {
+            editorRef.current.getControl().getModel()?.applyEdits([{
+                range: {
+                    startLineNumber: 1,
+                    startColumn: 1,
+                    endLineNumber: 1,
+                    endColumn: 1
+                },
+                text: '@ ',
+            }]);
+            editorRef.current.getControl().setPosition({ lineNumber: 1, column: 2 });
+            editorRef.current.getControl().getAction('editor.action.triggerSuggest')?.run();
+        }
+    };
+
+    const leftOptions = [
+        ...(props.showContext
+            ? [{
+                title: nls.localize('theia/ai/chat-ui/attachToContext', 'Attach elements to context'),
+                handler: () => props.onAddContextElement(),
+                className: 'codicon-add'
+            }]
+            : []),
+        ...(props.showPinnedAgent
+            ? [{
+                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',
+                text: {
+                    align: 'right',
+                    content: props.pinnedAgent && props.pinnedAgent.name
+                },
+            }]
+            : []),
+    ] as Option[];
 
     const rightOptions = inProgress
         ? [{
-            title: 'Cancel (Esc)',
+            title: nls.localize('theia/ai/chat-ui/cancel', 'Cancel (Esc)'),
             handler: () => {
                 const latestRequest = getLatestRequest(props.chatModel);
                 if (latestRequest) {
@@ -338,7 +465,7 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             className: 'codicon-stop-circle'
         }]
         : [{
-            title: 'Send (Enter)',
+            title: nls.localize('theia/ai/chat-ui/send', 'Send (Enter)'),
             handler: () => {
                 if (props.isEnabled) {
                     submit(editorRef.current?.document.textEditorModel.getValue() || '');
@@ -348,14 +475,19 @@ const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInpu
             disabled: isInputEmpty || !props.isEnabled
         }];
 
-    return <div className='theia-ChatInput'>
+    const contextUI = buildContextUI(props.context, props.labelProvider, props.onDeleteContextElement);
+
+    return <div className='theia-ChatInput' onDragOver={props.onDragOver} onDrop={props.onDrop}    >
         {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'>Ask a question</div>
+                <div ref={placeholderRef} className='theia-ChatInput-Editor-Placeholder'>{nls.localizeByDefault('Ask a question')}</div>
             </div>
+            {props.context && props.context.length > 0 &&
+                <ChatContext context={contextUI.context} />
+            }
             <ChatInputOptions leftOptions={leftOptions} rightOptions={rightOptions} />
         </div>
     </div>;
@@ -369,7 +501,7 @@ const noPropagation = (handler: () => void) => (e: React.MouseEvent) => {
 const buildChangeSetUI = (changeSet: ChangeSet, labelProvider: LabelProvider, onDeleteChangeSet: () => void, onDeleteChangeSetElement: (index: number) => void): ChangeSetUI => ({
     title: changeSet.title,
     disabled: !hasPendingElementsToAccept(changeSet),
-    acceptAllPendingElements: () => acceptAllPendingElements(changeSet),
+    applyAllPendingElements: () => applyAllPendingElements(changeSet),
     delete: () => onDeleteChangeSet(),
     elements: changeSet.getElements().map(element => ({
         open: element?.open?.bind(element),
@@ -378,8 +510,8 @@ const buildChangeSetUI = (changeSet: ChangeSet, labelProvider: LabelProvider, on
         name: element.name ?? labelProvider.getName(element.uri),
         additionalInfo: element.additionalInfo ?? labelProvider.getDetails(element.uri),
         openChange: element?.openChange?.bind(element),
-        accept: element.state !== 'applied' ? element?.accept?.bind(element) : undefined,
-        discard: element.state === 'applied' ? element?.discard?.bind(element) : undefined,
+        apply: element.state !== 'applied' ? element?.apply?.bind(element) : undefined,
+        revert: element.state === 'applied' || element.state === 'stale' ? element?.revert?.bind(element) : undefined,
         delete: () => onDeleteChangeSetElement(changeSet.getElements().indexOf(element))
     }))
 });
@@ -391,15 +523,15 @@ interface ChangeSetUIElement {
     additionalInfo: string;
     open?: () => void;
     openChange?: () => void;
-    accept?: () => void;
-    discard?: () => void;
+    apply?: () => void;
+    revert?: () => void;
     delete: () => void;
 }
 
 interface ChangeSetUI {
     title: string;
     disabled: boolean;
-    acceptAllPendingElements: () => void;
+    applyAllPendingElements: () => void;
     delete: () => void;
     elements: ChangeSetUIElement[];
 }
@@ -412,30 +544,47 @@ const ChangeSetBox: React.FunctionComponent<{ changeSet: ChangeSetUI }> = ({ cha
                 <button
                     className='theia-button'
                     disabled={changeSet.disabled}
-                    title='Accept all pending changes'
-                    onClick={() => changeSet.acceptAllPendingElements()}
+                    title={nls.localize('theia/ai/chat-ui/applyAllTitle', 'Apply all pending suggestions')}
+                    onClick={() => changeSet.applyAllPendingElements()}
                 >
-                    Accept
+                    {nls.localize('theia/ai/chat-ui/acceptAll', 'Apply All')}
                 </button>
-                <span className='codicon codicon-close action' title='Delete Change Set' onClick={() => changeSet.delete()} />
+                <span className='codicon codicon-close action' title={nls.localize('theia/ai/chat-ui/deleteChangeSet', 'Delete Change Set')} onClick={() => changeSet.delete()} />
             </div>
         </div>
         <div className='theia-ChatInput-ChangeSet-List'>
             <ul>
                 {changeSet.elements.map((element, index) => (
-                    <li key={index} title='Open Diff' onClick={() => element.openChange?.()}>
+                    <li key={index} title={nls.localize('theia/ai/chat-ui/openDiff', 'Open Diff')} onClick={() => element.openChange?.()}>
                         <div className={`theia-ChatInput-ChangeSet-Icon ${element.iconClass}`} />
-                        <span className={`theia-ChatInput-ChangeSet-title ${element.nameClass}`}>
-                            {element.name}
-                        </span>
-                        <span className='theia-ChatInput-ChangeSet-additionalInfo'>
-                            {element.additionalInfo}
+                        <span className='theia-ChatInput-ChangeSet-labelParts'>
+                            <span className={`theia-ChatInput-ChangeSet-title ${element.nameClass}`}>
+                                {element.name}
+                            </span>
+                            <span className='theia-ChatInput-ChangeSet-additionalInfo'>
+                                {element.additionalInfo}
+                            </span>
                         </span>
                         <div className='theia-ChatInput-ChangeSet-Actions'>
-                            {element.open && (<span className='codicon codicon-file action' title='Open Original File' onClick={noPropagation(() => element.open!())} />)}
-                            {element.discard && (<span className='codicon codicon-discard action' title='Undo' onClick={noPropagation(() => element.discard!())} />)}
-                            {element.accept && (<span className='codicon codicon-check action' title='Accept' onClick={noPropagation(() => element.accept!())} />)}
-                            <span className='codicon codicon-close action' title='Delete' onClick={noPropagation(() => element.delete())} />
+                            {element.open && (
+                                <span
+                                    className='codicon codicon-file action'
+                                    title={nls.localize('theia/ai/chat-ui/openOriginalFile', 'Open Original File')}
+                                    onClick={noPropagation(() => element.open!())}
+                                />)}
+                            {element.revert && (
+                                <span
+                                    className='codicon codicon-discard action'
+                                    title={nls.localizeByDefault('Revert')}
+                                    onClick={noPropagation(() => element.revert!())}
+                                />)}
+                            {element.apply && (
+                                <span
+                                    className='codicon codicon-check action'
+                                    title={nls.localizeByDefault('Apply')}
+                                    onClick={noPropagation(() => element.apply!())}
+                                />)}
+                            <span className='codicon codicon-close action' title={nls.localizeByDefault('Delete')} onClick={noPropagation(() => element.delete())} />
                         </div>
                     </li>
                 ))}
@@ -454,6 +603,10 @@ interface Option {
     handler: () => void;
     className: string;
     disabled?: boolean;
+    text?: {
+        align?: 'left' | 'right';
+        content: string;
+    };
 }
 
 const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ leftOptions, rightOptions }) => (
@@ -462,38 +615,91 @@ const ChatInputOptions: React.FunctionComponent<ChatInputOptionsProps> = ({ left
             {leftOptions.map((option, index) => (
                 <span
                     key={index}
-                    className={`codicon ${option.className} option ${option.disabled ? 'disabled' : ''}`}
+                    className={`option ${option.disabled ? 'disabled' : ''} ${option.text?.align === 'right' ? 'reverse' : ''}`}
                     title={option.title}
                     onClick={option.handler}
-                />
+                >
+                    <span>{option.text?.content}</span>
+                    <span className={`codicon ${option.className}`} />
+                </span>
             ))}
         </div>
         <div className="theia-ChatInputOptions-right">
             {rightOptions.map((option, index) => (
                 <span
                     key={index}
-                    className={`codicon ${option.className} option ${option.disabled ? 'disabled' : ''}`}
+                    className={`option ${option.disabled ? 'disabled' : ''} ${option.text?.align === 'right' ? 'reverse' : ''}`}
                     title={option.title}
                     onClick={option.handler}
-                />
+                >
+                    <span>{option.text?.content}</span>
+                    <span className={`codicon ${option.className}`} />
+                </span>
             ))}
         </div>
     </div>
 );
 
-function acceptAllPendingElements(changeSet: ChangeSet): void {
-    acceptablePendingElements(changeSet).forEach(e => e.accept!());
+function applyAllPendingElements(changeSet: ChangeSet): void {
+    getPendingElements(changeSet).forEach(e => e.apply!());
 }
 
 function hasPendingElementsToAccept(changeSet: ChangeSet): boolean | undefined {
-    return acceptablePendingElements(changeSet).length > 0;
+    return getPendingElements(changeSet).length > 0;
 }
 
-function acceptablePendingElements(changeSet: ChangeSet): ChangeSetElement[] {
-    return changeSet.getElements().filter(e => e.accept && (e.state === undefined || e.state === 'pending'));
+function getPendingElements(changeSet: ChangeSet): ChangeSetElement[] {
+    return changeSet.getElements().filter(e => e.apply && (e.state === undefined || e.state === 'pending'));
 }
 
 function getLatestRequest(chatModel: ChatModel): ChatRequestModel | undefined {
     const requests = chatModel.getRequests();
     return requests.length > 0 ? requests[requests.length - 1] : undefined;
 }
+
+function buildContextUI(context: AIVariableResolutionRequest[] | undefined, labelProvider: LabelProvider, onDeleteContextElement: (index: number) => void): ChatContextUI {
+    if (!context) {
+        return { context: [] };
+    }
+    return {
+        context: context.map((element, index) => ({
+            name: labelProvider.getName(element),
+            iconClass: labelProvider.getIcon(element),
+            nameClass: element.variable.name,
+            additionalInfo: labelProvider.getDetails(element),
+            details: labelProvider.getLongName(element),
+            delete: () => onDeleteContextElement(index),
+        }))
+    };
+}
+
+interface ChatContextUI {
+    context: {
+        name: string;
+        iconClass: string;
+        nameClass: string;
+        additionalInfo?: string;
+        details?: string;
+        delete: () => void;
+        open?: () => void;
+    }[];
+}
+
+const ChatContext: React.FunctionComponent<ChatContextUI> = ({ context }) => (
+    <div className="theia-ChatInput-ChatContext">
+        <ul>
+            {context.map((element, index) => (
+                <li key={index} className="theia-ChatInput-ChatContext-Element" title={element.details} onClick={() => element.open?.()}>
+                    <div className={`theia-ChatInput-ChatContext-Icon ${element.iconClass}`} />
+                    <span className={`theia-ChatInput-ChatContext-title ${element.nameClass}`}>
+                        {element.name}
+                    </span>
+                    <span className='theia-ChatInput-ChatContext-additionalInfo'>
+                        {element.additionalInfo}
+                    </span>
+                    <span className="codicon codicon-close action" title={nls.localizeByDefault('Delete')} onClick={() => element.delete()} />
+                </li>
+            ))}
+        </ul>
+    </div>
+);

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

@@ -23,6 +23,7 @@ import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { inject, injectable, named } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { ReactNode } from '@theia/core/shared/react';
+import { nls } from '@theia/core/lib/common/nls';
 import { Position } from '@theia/core/shared/vscode-languageserver-protocol';
 import { EditorManager, EditorWidget } from '@theia/editor/lib/browser';
 import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
@@ -113,7 +114,7 @@ export class CodePartRenderer
     private getTitle(uri: URI | undefined, language: string | undefined): string {
         // If there is a URI, use the file name as the title. Otherwise, use the language as the title.
         // If there is no language, use a generic fallback title.
-        return uri?.path?.toString().split('/').pop() ?? language ?? 'Generated Code';
+        return uri?.path?.toString().split('/').pop() ?? language ?? nls.localize('theia/ai/chat-ui/code-part-renderer/generatedCode', 'Generated Code');
     }
 
     /**
@@ -157,7 +158,7 @@ const CopyToClipboardButton = (props: { code: string, clipboardService: Clipboar
     const copyCodeToClipboard = React.useCallback(() => {
         clipboardService.writeText(code);
     }, [code, clipboardService]);
-    return <div className='button codicon codicon-copy' title='Copy' role='button' onClick={copyCodeToClipboard}></div>;
+    return <div className='button codicon codicon-copy' title={nls.localizeByDefault('Copy')} role='button' onClick={copyCodeToClipboard}></div>;
 };
 
 @injectable()
@@ -189,7 +190,7 @@ const InsertCodeAtCursorButton = (props: { code: string, editorManager: EditorMa
             }]);
         }
     }, [code, editorManager]);
-    return <div className='button codicon codicon-insert' title='Insert at Cursor' role='button' onClick={insertCode}></div>;
+    return <div className='button codicon codicon-insert' title={nls.localizeByDefault('Insert at Cursor')} role='button' onClick={insertCode}></div>;
 };
 
 /**

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

@@ -18,6 +18,7 @@ import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { injectable } from '@theia/core/shared/inversify';
 import { ChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ReactNode } from '@theia/core/shared/react';
+import { nls } from '@theia/core/lib/common/nls';
 import * as React from '@theia/core/shared/react';
 
 @injectable()
@@ -30,6 +31,8 @@ export class TextPartRenderer implements ChatResponsePartRenderer<ChatResponseCo
         if (response && ChatResponseContent.hasAsString(response)) {
             return <span>{response.asString()}</span>;
         }
-        return <span>Can't display response, please check your ChatResponsePartRenderers! {JSON.stringify(response)}</span>;
+        return <span>
+            {nls.localize('theia/ai/chat-ui/text-part-renderer/cantDisplay',
+                "Can't display response, please check your ChatResponsePartRenderers!")} {JSON.stringify(response)}</span>;
     }
 }

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

@@ -18,6 +18,7 @@ import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { 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 * as React from '@theia/core/shared/react';
 
 @injectable()
@@ -35,14 +36,14 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             <h4 className='theia-toolCall'>
                 {response.finished ? (
                     <details>
-                        <summary>Ran {response.name}
+                        <summary>{nls.localize('theia/ai/chat-ui/toolcall-part-renderer/finished', 'Ran')} {response.name}
                             ({this.renderCollapsibleArguments(response.arguments)})
                         </summary>
                         <pre>{this.tryPrettyPrintJson(response)}</pre>
                     </details>
                 ) : (
                     <span>
-                        <Spinner /> Running {response.name}({this.renderCollapsibleArguments(response.arguments)})
+                        <Spinner /> {nls.localizeByDefault('Running')} {response.name}({this.renderCollapsibleArguments(response.arguments)})
                     </span>
                 )}
             </h4>
@@ -82,7 +83,12 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             }
         } catch (e) {
             if (typeof responseContent !== 'string') {
-                responseContent = `The content could not be converted to string: '${e.message}'. This is the original content: '${responseContent}'.`;
+                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
         }