feat(T07): KI-Copilot with OpenRouter chat, voice input, action system, chat history

2026-07-17 02:28:41 +02:00
parent cb89e3ff1e
commit 5cc9f8e9a9
24 changed files with 2878 additions and 188 deletions
@@ -0,0 +1,63 @@
+'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>
+  );
+}