@theia/ai-chat-ui 1.60.2 → 1.61.0

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

@@ -14,15 +14,15 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 import { ChatAgentService } from '@theia/ai-chat';
-import { AIContextVariable, AIVariableService } from '@theia/ai-core/lib/common';
+import { AIVariableService } from '@theia/ai-core/lib/common';
 import { PromptText } from '@theia/ai-core/lib/common/prompt-text';
 import { ToolInvocationRegistry } from '@theia/ai-core/lib/common/tool-invocation-registry';
 import { MaybePromise, nls } from '@theia/core';
-import { ApplicationShell, FrontendApplication, FrontendApplicationContribution } from '@theia/core/lib/browser';
+import { FrontendApplication, FrontendApplicationContribution } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import * as monaco from '@theia/monaco-editor-core';
 import { ProviderResult } from '@theia/monaco-editor-core/esm/vs/editor/common/languages';
-import { ChatViewWidget } from './chat-view-widget';
+import { AIChatFrontendContribution, VARIABLE_ADD_CONTEXT_COMMAND } from '@theia/ai-chat/lib/browser/ai-chat-frontend-contribution';
 
 export const CHAT_VIEW_LANGUAGE_ID = 'theia-ai-chat-view-language';
 export const SETTINGS_LANGUAGE_ID = 'theia-ai-chat-settings-language';
@@ -30,7 +30,6 @@ export const CHAT_VIEW_LANGUAGE_EXTENSION = 'aichatviewlanguage';
 
 const VARIABLE_RESOLUTION_CONTEXT = { context: 'chat-input-autocomplete' };
 const VARIABLE_ARGUMENT_PICKER_COMMAND = 'trigger-variable-argument-picker';
-const VARIABLE_ADD_CONTEXT_COMMAND = 'add-context-variable';
 
 interface CompletionSource<T> {
     triggerCharacter: string;
@@ -54,8 +53,8 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
     @inject(ToolInvocationRegistry)
     protected readonly toolInvocationRegistry: ToolInvocationRegistry;
 
-    @inject(ApplicationShell)
-    protected readonly shell: ApplicationShell;
+    @inject(AIChatFrontendContribution)
+    protected readonly chatFrontendContribution: AIChatFrontendContribution;
 
     onStart(_app: FrontendApplication): MaybePromise<void> {
         monaco.languages.register({ id: CHAT_VIEW_LANGUAGE_ID, extensions: [CHAT_VIEW_LANGUAGE_EXTENSION] });
@@ -64,7 +63,6 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
         this.registerCompletionProviders();
 
         monaco.editor.registerCommand(VARIABLE_ARGUMENT_PICKER_COMMAND, this.triggerVariableArgumentPicker.bind(this));
-        monaco.editor.registerCommand(VARIABLE_ADD_CONTEXT_COMMAND, (_, ...args) => args.length > 1 ? this.addContextVariable(args[0], args[1]) : undefined);
     }
 
     protected registerCompletionProviders(): void {
@@ -205,12 +203,12 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
                 const items = await provider(model, position);
                 if (items) {
                     suggestions.push(...items.map(item => ({
-                        ...item,
                         command: {
-                            title: nls.localize('theia/ai/chat-ui/addContextVariable', 'Add context variable'),
-                            id: VARIABLE_ADD_CONTEXT_COMMAND,
+                            title: VARIABLE_ADD_CONTEXT_COMMAND.label!,
+                            id: VARIABLE_ADD_CONTEXT_COMMAND.id,
                             arguments: [variable.name, item.insertText]
-                        }
+                        },
+                        ...item,
                     })));
                 }
             }
@@ -262,22 +260,10 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
             text: arg
         }]);
 
-        await this.addContextVariable(variableName, arg);
+        await this.chatFrontendContribution.addContextVariable(variableName, arg);
     }
 
     protected getCharacterBeforePosition(model: monaco.editor.ITextModel, position: monaco.Position): string {
         return model.getLineContent(position.lineNumber)[position.column - 1 - 1];
     }
-
-    protected async addContextVariable(variableName: string, arg: string | undefined): Promise<void> {
-        const variable = this.variableService.getVariable(variableName);
-        if (!variable || !AIContextVariable.is(variable)) {
-            return;
-        }
-
-        const widget = this.shell.getWidgetById(ChatViewWidget.ID);
-        if (widget instanceof ChatViewWidget) {
-            widget.addContext({ variable, arg });
-        }
-    }
 }

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

@@ -22,6 +22,8 @@ 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';
 import { AIVariableResolutionRequest } from '@theia/ai-core';
+import { ProgressBarFactory } from '@theia/core/lib/browser/progress-bar-factory';
+import { FrontendVariableService } from '@theia/ai-core/lib/browser';
 
 export namespace ChatViewWidget {
     export interface State {
@@ -50,6 +52,12 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     @inject(AIActivationService)
     protected readonly activationService: AIActivationService;
 
+    @inject(FrontendVariableService)
+    protected readonly variableService: FrontendVariableService;
+
+    @inject(ProgressBarFactory)
+    protected readonly progressBarFactory: ProgressBarFactory;
+
     protected chatSession: ChatSession;
 
     protected _state: ChatViewWidget.State = { locked: false };
@@ -110,10 +118,11 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
             this.inputWidget.setEnabled(change);
             this.update();
         });
+        this.toDispose.push(this.progressBarFactory({ container: this.node, insertMode: 'prepend', locationId: 'ai-chat' }));
     }
 
     protected initListeners(): void {
-        this.toDispose.push(
+        this.toDispose.pushAll([
             this.chatService.onSessionEvent(event => {
                 if (!isActiveSessionChangedEvent(event)) {
                     return;
@@ -130,8 +139,12 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
                 } else {
                     console.warn(`Session with ${event.sessionId} not found.`);
                 }
+            }),
+            // The chat view needs to handle the submission of the edit request
+            this.treeWidget.onDidSubmitEdit(request => {
+                this.onQuery(request);
             })
-        );
+        ]);
     }
 
     protected override onActivateRequest(msg: Message): void {
@@ -164,10 +177,10 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         return this.onStateChangedEmitter.event;
     }
 
-    protected async onQuery(query: string): Promise<void> {
-        if (query.length === 0) { return; }
+    protected async onQuery(query: string | ChatRequest): Promise<void> {
+        const chatRequest: ChatRequest = typeof query === 'string' ? { text: query } : { ...query };
+        if (chatRequest.text.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) {

package/src/browser/style/index.css

@@ -149,6 +149,37 @@ div:last-child > .theia-ChatNode {
   color: var(--theia-badge-foreground);
 }
 
+.theia-RequestNode-Footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+}
+
+.theia-RequestNode-Footer .item {
+  opacity: var(--theia-mod-disabled-opacity);
+  cursor: default;
+  display: flex;
+  flex-direction: row;
+  column-gap: 0px;
+  align-items: center;
+}
+
+.theia-RequestNode-Footer .item.enabled {
+  cursor: pointer;
+  opacity: 1;
+}
+
+.theia-RequestNode-Footer :not(.item.enabled) .action-label {
+  background: transparent;
+  cursor: default;
+}
+
+.theia-RequestNode .theia-ChatInput-Editor-Box {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
 .chat-input-widget {
   align-items: flex-end;
   display: flex;
@@ -181,11 +212,19 @@ div:last-child > .theia-ChatNode {
   height: 18px;
   line-height: 16px;
   min-width: 0;
+  user-select: none;
+  cursor: pointer;
 }
 
-.theia-ChatInput-ChatContext-title {
-  flex: 10 1 auto;
+.theia-ChatInput-ChatContext-labelParts {
+  flex: 1;
   min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.theia-ChatInput-ChatContext-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -199,8 +238,6 @@ div:last-child > .theia-ChatNode {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1 10 auto;
-  min-width: 0;
 }
 
 .theia-ChatInput-ChatContext-Element .action {
@@ -301,6 +338,7 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInput-ChangeSet-List .theia-ChatInput-ChangeSet-Icon {
+  position: relative;
   padding-left: 2px;
   padding-right: 4px;
   min-width: var(--theia-icon-size);
@@ -325,11 +363,20 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInput-ChangeSet-additionalInfo {
+  align-items: center;
+  gap: 4px;
   margin-left: 8px;
   color: var(--theia-disabledForeground);
 }
 
+.theia-ChatInput-ChangeSet-List
+  .theia-ChatInput-ChangeSet-AdditionalInfo-SuffixIcon {
+  font-size: var(--theia-ui-font-size0) px;
+  margin-left: 4px;
+}
+
 .theia-ChatInput-ChangeSet-labelParts {
+  display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -354,6 +401,7 @@ div:last-child > .theia-ChatNode {
 .theia-ChatInput-ChangeSet-Header-Actions,
 .theia-ChatInput-ChangeSet-Box h3,
 .theia-ChatInput-ChangeSet-additionalInfo {
+  display: flex;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -698,3 +746,9 @@ details[open].collapsible-arguments .collapsible-arguments-summary {
 .session-settings-container .monaco-editor {
   outline-color: var(--theia-editor-background);
 }
+
+.chat-agent-suggestions {
+    padding-inline: 16px;
+    padding-block-end: 8px;
+    user-select: none;
+}