refactor: use communication model in AI history view

sdirix · sdirix · commit 1c276682b69a · 2025-04-06T21:28:32.000+02:00
Refactors the AI history view to use the new AI communication model as
data input.

WIP

Contributed on behalf of STMicroelectronics
diff --git a/packages/ai-core/src/common/language-model-service.ts b/packages/ai-core/src/common/language-model-service.ts
@@ -107,7 +107,7 @@ export class LanguageModelServiceImpl implements LanguageModelService {
             semanticRequest = {
                 id: languageModelRequest.requestId,
                 requests: [],
-                metadata: { agentId: languageModelRequest.agentId }
+                metadata: { agent: languageModelRequest.agentId }
             };
             session.requests.push(semanticRequest);
         }
@@ -123,7 +123,7 @@ export class LanguageModelServiceImpl implements LanguageModelService {
 
         semanticRequest.requests.push(aiRequest);
 
-        aiRequest.metadata.agentId = languageModelRequest.agentId;
+        aiRequest.metadata.agent = languageModelRequest.agentId;
         aiRequest.metadata.timestamp = Date.now();
 
         this.sessionChangedEmitter.fire({ type: 'requestAdded', id: languageModelRequest.subRequestId ?? languageModelRequest.requestId });
diff --git a/packages/ai-history/src/browser/ai-history-contribution.ts b/packages/ai-history/src/browser/ai-history-contribution.ts
@@ -19,7 +19,7 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { AIHistoryView } from './ai-history-widget';
 import { Command, CommandRegistry, Emitter, nls } from '@theia/core';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
-import { CommunicationRecordingService } from '@theia/ai-core';
+import { CommunicationRecordingService, LanguageModelService } from '@theia/ai-core';
 
 export const AI_HISTORY_TOGGLE_COMMAND_ID = 'aiHistory:toggle';
 export const OPEN_AI_HISTORY_VIEW = Command.toLocalizedCommand({
@@ -48,6 +48,7 @@ export const AI_HISTORY_VIEW_CLEAR = Command.toLocalizedCommand({
 @injectable()
 export class AIHistoryViewContribution extends AIViewContribution<AIHistoryView> implements TabBarToolbarContribution {
     @inject(CommunicationRecordingService) private recordingService: CommunicationRecordingService;
+    @inject(LanguageModelService) private languageModelService: LanguageModelService;
 
     protected readonly chronologicalChangedEmitter = new Emitter<void>();
     protected readonly chronologicalStateChanged = this.chronologicalChangedEmitter.event;
@@ -102,6 +103,7 @@ export class AIHistoryViewContribution extends AIViewContribution<AIHistoryView>
     }
     public clearHistory(): void {
         this.recordingService.clearHistory();
+        this.languageModelService.sessions = [];
     }
 
     protected withHistoryWidget(
diff --git a/packages/ai-history/src/browser/ai-history-semantic-request-card.tsx b/packages/ai-history/src/browser/ai-history-semantic-request-card.tsx
@@ -0,0 +1,171 @@
+// *****************************************************************************
+// Copyright (C) 2025 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 { AiRequest, AiSemanticRequest, LanguageModelMonitoredStreamResponse } from '@theia/ai-core/lib/common/language-model-interaction-model';
+import { nls } from '@theia/core';
+import * as React from '@theia/core/shared/react';
+
+export interface SemanticRequestCardProps {
+    semanticRequest: AiSemanticRequest;
+    selectedAgentId?: string;
+}
+
+export const SemanticRequestCard: React.FC<SemanticRequestCardProps> = ({ semanticRequest, selectedAgentId }) => {
+    const formatTimestamp = (timestamp: number): string =>
+        new Date(timestamp).toLocaleString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+
+    const isHighlighted = selectedAgentId && (
+        semanticRequest.metadata.agent === selectedAgentId ||
+        semanticRequest.requests.some(req => req.metadata.agent === selectedAgentId)
+    );
+
+    // Get the earliest timestamp from all sub-requests
+    const earliestTimestamp = semanticRequest.requests.reduce((earliest, req) => {
+        const timestamp = req.metadata.timestamp as number || 0;
+        return timestamp && (!earliest || timestamp < earliest) ? timestamp : earliest;
+    }, 0);
+
+    return (
+        <div className={`theia-card semantic-request-card ${isHighlighted ? 'highlighted' : ''}`}
+            role="article"
+            aria-label={`Semantic request ${semanticRequest.id}`}>
+            <div className='theia-card-meta'>
+                <span className='theia-card-request-id'>
+                    {nls.localize('theia/ai/history/semantic-request-card/requestId', 'Request ID')}: {semanticRequest.id}
+                </span>
+                {semanticRequest.metadata.agent && (
+                    <span className='theia-card-agent-id'>
+                        {nls.localize('theia/ai/history/semantic-request-card/agentId', 'Agent')}: {semanticRequest.metadata.agent}
+                    </span>
+                )}
+            </div>
+            <div className='theia-card-content'>
+                <h2>{nls.localize('theia/ai/history/semantic-request-card/semanticRequest', 'Semantic Request')}</h2>
+
+                <div className='sub-requests-container'>
+                    {semanticRequest.requests.map((request, index) => (
+                        <SubRequestCard
+                            key={request.id}
+                            request={request}
+                            index={index}
+                            isHighlighted={selectedAgentId === request.metadata.agent}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className='theia-card-meta'>
+                {earliestTimestamp > 0 && (
+                    <span className='theia-card-timestamp'>
+                        {nls.localize('theia/ai/history/semantic-request-card/timestamp', 'Started')}: {formatTimestamp(earliestTimestamp)}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+};
+
+interface SubRequestCardProps {
+    request: AiRequest;
+    index: number;
+    isHighlighted: boolean;
+}
+
+const SubRequestCard: React.FC<SubRequestCardProps> = ({ request, index, isHighlighted }) => {
+    const formatJson = (data: unknown): string => {
+        try {
+            return JSON.stringify(data, undefined, 2);
+        } catch (error) {
+            console.error('Error formatting JSON:', error);
+            return 'Error formatting data';
+        }
+    };
+
+    const formatTimestamp = (timestamp: number | undefined): string =>
+        timestamp ? new Date(timestamp).toLocaleString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        }) : 'N/A';
+
+    const isStreamResponse = 'parts' in request.response;
+
+    const getResponseContent = () => {
+        if (isStreamResponse) {
+            const streamResponse = request.response as LanguageModelMonitoredStreamResponse;
+            return streamResponse.parts.map((part, i) => (
+                <div key={`part-${i}`} className="stream-part">
+                    <pre>{JSON.stringify(part, undefined, 2)}</pre>
+                </div>
+            ));
+        } else {
+            return <pre>{formatJson(request.response)}</pre>;
+        }
+    };
+
+    return (
+        <div className={`sub-request-card ${isHighlighted ? 'highlighted' : ''}`}>
+            <div className='sub-request-header'>
+                <h3>{nls.localize('theia/ai/history/sub-request-card/title', 'Sub-Request')} {index + 1}</h3>
+                <span className='sub-request-id'>ID: {request.id}</span>
+                {request.metadata.agent && (
+                    <span className='sub-request-agent'>
+                        {nls.localize('theia/ai/history/sub-request-card/agent', 'Agent')}: {request.metadata.agent}
+                    </span>
+                )}
+                <span className='sub-request-model'>
+                    {nls.localize('theia/ai/history/sub-request-card/model', 'Model')}: {request.languageModel}
+                </span>
+            </div>
+
+            <div className='sub-request-content'>
+                <details>
+                    <summary>
+                        {nls.localize('theia/ai/history/sub-request-card/request', 'Request')}
+                    </summary>
+                    <div className='request-content'>
+                        <pre>{formatJson(request.request)}</pre>
+                    </div>
+                </details>
+
+                <details>
+                    <summary>
+                        {nls.localize('theia/ai/history/sub-request-card/response', 'Response')}
+                    </summary>
+                    <div className='response-content'>
+                        {getResponseContent()}
+                    </div>
+                </details>
+            </div>
+
+            <div className='sub-request-meta'>
+                {request.metadata.timestamp && (
+                    <span className='sub-request-timestamp'>
+                        {nls.localize('theia/ai/history/sub-request-card/timestamp', 'Timestamp')}: {formatTimestamp(request.metadata.timestamp as number)}
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/ai-history/src/browser/ai-history-widget.tsx b/packages/ai-history/src/browser/ai-history-widget.tsx
@@ -13,32 +13,32 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { Agent, AgentService, CommunicationRecordingService, CommunicationRequestEntry, CommunicationResponseEntry } from '@theia/ai-core';
+import { Agent, AgentService, LanguageModelService, SessionEvent } from '@theia/ai-core';
+import { AiSemanticRequest } from '@theia/ai-core/lib/common/language-model-interaction-model';
 import { codicon, ReactWidget, StatefulWidget } from '@theia/core/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
-import { CommunicationCard } from './ai-history-communication-card';
+import { SemanticRequestCard } from './ai-history-semantic-request-card';
 import { SelectComponent, SelectOption } from '@theia/core/lib/browser/widgets/select-component';
 import { deepClone, nls } from '@theia/core';
 
 namespace AIHistoryView {
     export interface State {
         chronological: boolean;
+        selectedAgentId?: string;
     }
 }
 
 @injectable()
 export class AIHistoryView extends ReactWidget implements StatefulWidget {
-    @inject(CommunicationRecordingService)
-    protected recordingService: CommunicationRecordingService;
+    @inject(LanguageModelService)
+    protected languageModelService: LanguageModelService;
     @inject(AgentService)
     protected readonly agentService: AgentService;
 
     public static ID = 'ai-history-widget';
     static LABEL = nls.localize('theia/ai/history/view/label', 'AI Agent History [Alpha]');
 
-    protected selectedAgent?: Agent;
-
     protected _state: AIHistoryView.State = { chronological: false };
 
     constructor() {
@@ -74,27 +74,21 @@ export class AIHistoryView extends ReactWidget implements StatefulWidget {
     @postConstruct()
     protected init(): void {
         this.update();
-        this.toDispose.push(this.recordingService.onDidRecordRequest(entry => this.historyContentUpdated(entry)));
-        this.toDispose.push(this.recordingService.onDidRecordResponse(entry => this.historyContentUpdated(entry)));
-        this.toDispose.push(this.recordingService.onStructuralChange(() => this.update()));
+        this.toDispose.push(this.languageModelService.onSessionChanged((event: SessionEvent) => this.historyContentUpdated(event)));
         this.selectAgent(this.agentService.getAllAgents()[0]);
     }
 
     protected selectAgent(agent: Agent | undefined): void {
-        this.selectedAgent = agent;
-        this.update();
+        this.state = { ...this.state, selectedAgentId: agent?.id };
     }
 
-    protected historyContentUpdated(entry: CommunicationRequestEntry | CommunicationResponseEntry): void {
-        if (entry.agentId === this.selectedAgent?.id) {
-            this.update();
-        }
+    protected historyContentUpdated(event: SessionEvent): void {
+        this.update();
     }
 
     render(): React.ReactNode {
         const selectionChange = (value: SelectOption) => {
-            this.selectedAgent = this.agentService.getAllAgents().find(agent => agent.id === value.value);
-            this.update();
+            this.selectAgent(this.agentService.getAllAgents().find(agent => agent.id === value.value));
         };
         const agents = this.agentService.getAllAgents();
         if (agents.length === 0) {
@@ -112,7 +106,7 @@ export class AIHistoryView extends ReactWidget implements StatefulWidget {
                         description: agent.description || ''
                     }))}
                     onChange={selectionChange}
-                    defaultValue={this.selectedAgent?.id} />
+                    defaultValue={this.state.selectedAgentId} />
                 <div className='agent-history'>
                     {this.renderHistory()}
                 </div>
@@ -121,24 +115,41 @@ export class AIHistoryView extends ReactWidget implements StatefulWidget {
     }
 
     protected renderHistory(): React.ReactNode {
-        if (!this.selectedAgent) {
+        if (!this.state.selectedAgentId) {
             return <div className='theia-card no-content'>{nls.localize('theia/ai/history/view/noAgentSelected', 'No agent selected.')}</div>;
         }
-        const history = [...this.recordingService.getHistory(this.selectedAgent.id)];
-        if (history.length === 0) {
+
+        const semanticRequests = this.getSemanticRequestsByAgent(this.state.selectedAgentId);
+
+        if (semanticRequests.length === 0) {
+            const selectedAgent = this.agentService.getAllAgents().find(agent => agent.id === this.state.selectedAgentId);
             return <div className='theia-card no-content'>
-                {nls.localize('theia/ai/history/view/noHistoryForAgent', 'No history available for the selected agent \'{0}\'', this.selectedAgent.name)}
+                {nls.localize('theia/ai/history/view/noHistoryForAgent', 'No history available for the selected agent \'{0}\'', selectedAgent?.name || this.state.selectedAgentId)}
             </div>;
         }
-        if (!this.state.chronological) {
-            history.reverse();
-        }
-        return history.map(entry => <CommunicationCard key={entry.requestId} entry={entry} />);
+
+        // Sort requests by timestamp (using the first sub-request's timestamp)
+        const sortedRequests = [...semanticRequests].sort((a, b) => {
+            const aTimestamp = a.requests[0]?.metadata.timestamp as number || 0;
+            const bTimestamp = b.requests[0]?.metadata.timestamp as number || 0;
+            return this.state.chronological ? aTimestamp - bTimestamp : bTimestamp - aTimestamp;
+        });
+
+        return sortedRequests.map(request => <SemanticRequestCard key={request.id} semanticRequest={request} selectedAgentId={this.state.selectedAgentId} />);
     }
 
-    protected onClick(e: React.MouseEvent<HTMLDivElement>, agent: Agent): void {
-        e.stopPropagation();
-        this.selectAgent(agent);
+    /**
+     * Get all semantic requests for a specific agent.
+     * Includes all requests in which the agent is involved, either as the main request or as a sub-request.
+     * @param agentId The agent ID to filter by
+     */
+    protected getSemanticRequestsByAgent(agentId: string): AiSemanticRequest[] {
+        return this.languageModelService.sessions.flatMap(session =>
+            session.requests.filter(request =>
+                request.metadata.agent === agentId ||
+                request.requests.some(subRequest => subRequest.metadata.agent === agentId)
+            )
+        );
     }
 
     public sortHistory(chronological: boolean): void {
diff --git a/packages/ai-history/src/browser/style/ai-history.css b/packages/ai-history/src/browser/style/ai-history.css
