@theia/ai-chat-ui 1.56.0 → 1.57.0-next.112

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

@@ -15,7 +15,7 @@
 // *****************************************************************************
 
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
-import { injectable } from '@theia/core/shared/inversify';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import {
     ChatResponseContent,
     InformationalChatResponseContent,
@@ -26,9 +26,12 @@ import * as React from '@theia/core/shared/react';
 import * as markdownit from '@theia/core/shared/markdown-it';
 import * as DOMPurify from '@theia/core/shared/dompurify';
 import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
+import { OpenerService, open } from '@theia/core/lib/browser';
+import { URI } from '@theia/core';
 
 @injectable()
 export class MarkdownPartRenderer implements ChatResponsePartRenderer<MarkdownChatResponseContent | InformationalChatResponseContent> {
+    @inject(OpenerService) protected readonly openerService: OpenerService;
     protected readonly markdownIt = markdownit();
     canHandle(response: ChatResponseContent): number {
         if (MarkdownChatResponseContent.is(response)) {
@@ -47,13 +50,12 @@ export class MarkdownPartRenderer implements ChatResponsePartRenderer<MarkdownCh
             return null;
         }
 
-        return <MarkdownRender response={response} />;
+        return <MarkdownRender response={response} openerService={this.openerService} />;
     }
-
 }
 
-const MarkdownRender = ({ response }: { response: MarkdownChatResponseContent | InformationalChatResponseContent }) => {
-    const ref = useMarkdownRendering(response.content);
+const MarkdownRender = ({ response, openerService }: { response: MarkdownChatResponseContent | InformationalChatResponseContent; openerService: OpenerService }) => {
+    const ref = useMarkdownRendering(response.content, openerService);
 
     return <div ref={ref}></div>;
 };
@@ -62,31 +64,56 @@ const MarkdownRender = ({ response }: { response: MarkdownChatResponseContent |
  * This hook uses markdown-it directly to render markdown.
  * The reason to use markdown-it directly is that the MarkdownRenderer is
  * overridden by theia with a monaco version. This monaco version strips all html
- * tags from the markdown with empty content.
- * This leads to unexpected behavior when rendering markdown with html tags.
+ * tags from the markdown with empty content. This leads to unexpected behavior when
+ * rendering markdown with html tags.
+ *
+ * Moreover, we want to intercept link clicks to use the Theia OpenerService instead of the default browser behavior.
  *
  * @param markdown the string to render as markdown
  * @param skipSurroundingParagraph whether to remove a surrounding paragraph element (default: false)
+ * @param openerService the service to handle link opening
  * @returns the ref to use in an element to render the markdown
  */
-export const useMarkdownRendering = (markdown: string | MarkdownString, skipSurroundingParagraph: boolean = false) => {
+export const useMarkdownRendering = (markdown: string | MarkdownString, openerService: OpenerService, skipSurroundingParagraph: boolean = false) => {
+    // null is valid in React
     // eslint-disable-next-line no-null/no-null
     const ref = useRef<HTMLDivElement | null>(null);
     const markdownString = typeof markdown === 'string' ? markdown : markdown.value;
     useEffect(() => {
         const markdownIt = markdownit();
         const host = document.createElement('div');
-        // markdownIt always puts the content in a paragraph element, so we remove it if we don't want it
+
+        // markdownIt always puts the content in a paragraph element, so we remove it if we don't want that
         const html = skipSurroundingParagraph ? markdownIt.render(markdownString).replace(/^<p>|<\/p>|<p><\/p>$/g, '') : markdownIt.render(markdownString);
+
         host.innerHTML = DOMPurify.sanitize(html, {
-            ALLOW_UNKNOWN_PROTOCOLS: true // DOMPurify usually strips non http(s) links from hrefs
+            // DOMPurify usually strips non http(s) links from hrefs
+            // but we want to allow them (see handleClick via OpenerService below)
+            ALLOW_UNKNOWN_PROTOCOLS: true
         });
         while (ref?.current?.firstChild) {
             ref.current.removeChild(ref.current.firstChild);
         }
-
         ref?.current?.appendChild(host);
-    }, [markdownString]);
+
+        // intercept link clicks to use the Theia OpenerService instead of the default browser behavior
+        const handleClick = (event: MouseEvent) => {
+            let target = event.target as HTMLElement;
+            while (target && target.tagName !== 'A') {
+                target = target.parentElement as HTMLElement;
+            }
+            if (target && target.tagName === 'A') {
+                const href = target.getAttribute('href');
+                if (href) {
+                    open(openerService, new URI(href));
+                    event.preventDefault();
+                }
+            }
+        };
+
+        ref?.current?.addEventListener('click', handleClick);
+        return () => ref.current?.removeEventListener('click', handleClick);
+    }, [markdownString, skipSurroundingParagraph, openerService]);
 
     return ref;
 };

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-tree-view/chat-view-tree-widget.tsx

@@ -34,6 +34,7 @@ import {
     Key,
     KeyCode,
     NodeProps,
+    OpenerService,
     TreeModel,
     TreeNode,
     TreeProps,
@@ -88,6 +89,9 @@ export class ChatViewTreeWidget extends TreeWidget {
     @inject(CommandRegistry)
     private commandRegistry: CommandRegistry;
 
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
     @inject(HoverService)
     private hoverService: HoverService;
 
@@ -303,7 +307,7 @@ export class ChatViewTreeWidget extends TreeWidget {
                     }}>
                     {this.getAgentLabel(node)}
                 </h3>
-                {inProgress && <span className='theia-ChatContentInProgress'>Generating</span>}
+                {inProgress && !waitingForInput && <span className='theia-ChatContentInProgress'>Generating</span>}
                 {inProgress && waitingForInput && <span className='theia-ChatContentInProgress'>Waiting for input</span>}
                 <div className='theia-ChatNodeToolbar'>
                     {!inProgress &&
@@ -370,6 +374,7 @@ export class ChatViewTreeWidget extends TreeWidget {
             hoverService={this.hoverService}
             chatAgentService={this.chatAgentService}
             variableService={this.variableService}
+            openerService={this.openerService}
         />;
     }
 
@@ -432,12 +437,13 @@ export class ChatViewTreeWidget extends TreeWidget {
 
 const ChatRequestRender = (
     {
-        node, hoverService, chatAgentService, variableService
+        node, hoverService, chatAgentService, variableService, openerService
     }: {
         node: RequestNode,
         hoverService: HoverService,
         chatAgentService: ChatAgentService,
-        variableService: AIVariableService
+        variableService: AIVariableService,
+        openerService: OpenerService
     }) => {
     const parts = node.request.message.parts;
     return (
@@ -465,7 +471,7 @@ const ChatRequestRender = (
                         );
                     } else {
                         // maintain the leading and trailing spaces with explicit `&nbsp;`, otherwise they would get trimmed by the markdown renderer
-                        const ref = useMarkdownRendering(part.text.replace(/^\s|\s$/g, '&nbsp;'), true);
+                        const ref = useMarkdownRendering(part.text.replace(/^\s|\s$/g, '&nbsp;'), openerService, true);
                         return (
                             <span key={index} ref={ref}></span>
                         );

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,8 +14,8 @@
 // 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 { 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';
 import { AIChatInputWidget } from './chat-input-widget';
@@ -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();
@@ -125,6 +127,11 @@ export class ChatViewWidget extends BaseWidget implements ExtractableWidget, Sta
         );
     }
 
+    protected override onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        this.inputWidget.activate();
+    }
+
     storeState(): object {
         return this.state;
     }
@@ -160,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) {
@@ -171,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 {