@theia/ai-chat-ui 1.68.0-next.8 → 1.68.0

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

@@ -23,6 +23,7 @@ import {
     ChatService,
     EditableChatRequestModel,
     ParsedChatRequestAgentPart,
+    ParsedChatRequestFunctionPart,
     ParsedChatRequestVariablePart,
     type ChatRequest,
     type ChatHierarchyBranch,
@@ -46,6 +47,7 @@ import {
     Widget,
     type ReactWidget
 } from '@theia/core/lib/browser';
+import { ContextKey, ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { nls } from '@theia/core/lib/common/nls';
 import {
     inject,
@@ -135,6 +137,11 @@ export class ChatViewTreeWidget extends TreeWidget {
     @inject(ChatService)
     protected readonly chatService: ChatService;
 
+    @inject(ContextKeyService)
+    protected readonly contextKeyService: ContextKeyService;
+
+    protected chatResponseFocusKey: ContextKey<boolean>;
+
     protected readonly onDidSubmitEditEmitter = new Emitter<ChatRequest>();
     onDidSubmitEdit = this.onDidSubmitEditEmitter.event;
 
@@ -202,6 +209,12 @@ export class ChatViewTreeWidget extends TreeWidget {
         this.id = ChatViewTreeWidget.ID + '-treeContainer';
         this.addClass('treeContainer');
 
+        this.chatResponseFocusKey = this.contextKeyService.createKey<boolean>('chatResponseFocus', false);
+        this.node.setAttribute('tabindex', '0');
+        this.node.setAttribute('aria-label', nls.localize('theia/ai/chat-ui/chatResponses', 'Chat responses'));
+        this.addEventListener(this.node, 'focusin', () => this.chatResponseFocusKey.set(true));
+        this.addEventListener(this.node, 'focusout', () => this.chatResponseFocusKey.set(false));
+
         this.toDispose.pushAll([
             this.toDisposeOnChatModelChange,
             this.activationService.onDidChangeActiveStatus(change => {
@@ -504,8 +517,16 @@ export class ChatViewTreeWidget extends TreeWidget {
         if (!(isRequestNode(node) || isResponseNode(node))) {
             return super.renderNode(node, props);
         }
+        const ariaLabel = isRequestNode(node)
+            ? nls.localize('theia/ai/chat-ui/yourMessage', 'Your message')
+            : nls.localize('theia/ai/chat-ui/responseFrom', 'Response from {0}', this.getAgentLabel(node));
         return <React.Fragment key={node.id}>
-            <div className='theia-ChatNode' onContextMenu={e => this.handleContextMenu(node, e)}>
+            <div
+                className='theia-ChatNode'
+                role='article'
+                aria-label={ariaLabel}
+                onContextMenu={e => this.handleContextMenu(node, e)}
+            >
                 {this.renderAgent(node)}
                 {this.renderDetail(node)}
             </div>
@@ -551,11 +572,13 @@ export class ChatViewTreeWidget extends TreeWidget {
                     />
                 )}
                 {inProgress && !waitingForInput &&
-                    <span className='theia-ChatContentInProgress'>
+                    <span className='theia-ChatContentInProgress' role='status' aria-live='polite'>
                         {nls.localize('theia/ai/chat-ui/chat-view-tree-widget/generating', 'Generating')}
                     </span>}
-                {inProgress && waitingForInput && <span className='theia-ChatContentInProgress'>{
-                    nls.localize('theia/ai/chat-ui/chat-view-tree-widget/waitingForInput', 'Waiting for input')}</span>}
+                {inProgress && waitingForInput &&
+                    <span className='theia-ChatContentInProgress' role='status' aria-live='polite'>
+                        {nls.localize('theia/ai/chat-ui/chat-view-tree-widget/waitingForInput', 'Waiting for input')}
+                    </span>}
                 <div className='theia-ChatNodeToolbar'>
                     {!inProgress &&
                         toolbarContributions.length > 0 &&
@@ -564,6 +587,8 @@ export class ChatViewTreeWidget extends TreeWidget {
                                 key={action.commandId}
                                 className={`theia-ChatNodeToolbarAction ${action.icon}`}
                                 title={action.tooltip}
+                                aria-label={action.tooltip}
+                                tabIndex={0}
                                 onClick={e => {
                                     e.stopPropagation();
                                     this.commandRegistry.executeCommand(action.commandId, node);
@@ -808,7 +833,7 @@ const ChatRequestRender = (
         <div className="theia-RequestNode">
             <p>
                 {parts.map((part, index) => {
-                    if (part instanceof ParsedChatRequestAgentPart || part instanceof ParsedChatRequestVariablePart) {
+                    if (part instanceof ParsedChatRequestAgentPart || part instanceof ParsedChatRequestVariablePart || part instanceof ParsedChatRequestFunctionPart) {
                         let description = undefined;
                         let className = '';
                         if (part instanceof ParsedChatRequestAgentPart) {
@@ -817,6 +842,9 @@ const ChatRequestRender = (
                         } else if (part instanceof ParsedChatRequestVariablePart) {
                             description = variableService.getVariable(part.variableName)?.description;
                             className = 'theia-RequestNode-VariableLabel';
+                        } else if (part instanceof ParsedChatRequestFunctionPart) {
+                            description = part.toolRequest?.description;
+                            className = 'theia-RequestNode-FunctionLabel';
                         }
                         return (
                             <HoverableLabel

package/src/browser/chat-view-commands.ts

@@ -74,9 +74,9 @@ export const AI_CHAT_NEW_CHAT_WINDOW_COMMAND = Command.toDefaultLocalizedCommand
     label: 'New Chat'
 });
 
-export const AI_CHAT_SHOW_CHATS_COMMAND = Command.toDefaultLocalizedCommand({
+export const AI_CHAT_SHOW_CHATS_COMMAND = Command.toLocalizedCommand({
     id: 'ai-chat-ui.show-chats',
     iconClass: codicon('history'),
     category: ChatCommands.CHAT_CATEGORY,
     label: 'Show Chats...'
-});
+}, 'theia/ai-chat-ui/showChats');