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

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

@@ -0,0 +1,262 @@
+// *****************************************************************************
+// 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 { ChatAgent, ChatAgentService, ChatModel, ChatRequestModel } from '@theia/ai-chat';
+import { UntitledResourceResolver } from '@theia/core';
+import { ContextMenuRenderer, Message, ReactWidget } from '@theia/core/lib/browser';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
+import * as React from '@theia/core/shared/react';
+import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
+import { CHAT_VIEW_LANGUAGE_EXTENSION } from './chat-view-language-contribution';
+import { IMouseEvent } from '@theia/monaco-editor-core';
+
+type Query = (query: string) => Promise<void>;
+type Cancel = (requestModel: ChatRequestModel) => void;
+
+@injectable()
+export class AIChatInputWidget extends ReactWidget {
+    public static ID = 'chat-input-widget';
+    static readonly CONTEXT_MENU = ['chat-input-context-menu'];
+
+    @inject(ChatAgentService)
+    protected readonly agentService: ChatAgentService;
+
+    @inject(MonacoEditorProvider)
+    protected readonly editorProvider: MonacoEditorProvider;
+
+    @inject(UntitledResourceResolver)
+    protected readonly untitledResourceResolver: UntitledResourceResolver;
+
+    @inject(ContextMenuRenderer)
+    protected readonly contextMenuRenderer: ContextMenuRenderer;
+
+    protected isEnabled = false;
+
+    private _onQuery: Query;
+    set onQuery(query: Query) {
+        this._onQuery = query;
+    }
+    private _onCancel: Cancel;
+    set onCancel(cancel: Cancel) {
+        this._onCancel = cancel;
+    }
+    private _chatModel: ChatModel;
+    set chatModel(chatModel: ChatModel) {
+        this._chatModel = chatModel;
+        this.update();
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.id = AIChatInputWidget.ID;
+        this.title.closable = false;
+        this.update();
+    }
+    protected override onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        this.node.focus({ preventScroll: true });
+    }
+
+    protected getChatAgents(): ChatAgent[] {
+        return this.agentService.getAgents();
+    }
+
+    protected render(): React.ReactNode {
+        return (
+            <ChatInput
+                onQuery={this._onQuery.bind(this)}
+                onCancel={this._onCancel.bind(this)}
+                chatModel={this._chatModel}
+                getChatAgents={this.getChatAgents.bind(this)}
+                editorProvider={this.editorProvider}
+                untitledResourceResolver={this.untitledResourceResolver}
+                contextMenuCallback={this.handleContextMenu.bind(this)}
+                isEnabled={this.isEnabled}
+            />
+        );
+    }
+
+    public setEnabled(enabled: boolean): void {
+        this.isEnabled = enabled;
+        this.update();
+    }
+
+    protected handleContextMenu(event: IMouseEvent): void {
+        this.contextMenuRenderer.render({
+            menuPath: AIChatInputWidget.CONTEXT_MENU,
+            anchor: { x: event.posx, y: event.posy },
+        });
+        event.preventDefault();
+    }
+
+}
+
+interface ChatInputProperties {
+    onCancel: (requestModel: ChatRequestModel) => void;
+    onQuery: (query: string) => void;
+    isEnabled?: boolean;
+    chatModel: ChatModel;
+    getChatAgents: () => ChatAgent[];
+    editorProvider: MonacoEditorProvider;
+    untitledResourceResolver: UntitledResourceResolver;
+    contextMenuCallback: (event: IMouseEvent) => void;
+}
+const ChatInput: React.FunctionComponent<ChatInputProperties> = (props: ChatInputProperties) => {
+
+    const [inProgress, setInProgress] = React.useState(false);
+    // eslint-disable-next-line no-null/no-null
+    const editorContainerRef = React.useRef<HTMLDivElement | null>(null);
+    // eslint-disable-next-line no-null/no-null
+    const placeholderRef = React.useRef<HTMLDivElement | null>(null);
+    const editorRef = React.useRef<MonacoEditor | undefined>(undefined);
+    const allRequests = props.chatModel.getRequests();
+    const lastRequest = allRequests.length === 0 ? undefined : allRequests[allRequests.length - 1];
+
+    const createInputElement = async () => {
+        const paddingTop = 8;
+        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!, {
+            language: CHAT_VIEW_LANGUAGE_EXTENSION,
+            // Disable code lens, inlay hints and hover support to avoid console errors from other contributions
+            codeLens: false,
+            inlayHints: { enabled: 'off' },
+            hover: { enabled: false },
+            autoSizing: false, // we handle the sizing ourselves
+            scrollBeyondLastLine: false,
+            scrollBeyondLastColumn: 0,
+            minHeight: 1,
+            fontFamily: 'var(--theia-ui-font-family)',
+            fontSize: 13,
+            cursorWidth: 1,
+            maxHeight: -1,
+            scrollbar: { horizontal: 'hidden' },
+            automaticLayout: true,
+            lineNumbers: 'off',
+            lineHeight,
+            padding: { top: paddingTop },
+            suggest: {
+                showIcons: true,
+                showSnippets: false,
+                showWords: false,
+                showStatusBar: false,
+                insertMode: 'replace',
+            },
+            bracketPairColorization: { enabled: false },
+            wrappingStrategy: 'advanced',
+            stickyScroll: { enabled: false },
+        });
+
+        if (editorContainerRef.current) {
+            editorContainerRef.current.style.height = (lineHeight + (2 * paddingTop)) + 'px';
+        }
+
+        const updateEditorHeight = () => {
+            if (editorContainerRef.current) {
+                const contentHeight = editor.getControl().getContentHeight() + paddingTop;
+                editorContainerRef.current.style.height = `${Math.min(contentHeight, maxHeight)}px`;
+            }
+        };
+        editor.getControl().onDidChangeModelContent(updateEditorHeight);
+        const resizeObserver = new ResizeObserver(updateEditorHeight);
+        if (editorContainerRef.current) {
+            resizeObserver.observe(editorContainerRef.current);
+        }
+        editor.getControl().onDidDispose(() => {
+            resizeObserver.disconnect();
+        });
+
+        editor.getControl().onContextMenu(e =>
+            props.contextMenuCallback(e.event)
+        );
+
+        editorRef.current = editor;
+    };
+
+    React.useEffect(() => {
+        createInputElement();
+        return () => {
+            if (editorRef.current) {
+                editorRef.current.dispose();
+            }
+        };
+    }, []);
+
+    React.useEffect(() => {
+        const listener = lastRequest?.response.onDidChange(() => {
+            if (lastRequest.response.isCanceled || lastRequest.response.isComplete || lastRequest.response.isError) {
+                setInProgress(false);
+            }
+        });
+        return () => listener?.dispose();
+    }, [lastRequest]);
+
+    function submit(value: string): void {
+        setInProgress(true);
+        props.onQuery(value);
+        if (editorRef.current) {
+            editorRef.current.document.textEditorModel.setValue('');
+        }
+    }
+
+    const onKeyDown = React.useCallback((event: React.KeyboardEvent) => {
+        if (!props.isEnabled) {
+            return;
+        }
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            submit(editorRef.current?.document.textEditorModel.getValue() || '');
+        }
+    }, [props.isEnabled]);
+
+    const handleInputFocus = () => {
+        placeholderRef.current?.classList.add('hidden');
+    };
+
+    const handleInputBlur = () => {
+        if (!editorRef.current?.getControl().getValue()) {
+            placeholderRef.current?.classList.remove('hidden');
+        }
+    };
+
+    return <div className='theia-ChatInput'>
+        <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>
+        </div>
+        <div className="theia-ChatInputOptions">
+            {
+                inProgress ? <span
+                    className="codicon codicon-stop-circle option"
+                    title="Cancel (Esc)"
+                    onClick={() => {
+                        if (lastRequest) {
+                            props.onCancel(lastRequest);
+                        }
+                        setInProgress(false);
+                    }} /> :
+                    <span
+                        className="codicon codicon-send option"
+                        title="Send (Enter)"
+                        onClick={!props.isEnabled ? undefined : () => submit(editorRef.current?.document.textEditorModel.getValue() || '')}
+                        style={{ cursor: !props.isEnabled ? 'default' : 'pointer', opacity: !props.isEnabled ? 0.5 : 1 }}
+                    />
+            }
+        </div>
+    </div>;
+};

package/src/browser/chat-node-toolbar-action-contribution.ts

@@ -0,0 +1,63 @@
+// *****************************************************************************
+// 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 { RequestNode, ResponseNode } from './chat-tree-view';
+
+export interface ChatNodeToolbarAction {
+    /**
+     * The command to execute when the item is selected. The handler will receive the `RequestNode` or `ResponseNode` as first argument.
+     */
+    commandId: string;
+    /**
+     * Icon class name(s) for the item (e.g. 'codicon codicon-feedback').
+     */
+    icon: string;
+    /**
+     * Priority among the items. Can be negative. The smaller the number the left-most the item will be placed in the toolbar. It is `0` by default.
+     */
+    priority?: number;
+    /**
+     * Optional tooltip for the item.
+     */
+    tooltip?: string;
+}
+
+/**
+ * Clients implement this interface if they want to contribute to the toolbar of chat nodes.
+ *
+ * ### Example
+ * ```ts
+ * bind(ChatNodeToolbarActionContribution).toDynamicValue(context => ({
+ *  getToolbarActions: (args: RequestNode | ResponseNode) => {
+ *      if (isResponseNode(args)) {
+ *          return [{
+ *              commandId: 'core.about',
+ *              icon: 'codicon codicon-feedback',
+ *              tooltip: 'Show about dialog on response nodes'
+ *          }];
+ *      } else {
+ *          return [];
+ *      }
+ *  }
+ * }));
+ * ```
+ */
+export const ChatNodeToolbarActionContribution = Symbol('ChatNodeToolbarActionContribution');
+export interface ChatNodeToolbarActionContribution {
+    /**
+     * Returns the toolbar actions for the given node.
+     */
+    getToolbarActions(node: RequestNode | ResponseNode): ChatNodeToolbarAction[];
+}

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

@@ -0,0 +1,25 @@
+// *****************************************************************************
+// 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 } from '@theia/ai-chat/lib/common';
+import { ReactNode } from '@theia/core/shared/react';
+import { ResponseNode } from './chat-tree-view/chat-view-tree-widget';
+
+export const ChatResponsePartRenderer = Symbol('ChatResponsePartRenderer');
+export interface ChatResponsePartRenderer<T extends ChatResponseContent> {
+    canHandle(response: ChatResponseContent): number;
+    render(response: T, parentNode: ResponseNode): ReactNode;
+}

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;
+    }
+}