feat: add onClose functionality to ApprovalCard across all HITL tools

This commit is contained in:
Anish Sarkar 2026-03-20 23:50:50 +05:30
parent 85462675a0
commit ab6eeaf02e
11 changed files with 36 additions and 6 deletions

View file

@ -15,6 +15,7 @@ interface HitlEditPanelState {
toolName: string;
extraFields?: ExtraField[];
onSave: ((title: string, content: string, extraFieldValues?: Record<string, string>) => void) | null;
onClose: (() => void) | null;
}
const initialState: HitlEditPanelState = {
@ -24,6 +25,7 @@ const initialState: HitlEditPanelState = {
toolName: "",
extraFields: undefined,
onSave: null,
onClose: null,
};
export const hitlEditPanelAtom = atom<HitlEditPanelState>(initialState);
@ -41,6 +43,7 @@ export const openHitlEditPanelAtom = atom(
toolName: string;
extraFields?: ExtraField[];
onSave: (title: string, content: string, extraFieldValues?: Record<string, string>) => void;
onClose?: () => void;
}
) => {
if (!get(hitlEditPanelAtom).isOpen) {
@ -53,6 +56,7 @@ export const openHitlEditPanelAtom = atom(
toolName: payload.toolName,
extraFields: payload.extraFields,
onSave: payload.onSave,
onClose: payload.onClose ?? null,
});
set(rightPanelTabAtom, "hitl-edit");
set(rightPanelCollapsedAtom, false);
@ -60,6 +64,8 @@ export const openHitlEditPanelAtom = atom(
);
export const closeHitlEditPanelAtom = atom(null, (get, set) => {
const current = get(hitlEditPanelAtom);
current.onClose?.();
set(hitlEditPanelAtom, initialState);
set(rightPanelTabAtom, "sources");
const prev = get(preHitlCollapsedAtom);

View file

@ -245,6 +245,7 @@ function ApprovalCard({
bcc: extras.bcc ?? pendingEdits?.bcc ?? args.bcc ?? "",
});
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -352,7 +353,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={!canApprove}
disabled={!canApprove || isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -363,6 +364,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });

View file

@ -247,6 +247,7 @@ function ApprovalCard({
bcc: extras.bcc ?? pendingEdits?.bcc ?? args.bcc ?? "",
});
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -352,7 +353,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={!canApprove}
disabled={!canApprove || isPanelOpen}
>
Send
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -363,6 +364,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });

View file

@ -328,6 +328,7 @@ function ApprovalCard({
bcc: extras.bcc ?? currentBcc,
});
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -440,6 +441,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -450,6 +452,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({

View file

@ -304,6 +304,7 @@ function ApprovalCard({
attendees: extras.attendees ?? pendingEdits?.attendees ?? attendeesList.join(", "),
});
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -446,7 +447,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={!canApprove}
disabled={!canApprove || isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -457,6 +458,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });

View file

@ -347,6 +347,7 @@ function ApprovalCard({
attendees: extras.attendees ?? proposedAttendeesStr,
});
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -462,6 +463,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -472,6 +474,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });

View file

@ -249,6 +249,7 @@ function ApprovalCard({
setIsPanelOpen(false);
setPendingEdits({ name: newName, content: newContent });
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -376,7 +377,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={!canApprove}
disabled={!canApprove || isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -387,6 +388,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });

View file

@ -259,6 +259,7 @@ function ApprovalCard({
setIsPanelOpen(false);
setPendingEdits({ title: newTitle, description: newDescription });
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -488,7 +489,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={!canApprove}
disabled={!canApprove || isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -499,6 +500,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });

View file

@ -325,6 +325,7 @@ function ApprovalCard({
}));
setHasPanelEdits(true);
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -599,6 +600,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -609,6 +611,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });

View file

@ -228,6 +228,7 @@ function ApprovalCard({
setIsPanelOpen(false);
setPendingEdits({ title: newTitle, content: newContent });
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -346,7 +347,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={!selectedAccountId || !isTitleValid}
disabled={!selectedAccountId || !isTitleValid || isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -357,6 +358,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });

View file

@ -203,6 +203,7 @@ function ApprovalCard({
setIsPanelOpen(false);
setPendingEdits({ content: newContent });
},
onClose: () => setIsPanelOpen(false),
});
}}
>
@ -278,6 +279,7 @@ function ApprovalCard({
size="sm"
className="rounded-lg gap-1.5"
onClick={handleApprove}
disabled={isPanelOpen}
>
Approve
<CornerDownLeftIcon className="size-3 opacity-60" />
@ -288,6 +290,7 @@ function ApprovalCard({
size="sm"
variant="ghost"
className="rounded-lg text-muted-foreground"
disabled={isPanelOpen}
onClick={() => {
setDecided("reject");
onDecision({ type: "reject", message: "User rejected the action." });