64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { type ActionItem } from '@/lib/copilot';
|
||
|
|
|
||
|
|
interface ActionPreviewProps {
|
||
|
|
actions: ActionItem[];
|
||
|
|
onConfirm: (action: ActionItem) => void;
|
||
|
|
onDismiss: (action: ActionItem) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ACTION_LABELS: Record<string, string> = {
|
||
|
|
search_vehicles: 'Fahrzeuge durchsuchen',
|
||
|
|
search_contacts: 'Kontakte durchsuchen',
|
||
|
|
get_sale_overview: 'Verkaufsuebersicht abrufen',
|
||
|
|
create_vehicle: 'Fahrzeug anlegen',
|
||
|
|
create_contact: 'Kontakt anlegen',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function ActionPreview({ actions, onConfirm, onDismiss }: ActionPreviewProps) {
|
||
|
|
if (actions.length === 0) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="border border-yellow-300 bg-yellow-50 rounded-lg p-3 space-y-2" data-testid="action-preview">
|
||
|
|
<p className="font-semibold text-yellow-800">
|
||
|
|
Der Copilot moechte folgende Aktionen ausfuehren:
|
||
|
|
</p>
|
||
|
|
{actions.map((action, idx) => (
|
||
|
|
<div
|
||
|
|
key={`${action.type}-${idx}`}
|
||
|
|
className="flex items-center justify-between bg-white rounded p-2 border border-yellow-200"
|
||
|
|
data-testid={`action-item-${idx}`}
|
||
|
|
>
|
||
|
|
<div className="flex-1">
|
||
|
|
<p className="font-medium">
|
||
|
|
{ACTION_LABELS[action.type] || action.type}
|
||
|
|
</p>
|
||
|
|
<p className="text-sm text-gray-600">
|
||
|
|
{Object.entries(action.params).map(([key, value]) =>
|
||
|
|
`${key}: ${String(value)}`
|
||
|
|
).join(', ') || 'Keine Parameter'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-2 ml-2">
|
||
|
|
<button
|
||
|
|
onClick={() => onConfirm(action)}
|
||
|
|
className="bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700"
|
||
|
|
data-testid={`confirm-action-${idx}`}
|
||
|
|
>
|
||
|
|
Bestaetigen
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => onDismiss(action)}
|
||
|
|
className="bg-gray-300 text-gray-700 px-3 py-1 rounded text-sm hover:bg-gray-400"
|
||
|
|
data-testid={`dismiss-action-${idx}`}
|
||
|
|
>
|
||
|
|
Ablehnen
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|