feat: Phase I.2 I-UI — 5 new block types (agent_result, approval_request, task_card, workflow_card, knowledge_card) in BlockRenderer, tsc clean

2026-08-20 23:55:55 +02:00
parent 4ab91284c9
commit b540f4b2ab
7 changed files with 162 additions and 0 deletions
@@ -0,0 +1,33 @@
+import React from 'react';
+import type { MessageBlock } from '@/store/commStore';
+import { ShieldCheck, Check, X } from 'lucide-react';
+
+interface ApprovalRequestBlockProps {
+  block: MessageBlock;
+}
+
+const ApprovalRequestBlock: React.FC<ApprovalRequestBlockProps> = ({ block }) => {
+  const { title, description, approval_id, status } = block.block_data;
+  return (
+    <div className="border-2 border-warning-200 rounded-lg p-3 bg-warning-50">
+      <div className="flex items-center gap-2 mb-2">
+        <ShieldCheck className="w-4 h-4 text-warning-600" />
+        <span className="text-sm font-medium text-secondary-900">{title || 'Approval Required'}</span>
+        {status && <span className="text-xs px-2 py-0.5 rounded-full bg-warning-100 text-warning-700 capitalize">{status}</span>}
+      </div>
+      {description && <p className="text-sm text-secondary-700 mb-2">{description}</p>}
+      {status === 'pending' && (
+        <div className="flex gap-2">
+          <button className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-success-600 text-white text-sm hover:bg-success-700 min-h-touch">
+            <Check className="w-3.5 h-3.5" /> Approve
+          </button>
+          <button className="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-danger-600 text-white text-sm hover:bg-danger-700 min-h-touch">
+            <X className="w-3.5 h-3.5" /> Reject
+          </button>
+        </div>
+      )}
+      {approval_id && <p className="text-xs text-secondary-400 mt-1">ID: {approval_id.slice(0, 8)}</p>}
+    </div>
+  );
+};
+export default ApprovalRequestBlock;