Refactor: Approve tool use

This commit is contained in:
gpt-engineer-app[bot]
2025-10-06 18:24:20 +00:00
parent c2c70524f7
commit 63a7877314
4 changed files with 175 additions and 33 deletions

View File

@@ -128,39 +128,61 @@ interface PhotoDeletionPreviewProps {
export function PhotoDeletionPreview({ photo, compact = false }: PhotoDeletionPreviewProps) {
if (compact) {
return (
<Badge variant="outline" className="text-red-600 dark:text-red-400">
<Trash2 className="h-3 w-3 mr-1" />
Delete Photo
</Badge>
<div className="flex items-center gap-2 p-2 rounded-md bg-destructive/10 border border-destructive/20">
<Trash2 className="h-4 w-4 text-destructive" />
<span className="text-sm font-medium text-destructive">Delete Photo</span>
{photo.deletion_reason && (
<span className="text-xs text-muted-foreground">- {photo.deletion_reason}</span>
)}
</div>
);
}
return (
<div className="flex flex-col gap-2 p-3 rounded-md bg-destructive/10">
<div className="text-sm font-medium text-red-600 dark:text-red-400">
<Trash2 className="h-4 w-4 inline mr-1" />
Deleting Photo
<div className="flex flex-col gap-3 p-4 rounded-lg bg-destructive/10 border-2 border-destructive/30">
<div className="flex items-center gap-2 text-destructive font-semibold">
<Trash2 className="h-5 w-5" />
<span>Photo Deletion Request</span>
</div>
<div className="flex gap-3">
<img
src={photo.url}
alt={photo.title || photo.caption || 'Photo to be deleted'}
className="w-32 h-32 object-cover rounded opacity-75"
loading="lazy"
/>
<div className="flex gap-4">
{photo.url && (
<img
src={photo.url}
alt={photo.title || photo.caption || 'Photo to be deleted'}
className="w-48 h-48 object-cover rounded-lg border-2 border-destructive/40 shadow-lg"
loading="lazy"
/>
)}
<div className="flex-1 text-sm space-y-2">
{photo.title && <div className="font-medium">{photo.title}</div>}
{photo.caption && <div className="text-muted-foreground">{photo.caption}</div>}
{photo.entity_type && photo.entity_name && (
<div className="text-xs text-muted-foreground">
From: <span className="capitalize">{photo.entity_type}</span> - {photo.entity_name}
<div className="flex-1 space-y-3">
{photo.title && (
<div>
<span className="text-xs font-medium text-muted-foreground">Title:</span>
<div className="font-medium">{photo.title}</div>
</div>
)}
{photo.caption && (
<div>
<span className="text-xs font-medium text-muted-foreground">Caption:</span>
<div className="text-sm">{photo.caption}</div>
</div>
)}
{photo.entity_type && photo.entity_name && (
<div>
<span className="text-xs font-medium text-muted-foreground">From Entity:</span>
<div className="text-sm">
<span className="capitalize">{photo.entity_type.replace('_', ' ')}</span> - <span className="font-medium">{photo.entity_name}</span>
</div>
</div>
)}
{photo.deletion_reason && (
<div className="text-xs p-2 bg-destructive/5 rounded border border-destructive/20">
<span className="font-medium">Reason:</span> {photo.deletion_reason}
<div className="p-3 bg-destructive/20 rounded-md border border-destructive/30">
<span className="text-xs font-bold text-destructive uppercase">Deletion Reason:</span>
<p className="mt-1 text-sm font-medium">{photo.deletion_reason}</p>
</div>
)}
</div>