mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 08:46:22 +02:00
487 lines
15 KiB
TypeScript
487 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useAtomValue, useSetAtom } from "jotai";
|
|
import { ChevronDownIcon, XIcon } from "lucide-react";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { z } from "zod";
|
|
import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
|
|
import { MarkdownViewer } from "@/components/markdown-viewer";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Drawer, DrawerContent, DrawerHandle } from "@/components/ui/drawer";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { useMediaQuery } from "@/hooks/use-media-query";
|
|
import { baseApiService } from "@/lib/apis/base-api.service";
|
|
import { authenticatedFetch } from "@/lib/auth-utils";
|
|
|
|
/**
|
|
* Zod schema for a single version entry
|
|
*/
|
|
const VersionInfoSchema = z.object({
|
|
id: z.number(),
|
|
created_at: z.string().nullish(),
|
|
});
|
|
|
|
/**
|
|
* Zod schema for the report content API response
|
|
*/
|
|
const ReportContentResponseSchema = z.object({
|
|
id: z.number(),
|
|
title: z.string(),
|
|
content: z.string().nullish(),
|
|
report_metadata: z
|
|
.object({
|
|
status: z.enum(["ready", "failed"]).nullish(),
|
|
error_message: z.string().nullish(),
|
|
word_count: z.number().nullish(),
|
|
char_count: z.number().nullish(),
|
|
section_count: z.number().nullish(),
|
|
})
|
|
.nullish(),
|
|
report_group_id: z.number().nullish(),
|
|
versions: z.array(VersionInfoSchema).nullish(),
|
|
});
|
|
|
|
type ReportContentResponse = z.infer<typeof ReportContentResponseSchema>;
|
|
type VersionInfo = z.infer<typeof VersionInfoSchema>;
|
|
|
|
/**
|
|
* Shimmer loading skeleton for report panel
|
|
*/
|
|
function ReportPanelSkeleton() {
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
{/* Title skeleton */}
|
|
<div className="h-6 w-3/4 rounded-md bg-muted/60 animate-pulse" />
|
|
|
|
{/* Paragraph 1 */}
|
|
<div className="space-y-2.5">
|
|
<div className="h-3 w-full rounded-md bg-muted/60 animate-pulse" />
|
|
<div className="h-3 w-[95%] rounded-md bg-muted/60 animate-pulse [animation-delay:100ms]" />
|
|
<div className="h-3 w-[88%] rounded-md bg-muted/60 animate-pulse [animation-delay:200ms]" />
|
|
<div className="h-3 w-[60%] rounded-md bg-muted/60 animate-pulse [animation-delay:300ms]" />
|
|
</div>
|
|
|
|
{/* Heading */}
|
|
<div className="h-5 w-2/5 rounded-md bg-muted/60 animate-pulse [animation-delay:400ms]" />
|
|
|
|
{/* Paragraph 2 */}
|
|
<div className="space-y-2.5">
|
|
<div className="h-3 w-full rounded-md bg-muted/60 animate-pulse [animation-delay:500ms]" />
|
|
<div className="h-3 w-[92%] rounded-md bg-muted/60 animate-pulse [animation-delay:600ms]" />
|
|
<div className="h-3 w-[97%] rounded-md bg-muted/60 animate-pulse [animation-delay:700ms]" />
|
|
</div>
|
|
|
|
{/* Heading */}
|
|
<div className="h-5 w-1/3 rounded-md bg-muted/60 animate-pulse [animation-delay:800ms]" />
|
|
|
|
{/* Paragraph 3 */}
|
|
<div className="space-y-2.5">
|
|
<div className="h-3 w-[90%] rounded-md bg-muted/60 animate-pulse [animation-delay:900ms]" />
|
|
<div className="h-3 w-full rounded-md bg-muted/60 animate-pulse [animation-delay:1000ms]" />
|
|
<div className="h-3 w-[75%] rounded-md bg-muted/60 animate-pulse [animation-delay:1100ms]" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Inner content component used by both desktop panel and mobile drawer
|
|
*/
|
|
function ReportPanelContent({
|
|
reportId,
|
|
title,
|
|
onClose,
|
|
insideDrawer = false,
|
|
shareToken,
|
|
}: {
|
|
reportId: number;
|
|
title: string;
|
|
onClose?: () => void;
|
|
/** When true, adjusts dropdown behavior to work inside a Vaul drawer on mobile */
|
|
insideDrawer?: boolean;
|
|
/** When set, uses public endpoint for fetching report data (public shared chat) */
|
|
shareToken?: string | null;
|
|
}) {
|
|
const [reportContent, setReportContent] = useState<ReportContentResponse | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [copied, setCopied] = useState(false);
|
|
const [exporting, setExporting] = useState<"pdf" | "docx" | "md" | null>(null);
|
|
|
|
// Version state
|
|
const [activeReportId, setActiveReportId] = useState(reportId);
|
|
const [versions, setVersions] = useState<VersionInfo[]>([]);
|
|
|
|
// Reset active version when the external reportId changes (e.g. clicking a different card)
|
|
useEffect(() => {
|
|
setActiveReportId(reportId);
|
|
}, [reportId]);
|
|
|
|
// Fetch report content (re-runs when activeReportId changes for version switching)
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
const fetchContent = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const url = shareToken
|
|
? `/api/v1/public/${shareToken}/reports/${activeReportId}/content`
|
|
: `/api/v1/reports/${activeReportId}/content`;
|
|
const rawData = await baseApiService.get<unknown>(url);
|
|
if (cancelled) return;
|
|
const parsed = ReportContentResponseSchema.safeParse(rawData);
|
|
if (parsed.success) {
|
|
// Check if the report was marked as failed in metadata
|
|
if (parsed.data.report_metadata?.status === "failed") {
|
|
setError(parsed.data.report_metadata?.error_message || "Report generation failed");
|
|
} else {
|
|
setReportContent(parsed.data);
|
|
// Update versions from the response
|
|
if (parsed.data.versions && parsed.data.versions.length > 0) {
|
|
setVersions(parsed.data.versions);
|
|
}
|
|
}
|
|
} else {
|
|
console.warn("Invalid report content response:", parsed.error.issues);
|
|
setError("Invalid response format");
|
|
}
|
|
} catch (err) {
|
|
if (cancelled) return;
|
|
console.error("Error fetching report content:", err);
|
|
setError(err instanceof Error ? err.message : "Failed to load report");
|
|
} finally {
|
|
if (!cancelled) setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchContent();
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [activeReportId, shareToken]);
|
|
|
|
// Copy markdown content
|
|
const handleCopy = useCallback(async () => {
|
|
if (!reportContent?.content) return;
|
|
try {
|
|
await navigator.clipboard.writeText(reportContent.content);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch (err) {
|
|
console.error("Failed to copy:", err);
|
|
}
|
|
}, [reportContent?.content]);
|
|
|
|
// Export report
|
|
const handleExport = useCallback(
|
|
async (format: "pdf" | "docx" | "md") => {
|
|
setExporting(format);
|
|
const safeTitle =
|
|
title
|
|
.replace(/[^a-zA-Z0-9 _-]/g, "_")
|
|
.trim()
|
|
.slice(0, 80) || "report";
|
|
try {
|
|
if (format === "md") {
|
|
// Download markdown content directly as a .md file
|
|
if (!reportContent?.content) return;
|
|
const blob = new Blob([reportContent.content], {
|
|
type: "text/markdown;charset=utf-8",
|
|
});
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = `${safeTitle}.md`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
} else {
|
|
const response = await authenticatedFetch(
|
|
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/reports/${activeReportId}/export?format=${format}`,
|
|
{ method: "GET" }
|
|
);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Export failed: ${response.status}`);
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = `${safeTitle}.${format}`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
} catch (err) {
|
|
console.error(`Export ${format} failed:`, err);
|
|
} finally {
|
|
setExporting(null);
|
|
}
|
|
},
|
|
[activeReportId, title, reportContent?.content]
|
|
);
|
|
|
|
// Show full-page skeleton only on initial load (no data loaded yet).
|
|
// Once we have versions/content from a prior fetch, keep the action bar visible.
|
|
const hasLoadedBefore = versions.length > 0 || reportContent !== null;
|
|
|
|
if (isLoading && !hasLoadedBefore) {
|
|
return (
|
|
<>
|
|
{/* Minimal top bar with close button even during initial load */}
|
|
<div className="flex items-center justify-end px-4 py-2 shrink-0">
|
|
{onClose && (
|
|
<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
|
|
<XIcon className="size-4" />
|
|
<span className="sr-only">Close report panel</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<ReportPanelSkeleton />
|
|
</>
|
|
);
|
|
}
|
|
|
|
const activeVersionIndex = versions.findIndex((v) => v.id === activeReportId);
|
|
|
|
return (
|
|
<>
|
|
{/* Action bar — always visible after initial load */}
|
|
<div className="flex items-center justify-between px-4 py-2 shrink-0">
|
|
<div className="flex items-center gap-2">
|
|
{/* Copy button */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleCopy}
|
|
disabled={isLoading || !reportContent?.content}
|
|
className="h-8 min-w-[80px] px-3.5 py-4 text-[15px]"
|
|
>
|
|
{copied ? "Copied" : "Copy"}
|
|
</Button>
|
|
|
|
{/* Export dropdown */}
|
|
<DropdownMenu modal={insideDrawer ? false : undefined}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={isLoading || !reportContent?.content}
|
|
className="h-8 px-3.5 py-4 text-[15px] gap-1.5"
|
|
>
|
|
Export
|
|
<ChevronDownIcon className="size-3" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
align="start"
|
|
className={`min-w-[180px]${insideDrawer ? " z-[100]" : ""}`}
|
|
>
|
|
<DropdownMenuItem onClick={() => handleExport("md")}>
|
|
Download Markdown
|
|
</DropdownMenuItem>
|
|
{/* PDF/DOCX export requires server-side conversion via authenticated endpoint.
|
|
Hide for public viewers who have no auth token. */}
|
|
{!shareToken && (
|
|
<>
|
|
<DropdownMenuItem
|
|
onClick={() => handleExport("pdf")}
|
|
disabled={exporting !== null}
|
|
>
|
|
Download PDF
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => handleExport("docx")}
|
|
disabled={exporting !== null}
|
|
>
|
|
Download DOCX
|
|
</DropdownMenuItem>
|
|
</>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
{/* Version switcher — only shown when multiple versions exist */}
|
|
{versions.length > 1 &&
|
|
(insideDrawer ? (
|
|
/* Mobile: compact dropdown */
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="h-8 px-3.5 py-4 text-[15px] gap-1.5"
|
|
>
|
|
v{activeVersionIndex + 1}
|
|
<ChevronDownIcon className="size-3" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="min-w-[120px] z-[100]">
|
|
{versions.map((v, i) => (
|
|
<DropdownMenuItem
|
|
key={v.id}
|
|
onClick={() => setActiveReportId(v.id)}
|
|
className={v.id === activeReportId ? "bg-accent font-medium" : ""}
|
|
>
|
|
Version {i + 1}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
) : (
|
|
/* Desktop: inline version buttons */
|
|
<div className="flex items-center gap-1">
|
|
<div className="flex items-center gap-0.5 rounded-lg border bg-muted/30 p-0.5">
|
|
{versions.map((v, i) => (
|
|
<button
|
|
key={v.id}
|
|
type="button"
|
|
onClick={() => setActiveReportId(v.id)}
|
|
className={`px-2 py-0.5 rounded-md text-xs font-medium transition-colors ${
|
|
v.id === activeReportId
|
|
? "bg-primary text-primary-foreground shadow-sm"
|
|
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
}`}
|
|
>
|
|
v{i + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<span className="text-[10px] text-muted-foreground tabular-nums ml-1">
|
|
{activeVersionIndex + 1} of {versions.length}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{onClose && (
|
|
<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
|
|
<XIcon className="size-4" />
|
|
<span className="sr-only">Close report panel</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Report content — skeleton/error/content shown only in this area */}
|
|
<div className="flex-1 overflow-y-auto scrollbar-thin">
|
|
{isLoading ? (
|
|
<ReportPanelSkeleton />
|
|
) : error || !reportContent ? (
|
|
<div className="flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center">
|
|
<div>
|
|
<p className="font-medium text-foreground">Failed to load report</p>
|
|
<p className="text-sm text-red-500 mt-1">{error || "An unknown error occurred"}</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="px-5 py-5">
|
|
{reportContent.content ? (
|
|
<MarkdownViewer content={reportContent.content} />
|
|
) : (
|
|
<p className="text-muted-foreground italic">No content available.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Desktop report panel — renders as a right-side flex sibling
|
|
*/
|
|
function DesktopReportPanel() {
|
|
const panelState = useAtomValue(reportPanelAtom);
|
|
const closePanel = useSetAtom(closeReportPanelAtom);
|
|
const panelRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Close panel on Escape key
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
closePanel();
|
|
}
|
|
};
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
}, [closePanel]);
|
|
|
|
if (!panelState.isOpen || !panelState.reportId) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={panelRef}
|
|
className="flex w-[50%] max-w-[700px] min-w-[380px] flex-col border-l bg-background animate-in slide-in-from-right-4 duration-300 ease-out"
|
|
>
|
|
<ReportPanelContent
|
|
reportId={panelState.reportId}
|
|
title={panelState.title || "Report"}
|
|
onClose={closePanel}
|
|
shareToken={panelState.shareToken}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Mobile report drawer — uses Vaul (same pattern as comment sheet)
|
|
*/
|
|
function MobileReportDrawer() {
|
|
const panelState = useAtomValue(reportPanelAtom);
|
|
const closePanel = useSetAtom(closeReportPanelAtom);
|
|
|
|
if (!panelState.reportId) return null;
|
|
|
|
return (
|
|
<Drawer
|
|
open={panelState.isOpen}
|
|
onOpenChange={(open) => {
|
|
if (!open) closePanel();
|
|
}}
|
|
shouldScaleBackground={false}
|
|
>
|
|
<DrawerContent className="h-[90vh] max-h-[90vh] z-80" overlayClassName="z-80">
|
|
<DrawerHandle />
|
|
<div className="min-h-0 flex-1 flex flex-col overflow-hidden">
|
|
<ReportPanelContent
|
|
reportId={panelState.reportId}
|
|
title={panelState.title || "Report"}
|
|
insideDrawer
|
|
shareToken={panelState.shareToken}
|
|
/>
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* ReportPanel — responsive report viewer
|
|
*
|
|
* On desktop (lg+): Renders as a right-side split panel (flex sibling to the chat thread)
|
|
* On mobile/tablet: Renders as a Vaul bottom drawer
|
|
*
|
|
* When open on desktop, the comments gutter is automatically suppressed
|
|
* (handled via showCommentsGutterAtom in current-thread.atom.ts)
|
|
*/
|
|
export function ReportPanel() {
|
|
const panelState = useAtomValue(reportPanelAtom);
|
|
const isDesktop = useMediaQuery("(min-width: 1024px)");
|
|
|
|
// Don't render anything if panel is not open
|
|
if (!panelState.isOpen || !panelState.reportId) return null;
|
|
|
|
if (isDesktop) {
|
|
return <DesktopReportPanel />;
|
|
}
|
|
|
|
return <MobileReportDrawer />;
|
|
}
|