@theia/ai-chat-ui 1.46.0-next.241

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

@@ -0,0 +1,211 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import {
+    ChatResponseContent,
+    CodeChatResponseContent,
+} from '@theia/ai-chat/lib/common';
+import { UntitledResourceResolver, URI } from '@theia/core';
+import { ContextMenuRenderer, TreeNode } from '@theia/core/lib/browser';
+import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+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';
+import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
+import { MonacoLanguages } from '@theia/monaco/lib/browser/monaco-languages';
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { ChatViewTreeWidget, ResponseNode } from '../chat-tree-view/chat-view-tree-widget';
+import { IMouseEvent } from '@theia/monaco-editor-core';
+
+@injectable()
+export class CodePartRenderer
+    implements ChatResponsePartRenderer<CodeChatResponseContent> {
+
+    @inject(ClipboardService)
+    protected readonly clipboardService: ClipboardService;
+    @inject(EditorManager)
+    protected readonly editorManager: EditorManager;
+    @inject(UntitledResourceResolver)
+    protected readonly untitledResourceResolver: UntitledResourceResolver;
+    @inject(MonacoEditorProvider)
+    protected readonly editorProvider: MonacoEditorProvider;
+    @inject(MonacoLanguages)
+    protected readonly languageService: MonacoLanguages;
+    @inject(ContextMenuRenderer)
+    protected readonly contextMenuRenderer: ContextMenuRenderer;
+
+    canHandle(response: ChatResponseContent): number {
+        if (CodeChatResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+
+    render(response: CodeChatResponseContent, parentNode: ResponseNode): ReactNode {
+        const language = response.language ? this.languageService.getExtension(response.language) : undefined;
+
+        return (
+            <div className="theia-CodePartRenderer-root">
+                <div className="theia-CodePartRenderer-top">
+                    <div className="theia-CodePartRenderer-left">{this.renderTitle(response)}</div>
+                    <div className="theia-CodePartRenderer-right">
+                        <CopyToClipboardButton code={response.code} clipboardService={this.clipboardService} />
+                        <InsertCodeAtCursorButton code={response.code} editorManager={this.editorManager} />
+                    </div>
+                </div>
+                <div className="theia-CodePartRenderer-separator"></div>
+                <div className="theia-CodePartRenderer-bottom">
+                    <CodeWrapper
+                        content={response.code}
+                        language={language}
+                        editorProvider={this.editorProvider}
+                        untitledResourceResolver={this.untitledResourceResolver}
+                        contextMenuCallback={e => this.handleContextMenuEvent(parentNode, e, response.code)}></CodeWrapper>
+                </div>
+            </div>
+        );
+    }
+
+    protected renderTitle(response: CodeChatResponseContent): ReactNode {
+        const uri = response.location?.uri;
+        const position = response.location?.position;
+        if (uri && position) {
+            return <a onClick={this.openFileAtPosition.bind(this, uri, position)}>{this.getTitle(response.location?.uri, response.language)}</a>;
+        }
+        return this.getTitle(response.location?.uri, response.language);
+    }
+
+    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';
+    }
+
+    /**
+     * Opens a file and moves the cursor to the specified position.
+     *
+     * @param uri - The URI of the file to open.
+     * @param position - The position to move the cursor to, specified as {line, character}.
+     */
+    async openFileAtPosition(uri: URI, position: Position): Promise<void> {
+        const editorWidget = await this.editorManager.open(uri) as EditorWidget;
+        if (editorWidget) {
+            const editor = editorWidget.editor;
+            editor.revealPosition(position);
+            editor.focus();
+            editor.cursor = position;
+        }
+    }
+
+    protected handleContextMenuEvent(node: TreeNode | undefined, event: IMouseEvent, code: string): void {
+        this.contextMenuRenderer.render({
+            menuPath: ChatViewTreeWidget.CONTEXT_MENU,
+            anchor: { x: event.posx, y: event.posy },
+            args: [node, { code }]
+        });
+        event.preventDefault();
+    }
+}
+
+const CopyToClipboardButton = (props: { code: string, clipboardService: ClipboardService }) => {
+    const { code, clipboardService } = props;
+    const copyCodeToClipboard = React.useCallback(() => {
+        clipboardService.writeText(code);
+    }, [code, clipboardService]);
+    return <div className='button codicon codicon-copy' title='Copy' role='button' onClick={copyCodeToClipboard}></div>;
+};
+
+const InsertCodeAtCursorButton = (props: { code: string, editorManager: EditorManager }) => {
+    const { code, editorManager } = props;
+    const insertCode = React.useCallback(() => {
+        const editor = editorManager.currentEditor;
+        if (editor) {
+            const currentEditor = editor.editor;
+            const selection = currentEditor.selection;
+
+            // Insert the text at the current cursor position
+            // If there is a selection, replace the selection with the text
+            currentEditor.executeEdits([{
+                range: {
+                    start: selection.start,
+                    end: selection.end
+                },
+                newText: code
+            }]);
+        }
+    }, [code, editorManager]);
+    return <div className='button codicon codicon-insert' title='Insert at Cursor' role='button' onClick={insertCode}></div>;
+};
+
+/**
+ * Renders the given code within a Monaco Editor
+ */
+export const CodeWrapper = (props: {
+    content: string,
+    language?: string,
+    untitledResourceResolver: UntitledResourceResolver,
+    editorProvider: MonacoEditorProvider,
+    contextMenuCallback: (e: IMouseEvent) => void
+}) => {
+    // eslint-disable-next-line no-null/no-null
+    const ref = React.useRef<HTMLDivElement | null>(null);
+    const editorRef = React.useRef<MonacoEditor | undefined>(undefined);
+
+    const createInputElement = async () => {
+        const resource = await props.untitledResourceResolver.createUntitledResource(undefined, props.language);
+        const editor = await props.editorProvider.createInline(resource.uri, ref.current!, {
+            readOnly: true,
+            autoSizing: true,
+            scrollBeyondLastLine: false,
+            scrollBeyondLastColumn: 0,
+            renderFinalNewline: 'off',
+            maxHeight: -1,
+            scrollbar: {
+                vertical: 'hidden',
+                alwaysConsumeMouseWheel: false
+            },
+            wordWrap: 'off',
+            codeLens: false,
+            inlayHints: { enabled: 'off' },
+            hover: { enabled: false }
+        });
+        editor.document.textEditorModel.setValue(props.content);
+        editor.getControl().onContextMenu(e => props.contextMenuCallback(e.event));
+        editorRef.current = editor;
+    };
+
+    React.useEffect(() => {
+        createInputElement();
+        return () => {
+            if (editorRef.current) {
+                editorRef.current.dispose();
+            }
+        };
+    }, []);
+
+    React.useEffect(() => {
+        if (editorRef.current) {
+            editorRef.current.document.textEditorModel.setValue(props.content);
+        }
+    }, [props.content]);
+
+    editorRef.current?.resizeToFit();
+
+    return <div className='theia-CodeWrapper' ref={ref}></div>;
+};

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

@@ -0,0 +1,60 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { ChatResponseContent, CommandChatResponseContent } from '@theia/ai-chat/lib/common';
+import { ReactNode } from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
+import { CommandRegistry, CommandService } from '@theia/core';
+
+@injectable()
+export class CommandPartRenderer implements ChatResponsePartRenderer<CommandChatResponseContent> {
+    @inject(CommandService) private commandService: CommandService;
+    @inject(CommandRegistry) private commandRegistry: CommandRegistry;
+    canHandle(response: ChatResponseContent): number {
+        if (CommandChatResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+    render(response: CommandChatResponseContent): ReactNode {
+        const label =
+            response.customCallback?.label ??
+            response.command?.label ??
+            response.command?.id
+                .split('-')
+                .map(s => s[0].toUpperCase() + s.substring(1))
+                .join(' ') ?? 'Execute';
+        if (!response.customCallback && response.command) {
+            const isCommandEnabled = this.commandRegistry.isEnabled(response.command.id);
+            if (!isCommandEnabled) {
+                return <div>The command has the id "{response.command.id}" but it is not executable from the Chat window.</div>;
+
+            }
+        }
+        return <button className='theia-button main' onClick={this.onCommand.bind(this, response)}>{label}</button>;
+    }
+    private onCommand(arg: CommandChatResponseContent): void {
+        if (arg.customCallback) {
+            arg.customCallback.callback().catch(e => { console.error(e); });
+        } else if (arg.command) {
+            this.commandService.executeCommand(arg.command.id, ...(arg.arguments ?? [])).catch(e => { console.error(e); });
+        } else {
+            console.warn('No command or custom callback provided in command chat response content');
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { injectable } from '@theia/core/shared/inversify';
+import { ChatResponseContent, ErrorChatResponseContent } from '@theia/ai-chat/lib/common';
+import { ReactNode } from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
+
+@injectable()
+export class ErrorPartRenderer implements ChatResponsePartRenderer<ErrorChatResponseContent> {
+    canHandle(response: ChatResponseContent): number {
+        if (ErrorChatResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+    render(response: ErrorChatResponseContent): ReactNode {
+        return <div className='theia-ChatPart-Error'><span className='codicon codicon-error' /><span>{response.error.message}</span></div>;
+    }
+
+}

package/src/browser/chat-response-renderer/horizontal-layout-part-renderer.tsx

@@ -0,0 +1,59 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { inject, injectable, named } from '@theia/core/shared/inversify';
+import {
+    ChatResponseContent,
+    HorizontalLayoutChatResponseContent,
+} from '@theia/ai-chat/lib/common';
+import { ReactNode } from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
+import { ContributionProvider } from '@theia/core';
+import { ResponseNode } from '../chat-tree-view/chat-view-tree-widget';
+
+@injectable()
+export class HorizontalLayoutPartRenderer
+    implements ChatResponsePartRenderer<ChatResponseContent> {
+    @inject(ContributionProvider)
+    @named(ChatResponsePartRenderer)
+    protected readonly chatResponsePartRenderers: ContributionProvider<
+        ChatResponsePartRenderer<ChatResponseContent>
+    >;
+
+    canHandle(response: ChatResponseContent): number {
+        if (HorizontalLayoutChatResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+    render(response: HorizontalLayoutChatResponseContent, parentNode: ResponseNode): ReactNode {
+        const contributions = this.chatResponsePartRenderers.getContributions();
+        return (
+            <div className="ai-chat-horizontal-layout" style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
+                {response.content.map(content => {
+                    const renderer = contributions
+                        .map(c => ({
+                            prio: c.canHandle(content),
+                            renderer: c,
+                        }))
+                        .sort((a, b) => b.prio - a.prio)[0].renderer;
+                    return renderer.render(content, parentNode);
+                })}
+            </div>
+        );
+    }
+}

package/src/browser/chat-response-renderer/index.ts

@@ -0,0 +1,23 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+export * from './ai-editor-manager';
+export * from './code-part-renderer';
+export * from './command-part-renderer';
+export * from './error-part-renderer';
+export * from './horizontal-layout-part-renderer';
+export * from './markdown-part-renderer';
+export * from './text-part-renderer';
+export * from './toolcall-part-renderer';

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

@@ -0,0 +1,92 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { injectable } from '@theia/core/shared/inversify';
+import {
+    ChatResponseContent,
+    InformationalChatResponseContent,
+    MarkdownChatResponseContent,
+} from '@theia/ai-chat/lib/common';
+import { ReactNode, useEffect, useRef } from '@theia/core/shared/react';
+import * as React from '@theia/core/shared/react';
+import * as markdownit from '@theia/core/shared/markdown-it';
+import * as DOMPurify from '@theia/core/shared/dompurify';
+import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
+
+@injectable()
+export class MarkdownPartRenderer implements ChatResponsePartRenderer<MarkdownChatResponseContent | InformationalChatResponseContent> {
+    protected readonly markdownIt = markdownit();
+    canHandle(response: ChatResponseContent): number {
+        if (MarkdownChatResponseContent.is(response)) {
+            return 10;
+        }
+        if (InformationalChatResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+    render(response: MarkdownChatResponseContent | InformationalChatResponseContent): ReactNode {
+        // TODO let the user configure whether they want to see informational content
+        if (InformationalChatResponseContent.is(response)) {
+            // null is valid in React
+            // eslint-disable-next-line no-null/no-null
+            return null;
+        }
+
+        return <MarkdownRender response={response} />;
+    }
+
+}
+
+const MarkdownRender = ({ response }: { response: MarkdownChatResponseContent | InformationalChatResponseContent }) => {
+    const ref = useMarkdownRendering(response.content);
+
+    return <div ref={ref}></div>;
+};
+
+/**
+ * This hook uses markdown-it directly to render markdown.
+ * The reason to use markdown-it directly is that the MarkdownRenderer is
+ * overridden by theia with a monaco version. This monaco version strips all html
+ * tags from the markdown with empty content.
+ * This leads to unexpected behavior when rendering markdown with html tags.
+ *
+ * @param markdown the string to render as markdown
+ * @param skipSurroundingParagraph whether to remove a surrounding paragraph element (default: false)
+ * @returns the ref to use in an element to render the markdown
+ */
+export const useMarkdownRendering = (markdown: string | MarkdownString, skipSurroundingParagraph: boolean = false) => {
+    // eslint-disable-next-line no-null/no-null
+    const ref = useRef<HTMLDivElement | null>(null);
+    const markdownString = typeof markdown === 'string' ? markdown : markdown.value;
+    useEffect(() => {
+        const markdownIt = markdownit();
+        const host = document.createElement('div');
+        // markdownIt always puts the content in a paragraph element, so we remove it if we don't want it
+        const html = skipSurroundingParagraph ? markdownIt.render(markdownString).replace(/^<p>|<\/p>|<p><\/p>$/g, '') : markdownIt.render(markdownString);
+        host.innerHTML = DOMPurify.sanitize(html, {
+            ALLOW_UNKNOWN_PROTOCOLS: true // DOMPurify usually strips non http(s) links from hrefs
+        });
+        while (ref?.current?.firstChild) {
+            ref.current.removeChild(ref.current.firstChild);
+        }
+
+        ref?.current?.appendChild(host);
+    }, [markdownString]);
+
+    return ref;
+};

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

@@ -0,0 +1,59 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+import { ChatResponseContent, QuestionResponseContent } from '@theia/ai-chat';
+import { injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { ResponseNode } from '../chat-tree-view';
+
+@injectable()
+export class QuestionPartRenderer
+    implements ChatResponsePartRenderer<QuestionResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        if (QuestionResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+
+    render(question: QuestionResponseContent, node: ResponseNode): ReactNode {
+        return (
+            <div className="theia-QuestionPartRenderer-root">
+                <div className="theia-QuestionPartRenderer-question">{question.question}</div>
+                <div className="theia-QuestionPartRenderer-options">
+                    {
+                        question.options.map((option, index) => (
+                            <button
+                                className={`theia-button theia-QuestionPartRenderer-option ${question.selectedOption === option ? 'selected' : ''}`}
+                                onClick={() => {
+                                    question.selectedOption = option;
+                                    question.handler(option);
+                                }}
+                                disabled={question.selectedOption !== undefined || !node.response.isWaitingForInput}
+                                key={index}
+                            >
+                                {option.text}
+                            </button>
+                        ))
+                    }
+                </div>
+            </div>
+        );
+    }
+
+}

package/src/browser/chat-response-renderer/text-part-renderer.spec.ts

@@ -0,0 +1,50 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { TextPartRenderer } from './text-part-renderer';
+import { expect } from 'chai';
+import { ChatResponseContent } from '@theia/ai-chat';
+
+describe('TextPartRenderer', () => {
+
+    it('accepts all parts', () => {
+        const renderer = new TextPartRenderer();
+        expect(renderer.canHandle({ kind: 'text' })).to.be.greaterThan(0);
+        expect(renderer.canHandle({ kind: 'code' })).to.be.greaterThan(0);
+        expect(renderer.canHandle({ kind: 'command' })).to.be.greaterThan(0);
+        expect(renderer.canHandle({ kind: 'error' })).to.be.greaterThan(0);
+        expect(renderer.canHandle({ kind: 'horizontal' })).to.be.greaterThan(0);
+        expect(renderer.canHandle({ kind: 'informational' })).to.be.greaterThan(0);
+        expect(renderer.canHandle({ kind: 'markdownContent' })).to.be.greaterThan(0);
+        expect(renderer.canHandle({ kind: 'toolCall' })).to.be.greaterThan(0);
+        expect(renderer.canHandle(undefined as unknown as ChatResponseContent)).to.be.greaterThan(0);
+    });
+
+    it('renders text correctly', () => {
+        const renderer = new TextPartRenderer();
+        const part = { kind: 'text', asString: () => 'Hello, World!' };
+        const node = renderer.render(part);
+        expect(JSON.stringify(node)).to.contain('Hello, World!');
+    });
+
+    it('handles undefined content gracefully', () => {
+        const renderer = new TextPartRenderer();
+        const part = undefined as unknown as ChatResponseContent;
+        const node = renderer.render(part);
+        expect(node).to.exist;
+    });
+
+});

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

@@ -0,0 +1,35 @@
+// *****************************************************************************
+// Copyright (C) 2024 EclipseSource GmbH.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+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 * as React from '@theia/core/shared/react';
+
+@injectable()
+export class TextPartRenderer implements ChatResponsePartRenderer<ChatResponseContent> {
+    canHandle(_reponse: ChatResponseContent): number {
+        // this is the fallback renderer
+        return 1;
+    }
+    render(response: ChatResponseContent): ReactNode {
+        if (response && ChatResponseContent.hasAsString(response)) {
+            return <span>{response.asString()}</span>;
+        }
+        return <span>Can't display response, please check your ChatResponsePartRenderers! {JSON.stringify(response)}</span>;
+    }
+}