apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-22 21:28:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'upstream/dev' into electon-desktop

Browse source
This commit is contained in:
CREDO23 2026-03-29 03:10:51 +02:00
commit b8a1d1f594
165 changed files with 17921 additions and 8767 deletions
Download patch file Download diff file Expand all files Collapse all files

6
surfsense_web/app/(home)/changelog/page.tsx
View file

@ -1,8 +1,14 @@
import { loader } from "fumadocs-core/source";
import type { Metadata } from "next";
import { changelog } from "@/.source/server";
import { formatDate } from "@/lib/utils";
import { getMDXComponents } from "@/mdx-components";
export const metadata: Metadata = {
title: "Changelog | SurfSense",
description: "See what's new in SurfSense.",
};
const source = loader({
baseUrl: "/changelog",
source: changelog.toFumadocsSource(),

7
surfsense_web/app/(home)/contact/page.tsx
View file

@ -1,6 +1,11 @@
import React from "react";
import type { Metadata } from "next";
import { ContactFormGridWithDetails } from "@/components/contact/contact-form";
export const metadata: Metadata = {
title: "Contact | SurfSense",
description: "Get in touch with the SurfSense team.",
};
const page = () => {
return (
<div>

9
surfsense_web/app/(home)/login/LocalLoginForm.tsx
View file

@ -5,7 +5,7 @@ import { AnimatePresence, motion } from "motion/react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useEffect, useState } from "react";
import { useState } from "react";
import { loginMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
import { Spinner } from "@/components/ui/spinner";
import { getAuthErrorDetails, isNetworkError } from "@/lib/auth-errors";
@ -25,15 +25,10 @@ export function LocalLoginForm() {
title: null,
message: null,
});
const [authType, setAuthType] = useState<string | null>(null);
const authType = AUTH_TYPE;
const router = useRouter();
const [{ mutateAsync: login, isPending: isLoggingIn }] = useAtom(loginMutationAtom);
useEffect(() => {
// Get the auth type from centralized config
setAuthType(AUTH_TYPE);
}, []);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError({ title: null, message: null }); // Clear any previous errors

7
surfsense_web/app/(home)/pricing/page.tsx
View file

@ -1,6 +1,11 @@
import React from "react";
import type { Metadata } from "next";
import PricingBasic from "@/components/pricing/pricing-section";
export const metadata: Metadata = {
title: "Pricing | SurfSense",
description: "Explore SurfSense plans and pricing options.",
};
const page = () => {
return (
<div>

7
surfsense_web/app/(home)/register/page.tsx
View file

@ -43,9 +43,12 @@ export default function RegisterPage() {
}
}, [router]);
const handleSubmit = async (e: React.FormEvent) => {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
submitForm();
};
const submitForm = async () => {
// Form validation
if (password !== confirmPassword) {
setError({ title: t("password_mismatch"), message: t("passwords_no_match_desc") });
@ -140,7 +143,7 @@ export default function RegisterPage() {
if (shouldRetry(errorCode)) {
toastOptions.action = {
label: tCommon("retry"),
onClick: () => handleSubmit(e),
onClick: () => submitForm(),
};
}

2
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx
View file

@ -63,7 +63,7 @@ export function DocumentTypeChip({ type, className }: { type: string; className?
checkTruncation();
window.addEventListener("resize", checkTruncation);
return () => window.removeEventListener("resize", checkTruncation);
}, []);
}, [type]);
const chip = (
<span

22
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx
View file

@ -1,6 +1,6 @@
"use client";
import { ListFilter, Search, Upload, X } from "lucide-react";
import { FolderPlus, ListFilter, Search, Upload, X } from "lucide-react";
import { useTranslations } from "next-intl";
import React, { useCallback, useMemo, useRef, useState } from "react";
import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import type { DocumentTypeEnum } from "@/contracts/types/document.types";
import { getDocumentTypeIcon, getDocumentTypeLabel } from "./DocumentTypeIcon";
@ -17,12 +18,14 @@ export function DocumentsFilters({
searchValue,
onToggleType,
activeTypes,
onCreateFolder,
}: {
typeCounts: Partial<Record<DocumentTypeEnum, number>>;
onSearch: (v: string) => void;
searchValue: string;
onToggleType: (type: DocumentTypeEnum, checked: boolean) => void;
activeTypes: DocumentTypeEnum[];
onCreateFolder?: () => void;
}) {
const t = useTranslations("documents");
const id = React.useId();
@ -194,6 +197,23 @@ export function DocumentsFilters({
)}
</div>
{/* New Folder Button */}
{onCreateFolder && (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="outline"
size="icon"
className="h-9 w-9 shrink-0 border-dashed border-sidebar-border text-sidebar-foreground/60 hover:text-sidebar-foreground hover:border-sidebar-border bg-sidebar"
onClick={onCreateFolder}
>
<FolderPlus size={14} />
</Button>
</TooltipTrigger>
<TooltipContent>New folder</TooltipContent>
</Tooltip>
)}
{/* Upload Button */}
<Button
data-joyride="upload-button"

16
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
View file

@ -473,14 +473,14 @@ export function DocumentsTableShell({
}, [deletableSelectedIds, bulkDeleteDocuments, deleteDocument]);
const bulkDeleteBar = hasDeletableSelection ? (
<div className="flex items-center justify-center py-1.5 border-b border-border/50 bg-destructive/5 shrink-0 animate-in fade-in slide-in-from-top-1 duration-150">
<div className="absolute inset-x-0 top-0 z-10 flex items-center justify-center py-1 pointer-events-none animate-in fade-in duration-150">
<button
type="button"
onClick={() => setBulkDeleteConfirmOpen(true)}
className="flex items-center gap-1.5 px-3 py-1 rounded-md bg-destructive text-destructive-foreground shadow-sm text-xs font-medium hover:bg-destructive/90 transition-colors"
className="pointer-events-auto flex items-center gap-1.5 px-3 py-1 rounded-md bg-destructive text-destructive-foreground shadow-lg text-xs font-medium hover:bg-destructive/90 transition-colors"
>
<Trash2 size={12} />
Delete ({deletableSelectedIds.length} selected)
Delete {deletableSelectedIds.length} {deletableSelectedIds.length === 1 ? "item" : "items"}
</button>
</div>
) : null;
@ -526,7 +526,6 @@ export function DocumentsTableShell({
</TableRow>
</TableHeader>
</Table>
{bulkDeleteBar}
{loading ? (
<div className="flex-1 overflow-auto">
<Table className="table-fixed w-full">
@ -594,7 +593,8 @@ export function DocumentsTableShell({
)}
</div>
) : (
<div ref={desktopScrollRef} className="flex-1 overflow-auto">
<div ref={desktopScrollRef} className="flex-1 overflow-auto relative">
{bulkDeleteBar}
<Table className="table-fixed w-full">
<TableBody>
{sorted.map((doc) => {
@ -788,9 +788,6 @@ export function DocumentsTableShell({
)}
</div>
{/* Mobile bulk delete bar */}
<div className="md:hidden">{bulkDeleteBar}</div>
{/* Mobile Card View */}
{loading ? (
<div className="md:hidden divide-y divide-border/50 flex-1 overflow-auto">
@ -846,8 +843,9 @@ export function DocumentsTableShell({
) : (
<div
ref={mobileScrollRef}
className="md:hidden divide-y divide-border/50 flex-1 overflow-auto"
className="md:hidden divide-y divide-border/50 flex-1 overflow-auto relative"
>
{bulkDeleteBar}
{sorted.map((doc) => {
const isMentioned = mentionedDocIds?.has(doc.id) ?? false;
const statusState = doc.status?.state ?? "ready";

11
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx
View file

@ -24,8 +24,7 @@ import {
} from "@/components/ui/dropdown-menu";
import type { Document } from "./types";
// Only FILE and NOTE document types can be edited
const EDITABLE_DOCUMENT_TYPES = ["FILE", "NOTE"] as const;
const EDITABLE_DOCUMENT_TYPES = ["NOTE"] as const;
// SURFSENSE_DOCS are system-managed and cannot be deleted
const NON_DELETABLE_DOCUMENT_TYPES = ["SURFSENSE_DOCS"] as const;
@ -47,20 +46,14 @@ export function RowActions({
document.document_type as (typeof EDITABLE_DOCUMENT_TYPES)[number]
);
// Documents in "pending" or "processing" state should show disabled delete
const isBeingProcessed =
document.status?.state === "pending" || document.status?.state === "processing";
// FILE documents that failed processing cannot be edited
const isFileFailed = document.document_type === "FILE" && document.status?.state === "failed";
// SURFSENSE_DOCS are system-managed and should not show delete at all
const shouldShowDelete = !NON_DELETABLE_DOCUMENT_TYPES.includes(
document.document_type as (typeof NON_DELETABLE_DOCUMENT_TYPES)[number]
);
// Edit is disabled while processing OR for failed FILE documents
const isEditDisabled = isBeingProcessed || isFileFailed;
const isEditDisabled = isBeingProcessed;
const isDeleteDisabled = isBeingProcessed;
const handleDelete = async () => {

133
surfsense_web/app/dashboard/[search_space_id]/logs/loading.tsx Normal file
View file

@ -0,0 +1,133 @@
"use client";
import { motion } from "motion/react";
import { Skeleton } from "@/components/ui/skeleton";
export default function Loading() {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="w-full px-6 py-4 space-y-6 min-h-[calc(100vh-64px)]"
>
{/* Summary Dashboard Skeleton */}
<motion.div
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
{[...Array(4)].map((_, i) => (
<div key={i} className="rounded-lg border p-4">
<div className="flex flex-row items-center justify-between space-y-0 pb-2">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-4 rounded-full" />
</div>
<div className="space-y-2">
<Skeleton className="h-8 w-16" />
<Skeleton className="h-3 w-32" />
</div>
</div>
))}
</motion.div>
{/* Header Section Skeleton */}
<motion.div
className="flex items-center justify-between"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
>
<div className="space-y-2">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-4 w-64" />
</div>
<Skeleton className="h-9 w-24" />
</motion.div>
{/* Filters Skeleton */}
<motion.div
className="flex flex-wrap items-center justify-start gap-3 w-full"
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
>
<div className="flex items-center gap-3 flex-wrap w-full sm:w-auto">
<Skeleton className="h-9 w-full sm:w-60" />
<Skeleton className="h-9 w-24" />
<Skeleton className="h-9 w-24" />
<Skeleton className="h-9 w-20" />
</div>
</motion.div>
{/* Table Skeleton */}
<motion.div
className="rounded-md border overflow-hidden"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
>
{/* Table Header */}
<div className="border-b bg-muted/50 px-4 py-3 flex items-center gap-4">
<Skeleton className="h-4 w-4" />
<Skeleton className="h-4 w-16" />
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 flex-1" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-8" />
</div>
{/* Table Rows */}
{[...Array(6)].map((_, i) => (
<div key={i} className="border-b px-4 py-3 flex items-center gap-4 hover:bg-muted/50">
<Skeleton className="h-4 w-4" />
<Skeleton className="h-6 w-12 rounded-full" />
<Skeleton className="h-6 w-16 rounded-full" />
<div className="flex items-center gap-2">
<Skeleton className="h-4 w-4" />
<Skeleton className="h-4 w-20" />
</div>
<div className="flex-1 space-y-1">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-3 w-48" />
</div>
<div className="space-y-1">
<Skeleton className="h-3 w-24" />
<Skeleton className="h-3 w-20" />
</div>
<Skeleton className="h-8 w-8" />
</div>
))}
</motion.div>
{/* Pagination Skeleton */}
<div className="flex items-center justify-between gap-8 mt-4">
<motion.div
className="flex items-center gap-3"
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
>
<Skeleton className="h-4 w-20 max-sm:sr-only" />
<Skeleton className="h-9 w-16" />
</motion.div>
<motion.div
className="flex grow justify-end"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.2 }}
>
<Skeleton className="h-4 w-40" />
</motion.div>
<div className="flex items-center gap-2">
<Skeleton className="h-9 w-9" />
<Skeleton className="h-9 w-9" />
<Skeleton className="h-9 w-9" />
<Skeleton className="h-9 w-9" />
</div>
</div>
</motion.div>
);
}

10
surfsense_web/app/dashboard/[search_space_id]/more-pages/loading.tsx Normal file
View file

@ -0,0 +1,10 @@
import { Skeleton } from "@/components/ui/skeleton";
export default function Loading() {
return (
<div className="flex flex-1 flex-col items-center justify-center gap-4 p-4">
<Skeleton className="h-4 w-64" />
<Skeleton className="h-32 w-full max-w-2xl rounded-xl" />
</div>
);
}

64
surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
View file

@ -30,8 +30,10 @@ import {
// extractWriteTodosFromContent,
} from "@/atoms/chat/plan-state.atom";
import { closeReportPanelAtom } from "@/atoms/chat/report-panel.atom";
import { type AgentCreatedDocument, agentCreatedDocumentsAtom } from "@/atoms/documents/ui.atoms";
import { closeEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
import { membersAtom } from "@/atoms/members/members-query.atoms";
import { updateChatTabTitleAtom } from "@/atoms/tabs/tabs.atom";
import { currentUserAtom } from "@/atoms/user/user-query.atoms";
import { ThinkingStepsDataUI } from "@/components/assistant-ui/thinking-steps";
import { Thread } from "@/components/assistant-ui/thread";
@ -74,6 +76,7 @@ import {
trackChatMessageSent,
trackChatResponseReceived,
} from "@/lib/posthog/events";
import Loading from "../loading";
/**
* After a tool produces output, mark any previously-decided interrupt tool
@ -188,6 +191,8 @@ export default function NewChatPage() {
const clearTargetCommentId = useSetAtom(clearTargetCommentIdAtom);
const closeReportPanel = useSetAtom(closeReportPanelAtom);
const closeEditorPanel = useSetAtom(closeEditorPanelAtom);
const updateChatTabTitle = useSetAtom(updateChatTabTitleAtom);
const setAgentCreatedDocuments = useSetAtom(agentCreatedDocumentsAtom);
// Get current user for author info in shared chats
const { data: currentUser } = useAtomValue(currentUserAtom);
@ -726,12 +731,10 @@ export default function NewChatPage() {
}
case "data-thread-title-update": {
// Handle thread title update from LLM-generated title
const titleData = parsed.data as { threadId: number; title: string };
if (titleData?.title && titleData?.threadId === currentThreadId) {
// Update current thread state with new title
setCurrentThread((prev) => (prev ? { ...prev, title: titleData.title } : prev));
// Invalidate thread list to refresh sidebar
updateChatTabTitle({ chatId: currentThreadId, title: titleData.title });
queryClient.invalidateQueries({
queryKey: ["threads", String(searchSpaceId)],
});
@ -739,6 +742,20 @@ export default function NewChatPage() {
break;
}
case "data-documents-updated": {
const docEvent = parsed.data as {
action: string;
document: AgentCreatedDocument;
};
if (docEvent?.document?.id) {
setAgentCreatedDocuments((prev) => {
if (prev.some((d) => d.id === docEvent.document.id)) return prev;
return [...prev, docEvent.document];
});
}
break;
}
case "data-interrupt-request": {
wasInterrupted = true;
const interruptData = parsed.data as Record<string, unknown>;
@ -1526,49 +1543,14 @@ export default function NewChatPage() {
// Show loading state only when loading an existing thread
if (isInitializing) {
return (
<div className="flex h-[calc(100dvh-64px)] flex-col bg-main-panel px-4">
<div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8">
{/* User message */}
<div className="flex justify-end">
<Skeleton className="h-12 w-56 rounded-2xl" />
</div>
{/* Assistant message */}
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-[85%]" />
<Skeleton className="h-4 w-[70%]" />
</div>
{/* User message */}
<div className="flex justify-end">
<Skeleton className="h-12 w-40 rounded-2xl" />
</div>
{/* Assistant message */}
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-[90%]" />
<Skeleton className="h-4 w-[60%]" />
</div>
</div>
{/* Input bar */}
<div className="sticky bottom-0 pb-6 bg-main-panel">
<div className="mx-auto w-full max-w-[44rem]">
<Skeleton className="h-24 w-full rounded-2xl" />
</div>
</div>
</div>
);
return <Loading />;
}
// Show error state only if we tried to load an existing thread but failed
// For new chats (urlChatId === 0), threadId being null is expected (lazy creation)
if (!threadId && urlChatId > 0) {
return (
<div className="flex h-[calc(100dvh-64px)] flex-col items-center justify-center gap-4">
<div className="flex h-full flex-col items-center justify-center gap-4">
<div className="text-destructive">Failed to load chat</div>
<button
type="button"
@ -1587,7 +1569,7 @@ export default function NewChatPage() {
return (
<AssistantRuntimeProvider runtime={runtime}>
<ThinkingStepsDataUI />
<div key={searchSpaceId} className="flex h-[calc(100dvh-64px)] overflow-hidden">
<div key={searchSpaceId} className="flex h-full overflow-hidden">
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
<Thread />
</div>

45
surfsense_web/app/dashboard/[search_space_id]/new-chat/loading.tsx Normal file
View file

@ -0,0 +1,45 @@
import { Skeleton } from "@/components/ui/skeleton";
export default function Loading() {
return (
<div className="flex h-full flex-col bg-main-panel px-4">
<div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8">
{/* User message */}
<div className="flex justify-end">
<Skeleton className="h-12 w-56 rounded-2xl" />
</div>
{/* Assistant message */}
<div className="flex flex-col gap-2">
<Skeleton className="h-4 w-full" />
<Skeleton className="h-4 w-[85%]" />
<Skeleton className="h-18 w-[40%]" />
</div>
{/* User message */}
<div className="flex gap-2 justify-end">
<Skeleton className="h-12 w-72 rounded-2xl" />
</div>
{/* Assistant message */}
<div className="flex flex-col gap-2">
<Skeleton className="h-10 w-[30%]" />
<Skeleton className="h-4 w-[90%]" />
<Skeleton className="h-6 w-[60%]" />
</div>
{/* User message */}
<div className="flex gap-2 justify-end">
<Skeleton className="h-12 w-96 rounded-2xl" />
</div>
</div>
{/* Input bar */}
<div className="sticky bottom-0 pb-6 bg-main-panel">
<div className="mx-auto w-full max-w-[44rem]">
<Skeleton className="h-24 w-full rounded-2xl" />
</div>
</div>
</div>
);
}

21
surfsense_web/app/dashboard/[search_space_id]/page.tsx
View file

@ -1,15 +1,10 @@
"use client";
import { redirect } from "next/navigation";
import { useParams, useRouter } from "next/navigation";
import { useEffect } from "react";
export default function SearchSpaceDashboardPage() {
const router = useRouter();
const { search_space_id } = useParams();
useEffect(() => {
router.push(`/dashboard/${search_space_id}/new-chat`);
}, [router, search_space_id]);
return <></>;
export default async function SearchSpaceDashboardPage({
params,
}: {
params: Promise<{ search_space_id: string }>;
}) {
const { search_space_id } = await params;
redirect(`/dashboard/${search_space_id}/new-chat`);
}

29
surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx
View file

@ -188,13 +188,13 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
[deleteMember, searchSpaceId]
);
const { data: roles = [] } = useQuery({
const { data: roles = [], isLoading: rolesLoading } = useQuery({
queryKey: cacheKeys.roles.all(searchSpaceId.toString()),
queryFn: () => rolesApiService.getRoles({ search_space_id: searchSpaceId }),
enabled: !!searchSpaceId,
});
const { data: invites = [] } = useQuery({
const { data: invites = [], isLoading: invitesLoading } = useQuery({
queryKey: cacheKeys.invites.all(searchSpaceId.toString()),
queryFn: () => invitesApiService.getInvites({ search_space_id: searchSpaceId }),
staleTime: 5 * 60 * 1000,
@ -294,15 +294,23 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
return (
<div className="space-y-4 md:space-y-6">
<div className="flex items-center gap-2 flex-wrap">
{canInvite && (
<CreateInviteDialog
roles={roles}
onCreateInvite={handleCreateInvite}
searchSpaceId={searchSpaceId}
/>
{rolesLoading ? (
<Skeleton className="h-9 w-32 rounded-md" />
) : (
canInvite && (
<CreateInviteDialog
roles={roles}
onCreateInvite={handleCreateInvite}
searchSpaceId={searchSpaceId}
/>
)
)}
{canInvite && activeInvites.length > 0 && (
<AllInvitesDialog invites={activeInvites} onRevokeInvite={handleRevokeInvite} />
{invitesLoading ? (
<Skeleton className="h-9 w-32 rounded-md" />
) : (
canInvite && activeInvites.length > 0 && (
<AllInvitesDialog invites={activeInvites} onRevokeInvite={handleRevokeInvite} />
)
)}
<p className="text-xs md:text-sm text-muted-foreground whitespace-nowrap">
{members.length} {members.length === 1 ? "member" : "members"}
@ -595,6 +603,7 @@ function CreateInviteDialog({
});
} catch (error) {
console.error("Failed to create invite:", error);
toast.error("Failed to create invite. Please try again.");
} finally {
setCreating(false);
}

4
surfsense_web/app/error.tsx
View file

@ -3,11 +3,11 @@
import posthog from "posthog-js";
import { useEffect } from "react";
export default function Error({
export default function ErrorPage({
error,
reset,
}: {
error: Error & { digest?: string };
error: globalThis.Error & { digest?: string };
reset: () => void;
}) {
useEffect(() => {

12
surfsense_web/app/global-error.tsx
View file

@ -1,8 +1,9 @@
"use client";
import NextError from "next/error";
import "./globals.css";
import posthog from "posthog-js";
import { useEffect } from "react";
import { Button } from "@/components/ui/button";
export default function GlobalError({
error,
@ -18,10 +19,11 @@ export default function GlobalError({
return (
<html lang="en">
<body>
<NextError statusCode={0} />
<button type="button" onClick={reset}>
Try again
</button>
<div className="flex min-h-screen flex-col items-center justify-center gap-4 p-4">
<h2 className="text-xl font-semibold">Something went wrong</h2>
<p className="text-sm text-muted-foreground">An unexpected error occurred.</p>
<Button onClick={reset}>Try again</Button>
</div>
</body>
</html>
);

8
surfsense_web/app/public/[token]/page.tsx
View file

@ -1,11 +1,7 @@
"use client";
import { useParams } from "next/navigation";
import { PublicChatView } from "@/components/public-chat/public-chat-view";
export default function PublicChatPage() {
const params = useParams();
const token = params.token as string;
export default async function PublicChatPage({ params }: { params: Promise<{ token: string }> }) {
const { token } = await params;
return <PublicChatView shareToken={token} />;
}

9
surfsense_web/atoms/documents/document-mutation.atoms.ts
View file

@ -29,9 +29,6 @@ export const createDocumentMutationAtom = atomWithMutation((get) => {
queryClient.invalidateQueries({
queryKey: cacheKeys.documents.globalQueryParams(documentsQueryParams),
});
queryClient.invalidateQueries({
queryKey: cacheKeys.documents.typeCounts(searchSpaceId ?? undefined),
});
},
};
});
@ -75,9 +72,6 @@ export const updateDocumentMutationAtom = atomWithMutation((get) => {
queryClient.invalidateQueries({
queryKey: cacheKeys.documents.document(String(request.id)),
});
queryClient.invalidateQueries({
queryKey: cacheKeys.documents.typeCounts(searchSpaceId ?? undefined),
});
},
};
});
@ -109,9 +103,6 @@ export const deleteDocumentMutationAtom = atomWithMutation((get) => {
queryClient.invalidateQueries({
queryKey: cacheKeys.documents.document(String(request.id)),
});
queryClient.invalidateQueries({
queryKey: cacheKeys.documents.typeCounts(searchSpaceId ?? undefined),
});
},
};
});

38
surfsense_web/atoms/documents/document-query.atoms.ts
View file

@ -1,38 +0,0 @@
import { atomWithQuery } from "jotai-tanstack-query";
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import type { SearchDocumentsRequest } from "@/contracts/types/document.types";
import { documentsApiService } from "@/lib/apis/documents-api.service";
import { cacheKeys } from "@/lib/query-client/cache-keys";
import { globalDocumentsQueryParamsAtom } from "./ui.atoms";
export const documentsAtom = atomWithQuery((get) => {
const searchSpaceId = get(activeSearchSpaceIdAtom);
const queryParams = get(globalDocumentsQueryParamsAtom);
return {
queryKey: cacheKeys.documents.globalQueryParams(queryParams),
enabled: !!searchSpaceId,
queryFn: async () => {
return documentsApiService.getDocuments({
queryParams: queryParams,
});
},
};
});
export const documentTypeCountsAtom = atomWithQuery((get) => {
const searchSpaceId = get(activeSearchSpaceIdAtom);
return {
queryKey: cacheKeys.documents.typeCounts(searchSpaceId ?? undefined),
enabled: !!searchSpaceId,
staleTime: 10 * 60 * 1000, // 10 minutes
queryFn: async () => {
return documentsApiService.getDocumentTypeCounts({
queryParams: {
search_space_id: searchSpaceId ?? undefined,
},
});
},
};
});

19
surfsense_web/atoms/documents/folder.atoms.ts Normal file
View file

@ -0,0 +1,19 @@
"use client";
import { atom } from "jotai";
import { atomWithStorage } from "jotai/utils";
/**
* Set of folder IDs that are currently expanded in the tree, keyed by search space ID.
* Persisted to localStorage so expand/collapse state survives page refreshes.
*/
export const expandedFolderIdsAtom = atomWithStorage<Record<number, number[]>>(
"surfsense:expandedFolderIds",
{}
);
/**
* Folder currently being renamed (inline edit mode).
* null means no folder is being renamed.
*/
export const renamingFolderIdAtom = atom<number | null>(null);

11
surfsense_web/atoms/documents/ui.atoms.ts
View file

@ -7,3 +7,14 @@ export const globalDocumentsQueryParamsAtom = atom<GetDocumentsRequest["queryPar
});
export const documentsSidebarOpenAtom = atom(false);
export interface AgentCreatedDocument {
id: number;
title: string;
documentType: string;
searchSpaceId: number;
folderId: number | null;
createdById: string | null;
}
export const agentCreatedDocumentsAtom = atom<AgentCreatedDocument[]>([]);

219
surfsense_web/atoms/tabs/tabs.atom.ts Normal file
View file

@ -0,0 +1,219 @@
import { atom } from "jotai";
import { atomWithStorage, createJSONStorage } from "jotai/utils";
export type TabType = "chat" | "document";
export interface Tab {
id: string;
type: TabType;
title: string;
/** For chat tabs */
chatId?: number | null;
chatUrl?: string;
/** For document tabs */
documentId?: number;
searchSpaceId?: number;
}
interface TabsState {
tabs: Tab[];
activeTabId: string | null;
}
const INITIAL_CHAT_TAB: Tab = {
id: "chat-new",
type: "chat",
title: "New Chat",
chatId: null,
chatUrl: undefined,
};
const initialState: TabsState = {
tabs: [INITIAL_CHAT_TAB],
activeTabId: "chat-new",
};
const sessionStorageAdapter = createJSONStorage<TabsState>(
() => (typeof window !== "undefined" ? sessionStorage : undefined) as Storage
);
export const tabsStateAtom = atomWithStorage<TabsState>(
"surfsense:tabs",
initialState,
sessionStorageAdapter,
{ getOnInit: true }
);
export const tabsAtom = atom((get) => get(tabsStateAtom).tabs);
export const activeTabIdAtom = atom((get) => get(tabsStateAtom).activeTabId);
export const activeTabAtom = atom((get) => {
const state = get(tabsStateAtom);
return state.tabs.find((t) => t.id === state.activeTabId) ?? null;
});
function makeChatTabId(chatId: number | null): string {
return chatId ? `chat-${chatId}` : "chat-new";
}
function makeDocumentTabId(documentId: number): string {
return `doc-${documentId}`;
}
/**
* Sync the current chat from Next.js routing into the tab bar.
* If a tab for this chat already exists, activate it.
* Otherwise, replace the "new chat" tab or create one.
*/
export const syncChatTabAtom = atom(
null,
(
get,
set,
{ chatId, title, chatUrl }: { chatId: number | null; title?: string; chatUrl?: string }
) => {
const state = get(tabsStateAtom);
const tabId = makeChatTabId(chatId);
const existing = state.tabs.find((t) => t.id === tabId);
if (existing) {
set(tabsStateAtom, {
...state,
activeTabId: tabId,
tabs: state.tabs.map((t) =>
t.id === tabId ? { ...t, title: title || t.title, chatUrl: chatUrl || t.chatUrl } : t
),
});
return;
}
// If navigating to a new chat (no chatId), ensure there's a "new chat" tab
if (!chatId) {
const hasNewChatTab = state.tabs.some((t) => t.id === "chat-new");
if (hasNewChatTab) {
set(tabsStateAtom, { ...state, activeTabId: "chat-new" });
} else {
set(tabsStateAtom, {
tabs: [...state.tabs, INITIAL_CHAT_TAB],
activeTabId: "chat-new",
});
}
return;
}
// Replace the "new chat" tab if it exists and is empty, otherwise add new tab
const newChatTabIdx = state.tabs.findIndex((t) => t.id === "chat-new");
const newTab: Tab = {
id: tabId,
type: "chat",
title: title || `Chat ${chatId}`,
chatId,
chatUrl,
};
let updatedTabs: Tab[];
if (newChatTabIdx !== -1) {
updatedTabs = [...state.tabs];
updatedTabs[newChatTabIdx] = newTab;
} else {
updatedTabs = [...state.tabs, newTab];
}
set(tabsStateAtom, { tabs: updatedTabs, activeTabId: tabId });
}
);
/** Update the title of the current chat tab (e.g., when a chat gets its first response). */
export const updateChatTabTitleAtom = atom(
null,
(get, set, { chatId, title }: { chatId: number; title: string }) => {
const state = get(tabsStateAtom);
const tabId = makeChatTabId(chatId);
set(tabsStateAtom, {
...state,
tabs: state.tabs.map((t) => (t.id === tabId ? { ...t, title } : t)),
});
}
);
/** Open a document tab. If already open, just switch to it. */
export const openDocumentTabAtom = atom(
null,
(
get,
set,
{
documentId,
searchSpaceId,
title,
}: { documentId: number; searchSpaceId: number; title?: string }
) => {
const state = get(tabsStateAtom);
const tabId = makeDocumentTabId(documentId);
const existing = state.tabs.find((t) => t.id === tabId);
if (existing) {
set(tabsStateAtom, {
...state,
activeTabId: tabId,
tabs: state.tabs.map((t) => (t.id === tabId ? { ...t, title: title || t.title } : t)),
});
return;
}
const newTab: Tab = {
id: tabId,
type: "document",
title: title || `Document ${documentId}`,
documentId,
searchSpaceId,
};
set(tabsStateAtom, {
tabs: [...state.tabs, newTab],
activeTabId: tabId,
});
}
);
/** Switch to a tab by ID. Returns the tab so the caller can navigate if needed. */
export const switchTabAtom = atom(null, (get, set, tabId: string) => {
const state = get(tabsStateAtom);
const tab = state.tabs.find((t) => t.id === tabId);
if (tab) {
set(tabsStateAtom, { ...state, activeTabId: tabId });
}
return tab ?? null;
});
/** Close a tab. If it was active, activate the nearest sibling. */
export const closeTabAtom = atom(null, (get, set, tabId: string) => {
const state = get(tabsStateAtom);
const idx = state.tabs.findIndex((t) => t.id === tabId);
if (idx === -1) return null;
const remaining = state.tabs.filter((t) => t.id !== tabId);
// Don't close the last tab — always keep at least one
if (remaining.length === 0) {
set(tabsStateAtom, {
tabs: [INITIAL_CHAT_TAB],
activeTabId: "chat-new",
});
return INITIAL_CHAT_TAB;
}
let newActiveId = state.activeTabId;
if (state.activeTabId === tabId) {
// Activate the tab to the left (or right if first)
const newIdx = Math.min(idx, remaining.length - 1);
newActiveId = remaining[newIdx].id;
}
set(tabsStateAtom, { tabs: remaining, activeTabId: newActiveId });
return remaining.find((t) => t.id === newActiveId) ?? null;
});
/** Reset tabs when switching search spaces. */
export const resetTabsAtom = atom(null, (_get, set) => {
set(tabsStateAtom, { ...initialState });
});

2
surfsense_web/components/Logo.tsx
View file

@ -1,5 +1,3 @@
"use client";
import Image from "next/image";
import Link from "next/link";
import { cn } from "@/lib/utils";

14
surfsense_web/components/UserDropdown.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { BadgeCheck, LogOut } from "lucide-react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useState } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
@ -27,7 +27,6 @@ export function UserDropdown({
avatar: string;
};
}) {
const router = useRouter();
const [isLoggingOut, setIsLoggingOut] = useState(false);
const handleLogout = async () => {
@ -75,12 +74,11 @@ export function UserDropdown({
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem
onClick={() => router.push(`/dashboard/api-key`)}
className="text-xs md:text-sm"
>
<BadgeCheck className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
API Key
<DropdownMenuItem asChild className="text-xs md:text-sm">
<Link href="/dashboard/api-key">
<BadgeCheck className="mr-2 h-3.5 w-3.5 md:h-4 md:w-4" />
API Key
</Link>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />

2
surfsense_web/components/announcements/AnnouncementToastProvider.tsx
View file

@ -34,7 +34,7 @@ function showAnnouncementToast(announcement: Announcement) {
label: announcement.link.label,
onClick: () => {
if (announcement.link?.url.startsWith("http")) {
window.open(announcement.link.url, "_blank");
window.open(announcement.link.url, "_blank", "noopener,noreferrer");
} else if (announcement.link?.url) {
window.location.href = announcement.link.url;
}

2
surfsense_web/components/announcements/AnnouncementsEmptyState.tsx
View file

@ -1,5 +1,3 @@
"use client";
import { BellOff } from "lucide-react";
export function AnnouncementsEmptyState() {

8
surfsense_web/components/assistant-ui/connector-popup.tsx
View file

@ -4,7 +4,6 @@ import { useAtomValue, useSetAtom } from "jotai";
import { AlertTriangle, Cable, Settings } from "lucide-react";
import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
import {
globalNewLLMConfigsAtom,
@ -22,6 +21,7 @@ import { Tabs, TabsContent } from "@/components/ui/tabs";
import type { SearchSourceConnector } from "@/contracts/types/connector.types";
import { useConnectorsSync } from "@/hooks/use-connectors-sync";
import { PICKER_CLOSE_EVENT, PICKER_OPEN_EVENT } from "@/hooks/use-google-picker";
import { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
import { cn } from "@/lib/utils";
import { ConnectorDialogHeader } from "./connector-popup/components/connector-dialog-header";
import { ConnectorConnectView } from "./connector-popup/connector-configs/views/connector-connect-view";
@ -72,9 +72,9 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
const llmConfigLoading = preferencesLoading || globalConfigsLoading;
// Fetch document type counts via the lightweight /type-counts endpoint (cached 10 min)
const { data: documentTypeCounts, isFetching: documentTypesLoading } =
useAtomValue(documentTypeCountsAtom);
// Real-time document type counts via Zero (updates instantly as docs are indexed)
const documentTypeCounts = useZeroDocumentTypeCounts(searchSpaceId);
const documentTypesLoading = documentTypeCounts === undefined;
// Read status inbox items from shared atom (populated by LayoutDataProvider)
// instead of creating a duplicate useInbox("status") hook.

6
surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
View file

@ -867,6 +867,9 @@ export const useConnectorDialog = () => {
setIsOpen(false);
setIsFromOAuth(false);
setIndexingConfig(null);
setIndexingConnector(null);
setIndexingConnectorConfig(null);
refreshConnectors();
queryClient.invalidateQueries({
@ -898,6 +901,9 @@ export const useConnectorDialog = () => {
const handleSkipIndexing = useCallback(() => {
setIsOpen(false);
setIsFromOAuth(false);
setIndexingConfig(null);
setIndexingConnector(null);
setIndexingConnectorConfig(null);
}, [setIsOpen]);
// Handle starting edit mode

8
surfsense_web/components/assistant-ui/inline-citation.tsx
View file

@ -28,16 +28,14 @@ export const InlineCitation: FC<InlineCitationProps> = ({ chunkId, isDocsChunk =
url=""
isDocsChunk={isDocsChunk}
>
<span
<button
type="button"
onClick={() => setIsOpen(true)}
onKeyDown={(e) => e.key === "Enter" && setIsOpen(true)}
className="text-[10px] font-bold bg-primary/80 hover:bg-primary text-primary-foreground rounded-full min-w-4 h-4 px-1 inline-flex items-center justify-center align-super cursor-pointer transition-colors ml-0.5"
title={`View source chunk #${chunkId}`}
role="button"
tabIndex={0}
>
{chunkId}
</span>
</button>
</SourceDetailPanel>
);
};

104
surfsense_web/components/assistant-ui/markdown-code-block.tsx Normal file
View file

@ -0,0 +1,104 @@
"use client";
import { CheckIcon, CopyIcon } from "lucide-react";
import type { CSSProperties } from "react";
import { memo, useEffect, useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialDark, materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { cn, copyToClipboard } from "@/lib/utils";
type MarkdownCodeBlockProps = {
className?: string;
language: string;
codeText: string;
isDarkMode: boolean;
};
function stripThemeBackgrounds(
theme: Record<string, CSSProperties>
): Record<string, CSSProperties> {
const cleaned: Record<string, CSSProperties> = {};
for (const key of Object.keys(theme)) {
const { background, backgroundColor, ...rest } = theme[key] as CSSProperties & {
background?: string;
backgroundColor?: string;
};
cleaned[key] = rest;
}
return cleaned;
}
const cleanMaterialDark = stripThemeBackgrounds(materialDark);
const cleanMaterialLight = stripThemeBackgrounds(materialLight);
function MarkdownCodeBlockComponent({
className,
language,
codeText,
isDarkMode,
}: MarkdownCodeBlockProps) {
const [hasCopied, setHasCopied] = useState(false);
useEffect(() => {
if (!hasCopied) return;
const timer = setTimeout(() => setHasCopied(false), 2000);
return () => clearTimeout(timer);
}, [hasCopied]);
return (
<div className="mt-4 overflow-hidden rounded-2xl" style={{ background: "var(--syntax-bg)" }}>
<div className="flex items-center justify-between gap-4 px-4 py-2 font-semibold text-muted-foreground text-sm">
<span className="lowercase text-xs">{language}</span>
<Button
variant="ghost"
size="sm"
className="h-8 w-8 p-0"
type="button"
onClick={async () => {
const ok = await copyToClipboard(codeText);
if (ok) setHasCopied(true);
}}
aria-label={hasCopied ? "Copied code" : "Copy code"}
>
<span className="sr-only">Copy</span>
{hasCopied ? <CheckIcon className="!size-3" /> : <CopyIcon className="!size-3" />}
</Button>
</div>
<SyntaxHighlighter
style={isDarkMode ? cleanMaterialDark : cleanMaterialLight}
language={language}
PreTag="div"
customStyle={{ margin: 0, background: "transparent" }}
className={cn(className)}
>
{codeText}
</SyntaxHighlighter>
</div>
);
}
export const MarkdownCodeBlock = memo(MarkdownCodeBlockComponent);
export function MarkdownCodeBlockSkeleton() {
return (
<div
className="mt-4 overflow-hidden rounded-2xl border"
style={{ background: "var(--syntax-bg)" }}
>
<div className="flex items-center justify-between gap-4 border-b px-4 py-2">
<Skeleton className="h-3 w-16" />
<Skeleton className="h-8 w-8 rounded-md" />
</div>
<div className="space-y-2 p-4">
<Skeleton className="h-4 w-11/12" />
<Skeleton className="h-4 w-10/12" />
<Skeleton className="h-4 w-8/12" />
<Skeleton className="h-4 w-9/12" />
</div>
</div>
);
}

103
surfsense_web/components/assistant-ui/markdown-text.tsx
View file

@ -7,19 +7,17 @@ import {
unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
useIsMarkdownCodeBlock,
} from "@assistant-ui/react-markdown";
import { CheckIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
import { ExternalLinkIcon } from "lucide-react";
import dynamic from "next/dynamic";
import { useTheme } from "next-themes";
import type { CSSProperties } from "react";
import { type FC, memo, type ReactNode, useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialDark, materialLight } from "react-syntax-highlighter/dist/esm/styles/prism";
import { memo, type ReactNode } from "react";
import rehypeKatex from "rehype-katex";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import { ImagePreview, ImageRoot, ImageZoom } from "@/components/assistant-ui/image";
import "katex/dist/katex.min.css";
import { InlineCitation, UrlCitation } from "@/components/assistant-ui/inline-citation";
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
@ -30,22 +28,32 @@ import {
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
function stripThemeBackgrounds(
theme: Record<string, CSSProperties>
): Record<string, CSSProperties> {
const cleaned: Record<string, CSSProperties> = {};
for (const key of Object.keys(theme)) {
const { background, backgroundColor, ...rest } = theme[key] as CSSProperties & {
background?: string;
backgroundColor?: string;
};
cleaned[key] = rest;
}
return cleaned;
function MarkdownCodeBlockSkeleton() {
return (
<div
className="mt-4 overflow-hidden rounded-2xl border"
style={{ background: "var(--syntax-bg)" }}
>
<div className="flex items-center justify-between gap-4 border-b px-4 py-2">
<Skeleton className="h-3 w-16" />
<Skeleton className="h-8 w-8 rounded-md" />
</div>
<div className="space-y-2 p-4">
<Skeleton className="h-4 w-11/12" />
<Skeleton className="h-4 w-10/12" />
<Skeleton className="h-4 w-8/12" />
<Skeleton className="h-4 w-9/12" />
</div>
</div>
);
}
const cleanMaterialDark = stripThemeBackgrounds(materialDark);
const cleanMaterialLight = stripThemeBackgrounds(materialLight);
const LazyMarkdownCodeBlock = dynamic(
() => import("./markdown-code-block").then((mod) => mod.MarkdownCodeBlock),
{
loading: () => <MarkdownCodeBlockSkeleton />,
}
);
// Storage for URL citations replaced during preprocess to avoid GFM autolink interference.
// Populated in preprocessMarkdown, consumed in parseTextWithCitations.
@ -178,39 +186,6 @@ const MarkdownTextImpl = () => {
export const MarkdownText = memo(MarkdownTextImpl);
const InlineCodeHeader: FC<{ language: string; code: string }> = ({ language, code }) => {
const { isCopied, copyToClipboard } = useCopyToClipboard();
const onCopy = () => {
if (!code || isCopied) return;
copyToClipboard(code);
};
return (
<div className="flex items-center justify-between gap-4 px-4 py-2 font-semibold text-muted-foreground text-sm">
<span className="lowercase text-xs">{language}</span>
<TooltipIconButton tooltip="Copy" onClick={onCopy}>
{!isCopied && <CopyIcon />}
{isCopied && <CheckIcon />}
</TooltipIconButton>
</div>
);
};
const useCopyToClipboard = ({ copiedDuration = 3000 }: { copiedDuration?: number } = {}) => {
const [isCopied, setIsCopied] = useState<boolean>(false);
const copyToClipboard = (value: string) => {
if (!value) return;
navigator.clipboard.writeText(value).then(() => {
setIsCopied(true);
setTimeout(() => setIsCopied(false), copiedDuration);
});
};
return { isCopied, copyToClipboard };
};
/**
* Helper to process children and replace citation patterns with components
*/
@ -421,24 +396,20 @@ const defaultComponents = memoizeMarkdownComponents({
<code
className={cn("aui-md-inline-code rounded border bg-muted font-semibold", className)}
{...props}
/>
>
{children}
</code>
);
}
const language = /language-(\w+)/.exec(className || "")?.[1] ?? "text";
const codeString = String(children).replace(/\n$/, "");
const syntaxStyle = resolvedTheme === "dark" ? cleanMaterialDark : cleanMaterialLight;
return (
<div className="mt-4 overflow-hidden rounded-2xl" style={{ background: "var(--syntax-bg)" }}>
<InlineCodeHeader language={language} code={codeString} />
<SyntaxHighlighter
style={syntaxStyle}
language={language}
PreTag="div"
customStyle={{ margin: 0, background: "transparent" }}
>
{codeString}
</SyntaxHighlighter>
</div>
<LazyMarkdownCodeBlock
className={className}
language={language}
codeText={codeString}
isDarkMode={resolvedTheme === "dark"}
/>
);
},
strong: ({ className, children, ...props }) => (

12
surfsense_web/components/assistant-ui/thread-list.tsx
View file

@ -225,17 +225,13 @@ function ThreadListItemComponent({
onDelete,
}: ThreadListItemComponentProps) {
return (
<div
<button
type="button"
className={cn(
"group flex items-center gap-2 rounded-lg px-3 py-2 transition-colors cursor-pointer",
"group flex w-full items-center gap-2 rounded-lg px-3 py-2 transition-colors cursor-pointer text-left",
isActive ? "bg-accent text-accent-foreground" : "hover:bg-muted/50"
)}
onClick={onClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") onClick();
}}
role="button"
tabIndex={0}
>
<MessageSquareIcon className="size-4 shrink-0 text-muted-foreground" />
<div className="flex-1 min-w-0">
@ -274,7 +270,7 @@ function ThreadListItemComponent({
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</button>
);
}

6
surfsense_web/components/assistant-ui/thread.tsx
View file

@ -113,7 +113,7 @@ const ThreadContent: FC = () => {
>
<ThreadPrimitive.Viewport
turnAnchor="top"
className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4"
className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-scroll px-4 pt-4"
>
<AuiIf condition={({ thread }) => thread.isEmpty}>
<ThreadWelcome />
@ -1119,6 +1119,8 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
{hasWebSearchTool && (
<button
type="button"
aria-label={isWebSearchEnabled ? "Disable web search" : "Enable web search"}
aria-pressed={isWebSearchEnabled}
onClick={() => toggleTool("web_search")}
className={cn(
"rounded-full transition-all flex items-center gap-1 px-2 py-1 border h-8 select-none",
@ -1237,7 +1239,7 @@ interface ToolGroup {
const TOOL_GROUPS: ToolGroup[] = [
{
label: "Research",
tools: ["search_knowledge_base", "search_surfsense_docs", "scrape_webpage"],
tools: ["search_surfsense_docs", "scrape_webpage"],
},
{
label: "Generate",

9
surfsense_web/components/auth/sign-in-button.tsx
View file

@ -8,7 +8,14 @@ import { cn } from "@/lib/utils";
// Official Google "G" logo with brand colors
const GoogleLogo = ({ className }: { className?: string }) => (
<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg
className={className}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Google logo"
>
<title>Google logo</title>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
fill="#4285F4"

15
surfsense_web/components/contact/contact-form.tsx
View file

@ -185,7 +185,20 @@ export const Grid = ({ pattern, size }: { pattern?: [number, number][]; size?: n
);
};
export function GridPattern({ width, height, x, y, squares, ...props }: React.ComponentProps<"svg"> & { width: number; height: number; x: string | number; y: string | number; squares?: [number, number][] }) {
export function GridPattern({
width,
height,
x,
y,
squares,
...props
}: React.ComponentProps<"svg"> & {
width: number;
height: number;
x: string | number;
y: string | number;
squares?: [number, number][];
}) {
const patternId = useId();
return (

104
surfsense_web/components/documents/CreateFolderDialog.tsx Normal file
View file

@ -0,0 +1,104 @@
"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
interface CreateFolderDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
parentFolderName?: string | null;
onConfirm: (name: string) => void;
}
export function CreateFolderDialog({
open,
onOpenChange,
parentFolderName,
onConfirm,
}: CreateFolderDialogProps) {
const [name, setName] = useState("");
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (open) {
setName("");
setTimeout(() => inputRef.current?.focus(), 0);
}
}, [open]);
const handleSubmit = useCallback(
(e?: React.FormEvent) => {
e?.preventDefault();
const trimmed = name.trim();
if (!trimmed) return;
onConfirm(trimmed);
onOpenChange(false);
},
[name, onConfirm, onOpenChange]
);
const isSubfolder = !!parentFolderName;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
<DialogHeader className="space-y-2 pb-2">
<div className="flex items-center gap-2 sm:gap-3">
<div className="flex-1 min-w-0">
<DialogTitle className="text-base sm:text-lg">
{isSubfolder ? "New subfolder" : "New folder"}
</DialogTitle>
<DialogDescription className="text-xs sm:text-sm mt-0.5">
{isSubfolder
? `Create a new folder inside "${parentFolderName}".`
: "Create a new folder at the root level."}
</DialogDescription>
</div>
</div>
</DialogHeader>
<form onSubmit={handleSubmit} className="flex flex-col gap-3 sm:gap-4">
<div className="flex flex-col gap-2">
<Label htmlFor="folder-name" className="text-sm">
Folder name
</Label>
<Input
ref={inputRef}
id="folder-name"
placeholder="e.g. Research, Notes, Archive…"
value={name}
onChange={(e) => setName(e.target.value)}
maxLength={255}
autoComplete="off"
className="text-sm h-9 sm:h-10"
/>
</div>
<DialogFooter className="flex-row justify-end gap-2 pt-2 sm:pt-3">
<Button
type="button"
variant="secondary"
onClick={() => onOpenChange(false)}
className="h-8 sm:h-9 text-xs sm:text-sm"
>
Cancel
</Button>
<Button type="submit" disabled={!name.trim()} className="h-8 sm:h-9 text-xs sm:text-sm">
Create
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);
}

295
surfsense_web/components/documents/DocumentNode.tsx Normal file
View file

@ -0,0 +1,295 @@
"use client";
import {
AlertCircle,
Clock,
Download,
Eye,
MoreHorizontal,
Move,
PenLine,
Trash2,
} from "lucide-react";
import React, { useCallback, useRef, useState } from "react";
import { useDrag } from "react-dnd";
import { getDocumentTypeIcon } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
import { ExportContextItems, ExportDropdownItems } from "@/components/shared/ExportMenuItems";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSub,
ContextMenuSubContent,
ContextMenuSubTrigger,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import type { DocumentTypeEnum } from "@/contracts/types/document.types";
import { cn } from "@/lib/utils";
import { DND_TYPES } from "./FolderNode";
export interface DocumentNodeDoc {
id: number;
title: string;
document_type: string;
folderId: number | null;
status?: { state: string; reason?: string | null };
}
interface DocumentNodeProps {
doc: DocumentNodeDoc;
depth: number;
isMentioned: boolean;
onToggleChatMention: (doc: DocumentNodeDoc, isMentioned: boolean) => void;
onPreview: (doc: DocumentNodeDoc) => void;
onEdit: (doc: DocumentNodeDoc) => void;
onDelete: (doc: DocumentNodeDoc) => void;
onMove: (doc: DocumentNodeDoc) => void;
onExport?: (doc: DocumentNodeDoc, format: string) => void;
contextMenuOpen?: boolean;
onContextMenuOpenChange?: (open: boolean) => void;
}
export const DocumentNode = React.memo(function DocumentNode({
doc,
depth,
isMentioned,
onToggleChatMention,
onPreview,
onEdit,
onDelete,
onMove,
onExport,
contextMenuOpen,
onContextMenuOpenChange,
}: DocumentNodeProps) {
const statusState = doc.status?.state ?? "ready";
const isSelectable = statusState !== "pending" && statusState !== "processing";
const isEditable =
doc.document_type === "NOTE" && statusState !== "pending" && statusState !== "processing";
const handleCheckChange = useCallback(() => {
if (isSelectable) {
onToggleChatMention(doc, isMentioned);
}
}, [doc, isMentioned, isSelectable, onToggleChatMention]);
const [{ isDragging }, drag] = useDrag(
() => ({
type: DND_TYPES.DOCUMENT,
item: { id: doc.id },
collect: (monitor) => ({ isDragging: monitor.isDragging() }),
}),
[doc.id]
);
const isProcessing = statusState === "pending" || statusState === "processing";
const [dropdownOpen, setDropdownOpen] = useState(false);
const [exporting, setExporting] = useState<string | null>(null);
const rowRef = useRef<HTMLDivElement>(null);
const handleExport = useCallback(
(format: string) => {
if (!onExport) return;
setExporting(format);
onExport(doc, format);
setTimeout(() => setExporting(null), 2000);
},
[doc, onExport]
);
const attachRef = useCallback(
(node: HTMLDivElement | null) => {
(rowRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
drag(node);
},
[drag]
);
return (
<ContextMenu onOpenChange={onContextMenuOpenChange}>
<ContextMenuTrigger asChild>
{/* biome-ignore lint/a11y/useSemanticElements: contains nested interactive children (Checkbox) that render as <button>, making a semantic <button> wrapper invalid */}
<div
role="button"
tabIndex={0}
ref={attachRef}
className={cn(
"group flex h-8 w-full items-center gap-2.5 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none text-left",
isMentioned && "bg-accent/30",
isDragging && "opacity-40"
)}
style={{ paddingLeft: `${depth * 16 + 4}px` }}
onClick={handleCheckChange}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleCheckChange();
}
}}
>
{(() => {
if (statusState === "pending") {
return (
<Tooltip>
<TooltipTrigger asChild>
<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
<Clock className="h-3.5 w-3.5 text-muted-foreground/60" />
</span>
</TooltipTrigger>
<TooltipContent side="top">Pending - waiting to be synced</TooltipContent>
</Tooltip>
);
}
if (statusState === "processing") {
return (
<Tooltip>
<TooltipTrigger asChild>
<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
<Spinner size="xs" className="text-primary" />
</span>
</TooltipTrigger>
<TooltipContent side="top">Syncing</TooltipContent>
</Tooltip>
);
}
if (statusState === "failed") {
return (
<Tooltip>
<TooltipTrigger asChild>
<span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center">
<AlertCircle className="h-3.5 w-3.5 text-destructive" />
</span>
</TooltipTrigger>
<TooltipContent side="top" className="max-w-xs">
{doc.status?.reason || "Processing failed"}
</TooltipContent>
</Tooltip>
);
}
return (
<Checkbox
checked={isMentioned}
onCheckedChange={handleCheckChange}
onClick={(e) => e.stopPropagation()}
className="h-3.5 w-3.5 shrink-0"
/>
);
})()}
<span className="flex-1 min-w-0 truncate">{doc.title}</span>
<span className="shrink-0">
{getDocumentTypeIcon(
doc.document_type as DocumentTypeEnum,
"h-3.5 w-3.5 text-muted-foreground"
)}
</span>
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className={cn(
"hidden sm:inline-flex h-6 w-6 shrink-0 hover:bg-transparent",
dropdownOpen
? "opacity-100 bg-accent hover:bg-accent"
: "opacity-0 group-hover:opacity-100"
)}
onClick={(e) => e.stopPropagation()}
>
<MoreHorizontal className="h-3.5 w-3.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40">
<DropdownMenuItem onClick={() => onPreview(doc)}>
<Eye className="mr-2 h-4 w-4" />
Open
</DropdownMenuItem>
{isEditable && (
<DropdownMenuItem onClick={() => onEdit(doc)}>
<PenLine className="mr-2 h-4 w-4" />
Edit
</DropdownMenuItem>
)}
<DropdownMenuItem onClick={() => onMove(doc)}>
<Move className="mr-2 h-4 w-4" />
Move to...
</DropdownMenuItem>
{onExport && (
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Download className="mr-2 h-4 w-4" />
Export
</DropdownMenuSubTrigger>
<DropdownMenuSubContent className="min-w-[180px]">
<ExportDropdownItems onExport={handleExport} exporting={exporting} />
</DropdownMenuSubContent>
</DropdownMenuSub>
)}
<DropdownMenuItem
className="text-destructive focus:text-destructive"
disabled={isProcessing}
onClick={() => onDelete(doc)}
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</ContextMenuTrigger>
{contextMenuOpen && (
<ContextMenuContent className="w-40">
<ContextMenuItem onClick={() => onPreview(doc)}>
<Eye className="mr-2 h-4 w-4" />
Open
</ContextMenuItem>
{isEditable && (
<ContextMenuItem onClick={() => onEdit(doc)}>
<PenLine className="mr-2 h-4 w-4" />
Edit
</ContextMenuItem>
)}
<ContextMenuItem onClick={() => onMove(doc)}>
<Move className="mr-2 h-4 w-4" />
Move to...
</ContextMenuItem>
{onExport && (
<ContextMenuSub>
<ContextMenuSubTrigger>
<Download className="mr-2 h-4 w-4" />
Export
</ContextMenuSubTrigger>
<ContextMenuSubContent className="min-w-[180px]">
<ExportContextItems onExport={handleExport} exporting={exporting} />
</ContextMenuSubContent>
</ContextMenuSub>
)}
<ContextMenuItem
className="text-destructive focus:text-destructive"
disabled={isProcessing}
onClick={() => onDelete(doc)}
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</ContextMenuItem>
</ContextMenuContent>
)}
</ContextMenu>
);
});

379
surfsense_web/components/documents/FolderNode.tsx Normal file
View file

@ -0,0 +1,379 @@
"use client";
import {
ChevronDown,
ChevronRight,
Folder,
FolderOpen,
FolderPlus,
MoreHorizontal,
Move,
PenLine,
Trash2,
} from "lucide-react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useDrag, useDrop } from "react-dnd";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { cn } from "@/lib/utils";
import type { FolderSelectionState } from "./FolderTreeView";
export const DND_TYPES = {
FOLDER: "FOLDER",
DOCUMENT: "DOCUMENT",
} as const;
type DropZone = "top" | "middle" | "bottom";
export interface FolderDisplay {
id: number;
name: string;
position: string;
parentId: number | null;
searchSpaceId: number;
}
interface FolderNodeProps {
folder: FolderDisplay;
depth: number;
isExpanded: boolean;
isRenaming: boolean;
childCount: number;
selectionState: FolderSelectionState;
onToggleSelect: (folderId: number, selectAll: boolean) => void;
onToggleExpand: (folderId: number) => void;
onRename: (folder: FolderDisplay, newName: string) => void;
onStartRename: (folderId: number) => void;
onCancelRename: () => void;
onDelete: (folder: FolderDisplay) => void;
onMove: (folder: FolderDisplay) => void;
onCreateSubfolder: (parentId: number) => void;
onDropIntoFolder?: (
itemType: "folder" | "document",
itemId: number,
targetFolderId: number
) => void;
onReorderFolder?: (folderId: number, beforePos: string | null, afterPos: string | null) => void;
siblingPositions?: { before: string | null; after: string | null };
disabledDropIds?: Set<number>;
contextMenuOpen?: boolean;
onContextMenuOpenChange?: (open: boolean) => void;
}
function getDropZone(
monitor: { getClientOffset: () => { y: number } | null },
element: HTMLElement
): DropZone {
const offset = monitor.getClientOffset();
if (!offset) return "middle";
const rect = element.getBoundingClientRect();
const y = offset.y - rect.top;
const pct = y / rect.height;
if (pct < 0.25) return "top";
if (pct > 0.75) return "bottom";
return "middle";
}
export const FolderNode = React.memo(function FolderNode({
folder,
depth,
isExpanded,
isRenaming,
childCount,
selectionState,
onToggleSelect,
onToggleExpand,
onRename,
onStartRename,
onCancelRename,
onDelete,
onMove,
onCreateSubfolder,
onDropIntoFolder,
onReorderFolder,
siblingPositions,
disabledDropIds,
contextMenuOpen,
onContextMenuOpenChange,
}: FolderNodeProps) {
const [renameValue, setRenameValue] = useState(folder.name);
const inputRef = useRef<HTMLInputElement>(null);
const rowRef = useRef<HTMLDivElement>(null);
const [dropZone, setDropZone] = useState<DropZone | null>(null);
const [{ isDragging }, drag] = useDrag(
() => ({
type: DND_TYPES.FOLDER,
item: { id: folder.id, position: folder.position, parentId: folder.parentId },
collect: (monitor) => ({ isDragging: monitor.isDragging() }),
}),
[folder.id, folder.position, folder.parentId]
);
const [{ isOver, canDrop }, drop] = useDrop(
() => ({
accept: [DND_TYPES.FOLDER, DND_TYPES.DOCUMENT],
canDrop: (item: { id: number }) => {
if (item.id === folder.id) return false;
if (disabledDropIds?.has(item.id)) return false;
return true;
},
hover: (_item, monitor) => {
if (!rowRef.current || !monitor.isOver({ shallow: true })) {
setDropZone(null);
return;
}
setDropZone(getDropZone(monitor, rowRef.current));
},
drop: (item: { id: number }, monitor) => {
if (!rowRef.current) return;
const zone = getDropZone(monitor, rowRef.current);
const type = monitor.getItemType();
if (zone === "middle") {
if (type === DND_TYPES.FOLDER) {
onDropIntoFolder?.("folder", item.id, folder.id);
} else {
onDropIntoFolder?.("document", item.id, folder.id);
}
} else if (type === DND_TYPES.FOLDER && onReorderFolder && siblingPositions) {
if (zone === "top") {
onReorderFolder(item.id, siblingPositions.before, folder.position);
} else {
onReorderFolder(item.id, folder.position, siblingPositions.after);
}
}
setDropZone(null);
},
collect: (monitor) => ({
isOver: monitor.isOver({ shallow: true }),
canDrop: monitor.canDrop(),
}),
}),
[
folder.id,
folder.position,
disabledDropIds,
onDropIntoFolder,
onReorderFolder,
siblingPositions,
]
);
useEffect(() => {
if (!isOver) setDropZone(null);
}, [isOver]);
const attachRef = useCallback(
(node: HTMLDivElement | null) => {
rowRef.current = node;
drag(drop(node));
},
[drag, drop]
);
useEffect(() => {
if (isRenaming && inputRef.current) {
inputRef.current.focus();
inputRef.current.select();
}
}, [isRenaming]);
const handleRenameSubmit = useCallback(() => {
const trimmed = renameValue.trim();
if (trimmed && trimmed !== folder.name) {
onRename(folder, trimmed);
}
onCancelRename();
}, [renameValue, folder, onRename, onCancelRename]);
const handleRenameKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (e.key === "Enter") {
e.preventDefault();
handleRenameSubmit();
} else if (e.key === "Escape") {
e.preventDefault();
setRenameValue(folder.name);
onCancelRename();
}
},
[handleRenameSubmit, folder.name, onCancelRename]
);
const startRename = useCallback(() => {
setRenameValue(folder.name);
onStartRename(folder.id);
}, [folder, onStartRename]);
const handleCheckChange = useCallback(() => {
onToggleSelect(folder.id, selectionState !== "all");
}, [folder.id, selectionState, onToggleSelect]);
const FolderIcon = isExpanded ? FolderOpen : Folder;
return (
<ContextMenu onOpenChange={onContextMenuOpenChange}>
<ContextMenuTrigger asChild disabled={isRenaming}>
{/* biome-ignore lint/a11y/useSemanticElements: div required for drag/drop refs */}
<div
ref={attachRef}
role="button"
tabIndex={0}
className={cn(
"group relative flex h-8 items-center gap-1 rounded-md px-1 text-sm hover:bg-accent/50 cursor-pointer select-none",
isExpanded && "font-medium",
isDragging && "opacity-40",
isOver && canDrop && dropZone === "middle" && "bg-accent ring-1 ring-primary/40",
isOver && canDrop && dropZone === "top" && "border-t-2 border-primary",
isOver && canDrop && dropZone === "bottom" && "border-b-2 border-primary",
isOver && !canDrop && "cursor-not-allowed"
)}
style={{ paddingLeft: `${depth * 16 + 4}px` }}
onClick={() => onToggleExpand(folder.id)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onToggleExpand(folder.id);
}
}}
onDoubleClick={(e) => {
e.stopPropagation();
startRename();
}}
>
<span className="flex h-4 w-4 shrink-0 items-center justify-center">
{isExpanded ? (
<ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
) : (
<ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
)}
</span>
<Checkbox
checked={
selectionState === "all" ? true : selectionState === "some" ? "indeterminate" : false
}
onCheckedChange={handleCheckChange}
onClick={(e) => e.stopPropagation()}
className="h-3.5 w-3.5 shrink-0"
/>
<FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
{isRenaming ? (
<input
ref={inputRef}
type="text"
value={renameValue}
onChange={(e) => setRenameValue(e.target.value)}
onBlur={handleRenameSubmit}
onKeyDown={handleRenameKeyDown}
onClick={(e) => e.stopPropagation()}
placeholder="Enter folder name"
className="flex-1 min-w-0 bg-transparent px-1 py-0.5 text-sm outline-none caret-primary placeholder:text-muted-foreground/50"
/>
) : (
<span className="flex-1 min-w-0 truncate">{folder.name}</span>
)}
{!isRenaming && childCount > 0 && (
<span className="shrink-0 text-[10px] text-muted-foreground tabular-nums">
{childCount}
</span>
)}
{!isRenaming && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
size="icon"
className="hidden sm:inline-flex h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
onClick={(e) => e.stopPropagation()}
>
<MoreHorizontal className="h-3.5 w-3.5" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-40">
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
onCreateSubfolder(folder.id);
}}
>
<FolderPlus className="mr-2 h-4 w-4" />
New subfolder
</DropdownMenuItem>
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
startRename();
}}
>
<PenLine className="mr-2 h-4 w-4" />
Rename
</DropdownMenuItem>
<DropdownMenuItem
onClick={(e) => {
e.stopPropagation();
onMove(folder);
}}
>
<Move className="mr-2 h-4 w-4" />
Move to...
</DropdownMenuItem>
<DropdownMenuItem
className="text-destructive focus:text-destructive"
onClick={(e) => {
e.stopPropagation();
onDelete(folder);
}}
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)}
</div>
</ContextMenuTrigger>
{!isRenaming && contextMenuOpen && (
<ContextMenuContent className="w-40">
<ContextMenuItem onClick={() => onCreateSubfolder(folder.id)}>
<FolderPlus className="mr-2 h-4 w-4" />
New subfolder
</ContextMenuItem>
<ContextMenuItem onClick={() => startRename()}>
<PenLine className="mr-2 h-4 w-4" />
Rename
</ContextMenuItem>
<ContextMenuItem onClick={() => onMove(folder)}>
<Move className="mr-2 h-4 w-4" />
Move to...
</ContextMenuItem>
<ContextMenuItem
className="text-destructive focus:text-destructive"
onClick={() => onDelete(folder)}
>
<Trash2 className="mr-2 h-4 w-4" />
Delete
</ContextMenuItem>
</ContextMenuContent>
)}
</ContextMenu>
);
});

173
surfsense_web/components/documents/FolderPickerDialog.tsx Normal file
View file

@ -0,0 +1,173 @@
"use client";
import { ChevronDown, ChevronRight, Folder, FolderOpen, Home } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";
import type { FolderDisplay } from "./FolderNode";
interface FolderPickerDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
folders: FolderDisplay[];
title: string;
description?: string;
disabledFolderIds?: Set<number>;
onSelect: (folderId: number | null) => void;
}
export function FolderPickerDialog({
open,
onOpenChange,
folders,
title,
description,
disabledFolderIds,
onSelect,
}: FolderPickerDialogProps) {
const [selectedId, setSelectedId] = useState<number | null>(null);
const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
useEffect(() => {
if (open) {
setSelectedId(null);
setExpandedIds(new Set());
}
}, [open]);
const foldersByParent = useMemo(() => {
const map: Record<string, FolderDisplay[]> = {};
for (const f of folders) {
const key = f.parentId ?? "root";
if (!map[key]) map[key] = [];
map[key].push(f);
}
return map;
}, [folders]);
const toggleExpand = useCallback((id: number) => {
setExpandedIds((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
}, []);
const handleConfirm = useCallback(() => {
onSelect(selectedId);
onOpenChange(false);
}, [selectedId, onSelect, onOpenChange]);
function renderPickerLevel(parentId: number | null, depth: number): React.ReactNode[] {
const key = parentId ?? "root";
const children = (foldersByParent[key] ?? [])
.slice()
.sort((a, b) => a.position.localeCompare(b.position));
return children.flatMap((f) => {
const isDisabled = disabledFolderIds?.has(f.id) ?? false;
const isExpanded = expandedIds.has(f.id);
const hasChildren = (foldersByParent[f.id] ?? []).length > 0;
const isSelected = selectedId === f.id;
const FolderIcon = isExpanded ? FolderOpen : Folder;
return [
<button
key={f.id}
type="button"
disabled={isDisabled}
className={cn(
"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors",
isSelected && "bg-accent text-accent-foreground",
!isSelected && !isDisabled && "hover:bg-accent/50",
isDisabled && "cursor-not-allowed opacity-40"
)}
style={{ paddingLeft: `${depth * 16 + 8}px` }}
onClick={() => {
if (!isDisabled) setSelectedId(f.id);
}}
>
{hasChildren ? (
<button
type="button"
className="flex h-4 w-4 shrink-0 items-center justify-center"
onClick={(e) => {
e.stopPropagation();
toggleExpand(f.id);
}}
>
{isExpanded ? (
<ChevronDown className="h-3.5 w-3.5" />
) : (
<ChevronRight className="h-3.5 w-3.5" />
)}
</button>
) : (
<span className="h-4 w-4 shrink-0" />
)}
<FolderIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
<span className="truncate">{f.name}</span>
</button>,
...(isExpanded ? renderPickerLevel(f.id, depth + 1) : []),
];
});
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="select-none max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
<DialogHeader className="space-y-2 pb-2">
<div className="flex items-center gap-2 sm:gap-3">
<div className="flex-1 min-w-0">
<DialogTitle className="text-base sm:text-lg">{title}</DialogTitle>
{description && (
<DialogDescription className="text-xs sm:text-sm mt-0.5">
{description}
</DialogDescription>
)}
</div>
</div>
</DialogHeader>
<div className="max-h-[300px] overflow-y-auto rounded-md border p-1">
<button
type="button"
className={cn(
"flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-sm transition-colors",
selectedId === null && "bg-accent text-accent-foreground",
selectedId !== null && "hover:bg-accent/50"
)}
onClick={() => setSelectedId(null)}
>
<span className="h-4 w-4 shrink-0" />
<Home className="h-4 w-4 shrink-0 text-muted-foreground" />
<span>Root</span>
</button>
{renderPickerLevel(null, 1)}
</div>
<DialogFooter className="flex-row justify-end gap-2 pt-2 sm:pt-3">
<Button
variant="secondary"
onClick={() => onOpenChange(false)}
className="h-8 sm:h-9 text-xs sm:text-sm"
>
Cancel
</Button>
<Button onClick={handleConfirm} className="h-8 sm:h-9 text-xs sm:text-sm">
Move here
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

262
surfsense_web/components/documents/FolderTreeView.tsx Normal file
View file

@ -0,0 +1,262 @@
"use client";
import { useAtom } from "jotai";
import { CirclePlus } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { renamingFolderIdAtom } from "@/atoms/documents/folder.atoms";
import type { DocumentTypeEnum } from "@/contracts/types/document.types";
import { DocumentNode, type DocumentNodeDoc } from "./DocumentNode";
import { type FolderDisplay, FolderNode } from "./FolderNode";
export type FolderSelectionState = "all" | "some" | "none";
interface FolderTreeViewProps {
folders: FolderDisplay[];
documents: DocumentNodeDoc[];
expandedIds: Set<number>;
onToggleExpand: (folderId: number) => void;
mentionedDocIds: Set<number>;
onToggleChatMention: (
doc: { id: number; title: string; document_type: string },
isMentioned: boolean
) => void;
onToggleFolderSelect: (folderId: number, selectAll: boolean) => void;
onRenameFolder: (folder: FolderDisplay, newName: string) => void;
onDeleteFolder: (folder: FolderDisplay) => void;
onMoveFolder: (folder: FolderDisplay) => void;
onCreateFolder: (parentId: number | null) => void;
onPreviewDocument: (doc: DocumentNodeDoc) => void;
onEditDocument: (doc: DocumentNodeDoc) => void;
onDeleteDocument: (doc: DocumentNodeDoc) => void;
onMoveDocument: (doc: DocumentNodeDoc) => void;
onExportDocument?: (doc: DocumentNodeDoc, format: string) => void;
activeTypes: DocumentTypeEnum[];
searchQuery?: string;
onDropIntoFolder?: (
itemType: "folder" | "document",
itemId: number,
targetFolderId: number | null
) => void;
onReorderFolder?: (folderId: number, beforePos: string | null, afterPos: string | null) => void;
}
function groupBy<T>(items: T[], keyFn: (item: T) => string | number): Record<string | number, T[]> {
const result: Record<string | number, T[]> = {};
for (const item of items) {
const key = keyFn(item);
if (!result[key]) result[key] = [];
result[key].push(item);
}
return result;
}
export function FolderTreeView({
folders,
documents,
expandedIds,
onToggleExpand,
mentionedDocIds,
onToggleChatMention,
onToggleFolderSelect,
onRenameFolder,
onDeleteFolder,
onMoveFolder,
onCreateFolder,
onPreviewDocument,
onEditDocument,
onDeleteDocument,
onMoveDocument,
onExportDocument,
activeTypes,
searchQuery,
onDropIntoFolder,
onReorderFolder,
}: FolderTreeViewProps) {
const foldersByParent = useMemo(() => groupBy(folders, (f) => f.parentId ?? "root"), [folders]);
const docsByFolder = useMemo(() => groupBy(documents, (d) => d.folderId ?? "root"), [documents]);
const folderChildCounts = useMemo(() => {
const counts: Record<number, number> = {};
for (const f of folders) {
const children = foldersByParent[f.id] ?? [];
const docs = docsByFolder[f.id] ?? [];
counts[f.id] = children.length + docs.length;
}
return counts;
}, [folders, foldersByParent, docsByFolder]);
const [openContextMenuId, setOpenContextMenuId] = useState<string | null>(null);
// Single subscription for rename state — derived boolean passed to each FolderNode
const [renamingFolderId, setRenamingFolderId] = useAtom(renamingFolderIdAtom);
const handleStartRename = useCallback(
(folderId: number) => setRenamingFolderId(folderId),
[setRenamingFolderId]
);
const handleCancelRename = useCallback(() => setRenamingFolderId(null), [setRenamingFolderId]);
const hasDescendantMatch = useMemo(() => {
if (activeTypes.length === 0 && !searchQuery) return null;
const match: Record<number, boolean> = {};
function check(folderId: number): boolean {
if (match[folderId] !== undefined) return match[folderId];
const childDocs = (docsByFolder[folderId] ?? []).some(
(d) => activeTypes.length === 0 || activeTypes.includes(d.document_type as DocumentTypeEnum)
);
if (childDocs) {
match[folderId] = true;
return true;
}
const childFolders = foldersByParent[folderId] ?? [];
for (const cf of childFolders) {
if (check(cf.id)) {
match[folderId] = true;
return true;
}
}
match[folderId] = false;
return false;
}
for (const f of folders) {
check(f.id);
}
return match;
}, [folders, docsByFolder, foldersByParent, activeTypes, searchQuery]);
const folderSelectionStates = useMemo(() => {
const states: Record<number, FolderSelectionState> = {};
const isSelectable = (d: DocumentNodeDoc) =>
d.status?.state !== "pending" && d.status?.state !== "processing";
function compute(folderId: number): { selected: number; total: number } {
const directDocs = (docsByFolder[folderId] ?? []).filter(isSelectable);
let selected = directDocs.filter((d) => mentionedDocIds.has(d.id)).length;
let total = directDocs.length;
for (const child of foldersByParent[folderId] ?? []) {
const sub = compute(child.id);
selected += sub.selected;
total += sub.total;
}
if (total === 0) states[folderId] = "none";
else if (selected === total) states[folderId] = "all";
else if (selected > 0) states[folderId] = "some";
else states[folderId] = "none";
return { selected, total };
}
for (const f of folders) {
if (states[f.id] === undefined) compute(f.id);
}
return states;
}, [folders, docsByFolder, foldersByParent, mentionedDocIds]);
function renderLevel(parentId: number | null, depth: number): React.ReactNode[] {
const key = parentId ?? "root";
const childFolders = (foldersByParent[key] ?? [])
.slice()
.sort((a, b) => a.position.localeCompare(b.position));
const visibleFolders = hasDescendantMatch
? childFolders.filter((f) => hasDescendantMatch[f.id])
: childFolders;
const childDocs = (docsByFolder[key] ?? []).filter(
(d) => activeTypes.length === 0 || activeTypes.includes(d.document_type as DocumentTypeEnum)
);
const nodes: React.ReactNode[] = [];
for (let i = 0; i < visibleFolders.length; i++) {
const f = visibleFolders[i];
const siblingPositions = {
before: i > 0 ? visibleFolders[i - 1].position : null,
after: i < visibleFolders.length - 1 ? visibleFolders[i + 1].position : null,
};
const isAutoExpanded = !!searchQuery && !!hasDescendantMatch?.[f.id];
const isExpanded = expandedIds.has(f.id) || isAutoExpanded;
nodes.push(
<FolderNode
key={`folder-${f.id}`}
folder={f}
depth={depth}
isExpanded={isExpanded}
isRenaming={renamingFolderId === f.id}
childCount={folderChildCounts[f.id] ?? 0}
selectionState={folderSelectionStates[f.id] ?? "none"}
onToggleSelect={onToggleFolderSelect}
onToggleExpand={onToggleExpand}
onRename={onRenameFolder}
onStartRename={handleStartRename}
onCancelRename={handleCancelRename}
onDelete={onDeleteFolder}
onMove={onMoveFolder}
onCreateSubfolder={onCreateFolder}
onDropIntoFolder={onDropIntoFolder}
onReorderFolder={onReorderFolder}
siblingPositions={siblingPositions}
contextMenuOpen={openContextMenuId === `folder-${f.id}`}
onContextMenuOpenChange={(open) => setOpenContextMenuId(open ? `folder-${f.id}` : null)}
/>
);
if (isExpanded) {
nodes.push(...renderLevel(f.id, depth + 1));
}
}
for (const d of childDocs) {
nodes.push(
<DocumentNode
key={`doc-${d.id}`}
doc={d}
depth={depth}
isMentioned={mentionedDocIds.has(d.id)}
onToggleChatMention={onToggleChatMention}
onPreview={onPreviewDocument}
onEdit={onEditDocument}
onDelete={onDeleteDocument}
onMove={onMoveDocument}
onExport={onExportDocument}
contextMenuOpen={openContextMenuId === `doc-${d.id}`}
onContextMenuOpenChange={(open) => setOpenContextMenuId(open ? `doc-${d.id}` : null)}
/>
);
}
return nodes;
}
const treeNodes = renderLevel(null, 0);
if (treeNodes.length === 0 && folders.length === 0 && documents.length === 0) {
return (
<div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-12 text-muted-foreground">
<CirclePlus className="h-10 w-10 rotate-45" />
<p className="text-sm">No documents yet</p>
</div>
);
}
if (treeNodes.length === 0 && (activeTypes.length > 0 || searchQuery)) {
return (
<div className="flex flex-1 flex-col items-center justify-center gap-3 px-4 py-12 text-muted-foreground">
<CirclePlus className="h-10 w-10 rotate-45" />
<p className="text-sm">No matching documents</p>
</div>
);
}
return (
<DndProvider backend={HTML5Backend}>
<div className="flex-1 min-h-0 overflow-y-auto px-2 py-1">{treeNodes}</div>
</DndProvider>
);
}

2
surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx
View file

@ -185,7 +185,7 @@ function DateTimePickerField({
type="time"
value={time}
onChange={handleTimeChange}
className="w-[120px] text-sm shrink-0 pl-1.5 [&::-webkit-calendar-picker-indicator]:order-first [&::-webkit-calendar-picker-indicator]:mr-1"
className="w-[120px] text-sm shrink-0 appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
/>
</div>
);

17
surfsense_web/components/homepage/github-stars-badge.tsx
View file

@ -3,6 +3,7 @@
import { IconBrandGithub } from "@tabler/icons-react";
import { motion, useMotionValue, useSpring } from "motion/react";
import * as React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
// ---------------------------------------------------------------------------
@ -277,12 +278,16 @@ function NavbarGitHubStars({
)}
>
<IconBrandGithub className="h-5 w-5 text-neutral-700 dark:text-neutral-300 shrink-0" />
<AnimatedStarCount
value={isLoading ? 10000 : stars}
itemSize={ITEM_SIZE}
isRolling={isLoading}
className="text-sm font-semibold tabular-nums text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 transition-colors"
/>
{isLoading ? (
<Skeleton className="h-4 w-10" />
) : (
<AnimatedStarCount
value={stars}
itemSize={ITEM_SIZE}
isRolling={false}
className="text-sm font-semibold tabular-nums text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 transition-colors"
/>
)}
</a>
);
}

9
surfsense_web/components/homepage/hero-section.tsx
View file

@ -35,7 +35,14 @@ const HeroCarousel = dynamic(
// Official Google "G" logo with brand colors
const GoogleLogo = ({ className }: { className?: string }) => (
<svg className={className} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<svg
className={className}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Google logo"
>
<title>Google logo</title>
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
fill="#4285F4"

9
surfsense_web/components/homepage/use-cases-grid.tsx
View file

@ -63,9 +63,18 @@ function UseCaseCard({
transition={{ duration: 0.5, ease: "easeOut" }}
className={`group overflow-hidden rounded-2xl border border-neutral-200/60 bg-white shadow-sm transition-shadow duration-300 hover:shadow-xl dark:border-neutral-700/60 dark:bg-neutral-900 ${className ?? ""}`}
>
{/* biome-ignore lint/a11y/useSemanticElements: div wraps img, button would break layout */}
<div
role="button"
tabIndex={0}
className="cursor-pointer overflow-hidden bg-neutral-50 p-2 dark:bg-neutral-950"
onClick={open}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
open();
}
}}
>
<img
src={src}

41
surfsense_web/components/layout/providers/LayoutDataProvider.tsx
View file

@ -20,6 +20,7 @@ import {
teamDialogAtom,
userSettingsDialogAtom,
} from "@/atoms/settings/settings-dialog.atoms";
import { resetTabsAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
import { currentUserAtom } from "@/atoms/user/user-query.atoms";
import { MorePagesDialog } from "@/components/settings/more-pages-dialog";
import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
@ -100,6 +101,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
const { mutateAsync: deleteSearchSpace } = useAtomValue(deleteSearchSpaceMutationAtom);
const currentThreadState = useAtomValue(currentThreadAtom);
const resetCurrentThread = useSetAtom(resetCurrentThreadAtom);
const syncChatTab = useSetAtom(syncChatTabAtom);
const resetTabs = useSetAtom(resetTabsAtom);
// State for handling new chat navigation when router is out of sync
const [pendingNewChat, setPendingNewChat] = useState(false);
@ -264,10 +267,16 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
}
}, [pendingNewChat, params?.chat_id, router, searchSpaceId, resetCurrentThread]);
// Reset transient slide-out panels when switching search spaces.
// Reset transient slide-out panels and tabs when switching search spaces.
// Use a ref to skip the initial mount — only reset when the space actually changes.
const prevSearchSpaceIdRef = useRef(searchSpaceId);
useEffect(() => {
setActiveSlideoutPanel(null);
}, [searchSpaceId]);
if (prevSearchSpaceIdRef.current !== searchSpaceId) {
prevSearchSpaceIdRef.current = searchSpaceId;
setActiveSlideoutPanel(null);
resetTabs();
}
}, [searchSpaceId, resetTabs]);
const searchSpaces: SearchSpace[] = useMemo(() => {
if (!searchSpacesData || !Array.isArray(searchSpacesData)) return [];
@ -307,6 +316,20 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
router,
]);
// Sync current chat route with tab state
useEffect(() => {
const chatId = currentChatId ?? null;
const chatUrl = chatId
? `/dashboard/${searchSpaceId}/new-chat/${chatId}`
: `/dashboard/${searchSpaceId}/new-chat`;
const thread = threadsData?.threads?.find((t) => t.id === chatId);
syncChatTab({
chatId,
title: thread?.title || (chatId ? `Chat ${chatId}` : "New Chat"),
chatUrl,
});
}, [currentChatId, searchSpaceId, threadsData?.threads, syncChatTab]);
// Transform and split chats into private and shared based on visibility
const { myChats, sharedChats } = useMemo(() => {
if (!threadsData?.threads) return { myChats: [], sharedChats: [] };
@ -473,6 +496,17 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
}
}, [searchSpaceToLeave, refetchSearchSpaces, searchSpaceId, router, t]);
const handleTabSwitch = useCallback(
(tab: Tab) => {
if (tab.type === "chat") {
const url = tab.chatUrl || `/dashboard/${searchSpaceId}/new-chat`;
router.push(url);
}
// Document tabs are handled in-place by LayoutShell — no navigation needed
},
[router, searchSpaceId]
);
const handleNavItemClick = useCallback(
(item: NavItem) => {
if (item.url === "#inbox") {
@ -738,6 +772,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
isDocked: isDocumentsDocked,
onDockedChange: setIsDocumentsDocked,
}}
onTabSwitch={handleTabSwitch}
>
<Fragment key={chatResetKey}>{children}</Fragment>
</LayoutShell>

7
surfsense_web/components/layout/ui/header/Header.tsx
View file

@ -8,6 +8,7 @@ import { reportPanelAtom } from "@/atoms/chat/report-panel.atom";
import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import { activeTabAtom } from "@/atoms/tabs/tabs.atom";
import { ChatHeader } from "@/components/new-chat/chat-header";
import { ChatShareButton } from "@/components/new-chat/chat-share-button";
import { Button } from "@/components/ui/button";
@ -23,12 +24,14 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
const pathname = usePathname();
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
const isMobile = useIsMobile();
const activeTab = useAtomValue(activeTabAtom);
const isChatPage = pathname?.includes("/new-chat") ?? false;
const isDocumentTab = activeTab?.type === "document";
const currentThreadState = useAtomValue(currentThreadAtom);
const hasThread = isChatPage && currentThreadState.id !== null;
const hasThread = isChatPage && !isDocumentTab && currentThreadState.id !== null;
const threadForButton: ThreadRecord | null =
hasThread && currentThreadState.id !== null
@ -58,7 +61,7 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
{/* Left side - Mobile menu trigger + Model selector */}
<div className="flex flex-1 items-center gap-2 min-w-0">
{mobileMenuTrigger}
{isChatPage && searchSpaceId && (
{isChatPage && !isDocumentTab && searchSpaceId && (
<ChatHeader searchSpaceId={Number(searchSpaceId)} className="md:h-9 md:px-4 md:text-sm" />
)}
</div>

53
surfsense_web/components/layout/ui/shell/LayoutShell.tsx
View file

@ -1,7 +1,9 @@
"use client";
import { useAtomValue } from "jotai";
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useMemo, useState } from "react";
import { activeTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
import { TooltipProvider } from "@/components/ui/tooltip";
import type { InboxItem } from "@/hooks/use-inbox";
import { useIsMobile } from "@/hooks/use-mobile";
@ -23,6 +25,8 @@ import {
Sidebar,
} from "../sidebar";
import { SidebarSlideOutPanel } from "../sidebar/SidebarSlideOutPanel";
import { DocumentTabContent } from "../tabs/DocumentTabContent";
import { TabBar } from "../tabs/TabBar";
// Per-tab data source
interface TabDataSource {
@ -97,6 +101,44 @@ interface LayoutShellProps {
isDocked?: boolean;
onDockedChange?: (docked: boolean) => void;
};
onTabSwitch?: (tab: Tab) => void;
}
function MainContentPanel({
isChatPage,
onTabSwitch,
onNewChat,
children,
}: {
isChatPage: boolean;
onTabSwitch?: (tab: Tab) => void;
onNewChat?: () => void;
children: React.ReactNode;
}) {
const activeTab = useAtomValue(activeTabAtom);
const isDocumentTab = activeTab?.type === "document";
return (
<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
<TabBar onTabSwitch={onTabSwitch} onNewChat={onNewChat} />
<Header />
{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
<div className="flex-1 overflow-hidden">
<DocumentTabContent
key={activeTab.documentId}
documentId={activeTab.documentId}
searchSpaceId={activeTab.searchSpaceId}
title={activeTab.title}
/>
</div>
) : (
<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
{children}
</div>
)}
</div>
);
}
export function LayoutShell({
@ -138,6 +180,7 @@ export function LayoutShell({
allSharedChatsPanel,
allPrivateChatsPanel,
documentsPanel,
onTabSwitch,
}: LayoutShellProps) {
const isMobile = useIsMobile();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@ -455,13 +498,9 @@ export function LayoutShell({
)}
{/* Main content panel */}
<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
<Header />
<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
{children}
</div>
</div>
<MainContentPanel isChatPage={isChatPage} onTabSwitch={onTabSwitch} onNewChat={onNewChat}>
{children}
</MainContentPanel>
{/* Right panel — tabbed Sources/Report (desktop only) */}
{documentsPanel && (

7
surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx
View file

@ -396,10 +396,13 @@ export function AllPrivateChatsSidebarContent({
variant="ghost"
size="icon"
className={cn(
"h-6 w-6 shrink-0",
"h-6 w-6 shrink-0 hover:bg-transparent",
isMobile
? "opacity-0 pointer-events-none absolute"
: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
: openDropdownId === thread.id
? "opacity-100"
: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
openDropdownId === thread.id && "bg-accent hover:bg-accent",
"transition-opacity"
)}
disabled={isBusy}

7
surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx
View file

@ -396,10 +396,13 @@ export function AllSharedChatsSidebarContent({
variant="ghost"
size="icon"
className={cn(
"h-6 w-6 shrink-0",
"h-6 w-6 shrink-0 hover:bg-transparent",
isMobile
? "opacity-0 pointer-events-none absolute"
: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
: openDropdownId === thread.id
? "opacity-100"
: "md:opacity-0 md:group-hover:opacity-100 md:focus:opacity-100",
openDropdownId === thread.id && "bg-accent hover:bg-accent",
"transition-opacity"
)}
disabled={isBusy}

11
surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx
View file

@ -79,14 +79,21 @@ export function ChatListItem({
: "bg-gradient-to-l from-sidebar from-60% to-transparent group-hover/item:from-accent",
isMobile
? "opacity-0"
: isActive
: isActive || dropdownOpen
? "opacity-100"
: "opacity-0 group-hover/item:opacity-100"
)}
>
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="pointer-events-auto h-6 w-6">
<Button
variant="ghost"
size="icon"
className={cn(
"pointer-events-auto h-6 w-6 hover:bg-transparent",
dropdownOpen && "bg-accent hover:bg-accent"
)}
>
<MoreHorizontal className="h-3.5 w-3.5 text-muted-foreground" />
<span className="sr-only">{t("more_options")}</span>
</Button>

600
surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx
View file

@ -1,31 +1,51 @@
"use client";
import { useQuery } from "@rocicorp/zero/react";
import { useAtom, useAtomValue, useSetAtom } from "jotai";
import { ChevronLeft, ChevronRight, Unplug } from "lucide-react";
import { ChevronLeft, ChevronRight, Trash2, Unplug } from "lucide-react";
import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { DocumentsFilters } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters";
import {
DocumentsTableShell,
type SortKey,
} from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell";
import { sidebarSelectedDocumentsAtom } from "@/atoms/chat/mentioned-documents.atom";
import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
import { deleteDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
import { expandedFolderIdsAtom } from "@/atoms/documents/folder.atoms";
import { agentCreatedDocumentsAtom } from "@/atoms/documents/ui.atoms";
import { openDocumentTabAtom } from "@/atoms/tabs/tabs.atom";
import { CreateFolderDialog } from "@/components/documents/CreateFolderDialog";
import type { DocumentNodeDoc } from "@/components/documents/DocumentNode";
import type { FolderDisplay } from "@/components/documents/FolderNode";
import { FolderPickerDialog } from "@/components/documents/FolderPickerDialog";
import { FolderTreeView } from "@/components/documents/FolderTreeView";
import { EXPORT_FILE_EXTENSIONS } from "@/components/shared/ExportMenuItems";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import type { DocumentTypeEnum } from "@/contracts/types/document.types";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import { useDocumentSearch } from "@/hooks/use-document-search";
import { useDocuments } from "@/hooks/use-documents";
import { useMediaQuery } from "@/hooks/use-media-query";
import { foldersApiService } from "@/lib/apis/folders-api.service";
import { authenticatedFetch } from "@/lib/auth-utils";
import { queries } from "@/zero/queries/index";
import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
const NON_DELETABLE_DOCUMENT_TYPES: readonly string[] = ["SURFSENSE_DOCS"];
const SHOWCASE_CONNECTORS = [
{ type: "GOOGLE_DRIVE_CONNECTOR", label: "Google Drive" },
{ type: "GOOGLE_GMAIL_CONNECTOR", label: "Gmail" },
@ -63,19 +83,283 @@ export function DocumentsSidebar({
const isMobile = !useMediaQuery("(min-width: 640px)");
const searchSpaceId = Number(params.search_space_id);
const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
const openDocumentTab = useSetAtom(openDocumentTabAtom);
const { data: connectors } = useAtomValue(connectorsAtom);
const connectorCount = connectors?.length ?? 0;
const [search, setSearch] = useState("");
const debouncedSearch = useDebouncedValue(search, 250);
const [activeTypes, setActiveTypes] = useState<DocumentTypeEnum[]>([]);
const [sortKey, setSortKey] = useState<SortKey>("created_at");
const [sortDesc, setSortDesc] = useState(true);
const { mutateAsync: deleteDocumentMutation } = useAtomValue(deleteDocumentMutationAtom);
const [sidebarDocs, setSidebarDocs] = useAtom(sidebarSelectedDocumentsAtom);
const mentionedDocIds = useMemo(() => new Set(sidebarDocs.map((d) => d.id)), [sidebarDocs]);
// Folder state
const [expandedFolderMap, setExpandedFolderMap] = useAtom(expandedFolderIdsAtom);
const expandedIds = useMemo(
() => new Set(expandedFolderMap[searchSpaceId] ?? []),
[expandedFolderMap, searchSpaceId]
);
const toggleFolderExpand = useCallback(
(folderId: number) => {
setExpandedFolderMap((prev) => {
const current = new Set(prev[searchSpaceId] ?? []);
if (current.has(folderId)) current.delete(folderId);
else current.add(folderId);
return { ...prev, [searchSpaceId]: [...current] };
});
},
[searchSpaceId, setExpandedFolderMap]
);
// Zero queries for tree data
const [zeroFolders] = useQuery(queries.folders.bySpace({ searchSpaceId }));
const [zeroAllDocs] = useQuery(queries.documents.bySpace({ searchSpaceId }));
const [agentCreatedDocs, setAgentCreatedDocs] = useAtom(agentCreatedDocumentsAtom);
const treeFolders: FolderDisplay[] = useMemo(
() =>
(zeroFolders ?? []).map((f) => ({
id: f.id,
name: f.name,
position: f.position,
parentId: f.parentId ?? null,
searchSpaceId: f.searchSpaceId,
})),
[zeroFolders]
);
const treeDocuments: DocumentNodeDoc[] = useMemo(() => {
const zeroDocs = (zeroAllDocs ?? [])
.filter((d) => d.title && d.title.trim() !== "")
.map((d) => ({
id: d.id,
title: d.title,
document_type: d.documentType,
folderId: (d as { folderId?: number | null }).folderId ?? null,
status: d.status as { state: string; reason?: string | null } | undefined,
}));
const zeroIds = new Set(zeroDocs.map((d) => d.id));
const pendingAgentDocs = agentCreatedDocs
.filter((d) => d.searchSpaceId === searchSpaceId && !zeroIds.has(d.id))
.map((d) => ({
id: d.id,
title: d.title,
document_type: d.documentType,
folderId: d.folderId ?? null,
status: { state: "ready" } as { state: string; reason?: string | null },
}));
return [...pendingAgentDocs, ...zeroDocs];
}, [zeroAllDocs, agentCreatedDocs, searchSpaceId]);
// Prune agent-created docs once Zero has caught up
useEffect(() => {
if (!zeroAllDocs?.length || !agentCreatedDocs.length) return;
const zeroIds = new Set(zeroAllDocs.map((d) => d.id));
const remaining = agentCreatedDocs.filter((d) => !zeroIds.has(d.id));
if (remaining.length < agentCreatedDocs.length) {
setAgentCreatedDocs(remaining);
}
}, [zeroAllDocs, agentCreatedDocs, setAgentCreatedDocs]);
const foldersByParent = useMemo(() => {
const map: Record<string, FolderDisplay[]> = {};
for (const f of treeFolders) {
const key = String(f.parentId ?? "root");
if (!map[key]) map[key] = [];
map[key].push(f);
}
return map;
}, [treeFolders]);
// Folder actions
const [folderPickerOpen, setFolderPickerOpen] = useState(false);
const [folderPickerTarget, setFolderPickerTarget] = useState<{
type: "folder" | "document";
id: number;
disabledIds?: Set<number>;
} | null>(null);
// Create-folder dialog state
const [createFolderOpen, setCreateFolderOpen] = useState(false);
const [createFolderParentId, setCreateFolderParentId] = useState<number | null>(null);
const createFolderParentName = useMemo(() => {
if (createFolderParentId === null) return null;
return treeFolders.find((f) => f.id === createFolderParentId)?.name ?? null;
}, [createFolderParentId, treeFolders]);
const handleCreateFolder = useCallback((parentId: number | null) => {
setCreateFolderParentId(parentId);
setCreateFolderOpen(true);
}, []);
const handleCreateFolderConfirm = useCallback(
async (name: string) => {
try {
await foldersApiService.createFolder({
name,
parent_id: createFolderParentId,
search_space_id: searchSpaceId,
});
toast.success("Folder created");
if (createFolderParentId !== null) {
setExpandedFolderMap((prev) => {
const current = new Set(prev[searchSpaceId] ?? []);
current.add(createFolderParentId);
return { ...prev, [searchSpaceId]: [...current] };
});
}
} catch (e: unknown) {
toast.error((e as Error)?.message || "Failed to create folder");
}
},
[createFolderParentId, searchSpaceId, setExpandedFolderMap]
);
const handleRenameFolder = useCallback(async (folder: FolderDisplay, newName: string) => {
try {
await foldersApiService.updateFolder(folder.id, { name: newName });
toast.success("Folder renamed");
} catch (e: unknown) {
toast.error((e as Error)?.message || "Failed to rename folder");
}
}, []);
const handleDeleteFolder = useCallback(async (folder: FolderDisplay) => {
if (!confirm(`Delete folder "${folder.name}" and all its contents?`)) return;
try {
await foldersApiService.deleteFolder(folder.id);
toast.success("Folder deleted");
} catch (e: unknown) {
toast.error((e as Error)?.message || "Failed to delete folder");
}
}, []);
const handleMoveFolder = useCallback(
(folder: FolderDisplay) => {
const subtreeIds = new Set<number>();
function collectSubtree(id: number) {
subtreeIds.add(id);
for (const child of foldersByParent[String(id)] ?? []) {
collectSubtree(child.id);
}
}
collectSubtree(folder.id);
setFolderPickerTarget({
type: "folder",
id: folder.id,
disabledIds: subtreeIds,
});
setFolderPickerOpen(true);
},
[foldersByParent]
);
const handleMoveDocument = useCallback((doc: DocumentNodeDoc) => {
setFolderPickerTarget({ type: "document", id: doc.id });
setFolderPickerOpen(true);
}, []);
const handleExportDocument = useCallback(
async (doc: DocumentNodeDoc, format: string) => {
const safeTitle =
doc.title
.replace(/[^a-zA-Z0-9 _-]/g, "_")
.trim()
.slice(0, 80) || "document";
const ext = EXPORT_FILE_EXTENSIONS[format] ?? format;
try {
const response = await authenticatedFetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${doc.id}/export?format=${format}`,
{ method: "GET" }
);
if (!response.ok) {
const errorData = await response.json().catch(() => ({ detail: "Export failed" }));
throw new Error(errorData.detail || "Export failed");
}
const blob = await response.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${safeTitle}.${ext}`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
} catch (err) {
console.error(`Export ${format} failed:`, err);
toast.error(err instanceof Error ? err.message : `Export failed`);
}
},
[searchSpaceId]
);
const handleFolderPickerSelect = useCallback(
async (targetFolderId: number | null) => {
if (!folderPickerTarget) return;
try {
if (folderPickerTarget.type === "folder") {
await foldersApiService.moveFolder(folderPickerTarget.id, {
new_parent_id: targetFolderId,
});
toast.success("Folder moved");
} else {
await foldersApiService.moveDocument(folderPickerTarget.id, {
folder_id: targetFolderId,
});
toast.success("Document moved");
}
} catch (e: unknown) {
toast.error((e as Error)?.message || "Failed to move item");
}
setFolderPickerTarget(null);
},
[folderPickerTarget]
);
const handleDropIntoFolder = useCallback(
async (itemType: "folder" | "document", itemId: number, targetFolderId: number | null) => {
try {
if (itemType === "folder") {
await foldersApiService.moveFolder(itemId, {
new_parent_id: targetFolderId,
});
toast.success("Folder moved");
} else {
await foldersApiService.moveDocument(itemId, {
folder_id: targetFolderId,
});
toast.success("Document moved");
}
} catch (e: unknown) {
toast.error((e as Error)?.message || "Failed to move item");
}
},
[]
);
const handleReorderFolder = useCallback(
async (folderId: number, beforePos: string | null, afterPos: string | null) => {
try {
await foldersApiService.reorderFolder(folderId, {
before_position: beforePos,
after_position: afterPos,
});
} catch (e: unknown) {
toast.error((e as Error)?.message || "Failed to reorder folder");
}
},
[]
);
const handleToggleChatMention = useCallback(
(doc: { id: number; title: string; document_type: string }, isMentioned: boolean) => {
if (isMentioned) {
@ -93,44 +377,115 @@ export function DocumentsSidebar({
[setSidebarDocs]
);
const isSearchMode = !!debouncedSearch.trim();
const handleToggleFolderSelect = useCallback(
(folderId: number, selectAll: boolean) => {
function collectSubtreeDocs(parentId: number): DocumentNodeDoc[] {
const directDocs = (treeDocuments ?? []).filter(
(d) =>
d.folderId === parentId &&
d.status?.state !== "pending" &&
d.status?.state !== "processing"
);
const childFolders = foldersByParent[String(parentId)] ?? [];
const descendantDocs = childFolders.flatMap((cf) => collectSubtreeDocs(cf.id));
return [...directDocs, ...descendantDocs];
}
const {
documents: realtimeDocuments,
typeCounts: realtimeTypeCounts,
loading: realtimeLoading,
loadingMore: realtimeLoadingMore,
hasMore: realtimeHasMore,
loadMore: realtimeLoadMore,
removeItems: realtimeRemoveItems,
error: realtimeError,
} = useDocuments(searchSpaceId, activeTypes, sortKey, sortDesc ? "desc" : "asc");
const subtreeDocs = collectSubtreeDocs(folderId);
if (subtreeDocs.length === 0) return;
const {
documents: searchDocuments,
loading: searchLoading,
loadingMore: searchLoadingMore,
hasMore: searchHasMore,
loadMore: searchLoadMore,
error: searchError,
removeItems: searchRemoveItems,
} = useDocumentSearch(searchSpaceId, debouncedSearch, activeTypes, isSearchMode && open);
if (selectAll) {
setSidebarDocs((prev) => {
const existingIds = new Set(prev.map((d) => d.id));
const newDocs = subtreeDocs
.filter((d) => !existingIds.has(d.id))
.map((d) => ({
id: d.id,
title: d.title,
document_type: d.document_type as DocumentTypeEnum,
}));
return newDocs.length > 0 ? [...prev, ...newDocs] : prev;
});
} else {
const idsToRemove = new Set(subtreeDocs.map((d) => d.id));
setSidebarDocs((prev) => prev.filter((d) => !idsToRemove.has(d.id)));
}
},
[treeDocuments, foldersByParent, setSidebarDocs]
);
const displayDocs = isSearchMode ? searchDocuments : realtimeDocuments;
const loading = isSearchMode ? searchLoading : realtimeLoading;
const error = isSearchMode ? searchError : !!realtimeError;
const hasMore = isSearchMode ? searchHasMore : realtimeHasMore;
const loadingMore = isSearchMode ? searchLoadingMore : realtimeLoadingMore;
const onLoadMore = isSearchMode ? searchLoadMore : realtimeLoadMore;
const searchFilteredDocuments = useMemo(() => {
const query = debouncedSearch.trim().toLowerCase();
if (!query) return treeDocuments;
return treeDocuments.filter((d) => d.title.toLowerCase().includes(query));
}, [treeDocuments, debouncedSearch]);
const onToggleType = (type: DocumentTypeEnum, checked: boolean) => {
const typeCounts = useMemo(() => {
const counts: Partial<Record<string, number>> = {};
for (const d of treeDocuments) {
counts[d.document_type] = (counts[d.document_type] || 0) + 1;
}
return counts;
}, [treeDocuments]);
const deletableSelectedIds = useMemo(() => {
const treeDocMap = new Map(treeDocuments.map((d) => [d.id, d]));
return sidebarDocs
.filter((doc) => {
const fullDoc = treeDocMap.get(doc.id);
if (!fullDoc) return false;
const state = fullDoc.status?.state ?? "ready";
return (
state !== "pending" &&
state !== "processing" &&
!NON_DELETABLE_DOCUMENT_TYPES.includes(doc.document_type)
);
})
.map((doc) => doc.id);
}, [sidebarDocs, treeDocuments]);
const [bulkDeleteConfirmOpen, setBulkDeleteConfirmOpen] = useState(false);
const [isBulkDeleting, setIsBulkDeleting] = useState(false);
const handleBulkDeleteSelected = useCallback(async () => {
if (deletableSelectedIds.length === 0) return;
setIsBulkDeleting(true);
try {
const results = await Promise.allSettled(
deletableSelectedIds.map(async (id) => {
await deleteDocumentMutation({ id });
return id;
})
);
const successIds = results
.filter((r): r is PromiseFulfilledResult<number> => r.status === "fulfilled")
.map((r) => r.value);
const failed = results.length - successIds.length;
if (successIds.length > 0) {
setSidebarDocs((prev) => {
const idSet = new Set(successIds);
return prev.filter((d) => !idSet.has(d.id));
});
toast.success(`Deleted ${successIds.length} document${successIds.length !== 1 ? "s" : ""}`);
}
if (failed > 0) {
toast.error(`Failed to delete ${failed} document${failed !== 1 ? "s" : ""}`);
}
} catch {
toast.error("Failed to delete documents");
}
setIsBulkDeleting(false);
setBulkDeleteConfirmOpen(false);
}, [deletableSelectedIds, deleteDocumentMutation, setSidebarDocs]);
const onToggleType = useCallback((type: DocumentTypeEnum, checked: boolean) => {
setActiveTypes((prev) => {
if (checked) {
return prev.includes(type) ? prev : [...prev, type];
}
return prev.filter((t) => t !== type);
});
};
}, []);
const handleDeleteDocument = useCallback(
async (id: number): Promise<boolean> => {
@ -138,69 +493,15 @@ export function DocumentsSidebar({
await deleteDocumentMutation({ id });
toast.success(t("delete_success") || "Document deleted");
setSidebarDocs((prev) => prev.filter((d) => d.id !== id));
realtimeRemoveItems([id]);
if (isSearchMode) {
searchRemoveItems([id]);
}
return true;
} catch (e) {
console.error("Error deleting document:", e);
return false;
}
},
[
deleteDocumentMutation,
isSearchMode,
t,
searchRemoveItems,
realtimeRemoveItems,
setSidebarDocs,
]
[deleteDocumentMutation, t, setSidebarDocs]
);
const handleBulkDeleteDocuments = useCallback(
async (ids: number[]): Promise<{ success: number; failed: number }> => {
const successIds: number[] = [];
const results = await Promise.allSettled(
ids.map(async (id) => {
await deleteDocumentMutation({ id });
successIds.push(id);
})
);
if (successIds.length > 0) {
setSidebarDocs((prev) => prev.filter((d) => !successIds.includes(d.id)));
realtimeRemoveItems(successIds);
if (isSearchMode) {
searchRemoveItems(successIds);
}
}
const success = results.filter((r) => r.status === "fulfilled").length;
const failed = results.filter((r) => r.status === "rejected").length;
return { success, failed };
},
[deleteDocumentMutation, isSearchMode, searchRemoveItems, realtimeRemoveItems, setSidebarDocs]
);
const sortKeyRef = useRef(sortKey);
const sortDescRef = useRef(sortDesc);
sortKeyRef.current = sortKey;
sortDescRef.current = sortDesc;
const handleSortChange = useCallback((key: SortKey) => {
const currentKey = sortKeyRef.current;
const currentDesc = sortDescRef.current;
if (currentKey === key && currentDesc) {
setSortKey("created_at");
setSortDesc(true);
} else if (currentKey === key) {
setSortDesc(true);
} else {
setSortKey(key);
setSortDesc(false);
}
}, []);
useEffect(() => {
const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape" && open) {
@ -335,32 +636,115 @@ export function DocumentsSidebar({
<div className="flex-1 min-h-0 overflow-x-hidden pt-0 flex flex-col">
<div className="px-4 pb-2">
<DocumentsFilters
typeCounts={realtimeTypeCounts}
typeCounts={typeCounts}
onSearch={setSearch}
searchValue={search}
onToggleType={onToggleType}
activeTypes={activeTypes}
onCreateFolder={() => handleCreateFolder(null)}
/>
</div>
<DocumentsTableShell
documents={displayDocs}
loading={!!loading}
error={!!error}
sortKey={sortKey}
sortDesc={sortDesc}
onSortChange={handleSortChange}
deleteDocument={handleDeleteDocument}
bulkDeleteDocuments={handleBulkDeleteDocuments}
searchSpaceId={String(searchSpaceId)}
hasMore={hasMore}
loadingMore={loadingMore}
onLoadMore={onLoadMore}
{deletableSelectedIds.length > 0 && (
<div className="shrink-0 flex items-center justify-center px-4 py-1.5 animate-in fade-in duration-150">
<button
type="button"
onClick={() => setBulkDeleteConfirmOpen(true)}
className="flex items-center gap-1.5 px-3 py-1 rounded-md bg-destructive text-destructive-foreground shadow-sm text-xs font-medium hover:bg-destructive/90 transition-colors"
>
<Trash2 size={12} />
Delete {deletableSelectedIds.length}{" "}
{deletableSelectedIds.length === 1 ? "item" : "items"}
</button>
</div>
)}
<FolderTreeView
folders={treeFolders}
documents={searchFilteredDocuments}
expandedIds={expandedIds}
onToggleExpand={toggleFolderExpand}
mentionedDocIds={mentionedDocIds}
onToggleChatMention={handleToggleChatMention}
isSearchMode={isSearchMode || activeTypes.length > 0}
onToggleFolderSelect={handleToggleFolderSelect}
onRenameFolder={handleRenameFolder}
onDeleteFolder={handleDeleteFolder}
onMoveFolder={handleMoveFolder}
onCreateFolder={handleCreateFolder}
searchQuery={debouncedSearch.trim() || undefined}
onPreviewDocument={(doc) => {
openDocumentTab({
documentId: doc.id,
searchSpaceId,
title: doc.title,
});
}}
onEditDocument={(doc) => {
openDocumentTab({
documentId: doc.id,
searchSpaceId,
title: doc.title,
});
}}
onDeleteDocument={(doc) => handleDeleteDocument(doc.id)}
onMoveDocument={handleMoveDocument}
onExportDocument={handleExportDocument}
activeTypes={activeTypes}
onDropIntoFolder={handleDropIntoFolder}
onReorderFolder={handleReorderFolder}
/>
</div>
<FolderPickerDialog
open={folderPickerOpen}
onOpenChange={setFolderPickerOpen}
folders={treeFolders}
title={folderPickerTarget?.type === "folder" ? "Move folder to" : "Move document to"}
description="Select a destination folder, or choose Root to move to the top level."
disabledFolderIds={folderPickerTarget?.disabledIds}
onSelect={handleFolderPickerSelect}
/>
<CreateFolderDialog
open={createFolderOpen}
onOpenChange={setCreateFolderOpen}
parentFolderName={createFolderParentName}
onConfirm={handleCreateFolderConfirm}
/>
<AlertDialog
open={bulkDeleteConfirmOpen}
onOpenChange={(open) => !open && !isBulkDeleting && setBulkDeleteConfirmOpen(false)}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Delete {deletableSelectedIds.length} document
{deletableSelectedIds.length !== 1 ? "s" : ""}?
</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.{" "}
{deletableSelectedIds.length === 1
? "This document"
: `These ${deletableSelectedIds.length} documents`}{" "}
will be permanently deleted from your search space.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isBulkDeleting}>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.preventDefault();
handleBulkDeleteSelected();
}}
disabled={isBulkDeleting}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
{isBulkDeleting ? <Spinner size="sm" /> : "Delete"}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
);

240
surfsense_web/components/layout/ui/tabs/DocumentTabContent.tsx Normal file
View file

@ -0,0 +1,240 @@
"use client";
import { AlertCircle, Pencil } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { PlateEditor } from "@/components/editor/plate-editor";
import { MarkdownViewer } from "@/components/markdown-viewer";
import { Button } from "@/components/ui/button";
import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
interface DocumentContent {
document_id: number;
title: string;
document_type?: string;
source_markdown: string;
}
function DocumentSkeleton() {
return (
<div className="space-y-6 p-8 max-w-4xl mx-auto">
<div className="h-8 w-3/4 rounded-md bg-muted/60 animate-pulse" />
<div className="space-y-3">
<div className="h-4 w-full rounded-md bg-muted/60 animate-pulse" />
<div className="h-4 w-[95%] rounded-md bg-muted/60 animate-pulse [animation-delay:100ms]" />
<div className="h-4 w-[88%] rounded-md bg-muted/60 animate-pulse [animation-delay:200ms]" />
<div className="h-4 w-[60%] rounded-md bg-muted/60 animate-pulse [animation-delay:300ms]" />
</div>
<div className="h-6 w-2/5 rounded-md bg-muted/60 animate-pulse [animation-delay:400ms]" />
<div className="space-y-3">
<div className="h-4 w-full rounded-md bg-muted/60 animate-pulse [animation-delay:500ms]" />
<div className="h-4 w-[92%] rounded-md bg-muted/60 animate-pulse [animation-delay:600ms]" />
<div className="h-4 w-[75%] rounded-md bg-muted/60 animate-pulse [animation-delay:700ms]" />
</div>
</div>
);
}
interface DocumentTabContentProps {
documentId: number;
searchSpaceId: number;
title?: string;
}
export function DocumentTabContent({ documentId, searchSpaceId, title }: DocumentTabContentProps) {
const [doc, setDoc] = useState<DocumentContent | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [isEditing, setIsEditing] = useState(false);
const [saving, setSaving] = useState(false);
const [editedMarkdown, setEditedMarkdown] = useState<string | null>(null);
const markdownRef = useRef<string>("");
const initialLoadDone = useRef(false);
const changeCountRef = useRef(0);
useEffect(() => {
let cancelled = false;
setIsLoading(true);
setError(null);
setDoc(null);
setIsEditing(false);
setEditedMarkdown(null);
initialLoadDone.current = false;
changeCountRef.current = 0;
const fetchContent = async () => {
const token = getBearerToken();
if (!token) {
redirectToLogin();
return;
}
try {
const response = await authenticatedFetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/editor-content`,
{ method: "GET" }
);
if (cancelled) return;
if (!response.ok) {
const errorData = await response
.json()
.catch(() => ({ detail: "Failed to fetch document" }));
throw new Error(errorData.detail || "Failed to fetch document");
}
const data = await response.json();
if (data.source_markdown === undefined || data.source_markdown === null) {
setError("This document does not have viewable content.");
setIsLoading(false);
return;
}
markdownRef.current = data.source_markdown;
setDoc(data);
initialLoadDone.current = true;
} catch (err) {
if (cancelled) return;
console.error("Error fetching document:", err);
setError(err instanceof Error ? err.message : "Failed to fetch document");
} finally {
if (!cancelled) setIsLoading(false);
}
};
fetchContent();
return () => {
cancelled = true;
};
}, [documentId, searchSpaceId]);
const handleMarkdownChange = useCallback((md: string) => {
markdownRef.current = md;
if (!initialLoadDone.current) return;
changeCountRef.current += 1;
if (changeCountRef.current <= 1) return;
setEditedMarkdown(md);
}, []);
const handleSave = useCallback(async () => {
const token = getBearerToken();
if (!token) {
toast.error("Please login to save");
redirectToLogin();
return;
}
setSaving(true);
try {
const response = await authenticatedFetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/save`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ source_markdown: markdownRef.current }),
}
);
if (!response.ok) {
const errorData = await response
.json()
.catch(() => ({ detail: "Failed to save document" }));
throw new Error(errorData.detail || "Failed to save document");
}
setDoc((prev) => (prev ? { ...prev, source_markdown: markdownRef.current } : prev));
setEditedMarkdown(null);
toast.success("Document saved! Reindexing in background...");
} catch (err) {
console.error("Error saving document:", err);
toast.error(err instanceof Error ? err.message : "Failed to save document");
} finally {
setSaving(false);
}
}, [documentId, searchSpaceId]);
if (isLoading) return <DocumentSkeleton />;
if (error || !doc) {
return (
<div className="flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center">
<AlertCircle className="size-10 text-destructive" />
<div>
<p className="font-medium text-foreground text-lg">Failed to load document</p>
<p className="text-sm text-muted-foreground mt-1">
{error || "An unknown error occurred"}
</p>
</div>
</div>
);
}
if (isEditing) {
return (
<div className="flex flex-col h-full overflow-hidden">
<div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
<div className="flex-1 min-w-0">
<h1 className="text-base font-semibold truncate">{doc.title || title || "Untitled"}</h1>
{editedMarkdown !== null && (
<p className="text-xs text-muted-foreground">Unsaved changes</p>
)}
</div>
<Button
variant="outline"
size="sm"
onClick={() => {
setIsEditing(false);
setEditedMarkdown(null);
changeCountRef.current = 0;
}}
>
Done editing
</Button>
</div>
<div className="flex-1 overflow-hidden">
<PlateEditor
key={`edit-${documentId}`}
preset="full"
markdown={doc.source_markdown}
onMarkdownChange={handleMarkdownChange}
readOnly={false}
placeholder="Start writing..."
editorVariant="default"
onSave={handleSave}
hasUnsavedChanges={editedMarkdown !== null}
isSaving={saving}
defaultEditing={true}
/>
</div>
</div>
);
}
return (
<div className="flex flex-col h-full overflow-hidden">
<div className="flex items-center justify-between px-6 py-3 border-b shrink-0">
<h1 className="text-base font-semibold truncate flex-1 min-w-0">
{doc.title || title || "Untitled"}
</h1>
{doc.document_type === "NOTE" && (
<Button
variant="outline"
size="sm"
onClick={() => setIsEditing(true)}
className="gap-1.5"
>
<Pencil className="size-3.5" />
Edit
</Button>
)}
</div>
<div className="flex-1 overflow-auto">
<div className="max-w-4xl mx-auto px-6 py-6">
<MarkdownViewer content={doc.source_markdown} />
</div>
</div>
</div>
);
}

120
surfsense_web/components/layout/ui/tabs/TabBar.tsx Normal file
View file

@ -0,0 +1,120 @@
"use client";
import { useAtomValue, useSetAtom } from "jotai";
import { FileText, MessageSquare, Plus, X } from "lucide-react";
import { useCallback, useEffect, useRef } from "react";
import {
activeTabIdAtom,
closeTabAtom,
switchTabAtom,
type Tab,
tabsAtom,
} from "@/atoms/tabs/tabs.atom";
import { cn } from "@/lib/utils";
interface TabBarProps {
onTabSwitch?: (tab: Tab) => void;
onNewChat?: () => void;
className?: string;
}
export function TabBar({ onTabSwitch, onNewChat, className }: TabBarProps) {
const tabs = useAtomValue(tabsAtom);
const activeTabId = useAtomValue(activeTabIdAtom);
const switchTab = useSetAtom(switchTabAtom);
const closeTab = useSetAtom(closeTabAtom);
const scrollRef = useRef<HTMLDivElement>(null);
const handleTabClick = useCallback(
(tab: Tab) => {
if (tab.id === activeTabId) return;
switchTab(tab.id);
onTabSwitch?.(tab);
},
[activeTabId, switchTab, onTabSwitch]
);
const handleTabClose = useCallback(
(e: React.MouseEvent, tabId: string) => {
e.stopPropagation();
const fallback = closeTab(tabId);
if (fallback) {
onTabSwitch?.(fallback);
}
},
[closeTab, onTabSwitch]
);
// Scroll active tab into view
useEffect(() => {
if (!scrollRef.current || !activeTabId) return;
const activeEl = scrollRef.current.querySelector(`[data-tab-id="${activeTabId}"]`);
if (activeEl) {
activeEl.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
}
}, [activeTabId]);
// Only show tab bar when there's more than one tab
if (tabs.length <= 1) return null;
return (
<div className={cn("flex items-center shrink-0 border-b bg-main-panel", className)}>
<div ref={scrollRef} className="flex items-center flex-1 overflow-x-auto scrollbar-none">
{tabs.map((tab) => {
const isActive = tab.id === activeTabId;
const Icon = tab.type === "document" ? FileText : MessageSquare;
return (
<button
key={tab.id}
type="button"
data-tab-id={tab.id}
onClick={() => handleTabClick(tab)}
className={cn(
"group relative flex items-center gap-1.5 px-3 h-9 min-w-0 max-w-[200px] text-xs font-medium border-r transition-colors shrink-0",
isActive
? "bg-main-panel text-foreground"
: "bg-muted/30 text-muted-foreground hover:bg-muted/60 hover:text-foreground"
)}
>
{isActive && <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary" />}
<Icon className="size-3.5 shrink-0" />
<span className="truncate">{tab.title}</span>
{/* biome-ignore lint/a11y/useSemanticElements: cannot nest button inside button */}
<span
role="button"
tabIndex={0}
onClick={(e) => handleTabClose(e, tab.id)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleTabClose(e as unknown as React.MouseEvent, tab.id);
}
}}
className={cn(
"ml-auto shrink-0 rounded-sm p-0.5 transition-colors",
isActive
? "opacity-60 hover:opacity-100 hover:bg-muted"
: "opacity-0 group-hover:opacity-60 hover:opacity-100! hover:bg-muted"
)}
>
<X className="size-3" />
</span>
</button>
);
})}
</div>
{onNewChat && (
<button
type="button"
onClick={onNewChat}
className="flex items-center justify-center size-9 shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted/60 transition-colors"
title="New Chat"
>
<Plus className="size-3.5" />
</button>
)}
</div>
);
}

4
surfsense_web/components/new-chat/chat-share-button.tsx
View file

@ -199,7 +199,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
className={cn(
"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
"hover:bg-accent/50 dark:hover:bg-white/10 cursor-pointer",
"focus:outline-none",
"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
isSelected && "bg-accent/80 dark:bg-white/10"
)}
>
@ -248,7 +248,7 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
className={cn(
"w-full flex items-center gap-2.5 px-2.5 py-2 rounded-md transition-all",
"hover:bg-accent/50 dark:hover:bg-white/10 cursor-pointer",
"focus:outline-none",
"focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
"disabled:opacity-50 disabled:cursor-not-allowed"
)}
>

52
surfsense_web/components/onboarding-tour.tsx
View file

@ -7,10 +7,10 @@ import { useTheme } from "next-themes";
import { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import { currentUserAtom } from "@/atoms/user/user-query.atoms";
import { useIsMobile } from "@/hooks/use-mobile";
import { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
import { fetchThreads } from "@/lib/chat/thread-persistence";
interface TourStep {
@ -160,6 +160,8 @@ function TourTooltip({
onPrev,
onSkip,
isDarkMode,
shouldAnimate,
onAnimationEnd,
}: {
step: TourStep;
stepIndex: number;
@ -170,23 +172,12 @@ function TourTooltip({
onPrev: () => void;
onSkip: () => void;
isDarkMode: boolean;
shouldAnimate: boolean;
onAnimationEnd: () => void;
}) {
const [contentKey, setContentKey] = useState(stepIndex);
const [shouldAnimate, setShouldAnimate] = useState(false);
const prevStepIndexRef = useRef(stepIndex);
const isLastStep = stepIndex === totalSteps - 1;
const isFirstStep = stepIndex === 0;
// Update content key when step changes to trigger animation
// Only animate if stepIndex actually changes (not on initial mount)
useEffect(() => {
if (prevStepIndexRef.current !== stepIndex) {
setShouldAnimate(true);
setContentKey(stepIndex);
prevStepIndexRef.current = stepIndex;
}
}, [stepIndex]);
const bgColor = isDarkMode ? "#27272a" : "#ffffff";
const textColor = isDarkMode ? "#ffffff" : "#18181b";
const mutedTextColor = isDarkMode ? "#a1a1aa" : "#71717a";
@ -358,11 +349,11 @@ function TourTooltip({
>
{/* Content */}
<div
key={contentKey}
key={stepIndex}
style={{
animation: shouldAnimate ? "fadeInSlide 0.3s ease-out" : "none",
}}
onAnimationEnd={() => setShouldAnimate(false)}
onAnimationEnd={onAnimationEnd}
>
<h3 id="tour-title" className="text-sm font-semibold mb-1.5" style={{ color: textColor }}>
{step.title}
@ -427,6 +418,7 @@ export function OnboardingTour() {
const isMobile = useIsMobile();
const [isActive, setIsActive] = useState(false);
const [stepIndex, setStepIndex] = useState(0);
const [shouldAnimate, setShouldAnimate] = useState(false);
const [targetEl, setTargetEl] = useState<Element | null>(null);
const [spotlightTargetEl, setSpotlightTargetEl] = useState<Element | null>(null);
const [spotlightStepTarget, setSpotlightStepTarget] = useState<string | null>(null);
@ -436,6 +428,7 @@ export function OnboardingTour() {
const { resolvedTheme } = useTheme();
const pathname = usePathname();
const retryCountRef = useRef(0);
const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const maxRetries = 10;
// Track previous user ID to detect user changes
const previousUserIdRef = useRef<string | null>(null);
@ -451,8 +444,8 @@ export function OnboardingTour() {
enabled: !!searchSpaceId,
});
// Get document type counts
const { data: documentTypeCounts } = useAtomValue(documentTypeCountsAtom);
// Real-time document type counts via Zero
const documentTypeCounts = useZeroDocumentTypeCounts(searchSpaceId);
// Get connectors
const { data: connectors = [] } = useAtomValue(connectorsAtom);
@ -477,7 +470,7 @@ export function OnboardingTour() {
retryCountRef.current = 0;
} else if (retryCountRef.current < maxRetries) {
retryCountRef.current++;
setTimeout(() => {
retryTimerRef.current = setTimeout(() => {
const retryEl = document.querySelector(currentStep.target);
if (retryEl) {
setTargetEl(retryEl);
@ -487,6 +480,10 @@ export function OnboardingTour() {
}
}, 200);
}
return () => {
if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
};
}, [currentStep]);
// Check if tour should run: localStorage + data validation with user ID tracking
@ -556,7 +553,11 @@ export function OnboardingTour() {
}
// User is new and hasn't seen tour - wait for DOM elements and start tour
let cancelled = false;
const checkAndStartTour = () => {
if (cancelled) return;
// Check if all required elements exist
const connectorEl = document.querySelector(TOUR_STEPS[0].target);
const documentsEl = document.querySelector(TOUR_STEPS[1].target);
@ -578,7 +579,10 @@ export function OnboardingTour() {
// Start checking after initial delay
const timer = setTimeout(checkAndStartTour, 500);
return () => clearTimeout(timer);
return () => {
cancelled = true;
clearTimeout(timer);
};
}, [mounted, user?.id, searchSpaceId, pathname, threadsData, documentTypeCounts, connectors]);
// Update position on resize/scroll
@ -664,6 +668,7 @@ export function OnboardingTour() {
const handleNext = useCallback(() => {
if (stepIndex < TOUR_STEPS.length - 1) {
retryCountRef.current = 0;
setShouldAnimate(true);
setStepIndex(stepIndex + 1);
} else {
// Tour completed - save to localStorage
@ -678,6 +683,7 @@ export function OnboardingTour() {
const handlePrev = useCallback(() => {
if (stepIndex > 0) {
retryCountRef.current = 0;
setShouldAnimate(true);
setStepIndex(stepIndex - 1);
}
}, [stepIndex]);
@ -701,6 +707,10 @@ export function OnboardingTour() {
setIsActive(false);
}, [user?.id]);
const handleAnimationEnd = useCallback(() => {
setShouldAnimate(false);
}, []);
// Handle escape key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
@ -772,6 +782,8 @@ export function OnboardingTour() {
onPrev={handlePrev}
onSkip={handleSkip}
isDarkMode={isDarkMode}
shouldAnimate={shouldAnimate}
onAnimationEnd={handleAnimationEnd}
/>
</>
)}

2
surfsense_web/components/public-chat-snapshots/public-chat-snapshots-empty-state.tsx
View file

@ -1,5 +1,3 @@
"use client";
import { Link2Off } from "lucide-react";
interface PublicChatSnapshotsEmptyStateProps {

85
surfsense_web/components/report-panel/report-panel.tsx
View file

@ -9,14 +9,13 @@ import { currentThreadAtom } from "@/atoms/chat/current-thread.atom";
import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
import { PlateEditor } from "@/components/editor/plate-editor";
import { MarkdownViewer } from "@/components/markdown-viewer";
import { EXPORT_FILE_EXTENSIONS, ExportDropdownItems } from "@/components/shared/ExportMenuItems";
import { Button } from "@/components/ui/button";
import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useMediaQuery } from "@/hooks/use-media-query";
@ -198,19 +197,6 @@ export function ReportPanelContent({
}
}, [currentMarkdown]);
// Maps backend format values to download file extensions
const FILE_EXTENSIONS: Record<string, string> = {
pdf: "pdf",
docx: "docx",
html: "html",
latex: "tex",
epub: "epub",
odt: "odt",
plain: "txt",
md: "md",
};
// Export report
const handleExport = useCallback(
async (format: string) => {
setExporting(format);
@ -219,7 +205,7 @@ export function ReportPanelContent({
.replace(/[^a-zA-Z0-9 _-]/g, "_")
.trim()
.slice(0, 80) || "report";
const ext = FILE_EXTENSIONS[format] ?? format;
const ext = EXPORT_FILE_EXTENSIONS[format] ?? format;
try {
if (format === "md") {
if (!currentMarkdown) return;
@ -329,68 +315,11 @@ export function ReportPanelContent({
align="start"
className={`min-w-[200px] select-none${insideDrawer ? " z-[100]" : ""}`}
>
{!shareToken && (
<>
<DropdownMenuLabel className="text-xs text-muted-foreground">
Documents
</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => handleExport("pdf")}
disabled={exporting !== null}
>
PDF (.pdf)
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleExport("docx")}
disabled={exporting !== null}
>
Word (.docx)
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleExport("odt")}
disabled={exporting !== null}
>
OpenDocument (.odt)
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel className="text-xs text-muted-foreground">
Web &amp; E-Book
</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => handleExport("html")}
disabled={exporting !== null}
>
HTML (.html)
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => handleExport("epub")}
disabled={exporting !== null}
>
EPUB (.epub)
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel className="text-xs text-muted-foreground">
Source &amp; Plain
</DropdownMenuLabel>
<DropdownMenuItem
onClick={() => handleExport("latex")}
disabled={exporting !== null}
>
LaTeX (.tex)
</DropdownMenuItem>
</>
)}
<DropdownMenuItem onClick={() => handleExport("md")} disabled={exporting !== null}>
Markdown (.md)
</DropdownMenuItem>
{!shareToken && (
<DropdownMenuItem
onClick={() => handleExport("plain")}
disabled={exporting !== null}
>
Plain Text (.txt)
</DropdownMenuItem>
)}
<ExportDropdownItems
onExport={handleExport}
exporting={exporting}
showAllFormats={!shareToken}
/>
</DropdownMenuContent>
</DropdownMenu>

128
surfsense_web/components/settings/general-settings-manager.tsx
View file

@ -15,6 +15,7 @@ import { Label } from "@/components/ui/label";
import { Skeleton } from "@/components/ui/skeleton";
import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
import { cacheKeys } from "@/lib/query-client/cache-keys";
import { Spinner } from "../ui/spinner";
interface GeneralSettingsManagerProps {
searchSpaceId: number;
@ -26,6 +27,7 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
const {
data: searchSpace,
isLoading: loading,
isError,
refetch: fetchSearchSpace,
} = useQuery({
queryKey: cacheKeys.searchSpaces.detail(searchSpaceId.toString()),
@ -81,6 +83,11 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
}
};
const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
handleSave();
};
if (loading) {
return (
<div className="space-y-4 md:space-y-6">
@ -98,6 +105,17 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
);
}
if (isError) {
return (
<div className="flex flex-col items-center justify-center gap-3 py-8 text-center">
<p className="text-sm text-destructive">Failed to load settings.</p>
<Button variant="outline" size="sm" onClick={() => fetchSearchSpace()}>
Retry
</Button>
</div>
);
}
return (
<div className="space-y-4 md:space-y-6">
<Alert className="bg-muted/50 py-3 md:py-4">
@ -109,60 +127,66 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
</Alert>
{/* Search Space Details Card */}
<Card>
<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
<CardTitle className="text-base md:text-lg">Search Space Details</CardTitle>
<CardDescription className="text-xs md:text-sm">
Manage the basic information for this search space.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4 md:space-y-5 px-3 md:px-6 pb-3 md:pb-6">
<div className="space-y-1.5 md:space-y-2">
<Label htmlFor="search-space-name" className="text-sm md:text-base font-medium">
{t("general_name_label")}
</Label>
<Input
id="search-space-name"
placeholder={t("general_name_placeholder")}
value={name}
onChange={(e) => setName(e.target.value)}
className="text-sm md:text-base h-9 md:h-10"
/>
<p className="text-[10px] md:text-xs text-muted-foreground">
{t("general_name_description")}
</p>
</div>
<form onSubmit={onSubmit} className="space-y-4 md:space-y-6">
<Card>
<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
<CardTitle className="text-base md:text-lg">Search Space Details</CardTitle>
<CardDescription className="text-xs md:text-sm">
Manage the basic information for this search space.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4 md:space-y-5 px-3 md:px-6 pb-3 md:pb-6">
<div className="space-y-1.5 md:space-y-2">
<Label htmlFor="search-space-name" className="text-sm md:text-base font-medium">
{t("general_name_label")}
</Label>
<Input
id="search-space-name"
placeholder={t("general_name_placeholder")}
value={name}
onChange={(e) => setName(e.target.value)}
className="text-sm md:text-base h-9 md:h-10"
/>
<p className="text-[10px] md:text-xs text-muted-foreground">
{t("general_name_description")}
</p>
</div>
<div className="space-y-1.5 md:space-y-2">
<Label htmlFor="search-space-description" className="text-sm md:text-base font-medium">
{t("general_description_label")}{" "}
<span className="text-muted-foreground font-normal">({tCommon("optional")})</span>
</Label>
<Input
id="search-space-description"
placeholder={t("general_description_placeholder")}
value={description}
onChange={(e) => setDescription(e.target.value)}
className="text-sm md:text-base h-9 md:h-10"
/>
<p className="text-[10px] md:text-xs text-muted-foreground">
{t("general_description_description")}
</p>
</div>
</CardContent>
</Card>
<div className="space-y-1.5 md:space-y-2">
<Label
htmlFor="search-space-description"
className="text-sm md:text-base font-medium"
>
{t("general_description_label")}{" "}
<span className="text-muted-foreground font-normal">({tCommon("optional")})</span>
</Label>
<Input
id="search-space-description"
placeholder={t("general_description_placeholder")}
value={description}
onChange={(e) => setDescription(e.target.value)}
className="text-sm md:text-base h-9 md:h-10"
/>
<p className="text-[10px] md:text-xs text-muted-foreground">
{t("general_description_description")}
</p>
</div>
</CardContent>
</Card>
{/* Action Buttons */}
<div className="flex justify-end pt-3 md:pt-4">
<Button
variant="outline"
onClick={handleSave}
disabled={!hasChanges || saving || !name.trim()}
className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
>
{saving ? t("general_saving") : t("general_save")}
</Button>
</div>
{/* Action Buttons */}
<div className="flex justify-end pt-3 md:pt-4">
<Button
type="submit"
variant="outline"
disabled={!hasChanges || saving || !name.trim()}
className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
>
{saving ? <Spinner size="sm" /> : null}
{saving ? t("general_saving") : t("general_save")}
</Button>
</div>
</form>
</div>
);
}

130
surfsense_web/components/settings/prompt-config-manager.tsx
View file

@ -13,6 +13,7 @@ import { Textarea } from "@/components/ui/textarea";
import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
import { authenticatedFetch } from "@/lib/auth-utils";
import { cacheKeys } from "@/lib/query-client/cache-keys";
import { Spinner } from "../ui/spinner";
interface PromptConfigManagerProps {
searchSpaceId: number;
@ -83,6 +84,11 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
}
};
const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
handleSave();
};
if (loading) {
return (
<div className="space-y-4 md:space-y-6">
@ -124,69 +130,73 @@ export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps)
</Alert>
{/* System Instructions Card */}
<Card>
<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
<CardTitle className="text-base md:text-lg">Custom System Instructions</CardTitle>
<CardDescription className="text-xs md:text-sm">
Provide specific guidelines for how you want the AI to respond. These instructions will
be applied to all answers in this search space.
</CardDescription>
</CardHeader>
<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
<div className="space-y-1.5 md:space-y-2">
<Label
htmlFor="custom-instructions-settings"
className="text-sm md:text-base font-medium"
>
Your Instructions
</Label>
<Textarea
id="custom-instructions-settings"
placeholder="E.g., Always provide practical examples, be concise, focus on technical details, use simple language, respond in a specific format..."
value={customInstructions}
onChange={(e) => setCustomInstructions(e.target.value)}
rows={10}
className="resize-none font-mono text-xs md:text-sm"
/>
<div className="flex items-center justify-between">
<p className="text-[10px] md:text-xs text-muted-foreground">
{customInstructions.length} characters
</p>
{customInstructions.length > 0 && (
<Button
variant="ghost"
size="sm"
onClick={() => setCustomInstructions("")}
className="h-auto py-0.5 md:py-1 px-1.5 md:px-2 text-[10px] md:text-xs"
>
Clear
</Button>
)}
<form onSubmit={onSubmit} className="space-y-4 md:space-y-6">
<Card>
<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
<CardTitle className="text-base md:text-lg">Custom System Instructions</CardTitle>
<CardDescription className="text-xs md:text-sm">
Provide specific guidelines for how you want the AI to respond. These instructions
will be applied to all answers in this search space.
</CardDescription>
</CardHeader>
<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
<div className="space-y-1.5 md:space-y-2">
<Label
htmlFor="custom-instructions-settings"
className="text-sm md:text-base font-medium"
>
Your Instructions
</Label>
<Textarea
id="custom-instructions-settings"
placeholder="E.g., Always provide practical examples, be concise, focus on technical details, use simple language, respond in a specific format..."
value={customInstructions}
onChange={(e) => setCustomInstructions(e.target.value)}
rows={10}
className="resize-none font-mono text-xs md:text-sm"
/>
<div className="flex items-center justify-between">
<p className="text-[10px] md:text-xs text-muted-foreground">
{customInstructions.length} characters
</p>
{customInstructions.length > 0 && (
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => setCustomInstructions("")}
className="h-auto py-0.5 md:py-1 px-1.5 md:px-2 text-[10px] md:text-xs"
>
Clear
</Button>
)}
</div>
</div>
</div>
{customInstructions.trim().length === 0 && (
<Alert className="py-2 md:py-3">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
No system instructions are currently set. The AI will use default behavior.
</AlertDescription>
</Alert>
)}
</CardContent>
</Card>
{customInstructions.trim().length === 0 && (
<Alert className="py-2 md:py-3">
<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
<AlertDescription className="text-xs md:text-sm">
No system instructions are currently set. The AI will use default behavior.
</AlertDescription>
</Alert>
)}
</CardContent>
</Card>
{/* Action Buttons */}
<div className="flex justify-end pt-3 md:pt-4">
<Button
variant="outline"
onClick={handleSave}
disabled={!hasChanges || saving}
className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
>
{saving ? "Saving" : "Save Instructions"}
</Button>
</div>
{/* Action Buttons */}
<div className="flex justify-end pt-3 md:pt-4">
<Button
type="submit"
variant="outline"
disabled={!hasChanges || saving}
className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
>
{saving ? <Spinner size="sm" /> : null}
{saving ? "Saving" : "Save Instructions"}
</Button>
</div>
</form>
</div>
);
}

144
surfsense_web/components/shared/ExportMenuItems.tsx Normal file
View file

@ -0,0 +1,144 @@
"use client";
import { Loader2 } from "lucide-react";
import { ContextMenuItem } from "@/components/ui/context-menu";
import {
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
export const EXPORT_FILE_EXTENSIONS: Record<string, string> = {
pdf: "pdf",
docx: "docx",
html: "html",
latex: "tex",
epub: "epub",
odt: "odt",
plain: "txt",
md: "md",
};
interface ExportMenuItemsProps {
onExport: (format: string) => void;
exporting: string | null;
/** Hide server-side formats (PDF, DOCX, etc.) — only show md */
showAllFormats?: boolean;
}
export function ExportDropdownItems({
onExport,
exporting,
showAllFormats = true,
}: ExportMenuItemsProps) {
const handle = (format: string) => (e: React.MouseEvent) => {
e.stopPropagation();
onExport(format);
};
return (
<>
{showAllFormats && (
<>
<DropdownMenuLabel className="text-xs text-muted-foreground">Documents</DropdownMenuLabel>
<DropdownMenuItem onClick={handle("pdf")} disabled={exporting !== null}>
{exporting === "pdf" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
PDF (.pdf)
</DropdownMenuItem>
<DropdownMenuItem onClick={handle("docx")} disabled={exporting !== null}>
{exporting === "docx" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
Word (.docx)
</DropdownMenuItem>
<DropdownMenuItem onClick={handle("odt")} disabled={exporting !== null}>
{exporting === "odt" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
OpenDocument (.odt)
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel className="text-xs text-muted-foreground">
Web &amp; E-Book
</DropdownMenuLabel>
<DropdownMenuItem onClick={handle("html")} disabled={exporting !== null}>
{exporting === "html" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
HTML (.html)
</DropdownMenuItem>
<DropdownMenuItem onClick={handle("epub")} disabled={exporting !== null}>
{exporting === "epub" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
EPUB (.epub)
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel className="text-xs text-muted-foreground">
Source &amp; Plain
</DropdownMenuLabel>
<DropdownMenuItem onClick={handle("latex")} disabled={exporting !== null}>
{exporting === "latex" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
LaTeX (.tex)
</DropdownMenuItem>
</>
)}
<DropdownMenuItem onClick={handle("md")} disabled={exporting !== null}>
{exporting === "md" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
Markdown (.md)
</DropdownMenuItem>
{showAllFormats && (
<DropdownMenuItem onClick={handle("plain")} disabled={exporting !== null}>
{exporting === "plain" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
Plain Text (.txt)
</DropdownMenuItem>
)}
</>
);
}
export function ExportContextItems({
onExport,
exporting,
showAllFormats = true,
}: ExportMenuItemsProps) {
const handle = (format: string) => (e: React.MouseEvent) => {
e.stopPropagation();
onExport(format);
};
return (
<>
{showAllFormats && (
<>
<ContextMenuItem onClick={handle("pdf")} disabled={exporting !== null}>
{exporting === "pdf" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
PDF (.pdf)
</ContextMenuItem>
<ContextMenuItem onClick={handle("docx")} disabled={exporting !== null}>
{exporting === "docx" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
Word (.docx)
</ContextMenuItem>
<ContextMenuItem onClick={handle("odt")} disabled={exporting !== null}>
{exporting === "odt" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
OpenDocument (.odt)
</ContextMenuItem>
<ContextMenuItem onClick={handle("html")} disabled={exporting !== null}>
{exporting === "html" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
HTML (.html)
</ContextMenuItem>
<ContextMenuItem onClick={handle("epub")} disabled={exporting !== null}>
{exporting === "epub" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
EPUB (.epub)
</ContextMenuItem>
<ContextMenuItem onClick={handle("latex")} disabled={exporting !== null}>
{exporting === "latex" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
LaTeX (.tex)
</ContextMenuItem>
</>
)}
<ContextMenuItem onClick={handle("md")} disabled={exporting !== null}>
{exporting === "md" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
Markdown (.md)
</ContextMenuItem>
{showAllFormats && (
<ContextMenuItem onClick={handle("plain")} disabled={exporting !== null}>
{exporting === "plain" && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
Plain Text (.txt)
</ContextMenuItem>
)}
</>
);
}

2
surfsense_web/components/theme/theme-toggle.tsx
View file

@ -215,7 +215,7 @@ export const createAnimation = (
`,
};
}
if (variant === "circle" && start == "center") {
if (variant === "circle" && start === "center") {
return {
name: `${variant}-${start}${blur ? "-blur" : ""}`,
css: `

42
surfsense_web/components/tool-ui/google-calendar/update-event.tsx
View file

@ -253,6 +253,12 @@ function ApprovalCard({
String(effectiveNewDescription ?? "") !== (event?.description ?? "");
const buildFinalArgs = useCallback(() => {
const base = {
event_id: event?.event_id,
document_id: event?.document_id,
connector_id: account?.id,
};
if (pendingEdits) {
const attendeesArr = pendingEdits.attendees
? pendingEdits.attendees
@ -260,22 +266,34 @@ function ApprovalCard({
.map((e) => e.trim())
.filter(Boolean)
: null;
const origAttendees = event?.attendees?.map((a) => a.email) ?? [];
return {
event_id: event?.event_id,
document_id: event?.document_id,
connector_id: account?.id,
new_summary: pendingEdits.summary || null,
new_description: pendingEdits.description || null,
new_start_datetime: pendingEdits.start_datetime || null,
new_end_datetime: pendingEdits.end_datetime || null,
new_location: pendingEdits.location || null,
new_attendees: attendeesArr,
...base,
new_summary:
pendingEdits.summary && pendingEdits.summary !== (event?.summary ?? "")
? pendingEdits.summary
: null,
new_description:
pendingEdits.description !== (event?.description ?? "")
? pendingEdits.description || null
: null,
new_start_datetime:
pendingEdits.start_datetime && pendingEdits.start_datetime !== (event?.start ?? "")
? pendingEdits.start_datetime
: null,
new_end_datetime:
pendingEdits.end_datetime && pendingEdits.end_datetime !== (event?.end ?? "")
? pendingEdits.end_datetime
: null,
new_location:
pendingEdits.location !== (event?.location ?? "") ? pendingEdits.location || null : null,
new_attendees:
attendeesArr && attendeesArr.join(",") !== origAttendees.join(",") ? attendeesArr : null,
};
}
return {
event_id: event?.event_id,
document_id: event?.document_id,
connector_id: account?.id,
...base,
new_summary: actionArgs.new_summary ?? null,
new_description: actionArgs.new_description ?? null,
new_start_datetime: actionArgs.new_start_datetime ?? null,

7
surfsense_web/components/tool-ui/sandbox-execute.tsx
View file

@ -67,13 +67,14 @@ const SANDBOX_FILE_RE = /^SANDBOX_FILE:\s*(.+)$/gm;
function extractSandboxFiles(text: string): SandboxFile[] {
const files: SandboxFile[] = [];
let match: RegExpExecArray | null;
while ((match = SANDBOX_FILE_RE.exec(text)) !== null) {
let match: RegExpExecArray | null = SANDBOX_FILE_RE.exec(text);
while (match !== null) {
const filePath = match[1].trim();
if (filePath) {
const name = filePath.includes("/") ? filePath.split("/").pop() || filePath : filePath;
files.push({ path: filePath, name });
}
match = SANDBOX_FILE_RE.exec(text);
}
SANDBOX_FILE_RE.lastIndex = 0;
return files;
@ -148,7 +149,7 @@ function parseExecuteResult(result: ExecuteResult): ParsedOutput {
function truncateCommand(command: string, maxLen = 80): string {
if (command.length <= maxLen) return command;
return command.slice(0, maxLen) + "…";
return `${command.slice(0, maxLen)}…`;
}
// ============================================================================

16
surfsense_web/components/ui/block-draggable.tsx
View file

@ -18,7 +18,7 @@ import {
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
@ -94,23 +94,24 @@ function Draggable(props: PlateElementProps) {
};
// clear up virtual multiple preview when drag end
// biome-ignore lint/correctness/useExhaustiveDependencies: resetPreview is stable; intentionally only run on isDragging change
React.useEffect(() => {
if (!isDragging) {
resetPreview();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isDragging]);
// biome-ignore lint/correctness/useExhaustiveDependencies: previewRef is a stable ref; only run on isAboutToDrag change
React.useEffect(() => {
if (isAboutToDrag) {
previewRef.current?.classList.remove("opacity-0");
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAboutToDrag]);
const [dragButtonTop, setDragButtonTop] = React.useState(0);
return (
// biome-ignore lint/a11y/noStaticElementInteractions: plate editor block wrapper requires mouse events
<div
className={cn(
"relative",
@ -158,6 +159,7 @@ function Draggable(props: PlateElementProps) {
contentEditable={false}
/>
{/* biome-ignore lint/a11y/noStaticElementInteractions: plate editor context menu handler */}
<div
ref={nodeRef}
className="slate-blockWrapper flow-root"
@ -215,8 +217,10 @@ const DragHandle = React.memo(function DragHandle({
return (
<Tooltip>
<TooltipTrigger asChild>
{/* biome-ignore lint/a11y/useSemanticElements: drag handle requires div for plate editor integration */}
<div
className="flex size-full items-center justify-center"
tabIndex={0}
onClick={(e) => {
e.preventDefault();
editor.getApi(BlockSelectionPlugin).blockSelection.focus();
@ -291,6 +295,12 @@ const DragHandle = React.memo(function DragHandle({
onMouseUp={() => {
resetPreview();
}}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
editor.getApi(BlockSelectionPlugin).blockSelection.focus();
}
}}
data-plate-prevent-deselect
role="button"
>

12
surfsense_web/components/ui/equation-node.tsx
View file

@ -43,10 +43,16 @@ export function EquationElement({ children, ...props }: PlateElementProps<TEquat
props.className
)}
>
{/* biome-ignore lint/a11y/useSemanticElements: contentEditable context requires div */}
<div
role="button"
tabIndex={0}
className="flex cursor-pointer items-center justify-center"
contentEditable={false}
onDoubleClick={() => setIsEditing(true)}
onKeyDown={(e) => {
if (e.key === "Enter") setIsEditing(true);
}}
>
{element.texExpression ? (
<div ref={katexRef} className="text-center" />
@ -123,10 +129,16 @@ export function InlineEquationElement({ children, ...props }: PlateElementProps<
as="span"
className={cn("inline rounded-sm px-0.5", selected && "bg-brand/15", props.className)}
>
{/* biome-ignore lint/a11y/useSemanticElements: inline contentEditable context requires span */}
<span
role="button"
tabIndex={0}
className="cursor-pointer"
contentEditable={false}
onDoubleClick={() => setIsEditing(true)}
onKeyDown={(e) => {
if (e.key === "Enter") setIsEditing(true);
}}
>
{element.texExpression ? (
<span ref={katexRef} />

16
surfsense_web/components/ui/expanded-gif-overlay.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
function isVideoSrc(src: string) {
@ -17,6 +17,12 @@ function ExpandedMediaOverlay({
alt: string;
onClose: () => void;
}) {
const overlayRef = useRef<HTMLDivElement>(null);
useEffect(() => {
overlayRef.current?.focus();
}, []);
useEffect(() => {
const handleKey = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
@ -52,12 +58,20 @@ function ExpandedMediaOverlay({
return createPortal(
<motion.div
role="dialog"
aria-modal="true"
aria-label="Expanded media view"
tabIndex={-1}
ref={overlayRef}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 z-100 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm sm:p-8"
onClick={onClose}
onKeyDown={(e) => {
if (e.key === "Escape") onClose();
}}
>
{mediaElement}
</motion.div>,

117
surfsense_web/components/ui/hero-carousel.tsx
View file

@ -97,7 +97,7 @@ function HeroCarouselCard({
observer.observe(video);
return () => observer.disconnect();
}, [src]);
}, []);
const handleCanPlay = useCallback(() => {
setHasLoaded(true);
@ -114,7 +114,19 @@ function HeroCarouselCard({
<p className="text-sm text-neutral-500 dark:text-neutral-400">{description}</p>
</div>
</div>
<div className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950" onClick={open}>
{/* biome-ignore lint/a11y/useSemanticElements: div wraps video element, button would break layout */}
<div
role="button"
tabIndex={0}
className="cursor-pointer bg-neutral-50 p-2 sm:p-3 dark:bg-neutral-950"
onClick={open}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
open();
}
}}
>
<div className="relative">
<video
ref={videoRef}
@ -145,21 +157,26 @@ function HeroCarousel() {
const [isGifExpanded, setIsGifExpanded] = useState(false);
const directionRef = useRef<"forward" | "backward">("forward");
const goTo = useCallback(
(newIndex: number) => {
directionRef.current = newIndex >= activeIndex ? "forward" : "backward";
setActiveIndex(newIndex);
},
[activeIndex]
);
const goTo = useCallback((newIndex: number) => {
setActiveIndex((prev) => {
directionRef.current = newIndex >= prev ? "forward" : "backward";
return newIndex;
});
}, []);
const goToPrev = useCallback(() => {
goTo(activeIndex <= 0 ? carouselItems.length - 1 : activeIndex - 1);
}, [activeIndex, goTo]);
setActiveIndex((prev) => {
directionRef.current = "backward";
return prev <= 0 ? carouselItems.length - 1 : prev - 1;
});
}, []);
const goToNext = useCallback(() => {
goTo(activeIndex >= carouselItems.length - 1 ? 0 : activeIndex + 1);
}, [activeIndex, goTo]);
setActiveIndex((prev) => {
directionRef.current = "forward";
return prev >= carouselItems.length - 1 ? 0 : prev + 1;
});
}, []);
const item = carouselItems[activeIndex];
const isForward = directionRef.current === "forward";
@ -185,45 +202,45 @@ function HeroCarousel() {
</AnimatePresence>
</div>
<div className="relative z-5 mt-4 flex items-center justify-center gap-2">
<button
type="button"
onClick={() => !isGifExpanded && goToPrev()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Previous slide"
>
<ChevronLeft className="size-5" />
</button>
<div className="relative z-5 mt-4 flex items-center justify-center gap-2">
<button
type="button"
onClick={() => !isGifExpanded && goToPrev()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Previous slide"
>
<ChevronLeft className="size-5" />
</button>
<div className="flex items-center">
{carouselItems.map((_, i) => (
<button
key={`dot_${i}`}
type="button"
onClick={() => !isGifExpanded && goTo(i)}
className="flex h-11 min-w-[28px] items-center justify-center touch-manipulation"
aria-label={`Go to slide ${i + 1}`}
>
<span
className={`block h-2.5 rounded-full transition-all duration-300 ${
i === activeIndex
? "w-6 bg-neutral-900 dark:bg-white"
: "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
}`}
/>
</button>
))}
<div className="flex items-center">
{carouselItems.map((_, i) => (
<button
key={`dot_${i}`}
type="button"
onClick={() => !isGifExpanded && goTo(i)}
className="flex h-11 min-w-[28px] items-center justify-center touch-manipulation"
aria-label={`Go to slide ${i + 1}`}
>
<span
className={`block h-2.5 rounded-full transition-all duration-300 ${
i === activeIndex
? "w-6 bg-neutral-900 dark:bg-white"
: "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
}`}
/>
</button>
))}
</div>
<button
type="button"
onClick={() => !isGifExpanded && goToNext()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Next slide"
>
<ChevronRight className="size-5" />
</button>
</div>
<button
type="button"
onClick={() => !isGifExpanded && goToNext()}
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
aria-label="Next slide"
>
<ChevronRight className="size-5" />
</button>
</div>
</div>
);
}

30
surfsense_web/components/ui/link-toolbar.tsx
View file

@ -160,22 +160,21 @@ function LinkOpenButton() {
const editor = useEditorRef();
const selection = useEditorSelection();
const attributes = React.useMemo(
() => {
const entry = editor.api.node<TLinkElement>({
match: { type: editor.getType(KEYS.link) },
});
if (!entry) {
return {};
}
const [element] = entry;
return getLinkAttributes(editor, element);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[editor, selection]
);
// biome-ignore lint/correctness/useExhaustiveDependencies: selection triggers recalculation of link attributes
const attributes = React.useMemo(() => {
const entry = editor.api.node<TLinkElement>({
match: { type: editor.getType(KEYS.link) },
});
if (!entry) {
return {};
}
const [element] = entry;
return getLinkAttributes(editor, element);
}, [editor, selection]);
return (
// biome-ignore lint/a11y/noStaticElementInteractions: <a> with spread attributes has dynamic href
// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label needed for icon-only link
<a
{...attributes}
className={buttonVariants({
@ -185,6 +184,9 @@ function LinkOpenButton() {
onMouseOver={(e) => {
e.stopPropagation();
}}
onFocus={(e) => {
e.stopPropagation();
}}
aria-label="Open link in a new tab"
target="_blank"
rel="noopener noreferrer"

8
surfsense_web/components/ui/toolbar.tsx
View file

@ -219,7 +219,8 @@ export function ToolbarSplitButtonSecondary({
...props
}: React.ComponentPropsWithoutRef<"span"> & VariantProps<typeof dropdownArrowVariants>) {
return (
<span
<button
type="button"
className={cn(
dropdownArrowVariants({
size,
@ -229,11 +230,10 @@ export function ToolbarSplitButtonSecondary({
className
)}
onClick={(e) => e.stopPropagation()}
role="button"
{...props}
{...(props as React.ComponentPropsWithoutRef<"button">)}
>
<ChevronDown className="size-3.5 text-muted-foreground" data-icon />
</span>
</button>
);
}

1
surfsense_web/content/docs/how-to/zero-sync.mdx
View file

@ -74,6 +74,7 @@ Zero syncs the following tables for real-time features:
|-------|---------|
| `notifications` | Inbox (comments, document processing, connector status) |
| `documents` | Document list, processing status indicators |
| `folders` | Nested folder tree for organizing documents |
| `search_source_connectors` | Connector status, indexing progress |
| `new_chat_messages` | Live chat message sync for shared chats |
| `chat_comments` | Real-time comment threads on AI responses |

6
surfsense_web/contracts/enums/toolIcons.tsx
View file

@ -1,23 +1,21 @@
import {
BookOpen,
Brain,
Database,
FileText,
Film,
Globe,
ImageIcon,
type LucideIcon,
Podcast,
ScanLine,
Sparkles,
Wrench,
} from "lucide-react";
const TOOL_ICONS: Record<string, LucideIcon> = {
search_knowledge_base: Database,
generate_podcast: Podcast,
generate_video_presentation: Film,
generate_report: FileText,
generate_image: Sparkles,
generate_image: ImageIcon,
scrape_webpage: ScanLine,
web_search: Globe,
search_surfsense_docs: BookOpen,

65
surfsense_web/contracts/types/folder.types.ts Normal file
View file

@ -0,0 +1,65 @@
import { z } from "zod";
export const folder = z.object({
id: z.number(),
name: z.string(),
position: z.string(),
parent_id: z.number().nullable(),
search_space_id: z.number(),
created_by_id: z.string().nullable().optional(),
created_at: z.string(),
updated_at: z.string(),
});
export const folderCreateRequest = z.object({
name: z.string().min(1).max(255),
parent_id: z.number().nullable().optional(),
search_space_id: z.number(),
});
export const folderUpdateRequest = z.object({
name: z.string().min(1).max(255),
});
export const folderMoveRequest = z.object({
new_parent_id: z.number().nullable().optional(),
});
export const folderReorderRequest = z.object({
before_position: z.string().nullable().optional(),
after_position: z.string().nullable().optional(),
});
export const folderBreadcrumb = z.object({
id: z.number(),
name: z.string(),
});
export const documentMoveRequest = z.object({
folder_id: z.number().nullable().optional(),
});
export const bulkDocumentMoveRequest = z.object({
document_ids: z.array(z.number()),
folder_id: z.number().nullable().optional(),
});
export const folderListResponse = z.array(folder);
export const folderBreadcrumbResponse = z.array(folderBreadcrumb);
export const folderDeleteResponse = z.object({
message: z.string(),
documents_queued_for_deletion: z.number(),
});
export type Folder = z.infer<typeof folder>;
export type FolderCreateRequest = z.infer<typeof folderCreateRequest>;
export type FolderUpdateRequest = z.infer<typeof folderUpdateRequest>;
export type FolderMoveRequest = z.infer<typeof folderMoveRequest>;
export type FolderReorderRequest = z.infer<typeof folderReorderRequest>;
export type FolderBreadcrumb = z.infer<typeof folderBreadcrumb>;
export type DocumentMoveRequest = z.infer<typeof documentMoveRequest>;
export type BulkDocumentMoveRequest = z.infer<typeof bulkDocumentMoveRequest>;
export type FolderListResponse = z.infer<typeof folderListResponse>;
export type FolderBreadcrumbResponse = z.infer<typeof folderBreadcrumbResponse>;
export type FolderDeleteResponse = z.infer<typeof folderDeleteResponse>;

19
surfsense_web/hooks/use-logs.ts
View file

@ -13,7 +13,7 @@ export interface Log {
status: LogStatus;
message: string;
source?: string;
log_metadata?: Record<string, any>;
log_metadata?: Record<string, unknown>;
created_at: string;
search_space_id: number;
}
@ -52,8 +52,9 @@ export interface LogSummary {
}
export function useLogs(searchSpaceId?: number, filters: LogFilters = {}) {
// Memoize filters to prevent infinite re-renders
const memoizedFilters = useMemo(() => filters, [JSON.stringify(filters)]);
const filtersKey = JSON.stringify(filters);
// biome-ignore lint/correctness/useExhaustiveDependencies: stable serialized key used intentionally
const memoizedFilters = useMemo(() => filters, [filtersKey]);
const buildQueryParams = useCallback(
(customFilters: LogFilters = {}) => {
@ -62,22 +63,22 @@ export function useLogs(searchSpaceId?: number, filters: LogFilters = {}) {
const allFilters = { ...memoizedFilters, ...customFilters };
if (allFilters.search_space_id) {
params["search_space_id"] = allFilters.search_space_id.toString();
params.search_space_id = allFilters.search_space_id.toString();
}
if (allFilters.level) {
params["level"] = allFilters.level;
params.level = allFilters.level;
}
if (allFilters.status) {
params["status"] = allFilters.status;
params.status = allFilters.status;
}
if (allFilters.source) {
params["source"] = allFilters.source;
params.source = allFilters.source;
}
if (allFilters.start_date) {
params["start_date"] = allFilters.start_date;
params.start_date = allFilters.start_date;
}
if (allFilters.end_date) {
params["end_date"] = allFilters.end_date;
params.end_date = allFilters.end_date;
}
return params;

87
surfsense_web/hooks/use-search-source-connectors.ts
View file

@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react";
import { authenticatedFetch, getBearerToken, handleUnauthorized } from "@/lib/auth-utils";
import { authenticatedFetch } from "@/lib/auth-utils";
export interface SearchSourceConnector {
id: number;
@ -7,7 +7,7 @@ export interface SearchSourceConnector {
connector_type: string;
is_indexable: boolean;
last_indexed_at: string | null;
config: Record<string, any>;
config: Record<string, unknown>;
search_space_id: number;
user_id?: string;
created_at?: string;
@ -20,7 +20,7 @@ export interface ConnectorSourceItem {
id: number;
name: string;
type: string;
sources: any[];
sources: unknown[];
}
/**
@ -60,6 +60,44 @@ export const useSearchSourceConnectors = (lazy: boolean = false, searchSpaceId?:
},
]);
const updateConnectorSourceItems = useCallback((currentConnectors: SearchSourceConnector[]) => {
const defaultConnectors: ConnectorSourceItem[] = [
{
id: 1,
name: "Crawled URL",
type: "CRAWLED_URL",
sources: [],
},
{
id: 2,
name: "File",
type: "FILE",
sources: [],
},
{
id: 3,
name: "Extension",
type: "EXTENSION",
sources: [],
},
{
id: 4,
name: "Youtube Video",
type: "YOUTUBE_VIDEO",
sources: [],
},
];
const apiConnectors: ConnectorSourceItem[] = currentConnectors.map((connector, index) => ({
id: 1000 + index,
name: connector.name,
type: connector.connector_type,
sources: [],
}));
setConnectorSourceItems([...defaultConnectors, ...apiConnectors]);
}, []);
const fetchConnectors = useCallback(
async (spaceId?: number) => {
if (isLoaded && lazy) return; // Avoid redundant calls in lazy mode
@ -100,7 +138,7 @@ export const useSearchSourceConnectors = (lazy: boolean = false, searchSpaceId?:
setIsLoading(false);
}
},
[isLoaded, lazy]
[isLoaded, lazy, updateConnectorSourceItems]
);
useEffect(() => {
@ -120,47 +158,6 @@ export const useSearchSourceConnectors = (lazy: boolean = false, searchSpaceId?:
[fetchConnectors, searchSpaceId]
);
// Update connector source items when connectors change
const updateConnectorSourceItems = (currentConnectors: SearchSourceConnector[]) => {
// Start with the default hardcoded connectors
const defaultConnectors: ConnectorSourceItem[] = [
{
id: 1,
name: "Crawled URL",
type: "CRAWLED_URL",
sources: [],
},
{
id: 2,
name: "File",
type: "FILE",
sources: [],
},
{
id: 3,
name: "Extension",
type: "EXTENSION",
sources: [],
},
{
id: 4,
name: "Youtube Video",
type: "YOUTUBE_VIDEO",
sources: [],
},
];
// Add the API connectors
const apiConnectors: ConnectorSourceItem[] = currentConnectors.map((connector, index) => ({
id: 1000 + index, // Use a high ID to avoid conflicts with hardcoded IDs
name: connector.name,
type: connector.connector_type,
sources: [],
}));
setConnectorSourceItems([...defaultConnectors, ...apiConnectors]);
};
/**
* Create a new search source connector
* @param connectorData - The connector data (excluding search_space_id)

29
surfsense_web/hooks/use-zero-document-type-counts.ts Normal file
View file

@ -0,0 +1,29 @@
"use client";
import { useQuery } from "@rocicorp/zero/react";
import { useMemo } from "react";
import { queries } from "@/zero/queries";
/**
* Real-time document type counts derived from Zero's live document sync.
* Updates instantly as documents are created, deleted, or change type.
*/
export function useZeroDocumentTypeCounts(
searchSpaceId: number | string | null
): Record<string, number> | undefined {
const numericId = searchSpaceId != null ? Number(searchSpaceId) : null;
const [zeroDocuments] = useQuery(queries.documents.bySpace({ searchSpaceId: numericId ?? -1 }));
return useMemo(() => {
if (!zeroDocuments || numericId == null) return undefined;
const counts: Record<string, number> = {};
for (const doc of zeroDocuments) {
if (doc.id != null && doc.title != null && doc.title !== "") {
counts[doc.documentType] = (counts[doc.documentType] || 0) + 1;
}
}
return counts;
}, [zeroDocuments, numericId]);
}

2
surfsense_web/i18n/request.ts
View file

@ -10,7 +10,7 @@ export default getRequestConfig(async ({ requestLocale }) => {
let locale = await requestLocale;
// Ensure that the incoming `locale` is valid
if (!locale || !routing.locales.includes(locale as any)) {
if (!locale || !routing.locales.includes(locale as (typeof routing.locales)[number])) {
locale = routing.defaultLocale;
}

2
surfsense_web/lib/apis/base-api.service.ts
View file

@ -16,7 +16,7 @@ export type RequestOptions = {
headers?: Record<string, string>;
contentType?: "application/json" | "application/x-www-form-urlencoded";
signal?: AbortSignal;
body?: any;
body?: unknown;
responseType?: ResponseType;
_isRetry?: boolean; // Internal flag to prevent infinite retry loops
// Add more options as needed

2
surfsense_web/lib/apis/documents-api.service.ts
View file

@ -139,7 +139,7 @@ class DocumentsApiService {
for (const batch of batches) {
const formData = new FormData();
batch.forEach((file) => formData.append("files", file));
for (const file of batch) formData.append("files", file);
formData.append("search_space_id", String(search_space_id));
formData.append("should_summarize", String(should_summarize));

113
surfsense_web/lib/apis/folders-api.service.ts Normal file
View file

@ -0,0 +1,113 @@
import {
type BulkDocumentMoveRequest,
bulkDocumentMoveRequest,
type DocumentMoveRequest,
documentMoveRequest,
type FolderCreateRequest,
type FolderMoveRequest,
type FolderReorderRequest,
type FolderUpdateRequest,
folder,
folderBreadcrumbResponse,
folderCreateRequest,
folderDeleteResponse,
folderListResponse,
folderMoveRequest,
folderReorderRequest,
folderUpdateRequest,
} from "@/contracts/types/folder.types";
import { ValidationError } from "../error";
import { baseApiService } from "./base-api.service";
class FoldersApiService {
createFolder = async (request: FolderCreateRequest) => {
const parsed = folderCreateRequest.safeParse(request);
if (!parsed.success) {
throw new ValidationError(
`Invalid request: ${parsed.error.issues.map((i) => i.message).join(", ")}`
);
}
return baseApiService.post("/api/v1/folders", folder, { body: parsed.data });
};
listFolders = async (searchSpaceId: number) => {
return baseApiService.get(
`/api/v1/folders?search_space_id=${searchSpaceId}`,
folderListResponse
);
};
getFolder = async (folderId: number) => {
return baseApiService.get(`/api/v1/folders/${folderId}`, folder);
};
getFolderBreadcrumb = async (folderId: number) => {
return baseApiService.get(`/api/v1/folders/${folderId}/breadcrumb`, folderBreadcrumbResponse);
};
updateFolder = async (folderId: number, request: FolderUpdateRequest) => {
const parsed = folderUpdateRequest.safeParse(request);
if (!parsed.success) {
throw new ValidationError(
`Invalid request: ${parsed.error.issues.map((i) => i.message).join(", ")}`
);
}
return baseApiService.put(`/api/v1/folders/${folderId}`, folder, {
body: parsed.data,
});
};
moveFolder = async (folderId: number, request: FolderMoveRequest) => {
const parsed = folderMoveRequest.safeParse(request);
if (!parsed.success) {
throw new ValidationError(
`Invalid request: ${parsed.error.issues.map((i) => i.message).join(", ")}`
);
}
return baseApiService.put(`/api/v1/folders/${folderId}/move`, folder, {
body: parsed.data,
});
};
reorderFolder = async (folderId: number, request: FolderReorderRequest) => {
const parsed = folderReorderRequest.safeParse(request);
if (!parsed.success) {
throw new ValidationError(
`Invalid request: ${parsed.error.issues.map((i) => i.message).join(", ")}`
);
}
return baseApiService.put(`/api/v1/folders/${folderId}/reorder`, folder, {
body: parsed.data,
});
};
deleteFolder = async (folderId: number) => {
return baseApiService.delete(`/api/v1/folders/${folderId}`, folderDeleteResponse);
};
moveDocument = async (documentId: number, request: DocumentMoveRequest) => {
const parsed = documentMoveRequest.safeParse(request);
if (!parsed.success) {
throw new ValidationError(
`Invalid request: ${parsed.error.issues.map((i) => i.message).join(", ")}`
);
}
return baseApiService.put(`/api/v1/documents/${documentId}/move`, undefined, {
body: parsed.data,
});
};
bulkMoveDocuments = async (request: BulkDocumentMoveRequest) => {
const parsed = bulkDocumentMoveRequest.safeParse(request);
if (!parsed.success) {
throw new ValidationError(
`Invalid request: ${parsed.error.issues.map((i) => i.message).join(", ")}`
);
}
return baseApiService.put("/api/v1/documents/bulk-move", undefined, {
body: parsed.data,
});
};
}
export const foldersApiService = new FoldersApiService();

6
surfsense_web/lib/apis/invites-api.service.ts
View file

@ -1,26 +1,20 @@
import {
type AcceptInviteRequest,
type AcceptInviteResponse,
acceptInviteRequest,
acceptInviteResponse,
type CreateInviteRequest,
type CreateInviteResponse,
createInviteRequest,
createInviteResponse,
type DeleteInviteRequest,
type DeleteInviteResponse,
deleteInviteRequest,
deleteInviteResponse,
type GetInviteInfoRequest,
type GetInviteInfoResponse,
type GetInvitesRequest,
type GetInvitesResponse,
getInviteInfoRequest,
getInviteInfoResponse,
getInvitesRequest,
getInvitesResponse,
type UpdateInviteRequest,
type UpdateInviteResponse,
updateInviteRequest,
updateInviteResponse,
} from "@/contracts/types/invites.types";

2
surfsense_web/lib/apis/logs-api.service.ts
View file

@ -14,8 +14,6 @@ import {
getLogSummaryResponse,
getLogsRequest,
getLogsResponse,
type Log,
log,
type UpdateLogRequest,
updateLogRequest,
updateLogResponse,

5
surfsense_web/lib/apis/members-api.service.ts
View file

@ -1,22 +1,17 @@
import {
type DeleteMembershipRequest,
type DeleteMembershipResponse,
deleteMembershipRequest,
deleteMembershipResponse,
type GetMembersRequest,
type GetMembersResponse,
type GetMyAccessRequest,
type GetMyAccessResponse,
getMembersRequest,
getMembersResponse,
getMyAccessRequest,
getMyAccessResponse,
type LeaveSearchSpaceRequest,
type LeaveSearchSpaceResponse,
leaveSearchSpaceRequest,
leaveSearchSpaceResponse,
type UpdateMembershipRequest,
type UpdateMembershipResponse,
updateMembershipRequest,
updateMembershipResponse,
} from "@/contracts/types/members.types";

2
surfsense_web/lib/chat/streaming-state.ts
View file

@ -136,7 +136,7 @@ export function buildContentForPersistence(
* Async generator that reads an SSE stream and yields parsed JSON objects.
* Handles buffering, event splitting, and skips malformed JSON / [DONE] lines.
*/
export async function* readSSEStream(response: Response): AsyncGenerator<any> {
export async function* readSSEStream(response: Response): AsyncGenerator<unknown> {
if (!response.body) {
throw new Error("No response body");
}

1
surfsense_web/lib/query-client/cache-keys.ts
View file

@ -17,7 +17,6 @@ export const cacheKeys = {
withQueryParams: (queries: GetDocumentsRequest["queryParams"]) =>
["documents-with-queries", ...(queries ? Object.values(queries) : [])] as const,
document: (documentId: string) => ["document", documentId] as const,
typeCounts: (searchSpaceId?: string) => ["documents", "type-counts", searchSpaceId] as const,
byChunk: (chunkId: string) => ["documents", "by-chunk", chunkId] as const,
},
logs: {

6
surfsense_web/next.config.ts
View file

@ -1,7 +1,7 @@
import path from "node:path";
import { createMDX } from "fumadocs-mdx/next";
import type { NextConfig } from "next";
import createNextIntlPlugin from "next-intl/plugin";
import path from "path";
// Create the next-intl plugin
const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
@ -37,7 +37,9 @@ const nextConfig: NextConfig = {
// Configure webpack (SVGR)
webpack: (config) => {
// SVGR: import *.svg as React components
const fileLoaderRule = config.module.rules.find((rule: any) => rule.test?.test?.(".svg"));
const fileLoaderRule = config.module.rules.find(
(rule: { test?: { test?: (s: string) => boolean } }) => rule.test?.test?.(".svg")
);
config.module.rules.push(
// Re-apply the existing file loader for *.svg?url imports
{

1
surfsense_web/package.json
View file

@ -93,6 +93,7 @@
"dotenv": "^17.2.3",
"drizzle-orm": "^0.44.5",
"emblor": "^1.4.8",
"fractional-indexing": "^3.2.0",
"fumadocs-core": "^16.3.1",
"fumadocs-mdx": "^14.2.1",
"fumadocs-ui": "^16.3.1",

9
surfsense_web/pnpm-lock.yaml generated
View file

@ -224,6 +224,9 @@ importers:
emblor:
specifier: ^1.4.8
version: 1.4.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
fractional-indexing:
specifier: ^3.2.0
version: 3.2.0
fumadocs-core:
specifier: ^16.3.1
version: 16.6.5(@mdx-js/mdx@3.1.1)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.577.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
@ -5781,6 +5784,10 @@ packages:
forwarded-parse@2.1.2:
resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
fractional-indexing@3.2.0:
resolution: {integrity: sha512-PcOxmqwYCW7O2ovKRU8OoQQj2yqTfEB/yeTYk4gPid6dN5ODRfU1hXd9tTVZzax/0NkO7AxpHykvZnT1aYp/BQ==}
engines: {node: ^14.13.1 || >=16.0.0}
framer-motion@12.34.3:
resolution: {integrity: sha512-v81ecyZKYO/DfpTwHivqkxSUBzvceOpoI+wLfgCgoUIKxlFKEXdg0oR9imxwXumT4SFy8vRk9xzJ5l3/Du/55Q==}
peerDependencies:
@ -14296,6 +14303,8 @@ snapshots:
forwarded-parse@2.1.2: {}
fractional-indexing@3.2.0: {}
framer-motion@12.34.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies:
motion-dom: 12.34.3

9
surfsense_web/zero/queries/folders.ts Normal file
View file

@ -0,0 +1,9 @@
import { defineQuery } from "@rocicorp/zero";
import { z } from "zod";
import { zql } from "../schema/index";
export const folderQueries = {
bySpace: defineQuery(z.object({ searchSpaceId: z.number() }), ({ args: { searchSpaceId } }) =>
zql.folders.where("searchSpaceId", searchSpaceId).orderBy("position", "asc")
),
};

2
surfsense_web/zero/queries/index.ts
View file

@ -1,11 +1,13 @@
import { defineQueries } from "@rocicorp/zero";
import { chatSessionQueries, commentQueries, messageQueries } from "./chat";
import { connectorQueries, documentQueries } from "./documents";
import { folderQueries } from "./folders";
import { notificationQueries } from "./inbox";
export const queries = defineQueries({
notifications: notificationQueries,
documents: documentQueries,
folders: folderQueries,
connectors: connectorQueries,
messages: messageQueries,
comments: commentQueries,

1
surfsense_web/zero/schema/documents.ts
View file

@ -6,6 +6,7 @@ export const documentTable = table("documents")
title: string(),
documentType: string().from("document_type"),
searchSpaceId: number().from("search_space_id"),
folderId: number().optional().from("folder_id"),
createdById: string().optional().from("created_by_id"),
status: json(),
createdAt: number().from("created_at"),

14
surfsense_web/zero/schema/folders.ts Normal file
View file

@ -0,0 +1,14 @@
import { number, string, table } from "@rocicorp/zero";
export const folderTable = table("folders")
.columns({
id: number(),
name: string(),
position: string(),
parentId: number().optional().from("parent_id"),
searchSpaceId: number().from("search_space_id"),
createdById: string().optional().from("created_by_id"),
createdAt: number().from("created_at"),
updatedAt: number().from("updated_at"),
})
.primaryKey("id");

2
surfsense_web/zero/schema/index.ts
View file

@ -1,6 +1,7 @@
import { createBuilder, createSchema, relationships } from "@rocicorp/zero";
import { chatCommentTable, chatSessionStateTable, newChatMessageTable } from "./chat";
import { documentTable, searchSourceConnectorTable } from "./documents";
import { folderTable } from "./folders";
import { notificationTable } from "./inbox";
const chatCommentRelationships = relationships(chatCommentTable, ({ one }) => ({
@ -28,6 +29,7 @@ export const schema = createSchema({
tables: [
notificationTable,
documentTable,
folderTable,
searchSourceConnectorTable,
newChatMessageTable,
chatCommentTable,