feat(ai): Add toolbar actions for chat nodes

Introduces a `ChatNodeToolbarActionContribution` which allows to add icons to the chat nodes in the Chat UI on hover. Clicking these icons will trigger a command that gets the respective chat node as argument. Possible use cases are actions for reporting the content, giving feedback, or perform other actions within the tool based on the response. Contributed on behalf of STMicroelectronics.
eclipse-theia · Sep 16, 2024 · edf9b42 · edf9b42
1 parent 1fea534
commit edf9b42
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 <a name="breaking_changes_1.54.0">[Breaking Changes:](#breaking_changes_1.54.0)</a> -->
 - [core] Updated AuthenticationService to handle multiple accounts per provider [#14149](https://github.com/eclipse-theia/theia/pull/14149) - Contributed on behalf of STMicroelectronics
+- [ai] Add toolbar actions on chat nodes [#14181](https://github.com/eclipse-theia/theia/pull/14181) - Contributed on behalf of STMicroelectronics
 
 ## 1.53.0 - 08/29/2024
 

diff --git a/packages/ai-chat-ui/src/browser/ai-chat-ui-frontend-module.ts b/packages/ai-chat-ui/src/browser/ai-chat-ui-frontend-module.ts
@@ -15,27 +15,28 @@
 // *****************************************************************************
 
 import { bindContributionProvider, CommandContribution, MenuContribution } from '@theia/core';
-import { bindViewContribution, FrontendApplicationContribution, WidgetFactory, } from '@theia/core/lib/browser';
+import { bindViewContribution, FrontendApplicationContribution, WidgetFactory } from '@theia/core/lib/browser';
 import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { ContainerModule, interfaces } from '@theia/core/shared/inversify';
 import { EditorManager } from '@theia/editor/lib/browser';
 import '../../src/browser/style/index.css';
 import { AIChatContribution } from './ai-chat-ui-contribution';
 import { AIChatInputWidget } from './chat-input-widget';
-import { CodePartRenderer, CommandPartRenderer, HorizontalLayoutPartRenderer, MarkdownPartRenderer, ErrorPartRenderer, ToolCallPartRenderer } from './chat-response-renderer';
+import { ChatNodeToolbarActionContribution } from './chat-node-toolbar-action-contribution';
+import { ChatResponsePartRenderer } from './chat-response-part-renderer';
+import { CodePartRenderer, CommandPartRenderer, ErrorPartRenderer, HorizontalLayoutPartRenderer, MarkdownPartRenderer, ToolCallPartRenderer } from './chat-response-renderer';
 import {
     AIEditorManager, AIEditorSelectionResolver,
     GitHubSelectionResolver, TextFragmentSelectionResolver, TypeDocSymbolSelectionResolver
 } from './chat-response-renderer/ai-editor-manager';
 import { createChatViewTreeWidget } from './chat-tree-view';
 import { ChatViewTreeWidget } from './chat-tree-view/chat-view-tree-widget';
-import { ChatViewLanguageContribution } from './chat-view-language-contribution';
 import { ChatViewMenuContribution } from './chat-view-contribution';
+import { ChatViewLanguageContribution } from './chat-view-language-contribution';
 import { ChatViewWidget } from './chat-view-widget';
 import { ChatViewWidgetToolbarContribution } from './chat-view-widget-toolbar-contribution';
-import { ChatResponsePartRenderer } from './chat-response-part-renderer';
 
-export default new ContainerModule((bind, _ubind, _isBound, rebind) => {
+export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
     bindViewContribution(bind, AIChatContribution);
     bind(TabBarToolbarContribution).toService(AIChatContribution);
 
@@ -81,6 +82,7 @@ export default new ContainerModule((bind, _ubind, _isBound, rebind) => {
 
     bind(FrontendApplicationContribution).to(ChatViewLanguageContribution).inSingletonScope();
 
+    bindContributionProvider(bind, ChatNodeToolbarActionContribution);
 });
 
 function bindChatViewWidget(bind: interfaces.Bind): void {

diff --git a/packages/ai-chat-ui/src/browser/chat-node-toolbar-action-contribution.ts b/packages/ai-chat-ui/src/browser/chat-node-toolbar-action-contribution.ts
@@ -0,0 +1,63 @@
+// *****************************************************************************
+// 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 { RequestNode, ResponseNode } from './chat-tree-view';
+
+export interface ChatNodeToolbarAction {
+    /**
+     * The command to execute when the item is selected. The handler will receive the `RequestNode` or `ResponseNode` as first argument.
+     */
+    commandId: string;
+    /**
+     * Icon class name for the item (e.g. 'codicon codicon-feedback').
+     */
+    icon: string | (() => string);
+    /**
+     * Priority among the items. Can be negative. The smaller the number the left-most the item will be placed in the toolbar. It is `0` by default.
+     */
+    priority?: number;
+    /**
+     * Optional tooltip for the item.
+     */
+    tooltip?: string;
+}
+
+/**
+ * Clients implement this interface if they want to contribute to the toolbar of chat nodes.
+ *
+ * ### Example
+ * ```ts
+ * bind(ChatNodeToolbarActionContribution).toDynamicValue(context => ({
+ *  getToolbarActions: (args: RequestNode | ResponseNode) => {
+ *      if (isResponseNode(args)) {
+ *          return [{
+ *              commandId: 'core.about',
+ *              icon: 'codicon codicon-feedback',
+ *              tooltip: 'Show about dialog on response nodes'
+ *          }];
+ *      } else {
+ *          return [];
+ *      }
+ *  }
+ * }));
+ * ```
+ */
+export const ChatNodeToolbarActionContribution = Symbol('ChatNodeToolbarActionContribution');
+export interface ChatNodeToolbarActionContribution {
+    /**
+     * Returns the toolbar actions for the given node.
+     */
+    getToolbarActions(node: RequestNode | ResponseNode): ChatNodeToolbarAction[];
+}
diff --git a/packages/ai-chat-ui/src/browser/chat-tree-view/chat-view-tree-widget.tsx b/packages/ai-chat-ui/src/browser/chat-tree-view/chat-view-tree-widget.tsx
@@ -14,11 +14,11 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 import {
-    ChatResponseContent,
     ChatAgentService,
     ChatModel,
     ChatProgressMessage,
     ChatRequestModel,
+    ChatResponseContent,
     ChatResponseModel,
 } from '@theia/ai-chat';
 import { CommandRegistry, ContributionProvider } from '@theia/core';
@@ -40,13 +40,14 @@ import {
     inject,
     injectable,
     named,
-    postConstruct,
+    postConstruct
 } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 
 import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
-import { MarkdownWrapper } from '../chat-response-renderer/markdown-part-renderer';
+import { ChatNodeToolbarActionContribution } from '../chat-node-toolbar-action-contribution';
 import { ChatResponsePartRenderer } from '../chat-response-part-renderer';
+import { MarkdownWrapper } from '../chat-response-renderer/markdown-part-renderer';
 
 // TODO Instead of directly operating on the ChatRequestModel we could use an intermediate view model
 export interface RequestNode extends TreeNode {
@@ -72,6 +73,9 @@ export class ChatViewTreeWidget extends TreeWidget {
     @inject(ContributionProvider) @named(ChatResponsePartRenderer)
     protected readonly chatResponsePartRenderers: ContributionProvider<ChatResponsePartRenderer<ChatResponseContent>>;
 
+    @inject(ContributionProvider) @named(ChatNodeToolbarActionContribution)
+    protected readonly chatNodeToolbarActionContributions: ContributionProvider<ChatNodeToolbarActionContribution>;
+
     @inject(MarkdownRenderer)
     private renderer: MarkdownRenderer;
 
@@ -257,16 +261,45 @@ export class ChatViewTreeWidget extends TreeWidget {
             </div>
         </React.Fragment>;
     }
+
     private renderAgent(node: RequestNode | ResponseNode): React.ReactNode {
         const inProgress = isResponseNode(node) && !node.response.isComplete && !node.response.isCanceled && !node.response.isError;
+        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))
+            : [];
         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>}
+                <div className='theia-ChatNodeToolbar'>
+                    {!inProgress &&
+                        toolbarContributions.length > 0 &&
+                        toolbarContributions.map(action =>
+                            <span
+                                className={`theia-ChatNodeToolbarAction ${action.icon}`}
+                                title={action.tooltip}
+                                onClick={e => {
+                                    e.stopPropagation();
+                                    this.commandRegistry.executeCommand(action.commandId, node);
+                                }}
+                                onKeyDown={e => {
+                                    if (isEnterKey(e)) {
+                                        e.stopPropagation();
+                                        this.commandRegistry.executeCommand(action.commandId, node);
+                                    }
+                                }}
+                                role='button'
+                            ></span>
+                        )}
+                </div>
             </div>
         </React.Fragment>;
     }
+
     private getAgentLabel(node: RequestNode | ResponseNode): string {
         if (isRequestNode(node)) {
             // TODO find user name
@@ -275,6 +308,7 @@ export class ChatViewTreeWidget extends TreeWidget {
         const agent = node.response.agentId ? this.chatAgentService.getAgent(node.response.agentId) : undefined;
         return agent?.name ?? 'AI';
     }
+
     private getAgentIconClassName(node: RequestNode | ResponseNode): string | undefined {
         if (isRequestNode(node)) {
             return codicon('account');

diff --git a/packages/ai-chat-ui/src/browser/style/index.css b/packages/ai-chat-ui/src/browser/style/index.css
@@ -31,12 +31,13 @@ div:last-child > .theia-ChatNode {
 .theia-ChatNodeHeader {
   align-items: center;
   display: flex;
+  justify-content: space-between;
+  height: 24px;
   gap: 8px;
   width: 100%;
 }
 
 .theia-ChatNodeHeader .theia-AgentAvatar {
-  display: flex;
   pointer-events: none;
   user-select: none;
   font-size: 20px;
@@ -91,6 +92,24 @@ div:last-child > .theia-ChatNode {
   font-weight: 600;
 }
 
+.theia-ChatNode .theia-ChatNodeToolbar {
+  margin-left: auto;
+  line-height: 18px;
+}
+.theia-ChatNodeToolbar .theia-ChatNodeToolbarAction {
+  display: none;
+  align-items: center;
+  padding: 4px;
+  border-radius: 5px;
+}
+.theia-ChatNode:hover .theia-ChatNodeToolbar .theia-ChatNodeToolbarAction {
+  display: inline-block;
+}
+.theia-ChatNodeToolbar .theia-ChatNodeToolbarAction:hover {
+  cursor: pointer;
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
 .theia-ChatNode .rendered-markdown p {
   margin: 0 0 16px;
 }