@theia/ai-chat-ui 1.55.1 → 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>;
 };
@@ -61,30 +63,57 @@ 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
- * overriden 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.
+ * 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.
+ *
+ * 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) => {
+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');
-        const html = markdownIt.render(markdownString);
+
+        // 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/question-part-renderer.tsx

@@ -0,0 +1,59 @@
+// *****************************************************************************
+// 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, QuestionResponseContent } from '@theia/ai-chat';
+import { injectable } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { ReactNode } from '@theia/core/shared/react';
+import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { ResponseNode } from '../chat-tree-view';
+
+@injectable()
+export class QuestionPartRenderer
+    implements ChatResponsePartRenderer<QuestionResponseContent> {
+
+    canHandle(response: ChatResponseContent): number {
+        if (QuestionResponseContent.is(response)) {
+            return 10;
+        }
+        return -1;
+    }
+
+    render(question: QuestionResponseContent, node: ResponseNode): ReactNode {
+        return (
+            <div className="theia-QuestionPartRenderer-root">
+                <div className="theia-QuestionPartRenderer-question">{question.question}</div>
+                <div className="theia-QuestionPartRenderer-options">
+                    {
+                        question.options.map((option, index) => (
+                            <button
+                                className={`theia-button theia-QuestionPartRenderer-option ${question.selectedOption === option ? 'selected' : ''}`}
+                                onClick={() => {
+                                    question.selectedOption = option;
+                                    question.handler(option);
+                                }}
+                                disabled={question.selectedOption !== undefined || !node.response.isWaitingForInput}
+                                key={index}
+                            >
+                                {option.text}
+                            </button>
+                        ))
+                    }
+                </div>
+            </div>
+        );
+    }
+
+}

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

@@ -29,26 +29,61 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
         }
         return -1;
     }
+
     render(response: ToolCallChatResponseContent): ReactNode {
-        return <h4 className='theia-toolCall'>
-            {response.finished ?
-                <details>
-                    <summary>Ran {response.name}</summary>
-                    <pre>{this.tryPrettyPrintJson(response)}</pre>
-                </details>
-                : <span><Spinner /> Running [{response.name}]</span>
-            }
-        </h4>;
+        return (
+            <h4 className='theia-toolCall'>
+                {response.finished ? (
+                    <details>
+                        <summary>Ran {response.name}
+                            ({this.renderCollapsibleArguments(response.arguments)})
+                        </summary>
+                        <pre>{this.tryPrettyPrintJson(response)}</pre>
+                    </details>
+                ) : (
+                    <span>
+                        <Spinner /> Running {response.name}({this.renderCollapsibleArguments(response.arguments)})
+                    </span>
+                )}
+            </h4>
+        );
+    }
+
+    protected renderCollapsibleArguments(args: string | undefined): ReactNode {
+        if (!args || !args.trim() || args.trim() === '{}') {
+            return undefined;
+        }
+
+        return (
+            <details className="collapsible-arguments">
+                <summary className="collapsible-arguments-summary">...</summary>
+                <span>{this.prettyPrintArgs(args)}</span>
+            </details>
+        );
+    }
 
+    private prettyPrintArgs(args: string): string {
+        try {
+            return JSON.stringify(JSON.parse(args), undefined, 2);
+        } catch (e) {
+            // fall through
+            return args;
+        }
     }
 
     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

@@ -14,12 +14,15 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 import {
+    ChatAgent,
     ChatAgentService,
     ChatModel,
     ChatProgressMessage,
     ChatRequestModel,
     ChatResponseContent,
     ChatResponseModel,
+    ParsedChatRequestAgentPart,
+    ParsedChatRequestVariablePart,
 } from '@theia/ai-chat';
 import { CommandRegistry, ContributionProvider } from '@theia/core';
 import {
@@ -27,9 +30,11 @@ import {
     CommonCommands,
     CompositeTreeNode,
     ContextMenuRenderer,
+    HoverService,
     Key,
     KeyCode,
     NodeProps,
+    OpenerService,
     TreeModel,
     TreeNode,
     TreeProps,
@@ -46,6 +51,7 @@ import * as React from '@theia/core/shared/react';
 import { ChatNodeToolbarActionContribution } from '../chat-node-toolbar-action-contribution';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
 import { useMarkdownRendering } from '../chat-response-renderer/markdown-part-renderer';
+import { AIVariableService } from '@theia/ai-core';
 
 // TODO Instead of directly operating on the ChatRequestModel we could use an intermediate view model
 export interface RequestNode extends TreeNode {
@@ -77,9 +83,18 @@ export class ChatViewTreeWidget extends TreeWidget {
     @inject(ChatAgentService)
     protected chatAgentService: ChatAgentService;
 
+    @inject(AIVariableService)
+    protected readonly variableService: AIVariableService;
+
     @inject(CommandRegistry)
     private commandRegistry: CommandRegistry;
 
+    @inject(OpenerService)
+    protected readonly openerService: OpenerService;
+
+    @inject(HoverService)
+    private hoverService: HoverService;
+
     protected _shouldScrollToEnd = true;
 
     protected isEnabled = false;
@@ -267,22 +282,39 @@ export class ChatViewTreeWidget extends TreeWidget {
 
     private renderAgent(node: RequestNode | ResponseNode): React.ReactNode {
         const inProgress = isResponseNode(node) && !node.response.isComplete && !node.response.isCanceled && !node.response.isError;
+        const waitingForInput = isResponseNode(node) && node.response.isWaitingForInput;
         const toolbarContributions = !inProgress
             ? this.chatNodeToolbarActionContributions.getContributions()
                 .flatMap(c => c.getToolbarActions(node))
                 .filter(action => this.commandRegistry.isEnabled(action.commandId, node))
                 .sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0))
             : [];
+        const agentLabel = React.createRef<HTMLHeadingElement>();
+        const agentDescription = this.getAgent(node)?.description;
         return <React.Fragment>
             <div className='theia-ChatNodeHeader'>
                 <div className={`theia-AgentAvatar ${this.getAgentIconClassName(node)}`}></div>
-                <h3 className='theia-AgentLabel'>{this.getAgentLabel(node)}</h3>
-                {inProgress && <span className='theia-ChatContentInProgress'>Generating</span>}
+                <h3 ref={agentLabel}
+                    className='theia-AgentLabel'
+                    onMouseEnter={() => {
+                        if (agentDescription) {
+                            this.hoverService.requestHover({
+                                content: agentDescription,
+                                target: agentLabel.current!,
+                                position: 'right'
+                            });
+                        }
+                    }}>
+                    {this.getAgentLabel(node)}
+                </h3>
+                {inProgress && !waitingForInput && <span className='theia-ChatContentInProgress'>Generating</span>}
+                {inProgress && waitingForInput && <span className='theia-ChatContentInProgress'>Waiting for input</span>}
                 <div className='theia-ChatNodeToolbar'>
                     {!inProgress &&
                         toolbarContributions.length > 0 &&
                         toolbarContributions.map(action =>
                             <span
+                                key={action.commandId}
                                 className={`theia-ChatNodeToolbarAction ${action.icon}`}
                                 title={action.tooltip}
                                 onClick={e => {
@@ -308,8 +340,14 @@ export class ChatViewTreeWidget extends TreeWidget {
             // TODO find user name
             return 'You';
         }
-        const agent = node.response.agentId ? this.chatAgentService.getAgent(node.response.agentId) : undefined;
-        return agent?.name ?? 'AI';
+        return this.getAgent(node)?.name ?? 'AI';
+    }
+
+    private getAgent(node: RequestNode | ResponseNode): ChatAgent | undefined {
+        if (isRequestNode(node)) {
+            return undefined;
+        }
+        return node.response.agentId ? this.chatAgentService.getAgent(node.response.agentId) : undefined;
     }
 
     private getAgentIconClassName(node: RequestNode | ResponseNode): string | undefined {
@@ -331,7 +369,13 @@ export class ChatViewTreeWidget extends TreeWidget {
     }
 
     private renderChatRequest(node: RequestNode): React.ReactNode {
-        return <ChatRequestRender node={node} />;
+        return <ChatRequestRender
+            node={node}
+            hoverService={this.hoverService}
+            chatAgentService={this.chatAgentService}
+            variableService={this.variableService}
+            openerService={this.openerService}
+        />;
     }
 
     private renderChatResponse(node: ResponseNode): React.ReactNode {
@@ -339,12 +383,28 @@ export class ChatViewTreeWidget extends TreeWidget {
             <div className={'theia-ResponseNode'}>
                 {!node.response.isComplete
                     && node.response.response.content.length === 0
-                    && node.response.progressMessages.map((c, i) =>
-                        <ProgressMessage {...c} key={`${node.id}-progress-${i}`} />
-                    )}
+                    && node.response.progressMessages
+                        .filter(c => c.show === 'untilFirstContent')
+                        .map((c, i) =>
+                            <ProgressMessage {...c} key={`${node.id}-progress-untilFirstContent-${i}`} />
+                        )
+                }
                 {node.response.response.content.map((c, i) =>
                     <div className='theia-ResponseNode-Content' key={`${node.id}-content-${i}`}>{this.getChatResponsePartRenderer(c, node)}</div>
                 )}
+                {!node.response.isComplete
+                    && node.response.progressMessages
+                        .filter(c => c.show === 'whileIncomplete')
+                        .map((c, i) =>
+                            <ProgressMessage {...c} key={`${node.id}-progress-whileIncomplete-${i}`} />
+                        )
+                }
+                {node.response.progressMessages
+                    .filter(c => c.show === 'forever')
+                    .map((c, i) =>
+                        <ProgressMessage {...c} key={`${node.id}-progress-afterComplete-${i}`} />
+                    )
+                }
             </div>
         );
     }
@@ -375,11 +435,80 @@ export class ChatViewTreeWidget extends TreeWidget {
     }
 }
 
-const ChatRequestRender = ({ node }: { node: RequestNode }) => {
-    const text = node.request.request.displayText ?? node.request.request.text;
-    const ref = useMarkdownRendering(text);
+const ChatRequestRender = (
+    {
+        node, hoverService, chatAgentService, variableService, openerService
+    }: {
+        node: RequestNode,
+        hoverService: HoverService,
+        chatAgentService: ChatAgentService,
+        variableService: AIVariableService,
+        openerService: OpenerService
+    }) => {
+    const parts = node.request.message.parts;
+    return (
+        <div className="theia-RequestNode">
+            <p>
+                {parts.map((part, index) => {
+                    if (part instanceof ParsedChatRequestAgentPart || part instanceof ParsedChatRequestVariablePart) {
+                        let description = undefined;
+                        let className = '';
+                        if (part instanceof ParsedChatRequestAgentPart) {
+                            description = chatAgentService.getAgent(part.agentId)?.description;
+                            className = 'theia-RequestNode-AgentLabel';
+                        } else if (part instanceof ParsedChatRequestVariablePart) {
+                            description = variableService.getVariable(part.variableName)?.description;
+                            className = 'theia-RequestNode-VariableLabel';
+                        }
+                        return (
+                            <HoverableLabel
+                                key={index}
+                                text={part.text}
+                                description={description}
+                                hoverService={hoverService}
+                                className={className}
+                            />
+                        );
+                    } 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;'), openerService, true);
+                        return (
+                            <span key={index} ref={ref}></span>
+                        );
+                    }
+                })}
+            </p>
+        </div>
+    );
+};
 
-    return <div className={'theia-RequestNode'} ref={ref}></div>;
+const HoverableLabel = (
+    {
+        text, description, hoverService, className
+    }: {
+        text: string,
+        description?: string,
+        hoverService: HoverService,
+        className: string
+    }) => {
+    const spanRef = React.createRef<HTMLSpanElement>();
+    return (
+        <span
+            className={className}
+            ref={spanRef}
+            onMouseEnter={() => {
+                if (description) {
+                    hoverService.requestHover({
+                        content: description,
+                        target: spanRef.current!,
+                        position: 'right'
+                    });
+                }
+            }}
+        >
+            {text}
+        </span>
+    );
 };
 
 const ProgressMessage = (c: ChatProgressMessage) => (

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 {