mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 16:56:22 +02:00
feat: integrate HITL phase management across tool components
- Refactored ApprovalCard in various tools (Gmail, Google Calendar, Google Drive) to utilize the new useHitlPhase hook for improved state management. - Updated logic to handle tool action phases (pending, processing, complete, rejected) consistently across components, enhancing user feedback during interactions. - Simplified decision handling by removing direct state management for approval decisions, streamlining the approval process. - Enhanced UI feedback to reflect the current phase of tool actions, improving user experience during tool interactions.
This commit is contained in:
Anish Sarkar
parent
ff6514a99f
commit
9cd2c1f712
19 changed files with 706 additions and 590 deletions
|
|
@ -21,6 +21,7 @@ import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
|||
import { useSetAtom } from "jotai";
|
||||
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import { useHitlPhase } from "@/hooks/use-hitl-phase";
|
||||
|
||||
interface GmailAccount {
|
||||
id: number;
|
||||
|
|
@ -32,6 +33,7 @@ interface GmailAccount {
|
|||
interface InterruptResult {
|
||||
__interrupt__: true;
|
||||
__decided__?: "approve" | "reject" | "edit";
|
||||
__completed__?: boolean;
|
||||
action_requests: Array<{
|
||||
name: string;
|
||||
args: Record<string, unknown>;
|
||||
|
|
@ -126,10 +128,7 @@ function ApprovalCard({
|
|||
edited_action?: { name: string; args: Record<string, unknown> };
|
||||
}) => void;
|
||||
}) {
|
||||
const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
|
||||
interruptData.__decided__ ?? null
|
||||
);
|
||||
const [wasAlreadyDecided] = useState(() => interruptData.__decided__ != null);
|
||||
const { phase, setProcessing, setRejected } = useHitlPhase(interruptData);
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||||
const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
|
||||
const [pendingEdits, setPendingEdits] = useState<{
|
||||
|
|
@ -149,15 +148,16 @@ function ApprovalCard({
|
|||
|
||||
const canApprove = !!selectedAccountId;
|
||||
|
||||
const reviewConfig = interruptData.review_configs[0];
|
||||
const reviewConfig = interruptData.review_configs?.[0];
|
||||
const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
|
||||
const canEdit = allowedDecisions.includes("edit");
|
||||
|
||||
const handleApprove = useCallback(() => {
|
||||
if (decided || isPanelOpen || !canApprove) return;
|
||||
if (phase !== "pending") return;
|
||||
if (isPanelOpen || !canApprove) return;
|
||||
if (!allowedDecisions.includes("approve")) return;
|
||||
const isEdited = pendingEdits !== null;
|
||||
setDecided(isEdited ? "edit" : "approve");
|
||||
setProcessing();
|
||||
onDecision({
|
||||
type: isEdited ? "edit" : "approve",
|
||||
edited_action: {
|
||||
|
|
@ -175,7 +175,7 @@ function ApprovalCard({
|
|||
},
|
||||
},
|
||||
});
|
||||
}, [decided, isPanelOpen, canApprove, allowedDecisions, onDecision, interruptData, args, selectedAccountId, pendingEdits]);
|
||||
}, [phase, isPanelOpen, canApprove, allowedDecisions, setProcessing, onDecision, interruptData, args, selectedAccountId, pendingEdits]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
|
|
@ -194,30 +194,30 @@ function ApprovalCard({
|
|||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{decided === "reject"
|
||||
{phase === "rejected"
|
||||
? "Gmail Draft Rejected"
|
||||
: decided === "approve" || decided === "edit"
|
||||
: phase === "processing" || phase === "complete"
|
||||
? "Gmail Draft Approved"
|
||||
: "Create Gmail Draft"}
|
||||
</p>
|
||||
{decided === "approve" || decided === "edit" ? (
|
||||
wasAlreadyDecided ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "edit" ? "Draft created with your changes" : "Draft created"}
|
||||
</p>
|
||||
) : (
|
||||
<TextShimmerLoader text={decided === "edit" ? "Creating draft with your changes" : "Creating draft"} size="sm" />
|
||||
)
|
||||
{phase === "processing" ? (
|
||||
<TextShimmerLoader text={pendingEdits ? "Creating draft with your changes" : "Creating draft"} size="sm" />
|
||||
) : phase === "complete" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{pendingEdits ? "Draft created with your changes" : "Draft created"}
|
||||
</p>
|
||||
) : phase === "rejected" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Draft creation was cancelled
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "reject"
|
||||
? "Draft creation was cancelled"
|
||||
: "Requires your approval to proceed"}
|
||||
Requires your approval to proceed
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!decided && canEdit && (
|
||||
{phase === "pending" && canEdit && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
|
|
@ -255,8 +255,8 @@ function ApprovalCard({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Account selector */}
|
||||
{!decided && interruptData.context && (
|
||||
{/* Account selector — real dropdown in pending */}
|
||||
{phase === "pending" && interruptData.context && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 space-y-4 select-none">
|
||||
|
|
@ -297,7 +297,7 @@ function ApprovalCard({
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* Email headers + body preview */}
|
||||
{/* Email headers + body preview — visible in ALL phases */}
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 pt-3 pb-2 space-y-1.5 select-none">
|
||||
{(pendingEdits?.to ?? args.to) && (
|
||||
|
|
@ -343,8 +343,8 @@ function ApprovalCard({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
{!decided && (
|
||||
{/* Action buttons — only in pending */}
|
||||
{phase === "pending" && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 flex items-center gap-2 select-none">
|
||||
|
|
@ -366,7 +366,7 @@ function ApprovalCard({
|
|||
className="rounded-lg text-muted-foreground"
|
||||
disabled={isPanelOpen}
|
||||
onClick={() => {
|
||||
setDecided("reject");
|
||||
setRejected();
|
||||
onDecision({ type: "reject", message: "User rejected the action." });
|
||||
}}
|
||||
>
|
||||
|
|
@ -445,7 +445,7 @@ export const CreateGmailDraftToolUI = makeAssistantToolUI<
|
|||
CreateGmailDraftResult
|
||||
>({
|
||||
toolName: "create_gmail_draft",
|
||||
render: function CreateGmailDraftUI({ args, result, status: _status }) {
|
||||
render: function CreateGmailDraftUI({ args, result }) {
|
||||
if (!result) return null;
|
||||
|
||||
if (isInterruptResult(result)) {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
|||
import { useSetAtom } from "jotai";
|
||||
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import { useHitlPhase } from "@/hooks/use-hitl-phase";
|
||||
|
||||
interface GmailAccount {
|
||||
id: number;
|
||||
|
|
@ -33,6 +34,7 @@ interface GmailAccount {
|
|||
interface InterruptResult {
|
||||
__interrupt__: true;
|
||||
__decided__?: "approve" | "reject" | "edit";
|
||||
__completed__?: boolean;
|
||||
action_requests: Array<{
|
||||
name: string;
|
||||
args: Record<string, unknown>;
|
||||
|
|
@ -126,10 +128,7 @@ function ApprovalCard({
|
|||
edited_action?: { name: string; args: Record<string, unknown> };
|
||||
}) => void;
|
||||
}) {
|
||||
const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
|
||||
interruptData.__decided__ ?? null
|
||||
);
|
||||
const [wasAlreadyDecided] = useState(() => interruptData.__decided__ != null);
|
||||
const { phase, setProcessing, setRejected } = useHitlPhase(interruptData);
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||||
const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
|
||||
const [pendingEdits, setPendingEdits] = useState<{
|
||||
|
|
@ -149,15 +148,16 @@ function ApprovalCard({
|
|||
|
||||
const canApprove = !!selectedAccountId;
|
||||
|
||||
const reviewConfig = interruptData.review_configs[0];
|
||||
const reviewConfig = interruptData.review_configs?.[0];
|
||||
const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
|
||||
const canEdit = allowedDecisions.includes("edit");
|
||||
|
||||
const handleApprove = useCallback(() => {
|
||||
if (decided || isPanelOpen || !canApprove) return;
|
||||
if (phase !== "pending") return;
|
||||
if (isPanelOpen || !canApprove) return;
|
||||
if (!allowedDecisions.includes("approve")) return;
|
||||
const isEdited = pendingEdits !== null;
|
||||
setDecided(isEdited ? "edit" : "approve");
|
||||
setProcessing();
|
||||
onDecision({
|
||||
type: isEdited ? "edit" : "approve",
|
||||
edited_action: {
|
||||
|
|
@ -175,7 +175,7 @@ function ApprovalCard({
|
|||
},
|
||||
},
|
||||
});
|
||||
}, [decided, isPanelOpen, canApprove, allowedDecisions, onDecision, interruptData, args, selectedAccountId, pendingEdits]);
|
||||
}, [phase, isPanelOpen, canApprove, allowedDecisions, setProcessing, onDecision, interruptData, args, selectedAccountId, pendingEdits]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
|
|
@ -194,30 +194,30 @@ function ApprovalCard({
|
|||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{decided === "reject"
|
||||
{phase === "rejected"
|
||||
? "Email Sending Rejected"
|
||||
: decided === "approve" || decided === "edit"
|
||||
: phase === "processing" || phase === "complete"
|
||||
? "Email Sending Approved"
|
||||
: "Send Email"}
|
||||
</p>
|
||||
{decided === "approve" || decided === "edit" ? (
|
||||
wasAlreadyDecided ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "edit" ? "Email sent with your changes" : "Email sent"}
|
||||
</p>
|
||||
) : (
|
||||
<TextShimmerLoader text={decided === "edit" ? "Sending email with your changes" : "Sending email"} size="sm" />
|
||||
)
|
||||
{phase === "processing" ? (
|
||||
<TextShimmerLoader text={pendingEdits ? "Sending email with your changes" : "Sending email"} size="sm" />
|
||||
) : phase === "complete" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{pendingEdits ? "Email sent with your changes" : "Email sent"}
|
||||
</p>
|
||||
) : phase === "rejected" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Email sending was cancelled
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "reject"
|
||||
? "Email sending was cancelled"
|
||||
: "Requires your approval to proceed"}
|
||||
Requires your approval to proceed
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!decided && canEdit && (
|
||||
{phase === "pending" && canEdit && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
|
|
@ -255,8 +255,8 @@ function ApprovalCard({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Account selector */}
|
||||
{!decided && interruptData.context && (
|
||||
{/* Account selector — real dropdown in pending */}
|
||||
{phase === "pending" && interruptData.context && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 space-y-4 select-none">
|
||||
|
|
@ -295,7 +295,7 @@ function ApprovalCard({
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* Email headers + body preview */}
|
||||
{/* Email headers + body preview — visible in ALL phases */}
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 pt-3 pb-2 space-y-1.5 select-none">
|
||||
{(pendingEdits?.to ?? args.to) && (
|
||||
|
|
@ -341,8 +341,8 @@ function ApprovalCard({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
{!decided && (
|
||||
{/* Action buttons — only in pending */}
|
||||
{phase === "pending" && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 flex items-center gap-2 select-none">
|
||||
|
|
@ -364,7 +364,7 @@ function ApprovalCard({
|
|||
className="rounded-lg text-muted-foreground"
|
||||
disabled={isPanelOpen}
|
||||
onClick={() => {
|
||||
setDecided("reject");
|
||||
setRejected();
|
||||
onDecision({ type: "reject", message: "User rejected the action." });
|
||||
}}
|
||||
>
|
||||
|
|
@ -444,7 +444,7 @@ export const SendGmailEmailToolUI = makeAssistantToolUI<
|
|||
SendGmailEmailResult
|
||||
>({
|
||||
toolName: "send_gmail_email",
|
||||
render: function SendGmailEmailUI({ args, result, status: _status }) {
|
||||
render: function SendGmailEmailUI({ args, result }) {
|
||||
if (!result) return null;
|
||||
|
||||
if (isInterruptResult(result)) {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { useCallback, useEffect, useState } from "react";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
||||
import { useHitlPhase } from "@/hooks/use-hitl-phase";
|
||||
|
||||
interface GmailAccount {
|
||||
id: number;
|
||||
|
|
@ -32,6 +33,7 @@ interface GmailMessage {
|
|||
interface InterruptResult {
|
||||
__interrupt__: true;
|
||||
__decided__?: "approve" | "reject";
|
||||
__completed__?: boolean;
|
||||
action_requests: Array<{
|
||||
name: string;
|
||||
args: Record<string, unknown>;
|
||||
|
|
@ -144,18 +146,16 @@ function ApprovalCard({
|
|||
edited_action?: { name: string; args: Record<string, unknown> };
|
||||
}) => void;
|
||||
}) {
|
||||
const [decided, setDecided] = useState<"approve" | "reject" | null>(
|
||||
interruptData.__decided__ ?? null
|
||||
);
|
||||
const [wasAlreadyDecided] = useState(() => interruptData.__decided__ != null);
|
||||
const { phase, setProcessing, setRejected } = useHitlPhase(interruptData);
|
||||
const [deleteFromKb, setDeleteFromKb] = useState(false);
|
||||
|
||||
const account = interruptData.context?.account;
|
||||
const email = interruptData.context?.email;
|
||||
const context = interruptData.context;
|
||||
const account = context?.account;
|
||||
const email = context?.email;
|
||||
|
||||
const handleApprove = useCallback(() => {
|
||||
if (decided) return;
|
||||
setDecided("approve");
|
||||
if (phase !== "pending") return;
|
||||
setProcessing();
|
||||
onDecision({
|
||||
type: "approve",
|
||||
edited_action: {
|
||||
|
|
@ -167,7 +167,7 @@ function ApprovalCard({
|
|||
},
|
||||
},
|
||||
});
|
||||
}, [decided, onDecision, interruptData, email, account?.id, deleteFromKb]);
|
||||
}, [phase, setProcessing, onDecision, interruptData, email, account?.id, deleteFromKb]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
|
|
@ -186,23 +186,23 @@ function ApprovalCard({
|
|||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{decided === "reject"
|
||||
{phase === "rejected"
|
||||
? "Email Trash Rejected"
|
||||
: decided === "approve"
|
||||
: phase === "processing" || phase === "complete"
|
||||
? "Email Trash Approved"
|
||||
: "Trash Email"}
|
||||
</p>
|
||||
{decided === "approve" ? (
|
||||
wasAlreadyDecided ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Email trashed</p>
|
||||
) : (
|
||||
<TextShimmerLoader text="Trashing email" size="sm" />
|
||||
)
|
||||
{phase === "processing" ? (
|
||||
<TextShimmerLoader text="Trashing email" size="sm" />
|
||||
) : phase === "complete" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Email trashed</p>
|
||||
) : phase === "rejected" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Email trash was cancelled
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "reject"
|
||||
? "Email trash was cancelled"
|
||||
: "Requires your approval to proceed"}
|
||||
Requires your approval to proceed
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -210,12 +210,12 @@ function ApprovalCard({
|
|||
</div>
|
||||
|
||||
{/* Context — read-only account and email info */}
|
||||
{!decided && interruptData.context && (
|
||||
{phase !== "rejected" && context && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 space-y-4 select-none">
|
||||
{interruptData.context.error ? (
|
||||
<p className="text-sm text-destructive">{interruptData.context.error}</p>
|
||||
{context.error ? (
|
||||
<p className="text-sm text-destructive">{context.error}</p>
|
||||
) : (
|
||||
<>
|
||||
{account && (
|
||||
|
|
@ -253,7 +253,7 @@ function ApprovalCard({
|
|||
)}
|
||||
|
||||
{/* delete_from_kb toggle */}
|
||||
{!decided && (
|
||||
{phase === "pending" && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 select-none">
|
||||
|
|
@ -276,7 +276,7 @@ function ApprovalCard({
|
|||
)}
|
||||
|
||||
{/* Action buttons */}
|
||||
{!decided && (
|
||||
{phase === "pending" && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 flex items-center gap-2 select-none">
|
||||
|
|
@ -293,7 +293,7 @@ function ApprovalCard({
|
|||
variant="ghost"
|
||||
className="rounded-lg text-muted-foreground"
|
||||
onClick={() => {
|
||||
setDecided("reject");
|
||||
setRejected();
|
||||
onDecision({ type: "reject", message: "User rejected the action." });
|
||||
}}
|
||||
>
|
||||
|
|
@ -397,7 +397,7 @@ export const TrashGmailEmailToolUI = makeAssistantToolUI<
|
|||
TrashGmailEmailResult
|
||||
>({
|
||||
toolName: "trash_gmail_email",
|
||||
render: function TrashGmailEmailUI({ result, status: _status }) {
|
||||
render: function TrashGmailEmailUI({ result }) {
|
||||
if (!result) return null;
|
||||
|
||||
if (isInterruptResult(result)) {
|
||||
|
|
@ -405,9 +405,10 @@ export const TrashGmailEmailToolUI = makeAssistantToolUI<
|
|||
<ApprovalCard
|
||||
interruptData={result}
|
||||
onDecision={(decision) => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
|
||||
);
|
||||
const event = new CustomEvent("hitl-decision", {
|
||||
detail: { decisions: [decision] },
|
||||
});
|
||||
window.dispatchEvent(event);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
|||
import { useSetAtom } from "jotai";
|
||||
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import { useHitlPhase } from "@/hooks/use-hitl-phase";
|
||||
|
||||
interface GmailAccount {
|
||||
id: number;
|
||||
|
|
@ -36,6 +37,7 @@ interface GmailMessage {
|
|||
interface InterruptResult {
|
||||
__interrupt__: true;
|
||||
__decided__?: "approve" | "reject" | "edit";
|
||||
__completed__?: boolean;
|
||||
action_requests: Array<{
|
||||
name: string;
|
||||
args: Record<string, unknown>;
|
||||
|
|
@ -157,12 +159,7 @@ function ApprovalCard({
|
|||
edited_action?: { name: string; args: Record<string, unknown> };
|
||||
}) => void;
|
||||
}) {
|
||||
const [decided, setDecided] = useState<
|
||||
"approve" | "reject" | "edit" | null
|
||||
>(interruptData.__decided__ ?? null);
|
||||
const [wasAlreadyDecided] = useState(
|
||||
() => interruptData.__decided__ != null,
|
||||
);
|
||||
const { phase, setProcessing, setRejected } = useHitlPhase(interruptData);
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||||
const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
|
||||
const [pendingEdits, setPendingEdits] = useState<{
|
||||
|
|
@ -173,12 +170,13 @@ function ApprovalCard({
|
|||
bcc: string;
|
||||
} | null>(null);
|
||||
|
||||
const account = interruptData.context?.account;
|
||||
const email = interruptData.context?.email;
|
||||
const draftId = interruptData.context?.draft_id;
|
||||
const existingBody = interruptData.context?.existing_body;
|
||||
const context = interruptData.context;
|
||||
const account = context?.account;
|
||||
const email = context?.email;
|
||||
const draftId = context?.draft_id;
|
||||
const existingBody = context?.existing_body;
|
||||
|
||||
const reviewConfig = interruptData.review_configs[0];
|
||||
const reviewConfig = interruptData.review_configs?.[0];
|
||||
const allowedDecisions = reviewConfig?.allowed_decisions ?? [
|
||||
"approve",
|
||||
"reject",
|
||||
|
|
@ -197,10 +195,11 @@ function ApprovalCard({
|
|||
const editableBody = currentBody || existingBody || "";
|
||||
|
||||
const handleApprove = useCallback(() => {
|
||||
if (decided || isPanelOpen) return;
|
||||
if (phase !== "pending") return;
|
||||
if (isPanelOpen) return;
|
||||
if (!allowedDecisions.includes("approve")) return;
|
||||
const isEdited = pendingEdits !== null;
|
||||
setDecided(isEdited ? "edit" : "approve");
|
||||
setProcessing();
|
||||
onDecision({
|
||||
type: isEdited ? "edit" : "approve",
|
||||
edited_action: {
|
||||
|
|
@ -218,9 +217,10 @@ function ApprovalCard({
|
|||
},
|
||||
});
|
||||
}, [
|
||||
decided,
|
||||
phase,
|
||||
isPanelOpen,
|
||||
allowedDecisions,
|
||||
setProcessing,
|
||||
onDecision,
|
||||
interruptData,
|
||||
email,
|
||||
|
|
@ -251,39 +251,39 @@ function ApprovalCard({
|
|||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{decided === "reject"
|
||||
{phase === "rejected"
|
||||
? "Draft Update Rejected"
|
||||
: decided === "approve" || decided === "edit"
|
||||
: phase === "processing" || phase === "complete"
|
||||
? "Draft Update Approved"
|
||||
: "Update Gmail Draft"}
|
||||
</p>
|
||||
{decided === "approve" || decided === "edit" ? (
|
||||
wasAlreadyDecided ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "edit"
|
||||
? "Draft updated with your changes"
|
||||
: "Draft updated"}
|
||||
</p>
|
||||
) : (
|
||||
<TextShimmerLoader
|
||||
text={
|
||||
decided === "edit"
|
||||
? "Updating draft with your changes"
|
||||
: "Updating draft"
|
||||
}
|
||||
size="sm"
|
||||
/>
|
||||
)
|
||||
{phase === "processing" ? (
|
||||
<TextShimmerLoader
|
||||
text={
|
||||
pendingEdits
|
||||
? "Updating draft with your changes"
|
||||
: "Updating draft"
|
||||
}
|
||||
size="sm"
|
||||
/>
|
||||
) : phase === "complete" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{pendingEdits
|
||||
? "Draft updated with your changes"
|
||||
: "Draft updated"}
|
||||
</p>
|
||||
) : phase === "rejected" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Draft update was cancelled
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "reject"
|
||||
? "Draft update was cancelled"
|
||||
: "Requires your approval to proceed"}
|
||||
Requires your approval to proceed
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!decided && canEdit && (
|
||||
{phase === "pending" && canEdit && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
|
|
@ -340,14 +340,14 @@ function ApprovalCard({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Context — account and current draft info */}
|
||||
{!decided && interruptData.context && (
|
||||
{/* Context — account and draft info in pending/processing/complete */}
|
||||
{phase !== "rejected" && context && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 space-y-4 select-none">
|
||||
{interruptData.context.error ? (
|
||||
{context.error ? (
|
||||
<p className="text-sm text-destructive">
|
||||
{interruptData.context.error}
|
||||
{context.error}
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
|
|
@ -383,7 +383,7 @@ function ApprovalCard({
|
|||
</>
|
||||
)}
|
||||
|
||||
{/* Email headers + body preview */}
|
||||
{/* Email headers + body preview — visible in ALL phases */}
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 pt-3 pb-2 space-y-1.5 select-none">
|
||||
{currentTo && (
|
||||
|
|
@ -433,8 +433,8 @@ function ApprovalCard({
|
|||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
{!decided && (
|
||||
{/* Action buttons — only in pending */}
|
||||
{phase === "pending" && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 flex items-center gap-2 select-none">
|
||||
|
|
@ -456,7 +456,7 @@ function ApprovalCard({
|
|||
className="rounded-lg text-muted-foreground"
|
||||
disabled={isPanelOpen}
|
||||
onClick={() => {
|
||||
setDecided("reject");
|
||||
setRejected();
|
||||
onDecision({
|
||||
type: "reject",
|
||||
message: "User rejected the action.",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue