- {/* Filter + New Folder Toggle Group */}
+ {/* New Folder + Filter Toggle Group */}
{onCreateFolder && (
@@ -172,6 +182,70 @@ export function DocumentsFilters({
+ {/* AI Sort Toggle */}
+ {onToggleAiSort && (
+
+
+
+
+ {aiSortBusy ? (
+
+
+ ) : aiSortEnabled ? (
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+ {aiSortBusy
+ ? "AI sort in progress..."
+ : aiSortEnabled
+ ? "AI sort active — click to disable"
+ : "Enable AI sort"}
+
+
+ )}
+
{/* Search Input */}
diff --git a/surfsense_web/components/documents/FolderTreeView.tsx b/surfsense_web/components/documents/FolderTreeView.tsx
index 4988e87e7..ca833949c 100644
--- a/surfsense_web/components/documents/FolderTreeView.tsx
+++ b/surfsense_web/components/documents/FolderTreeView.tsx
@@ -90,6 +90,8 @@ export function FolderTreeView({
const [openContextMenuId, setOpenContextMenuId] = useState(null);
+ const [manuallyCollapsedAiIds, setManuallyCollapsedAiIds] = useState>(new Set());
+
// Single subscription for rename state — derived boolean passed to each FolderNode
const [renamingFolderId, setRenamingFolderId] = useAtom(renamingFolderIdAtom);
const handleStartRename = useCallback(
@@ -98,6 +100,38 @@ export function FolderTreeView({
);
const handleCancelRename = useCallback(() => setRenamingFolderId(null), [setRenamingFolderId]);
+ const aiSortFolderLevels = useMemo(() => {
+ const map = new Map();
+ for (const f of folders) {
+ if (f.metadata?.ai_sort === true && typeof f.metadata?.ai_sort_level === "number") {
+ map.set(f.id, f.metadata.ai_sort_level as number);
+ }
+ }
+ return map;
+ }, [folders]);
+
+ const handleToggleExpand = useCallback(
+ (folderId: number) => {
+ const aiLevel = aiSortFolderLevels.get(folderId);
+ if (aiLevel !== undefined && aiLevel < 4) {
+ // AI-auto-expanded folder: only toggle the manual-collapse set.
+ // Calling onToggleExpand would add it to expandedIds and fight auto-expand.
+ setManuallyCollapsedAiIds((prev) => {
+ const next = new Set(prev);
+ if (next.has(folderId)) {
+ next.delete(folderId);
+ } else {
+ next.add(folderId);
+ }
+ return next;
+ });
+ return;
+ }
+ onToggleExpand(folderId);
+ },
+ [onToggleExpand, aiSortFolderLevels]
+ );
+
const effectiveActiveTypes = useMemo(() => {
if (
activeTypes.includes("FILE" as DocumentTypeEnum) &&
@@ -212,9 +246,16 @@ export function FolderTreeView({
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 childFolders = (foldersByParent[key] ?? []).slice().sort((a, b) => {
+ const aIsDate =
+ a.metadata?.ai_sort === true && a.metadata?.ai_sort_level === 2;
+ const bIsDate =
+ b.metadata?.ai_sort === true && b.metadata?.ai_sort_level === 2;
+ if (aIsDate && bIsDate) {
+ return b.name.localeCompare(a.name);
+ }
+ return a.position.localeCompare(b.position);
+ });
const visibleFolders = hasDescendantMatch
? childFolders.filter((f) => hasDescendantMatch[f.id])
: childFolders;
@@ -226,6 +267,32 @@ export function FolderTreeView({
const nodes: React.ReactNode[] = [];
+ if (parentId === null) {
+ const processingDocs = childDocs.filter((d) => {
+ const state = d.status?.state;
+ return state === "pending" || state === "processing";
+ });
+ for (const d of processingDocs) {
+ nodes.push(
+ setOpenContextMenuId(open ? `doc-${d.id}` : null)}
+ />
+ );
+ }
+ }
+
for (let i = 0; i < visibleFolders.length; i++) {
const f = visibleFolders[i];
const siblingPositions = {
@@ -233,8 +300,15 @@ 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;
+ const isSearchAutoExpanded = !!searchQuery && !!hasDescendantMatch?.[f.id];
+ const isAiAutoExpandCandidate =
+ f.metadata?.ai_sort === true &&
+ typeof f.metadata?.ai_sort_level === "number" &&
+ (f.metadata.ai_sort_level as number) < 4;
+ const isManuallyCollapsed = manuallyCollapsedAiIds.has(f.id);
+ const isExpanded = isManuallyCollapsed
+ ? isSearchAutoExpanded
+ : expandedIds.has(f.id) || isSearchAutoExpanded || isAiAutoExpandCandidate;
nodes.push(
{
+ const state = d.status?.state;
+ return state !== "pending" && state !== "processing";
+ })
+ : childDocs;
+
+ for (const d of remainingDocs) {
nodes.push(
, , , etc. tags correctly.
+// remarkMdx treats { } as JSX expression delimiters and does NOT support
+// HTML comments (). Arbitrary markdown from document conversions
+// (e.g. PDF-to-markdown via Azure/DocIntel) can contain constructs that
+// break the MDX parser. This module sanitises them before deserialization.
// ---------------------------------------------------------------------------
const FENCED_OR_INLINE_CODE = /(```[\s\S]*?```|`[^`\n]+`)/g;
-export function escapeMdxExpressions(md: string): string {
+// Strip HTML comments that MDX cannot parse.
+// PDF converters emit , , etc.
+// MDX uses JSX-style comments and chokes on HTML comments, causing the
+// parser to stop at the first occurrence.
+// - becomes a thematic break (---)
+// - All other HTML comments are removed
+function stripHtmlComments(md: string): string {
+ return md
+ .replace(//gi, "\n---\n")
+ .replace(//g, "");
+}
+
+// Convert ... blocks to plain text blockquotes.
+// with arbitrary text content is not valid JSX, causing the MDX
+// parser to fail.
+function convertFigureBlocks(md: string): string {
+ return md.replace(/]*>([\s\S]*?)<\/figure>/gi, (_match, inner: string) => {
+ const trimmed = (inner as string).trim();
+ if (!trimmed) return "";
+ const quoted = trimmed
+ .split("\n")
+ .map((line) => `> ${line}`)
+ .join("\n");
+ return `\n${quoted}\n`;
+ });
+}
+
+// Escape unescaped { and } outside of fenced/inline code so remarkMdx
+// treats them as literal characters rather than JSX expression delimiters.
+function escapeCurlyBraces(md: string): string {
const parts = md.split(FENCED_OR_INLINE_CODE);
return parts
.map((part, i) => {
- // Odd indices are code blocks / inline code – leave untouched
if (i % 2 === 1) return part;
- // Escape { and } that are NOT already escaped (no preceding \)
return part.replace(/(?(null);
const isElectron = typeof window !== "undefined" && !!window.electronAPI;
+ // AI File Sort state
+ const { data: searchSpaces, refetch: refetchSearchSpaces } = useAtomValue(searchSpacesAtom);
+ const activeSearchSpace = useMemo(
+ () => searchSpaces?.find((s) => s.id === searchSpaceId),
+ [searchSpaces, searchSpaceId]
+ );
+ const aiSortEnabled = activeSearchSpace?.ai_file_sort_enabled ?? false;
+ const [aiSortBusy, setAiSortBusy] = useState(false);
+ const [aiSortConfirmOpen, setAiSortConfirmOpen] = useState(false);
+
+ const handleToggleAiSort = useCallback(() => {
+ if (aiSortEnabled) {
+ // Disable: just update the setting, no confirmation needed
+ setAiSortBusy(true);
+ searchSpacesApiService
+ .updateSearchSpace({ id: searchSpaceId, data: { ai_file_sort_enabled: false } })
+ .then(() => {
+ refetchSearchSpaces();
+ toast.success("AI file sorting disabled");
+ })
+ .catch(() => toast.error("Failed to disable AI file sorting"))
+ .finally(() => setAiSortBusy(false));
+ } else {
+ setAiSortConfirmOpen(true);
+ }
+ }, [aiSortEnabled, searchSpaceId, refetchSearchSpaces]);
+
+ const handleConfirmEnableAiSort = useCallback(() => {
+ setAiSortConfirmOpen(false);
+ setAiSortBusy(true);
+ searchSpacesApiService
+ .updateSearchSpace({ id: searchSpaceId, data: { ai_file_sort_enabled: true } })
+ .then(() => searchSpacesApiService.triggerAiSort(searchSpaceId))
+ .then(() => {
+ refetchSearchSpaces();
+ toast.success("AI file sorting enabled — organizing your documents in the background");
+ })
+ .catch(() => toast.error("Failed to enable AI file sorting"))
+ .finally(() => setAiSortBusy(false));
+ }, [searchSpaceId, refetchSearchSpaces]);
+
const handleWatchLocalFolder = useCallback(async () => {
const api = window.electronAPI;
if (!api?.selectFolder) return;
@@ -905,6 +948,9 @@ export function DocumentsSidebar({
onToggleType={onToggleType}
activeTypes={activeTypes}
onCreateFolder={() => handleCreateFolder(null)}
+ aiSortEnabled={aiSortEnabled}
+ aiSortBusy={aiSortBusy}
+ onToggleAiSort={handleToggleAiSort}
/>
@@ -1066,6 +1112,25 @@ export function DocumentsSidebar({
+
+
+
+
+ Enable AI File Sorting?
+
+ All documents in this search space will be organized into folders by
+ connector type, date, and AI-generated categories. New documents will
+ also be sorted automatically. You can disable this at any time.
+
+
+
+ Cancel
+
+ Enable
+
+
+
+
);
diff --git a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
index 371f3dc6d..5d8b530c0 100644
--- a/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx
@@ -22,8 +22,8 @@ import { useParams, useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
import { setTargetCommentIdAtom } from "@/atoms/chat/current-thread.atom";
-import { convertRenderedToDisplay } from "@/components/chat-comments/comment-item/comment-item";
-import { getDocumentTypeLabel } from "@/components/documents/DocumentTypeIcon";
+import { convertRenderedToDisplay } from "@/lib/comments/utils";
+import { getDocumentTypeLabel } from "@/lib/documents/document-type-labels";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
index 5195082cd..661f76ed3 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
@@ -3,8 +3,8 @@
import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect } from "react";
import { useMediaQuery } from "@/hooks/use-media-query";
+import { SLIDEOUT_PANEL_OPENED_EVENT } from "@/lib/layout-events";
-export const SLIDEOUT_PANEL_OPENED_EVENT = "slideout-panel-opened";
interface SidebarSlideOutPanelProps {
open: boolean;
diff --git a/surfsense_web/components/new-chat/chat-header.tsx b/surfsense_web/components/new-chat/chat-header.tsx
index 0c5253c6c..4716418ee 100644
--- a/surfsense_web/components/new-chat/chat-header.tsx
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@@ -44,21 +44,28 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
const [isVisionGlobal, setIsVisionGlobal] = useState(false);
const [visionDialogMode, setVisionDialogMode] = useState<"create" | "edit" | "view">("view");
+ // Default provider for create dialogs
+ const [defaultLLMProvider, setDefaultLLMProvider] = useState
();
+ const [defaultImageProvider, setDefaultImageProvider] = useState();
+ const [defaultVisionProvider, setDefaultVisionProvider] = useState();
+
// LLM handlers
const handleEditLLMConfig = useCallback(
(config: NewLLMConfigPublic | GlobalNewLLMConfig, global: boolean) => {
setSelectedConfig(config);
setIsGlobal(global);
setDialogMode(global ? "view" : "edit");
+ setDefaultLLMProvider(undefined);
setDialogOpen(true);
},
[]
);
- const handleAddNewLLM = useCallback(() => {
+ const handleAddNewLLM = useCallback((provider?: string) => {
setSelectedConfig(null);
setIsGlobal(false);
setDialogMode("create");
+ setDefaultLLMProvider(provider);
setDialogOpen(true);
}, []);
@@ -68,10 +75,11 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
}, []);
// Image model handlers
- const handleAddImageModel = useCallback(() => {
+ const handleAddImageModel = useCallback((provider?: string) => {
setSelectedImageConfig(null);
setIsImageGlobal(false);
setImageDialogMode("create");
+ setDefaultImageProvider(provider);
setImageDialogOpen(true);
}, []);
@@ -80,6 +88,7 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
setSelectedImageConfig(config);
setIsImageGlobal(global);
setImageDialogMode(global ? "view" : "edit");
+ setDefaultImageProvider(undefined);
setImageDialogOpen(true);
},
[]
@@ -91,10 +100,11 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
}, []);
// Vision model handlers
- const handleAddVisionModel = useCallback(() => {
+ const handleAddVisionModel = useCallback((provider?: string) => {
setSelectedVisionConfig(null);
setIsVisionGlobal(false);
setVisionDialogMode("create");
+ setDefaultVisionProvider(provider);
setVisionDialogOpen(true);
}, []);
@@ -103,6 +113,7 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
setSelectedVisionConfig(config);
setIsVisionGlobal(global);
setVisionDialogMode(global ? "view" : "edit");
+ setDefaultVisionProvider(undefined);
setVisionDialogOpen(true);
},
[]
@@ -131,6 +142,7 @@ export function ChatHeader({ searchSpaceId, className }: ChatHeaderProps) {
isGlobal={isGlobal}
searchSpaceId={searchSpaceId}
mode={dialogMode}
+ defaultProvider={defaultLLMProvider}
/>
);
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 00e37491d..26937e18b 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -1,8 +1,20 @@
"use client";
+import type React from "react";
import { useAtomValue } from "jotai";
-import { Bot, Check, ChevronDown, Edit3, ImageIcon, Plus, ScanEye, Search, Zap } from "lucide-react";
-import { type UIEvent, useCallback, useMemo, useState } from "react";
+import {
+ Bot,
+ Check,
+ ChevronDown,
+ Edit3,
+ Eye,
+ ImageIcon,
+ Layers,
+ Plus,
+ Search,
+ Zap,
+} from "lucide-react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import {
globalImageGenConfigsAtom,
@@ -22,17 +34,16 @@ import {
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
- CommandSeparator,
-} from "@/components/ui/command";
+ Drawer,
+ DrawerContent,
+ DrawerHandle,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Spinner } from "@/components/ui/spinner";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import type {
GlobalImageGenConfig,
GlobalNewLLMConfig,
@@ -41,16 +52,209 @@ import type {
NewLLMConfigPublic,
VisionLLMConfig,
} from "@/contracts/types/new-llm-config.types";
+import { useIsMobile } from "@/hooks/use-mobile";
import { getProviderIcon } from "@/lib/provider-icons";
import { cn } from "@/lib/utils";
+// ─── Helpers ────────────────────────────────────────────────────────
+
+const PROVIDER_NAMES: Record
= {
+ OPENAI: "OpenAI",
+ ANTHROPIC: "Anthropic",
+ GOOGLE: "Google",
+ AZURE: "Azure",
+ AZURE_OPENAI: "Azure OpenAI",
+ AWS_BEDROCK: "AWS Bedrock",
+ BEDROCK: "Bedrock",
+ DEEPSEEK: "DeepSeek",
+ MISTRAL: "Mistral",
+ COHERE: "Cohere",
+ GROQ: "Groq",
+ OLLAMA: "Ollama",
+ TOGETHER_AI: "Together AI",
+ FIREWORKS_AI: "Fireworks AI",
+ REPLICATE: "Replicate",
+ HUGGINGFACE: "HuggingFace",
+ PERPLEXITY: "Perplexity",
+ XAI: "xAI",
+ OPENROUTER: "OpenRouter",
+ CEREBRAS: "Cerebras",
+ SAMBANOVA: "SambaNova",
+ VERTEX_AI: "Vertex AI",
+ MINIMAX: "MiniMax",
+ MOONSHOT: "Moonshot",
+ ZHIPU: "Zhipu",
+ DEEPINFRA: "DeepInfra",
+ CLOUDFLARE: "Cloudflare",
+ DATABRICKS: "Databricks",
+ NSCALE: "NScale",
+ RECRAFT: "Recraft",
+ XINFERENCE: "XInference",
+ CUSTOM: "Custom",
+ AI21: "AI21",
+ ALIBABA_QWEN: "Qwen",
+ ANYSCALE: "Anyscale",
+ COMETAPI: "CometAPI",
+};
+
+// Provider keys valid per model type, matching backend enums
+// (LiteLLMProvider, ImageGenProvider, VisionProvider in db.py)
+const LLM_PROVIDER_KEYS: string[] = [
+ "OPENAI",
+ "ANTHROPIC",
+ "GOOGLE",
+ "AZURE_OPENAI",
+ "BEDROCK",
+ "VERTEX_AI",
+ "GROQ",
+ "DEEPSEEK",
+ "XAI",
+ "MISTRAL",
+ "COHERE",
+ "OPENROUTER",
+ "TOGETHER_AI",
+ "FIREWORKS_AI",
+ "REPLICATE",
+ "PERPLEXITY",
+ "OLLAMA",
+ "CEREBRAS",
+ "SAMBANOVA",
+ "DEEPINFRA",
+ "AI21",
+ "ALIBABA_QWEN",
+ "MOONSHOT",
+ "ZHIPU",
+ "MINIMAX",
+ "HUGGINGFACE",
+ "CLOUDFLARE",
+ "DATABRICKS",
+ "ANYSCALE",
+ "COMETAPI",
+ "GITHUB_MODELS",
+ "CUSTOM",
+];
+
+const IMAGE_PROVIDER_KEYS: string[] = [
+ "OPENAI",
+ "AZURE_OPENAI",
+ "GOOGLE",
+ "VERTEX_AI",
+ "BEDROCK",
+ "RECRAFT",
+ "OPENROUTER",
+ "XINFERENCE",
+ "NSCALE",
+];
+
+const VISION_PROVIDER_KEYS: string[] = [
+ "OPENAI",
+ "ANTHROPIC",
+ "GOOGLE",
+ "AZURE_OPENAI",
+ "VERTEX_AI",
+ "BEDROCK",
+ "XAI",
+ "OPENROUTER",
+ "OLLAMA",
+ "GROQ",
+ "TOGETHER_AI",
+ "FIREWORKS_AI",
+ "DEEPSEEK",
+ "MISTRAL",
+ "CUSTOM",
+];
+
+const PROVIDER_KEYS_BY_TAB: Record = {
+ llm: LLM_PROVIDER_KEYS,
+ image: IMAGE_PROVIDER_KEYS,
+ vision: VISION_PROVIDER_KEYS,
+};
+
+function formatProviderName(provider: string): string {
+ const key = provider.toUpperCase();
+ return (
+ PROVIDER_NAMES[key] ??
+ provider.charAt(0).toUpperCase() +
+ provider.slice(1).toLowerCase().replace(/_/g, " ")
+ );
+}
+
+function normalizeText(input: string): string {
+ return input
+ .normalize("NFD")
+ .replace(/\p{Diacritic}/gu, "")
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, " ")
+ .trim();
+}
+
+interface ConfigBase {
+ id: number;
+ name: string;
+ model_name: string;
+ provider: string;
+}
+
+function filterAndScore(
+ configs: T[],
+ selectedProvider: string,
+ searchQuery: string,
+): T[] {
+ let result = configs;
+
+ if (selectedProvider !== "all") {
+ result = result.filter(
+ (c) => c.provider.toUpperCase() === selectedProvider,
+ );
+ }
+
+ if (!searchQuery.trim()) return result;
+
+ const normalized = normalizeText(searchQuery);
+ const tokens = normalized.split(/\s+/).filter(Boolean);
+
+ const scored = result.map((c) => {
+ const aggregate = normalizeText(
+ [c.name, c.model_name, c.provider].join(" "),
+ );
+ let score = 0;
+ if (aggregate.includes(normalized)) score += 5;
+ for (const token of tokens) {
+ if (aggregate.includes(token)) score += 1;
+ }
+ return { config: c, score };
+ });
+
+ return scored
+ .filter((s) => s.score > 0)
+ .sort((a, b) => b.score - a.score)
+ .map((s) => s.config);
+}
+
+interface DisplayItem {
+ config: ConfigBase & Record;
+ isGlobal: boolean;
+ isAutoMode: boolean;
+}
+
+// ─── Component ──────────────────────────────────────────────────────
+
interface ModelSelectorProps {
- onEditLLM: (config: NewLLMConfigPublic | GlobalNewLLMConfig, isGlobal: boolean) => void;
- onAddNewLLM: () => void;
- onEditImage?: (config: ImageGenerationConfig | GlobalImageGenConfig, isGlobal: boolean) => void;
- onAddNewImage?: () => void;
- onEditVision?: (config: VisionLLMConfig | GlobalVisionLLMConfig, isGlobal: boolean) => void;
- onAddNewVision?: () => void;
+ onEditLLM: (
+ config: NewLLMConfigPublic | GlobalNewLLMConfig,
+ isGlobal: boolean,
+ ) => void;
+ onAddNewLLM: (provider?: string) => void;
+ onEditImage?: (
+ config: ImageGenerationConfig | GlobalImageGenConfig,
+ isGlobal: boolean,
+ ) => void;
+ onAddNewImage?: (provider?: string) => void;
+ onEditVision?: (
+ config: VisionLLMConfig | GlobalVisionLLMConfig,
+ isGlobal: boolean,
+ ) => void;
+ onAddNewVision?: (provider?: string) => void;
className?: string;
}
@@ -64,40 +268,69 @@ export function ModelSelector({
className,
}: ModelSelectorProps) {
const [open, setOpen] = useState(false);
- const [activeTab, setActiveTab] = useState<"llm" | "image" | "vision">("llm");
- const [llmSearchQuery, setLlmSearchQuery] = useState("");
- const [imageSearchQuery, setImageSearchQuery] = useState("");
- const [visionSearchQuery, setVisionSearchQuery] = useState("");
- const [llmScrollPos, setLlmScrollPos] = useState<"top" | "middle" | "bottom">("top");
- const [imageScrollPos, setImageScrollPos] = useState<"top" | "middle" | "bottom">("top");
- const [visionScrollPos, setVisionScrollPos] = useState<"top" | "middle" | "bottom">("top");
- const handleListScroll = useCallback(
- (setter: typeof setLlmScrollPos) => (e: UIEvent) => {
- const el = e.currentTarget;
- const atTop = el.scrollTop <= 2;
- const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
- setter(atTop ? "top" : atBottom ? "bottom" : "middle");
- },
- []
+ const [activeTab, setActiveTab] = useState<"llm" | "image" | "vision">(
+ "llm",
);
+ const [searchQuery, setSearchQuery] = useState("");
+ const [selectedProvider, setSelectedProvider] = useState("all");
+ const [focusedIndex, setFocusedIndex] = useState(-1);
+ const [showScrollIndicator, setShowScrollIndicator] = useState(true);
+ const providerSidebarRef = useRef(null);
+ const modelListRef = useRef(null);
+ const searchInputRef = useRef(null);
+ const isMobile = useIsMobile();
- // LLM data
- const { data: llmUserConfigs, isLoading: llmUserLoading } = useAtomValue(newLLMConfigsAtom);
+ // Reset search + provider when tab changes
+ useEffect(() => {
+ setSelectedProvider("all");
+ setSearchQuery("");
+ setFocusedIndex(-1);
+ }, [activeTab]);
+
+ // Reset on open
+ useEffect(() => {
+ if (open) {
+ setSearchQuery("");
+ setSelectedProvider("all");
+ }
+ }, [open]);
+
+ // Cmd/Ctrl+M shortcut
+ useEffect(() => {
+ const handler = (e: KeyboardEvent) => {
+ if ((e.metaKey || e.ctrlKey) && e.key === "m") {
+ e.preventDefault();
+ setOpen((prev) => !prev);
+ }
+ };
+ document.addEventListener("keydown", handler);
+ return () => document.removeEventListener("keydown", handler);
+ }, []);
+
+ // Focus search input on open
+ useEffect(() => {
+ if (open && !isMobile) {
+ requestAnimationFrame(() => searchInputRef.current?.focus());
+ }
+ }, [open, isMobile, activeTab]);
+
+ // ─── Data ───
+ const { data: llmUserConfigs, isLoading: llmUserLoading } =
+ useAtomValue(newLLMConfigsAtom);
const { data: llmGlobalConfigs, isLoading: llmGlobalLoading } =
useAtomValue(globalNewLLMConfigsAtom);
- const { data: preferences, isLoading: prefsLoading } = useAtomValue(llmPreferencesAtom);
+ const { data: preferences, isLoading: prefsLoading } =
+ useAtomValue(llmPreferencesAtom);
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
- const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
-
- // Image data
+ const { mutateAsync: updatePreferences } = useAtomValue(
+ updateLLMPreferencesMutationAtom,
+ );
const { data: imageGlobalConfigs, isLoading: imageGlobalLoading } =
useAtomValue(globalImageGenConfigsAtom);
- const { data: imageUserConfigs, isLoading: imageUserLoading } = useAtomValue(imageGenConfigsAtom);
-
- // Vision data
- const { data: visionGlobalConfigs, isLoading: visionGlobalLoading } = useAtomValue(
- globalVisionLLMConfigsAtom
- );
+ const { data: imageUserConfigs, isLoading: imageUserLoading } =
+ useAtomValue(imageGenConfigsAtom);
+ const { data: visionGlobalConfigs, isLoading: visionGlobalLoading } =
+ useAtomValue(globalVisionLLMConfigsAtom);
const { data: visionUserConfigs, isLoading: visionUserLoading } =
useAtomValue(visionLLMConfigsAtom);
@@ -110,133 +343,220 @@ export function ModelSelector({
visionGlobalLoading ||
visionUserLoading;
- // ─── LLM current config ───
+ // ─── Current selected configs ───
const currentLLMConfig = useMemo(() => {
if (!preferences) return null;
- const agentLlmId = preferences.agent_llm_id;
- if (agentLlmId === null || agentLlmId === undefined) return null;
- if (agentLlmId <= 0) {
- return llmGlobalConfigs?.find((c) => c.id === agentLlmId) ?? null;
- }
- return llmUserConfigs?.find((c) => c.id === agentLlmId) ?? null;
+ const id = preferences.agent_llm_id;
+ if (id === null || id === undefined) return null;
+ if (id <= 0) return llmGlobalConfigs?.find((c) => c.id === id) ?? null;
+ return llmUserConfigs?.find((c) => c.id === id) ?? null;
}, [preferences, llmGlobalConfigs, llmUserConfigs]);
const isLLMAutoMode =
- currentLLMConfig && "is_auto_mode" in currentLLMConfig && currentLLMConfig.is_auto_mode;
+ currentLLMConfig &&
+ "is_auto_mode" in currentLLMConfig &&
+ currentLLMConfig.is_auto_mode;
- // ─── Image current config ───
const currentImageConfig = useMemo(() => {
if (!preferences) return null;
const id = preferences.image_generation_config_id;
if (id === null || id === undefined) return null;
- const globalMatch = imageGlobalConfigs?.find((c) => c.id === id);
- if (globalMatch) return globalMatch;
- return imageUserConfigs?.find((c) => c.id === id) ?? null;
+ return (
+ imageGlobalConfigs?.find((c) => c.id === id) ??
+ imageUserConfigs?.find((c) => c.id === id) ??
+ null
+ );
}, [preferences, imageGlobalConfigs, imageUserConfigs]);
const isImageAutoMode =
- currentImageConfig && "is_auto_mode" in currentImageConfig && currentImageConfig.is_auto_mode;
+ currentImageConfig &&
+ "is_auto_mode" in currentImageConfig &&
+ currentImageConfig.is_auto_mode;
- // ─── Vision current config ───
const currentVisionConfig = useMemo(() => {
if (!preferences) return null;
const id = preferences.vision_llm_config_id;
if (id === null || id === undefined) return null;
- const globalMatch = visionGlobalConfigs?.find((c) => c.id === id);
- if (globalMatch) return globalMatch;
- return visionUserConfigs?.find((c) => c.id === id) ?? null;
+ return (
+ visionGlobalConfigs?.find((c) => c.id === id) ??
+ visionUserConfigs?.find((c) => c.id === id) ??
+ null
+ );
}, [preferences, visionGlobalConfigs, visionUserConfigs]);
- const isVisionAutoMode = useMemo(() => {
- return (
- currentVisionConfig &&
- "is_auto_mode" in currentVisionConfig &&
- currentVisionConfig.is_auto_mode
+ const isVisionAutoMode =
+ currentVisionConfig &&
+ "is_auto_mode" in currentVisionConfig &&
+ currentVisionConfig.is_auto_mode;
+
+ // ─── Filtered configs (separate global / user for section headers) ───
+ const filteredLLMGlobal = useMemo(
+ () =>
+ filterAndScore(llmGlobalConfigs ?? [], selectedProvider, searchQuery),
+ [llmGlobalConfigs, selectedProvider, searchQuery],
+ );
+ const filteredLLMUser = useMemo(
+ () =>
+ filterAndScore(llmUserConfigs ?? [], selectedProvider, searchQuery),
+ [llmUserConfigs, selectedProvider, searchQuery],
+ );
+ const filteredImageGlobal = useMemo(
+ () =>
+ filterAndScore(
+ imageGlobalConfigs ?? [],
+ selectedProvider,
+ searchQuery,
+ ),
+ [imageGlobalConfigs, selectedProvider, searchQuery],
+ );
+ const filteredImageUser = useMemo(
+ () =>
+ filterAndScore(
+ imageUserConfigs ?? [],
+ selectedProvider,
+ searchQuery,
+ ),
+ [imageUserConfigs, selectedProvider, searchQuery],
+ );
+ const filteredVisionGlobal = useMemo(
+ () =>
+ filterAndScore(
+ visionGlobalConfigs ?? [],
+ selectedProvider,
+ searchQuery,
+ ),
+ [visionGlobalConfigs, selectedProvider, searchQuery],
+ );
+ const filteredVisionUser = useMemo(
+ () =>
+ filterAndScore(
+ visionUserConfigs ?? [],
+ selectedProvider,
+ searchQuery,
+ ),
+ [visionUserConfigs, selectedProvider, searchQuery],
+ );
+
+ // Combined display list for keyboard navigation
+ const currentDisplayItems: DisplayItem[] = useMemo(() => {
+ const toItems = (
+ configs: ConfigBase[],
+ isGlobal: boolean,
+ ): DisplayItem[] =>
+ configs.map((c) => ({
+ config: c as ConfigBase & Record,
+ isGlobal,
+ isAutoMode:
+ isGlobal &&
+ "is_auto_mode" in c &&
+ !!(c as Record).is_auto_mode,
+ }));
+
+ switch (activeTab) {
+ case "llm":
+ return [
+ ...toItems(filteredLLMGlobal, true),
+ ...toItems(filteredLLMUser, false),
+ ];
+ case "image":
+ return [
+ ...toItems(filteredImageGlobal, true),
+ ...toItems(filteredImageUser, false),
+ ];
+ case "vision":
+ return [
+ ...toItems(filteredVisionGlobal, true),
+ ...toItems(filteredVisionUser, false),
+ ];
+ }
+ }, [
+ activeTab,
+ filteredLLMGlobal,
+ filteredLLMUser,
+ filteredImageGlobal,
+ filteredImageUser,
+ filteredVisionGlobal,
+ filteredVisionUser,
+ ]);
+
+ // ─── Provider sidebar data ───
+ // Collect which providers actually have configured models for the active tab
+ const configuredProviderSet = useMemo(() => {
+ const configs =
+ activeTab === "llm"
+ ? [
+ ...(llmGlobalConfigs ?? []),
+ ...(llmUserConfigs ?? []),
+ ]
+ : activeTab === "image"
+ ? [
+ ...(imageGlobalConfigs ?? []),
+ ...(imageUserConfigs ?? []),
+ ]
+ : [
+ ...(visionGlobalConfigs ?? []),
+ ...(visionUserConfigs ?? []),
+ ];
+ const set = new Set();
+ for (const c of configs) {
+ if (c.provider) set.add(c.provider.toUpperCase());
+ }
+ return set;
+ }, [
+ activeTab,
+ llmGlobalConfigs,
+ llmUserConfigs,
+ imageGlobalConfigs,
+ imageUserConfigs,
+ visionGlobalConfigs,
+ visionUserConfigs,
+ ]);
+
+ // Show only providers valid for the active tab; configured ones first
+ const activeProviders = useMemo(() => {
+ const tabKeys = PROVIDER_KEYS_BY_TAB[activeTab] ?? LLM_PROVIDER_KEYS;
+ const configured = tabKeys.filter((p) =>
+ configuredProviderSet.has(p),
);
- }, [currentVisionConfig]);
-
- // ─── LLM filtering ───
- const filteredLLMGlobal = useMemo(() => {
- if (!llmGlobalConfigs) return [];
- if (!llmSearchQuery) return llmGlobalConfigs;
- const q = llmSearchQuery.toLowerCase();
- return llmGlobalConfigs.filter(
- (c) =>
- c.name.toLowerCase().includes(q) ||
- c.model_name.toLowerCase().includes(q) ||
- c.provider.toLowerCase().includes(q)
+ const unconfigured = tabKeys.filter(
+ (p) => !configuredProviderSet.has(p),
);
- }, [llmGlobalConfigs, llmSearchQuery]);
+ return ["all", ...configured, ...unconfigured];
+ }, [activeTab, configuredProviderSet]);
- const filteredLLMUser = useMemo(() => {
- if (!llmUserConfigs) return [];
- if (!llmSearchQuery) return llmUserConfigs;
- const q = llmSearchQuery.toLowerCase();
- return llmUserConfigs.filter(
- (c) =>
- c.name.toLowerCase().includes(q) ||
- c.model_name.toLowerCase().includes(q) ||
- c.provider.toLowerCase().includes(q)
- );
- }, [llmUserConfigs, llmSearchQuery]);
+ const providerModelCounts = useMemo(() => {
+ const allConfigs =
+ activeTab === "llm"
+ ? [
+ ...(llmGlobalConfigs ?? []),
+ ...(llmUserConfigs ?? []),
+ ]
+ : activeTab === "image"
+ ? [
+ ...(imageGlobalConfigs ?? []),
+ ...(imageUserConfigs ?? []),
+ ]
+ : [
+ ...(visionGlobalConfigs ?? []),
+ ...(visionUserConfigs ?? []),
+ ];
+ const counts: Record = { all: allConfigs.length };
+ for (const c of allConfigs) {
+ const p = c.provider.toUpperCase();
+ counts[p] = (counts[p] || 0) + 1;
+ }
+ return counts;
+ }, [
+ activeTab,
+ llmGlobalConfigs,
+ llmUserConfigs,
+ imageGlobalConfigs,
+ imageUserConfigs,
+ visionGlobalConfigs,
+ visionUserConfigs,
+ ]);
- const totalLLMModels = (llmGlobalConfigs?.length ?? 0) + (llmUserConfigs?.length ?? 0);
-
- // ─── Image filtering ───
- const filteredImageGlobal = useMemo(() => {
- if (!imageGlobalConfigs) return [];
- if (!imageSearchQuery) return imageGlobalConfigs;
- const q = imageSearchQuery.toLowerCase();
- return imageGlobalConfigs.filter(
- (c) =>
- c.name.toLowerCase().includes(q) ||
- c.model_name.toLowerCase().includes(q) ||
- c.provider.toLowerCase().includes(q)
- );
- }, [imageGlobalConfigs, imageSearchQuery]);
-
- const filteredImageUser = useMemo(() => {
- if (!imageUserConfigs) return [];
- if (!imageSearchQuery) return imageUserConfigs;
- const q = imageSearchQuery.toLowerCase();
- return imageUserConfigs.filter(
- (c) =>
- c.name.toLowerCase().includes(q) ||
- c.model_name.toLowerCase().includes(q) ||
- c.provider.toLowerCase().includes(q)
- );
- }, [imageUserConfigs, imageSearchQuery]);
-
- const totalImageModels = (imageGlobalConfigs?.length ?? 0) + (imageUserConfigs?.length ?? 0);
-
- // ─── Vision filtering ───
- const filteredVisionGlobal = useMemo(() => {
- if (!visionGlobalConfigs) return [];
- if (!visionSearchQuery) return visionGlobalConfigs;
- const q = visionSearchQuery.toLowerCase();
- return visionGlobalConfigs.filter(
- (c) =>
- c.name.toLowerCase().includes(q) ||
- c.model_name.toLowerCase().includes(q) ||
- c.provider.toLowerCase().includes(q)
- );
- }, [visionGlobalConfigs, visionSearchQuery]);
-
- const filteredVisionUser = useMemo(() => {
- if (!visionUserConfigs) return [];
- if (!visionSearchQuery) return visionUserConfigs;
- const q = visionSearchQuery.toLowerCase();
- return visionUserConfigs.filter(
- (c) =>
- c.name.toLowerCase().includes(q) ||
- c.model_name.toLowerCase().includes(q) ||
- c.provider.toLowerCase().includes(q)
- );
- }, [visionUserConfigs, visionSearchQuery]);
-
- const totalVisionModels = (visionGlobalConfigs?.length ?? 0) + (visionUserConfigs?.length ?? 0);
-
- // ─── Handlers ───
+ // ─── Selection handlers ───
const handleSelectLLM = useCallback(
async (config: NewLLMConfigPublic | GlobalNewLLMConfig) => {
if (currentLLMConfig?.id === config.id) {
@@ -254,21 +574,11 @@ export function ModelSelector({
});
toast.success(`Switched to ${config.name}`);
setOpen(false);
- } catch (error) {
- console.error("Failed to switch model:", error);
+ } catch {
toast.error("Failed to switch model");
}
},
- [currentLLMConfig, searchSpaceId, updatePreferences]
- );
-
- const handleEditLLMConfig = useCallback(
- (e: React.MouseEvent, config: NewLLMConfigPublic | GlobalNewLLMConfig, isGlobal: boolean) => {
- e.stopPropagation();
- onEditLLM(config, isGlobal);
- setOpen(false);
- },
- [onEditLLM]
+ [currentLLMConfig, searchSpaceId, updatePreferences],
);
const handleSelectImage = useCallback(
@@ -292,7 +602,7 @@ export function ModelSelector({
toast.error("Failed to switch image model");
}
},
- [currentImageConfig, searchSpaceId, updatePreferences]
+ [currentImageConfig, searchSpaceId, updatePreferences],
);
const handleSelectVision = useCallback(
@@ -316,667 +626,687 @@ export function ModelSelector({
toast.error("Failed to switch vision model");
}
},
- [currentVisionConfig, searchSpaceId, updatePreferences]
+ [currentVisionConfig, searchSpaceId, updatePreferences],
);
- return (
-
-
- {
+ switch (activeTab) {
+ case "llm":
+ handleSelectLLM(
+ item.config as NewLLMConfigPublic | GlobalNewLLMConfig,
+ );
+ break;
+ case "image":
+ handleSelectImage(item.config.id);
+ break;
+ case "vision":
+ handleSelectVision(item.config.id);
+ break;
+ }
+ },
+ [activeTab, handleSelectLLM, handleSelectImage, handleSelectVision],
+ );
+
+ const handleEditItem = useCallback(
+ (e: React.MouseEvent, item: DisplayItem) => {
+ e.stopPropagation();
+ setOpen(false);
+ switch (activeTab) {
+ case "llm":
+ onEditLLM(
+ item.config as NewLLMConfigPublic | GlobalNewLLMConfig,
+ item.isGlobal,
+ );
+ break;
+ case "image":
+ onEditImage?.(
+ item.config as ImageGenerationConfig | GlobalImageGenConfig,
+ item.isGlobal,
+ );
+ break;
+ case "vision":
+ onEditVision?.(
+ item.config as VisionLLMConfig | GlobalVisionLLMConfig,
+ item.isGlobal,
+ );
+ break;
+ }
+ },
+ [activeTab, onEditLLM, onEditImage, onEditVision],
+ );
+
+ // ─── Keyboard navigation ───
+ useEffect(() => {
+ setFocusedIndex(-1);
+ }, [searchQuery, selectedProvider]);
+
+ useEffect(() => {
+ if (focusedIndex < 0 || !modelListRef.current) return;
+ const items =
+ modelListRef.current.querySelectorAll("[data-model-index]");
+ items[focusedIndex]?.scrollIntoView({
+ block: "nearest",
+ behavior: "smooth",
+ });
+ }, [focusedIndex]);
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ const count = currentDisplayItems.length;
+
+ // Arrow Left/Right cycle provider filters
+ if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+ e.preventDefault();
+ const providers = activeProviders;
+ const idx = providers.indexOf(selectedProvider);
+ let next: number;
+ if (e.key === "ArrowLeft") {
+ next = idx > 0 ? idx - 1 : providers.length - 1;
+ } else {
+ next =
+ idx < providers.length - 1 ? idx + 1 : 0;
+ }
+ setSelectedProvider(providers[next]);
+ if (providerSidebarRef.current) {
+ const buttons =
+ providerSidebarRef.current.querySelectorAll("button");
+ buttons[next]?.scrollIntoView({
+ block: "nearest",
+ inline: "nearest",
+ behavior: "smooth",
+ });
+ }
+ return;
+ }
+
+ if (count === 0) return;
+
+ switch (e.key) {
+ case "ArrowDown":
+ e.preventDefault();
+ setFocusedIndex((prev) =>
+ prev < count - 1 ? prev + 1 : 0,
+ );
+ break;
+ case "ArrowUp":
+ e.preventDefault();
+ setFocusedIndex((prev) =>
+ prev > 0 ? prev - 1 : count - 1,
+ );
+ break;
+ case "Enter":
+ e.preventDefault();
+ if (focusedIndex >= 0 && focusedIndex < count) {
+ handleSelectItem(currentDisplayItems[focusedIndex]);
+ }
+ break;
+ case "Home":
+ e.preventDefault();
+ setFocusedIndex(0);
+ break;
+ case "End":
+ e.preventDefault();
+ setFocusedIndex(count - 1);
+ break;
+ }
+ },
+ [
+ currentDisplayItems,
+ focusedIndex,
+ activeProviders,
+ selectedProvider,
+ handleSelectItem,
+ ],
+ );
+
+ // ─── Render: Provider sidebar ───
+ const renderProviderSidebar = () => {
+ const configuredCount = configuredProviderSet.size;
+
+ return (
+
+
{
+ const t = e.currentTarget;
+ setShowScrollIndicator(
+ t.scrollHeight - t.scrollTop >
+ t.clientHeight + 10,
+ );
+ }}
className={cn(
- "h-8 gap-2 px-3 text-sm bg-main-panel hover:bg-accent/50 dark:hover:bg-white/[0.06] border border-border/40 select-none",
- className
+ isMobile
+ ? "flex flex-row gap-0.5 px-2 py-1.5 overflow-x-auto border-b border-border/40"
+ : "flex flex-col gap-0.5 p-1 overflow-y-auto flex-1 [&::-webkit-scrollbar]:w-0 [&::-webkit-scrollbar-track]:bg-transparent",
)}
>
- {isLoading ? (
+ {activeProviders.map((provider, idx) => {
+ const isAll = provider === "all";
+ const isActive = selectedProvider === provider;
+ const count = providerModelCounts[provider] || 0;
+ const isConfigured =
+ isAll || configuredProviderSet.has(provider);
+
+ // Separator between configured and unconfigured providers
+ // idx 0 is "all", configured run from 1..configuredCount, unconfigured start at configuredCount+1
+ const showSeparator =
+ !isAll &&
+ idx === configuredCount + 1 &&
+ configuredCount > 0;
+
+ return (
+
+ {showSeparator &&
+ (isMobile ? (
+
+ ) : (
+
+ ))}
+
+
+
+ setSelectedProvider(provider)
+ }
+ tabIndex={-1}
+ className={cn(
+ "relative flex items-center justify-center rounded-md transition-all duration-150",
+ isMobile
+ ? "p-2 shrink-0"
+ : "p-1.5 w-full",
+ isActive
+ ? "bg-primary/10 text-primary"
+ : isConfigured
+ ? "hover:bg-accent/60 text-muted-foreground hover:text-foreground"
+ : "opacity-50 hover:opacity-80 hover:bg-accent/40 text-muted-foreground",
+ )}
+ >
+ {isAll ? (
+
+
+
+ {isAll
+ ? "All Models"
+ : formatProviderName(
+ provider,
+ )}
+ {isConfigured
+ ? ` (${count})`
+ : " — not configured"}
+
+
+
+ );
+ })}
+
+ {!isMobile && showScrollIndicator && (
+
+
+ )}
+
handleSelectItem(item)}
+ onMouseEnter={() => setFocusedIndex(index)}
+ className={cn(
+ "group flex items-start gap-2.5 px-2.5 py-2 rounded-lg cursor-pointer",
+ "transition-all duration-150 mx-1",
+ "hover:bg-accent/40 active:scale-[0.99]",
+ isSelected && "bg-primary/6 dark:bg-primary/8",
+ isFocused && "bg-accent/50 ring-1 ring-primary/20",
+ )}
+ >
+ {/* Provider icon */}
+
+ {getProviderIcon(config.provider as string, {
+ isAutoMode,
+ className: "size-5",
+ })}
+
+
+ {/* Model info */}
+
+
+
+ {config.name}
+
+ {isAutoMode && (
+
+ Recommended
+
+ )}
+
+
+
+ {isAutoMode
+ ? "Auto Mode"
+ : (config.model_name as string)}
+
+ {!isAutoMode && hasCitations && (
+
+ Citations
+
+ )}
+
+
+
+ {/* Actions */}
+
+ {!isAutoMode && (
+ handleEditItem(e, item)}
+ >
+
+ )}
+ {isSelected && (
+
+
+ {/* Tab header */}
+
+
+ {(
+ [
+ {
+ value: "llm" as const,
+ icon: Zap,
+ label: "LLM",
+ },
+ {
+ value: "image" as const,
+ icon: ImageIcon,
+ label: "Image",
+ },
+ {
+ value: "vision" as const,
+ icon: Eye,
+ label: "Vision",
+ },
+ ] as const
+ ).map(({ value, icon: Icon, label }) => (
+ setActiveTab(value)}
+ className={cn(
+ "flex items-center justify-center gap-1.5 text-sm font-medium transition-all duration-200 border-b-[1.5px]",
+ activeTab === value
+ ? "border-foreground dark:border-white text-foreground"
+ : "border-transparent text-muted-foreground hover:text-foreground/70",
+ )}
+ >
+
+ ))}
+
+
+
+ {/* Two-pane layout */}
+
+ {/* Provider sidebar */}
+ {renderProviderSidebar()}
+
+ {/* Main content */}
+
+ {/* Search */}
+
+
+
+ {/* Provider header when filtered */}
+ {selectedProvider !== "all" && (
+
+ {getProviderIcon(selectedProvider, {
+ className: "size-4",
+ })}
+
+ {formatProviderName(selectedProvider)}
+
+
+ {configuredProviderSet.has(
+ selectedProvider,
+ )
+ ? `${providerModelCounts[selectedProvider] || 0} models`
+ : "Not configured"}
+
+
+ )}
+
+ {/* Model list */}
+
+ {currentDisplayItems.length === 0 ? (
+
+ {selectedProvider !== "all" &&
+ !configuredProviderSet.has(
+ selectedProvider,
+ ) ? (
+ <>
+
+ {getProviderIcon(
+ selectedProvider,
+ {
+ className:
+ "size-10",
+ },
+ )}
+
+
+ No{" "}
+ {formatProviderName(
+ selectedProvider,
+ )}{" "}
+ models configured
+
+
+ Add a model with this
+ provider to get started
+
+ {addHandler && (
+
{
+ setOpen(false);
+ addHandler(selectedProvider !== "all" ? selectedProvider : undefined);
+ }}
+ >
+
+ )}
+
+ ) : (
+ <>
+
+
+ No models found
+
+
+ Try a different search
+ term
+
+
+ )}
+
+ ) : (
+ <>
+ {globalItems.length > 0 && (
+ <>
+
+ Global Models
+
+ {globalItems.map((item, i) =>
+ renderModelCard(
+ item,
+ globalStartIdx + i,
+ ),
+ )}
+
+ )}
+ {globalItems.length > 0 &&
+ userItems.length > 0 && (
+
+ )}
+ {userItems.length > 0 && (
+ <>
+
+ Your Configurations
+
+ {userItems.map((item, i) =>
+ renderModelCard(
+ item,
+ userStartIdx + i,
+ ),
+ )}
+
+ )}
+
+ )}
+
+
+ {/* Add model button */}
+ {addHandler && (
+
+
{
+ setOpen(false);
+ addHandler(selectedProvider !== "all" ? selectedProvider : undefined);
+ }}
+ >
+
+ {addLabel}
+
+
+
+ )}
+
+
+
+ {isLoading ? (
+ <>
+
+ Loading
+
+
+ ) : (
+ <>
+ {/* LLM */}
+ {currentLLMConfig ? (
<>
- Loading
+ {getProviderIcon(currentLLMConfig.provider, {
+ isAutoMode: isLLMAutoMode ?? false,
+ })}
+
+ {currentLLMConfig.name}
+
) : (
<>
- {/* LLM section */}
- {currentLLMConfig ? (
- <>
- {getProviderIcon(currentLLMConfig.provider, {
- isAutoMode: isLLMAutoMode ?? false,
- })}
-
- {currentLLMConfig.name}
-
-
- ) : (
- <>
- Select Model
-
- )}
-
- {/* Divider */}
-
-
- {/* Image section */}
- {currentImageConfig ? (
- <>
- {getProviderIcon(currentImageConfig.provider, {
- isAutoMode: isImageAutoMode ?? false,
- })}
-
- {currentImageConfig.name}
-
-
- ) : (
-
-
- {/* Vision section */}
- {currentVisionConfig ? (
- <>
- {getProviderIcon(currentVisionConfig.provider, {
- isAutoMode: isVisionAutoMode ?? false,
- })}
-
- {currentVisionConfig.name}
-
-
- ) : (
-
+ Select Model
+
)}
-
-
+
+ {/* Image */}
+ {currentImageConfig ? (
+ <>
+ {getProviderIcon(currentImageConfig.provider, {
+ isAutoMode: isImageAutoMode ?? false,
+ })}
+
+ {currentImageConfig.name}
+
+
+ ) : (
+
+ {/* Vision */}
+ {currentVisionConfig ? (
+ <>
+ {getProviderIcon(currentVisionConfig.provider, {
+ isAutoMode: isVisionAutoMode ?? false,
+ })}
+
+ {currentVisionConfig.name}
+
+
+ ) : (
+
+ {triggerButton}
+
+
+ Select Model
+
+
+ {renderContent()}
+
+
+
+ );
+ }
+
+ return (
+
+ {triggerButton}
e.preventDefault()}
>
- setActiveTab(v as "llm" | "image" | "vision")}
- className="w-full"
- >
-
-
-
-
-
-
-
-
-
-
-
- {/* ─── LLM Tab ─── */}
-
-
- {totalLLMModels > 3 && (
-
-
- )}
-
-
-
-
- {llmGlobalConfigs?.length || llmUserConfigs?.length ? (
- <>
-
-
No models found
-
Try a different search term
-
- ) : (
-
No models found
- )}
-
-
- {/* Global LLM Configs */}
- {filteredLLMGlobal.length > 0 && (
-
-
- Global Models
-
- {filteredLLMGlobal.map((config) => {
- const isSelected = currentLLMConfig?.id === config.id;
- const isAutoMode = "is_auto_mode" in config && config.is_auto_mode;
- return (
- handleSelectLLM(config)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
- "hover:bg-accent/50 dark:hover:bg-white/[0.06]",
- isSelected && "bg-accent/80 dark:bg-white/[0.06]",
- isAutoMode && ""
- )}
- >
-
-
-
- {getProviderIcon(config.provider, { isAutoMode })}
-
-
-
- {config.name}
- {isAutoMode && (
-
- Recommended
-
- )}
- {isSelected && (
-
-
-
- {isAutoMode ? "Auto Mode" : config.model_name}
-
- {!isAutoMode && config.citations_enabled && (
-
- Citations
-
- )}
-
-
-
- {!isAutoMode && (
-
handleEditLLMConfig(e, config, true)}
- >
-
- )}
-
- );
- })}
-
- )}
-
- {filteredLLMGlobal.length > 0 && filteredLLMUser.length > 0 && (
-
-
- Your Configurations
-
- {filteredLLMUser.map((config) => {
- const isSelected = currentLLMConfig?.id === config.id;
- return (
- handleSelectLLM(config)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all",
- "hover:bg-accent/50 dark:hover:bg-white/[0.06]",
- isSelected && "bg-accent/80 dark:bg-white/[0.06]"
- )}
- >
-
-
-
{getProviderIcon(config.provider)}
-
-
- {config.name}
- {isSelected && (
-
-
-
- {config.model_name}
-
- {config.citations_enabled && (
-
- Citations
-
- )}
-
-
-
-
handleEditLLMConfig(e, config, false)}
- >
-
-
- );
- })}
-
- )}
-
- {/* Add New LLM Config */}
-
-
{
- setOpen(false);
- onAddNewLLM();
- }}
- >
- Add Model
-
-
-
-
-
- {/* ─── Image Tab ─── */}
-
-
- {totalImageModels > 3 && (
-
-
- )}
-
-
-
- {imageGlobalConfigs?.length || imageUserConfigs?.length ? (
- <>
-
-
No image models found
-
Try a different search term
-
- ) : (
-
No image models found
- )}
-
-
- {/* Global Image Configs */}
- {filteredImageGlobal.length > 0 && (
-
-
- Global Image Models
-
- {filteredImageGlobal.map((config) => {
- const isSelected = currentImageConfig?.id === config.id;
- const isAuto = "is_auto_mode" in config && config.is_auto_mode;
- return (
- handleSelectImage(config.id)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/[0.06]",
- isSelected && "bg-accent/80 dark:bg-white/[0.06]",
- isAuto && ""
- )}
- >
-
-
- {getProviderIcon(config.provider, { isAutoMode: isAuto })}
-
-
-
- {config.name}
- {isAuto && (
-
- Recommended
-
- )}
- {isSelected &&
-
- {isAuto ? "Auto Mode" : config.model_name}
-
-
- {onEditImage && !isAuto && (
-
{
- e.stopPropagation();
- setOpen(false);
- onEditImage(config, true);
- }}
- >
-
- )}
-
- );
- })}
-
- )}
-
- {/* User Image Configs */}
- {filteredImageUser.length > 0 && (
- <>
- {filteredImageGlobal.length > 0 && (
-
-
- Your Image Models
-
- {filteredImageUser.map((config) => {
- const isSelected = currentImageConfig?.id === config.id;
- return (
- handleSelectImage(config.id)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/[0.06]",
- isSelected && "bg-accent/80 dark:bg-white/[0.06]"
- )}
- >
-
-
{getProviderIcon(config.provider)}
-
-
- {config.name}
- {isSelected && (
-
-
- {config.model_name}
-
-
- {onEditImage && (
-
{
- e.stopPropagation();
- setOpen(false);
- onEditImage(config, false);
- }}
- >
-
- )}
-
- );
- })}
-
-
- )}
-
- {/* Add New Image Config */}
- {onAddNewImage && (
-
-
{
- setOpen(false);
- onAddNewImage();
- }}
- >
- Add Image Model
-
-
-
-
-
- {/* ─── Vision Tab ─── */}
-
-
- {totalVisionModels > 3 && (
-
-
- )}
-
-
-
- {visionGlobalConfigs?.length || visionUserConfigs?.length ? (
- <>
-
-
No vision models found
-
Try a different search term
-
- ) : (
-
No vision models found
- )}
-
-
- {filteredVisionGlobal.length > 0 && (
-
-
- Global Vision Models
-
- {filteredVisionGlobal.map((config) => {
- const isSelected = currentVisionConfig?.id === config.id;
- const isAuto = "is_auto_mode" in config && config.is_auto_mode;
- return (
- handleSelectVision(config.id)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/[0.06]",
- isSelected && "bg-accent/80 dark:bg-white/[0.06]"
- )}
- >
-
-
- {getProviderIcon(config.provider, { isAutoMode: isAuto })}
-
-
-
- {config.name}
- {isAuto && (
-
- Recommended
-
- )}
- {isSelected &&
-
- {isAuto ? "Auto Mode" : config.model_name}
-
-
- {onEditVision && !isAuto && (
-
{
- e.stopPropagation();
- setOpen(false);
- onEditVision(config as VisionLLMConfig, true);
- }}
- >
-
- )}
-
- );
- })}
-
- )}
-
- {filteredVisionUser.length > 0 && (
- <>
- {filteredVisionGlobal.length > 0 && (
-
-
- Your Vision Models
-
- {filteredVisionUser.map((config) => {
- const isSelected = currentVisionConfig?.id === config.id;
- return (
- handleSelectVision(config.id)}
- className={cn(
- "mx-2 rounded-lg mb-1 cursor-pointer group transition-all hover:bg-accent/50 dark:hover:bg-white/[0.06]",
- isSelected && "bg-accent/80 dark:bg-white/[0.06]"
- )}
- >
-
-
{getProviderIcon(config.provider)}
-
-
- {config.name}
- {isSelected && (
-
-
- {config.model_name}
-
-
- {onEditVision && (
-
{
- e.stopPropagation();
- setOpen(false);
- onEditVision(config, false);
- }}
- >
-
- )}
-
- );
- })}
-
-
- )}
-
- {onAddNewVision && (
-
-
{
- setOpen(false);
- onAddNewVision();
- }}
- >
- Add Vision Model
-
-
-
-
-
+ {renderContent()}
);
diff --git a/surfsense_web/components/pricing/pricing-section.tsx b/surfsense_web/components/pricing/pricing-section.tsx
index 43177e383..9d75e9a1d 100644
--- a/surfsense_web/components/pricing/pricing-section.tsx
+++ b/surfsense_web/components/pricing/pricing-section.tsx
@@ -1,4 +1,9 @@
+"use client";
+import React, { useRef, useEffect, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { IconPlus } from "@tabler/icons-react";
import { Pricing } from "@/components/pricing";
+import { cn } from "@/lib/utils";
const demoPlans = [
{
@@ -59,13 +64,280 @@ const demoPlans = [
},
];
+interface FAQItem {
+ question: string;
+ answer: string;
+}
+
+interface FAQSection {
+ title: string;
+ items: FAQItem[];
+}
+
+const faqData: FAQSection[] = [
+ {
+ title: "Pages & Billing",
+ items: [
+ {
+ question: "What exactly is a \"page\" in SurfSense?",
+ answer:
+ "A page is a simple billing unit that measures how much content you add to your knowledge base. For PDFs, one page equals one real PDF page. For other document types like Word, PowerPoint, and Excel files, pages are automatically estimated based on the file. Every file uses at least 1 page.",
+ },
+ {
+ question: "How does the Pay As You Go plan work?",
+ answer:
+ "There's no monthly subscription. When you need more pages, simply purchase 1,000-page packs at $1 each. Purchased pages are added to your account immediately so you can keep indexing right away. You only pay when you actually need more.",
+ },
+ {
+ question: "What happens if I run out of pages?",
+ answer:
+ "SurfSense checks your remaining pages before processing each file. If you don't have enough, the upload is paused and you'll be notified. You can purchase additional page packs at any time to continue. For cloud connector syncs, a small overage may be allowed so your sync doesn't partially fail.",
+ },
+ {
+ question: "If I delete a document, do I get my pages back?",
+ answer:
+ "No. Deleting a document removes it from your knowledge base, but the pages it used are not refunded. Pages track your total usage over time, not how much is currently stored. So be mindful of what you index. Once pages are spent, they're spent even if you later remove the document.",
+ },
+ ],
+ },
+ {
+ title: "File Types & Connectors",
+ items: [
+ {
+ question: "Which file types count toward my page limit?",
+ answer:
+ "Page limits only apply to document files that need processing, including PDFs, Word documents (DOC, DOCX, ODT, RTF), presentations (PPT, PPTX, ODP), spreadsheets (XLS, XLSX, ODS), ebooks (EPUB), and images (JPG, PNG, TIFF, WebP, BMP). Plain text files, code files, Markdown, CSV, TSV, HTML, audio, and video files do not consume any pages.",
+ },
+ {
+ question: "How are pages consumed?",
+ answer:
+ "Pages are deducted whenever a document file is successfully indexed into your knowledge base, whether through direct uploads or file-based connector syncs (Google Drive, OneDrive, Dropbox, Local Folder). SurfSense checks your remaining pages before processing and only charges you after the file is indexed. Duplicate documents are automatically detected and won't cost you extra pages.",
+ },
+ {
+ question: "Do connectors like Slack, Notion, or Gmail use pages?",
+ answer:
+ "No. Connectors that work with structured text data like Slack, Discord, Notion, Confluence, Jira, Linear, ClickUp, GitHub, Gmail, Google Calendar, Microsoft Teams, Airtable, Elasticsearch, Web Crawler, BookStack, Obsidian, and Luma do not use pages at all. Page limits only apply to file-based connectors that need document processing, such as Google Drive, OneDrive, Dropbox, and Local Folder syncs.",
+ },
+ ],
+ },
+ {
+ title: "Self-Hosting",
+ items: [
+ {
+ question: "Can I self-host SurfSense with unlimited pages?",
+ answer:
+ "Yes! When self-hosting, you have full control over your page limits. The default self-hosted setup gives you effectively unlimited pages, so you can index as much data as your infrastructure supports.",
+ },
+ ],
+ },
+];
+
+const GridLineHorizontal = ({
+ className,
+ offset,
+}: {
+ className?: string;
+ offset?: string;
+}) => {
+ return (
+
+ );
+};
+
+const GridLineVertical = ({
+ className,
+ offset,
+}: {
+ className?: string;
+ offset?: string;
+}) => {
+ return (
+
+ );
+};
+
+function PricingFAQ() {
+ const [activeId, setActiveId] = useState(null);
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ function handleClickOutside(event: MouseEvent) {
+ if (
+ containerRef.current &&
+ !containerRef.current.contains(event.target as Node)
+ ) {
+ setActiveId(null);
+ }
+ }
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
+ const toggleQuestion = (id: string) => {
+ setActiveId(activeId === id ? null : id);
+ };
+
+ return (
+
+
+
+ Frequently Asked Questions
+
+
+ Everything you need to know about SurfSense pages and billing.
+ Can't find what you need? Reach out at{" "}
+
+ rohan@surfsense.com
+
+
+
+
+
+ {faqData.map((section) => (
+
+
+ {section.title}
+
+
+ {section.items.map((item, index) => {
+ const id = `${section.title}-${index}`;
+ const isActive = activeId === id;
+
+ return (
+
+ {isActive && (
+
+
+ )}
+
toggleQuestion(id)}
+ className="flex w-full items-center justify-between px-4 py-4 text-left"
+ >
+
+ {item.question}
+
+
+
+
+
+ {isActive && (
+
+
+ {item.answer}
+
+
+ )}
+
+
+ );
+ })}
+
+
+ ))}
+
+
diff --git a/surfsense_web/components/shared/vision-config-dialog.tsx b/surfsense_web/components/shared/vision-config-dialog.tsx
index 7332d3dcd..7f96b0594 100644
--- a/surfsense_web/components/shared/vision-config-dialog.tsx
+++ b/surfsense_web/components/shared/vision-config-dialog.tsx
@@ -49,6 +49,7 @@ interface VisionConfigDialogProps {
isGlobal: boolean;
searchSpaceId: number;
mode: "create" | "edit" | "view";
+ defaultProvider?: string;
}
const INITIAL_FORM = {
@@ -68,6 +69,7 @@ export function VisionConfigDialog({
isGlobal,
searchSpaceId,
mode,
+ defaultProvider,
}: VisionConfigDialogProps) {
const [isSubmitting, setIsSubmitting] = useState(false);
const [formData, setFormData] = useState(INITIAL_FORM);
@@ -87,11 +89,11 @@ export function VisionConfigDialog({
api_version: (config as VisionLLMConfig).api_version || "",
});
} else if (mode === "create") {
- setFormData(INITIAL_FORM);
+ setFormData({ ...INITIAL_FORM, provider: defaultProvider ?? "" });
}
setScrollPos("top");
}
- }, [open, mode, config, isGlobal]);
+ }, [open, mode, config, isGlobal, defaultProvider]);
const { mutateAsync: createConfig } = useAtomValue(createVisionLLMConfigMutationAtom);
const { mutateAsync: updateConfig } = useAtomValue(updateVisionLLMConfigMutationAtom);
diff --git a/surfsense_web/components/tool-ui/image/index.tsx b/surfsense_web/components/tool-ui/image/index.tsx
index 9c39f4928..0536ede66 100644
--- a/surfsense_web/components/tool-ui/image/index.tsx
+++ b/surfsense_web/components/tool-ui/image/index.tsx
@@ -288,7 +288,7 @@ export function Image({
alt={alt}
width={0}
height={0}
- sizes="100vw"
+ sizes={`(max-width: ${maxWidth}) 100vw, ${maxWidth}`}
loading="eager"
className={cn(
"w-full h-auto transition-transform duration-300",
@@ -307,7 +307,7 @@ export function Image({
src={src}
alt={alt}
fill
- sizes="(max-width: 512px) 100vw, 512px"
+ sizes={`(max-width: ${maxWidth}) 100vw, ${maxWidth}`}
className={cn(
"transition-transform duration-300",
fit === "cover" ? "object-cover" : "object-contain",
diff --git a/surfsense_web/contracts/types/search-space.types.ts b/surfsense_web/contracts/types/search-space.types.ts
index 7b4fefb62..7449f82b1 100644
--- a/surfsense_web/contracts/types/search-space.types.ts
+++ b/surfsense_web/contracts/types/search-space.types.ts
@@ -10,6 +10,7 @@ export const searchSpace = z.object({
citations_enabled: z.boolean(),
qna_custom_instructions: z.string().nullable(),
shared_memory_md: z.string().nullable().optional(),
+ ai_file_sort_enabled: z.boolean().optional().default(false),
member_count: z.number(),
is_owner: z.boolean(),
});
@@ -56,6 +57,7 @@ export const updateSearchSpaceRequest = z.object({
citations_enabled: true,
qna_custom_instructions: true,
shared_memory_md: true,
+ ai_file_sort_enabled: true,
})
.partial(),
});
diff --git a/surfsense_web/lib/apis/search-spaces-api.service.ts b/surfsense_web/lib/apis/search-spaces-api.service.ts
index 3e2006e46..e593245f8 100644
--- a/surfsense_web/lib/apis/search-spaces-api.service.ts
+++ b/surfsense_web/lib/apis/search-spaces-api.service.ts
@@ -1,3 +1,4 @@
+import { z } from "zod";
import {
type CreateSearchSpaceRequest,
createSearchSpaceRequest,
@@ -117,6 +118,17 @@ class SearchSpacesApiService {
return baseApiService.delete(`/api/v1/searchspaces/${request.id}`, deleteSearchSpaceResponse);
};
+ /**
+ * Trigger AI file sorting for all documents in a search space
+ */
+ triggerAiSort = async (searchSpaceId: number) => {
+ return baseApiService.post(
+ `/api/v1/searchspaces/${searchSpaceId}/ai-sort`,
+ z.object({ message: z.string() }),
+ {}
+ );
+ };
+
/**
* Leave a search space (remove own membership)
* This is used by non-owners to leave a shared search space
diff --git a/surfsense_web/lib/comments/utils.ts b/surfsense_web/lib/comments/utils.ts
new file mode 100644
index 000000000..acbcee506
--- /dev/null
+++ b/surfsense_web/lib/comments/utils.ts
@@ -0,0 +1,4 @@
+export function convertRenderedToDisplay(contentRendered: string): string {
+ // Convert @{DisplayName} format to @DisplayName for editing
+ return contentRendered.replace(/@\{([^}]+)\}/g, "@$1");
+}
diff --git a/surfsense_web/lib/documents/document-type-labels.ts b/surfsense_web/lib/documents/document-type-labels.ts
new file mode 100644
index 000000000..844961886
--- /dev/null
+++ b/surfsense_web/lib/documents/document-type-labels.ts
@@ -0,0 +1,41 @@
+export function getDocumentTypeLabel(type: string): string {
+ const labelMap: Record = {
+ EXTENSION: "Extension",
+ CRAWLED_URL: "Web Page",
+ FILE: "File",
+ SLACK_CONNECTOR: "Slack",
+ TEAMS_CONNECTOR: "Microsoft Teams",
+ ONEDRIVE_FILE: "OneDrive",
+ DROPBOX_FILE: "Dropbox",
+ NOTION_CONNECTOR: "Notion",
+ YOUTUBE_VIDEO: "YouTube Video",
+ GITHUB_CONNECTOR: "GitHub",
+ LINEAR_CONNECTOR: "Linear",
+ DISCORD_CONNECTOR: "Discord",
+ JIRA_CONNECTOR: "Jira",
+ CONFLUENCE_CONNECTOR: "Confluence",
+ CLICKUP_CONNECTOR: "ClickUp",
+ GOOGLE_CALENDAR_CONNECTOR: "Google Calendar",
+ GOOGLE_GMAIL_CONNECTOR: "Gmail",
+ GOOGLE_DRIVE_FILE: "Google Drive",
+ AIRTABLE_CONNECTOR: "Airtable",
+ LUMA_CONNECTOR: "Luma",
+ ELASTICSEARCH_CONNECTOR: "Elasticsearch",
+ BOOKSTACK_CONNECTOR: "BookStack",
+ CIRCLEBACK: "Circleback",
+ OBSIDIAN_CONNECTOR: "Obsidian",
+ LOCAL_FOLDER_FILE: "Local Folder",
+ SURFSENSE_DOCS: "SurfSense Docs",
+ NOTE: "Note",
+ COMPOSIO_GOOGLE_DRIVE_CONNECTOR: "Composio Google Drive",
+ COMPOSIO_GMAIL_CONNECTOR: "Composio Gmail",
+ COMPOSIO_GOOGLE_CALENDAR_CONNECTOR: "Composio Google Calendar",
+ };
+ return (
+ labelMap[type] ||
+ type
+ .split("_")
+ .map((word) => word.charAt(0) + word.slice(1).toLowerCase())
+ .join(" ")
+ );
+}
diff --git a/surfsense_web/lib/layout-events.ts b/surfsense_web/lib/layout-events.ts
new file mode 100644
index 000000000..45c52f7a4
--- /dev/null
+++ b/surfsense_web/lib/layout-events.ts
@@ -0,0 +1 @@
+export const SLIDEOUT_PANEL_OPENED_EVENT = "slideout-panel-opened";