mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-29 19:06:24 +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
|
|
@ -15,10 +15,12 @@ import {
|
|||
import { PlateEditor } from "@/components/editor/plate-editor";
|
||||
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
||||
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import { useHitlPhase } from "@/hooks/use-hitl-phase";
|
||||
|
||||
interface InterruptResult {
|
||||
__interrupt__: true;
|
||||
__decided__?: "approve" | "reject" | "edit";
|
||||
__completed__?: boolean;
|
||||
action_requests: Array<{
|
||||
name: string;
|
||||
args: Record<string, unknown>;
|
||||
|
|
@ -115,10 +117,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<{ title: string; content: string } | null>(null);
|
||||
|
|
@ -154,10 +153,11 @@ function ApprovalCard({
|
|||
const canEdit = allowedDecisions.includes("edit");
|
||||
|
||||
const handleApprove = useCallback(() => {
|
||||
if (decided || isPanelOpen || !selectedAccountId || !isTitleValid) return;
|
||||
if (phase !== "pending") return;
|
||||
if (isPanelOpen || !selectedAccountId || !isTitleValid) return;
|
||||
if (!allowedDecisions.includes("approve")) return;
|
||||
const isEdited = pendingEdits !== null;
|
||||
setDecided(isEdited ? "edit" : "approve");
|
||||
setProcessing();
|
||||
onDecision({
|
||||
type: isEdited ? "edit" : "approve",
|
||||
edited_action: {
|
||||
|
|
@ -171,7 +171,7 @@ function ApprovalCard({
|
|||
},
|
||||
},
|
||||
});
|
||||
}, [decided, isPanelOpen, selectedAccountId, isTitleValid, allowedDecisions, onDecision, interruptData, args, selectedParentPageId, pendingEdits]);
|
||||
}, [phase, isPanelOpen, selectedAccountId, isTitleValid, allowedDecisions, setProcessing, onDecision, interruptData, args, selectedParentPageId, pendingEdits]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
|
|
@ -191,29 +191,29 @@ function ApprovalCard({
|
|||
<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{decided === "reject"
|
||||
{phase === "rejected"
|
||||
? "Notion Page Rejected"
|
||||
: decided === "approve" || decided === "edit"
|
||||
: phase === "processing" || phase === "complete"
|
||||
? "Notion Page Approved"
|
||||
: "Create Notion Page"}
|
||||
</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" />
|
||||
)
|
||||
{phase === "processing" ? (
|
||||
<TextShimmerLoader text={pendingEdits ? "Creating page with your changes" : "Creating page"} size="sm" />
|
||||
) : phase === "complete" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{pendingEdits ? "Page created with your changes" : "Page created"}
|
||||
</p>
|
||||
) : phase === "rejected" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Page creation was cancelled
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "reject"
|
||||
? "Page creation was cancelled"
|
||||
: "Requires your approval to proceed"}
|
||||
Requires your approval to proceed
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{!decided && canEdit && (
|
||||
{phase === "pending" && canEdit && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
|
|
@ -238,8 +238,8 @@ function ApprovalCard({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Context section */}
|
||||
{!decided && interruptData.context && (
|
||||
{/* Account/workspace picker — real UI 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">
|
||||
|
|
@ -338,7 +338,7 @@ function ApprovalCard({
|
|||
</div>
|
||||
|
||||
{/* Action buttons - only shown when pending */}
|
||||
{!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">
|
||||
|
|
@ -360,7 +360,7 @@ function ApprovalCard({
|
|||
className="rounded-lg text-muted-foreground"
|
||||
disabled={isPanelOpen}
|
||||
onClick={() => {
|
||||
setDecided("reject");
|
||||
setRejected();
|
||||
onDecision({ type: "reject", message: "User rejected the action." });
|
||||
}}
|
||||
>
|
||||
|
|
@ -441,9 +441,7 @@ export const CreateNotionPageToolUI = makeAssistantToolUI<
|
|||
>({
|
||||
toolName: "create_notion_page",
|
||||
render: function CreateNotionPageUI({ args, result }) {
|
||||
if (!result) {
|
||||
return null;
|
||||
}
|
||||
if (!result) return null;
|
||||
|
||||
if (isInterruptResult(result)) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -6,10 +6,12 @@ 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 InterruptResult {
|
||||
__interrupt__: true;
|
||||
__decided__?: "approve" | "reject";
|
||||
__completed__?: boolean;
|
||||
action_requests: Array<{
|
||||
name: string;
|
||||
args: Record<string, unknown>;
|
||||
|
|
@ -136,18 +138,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 currentTitle = interruptData.context?.current_title;
|
||||
const context = interruptData.context;
|
||||
const account = context?.account;
|
||||
const currentTitle = context?.current_title;
|
||||
|
||||
const handleApprove = useCallback(() => {
|
||||
if (decided) return;
|
||||
setDecided("approve");
|
||||
if (phase !== "pending") return;
|
||||
setProcessing();
|
||||
onDecision({
|
||||
type: "approve",
|
||||
edited_action: {
|
||||
|
|
@ -159,7 +159,7 @@ function ApprovalCard({
|
|||
},
|
||||
},
|
||||
});
|
||||
}, [decided, onDecision, interruptData, account?.id, deleteFromKb]);
|
||||
}, [phase, setProcessing, onDecision, interruptData, account?.id, deleteFromKb]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
|
|
@ -177,35 +177,35 @@ function ApprovalCard({
|
|||
<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{decided === "reject"
|
||||
{phase === "rejected"
|
||||
? "Notion Page Deletion Rejected"
|
||||
: decided === "approve"
|
||||
: phase === "processing" || phase === "complete"
|
||||
? "Notion Page Deletion Approved"
|
||||
: "Delete Notion Page"}
|
||||
</p>
|
||||
{decided === "approve" ? (
|
||||
wasAlreadyDecided ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Page deleted</p>
|
||||
) : (
|
||||
<TextShimmerLoader text="Deleting page" size="sm" />
|
||||
)
|
||||
{phase === "processing" ? (
|
||||
<TextShimmerLoader text="Deleting page" size="sm" />
|
||||
) : phase === "complete" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Page deleted</p>
|
||||
) : phase === "rejected" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Page deletion was cancelled
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "reject"
|
||||
? "Page deletion was cancelled"
|
||||
: "Requires your approval to proceed"}
|
||||
Requires your approval to proceed
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Context section — read-only account and page 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 && (
|
||||
|
|
@ -232,53 +232,53 @@ 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">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Checkbox
|
||||
id="notion-delete-from-kb"
|
||||
checked={deleteFromKb}
|
||||
onCheckedChange={(v) => setDeleteFromKb(v === true)}
|
||||
className="shrink-0"
|
||||
/>
|
||||
<label htmlFor="notion-delete-from-kb" className="flex-1 cursor-pointer">
|
||||
<span className="text-sm text-foreground">Also remove from knowledge base</span>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
This will permanently delete the page from your knowledge base (cannot be undone)
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<Checkbox
|
||||
id="notion-delete-from-kb"
|
||||
checked={deleteFromKb}
|
||||
onCheckedChange={(v) => setDeleteFromKb(v === true)}
|
||||
className="shrink-0"
|
||||
/>
|
||||
<label htmlFor="notion-delete-from-kb" className="flex-1 cursor-pointer">
|
||||
<span className="text-sm text-foreground">Also remove from knowledge base</span>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
This will permanently delete the page from your knowledge base (cannot be undone)
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Action buttons - only shown when pending */}
|
||||
{!decided && (
|
||||
{/* Action buttons */}
|
||||
{phase === "pending" && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 flex items-center gap-2 select-none">
|
||||
<Button
|
||||
size="sm"
|
||||
className="rounded-lg gap-1.5"
|
||||
onClick={handleApprove}
|
||||
>
|
||||
Approve
|
||||
<CornerDownLeftIcon className="size-3 opacity-60" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="rounded-lg text-muted-foreground"
|
||||
onClick={() => {
|
||||
setDecided("reject");
|
||||
onDecision({ type: "reject", message: "User rejected the action." });
|
||||
}}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
<div className="px-5 py-4 flex items-center gap-2 select-none">
|
||||
<Button
|
||||
size="sm"
|
||||
className="rounded-lg gap-1.5"
|
||||
onClick={handleApprove}
|
||||
>
|
||||
Approve
|
||||
<CornerDownLeftIcon className="size-3 opacity-60" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="rounded-lg text-muted-foreground"
|
||||
onClick={() => {
|
||||
setRejected();
|
||||
onDecision({ type: "reject", message: "User rejected the action." });
|
||||
}}
|
||||
>
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -388,9 +388,7 @@ export const DeleteNotionPageToolUI = makeAssistantToolUI<
|
|||
>({
|
||||
toolName: "delete_notion_page",
|
||||
render: function DeleteNotionPageUI({ result }) {
|
||||
if (!result) {
|
||||
return null;
|
||||
}
|
||||
if (!result) return null;
|
||||
|
||||
if (isInterruptResult(result)) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@ import { Button } from "@/components/ui/button";
|
|||
import { PlateEditor } from "@/components/editor/plate-editor";
|
||||
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
||||
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import { useHitlPhase } from "@/hooks/use-hitl-phase";
|
||||
|
||||
interface InterruptResult {
|
||||
__interrupt__: true;
|
||||
__decided__?: "approve" | "reject" | "edit";
|
||||
__completed__?: boolean;
|
||||
action_requests: Array<{
|
||||
name: string;
|
||||
args: Record<string, unknown>;
|
||||
|
|
@ -117,10 +119,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<{ content: string } | null>(null);
|
||||
|
|
@ -133,10 +132,11 @@ function ApprovalCard({
|
|||
const canEdit = allowedDecisions.includes("edit");
|
||||
|
||||
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: {
|
||||
|
|
@ -148,7 +148,7 @@ function ApprovalCard({
|
|||
},
|
||||
},
|
||||
});
|
||||
}, [decided, isPanelOpen, allowedDecisions, onDecision, interruptData, args, account?.id, pendingEdits]);
|
||||
}, [phase, isPanelOpen, allowedDecisions, setProcessing, onDecision, interruptData, args, account?.id, pendingEdits]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
|
|
@ -166,29 +166,29 @@ function ApprovalCard({
|
|||
<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{decided === "reject"
|
||||
{phase === "rejected"
|
||||
? "Notion Page Update Rejected"
|
||||
: decided === "approve" || decided === "edit"
|
||||
: phase === "processing" || phase === "complete"
|
||||
? "Notion Page Update Approved"
|
||||
: "Update Notion Page"}
|
||||
</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" />
|
||||
)
|
||||
{phase === "processing" ? (
|
||||
<TextShimmerLoader text={pendingEdits ? "Updating page with your changes" : "Updating page"} size="sm" />
|
||||
) : phase === "complete" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{pendingEdits ? "Page updated with your changes" : "Page updated"}
|
||||
</p>
|
||||
) : phase === "rejected" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Page update was cancelled
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "reject"
|
||||
? "Page update was cancelled"
|
||||
: "Requires your approval to proceed"}
|
||||
Requires your approval to proceed
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{!decided && canEdit && (
|
||||
{phase === "pending" && canEdit && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
|
|
@ -213,8 +213,8 @@ function ApprovalCard({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Context section — read-only account and page info */}
|
||||
{!decided && interruptData.context && (
|
||||
{/* Context section — real UI in pending/processing/complete */}
|
||||
{phase !== "rejected" && interruptData.context && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 space-y-4 select-none">
|
||||
|
|
@ -270,7 +270,7 @@ function ApprovalCard({
|
|||
</div>
|
||||
|
||||
{/* Action buttons - only shown when pending */}
|
||||
{!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">
|
||||
|
|
@ -292,7 +292,7 @@ function ApprovalCard({
|
|||
className="rounded-lg text-muted-foreground"
|
||||
disabled={isPanelOpen}
|
||||
onClick={() => {
|
||||
setDecided("reject");
|
||||
setRejected();
|
||||
onDecision({ type: "reject", message: "User rejected the action." });
|
||||
}}
|
||||
>
|
||||
|
|
@ -389,9 +389,7 @@ export const UpdateNotionPageToolUI = makeAssistantToolUI<
|
|||
>({
|
||||
toolName: "update_notion_page",
|
||||
render: function UpdateNotionPageUI({ args, result }) {
|
||||
if (!result) {
|
||||
return null;
|
||||
}
|
||||
if (!result) return null;
|
||||
|
||||
if (isInterruptResult(result)) {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue