chore: render initial and gathered context

This commit is contained in:
Abhishek Kumar 2025-12-31 22:02:50 +05:30
parent 3afae6cf09
commit cc2d3e70d2
3 changed files with 51 additions and 5 deletions

View file

@ -1,6 +1,6 @@
'use client';
import { FileText, Video } from 'lucide-react';
import { Check, Copy, FileText, Video } from 'lucide-react';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
@ -25,6 +25,47 @@ interface WorkflowRunResponse {
gathered_context: Record<string, string | number | boolean | object> | null;
}
function ContextDisplay({ title, context }: { title: string; context: Record<string, string | number | boolean | object> | null }) {
const [copied, setCopied] = useState(false);
const handleCopy = () => {
if (!context) return;
navigator.clipboard.writeText(JSON.stringify(context, null, 2));
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
if (!context || Object.keys(context).length === 0) {
return (
<Card className="border-border">
<CardHeader className="pb-2">
<CardTitle className="text-lg">{title}</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">No data available</p>
</CardContent>
</Card>
);
}
return (
<Card className="border-border">
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-lg">{title}</CardTitle>
<Button variant="ghost" size="sm" onClick={handleCopy} className="gap-2">
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
{copied ? 'Copied' : 'Copy'}
</Button>
</CardHeader>
<CardContent>
<pre className="text-sm bg-muted p-3 rounded-md overflow-auto max-h-64">
{JSON.stringify(context, null, 2)}
</pre>
</CardContent>
</Card>
);
}
export default function WorkflowRunPage() {
const params = useParams();
@ -174,7 +215,7 @@ export default function WorkflowRunPage() {
</CardContent>
</Card>
{/* <div className="grid gap-6 md:grid-cols-2">
<div className="grid gap-6 md:grid-cols-2">
<ContextDisplay
title="Initial Context"
context={workflowRun?.initial_context}
@ -183,7 +224,7 @@ export default function WorkflowRunPage() {
title="Gathered Context"
context={workflowRun?.gathered_context}
/>
</div> */}
</div>
</div>
</div>
);