feat: non-collapsible widgets with tool call/result mapping

This commit is contained in:
Vivek R
2025-06-23 23:25:25 +05:30
parent 670630fb63
commit c52c29ebad
7 changed files with 415 additions and 470 deletions

View File

@@ -12,7 +12,6 @@ import type { AgentRun } from '@/lib/api';
import { listen, type UnlistenFn } from '@tauri-apps/api/event';
import { StreamMessage } from './StreamMessage';
import { ErrorBoundary } from './ErrorBoundary';
import { enhanceMessages, type EnhancedMessage } from '@/types/enhanced-messages';
interface SessionOutputViewerProps {
session: AgentRun;
@@ -40,7 +39,6 @@ export interface ClaudeStreamMessage {
export function SessionOutputViewer({ session, onClose, className }: SessionOutputViewerProps) {
const [messages, setMessages] = useState<ClaudeStreamMessage[]>([]);
const [enhancedMessages, setEnhancedMessages] = useState<EnhancedMessage[]>([]);
const [rawJsonlOutput, setRawJsonlOutput] = useState<string[]>([]);
const [loading, setLoading] = useState(false);
const [isFullscreen, setIsFullscreen] = useState(false);
@@ -91,11 +89,6 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
}
}, [messages, hasUserScrolled, isFullscreen]);
// Enhance messages whenever they change
useEffect(() => {
const enhanced = enhanceMessages(messages);
setEnhancedMessages(enhanced);
}, [messages]);
const loadOutput = async (skipCache = false) => {
if (!session.id) return;
@@ -317,13 +310,13 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
</Badge>
)}
<span className="text-xs text-muted-foreground">
{enhancedMessages.length} messages
{messages.length} messages
</span>
</div>
</div>
</div>
<div className="flex items-center space-x-2">
{enhancedMessages.length > 0 && (
{messages.length > 0 && (
<>
<Button
variant="outline"
@@ -410,7 +403,7 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
}
}}
>
{enhancedMessages.length === 0 ? (
{messages.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-center">
{session.status === 'running' ? (
<>
@@ -439,7 +432,7 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
) : (
<>
<AnimatePresence>
{enhancedMessages.map((message, index) => (
{messages.map((message: ClaudeStreamMessage, index: number) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 10 }}
@@ -447,7 +440,7 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
transition={{ duration: 0.2 }}
>
<ErrorBoundary>
<StreamMessage message={message} streamMessages={enhancedMessages} />
<StreamMessage message={message} streamMessages={messages} />
</ErrorBoundary>
</motion.div>
))}
@@ -544,7 +537,7 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
}
}}
>
{enhancedMessages.length === 0 ? (
{messages.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-center">
{session.status === 'running' ? (
<>
@@ -563,7 +556,7 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
) : (
<>
<AnimatePresence>
{enhancedMessages.map((message, index) => (
{messages.map((message: ClaudeStreamMessage, index: number) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 10 }}
@@ -571,7 +564,7 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
transition={{ duration: 0.2 }}
>
<ErrorBoundary>
<StreamMessage message={message} streamMessages={enhancedMessages} />
<StreamMessage message={message} streamMessages={messages} />
</ErrorBoundary>
</motion.div>
))}
@@ -596,4 +589,4 @@ export function SessionOutputViewer({ session, onClose, className }: SessionOutp
</ToastContainer>
</>
);
}
}