@theia/ai-chat-ui 1.54.0

package/src/browser/chat-response-renderer/ai-editor-manager.ts

@@ -0,0 +1,183 @@
+// *****************************************************************************
+// 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 { CancellationToken, ContributionProvider, Prioritizeable, RecursivePartial, URI } from '@theia/core';
+import { inject, injectable, named } from '@theia/core/shared/inversify';
+import { EditorOpenerOptions, EditorWidget, Range } from '@theia/editor/lib/browser';
+
+import { EditorPreviewManager } from '@theia/editor-preview/lib/browser/editor-preview-manager';
+import { DocumentSymbol } from '@theia/monaco-editor-core/esm/vs/editor/common/languages';
+import { TextModel } from '@theia/monaco-editor-core/esm/vs/editor/common/model/textModel';
+import { ILanguageFeaturesService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/languageFeatures';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+import { MonacoToProtocolConverter } from '@theia/monaco/lib/browser/monaco-to-protocol-converter';
+
+/** Regex to match GitHub-style position and range declaration with line (L) and column (C) */
+export const LOCATION_REGEX = /#L(\d+)?(?:C(\d+))?(?:-L(\d+)?(?:C(\d+))?)?$/;
+
+export const AIEditorSelectionResolver = Symbol('AIEditorSelectionResolver');
+export interface AIEditorSelectionResolver {
+    /**
+     * The priority of the resolver. A higher value resolver will be called before others.
+     */
+    priority?: number;
+    resolveSelection(widget: EditorWidget, options: EditorOpenerOptions, uri?: URI): Promise<RecursivePartial<Range> | undefined>
+}
+
+@injectable()
+export class GitHubSelectionResolver implements AIEditorSelectionResolver {
+    priority = 100;
+
+    async resolveSelection(widget: EditorWidget, options: EditorOpenerOptions, uri?: URI): Promise<RecursivePartial<Range> | undefined> {
+        if (!uri) {
+            return;
+        }
+        // We allow the GitHub syntax of selecting a range in markdown 'L1', 'L1-L2' 'L1-C1_L2-C2' (starting at line 1 and column 1)
+        const match = uri?.toString().match(LOCATION_REGEX);
+        if (!match) {
+            return;
+        }
+        // we need to adapt the position information from one-based (in GitHub) to zero-based (in Theia)
+        const startLine = match[1] ? parseInt(match[1], 10) - 1 : undefined;
+        // if no start column is given, we assume the start of the line
+        const startColumn = match[2] ? parseInt(match[2], 10) - 1 : 0;
+        const endLine = match[3] ? parseInt(match[3], 10) - 1 : undefined;
+        // if no end column is given, we assume the end of the line
+        const endColumn = match[4] ? parseInt(match[4], 10) - 1 : endLine ? widget.editor.document.getLineMaxColumn(endLine) : undefined;
+
+        return {
+            start: { line: startLine, character: startColumn },
+            end: { line: endLine, character: endColumn }
+        };
+    }
+}
+
+@injectable()
+export class TypeDocSymbolSelectionResolver implements AIEditorSelectionResolver {
+    priority = 50;
+
+    @inject(MonacoToProtocolConverter) protected readonly m2p: MonacoToProtocolConverter;
+
+    async resolveSelection(widget: EditorWidget, options: EditorOpenerOptions, uri?: URI): Promise<RecursivePartial<Range> | undefined> {
+        if (!uri) {
+            return;
+        }
+        const editor = MonacoEditor.get(widget);
+        const monacoEditor = editor?.getControl();
+        if (!monacoEditor) {
+            return;
+        }
+        const symbolPath = this.findSymbolPath(uri);
+        if (!symbolPath) {
+            return;
+        }
+        const textModel = monacoEditor.getModel() as unknown as TextModel;
+        if (!textModel) {
+            return;
+        }
+
+        // try to find the symbol through the document symbol provider
+        // support referencing nested symbols by separating a dot path similar to TypeDoc
+        for (const provider of StandaloneServices.get(ILanguageFeaturesService).documentSymbolProvider.ordered(textModel)) {
+            const symbols = await provider.provideDocumentSymbols(textModel, CancellationToken.None);
+            const match = this.findSymbolByPath(symbols ?? [], symbolPath);
+            if (match) {
+                return this.m2p.asRange(match.selectionRange);
+            }
+        }
+    }
+
+    protected findSymbolPath(uri: URI): string[] | undefined {
+        return uri.fragment.split('.');
+    }
+
+    protected findSymbolByPath(symbols: DocumentSymbol[], symbolPath: string[]): DocumentSymbol | undefined {
+        if (!symbols || symbolPath.length === 0) {
+            return undefined;
+        }
+        let matchedSymbol: DocumentSymbol | undefined = undefined;
+        let currentSymbols = symbols;
+        for (const part of symbolPath) {
+            matchedSymbol = currentSymbols.find(symbol => symbol.name === part);
+            if (!matchedSymbol) {
+                return undefined;
+            }
+            currentSymbols = matchedSymbol.children || [];
+        }
+        return matchedSymbol;
+    }
+}
+
+@injectable()
+export class TextFragmentSelectionResolver implements AIEditorSelectionResolver {
+    async resolveSelection(widget: EditorWidget, options: EditorOpenerOptions, uri?: URI): Promise<RecursivePartial<Range> | undefined> {
+        if (!uri) {
+            return;
+        }
+        const fragment = this.findFragment(uri);
+        if (!fragment) {
+            return;
+        }
+        const matches = widget.editor.document.findMatches?.({ isRegex: false, matchCase: false, matchWholeWord: false, searchString: fragment }) ?? [];
+        if (matches.length > 0) {
+            return {
+                start: {
+                    line: matches[0].range.start.line - 1,
+                    character: matches[0].range.start.character - 1
+                },
+                end: {
+                    line: matches[0].range.end.line - 1,
+                    character: matches[0].range.end.character - 1
+                }
+            };
+        }
+    }
+
+    protected findFragment(uri: URI): string | undefined {
+        return uri.fragment;
+    }
+}
+
+@injectable()
+export class AIEditorManager extends EditorPreviewManager {
+    @inject(ContributionProvider) @named(AIEditorSelectionResolver)
+    protected readonly resolvers: ContributionProvider<AIEditorSelectionResolver>;
+
+    protected override async revealSelection(widget: EditorWidget, options: EditorOpenerOptions = {}, uri?: URI): Promise<void> {
+        if (!options.selection) {
+            options.selection = await this.resolveSelection(options, widget, uri);
+        }
+        super.revealSelection(widget, options, uri);
+    }
+
+    protected async resolveSelection(options: EditorOpenerOptions, widget: EditorWidget, uri: URI | undefined): Promise<RecursivePartial<Range> | undefined> {
+        if (!options.selection) {
+            const orderedResolvers = Prioritizeable.prioritizeAllSync(this.resolvers.getContributions(), resolver => resolver.priority ?? 1);
+            for (const linkResolver of orderedResolvers) {
+                try {
+                    const selection = await linkResolver.value.resolveSelection(widget, options, uri);
+                    if (selection) {
+                        return selection;
+                    }
+                } catch (error) {
+                    console.error(error);
+                }
+            }
+        }
+        return undefined;
+    }
+}

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

@@ -0,0 +1,208 @@
+// *****************************************************************************
+// 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 <button className='theia-button main' onClick={copyCodeToClipboard}>Copy</button>;
+};
+
+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 <button className='theia-button main' onClick={insertCode}>Insert at Cursor</button>;
+};
+
+/**
+ * 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: 'on',
+            maxHeight: -1,
+            scrollbar: { vertical: 'hidden', horizontal: 'hidden' },
+            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 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,71 @@
+// *****************************************************************************
+// 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,
+    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 { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
+import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
+
+@injectable()
+export class MarkdownPartRenderer implements ChatResponsePartRenderer<MarkdownChatResponseContent | InformationalChatResponseContent> {
+    @inject(MarkdownRenderer) private renderer: MarkdownRenderer;
+    canHandle(response: ChatResponseContent): number {
+        if (MarkdownChatResponseContent.is(response)) {
+            return 10;
+        }
+        if (InformationalChatResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+    private renderMarkdown(md: MarkdownString): HTMLElement {
+        return this.renderer.render(md).element;
+    }
+    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 <MarkdownWrapper data={response.content} renderCallback={this.renderMarkdown.bind(this)}></MarkdownWrapper>;
+    }
+
+}
+
+export const MarkdownWrapper = (props: { data: MarkdownString, renderCallback: (md: MarkdownString) => HTMLElement }) => {
+    // eslint-disable-next-line no-null/no-null
+    const ref: React.MutableRefObject<HTMLDivElement | null> = useRef(null);
+
+    useEffect(() => {
+        const myDomElement = props.renderCallback(props.data);
+
+        while (ref?.current?.firstChild) {
+            ref.current.removeChild(ref.current.firstChild);
+        }
+
+        ref?.current?.appendChild(myDomElement);
+    }, [props.data.value]);
+
+    return <div ref={ref}></div>;
+};