Skip to content

Commit 6960987

Browse files
rbrenrbren
authored
Merge pull request #16 from All-Hands-AI/fix-conversation-ui-issues
Fix conversation list UI issues
2 parents 7e99198 + 606630a commit 6960987

File tree

4 files changed

+26
-30
lines changed

4 files changed

+26
-30
lines changed

‎example/src/components/ConversationManager.tsx‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,13 @@ import {
44
ConversationInfo,
55
RemoteConversation,
66
AgentBase,
7-
AgentExecutionStatus,
87
Event
98
} from '@openhands/agent-server-typescript-client';
109
import { useSettings } from '../contexts/SettingsContext';
1110

1211
interface ConversationData extends ConversationInfo {
1312
remoteConversation?: RemoteConversation;
1413
events?: Event[];
15-
agentStatus?: AgentExecutionStatus;
1614
}
1715

1816
// Utility function to extract displayable content from events
@@ -136,7 +134,7 @@ export const ConversationManager: React.FC = () => {
136134
const status = await selectedConversation.remoteConversation!.state.getAgentStatus();
137135
setConversations(prev => prev.map(conv =>
138136
conv.id === selectedConversation.id
139-
? { ...conv, agentStatus: status }
137+
? { ...conv, status: status }
140138
: conv
141139
));
142140
} catch (err) {
@@ -146,13 +144,13 @@ export const ConversationManager: React.FC = () => {
146144

147145
// Refresh every 2 seconds if the agent is running
148146
const interval = setInterval(() => {
149-
if (selectedConversation.agentStatus === 'running') {
147+
if (selectedConversation.status === 'running') {
150148
refreshStatus();
151149
}
152150
}, 2000);
153151

154152
return () => clearInterval(interval);
155-
}, [selectedConversation?.id, selectedConversation?.agentStatus]);
153+
}, [selectedConversation?.id, selectedConversation?.status]);
156154

157155
const loadConversations = async (conversationManager?: SDKConversationManager) => {
158156
const mgr = conversationManager || manager;
@@ -172,7 +170,8 @@ export const ConversationManager: React.FC = () => {
172170
agent: conv.agent,
173171
created_at: conv.created_at,
174172
updated_at: conv.updated_at,
175-
status: conv.status
173+
// Map agent_status to status for display
174+
status: conv.agent_status || conv.status
176175
}));
177176

178177
setConversations(conversationData);
@@ -192,7 +191,7 @@ export const ConversationManager: React.FC = () => {
192191
try {
193192
// Create a simple agent configuration
194193
const agent: AgentBase = {
195-
name: 'CodeActAgent',
194+
kind: 'Agent',
196195
llm: {
197196
model: settings.modelName,
198197
api_key: settings.apiKey || ''
@@ -312,7 +311,7 @@ export const ConversationManager: React.FC = () => {
312311
remoteConversation.state.getAgentStatus().then(status => {
313312
setConversations(prev => prev.map(conv =>
314313
conv.id === conversationId
315-
? { ...conv, agentStatus: status }
314+
? { ...conv, status: status }
316315
: conv
317316
));
318317
}).catch(err => console.warn('Failed to update agent status:', err));
@@ -352,7 +351,7 @@ export const ConversationManager: React.FC = () => {
352351
// Update the conversation in our state with additional details
353352
setConversations(prev => prev.map(conv =>
354353
conv.id === conversationId
355-
? { ...conv, remoteConversation, events, agentStatus }
354+
? { ...conv, remoteConversation, events, status: agentStatus }
356355
: conv
357356
));
358357

@@ -387,28 +386,28 @@ export const ConversationManager: React.FC = () => {
387386
return new Date(dateString).toLocaleString();
388387
};
389388

390-
const getAgentName = (agent: AgentBase) => {
391-
return agent.name || 'Unknown Agent';
392-
};
393-
394389
const getStatusColorClass = (status?: string) => {
395390
switch (status) {
396391
case 'running': return 'text-green-500';
397-
case 'stopped': return 'text-red-500';
392+
case 'idle': return 'text-gray-500';
398393
case 'paused': return 'text-orange-500';
394+
case 'waiting_for_confirmation': return 'text-yellow-500';
399395
case 'finished': return 'text-blue-500';
400396
case 'error': return 'text-red-600';
397+
case 'stuck': return 'text-red-500';
401398
default: return 'text-gray-500';
402399
}
403400
};
404401

405402
const getStatusIcon = (status?: string) => {
406403
switch (status) {
407404
case 'running': return '🔄';
408-
case 'stopped': return '⏹️';
405+
case 'idle': return '⏸️';
409406
case 'paused': return '⏸️';
407+
case 'waiting_for_confirmation': return '⏳';
410408
case 'finished': return '✅';
411409
case 'error': return '❌';
410+
case 'stuck': return '🚫';
412411
default: return '❓';
413412
}
414413
};
@@ -455,7 +454,7 @@ export const ConversationManager: React.FC = () => {
455454
<p>No conversations yet. Create your first conversation!</p>
456455
</div>
457456
) : (
458-
<div className="space-y-3 max-h-96 overflow-y-auto">
457+
<div className="space-y-3 max-h-[600px] overflow-y-auto">
459458
{conversations.map((conversation) => (
460459
<div
461460
key={conversation.id}
@@ -466,12 +465,11 @@ export const ConversationManager: React.FC = () => {
466465
}`}
467466
onClick={() => selectConversation(conversation.id)}
468467
>
469-
<div className="flex-1 min-w-0">
468+
<div className="flex-1 min-w-0 text-left">
470469
<div className="text-sm font-mono text-gray-600 dark:text-gray-400 mb-2">
471470
ID: {conversation.id.substring(0, 8)}...
472471
</div>
473472
<div className="space-y-1 text-sm">
474-
<div className="text-gray-900 dark:text-white">Agent: {getAgentName(conversation.agent)}</div>
475473
<div className="text-gray-600 dark:text-gray-400">Created: {formatDate(conversation.created_at)}</div>
476474
<div className="flex items-center gap-2">
477475
<span className="text-gray-600 dark:text-gray-400">Status:</span>
@@ -519,10 +517,7 @@ export const ConversationManager: React.FC = () => {
519517
{getStatusIcon(selectedConversation.status)} {selectedConversation.status || 'unknown'}
520518
</span>
521519
</div>
522-
<div className="flex justify-between">
523-
<span className="font-medium text-gray-900 dark:text-white">Agent:</span>
524-
<span className="text-gray-600 dark:text-gray-400">{getAgentName(selectedConversation.agent)}</span>
525-
</div>
520+
526521
<div className="flex justify-between">
527522
<span className="font-medium text-gray-900 dark:text-white">Model:</span>
528523
<span className="text-gray-600 dark:text-gray-400">{selectedConversation.agent.llm?.model || 'Unknown'}</span>
@@ -535,12 +530,7 @@ export const ConversationManager: React.FC = () => {
535530
<span className="font-medium text-gray-900 dark:text-white">Updated:</span>
536531
<span className="text-gray-600 dark:text-gray-400">{formatDate(selectedConversation.updated_at)}</span>
537532
</div>
538-
{selectedConversation.agentStatus && (
539-
<div className="flex justify-between">
540-
<span className="font-medium text-gray-900 dark:text-white">Agent Status:</span>
541-
<span className="text-gray-600 dark:text-gray-400">{selectedConversation.agentStatus}</span>
542-
</div>
543-
)}
533+
544534
<div className="flex justify-between">
545535
<span className="font-medium text-gray-900 dark:text-white">Total Events:</span>
546536
<span className="text-gray-600 dark:text-gray-400">{selectedConversation.events?.length || 0}</span>

‎example/src/utils/serverStatus.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const testLLMConfiguration = async (settings: Settings): Promise<{ succes
5555
const conversation = await RemoteConversation.create(
5656
settings.agentServerUrl,
5757
{
58-
name: 'TestAgent',
58+
kind: 'Agent',
5959
llm: {
6060
model: settings.modelName,
6161
api_key: settings.apiKey,

‎src/models/conversation.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export interface ConversationInfo {
2525
title?: string;
2626
created_at?: string;
2727
updated_at?: string;
28+
// Add status as an alias for agent_status for backward compatibility
29+
status?: AgentExecutionStatus;
2830
[key: string]: any;
2931
}
3032

‎src/types/base.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,10 @@ export interface ImageContent extends MessageContent {
7272
}
7373

7474
export interface AgentBase {
75-
name: string;
75+
kind: string;
7676
llm: LLM;
77+
// Keep name for backward compatibility
78+
name?: string;
7779
[key: string]: any;
7880
}
7981

@@ -109,8 +111,10 @@ export enum AgentExecutionStatus {
109111
IDLE = 'idle',
110112
RUNNING = 'running',
111113
PAUSED = 'paused',
114+
WAITING_FOR_CONFIRMATION = 'waiting_for_confirmation',
112115
FINISHED = 'finished',
113116
ERROR = 'error',
117+
STUCK = 'stuck',
114118
}
115119

116120
export interface ConversationStats {

0 commit comments

Comments
 (0)