mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-28 10:26:33 +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
|
|
@ -14,6 +14,7 @@ import { useSetAtom } from "jotai";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { PlateEditor } from "@/components/editor/plate-editor";
|
||||
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
||||
import { useHitlPhase } from "@/hooks/use-hitl-phase";
|
||||
import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
|
||||
|
||||
|
|
@ -39,6 +40,7 @@ interface CalendarEvent {
|
|||
interface InterruptResult {
|
||||
__interrupt__: true;
|
||||
__decided__?: "approve" | "reject" | "edit";
|
||||
__completed__?: boolean;
|
||||
action_requests: Array<{
|
||||
name: string;
|
||||
args: Record<string, unknown>;
|
||||
|
|
@ -148,9 +150,19 @@ function formatDateTime(iso: string): string {
|
|||
}
|
||||
|
||||
function ApprovalCard({
|
||||
args,
|
||||
interruptData,
|
||||
onDecision,
|
||||
}: {
|
||||
args: {
|
||||
event_ref: string;
|
||||
new_summary?: string;
|
||||
new_description?: string;
|
||||
new_start_datetime?: string;
|
||||
new_end_datetime?: string;
|
||||
new_location?: string;
|
||||
new_attendees?: string[];
|
||||
};
|
||||
interruptData: InterruptResult;
|
||||
onDecision: (decision: {
|
||||
type: "approve" | "reject" | "edit";
|
||||
|
|
@ -158,16 +170,14 @@ function ApprovalCard({
|
|||
edited_action?: { name: string; args: Record<string, unknown> };
|
||||
}) => void;
|
||||
}) {
|
||||
const { phase, setProcessing, setRejected } = useHitlPhase(interruptData);
|
||||
const actionArgs = interruptData.action_requests[0]?.args ?? {};
|
||||
const context = interruptData.context;
|
||||
const account = context?.account;
|
||||
const event = context?.event;
|
||||
|
||||
const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
|
||||
interruptData.__decided__ ?? null
|
||||
);
|
||||
const [wasAlreadyDecided] = useState(() => interruptData.__decided__ != null);
|
||||
const [isPanelOpen, setIsPanelOpen] = useState(false);
|
||||
const [wasEdited, setWasEdited] = useState(false);
|
||||
const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
|
||||
const [pendingEdits, setPendingEdits] = useState<{
|
||||
summary: string; description: string; start_datetime: string;
|
||||
|
|
@ -183,39 +193,51 @@ function ApprovalCard({
|
|||
? (actionArgs.new_attendees as string[])
|
||||
: null;
|
||||
|
||||
const effectiveNewSummary = actionArgs.new_summary ?? args.new_summary;
|
||||
const effectiveNewStartDatetime = actionArgs.new_start_datetime ?? args.new_start_datetime;
|
||||
const effectiveNewEndDatetime = actionArgs.new_end_datetime ?? args.new_end_datetime;
|
||||
const effectiveNewLocation = actionArgs.new_location !== undefined
|
||||
? actionArgs.new_location
|
||||
: args.new_location;
|
||||
const effectiveNewAttendees = proposedAttendees
|
||||
?? (Array.isArray(args.new_attendees) ? args.new_attendees : null);
|
||||
const effectiveNewDescription = actionArgs.new_description !== undefined
|
||||
? actionArgs.new_description
|
||||
: args.new_description;
|
||||
|
||||
const changes: Array<{ label: string; oldVal: string; newVal: string }> = [];
|
||||
|
||||
if (actionArgs.new_summary && String(actionArgs.new_summary) !== event?.summary) {
|
||||
changes.push({ label: "Summary", oldVal: event?.summary ?? "", newVal: String(actionArgs.new_summary) });
|
||||
if (effectiveNewSummary && String(effectiveNewSummary) !== (event?.summary ?? "")) {
|
||||
changes.push({ label: "Summary", oldVal: event?.summary ?? "", newVal: String(effectiveNewSummary) });
|
||||
}
|
||||
if (actionArgs.new_start_datetime && String(actionArgs.new_start_datetime) !== event?.start) {
|
||||
if (effectiveNewStartDatetime && String(effectiveNewStartDatetime) !== (event?.start ?? "")) {
|
||||
changes.push({
|
||||
label: "Start",
|
||||
oldVal: event?.start ? formatDateTime(event.start) : "",
|
||||
newVal: formatDateTime(String(actionArgs.new_start_datetime)),
|
||||
newVal: formatDateTime(String(effectiveNewStartDatetime)),
|
||||
});
|
||||
}
|
||||
if (actionArgs.new_end_datetime && String(actionArgs.new_end_datetime) !== event?.end) {
|
||||
if (effectiveNewEndDatetime && String(effectiveNewEndDatetime) !== (event?.end ?? "")) {
|
||||
changes.push({
|
||||
label: "End",
|
||||
oldVal: event?.end ? formatDateTime(event.end) : "",
|
||||
newVal: formatDateTime(String(actionArgs.new_end_datetime)),
|
||||
newVal: formatDateTime(String(effectiveNewEndDatetime)),
|
||||
});
|
||||
}
|
||||
if (actionArgs.new_location !== undefined && String(actionArgs.new_location ?? "") !== (event?.location ?? "")) {
|
||||
changes.push({ label: "Location", oldVal: event?.location ?? "", newVal: String(actionArgs.new_location ?? "") });
|
||||
if (effectiveNewLocation !== undefined && String(effectiveNewLocation ?? "") !== (event?.location ?? "")) {
|
||||
changes.push({ label: "Location", oldVal: event?.location ?? "", newVal: String(effectiveNewLocation ?? "") });
|
||||
}
|
||||
if (proposedAttendees) {
|
||||
if (effectiveNewAttendees) {
|
||||
const oldStr = currentAttendees.join(", ");
|
||||
const newStr = proposedAttendees.join(", ");
|
||||
const newStr = effectiveNewAttendees.join(", ");
|
||||
if (oldStr !== newStr) {
|
||||
changes.push({ label: "Attendees", oldVal: oldStr, newVal: newStr });
|
||||
}
|
||||
}
|
||||
|
||||
const hasDescriptionChange =
|
||||
actionArgs.new_description !== undefined &&
|
||||
String(actionArgs.new_description ?? "") !== (event?.description ?? "");
|
||||
effectiveNewDescription !== undefined &&
|
||||
String(effectiveNewDescription ?? "") !== (event?.description ?? "");
|
||||
|
||||
const buildFinalArgs = useCallback(() => {
|
||||
if (pendingEdits) {
|
||||
|
|
@ -248,10 +270,11 @@ function ApprovalCard({
|
|||
}, [event, account, actionArgs, proposedAttendees, pendingEdits]);
|
||||
|
||||
const handleApprove = useCallback(() => {
|
||||
if (decided || isPanelOpen) return;
|
||||
if (phase !== "pending" || isPanelOpen) return;
|
||||
if (!allowedDecisions.includes("approve")) return;
|
||||
const isEdited = pendingEdits !== null;
|
||||
setDecided(isEdited ? "edit" : "approve");
|
||||
setWasEdited(isEdited);
|
||||
setProcessing();
|
||||
onDecision({
|
||||
type: isEdited ? "edit" : "approve",
|
||||
edited_action: {
|
||||
|
|
@ -259,7 +282,7 @@ function ApprovalCard({
|
|||
args: buildFinalArgs(),
|
||||
},
|
||||
});
|
||||
}, [decided, isPanelOpen, allowedDecisions, onDecision, interruptData, buildFinalArgs, pendingEdits]);
|
||||
}, [phase, isPanelOpen, allowedDecisions, setProcessing, onDecision, interruptData, buildFinalArgs, pendingEdits]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
|
|
@ -278,30 +301,30 @@ function ApprovalCard({
|
|||
<div className="flex items-center gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{decided === "reject"
|
||||
{phase === "rejected"
|
||||
? "Calendar Event Update Rejected"
|
||||
: decided === "approve" || decided === "edit"
|
||||
: phase === "processing" || phase === "complete"
|
||||
? "Calendar Event Update Approved"
|
||||
: "Update Calendar Event"}
|
||||
</p>
|
||||
{decided === "approve" || decided === "edit" ? (
|
||||
wasAlreadyDecided ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "edit" ? "Event updated with your changes" : "Event updated"}
|
||||
</p>
|
||||
) : (
|
||||
<TextShimmerLoader text={decided === "edit" ? "Updating event with your changes" : "Updating event"} size="sm" />
|
||||
)
|
||||
{phase === "processing" ? (
|
||||
<TextShimmerLoader text={wasEdited ? "Updating event with your changes" : "Updating event"} size="sm" />
|
||||
) : phase === "complete" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{wasEdited ? "Event updated with your changes" : "Event updated"}
|
||||
</p>
|
||||
) : phase === "rejected" ? (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
Event update was cancelled
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{decided === "reject"
|
||||
? "Event 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"
|
||||
|
|
@ -354,104 +377,101 @@ function ApprovalCard({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Context section */}
|
||||
{!decided && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 space-y-4 select-none">
|
||||
{context?.error ? (
|
||||
<p className="text-sm text-destructive">{context.error}</p>
|
||||
) : (
|
||||
<>
|
||||
{account && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Google Calendar Account</p>
|
||||
<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
|
||||
{account.name}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{event && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Current Event</p>
|
||||
<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm space-y-1.5">
|
||||
<div className="font-medium">{event.summary}</div>
|
||||
{(event.start || event.end) && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<ClockIcon className="size-3 shrink-0" />
|
||||
<span>
|
||||
{event.start ? formatDateTime(event.start) : ""}
|
||||
{event.start && event.end ? " — " : ""}
|
||||
{event.end ? formatDateTime(event.end) : ""}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{event.location && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<MapPinIcon className="size-3 shrink-0" />
|
||||
<span>{event.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{currentAttendees.length > 0 && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<UsersIcon className="size-3 shrink-0" />
|
||||
<span>{currentAttendees.join(", ")}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(changes.length > 0 || hasDescriptionChange) && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Proposed Changes</p>
|
||||
<div className="space-y-2">
|
||||
{changes.map((change) => (
|
||||
<div key={change.label} className="text-xs space-y-0.5">
|
||||
<span className="text-muted-foreground">{change.label}</span>
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="text-muted-foreground line-through">{change.oldVal || "(empty)"}</span>
|
||||
<ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
|
||||
<span className="font-medium text-foreground">{change.newVal || "(empty)"}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{hasDescriptionChange && (
|
||||
<div className="text-xs space-y-0.5">
|
||||
<span className="text-muted-foreground">Description</span>
|
||||
<div
|
||||
className="mt-1 max-h-[5rem] overflow-hidden"
|
||||
style={{
|
||||
maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
|
||||
WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
|
||||
}}
|
||||
>
|
||||
<PlateEditor
|
||||
markdown={String(actionArgs.new_description ?? "")}
|
||||
readOnly
|
||||
preset="readonly"
|
||||
editorVariant="none"
|
||||
className="h-auto [&_[data-slate-editor]]:!min-h-0 [&_[data-slate-editor]>*:first-child]:!mt-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{changes.length === 0 && !hasDescriptionChange && (
|
||||
<p className="text-sm text-muted-foreground italic">No changes proposed</p>
|
||||
)}
|
||||
</>
|
||||
{/* Content section */}
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 space-y-4 select-none">
|
||||
{context?.error ? (
|
||||
<p className="text-sm text-destructive">{context.error}</p>
|
||||
) : (
|
||||
<>
|
||||
{phase === "pending" && account && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Google Calendar Account</p>
|
||||
<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
|
||||
{account.name}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Action buttons */}
|
||||
{!decided && (
|
||||
{event && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Current Event</p>
|
||||
<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm space-y-1.5">
|
||||
<div className="font-medium">{event.summary}</div>
|
||||
{(event.start || event.end) && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<ClockIcon className="size-3 shrink-0" />
|
||||
<span>
|
||||
{event.start ? formatDateTime(event.start) : ""}
|
||||
{event.start && event.end ? " — " : ""}
|
||||
{event.end ? formatDateTime(event.end) : ""}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{event.location && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<MapPinIcon className="size-3 shrink-0" />
|
||||
<span>{event.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{currentAttendees.length > 0 && (
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
<UsersIcon className="size-3 shrink-0" />
|
||||
<span>{currentAttendees.join(", ")}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Proposed Changes - visible in all phases */}
|
||||
{(changes.length > 0 || hasDescriptionChange) && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-muted-foreground">Proposed Changes</p>
|
||||
<div className="space-y-2">
|
||||
{changes.map((change) => (
|
||||
<div key={change.label} className="text-xs space-y-0.5">
|
||||
<span className="text-muted-foreground">{change.label}</span>
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="text-muted-foreground line-through">{change.oldVal || "(empty)"}</span>
|
||||
<ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
|
||||
<span className="font-medium text-foreground">{change.newVal || "(empty)"}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{hasDescriptionChange && (
|
||||
<div className="text-xs space-y-0.5">
|
||||
<span className="text-muted-foreground">Description</span>
|
||||
<div
|
||||
className="mt-1 max-h-[5rem] overflow-hidden"
|
||||
style={{
|
||||
maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
|
||||
WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
|
||||
}}
|
||||
>
|
||||
<PlateEditor
|
||||
markdown={String(effectiveNewDescription ?? "")}
|
||||
readOnly
|
||||
preset="readonly"
|
||||
editorVariant="none"
|
||||
className="h-auto [&_[data-slate-editor]]:!min-h-0 [&_[data-slate-editor]>*:first-child]:!mt-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{event && changes.length === 0 && !hasDescriptionChange && (
|
||||
<p className="text-sm text-muted-foreground italic">No changes proposed</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Action buttons - pending only */}
|
||||
{phase === "pending" && (
|
||||
<>
|
||||
<div className="mx-5 h-px bg-border/50" />
|
||||
<div className="px-5 py-4 flex items-center gap-2 select-none">
|
||||
|
|
@ -473,7 +493,7 @@ function ApprovalCard({
|
|||
className="rounded-lg text-muted-foreground"
|
||||
disabled={isPanelOpen}
|
||||
onClick={() => {
|
||||
setDecided("reject");
|
||||
setRejected();
|
||||
onDecision({ type: "reject", message: "User rejected the action." });
|
||||
}}
|
||||
>
|
||||
|
|
@ -591,12 +611,13 @@ export const UpdateCalendarEventToolUI = makeAssistantToolUI<
|
|||
UpdateCalendarEventResult
|
||||
>({
|
||||
toolName: "update_calendar_event",
|
||||
render: function UpdateCalendarEventUI({ result }) {
|
||||
render: function UpdateCalendarEventUI({ args, result }) {
|
||||
if (!result) return null;
|
||||
|
||||
if (isInterruptResult(result)) {
|
||||
return (
|
||||
<ApprovalCard
|
||||
args={args}
|
||||
interruptData={result}
|
||||
onDecision={(decision) => {
|
||||
window.dispatchEvent(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue