@@ -577,7 +532,7 @@ export const UpdateGmailDraftToolUI = makeAssistantToolUI<
window.dispatchEvent(
new CustomEvent("hitl-decision", {
detail: { decisions: [decision] },
- }),
+ })
);
}}
/>
diff --git a/surfsense_web/components/tool-ui/google-calendar/create-event.tsx b/surfsense_web/components/tool-ui/google-calendar/create-event.tsx
index cd47ab8c3..8d337c8f7 100644
--- a/surfsense_web/components/tool-ui/google-calendar/create-event.tsx
+++ b/surfsense_web/components/tool-ui/google-calendar/create-event.tsx
@@ -1,16 +1,13 @@
"use client";
import { makeAssistantToolUI } from "@assistant-ui/react";
-import {
- ClockIcon,
- MapPinIcon,
- UsersIcon,
- GlobeIcon,
- CornerDownLeftIcon,
- Pen,
-} from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
import { useSetAtom } from "jotai";
+import { ClockIcon, CornerDownLeftIcon, GlobeIcon, MapPinIcon, Pen, UsersIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
+import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { Button } from "@/components/ui/button";
import {
Select,
@@ -19,11 +16,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
-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";
interface GoogleCalendarAccount {
id: number;
@@ -160,8 +153,12 @@ function ApprovalCard({
const [wasEdited, setWasEdited] = useState(false);
const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
const [pendingEdits, setPendingEdits] = useState<{
- summary: string; description: string; start_datetime: string;
- end_datetime: string; location: string; attendees: string;
+ summary: string;
+ description: string;
+ start_datetime: string;
+ end_datetime: string;
+ location: string;
+ attendees: string;
} | null>(null);
const accounts = interruptData.context?.accounts ?? [];
@@ -236,7 +233,19 @@ function ApprovalCard({
args: finalArgs,
},
});
- }, [phase, isPanelOpen, canApprove, allowedDecisions, setProcessing, onDecision, interruptData, args, selectedAccountId, selectedCalendarId, pendingEdits]);
+ }, [
+ phase,
+ isPanelOpen,
+ canApprove,
+ allowedDecisions,
+ setProcessing,
+ onDecision,
+ interruptData,
+ args,
+ selectedAccountId,
+ selectedCalendarId,
+ pendingEdits,
+ ]);
useEffect(() => {
const handler = (e: KeyboardEvent) => {
@@ -250,7 +259,10 @@ function ApprovalCard({
const attendeesList = (args.attendees as string[]) ?? [];
const displayAttendees = pendingEdits?.attendees
- ? pendingEdits.attendees.split(",").map((e) => e.trim()).filter(Boolean)
+ ? pendingEdits.attendees
+ .split(",")
+ .map((e) => e.trim())
+ .filter(Boolean)
: attendeesList;
return (
@@ -266,16 +278,17 @@ function ApprovalCard({
? "Calendar Event Approved"
: "Create Calendar Event"}
- {phase === "processing" ? (
-
+ {phase === "processing" ? (
+
) : phase === "complete" ? (
{wasEdited ? "Event created with your changes" : "Event created"}
) : phase === "rejected" ? (
-
- Event creation was cancelled
-
+
Event creation was cancelled
) : (
Requires your approval to proceed
@@ -291,14 +304,34 @@ function ApprovalCard({
onClick={() => {
setIsPanelOpen(true);
const extraFields: ExtraField[] = [
- { key: "start_datetime", label: "Start", type: "datetime-local", value: pendingEdits?.start_datetime ?? args.start_datetime ?? "" },
- { key: "end_datetime", label: "End", type: "datetime-local", value: pendingEdits?.end_datetime ?? args.end_datetime ?? "" },
- { key: "location", label: "Location", type: "text", value: pendingEdits?.location ?? args.location ?? "" },
- { key: "attendees", label: "Attendees", type: "emails", value: pendingEdits?.attendees ?? attendeesList.join(", ") },
+ {
+ key: "start_datetime",
+ label: "Start",
+ type: "datetime-local",
+ value: pendingEdits?.start_datetime ?? args.start_datetime ?? "",
+ },
+ {
+ key: "end_datetime",
+ label: "End",
+ type: "datetime-local",
+ value: pendingEdits?.end_datetime ?? args.end_datetime ?? "",
+ },
+ {
+ key: "location",
+ label: "Location",
+ type: "text",
+ value: pendingEdits?.location ?? args.location ?? "",
+ },
+ {
+ key: "attendees",
+ label: "Attendees",
+ type: "emails",
+ value: pendingEdits?.attendees ?? attendeesList.join(", "),
+ },
];
openHitlEditPanel({
- title: pendingEdits?.summary ?? (args.summary ?? ""),
- content: pendingEdits?.description ?? (args.description ?? ""),
+ title: pendingEdits?.summary ?? args.summary ?? "",
+ content: pendingEdits?.description ?? args.description ?? "",
toolName: "Calendar Event",
extraFields,
onSave: (newTitle, newContent, extraFieldValues) => {
@@ -307,10 +340,16 @@ function ApprovalCard({
setPendingEdits({
summary: newTitle,
description: newContent,
- start_datetime: extras.start_datetime ?? pendingEdits?.start_datetime ?? args.start_datetime ?? "",
- end_datetime: extras.end_datetime ?? pendingEdits?.end_datetime ?? args.end_datetime ?? "",
+ start_datetime:
+ extras.start_datetime ??
+ pendingEdits?.start_datetime ??
+ args.start_datetime ??
+ "",
+ end_datetime:
+ extras.end_datetime ?? pendingEdits?.end_datetime ?? args.end_datetime ?? "",
location: extras.location ?? pendingEdits?.location ?? args.location ?? "",
- attendees: extras.attendees ?? pendingEdits?.attendees ?? attendeesList.join(", "),
+ attendees:
+ extras.attendees ?? pendingEdits?.attendees ?? attendeesList.join(", "),
});
},
onClose: () => setIsPanelOpen(false),
@@ -372,7 +411,8 @@ function ApprovalCard({
{calendars.map((cal) => (
- {cal.summary}{cal.primary ? " (primary)" : ""}
+ {cal.summary}
+ {cal.primary ? " (primary)" : ""}
))}
@@ -399,16 +439,26 @@ function ApprovalCard({
{(pendingEdits?.summary ?? args.summary) && (
-
{pendingEdits?.summary ?? args.summary}
+
+ {pendingEdits?.summary ?? args.summary}
+
)}
- {((pendingEdits?.start_datetime ?? args.start_datetime) || (pendingEdits?.end_datetime ?? args.end_datetime)) && (
+ {((pendingEdits?.start_datetime ?? args.start_datetime) ||
+ (pendingEdits?.end_datetime ?? args.end_datetime)) && (
- {(pendingEdits?.start_datetime ?? args.start_datetime) ? formatDateTime(pendingEdits?.start_datetime ?? args.start_datetime) : ""}
- {(pendingEdits?.start_datetime ?? args.start_datetime) && (pendingEdits?.end_datetime ?? args.end_datetime) ? " — " : ""}
- {(pendingEdits?.end_datetime ?? args.end_datetime) ? formatDateTime(pendingEdits?.end_datetime ?? args.end_datetime) : ""}
+ {(pendingEdits?.start_datetime ?? args.start_datetime)
+ ? formatDateTime(pendingEdits?.start_datetime ?? args.start_datetime)
+ : ""}
+ {(pendingEdits?.start_datetime ?? args.start_datetime) &&
+ (pendingEdits?.end_datetime ?? args.end_datetime)
+ ? " — "
+ : ""}
+ {(pendingEdits?.end_datetime ?? args.end_datetime)
+ ? formatDateTime(pendingEdits?.end_datetime ?? args.end_datetime)
+ : ""}
)}
diff --git a/surfsense_web/components/tool-ui/google-calendar/delete-event.tsx b/surfsense_web/components/tool-ui/google-calendar/delete-event.tsx
index 65476fbc9..8df47c3d8 100644
--- a/surfsense_web/components/tool-ui/google-calendar/delete-event.tsx
+++ b/surfsense_web/components/tool-ui/google-calendar/delete-event.tsx
@@ -1,16 +1,11 @@
"use client";
import { makeAssistantToolUI } from "@assistant-ui/react";
-import {
- CalendarIcon,
- ClockIcon,
- MapPinIcon,
- CornerDownLeftIcon,
-} from "lucide-react";
+import { CalendarIcon, ClockIcon, CornerDownLeftIcon, MapPinIcon } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
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 GoogleCalendarAccount {
@@ -220,14 +215,12 @@ function ApprovalCard({
? "Calendar Event Deletion Approved"
: "Delete Calendar Event"}
- {phase === "processing" ? (
+ {phase === "processing" ? (
) : phase === "complete" ? (
Event deleted
) : phase === "rejected" ? (
-
- Event deletion was cancelled
-
+
Event deletion was cancelled
) : (
Requires your approval to proceed
@@ -247,7 +240,9 @@ function ApprovalCard({
<>
{account && (
-
Google Calendar Account
+
+ Google Calendar Account
+
{account.name}
@@ -315,11 +310,7 @@ function ApprovalCard({
<>
-
- {/* Content section */}
+ {/* Content section */}
{context?.error ? (
@@ -433,9 +483,13 @@ function ApprovalCard({
{change.label}
-
{change.oldVal || "(empty)"}
+
+ {change.oldVal || "(empty)"}
+
-
{change.newVal || "(empty)"}
+
+ {change.newVal || "(empty)"}
+
))}
@@ -446,7 +500,8 @@ function ApprovalCard({
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%)",
+ WebkitMaskImage:
+ "linear-gradient(to bottom, black 50%, transparent 100%)",
}}
>
(null);
const accounts = interruptData.context?.accounts ?? [];
- const validAccounts = accounts.filter(a => !a.auth_expired);
- const expiredAccounts = accounts.filter(a => a.auth_expired);
+ const validAccounts = accounts.filter((a) => !a.auth_expired);
+ const expiredAccounts = accounts.filter((a) => a.auth_expired);
const defaultAccountId = useMemo(() => {
if (validAccounts.length === 1) return String(validAccounts[0].id);
@@ -162,7 +158,8 @@ function ApprovalCard({
setParentFolderId("__root__");
}, []);
- const fileTypeLabel = FILE_TYPE_LABELS[selectedFileType] ?? FILE_TYPE_LABELS[args.file_type] ?? "Google Drive File";
+ const fileTypeLabel =
+ FILE_TYPE_LABELS[selectedFileType] ?? FILE_TYPE_LABELS[args.file_type] ?? "Google Drive File";
const isNameValid = useMemo(() => {
const name = pendingEdits?.name ?? args.name;
@@ -194,7 +191,20 @@ function ApprovalCard({
},
},
});
- }, [phase, setProcessing, isPanelOpen, canApprove, allowedDecisions, onDecision, interruptData, args, selectedFileType, selectedAccountId, parentFolderId, pendingEdits]);
+ }, [
+ phase,
+ setProcessing,
+ isPanelOpen,
+ canApprove,
+ allowedDecisions,
+ onDecision,
+ interruptData,
+ args,
+ selectedFileType,
+ selectedAccountId,
+ parentFolderId,
+ pendingEdits,
+ ]);
useEffect(() => {
const handler = (e: KeyboardEvent) => {
@@ -218,16 +228,17 @@ function ApprovalCard({
? `${fileTypeLabel} Approved`
: `Create ${fileTypeLabel}`}
- {phase === "processing" ? (
-
+ {phase === "processing" ? (
+
) : phase === "complete" ? (
{pendingEdits ? "File created with your changes" : "File created"}
) : phase === "rejected" ? (
-
- File creation was cancelled
-
+ File creation was cancelled
) : (
Requires your approval to proceed
@@ -242,8 +253,8 @@ function ApprovalCard({
onClick={() => {
setIsPanelOpen(true);
openHitlEditPanel({
- title: pendingEdits?.name ?? (args.name ?? ""),
- content: pendingEdits?.content ?? (args.content ?? ""),
+ title: pendingEdits?.name ?? args.name ?? "",
+ content: pendingEdits?.content ?? args.content ?? "",
toolName: fileTypeLabel,
onSave: (newName, newContent) => {
setIsPanelOpen(false);
@@ -268,33 +279,33 @@ function ApprovalCard({
{interruptData.context.error}
) : (
<>
- {accounts.length > 0 && (
-
-
- Google Drive Account *
-
-
-
+
+ Google Drive Account *
+
+
+
@@ -311,31 +322,29 @@ function ApprovalCard({
- {selectedAccountId && (
-
-
- Parent Folder
-
-
- {availableParentFolders.length === 0 && (
-
- No folders found. File will be created at Drive root.
-
- )}
-
+
Parent Folder
+
+ {availableParentFolders.length === 0 && (
+
+ No folders found. File will be created at Drive root.
+
+ )}
+
@@ -345,9 +354,11 @@ function ApprovalCard({
{/* Content preview */}
- {(pendingEdits?.name ?? args.name) != null && (
-
{String(pendingEdits?.name ?? args.name)}
- )}
+ {(pendingEdits?.name ?? args.name) != null && (
+
+ {String(pendingEdits?.name ?? args.name)}
+
+ )}
{(pendingEdits?.content ?? args.content) != null && (
- {phase === "processing" ? (
+ {phase === "processing" ? (
) : phase === "complete" ? (
File trashed
) : phase === "rejected" ? (
-
- File deletion was cancelled
-
+
File deletion was cancelled
) : (
Requires your approval to proceed
@@ -274,22 +269,23 @@ function ApprovalCard({
- The file will be moved to Google Drive trash. You can restore it from trash within 30 days.
+ The file will be moved to Google Drive trash. You can restore it from trash within 30
+ days.
-
-
setDeleteFromKb(v === true)}
- className="shrink-0"
- />
-
-
+
+
setDeleteFromKb(v === true)}
+ className="shrink-0"
+ />
+
+
)}
@@ -298,27 +294,23 @@ function ApprovalCard({
{phase === "pending" && (
<>
-
-
-
-
+
+
+
+
)}
diff --git a/surfsense_web/components/tool-ui/jira/create-jira-issue.tsx b/surfsense_web/components/tool-ui/jira/create-jira-issue.tsx
index 10f04698b..9b030e4db 100644
--- a/surfsense_web/components/tool-ui/jira/create-jira-issue.tsx
+++ b/surfsense_web/components/tool-ui/jira/create-jira-issue.tsx
@@ -1,8 +1,12 @@
"use client";
import { makeAssistantToolUI } from "@assistant-ui/react";
+import { useSetAtom } from "jotai";
import { CornerDownLeftIcon, Pen } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
+import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { Button } from "@/components/ui/button";
import {
Select,
@@ -11,11 +15,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
-import { PlateEditor } from "@/components/editor/plate-editor";
-import { TextShimmerLoader } from "@/components/prompt-kit/loader";
import { useHitlPhase } from "@/hooks/use-hitl-phase";
-import { useSetAtom } from "jotai";
-import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
interface JiraAccount {
id: number;
@@ -151,7 +151,9 @@ function ApprovalCard({
const { phase, setProcessing, setRejected } = useHitlPhase(interruptData);
const [isPanelOpen, setIsPanelOpen] = useState(false);
const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
- const [pendingEdits, setPendingEdits] = useState<{ title: string; description: string } | null>(null);
+ const [pendingEdits, setPendingEdits] = useState<{ title: string; description: string } | null>(
+ null
+ );
const [selectedAccountId, setSelectedAccountId] = useState("");
const [selectedProjectKey, setSelectedProjectKey] = useState(args.project_key ?? "");
@@ -177,14 +179,23 @@ function ApprovalCard({
(overrides?: { title?: string; description?: string }) => {
return {
summary: overrides?.title ?? pendingEdits?.title ?? args.summary,
- description: overrides?.description ?? pendingEdits?.description ?? args.description ?? null,
+ description:
+ overrides?.description ?? pendingEdits?.description ?? args.description ?? null,
connector_id: selectedAccountId ? Number(selectedAccountId) : null,
project_key: selectedProjectKey || null,
issue_type: selectedIssueType === "__none__" ? null : selectedIssueType,
priority: selectedPriority === "__none__" ? null : selectedPriority,
};
},
- [args.summary, args.description, selectedAccountId, selectedProjectKey, selectedIssueType, selectedPriority, pendingEdits]
+ [
+ args.summary,
+ args.description,
+ selectedAccountId,
+ selectedProjectKey,
+ selectedIssueType,
+ selectedPriority,
+ pendingEdits,
+ ]
);
const handleApprove = useCallback(() => {
@@ -200,7 +211,17 @@ function ApprovalCard({
args: buildFinalArgs(),
},
});
- }, [phase, setProcessing, isPanelOpen, canApprove, allowedDecisions, onDecision, interruptData, buildFinalArgs, pendingEdits]);
+ }, [
+ phase,
+ setProcessing,
+ isPanelOpen,
+ canApprove,
+ allowedDecisions,
+ onDecision,
+ interruptData,
+ buildFinalArgs,
+ pendingEdits,
+ ]);
useEffect(() => {
const handler = (e: KeyboardEvent) => {
@@ -225,15 +246,16 @@ function ApprovalCard({
: "Create Jira Issue"}
{phase === "processing" ? (
-
+
) : phase === "complete" ? (
{pendingEdits ? "Issue created with your changes" : "Issue created"}
) : phase === "rejected" ? (
-
- Issue creation was cancelled
-
+
Issue creation was cancelled
) : (
Requires your approval to proceed
@@ -248,8 +270,8 @@ function ApprovalCard({
onClick={() => {
setIsPanelOpen(true);
openHitlEditPanel({
- title: pendingEdits?.title ?? (args.summary ?? ""),
- content: pendingEdits?.description ?? (args.description ?? ""),
+ title: pendingEdits?.title ?? args.summary ?? "",
+ content: pendingEdits?.description ?? args.description ?? "",
toolName: "Jira Issue",
onSave: (newTitle, newDescription) => {
setIsPanelOpen(false);
@@ -316,10 +338,7 @@ function ApprovalCard({
Project *
-