mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-05 13:52:40 +02:00
Merge remote-tracking branch 'upstream/dev' into feat/onedrive-connector
This commit is contained in:
Anish Sarkar
commit
5a3eece397
70 changed files with 8288 additions and 5698 deletions
|
|
@ -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 { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
|
||||
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";
|
||||
|
|
|
|||
104
surfsense_web/components/assistant-ui/markdown-code-block.tsx
Normal file
104
surfsense_web/components/assistant-ui/markdown-code-block.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
@ -428,19 +403,13 @@ const defaultComponents = memoizeMarkdownComponents({
|
|||
}
|
||||
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 }) => (
|
||||
|
|
|
|||
|
|
@ -109,7 +109,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 />
|
||||
|
|
@ -944,6 +944,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",
|
||||
|
|
@ -1062,7 +1064,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",
|
||||
|
|
|
|||
|
|
@ -69,7 +69,9 @@ export function CreateFolderDialog({
|
|||
|
||||
<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>
|
||||
<Label htmlFor="folder-name" className="text-sm">
|
||||
Folder name
|
||||
</Label>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
id="folder-name"
|
||||
|
|
@ -91,11 +93,7 @@ export function CreateFolderDialog({
|
|||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={!name.trim()}
|
||||
className="h-8 sm:h-9 text-xs sm:text-sm"
|
||||
>
|
||||
<Button type="submit" disabled={!name.trim()} className="h-8 sm:h-9 text-xs sm:text-sm">
|
||||
Create
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,15 @@
|
|||
"use client";
|
||||
|
||||
import { AlertCircle, Clock, Download, Eye, MoreHorizontal, Move, PenLine, Trash2 } from "lucide-react";
|
||||
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";
|
||||
|
|
@ -112,15 +121,15 @@ export const DocumentNode = React.memo(function DocumentNode({
|
|||
return (
|
||||
<ContextMenu onOpenChange={onContextMenuOpenChange}>
|
||||
<ContextMenuTrigger asChild>
|
||||
{/* biome-ignore lint/a11y/useSemanticElements: can't use <button> — contains nested interactive elements (Checkbox, DropdownMenuTrigger) */}
|
||||
{/* 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"
|
||||
"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}
|
||||
|
|
@ -131,54 +140,54 @@ export const DocumentNode = React.memo(function DocumentNode({
|
|||
}
|
||||
}}
|
||||
>
|
||||
{(() => {
|
||||
if (statusState === "pending") {
|
||||
{(() => {
|
||||
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 (
|
||||
<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>
|
||||
<Checkbox
|
||||
checked={isMentioned}
|
||||
onCheckedChange={handleCheckChange}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="h-3.5 w-3.5 shrink-0"
|
||||
/>
|
||||
);
|
||||
}
|
||||
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>
|
||||
|
||||
|
|
@ -189,17 +198,19 @@ export const DocumentNode = React.memo(function DocumentNode({
|
|||
)}
|
||||
</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()}
|
||||
>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {
|
|||
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,
|
||||
|
|
@ -27,6 +28,7 @@ import {
|
|||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { FolderSelectionState } from "./FolderTreeView";
|
||||
|
||||
export const DND_TYPES = {
|
||||
FOLDER: "FOLDER",
|
||||
|
|
@ -49,6 +51,8 @@ interface FolderNodeProps {
|
|||
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;
|
||||
|
|
@ -88,6 +92,8 @@ export const FolderNode = React.memo(function FolderNode({
|
|||
isExpanded,
|
||||
isRenaming,
|
||||
childCount,
|
||||
selectionState,
|
||||
onToggleSelect,
|
||||
onToggleExpand,
|
||||
onRename,
|
||||
onStartRename,
|
||||
|
|
@ -212,6 +218,10 @@ export const FolderNode = React.memo(function FolderNode({
|
|||
onStartRename(folder.id);
|
||||
}, [folder, onStartRename]);
|
||||
|
||||
const handleCheckChange = useCallback(() => {
|
||||
onToggleSelect(folder.id, selectionState !== "all");
|
||||
}, [folder.id, selectionState, onToggleSelect]);
|
||||
|
||||
const FolderIcon = isExpanded ? FolderOpen : Folder;
|
||||
|
||||
return (
|
||||
|
|
@ -252,6 +262,15 @@ export const FolderNode = React.memo(function FolderNode({
|
|||
)}
|
||||
</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 ? (
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ 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[];
|
||||
|
|
@ -20,6 +22,7 @@ interface FolderTreeViewProps {
|
|||
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;
|
||||
|
|
@ -30,6 +33,7 @@ interface FolderTreeViewProps {
|
|||
onMoveDocument: (doc: DocumentNodeDoc) => void;
|
||||
onExportDocument?: (doc: DocumentNodeDoc, format: string) => void;
|
||||
activeTypes: DocumentTypeEnum[];
|
||||
searchQuery?: string;
|
||||
onDropIntoFolder?: (
|
||||
itemType: "folder" | "document",
|
||||
itemId: number,
|
||||
|
|
@ -55,6 +59,7 @@ export function FolderTreeView({
|
|||
onToggleExpand,
|
||||
mentionedDocIds,
|
||||
onToggleChatMention,
|
||||
onToggleFolderSelect,
|
||||
onRenameFolder,
|
||||
onDeleteFolder,
|
||||
onMoveFolder,
|
||||
|
|
@ -65,6 +70,7 @@ export function FolderTreeView({
|
|||
onMoveDocument,
|
||||
onExportDocument,
|
||||
activeTypes,
|
||||
searchQuery,
|
||||
onDropIntoFolder,
|
||||
onReorderFolder,
|
||||
}: FolderTreeViewProps) {
|
||||
|
|
@ -93,13 +99,13 @@ export function FolderTreeView({
|
|||
const handleCancelRename = useCallback(() => setRenamingFolderId(null), [setRenamingFolderId]);
|
||||
|
||||
const hasDescendantMatch = useMemo(() => {
|
||||
if (activeTypes.length === 0) return null;
|
||||
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.includes(d.document_type as DocumentTypeEnum)
|
||||
const childDocs = (docsByFolder[folderId] ?? []).some(
|
||||
(d) => activeTypes.length === 0 || activeTypes.includes(d.document_type as DocumentTypeEnum)
|
||||
);
|
||||
if (childDocs) {
|
||||
match[folderId] = true;
|
||||
|
|
@ -120,7 +126,37 @@ export function FolderTreeView({
|
|||
check(f.id);
|
||||
}
|
||||
return match;
|
||||
}, [folders, docsByFolder, foldersByParent, activeTypes]);
|
||||
}, [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";
|
||||
|
|
@ -143,14 +179,19 @@ export function FolderTreeView({
|
|||
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={expandedIds.has(f.id)}
|
||||
isExpanded={isExpanded}
|
||||
isRenaming={renamingFolderId === f.id}
|
||||
childCount={folderChildCounts[f.id] ?? 0}
|
||||
selectionState={folderSelectionStates[f.id] ?? "none"}
|
||||
onToggleSelect={onToggleFolderSelect}
|
||||
onToggleExpand={onToggleExpand}
|
||||
onRename={onRenameFolder}
|
||||
onStartRename={handleStartRename}
|
||||
|
|
@ -166,7 +207,7 @@ export function FolderTreeView({
|
|||
/>
|
||||
);
|
||||
|
||||
if (expandedIds.has(f.id)) {
|
||||
if (isExpanded) {
|
||||
nodes.push(...renderLevel(f.id, depth + 1));
|
||||
}
|
||||
}
|
||||
|
|
@ -204,7 +245,7 @@ export function FolderTreeView({
|
|||
);
|
||||
}
|
||||
|
||||
if (treeNodes.length === 0 && activeTypes.length > 0) {
|
||||
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" />
|
||||
|
|
|
|||
|
|
@ -2,30 +2,37 @@
|
|||
|
||||
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 { MarkdownViewer } from "@/components/markdown-viewer";
|
||||
import { EXPORT_FILE_EXTENSIONS } from "@/components/shared/ExportMenuItems";
|
||||
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 { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
|
||||
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 {
|
||||
|
|
@ -40,8 +47,6 @@ 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 { useIsMobile } from "@/hooks/use-mobile";
|
||||
import { foldersApiService } from "@/lib/apis/folders-api.service";
|
||||
|
|
@ -50,6 +55,8 @@ 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" },
|
||||
|
|
@ -97,8 +104,6 @@ export function DocumentsSidebar({
|
|||
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);
|
||||
|
|
@ -125,6 +130,7 @@ export function DocumentsSidebar({
|
|||
// 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(
|
||||
() =>
|
||||
|
|
@ -138,19 +144,41 @@ export function DocumentsSidebar({
|
|||
[zeroFolders]
|
||||
);
|
||||
|
||||
const treeDocuments: DocumentNodeDoc[] = useMemo(
|
||||
() =>
|
||||
(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,
|
||||
})),
|
||||
[zeroAllDocs]
|
||||
);
|
||||
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[]> = {};
|
||||
|
|
@ -388,35 +416,106 @@ 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 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) => {
|
||||
|
|
@ -433,69 +532,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) {
|
||||
|
|
@ -634,7 +679,7 @@ 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}
|
||||
|
|
@ -643,69 +688,60 @@ export function DocumentsSidebar({
|
|||
/>
|
||||
</div>
|
||||
|
||||
{isSearchMode ? (
|
||||
<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}
|
||||
mentionedDocIds={mentionedDocIds}
|
||||
onToggleChatMention={handleToggleChatMention}
|
||||
isSearchMode={isSearchMode || activeTypes.length > 0}
|
||||
onOpenInTab={!isMobileLayout ? (doc) => openDocumentTab({
|
||||
documentId: doc.id,
|
||||
searchSpaceId,
|
||||
title: doc.title,
|
||||
}) : undefined}
|
||||
/>
|
||||
) : (
|
||||
<FolderTreeView
|
||||
folders={treeFolders}
|
||||
documents={treeDocuments}
|
||||
expandedIds={expandedIds}
|
||||
onToggleExpand={toggleFolderExpand}
|
||||
mentionedDocIds={mentionedDocIds}
|
||||
onToggleChatMention={handleToggleChatMention}
|
||||
onRenameFolder={handleRenameFolder}
|
||||
onDeleteFolder={handleDeleteFolder}
|
||||
onMoveFolder={handleMoveFolder}
|
||||
onCreateFolder={handleCreateFolder}
|
||||
onPreviewDocument={(doc) => {
|
||||
if (isMobileLayout) {
|
||||
handleViewDocumentPopup(doc);
|
||||
} else {
|
||||
openDocumentTab({
|
||||
documentId: doc.id,
|
||||
searchSpaceId,
|
||||
title: doc.title,
|
||||
});
|
||||
}
|
||||
}}
|
||||
onEditDocument={(doc) => {
|
||||
if (!isMobileLayout) {
|
||||
openDocumentTab({
|
||||
documentId: doc.id,
|
||||
searchSpaceId,
|
||||
title: doc.title,
|
||||
});
|
||||
}
|
||||
}}
|
||||
onDeleteDocument={(doc) => handleDeleteDocument(doc.id)}
|
||||
onMoveDocument={handleMoveDocument}
|
||||
onExportDocument={handleExportDocument}
|
||||
activeTypes={activeTypes}
|
||||
onDropIntoFolder={handleDropIntoFolder}
|
||||
onReorderFolder={handleReorderFolder}
|
||||
/>
|
||||
{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}
|
||||
onToggleFolderSelect={handleToggleFolderSelect}
|
||||
onRenameFolder={handleRenameFolder}
|
||||
onDeleteFolder={handleDeleteFolder}
|
||||
onMoveFolder={handleMoveFolder}
|
||||
onCreateFolder={handleCreateFolder}
|
||||
searchQuery={debouncedSearch.trim() || undefined}
|
||||
onPreviewDocument={(doc) => {
|
||||
if (isMobileLayout) {
|
||||
handleViewDocumentPopup(doc);
|
||||
} else {
|
||||
openDocumentTab({
|
||||
documentId: doc.id,
|
||||
searchSpaceId,
|
||||
title: doc.title,
|
||||
});
|
||||
}
|
||||
}}
|
||||
onEditDocument={(doc) => {
|
||||
if (!isMobileLayout) {
|
||||
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
|
||||
|
|
@ -744,6 +780,40 @@ export function DocumentsSidebar({
|
|||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 { useZeroDocumentTypeCounts } from "@/hooks/use-zero-document-type-counts";
|
||||
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);
|
||||
|
|
@ -676,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
|
||||
|
|
@ -690,6 +683,7 @@ export function OnboardingTour() {
|
|||
const handlePrev = useCallback(() => {
|
||||
if (stepIndex > 0) {
|
||||
retryCountRef.current = 0;
|
||||
setShouldAnimate(true);
|
||||
setStepIndex(stepIndex - 1);
|
||||
}
|
||||
}, [stepIndex]);
|
||||
|
|
@ -713,6 +707,10 @@ export function OnboardingTour() {
|
|||
setIsActive(false);
|
||||
}, [user?.id]);
|
||||
|
||||
const handleAnimationEnd = useCallback(() => {
|
||||
setShouldAnimate(false);
|
||||
}, []);
|
||||
|
||||
// Handle escape key
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
|
|
@ -784,6 +782,8 @@ export function OnboardingTour() {
|
|||
onPrev={handlePrev}
|
||||
onSkip={handleSkip}
|
||||
isDarkMode={isDarkMode}
|
||||
shouldAnimate={shouldAnimate}
|
||||
onAnimationEnd={handleAnimationEnd}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ 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 {
|
||||
|
|
@ -17,7 +18,6 @@ import {
|
|||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { ExportDropdownItems, EXPORT_FILE_EXTENSIONS } from "@/components/shared/ExportMenuItems";
|
||||
import { useMediaQuery } from "@/hooks/use-media-query";
|
||||
import { baseApiService } from "@/lib/apis/base-api.service";
|
||||
import { authenticatedFetch } from "@/lib/auth-utils";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
"use client";
|
||||
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
||||
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",
|
||||
|
|
@ -36,9 +40,7 @@ export function ExportDropdownItems({
|
|||
<>
|
||||
{showAllFormats && (
|
||||
<>
|
||||
<DropdownMenuLabel className="text-xs text-muted-foreground">
|
||||
Documents
|
||||
</DropdownMenuLabel>
|
||||
<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)
|
||||
|
|
|
|||
|
|
@ -287,13 +287,9 @@ function ApprovalCard({
|
|||
? pendingEdits.end_datetime
|
||||
: null,
|
||||
new_location:
|
||||
pendingEdits.location !== (event?.location ?? "")
|
||||
? pendingEdits.location || null
|
||||
: null,
|
||||
pendingEdits.location !== (event?.location ?? "") ? pendingEdits.location || null : null,
|
||||
new_attendees:
|
||||
attendeesArr && attendeesArr.join(",") !== origAttendees.join(",")
|
||||
? attendeesArr
|
||||
: null,
|
||||
attendeesArr && attendeesArr.join(",") !== origAttendees.join(",") ? attendeesArr : null,
|
||||
};
|
||||
}
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -157,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";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue