apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-23 19:05:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: replace action log sheet with dialog component and update related references

Browse source
This commit is contained in:
Anish Sarkar 2026-05-18 01:34:41 +05:30
parent c580addc04
commit 5bcda6b83b
11 changed files with 168 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

163
surfsense_web/components/agent-action-log/action-log-dialog.tsx Normal file
View file

@ -0,0 +1,163 @@
"use client";
import { useQueryClient } from "@tanstack/react-query";
import { useAtom, useAtomValue } from "jotai";
import { RefreshCcw, Workflow } from "lucide-react";
import { useCallback } from "react";
import { actionLogDialogAtom } from "@/atoms/agent/action-log-dialog.atom";
import { agentFlagsAtom } from "@/atoms/agent/agent-flags-query.atom";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
} from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import { agentActionsQueryKey, useAgentActionsQuery } from "@/hooks/use-agent-actions-query";
import { ActionLogItem } from "./action-log-item";
function EmptyState() {
return (
<div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 pb-12 text-center">
<div className="flex max-w-[260px] flex-col gap-1.5">
<p className="text-sm font-semibold tracking-tight">No actions logged yet</p>
<p className="text-xs leading-relaxed text-muted-foreground">
A complete audit trail of every tool the agent uses in this thread will appear here
</p>
</div>
</div>
);
}
function DisabledState() {
return (
<div className="flex flex-1 flex-col items-center justify-center gap-4 px-6 pb-12 text-center">
<div className="flex size-12 items-center justify-center rounded-full border border-popover-border bg-muted/40">
<Workflow className="size-5 text-muted-foreground" strokeWidth={1.75} />
</div>
<div className="flex max-w-[280px] flex-col gap-1.5">
<p className="text-sm font-semibold tracking-tight">Action log is disabled</p>
<p className="text-xs leading-relaxed text-muted-foreground">
This deployment hasn't enabled the agent action log. An admin can enable{" "}
<code className="rounded bg-muted px-1 py-0.5 font-mono text-[10px] text-foreground">
SURFSENSE_ENABLE_ACTION_LOG
</code>
.
</p>
</div>
</div>
);
}
const SKELETON_KEYS = ["s1", "s2", "s3", "s4"] as const;
function LoadingState() {
return (
<div className="flex flex-col gap-2 p-4">
{SKELETON_KEYS.map((key) => (
<Skeleton key={key} className="h-16 w-full rounded-lg" />
))}
</div>
);
}
export function ActionLogDialog() {
const [state, setState] = useAtom(actionLogDialogAtom);
const queryClient = useQueryClient();
const { data: flags } = useAtomValue(agentFlagsAtom);
const actionLogEnabled = !!flags?.enable_action_log && !flags?.disable_new_agent_stack;
const threadId = state.threadId;
const { data, items, isLoading, isFetching, isError, error, refetch } = useAgentActionsQuery(
threadId,
{ enabled: state.open && actionLogEnabled }
);
const handleOpenChange = useCallback(
(open: boolean) => {
setState((current) => (open ? { ...current, open } : { open: false, threadId: null }));
},
[setState]
);
const handleRevertSuccess = useCallback(() => {
if (threadId !== null) {
queryClient.invalidateQueries({ queryKey: agentActionsQueryKey(threadId) });
}
}, [queryClient, threadId]);
return (
<Dialog open={state.open} onOpenChange={handleOpenChange}>
<DialogContent className="select-none flex h-[90vh] max-h-[640px] w-[95vw] max-w-[900px] flex-col gap-0 overflow-hidden p-0 [--card:var(--popover)] md:h-[80vh]">
<div className="shrink-0 px-6 pb-3 pt-6 pr-28">
<div className="flex items-center gap-2">
<DialogTitle className="text-lg font-semibold">Agent actions</DialogTitle>
{data?.total !== undefined && data.total > 0 ? (
<Badge variant="secondary" className="text-[10px]">
{data.total}
</Badge>
) : null}
</div>
<DialogDescription className="sr-only">
Audit trail of every tool call the agent made in this thread.
</DialogDescription>
<Separator className="mt-4" />
</div>
<Button
size="sm"
variant="ghost"
onClick={() => refetch()}
disabled={isFetching || !actionLogEnabled}
className="absolute right-14 top-4 size-8 rounded-full p-0 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
aria-label="Refresh action log"
>
<RefreshCcw className={isFetching ? "size-3.5 animate-spin" : "size-3.5"} />
</Button>
<div className="flex min-h-0 flex-1 flex-col overflow-y-auto scrollbar-thin">
{!actionLogEnabled ? (
<DisabledState />
) : threadId === null ? (
<EmptyState />
) : isLoading ? (
<LoadingState />
) : isError ? (
<div className="flex flex-1 flex-col items-center justify-center gap-2 px-6 text-center">
<p className="text-sm font-medium text-destructive">Failed to load actions</p>
<p className="text-xs text-muted-foreground">
{error instanceof Error ? error.message : "Unknown error"}
</p>
<Button size="sm" variant="outline" onClick={() => refetch()}>
Try again
</Button>
</div>
) : items.length === 0 ? (
<EmptyState />
) : (
<div className="flex flex-col gap-2 px-4 pb-4">
{items.map((action) => (
<ActionLogItem
key={action.id}
action={action}
threadId={threadId}
onRevertSuccess={handleRevertSuccess}
/>
))}
{data?.has_more ? (
<p className="py-2 text-center text-[11px] text-muted-foreground">
Showing {items.length} of {data.total}. Older actions are paginated.
</p>
) : null}
</div>
)}
</div>
</DialogContent>
</Dialog>
);
}