fix: add React keys in chat views

Fixes React warnings in chat and chat configuration views regarding missing React keys. Also adjusts the 'agent.tags' type from String[] to string[].
eclipse-theia · Nov 13, 2024 · 965758a · 965758a
1 parent 1e4a00d
commit 965758a
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 4 deletions.
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
@@ -283,6 +283,7 @@ export class ChatViewTreeWidget extends TreeWidget {
                         toolbarContributions.length > 0 &&
                         toolbarContributions.map(action =>
                             <span
+                                key={action.commandId}
                                 className={`theia-ChatNodeToolbarAction ${action.icon}`}
                                 title={action.tooltip}
                                 onClick={e => {

diff --git a/packages/ai-chat/src/common/chat-agents.ts b/packages/ai-chat/src/common/chat-agents.ts
@@ -138,7 +138,7 @@ export abstract class AbstractChatAgent {
         protected defaultLanguageModelPurpose: string,
         public iconClass: string = 'codicon codicon-copilot',
         public locations: ChatAgentLocation[] = ChatAgentLocation.ALL,
-        public tags: String[] = ['Chat'],
+        public tags: string[] = ['Chat'],
         public defaultLogging: boolean = true) {
     }
 

diff --git a/packages/ai-code-completion/src/common/code-completion-agent.ts b/packages/ai-code-completion/src/common/code-completion-agent.ts
@@ -157,5 +157,5 @@ Only return the exact replacement for [[MARKER]] to complete the snippet.`,
         { name: 'textUntilCurrentPosition', usedInPrompt: true, description: 'The code before the current position of the cursor.' },
         { name: 'textAfterCurrentPosition', usedInPrompt: true, description: 'The code after the current position of the cursor.' }
     ];
-    readonly tags?: String[] | undefined;
+    readonly tags?: string[] | undefined;
 }
diff --git a/packages/ai-core/src/browser/ai-configuration/agent-configuration-widget.tsx b/packages/ai-core/src/browser/ai-configuration/agent-configuration-widget.tsx
@@ -112,7 +112,7 @@ export class AIAgentConfigurationWidget extends ReactWidget {
     }
 
     private renderAgentName(agent: Agent): React.ReactNode {
-        const tagsSuffix = agent.tags?.length ? <span>{agent.tags.map(tag => <span className='agent-tag'>{tag}</span>)}</span> : '';
+        const tagsSuffix = agent.tags?.length ? <span>{agent.tags.map(tag => <span key={tag} className='agent-tag'>{tag}</span>)}</span> : '';
         return <span>{agent.name} {tagsSuffix}</span>;
     }
 

diff --git a/packages/ai-core/src/common/agent.ts b/packages/ai-core/src/common/agent.ts
@@ -60,7 +60,7 @@ export interface Agent {
     readonly languageModelRequirements: LanguageModelRequirement[];
 
     /** A list of tags to filter agents and to display capabilities in the UI */
-    readonly tags?: String[];
+    readonly tags?: string[];
 
     /** The list of local variable identifiers this agent needs to clarify its context requirements. */
     readonly agentSpecificVariables: AgentSpecificVariables[];