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

package/src/browser/chat-view-commands.ts

@@ -0,0 +1,45 @@
+// *****************************************************************************
+// 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 { Command, nls } from '@theia/core';
+import { codicon } from '@theia/core/lib/browser';
+
+export namespace ChatCommands {
+    const CHAT_CATEGORY = 'Chat';
+    const CHAT_CATEGORY_KEY = nls.getDefaultKey(CHAT_CATEGORY);
+
+    export const SCROLL_LOCK_WIDGET = Command.toLocalizedCommand({
+        id: 'chat:widget:lock',
+        category: CHAT_CATEGORY,
+        iconClass: codicon('unlock')
+    }, '', CHAT_CATEGORY_KEY);
+
+    export const SCROLL_UNLOCK_WIDGET = Command.toLocalizedCommand({
+        id: 'chat:widget:unlock',
+        category: CHAT_CATEGORY,
+        iconClass: codicon('lock')
+    }, '', CHAT_CATEGORY_KEY);
+}
+
+export const AI_CHAT_NEW_CHAT_WINDOW_COMMAND: Command = {
+    id: 'ai-chat-ui.new-chat',
+    iconClass: codicon('add')
+};
+
+export const AI_CHAT_SHOW_CHATS_COMMAND: Command = {
+    id: 'ai-chat-ui.show-chats',
+    iconClass: codicon('history')
+};

package/src/browser/chat-view-contribution.ts

@@ -0,0 +1,154 @@
+// *****************************************************************************
+// 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 { Command, CommandContribution, CommandRegistry, CommandService, isObject, MenuContribution, MenuModelRegistry } from '@theia/core';
+import { CommonCommands, TreeNode } from '@theia/core/lib/browser';
+import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { ChatViewTreeWidget, isRequestNode, isResponseNode, RequestNode, ResponseNode } from './chat-tree-view/chat-view-tree-widget';
+import { AIChatInputWidget } from './chat-input-widget';
+
+export namespace ChatViewCommands {
+    export const COPY_MESSAGE = Command.toDefaultLocalizedCommand({
+        id: 'chat.copy.message',
+        label: 'Copy Message'
+    });
+    export const COPY_ALL = Command.toDefaultLocalizedCommand({
+        id: 'chat.copy.all',
+        label: 'Copy All'
+    });
+    export const COPY_CODE = Command.toDefaultLocalizedCommand({
+        id: 'chat.copy.code',
+        label: 'Copy Code Block'
+    });
+}
+
+@injectable()
+export class ChatViewMenuContribution implements MenuContribution, CommandContribution {
+
+    @inject(ClipboardService)
+    protected readonly clipboardService: ClipboardService;
+
+    @inject(CommandService)
+    protected readonly commandService: CommandService;
+
+    registerCommands(commands: CommandRegistry): void {
+        commands.registerHandler(CommonCommands.COPY.id, {
+            execute: (...args: unknown[]) => {
+                if (window.getSelection()?.type !== 'Range' && containsRequestOrResponseNode(args)) {
+                    this.copyMessage(extractRequestOrResponseNodes(args));
+                } else {
+                    this.commandService.executeCommand(CommonCommands.COPY.id);
+                }
+            },
+            isEnabled: (...args: unknown[]) => containsRequestOrResponseNode(args)
+        });
+        commands.registerCommand(ChatViewCommands.COPY_MESSAGE, {
+            execute: (...args: unknown[]) => {
+                if (containsRequestOrResponseNode(args)) {
+                    this.copyMessage(extractRequestOrResponseNodes(args));
+                }
+            },
+            isEnabled: (...args: unknown[]) => containsRequestOrResponseNode(args)
+        });
+        commands.registerCommand(ChatViewCommands.COPY_ALL, {
+            execute: (...args: unknown[]) => {
+                if (containsRequestOrResponseNode(args)) {
+                    const parent = extractRequestOrResponseNodes(args).find(arg => arg.parent)?.parent;
+                    const text = parent?.children
+                        .filter(isRequestOrResponseNode)
+                        .map(child => this.getText(child))
+                        .join('\n\n---\n\n');
+                    if (text) {
+                        this.clipboardService.writeText(text);
+                    }
+                }
+            },
+            isEnabled: (...args: unknown[]) => containsRequestOrResponseNode(args)
+        });
+        commands.registerCommand(ChatViewCommands.COPY_CODE, {
+            execute: (...args: unknown[]) => {
+                if (containsCode(args)) {
+                    const code = args
+                        .filter(isCodeArg)
+                        .map(arg => arg.code)
+                        .join();
+                    this.clipboardService.writeText(code);
+                }
+            },
+            isEnabled: (...args: unknown[]) => containsRequestOrResponseNode(args) && containsCode(args)
+        });
+    }
+
+    protected copyMessage(args: (RequestNode | ResponseNode)[]): void {
+        const text = this.getTextAndJoin(args);
+        this.clipboardService.writeText(text);
+    }
+
+    protected getTextAndJoin(args: (RequestNode | ResponseNode)[] | undefined): string {
+        return args !== undefined ? args.map(arg => this.getText(arg)).join() : '';
+    }
+
+    protected getText(arg: RequestNode | ResponseNode): string {
+        if (isRequestNode(arg)) {
+            return arg.request.request.text;
+        } else if (isResponseNode(arg)) {
+            return arg.response.response.asString();
+        }
+        return '';
+    }
+
+    registerMenus(menus: MenuModelRegistry): void {
+        menus.registerMenuAction([...ChatViewTreeWidget.CONTEXT_MENU, '_1'], {
+            commandId: CommonCommands.COPY.id
+        });
+        menus.registerMenuAction([...ChatViewTreeWidget.CONTEXT_MENU, '_1'], {
+            commandId: ChatViewCommands.COPY_MESSAGE.id
+        });
+        menus.registerMenuAction([...ChatViewTreeWidget.CONTEXT_MENU, '_1'], {
+            commandId: ChatViewCommands.COPY_ALL.id
+        });
+        menus.registerMenuAction([...ChatViewTreeWidget.CONTEXT_MENU, '_1'], {
+            commandId: ChatViewCommands.COPY_CODE.id
+        });
+        menus.registerMenuAction([...AIChatInputWidget.CONTEXT_MENU, '_1'], {
+            commandId: CommonCommands.COPY.id
+        });
+        menus.registerMenuAction([...AIChatInputWidget.CONTEXT_MENU, '_1'], {
+            commandId: CommonCommands.PASTE.id
+        });
+    }
+
+}
+
+function extractRequestOrResponseNodes(args: unknown[]): (RequestNode | ResponseNode)[] {
+    return args.filter(arg => isRequestOrResponseNode(arg)) as (RequestNode | ResponseNode)[];
+}
+
+function containsRequestOrResponseNode(args: unknown[]): args is (unknown | RequestNode | ResponseNode)[] {
+    return extractRequestOrResponseNodes(args).length > 0;
+}
+
+function isRequestOrResponseNode(arg: unknown): arg is RequestNode | ResponseNode {
+    return TreeNode.is(arg) && (isRequestNode(arg) || isResponseNode(arg));
+}
+
+function containsCode(args: unknown[]): args is (unknown | { code: string })[] {
+    return args.filter(arg => isCodeArg(arg)).length > 0;
+}
+
+function isCodeArg(arg: unknown): arg is { code: string } {
+    return isObject(arg) && 'code' in arg;
+}

package/src/browser/chat-view-language-contribution.ts

@@ -0,0 +1,141 @@
+// *****************************************************************************
+// 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 { inject, injectable, named } from '@theia/core/shared/inversify';
+import { FrontendApplication, FrontendApplicationContribution } from '@theia/core/lib/browser';
+import * as monaco from '@theia/monaco-editor-core';
+import { ContributionProvider, MaybePromise } from '@theia/core';
+import { ProviderResult } from '@theia/monaco-editor-core/esm/vs/editor/common/languages';
+import { ChatAgentService } from '@theia/ai-chat';
+import { AIVariableService } from '@theia/ai-core/lib/common';
+import { ToolProvider } from '@theia/ai-core/lib/common/tool-invocation-registry';
+
+export const CHAT_VIEW_LANGUAGE_ID = 'theia-ai-chat-view-language';
+export const CHAT_VIEW_LANGUAGE_EXTENSION = 'aichatviewlanguage';
+
+@injectable()
+export class ChatViewLanguageContribution implements FrontendApplicationContribution {
+
+    @inject(ChatAgentService)
+    protected readonly agentService: ChatAgentService;
+
+    @inject(AIVariableService)
+    protected readonly variableService: AIVariableService;
+
+    @inject(ContributionProvider)
+    @named(ToolProvider)
+    private providers: ContributionProvider<ToolProvider>;
+
+    onStart(_app: FrontendApplication): MaybePromise<void> {
+        console.log('ChatViewLanguageContribution started');
+        monaco.languages.register({ id: CHAT_VIEW_LANGUAGE_ID, extensions: [CHAT_VIEW_LANGUAGE_EXTENSION] });
+
+        monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
+            triggerCharacters: ['@'],
+            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideAgentCompletions(model, position),
+        });
+        monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
+            triggerCharacters: ['#'],
+            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideVariableCompletions(model, position),
+        });
+        monaco.languages.registerCompletionItemProvider(CHAT_VIEW_LANGUAGE_ID, {
+            triggerCharacters: ['~'],
+            provideCompletionItems: (model, position, _context, _token): ProviderResult<monaco.languages.CompletionList> => this.provideToolCompletions(model, position),
+        });
+    }
+
+    getCompletionRange(model: monaco.editor.ITextModel, position: monaco.Position, triggerCharacter: string): monaco.Range | undefined {
+        // Check if the character before the current position is the trigger character
+        const lineContent = model.getLineContent(position.lineNumber);
+        const characterBefore = lineContent[position.column - 2]; // Get the character before the current position
+
+        if (characterBefore !== triggerCharacter) {
+            // Do not return agent suggestions if the user didn't just type the trigger character
+            return undefined;
+        }
+
+        // Calculate the range from the position of the '@' character
+        const wordInfo = model.getWordUntilPosition(position);
+        return new monaco.Range(
+            position.lineNumber,
+            wordInfo.startColumn,
+            position.lineNumber,
+            position.column
+        );
+    }
+
+    private getSuggestions<T>(
+        model: monaco.editor.ITextModel,
+        position: monaco.Position,
+        triggerChar: string,
+        items: T[],
+        kind: monaco.languages.CompletionItemKind,
+        getId: (item: T) => string,
+        getName: (item: T) => string,
+        getDescription: (item: T) => string
+    ): ProviderResult<monaco.languages.CompletionList> {
+        const completionRange = this.getCompletionRange(model, position, triggerChar);
+        if (completionRange === undefined) {
+            return { suggestions: [] };
+        }
+        const suggestions = items.map(item => ({
+            insertText: getId(item),
+            kind: kind,
+            label: getName(item),
+            range: completionRange,
+            detail: getDescription(item),
+        }));
+        return { suggestions };
+    }
+
+    provideAgentCompletions(model: monaco.editor.ITextModel, position: monaco.Position): ProviderResult<monaco.languages.CompletionList> {
+        return this.getSuggestions(
+            model,
+            position,
+            '@',
+            this.agentService.getAgents(),
+            monaco.languages.CompletionItemKind.Value,
+            agent => agent.id,
+            agent => agent.name,
+            agent => agent.description
+        );
+    }
+
+    provideVariableCompletions(model: monaco.editor.ITextModel, position: monaco.Position): ProviderResult<monaco.languages.CompletionList> {
+        return this.getSuggestions(
+            model,
+            position,
+            '#',
+            this.variableService.getVariables(),
+            monaco.languages.CompletionItemKind.Variable,
+            variable => variable.name,
+            variable => variable.name,
+            variable => variable.description
+        );
+    }
+
+    provideToolCompletions(model: monaco.editor.ITextModel, position: monaco.Position): ProviderResult<monaco.languages.CompletionList> {
+        return this.getSuggestions(
+            model,
+            position,
+            '~',
+            this.providers.getContributions().map(provider => provider.getTool()),
+            monaco.languages.CompletionItemKind.Function,
+            tool => tool.id,
+            tool => tool.name,
+            tool => tool.description ?? ''
+        );
+    }
+}

package/src/browser/chat-view-widget-toolbar-contribution.tsx

@@ -0,0 +1,54 @@
+// *****************************************************************************
+// 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 { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { AIChatContribution } from './ai-chat-ui-contribution';
+import { Emitter, nls } from '@theia/core';
+import { ChatCommands } from './chat-view-commands';
+
+@injectable()
+export class ChatViewWidgetToolbarContribution implements TabBarToolbarContribution {
+    @inject(AIChatContribution)
+    protected readonly chatContribution: AIChatContribution;
+
+    protected readonly onChatWidgetStateChangedEmitter = new Emitter<void>();
+    protected readonly onChatWidgetStateChanged = this.onChatWidgetStateChangedEmitter.event;
+
+    @postConstruct()
+    protected init(): void {
+        this.chatContribution.widget.then(widget => {
+            widget.onStateChanged(() => this.onChatWidgetStateChangedEmitter.fire());
+        });
+    }
+
+    registerToolbarItems(registry: TabBarToolbarRegistry): void {
+        registry.registerItem({
+            id: ChatCommands.SCROLL_LOCK_WIDGET.id,
+            command: ChatCommands.SCROLL_LOCK_WIDGET.id,
+            tooltip: nls.localizeByDefault('Turn Auto Scrolling Off'),
+            onDidChange: this.onChatWidgetStateChanged,
+            priority: 2
+        });
+        registry.registerItem({
+            id: ChatCommands.SCROLL_UNLOCK_WIDGET.id,
+            command: ChatCommands.SCROLL_UNLOCK_WIDGET.id,
+            tooltip: nls.localizeByDefault('Turn Auto Scrolling On'),
+            onDidChange: this.onChatWidgetStateChanged,
+            priority: 2
+        });
+    }
+}

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

@@ -0,0 +1,194 @@
+// *****************************************************************************
+// 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 { CommandService, deepClone, Emitter, Event, MessageService } from '@theia/core';
+import { ChatRequest, ChatRequestModel, ChatRequestModelImpl, ChatService, ChatSession } from '@theia/ai-chat';
+import { BaseWidget, codicon, ExtractableWidget, PanelLayout, PreferenceService, StatefulWidget } from '@theia/core/lib/browser';
+import { nls } from '@theia/core/lib/common/nls';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { AIChatInputWidget } from './chat-input-widget';
+import { ChatViewTreeWidget } from './chat-tree-view/chat-view-tree-widget';
+import { AIActivationService } from '@theia/ai-core/lib/browser/ai-activation-service';
+
+export namespace ChatViewWidget {
+    export interface State {
+        locked?: boolean;
+    }
+}
+
+@injectable()
+export class ChatViewWidget extends BaseWidget implements ExtractableWidget, StatefulWidget {
+
+    public static ID = 'chat-view-widget';
+    static LABEL = `✨ ${nls.localizeByDefault('Chat')} [Experimental]`;
+
+    @inject(ChatService)
+    protected chatService: ChatService;
+
+    @inject(MessageService)
+    protected messageService: MessageService;
+
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
+    @inject(CommandService)
+    protected readonly commandService: CommandService;
+
+    @inject(AIActivationService)
+    protected readonly activationService: AIActivationService;
+
+    protected chatSession: ChatSession;
+
+    protected _state: ChatViewWidget.State = { locked: false };
+    protected readonly onStateChangedEmitter = new Emitter<ChatViewWidget.State>();
+
+    secondaryWindow: Window | undefined;
+
+    constructor(
+        @inject(ChatViewTreeWidget)
+        readonly treeWidget: ChatViewTreeWidget,
+        @inject(AIChatInputWidget)
+        readonly inputWidget: AIChatInputWidget
+    ) {
+        super();
+        this.id = ChatViewWidget.ID;
+        this.title.label = ChatViewWidget.LABEL;
+        this.title.caption = ChatViewWidget.LABEL;
+        this.title.iconClass = codicon('comment-discussion');
+        this.title.closable = true;
+        this.node.classList.add('chat-view-widget');
+        this.update();
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.toDispose.pushAll([
+            this.treeWidget,
+            this.inputWidget,
+            this.onStateChanged(newState => {
+                this.treeWidget.shouldScrollToEnd = !newState.locked;
+                this.update();
+            })
+        ]);
+        const layout = this.layout = new PanelLayout();
+
+        this.treeWidget.node.classList.add('chat-tree-view-widget');
+        layout.addWidget(this.treeWidget);
+        this.inputWidget.node.classList.add('chat-input-widget');
+        layout.addWidget(this.inputWidget);
+        this.chatSession = this.chatService.createSession();
+
+        this.inputWidget.onQuery = this.onQuery.bind(this);
+        this.inputWidget.onCancel = this.onCancel.bind(this);
+        this.inputWidget.chatModel = this.chatSession.model;
+        this.treeWidget.trackChatModel(this.chatSession.model);
+
+        this.initListeners();
+
+        this.inputWidget.setEnabled(this.activationService.isActive);
+        this.treeWidget.setEnabled(this.activationService.isActive);
+
+        this.activationService.onDidChangeActiveStatus(change => {
+            this.treeWidget.setEnabled(change);
+            this.inputWidget.setEnabled(change);
+            this.update();
+        });
+    }
+
+    protected initListeners(): void {
+        this.toDispose.push(
+            this.chatService.onActiveSessionChanged(event => {
+                const session = event.sessionId ? this.chatService.getSession(event.sessionId) : this.chatService.createSession();
+                if (session) {
+                    this.chatSession = session;
+                    this.treeWidget.trackChatModel(this.chatSession.model);
+                    this.inputWidget.chatModel = this.chatSession.model;
+                    if (event.focus) {
+                        this.show();
+                    }
+                } else {
+                    console.warn(`Session with ${event.sessionId} not found.`);
+                }
+            })
+        );
+    }
+
+    storeState(): object {
+        return this.state;
+    }
+
+    restoreState(oldState: object & Partial<ChatViewWidget.State>): void {
+        const copy = deepClone(this.state);
+        if (oldState.locked) {
+            copy.locked = oldState.locked;
+        }
+        this.state = copy;
+    }
+
+    protected get state(): ChatViewWidget.State {
+        return this._state;
+    }
+
+    protected set state(state: ChatViewWidget.State) {
+        this._state = state;
+        this.onStateChangedEmitter.fire(this._state);
+    }
+
+    get onStateChanged(): Event<ChatViewWidget.State> {
+        return this.onStateChangedEmitter.event;
+    }
+
+    protected async onQuery(query: string): Promise<void> {
+        if (query.length === 0) { return; }
+
+        const chatRequest: ChatRequest = {
+            text: query
+        };
+
+        const requestProgress = await this.chatService.sendRequest(this.chatSession.id, chatRequest);
+        requestProgress?.responseCompleted.then(responseModel => {
+            if (responseModel.isError) {
+                this.messageService.error(responseModel.errorObject?.message ?? 'An error occurred druring chat service invocation.');
+            }
+        });
+        if (!requestProgress) {
+            this.messageService.error(`Was not able to send request "${chatRequest.text}" to session ${this.chatSession.id}`);
+            return;
+        }
+        // Tree Widget currently tracks the ChatModel itself. Therefore no notification necessary.
+    }
+
+    protected onCancel(requestModel: ChatRequestModel): void {
+        // TODO we should pass a cancellation token with the request (or retrieve one from the request invocation) so we can cleanly cancel here
+        // For now we cancel manually via casting
+        (requestModel as ChatRequestModelImpl).response.cancel();
+    }
+
+    lock(): void {
+        this.state = { ...deepClone(this.state), locked: true };
+    }
+
+    unlock(): void {
+        this.state = { ...deepClone(this.state), locked: false };
+    }
+
+    get isLocked(): boolean {
+        return !!this.state.locked;
+    }
+
+    get isExtractable(): boolean {
+        return this.secondaryWindow === undefined;
+    }
+}