@theia/ai-chat-ui 1.57.1 → 1.58.0

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

@@ -74,10 +74,16 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
     private tryPrettyPrintJson(response: ToolCallChatResponseContent): string | undefined {
         let responseContent = response.result;
         try {
-            if (response.result) {
-                responseContent = JSON.stringify(JSON.parse(response.result), undefined, 2);
+            if (responseContent) {
+                if (typeof responseContent === 'string') {
+                    responseContent = JSON.parse(responseContent);
+                }
+                responseContent = JSON.stringify(responseContent, undefined, 2);
             }
         } catch (e) {
+            if (typeof responseContent !== 'string') {
+                responseContent = `The content could not be converted to string: '${e.message}'. This is the original content: '${responseContent}'.`;
+            }
             // fall through
         }
         return responseContent;

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

@@ -39,7 +39,6 @@ export class ChatViewLanguageContribution implements FrontendApplicationContribu
     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, {

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

@@ -14,7 +14,7 @@
 // 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 { ChatRequest, ChatRequestModel, ChatService, ChatSession } from '@theia/ai-chat';
 import { BaseWidget, codicon, ExtractableWidget, Message, 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';
@@ -93,6 +93,8 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         this.inputWidget.onQuery = this.onQuery.bind(this);
         this.inputWidget.onCancel = this.onCancel.bind(this);
         this.inputWidget.chatModel = this.chatSession.model;
+        this.inputWidget.onDeleteChangeSet = this.onDeleteChangeSet.bind(this);
+        this.inputWidget.onDeleteChangeSetElement = this.onDeleteChangeSetElement.bind(this);
         this.treeWidget.trackChatModel(this.chatSession.model);
 
         this.initListeners();
@@ -165,7 +167,7 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         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.');
+                this.messageService.error(responseModel.errorObject?.message ?? 'An error occurred during chat service invocation.');
             }
         });
         if (!requestProgress) {
@@ -176,9 +178,15 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
     }
 
     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();
+        this.chatService.cancelRequest(requestModel.session.id, requestModel.id);
+    }
+
+    protected onDeleteChangeSet(sessionId: string): void {
+        this.chatService.deleteChangeSet(sessionId);
+    }
+
+    protected onDeleteChangeSetElement(sessionId: string, index: number): void {
+        this.chatService.deleteChangeSetElement(sessionId, index);
     }
 
     lock(): void {

package/src/browser/style/index.css

@@ -153,51 +153,191 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInput {
+  margin-top: 16px;
   position: relative;
   width: 100%;
   box-sizing: border-box;
   gap: 4px;
 }
 
-.theia-ChatInput-Editor-Box {
-  margin-bottom: 2px;
-  padding: 10px;
+.theia-ChatInput-ChangeSet-Box {
+  margin: 0 16px -5px 16px;
+  padding: 2px;
+  padding-bottom: 12px;
   height: auto;
+  border: var(--theia-border-width) solid var(--theia-dropdown-border);
+  border-radius: 4px 4px 0 0;
+  background-color: var(--theia-activityBar-background);
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+}
+
+.theia-ChatInput-ChangeSet-Header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 4px;
+}
+
+.theia-ChatInput-ChangeSet-Box h3 {
+  font-size: 12px;
+  color: var(--theia-disabledForeground);
+  padding-top: 0;
+  margin: 0;
+  display: flex;
+}
+
+.theia-ChatInput-ChangeSet-Header-Actions button {
+  font-size: 12px;
+  padding: 2px 4px;
+  min-width: 40px;
+  margin-left: 6px;
+}
+
+.theia-ChatInput-ChangeSet-List ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 4px;
+}
+
+.theia-ChatInput-ChangeSet-List ul li {
+  display: flex;
+  flex-direction: row;
+  line-height: 18px;
+  padding: 0;
+  padding-top: 2px;
+  margin: 0 2px 2px 0px;
+  border-radius: 4px;
+  position: relative;
+}
+
+.theia-ChatInput-ChangeSet-List ul li:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-ChatInput-ChangeSet-Actions {
+  display: none;
+  position: absolute;
+  right: 8px;
+  top: 2px;
+  gap: 4px;
+}
+
+.theia-ChatInput-ChangeSet-List ul {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.theia-ChatInput-ChangeSet-List ul li {
+  cursor: pointer;
+}
+
+.theia-ChatInput-ChangeSet-List ul li:hover .theia-ChatInput-ChangeSet-Actions {
+  display: flex;
+}
+
+.theia-ChatInput-ChangeSet-List .theia-ChatInput-ChangeSet-Icon {
+  padding-left: 2px;
+  padding-right: 4px;
+  min-width: var(--theia-icon-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.theia-ChatInput-ChangeSet-List .theia-ChatInput-ChangeSet-Icon::before {
+  text-align: center;
+  margin-right: 4px;
+  font-size: calc(var(--theia-content-font-size) * 0.8);
+}
+
+.theia-ChatInput-ChangeSet-List
+  .theia-ChatInput-ChangeSet-Icon.codicon::before {
+  font-size: var(--theia-ui-font-size1);
+}
+
+.theia-ChatInput-ChangeSet-Actions .action {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.theia-ChatInput-ChangeSet-additionalInfo {
+  margin-left: 8px;
+  color: var(--theia-disabledForeground);
+}
+
+.theia-ChatInput-ChangeSet-title {
+  white-space: nowrap;
+  overflow: visible;
+}
+
+.theia-ChatInput-ChangeSet-Header-Actions,
+.theia-ChatInput-ChangeSet-Box h3,
+.theia-ChatInput-ChangeSet-additionalInfo {
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.theia-ChatInput-Editor {
-  width: 100%;
+.theia-ChatInput-ChangeSet-Header-Actions .codicon.action {
+  font-size: 18px;
+  height: 20px;
+  vertical-align: middle;
+  margin-left: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.theia-ChatInput-ChangeSet-Header-Actions .codicon.action:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-ChatInput-ChangeSet-title.rejected {
+  text-decoration: line-through;
+}
+
+.theia-ChatInput-ChangeSet-title.add.pending {
+  color: var(--theia-charts-green);
+}
+.theia-ChatInput-ChangeSet-title.modify.pending {
+  color: var(--theia-charts-orange);
+}
+.theia-ChatInput-ChangeSet-title.delete.pending {
+  color: var(--theia-charts-red);
+}
+
+.theia-ChatInput-Editor-Box {
+  margin: 0 16px 16px 16px;
+  padding: 2px;
   height: auto;
   border: var(--theia-border-width) solid var(--theia-dropdown-border);
   border-radius: 4px;
+  background-color: var(--theia-editor-background);
   display: flex;
-  flex-direction: column-reverse;
+  flex-direction: column;
+  justify-content: flex-end;
   overflow: hidden;
-  transition: height 0.05s ease-in-out;
 }
 
-.theia-ChatInput-Editor:has(.monaco-editor.focused) {
+.theia-ChatInput-Editor-Box:has(.monaco-editor.focused) {
   border-color: var(--theia-focusBorder);
 }
 
-.theia-ChatInput-Editor .monaco-editor {
-  display: flex;
+.theia-ChatInput-Editor {
   width: 100%;
-  height: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column-reverse;
   overflow: hidden;
+  transition: height 0.05s ease-in-out;
   position: relative;
 }
 
 .theia-ChatInput-Editor-Placeholder {
   position: absolute;
-  top: -3px;
-  left: 19px;
+  top: 9px;
+  left: 8px;
   right: 0;
-  bottom: 0;
   display: flex;
   align-items: center;
   color: var(--theia-descriptionForeground);
@@ -209,6 +349,14 @@ div:last-child > .theia-ChatNode {
   display: none;
 }
 
+.theia-ChatInput-Editor .monaco-editor {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
 .theia-ChatInput-Editor .monaco-editor .margin,
 .theia-ChatInput-Editor .monaco-editor .monaco-editor-background,
 .theia-ChatInput-Editor .monaco-editor .inputarea.ime-input {
@@ -216,29 +364,45 @@ div:last-child > .theia-ChatNode {
 }
 
 .theia-ChatInputOptions {
-  position: absolute;
-  bottom: 31px;
-  right: 26px;
-  width: 10px;
-  height: 10px;
+  width: 100%;
+  height: 25px;
+  padding-left: 6px;
+  padding-right: 6px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.theia-ChatInputOptions .theia-ChatInputOptions-left,
+.theia-ChatInputOptions .theia-ChatInputOptions-right {
+  display: flex;
+}
+.theia-ChatInputOptions .theia-ChatInputOptions-right {
+  margin-right: 12px;
 }
 
 .theia-ChatInputOptions .option {
   width: 21px;
   height: 21px;
-  margin-top: 2px;
+  padding: 2px;
   display: inline-block;
   box-sizing: border-box;
   user-select: none;
   background-repeat: no-repeat;
   background-position: center;
+  border-radius: 5px;
   border: var(--theia-border-width) solid transparent;
-  opacity: 0.7;
   cursor: pointer;
 }
 
+.theia-ChatInputOptions .option.disabled {
+  cursor: default;
+  opacity: var(--theia-mod-disabled-opacity);
+  pointer-events: none;
+}
+
 .theia-ChatInputOptions .option:hover {
   opacity: 1;
+  background-color: var(--theia-toolbar-hoverBackground);
 }
 
 .theia-CodePartRenderer-root {