Spaces:
Running
Running
File size: 2,820 Bytes
c2ea5ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import React from "react";
import { ExampleTraceLite } from "@/types";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
interface Props {
open: boolean;
example: ExampleTraceLite;
onOpenChange: (open: boolean) => void;
onImport: () => void;
}
const ExampleTraceDetailDrawer: React.FC<Props> = ({
open,
example,
onOpenChange,
onImport,
}) => {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
className="fixed inset-y-0 right-0 m-0 h-full w-full max-w-lg rounded-l-xl bg-background/95 backdrop-blur shadow-xl border-l data-[state=open]:animate-slideInRight"
style={{ top: 0, left: "auto", transform: "none" }}
>
<div className="flex flex-col h-full">
{/* Scrollable content */}
<div className="flex-1 overflow-y-auto space-y-6 p-6">
{/* Question */}
<div className="space-y-2">
<h2 className="text-lg font-semibold leading-relaxed">
Full Question
</h2>
<p className="whitespace-pre-line break-words">
{example.question}
</p>
</div>
{/* Agents */}
{example.agents && example.agents.length > 0 && (
<div className="space-y-2">
<h3 className="text-sm font-semibold text-muted-foreground">
Agents
</h3>
<div className="flex flex-wrap gap-2">
{example.agents.map((a) => (
<Badge key={a} variant="secondary">
{a}
</Badge>
))}
</div>
</div>
)}
{/* Mistake step */}
<div className="space-y-1">
<h3 className="text-sm font-semibold text-muted-foreground">
Mistake Step
</h3>
<p className="text-sm text-muted-foreground">
{example.mistake_step}
</p>
</div>
</div>
{/* Footer */}
<div className="border-t bg-background p-4 flex justify-end gap-2 sticky bottom-0">
<Button variant="outline" onClick={() => onOpenChange(false)}>
Close
</Button>
<Button
variant="outline"
onClick={() =>
navigator.clipboard.writeText(JSON.stringify(example, null, 2))
}
>
Copy JSON
</Button>
<Button onClick={onImport}>Import</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
};
export default ExampleTraceDetailDrawer;
|