refactor: streamline ApprovalCard component across various tools

This commit is contained in:
Anish Sarkar 2026-03-20 20:53:59 +05:30
parent bd2d633546
commit 4bd2071a8d
14 changed files with 225 additions and 267 deletions

View file

@ -118,6 +118,7 @@ function ApprovalCard({
const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
interruptData.__decided__ ?? null
);
const wasAlreadyDecided = interruptData.__decided__ != null;
const [isPanelOpen, setIsPanelOpen] = useState(false);
const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
@ -178,8 +179,6 @@ function ApprovalCard({
return () => window.removeEventListener("keydown", handler);
}, [handleApprove]);
if (decided && decided !== "reject") return null;
return (
<div
className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300"
@ -194,15 +193,21 @@ function ApprovalCard({
? "Notion Page Approved"
: "Create Notion Page"}
</p>
<p className="text-xs text-muted-foreground mt-0.5">
{decided === "reject"
? "Page creation was cancelled"
: decided === "edit"
? "Page creation is in progress with your changes"
: decided === "approve"
? "Page creation is in progress"
: "Requires your approval to proceed"}
</p>
{decided === "approve" || decided === "edit" ? (
wasAlreadyDecided ? (
<p className="text-xs text-muted-foreground mt-0.5">
{decided === "edit" ? "Page created with your changes" : "Page created"}
</p>
) : (
<TextShimmerLoader text={decided === "edit" ? "Creating page with your changes" : "Creating page"} size="sm" />
)
) : (
<p className="text-xs text-muted-foreground mt-0.5">
{decided === "reject"
? "Page creation was cancelled"
: "Requires your approval to proceed"}
</p>
)}
</div>
{!decided && canEdit && (
<Button
@ -443,15 +448,7 @@ export const CreateNotionPageToolUI = makeAssistantToolUI<
CreateNotionPageResult
>({
toolName: "create_notion_page",
render: function CreateNotionPageUI({ args, result, status }) {
if (status.type === "running") {
return (
<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
<TextShimmerLoader text="Preparing Notion page..." size="sm" />
</div>
);
}
render: function CreateNotionPageUI({ args, result }) {
if (!result) {
return null;
}

View file

@ -139,6 +139,7 @@ function ApprovalCard({
const [decided, setDecided] = useState<"approve" | "reject" | null>(
interruptData.__decided__ ?? null
);
const wasAlreadyDecided = interruptData.__decided__ != null;
const [deleteFromKb, setDeleteFromKb] = useState(false);
const account = interruptData.context?.account;
@ -170,8 +171,6 @@ function ApprovalCard({
return () => window.removeEventListener("keydown", handler);
}, [handleApprove]);
if (decided && decided !== "reject") return null;
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
{/* Header */}
@ -184,13 +183,19 @@ function ApprovalCard({
? "Notion Page Deletion Approved"
: "Delete Notion Page"}
</p>
<p className="text-xs text-muted-foreground mt-0.5">
{decided === "reject"
? "Page deletion was cancelled"
: decided === "approve"
? "Page deletion is in progress"
{decided === "approve" ? (
wasAlreadyDecided ? (
<p className="text-xs text-muted-foreground mt-0.5">Page deleted</p>
) : (
<TextShimmerLoader text="Deleting page" size="sm" />
)
) : (
<p className="text-xs text-muted-foreground mt-0.5">
{decided === "reject"
? "Page deletion was cancelled"
: "Requires your approval to proceed"}
</p>
</p>
)}
</div>
</div>
@ -216,7 +221,7 @@ function ApprovalCard({
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground">Page to Delete</p>
<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
📄 {currentTitle}
{currentTitle}
</div>
</div>
)}
@ -383,15 +388,7 @@ export const DeleteNotionPageToolUI = makeAssistantToolUI<
DeleteNotionPageResult
>({
toolName: "delete_notion_page",
render: function DeleteNotionPageUI({ result, status }) {
if (status.type === "running") {
return (
<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
<TextShimmerLoader text="Deleting Notion page..." size="sm" />
</div>
);
}
render: function DeleteNotionPageUI({ result }) {
if (!result) {
return null;
}

View file

@ -120,6 +120,7 @@ function ApprovalCard({
const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
interruptData.__decided__ ?? null
);
const wasAlreadyDecided = interruptData.__decided__ != null;
const [isPanelOpen, setIsPanelOpen] = useState(false);
const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
@ -157,8 +158,6 @@ function ApprovalCard({
return () => window.removeEventListener("keydown", handler);
}, [handleApprove]);
if (decided && decided !== "reject") return null;
return (
<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
{/* Header */}
@ -171,15 +170,21 @@ function ApprovalCard({
? "Notion Page Update Approved"
: "Update Notion Page"}
</p>
<p className="text-xs text-muted-foreground mt-0.5">
{decided === "reject"
? "Page update was cancelled"
: decided === "edit"
? "Page update is in progress with your changes"
: decided === "approve"
? "Page update is in progress"
: "Requires your approval to proceed"}
</p>
{decided === "approve" || decided === "edit" ? (
wasAlreadyDecided ? (
<p className="text-xs text-muted-foreground mt-0.5">
{decided === "edit" ? "Page updated with your changes" : "Page updated"}
</p>
) : (
<TextShimmerLoader text={decided === "edit" ? "Updating page with your changes" : "Updating page"} size="sm" />
)
) : (
<p className="text-xs text-muted-foreground mt-0.5">
{decided === "reject"
? "Page update was cancelled"
: "Requires your approval to proceed"}
</p>
)}
</div>
{!decided && canEdit && (
<Button
@ -238,7 +243,7 @@ function ApprovalCard({
<div className="space-y-2">
<p className="text-xs font-medium text-muted-foreground">Current Page</p>
<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
📄 {currentTitle}
{currentTitle}
</div>
</div>
)}
@ -389,15 +394,7 @@ export const UpdateNotionPageToolUI = makeAssistantToolUI<
UpdateNotionPageResult
>({
toolName: "update_notion_page",
render: function UpdateNotionPageUI({ args, result, status }) {
if (status.type === "running") {
return (
<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
<TextShimmerLoader text="Updating Notion page..." size="sm" />
</div>
);
}
render: function UpdateNotionPageUI({ args, result }) {
if (!result) {
return null;
}