83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
/**
|
|
* ToolActivityLog -- Real-time tool call activity display.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { ToolActivity } from './useWorkspace';
|
|
|
|
interface ToolActivityLogProps {
|
|
activities: ToolActivity[];
|
|
}
|
|
|
|
export const ToolActivityLog: React.FC<ToolActivityLogProps> = ({ activities }) => {
|
|
if (!activities.length) {
|
|
return (
|
|
<div style={{ padding: 16, textAlign: 'center', color: '#999', fontSize: 12 }}>
|
|
No tool activity yet
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ padding: 8 }}>
|
|
{activities.map(activity => (
|
|
<div
|
|
key={activity.id}
|
|
style={{
|
|
padding: '8px 10px',
|
|
marginBottom: 6,
|
|
borderRadius: 6,
|
|
fontSize: 12,
|
|
border: `1px solid ${
|
|
activity.status === 'calling'
|
|
? '#ffc107'
|
|
: activity.status === 'success'
|
|
? '#4caf50'
|
|
: '#f44336'
|
|
}30`,
|
|
background: activity.status === 'calling'
|
|
? '#fff8e1'
|
|
: activity.status === 'success'
|
|
? '#e8f5e9'
|
|
: '#ffebee',
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<span style={{ fontWeight: 600 }}>{activity.toolName}</span>
|
|
<span style={{
|
|
fontSize: 10,
|
|
padding: '1px 6px',
|
|
borderRadius: 3,
|
|
background: activity.status === 'calling'
|
|
? '#ffc107'
|
|
: activity.status === 'success'
|
|
? '#4caf50'
|
|
: '#f44336',
|
|
color: '#fff',
|
|
}}>
|
|
{activity.status}
|
|
</span>
|
|
</div>
|
|
{activity.args && Object.keys(activity.args).length > 0 && (
|
|
<div style={{ marginTop: 4, color: '#666', fontSize: 11 }}>
|
|
{Object.entries(activity.args)
|
|
.map(([k, v]) => `${k}: ${typeof v === 'string' ? v.slice(0, 50) : JSON.stringify(v)}`)
|
|
.join(', ')}
|
|
</div>
|
|
)}
|
|
{activity.result && (
|
|
<div style={{ marginTop: 4, color: '#388e3c', fontSize: 11, maxHeight: 60, overflow: 'hidden' }}>
|
|
{activity.result.slice(0, 200)}
|
|
{activity.result.length > 200 && '...'}
|
|
</div>
|
|
)}
|
|
{activity.error && (
|
|
<div style={{ marginTop: 4, color: '#c62828', fontSize: 11 }}>
|
|
{activity.error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|