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

refactor: implement SearchSpaceSettingsPage and SearchSpaceSettingsPanel components, replacing the previous settings dialog and enhancing tab navigation for search space settings

Browse source
This commit is contained in:
Anish Sarkar 2026-05-18 02:02:45 +05:30
parent 08142f9add
commit b6aed05683
13 changed files with 330 additions and 329 deletions
Download patch file Download diff file Expand all files Collapse all files

40
surfsense_web/app/dashboard/[search_space_id]/search-space-settings/page.tsx Normal file
View file

@ -0,0 +1,40 @@
import {
SearchSpaceSettingsPanel,
type SearchSpaceSettingsTab,
} from "@/components/settings/search-space-settings-panel";
const SEARCH_SPACE_SETTINGS_TABS = new Set<string>([
"general",
"roles",
"models",
"image-models",
"vision-models",
"team-roles",
"prompts",
"team-memory",
"public-links",
]);
function getInitialTab(tab: string | string[] | undefined): SearchSpaceSettingsTab {
const value = Array.isArray(tab) ? tab[0] : tab;
return value && SEARCH_SPACE_SETTINGS_TABS.has(value)
? (value as SearchSpaceSettingsTab)
: "general";
}
export default async function SearchSpaceSettingsPage({
params,
searchParams,
}: {
params: Promise<{ search_space_id: string }>;
searchParams: Promise<{ tab?: string | string[] }>;
}) {
const [{ search_space_id }, resolvedSearchParams] = await Promise.all([params, searchParams]);
return (
<SearchSpaceSettingsPanel
searchSpaceId={search_space_id}
initialTab={getInitialTab(resolvedSearchParams.tab)}
/>
);
}

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

@ -1,7 +1,7 @@
"use client";
import { useQuery } from "@tanstack/react-query";
import { useAtomValue, useSetAtom } from "jotai";
import { useAtomValue } from "jotai";
import {
Calendar,
Check,
@ -20,6 +20,7 @@ import {
UserPlus,
Users,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import {
@ -31,7 +32,6 @@ import {
updateMemberMutationAtom,
} from "@/atoms/members/members-mutation.atoms";
import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import {
AlertDialog,
AlertDialogAction,
@ -346,6 +346,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
{owners.map((member) => (
<MemberRow
key={`member-${member.id}`}
searchSpaceId={searchSpaceId}
member={member}
roles={roles}
canManageRoles={canManageRoles}
@ -357,6 +358,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
{paginatedMembers.map((member) => (
<MemberRow
key={`member-${member.id}`}
searchSpaceId={searchSpaceId}
member={member}
roles={roles}
canManageRoles={canManageRoles}
@ -433,6 +435,7 @@ export function TeamContent({ searchSpaceId }: TeamContentProps) {
}
function MemberRow({
searchSpaceId,
member,
roles,
canManageRoles,
@ -440,6 +443,7 @@ function MemberRow({
onUpdateRole,
onRemoveMember,
}: {
searchSpaceId: number;
member: Membership;
roles: Role[];
canManageRoles: boolean;
@ -447,7 +451,7 @@ function MemberRow({
onUpdateRole: (membershipId: number, roleId: number | null) => Promise<Membership>;
onRemoveMember: (membershipId: number) => Promise<boolean>;
}) {
const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
const router = useRouter();
const initials = getAvatarInitials(member);
const displayName = member.user_display_name || member.user_email || "Unknown";
const roleName = member.is_owner ? "Owner" : member.role?.name || "No role";
@ -541,10 +545,7 @@ function MemberRow({
<DropdownMenuSeparator className="dark:bg-white/5" />
<DropdownMenuItem
onClick={() =>
setSearchSpaceSettingsDialog({
open: true,
initialTab: "team-roles",
})
router.push(`/dashboard/${searchSpaceId}/search-space-settings?tab=team-roles`)
}
>
Manage Roles

5
surfsense_web/atoms/layout/dialogs.atom.ts Normal file
View file

@ -0,0 +1,5 @@
import { atom } from "jotai";
export const teamDialogAtom = atom<boolean>(false);
export const announcementsDialogAtom = atom<boolean>(false);

15
surfsense_web/atoms/settings/settings-dialog.atoms.ts
View file

@ -1,15 +0,0 @@
import { atom } from "jotai";
export interface SearchSpaceSettingsDialogState {
open: boolean;
initialTab: string;
}
export const searchSpaceSettingsDialogAtom = atom<SearchSpaceSettingsDialogState>({
open: false,
initialTab: "general",
});
export const teamDialogAtom = atom<boolean>(false);
export const announcementsDialogAtom = atom<boolean>(false);

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

@ -2,7 +2,7 @@
import { useAtom } from "jotai";
import { useEffect } from "react";
import { announcementsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { announcementsDialogAtom } from "@/atoms/layout/dialogs.atom";
import { AnnouncementCard } from "@/components/announcements/AnnouncementCard";
import { AnnouncementsEmptyState } from "@/components/announcements/AnnouncementsEmptyState";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";

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

@ -1,7 +1,8 @@
"use client";
import { useAtomValue, useSetAtom } from "jotai";
import { useAtomValue } from "jotai";
import { AlertTriangle, Settings } from "lucide-react";
import { useRouter } from "next/navigation";
import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
@ -10,7 +11,6 @@ import {
llmPreferencesAtom,
} from "@/atoms/new-llm-config/new-llm-config-query.atoms";
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
@ -44,8 +44,8 @@ interface ConnectorIndicatorProps {
export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, ConnectorIndicatorProps>(
(_props, ref) => {
const router = useRouter();
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
const { data: preferences = {}, isFetching: preferencesLoading } =
useAtomValue(llmPreferencesAtom);
const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
@ -397,10 +397,9 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
variant="outline"
onClick={() => {
handleOpenChange(false);
setSearchSpaceSettingsDialog({
open: true,
initialTab: "models",
});
router.push(
`/dashboard/${searchSpaceId}/search-space-settings?tab=models`
);
}}
>
<Settings className="mr-2 h-4 w-4" />

11
surfsense_web/components/assistant-ui/document-upload-popup.tsx
View file

@ -1,7 +1,8 @@
"use client";
import { useAtomValue, useSetAtom } from "jotai";
import { useAtomValue } from "jotai";
import { AlertTriangle, Settings } from "lucide-react";
import { useRouter } from "next/navigation";
import {
createContext,
type FC,
@ -16,7 +17,6 @@ import {
llmPreferencesAtom,
} from "@/atoms/new-llm-config/new-llm-config-query.atoms";
import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
@ -98,8 +98,8 @@ const DocumentUploadPopupContent: FC<{
isOpen: boolean;
onOpenChange: (open: boolean) => void;
}> = ({ isOpen, onOpenChange }) => {
const router = useRouter();
const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
const { data: preferences = {}, isFetching: preferencesLoading } =
useAtomValue(llmPreferencesAtom);
const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
@ -164,10 +164,7 @@ const DocumentUploadPopupContent: FC<{
variant="outline"
onClick={() => {
onOpenChange(false);
setSearchSpaceSettingsDialog({
open: true,
initialTab: "models",
});
router.push(`/dashboard/${searchSpaceId}/search-space-settings?tab=models`);
}}
>
<Settings className="mr-2 h-4 w-4" />

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

@ -11,19 +11,14 @@ import { toast } from "sonner";
import { currentThreadAtom, resetCurrentThreadAtom } from "@/atoms/chat/current-thread.atom";
import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
import { announcementsDialogAtom, teamDialogAtom } from "@/atoms/layout/dialogs.atom";
import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
import {
announcementsDialogAtom,
searchSpaceSettingsDialogAtom,
teamDialogAtom,
} from "@/atoms/settings/settings-dialog.atoms";
import { removeChatTabAtom, syncChatTabAtom, type Tab } from "@/atoms/tabs/tabs.atom";
import { currentUserAtom } from "@/atoms/user/user-query.atoms";
import { ActionLogDialog } from "@/components/agent-action-log/action-log-dialog";
import { AnnouncementsDialog } from "@/components/announcements/AnnouncementsDialog";
import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
import { TeamDialog } from "@/components/settings/team-dialog";
import {
AlertDialog,
@ -380,7 +375,6 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
setIsCreateSearchSpaceDialogOpen(true);
}, []);
const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
const setTeamDialogOpen = useSetAtom(teamDialogAtom);
const setAnnouncementsDialog = useSetAtom(announcementsDialogAtom);
@ -393,10 +387,10 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
}, [setAnnouncementsDialog]);
const handleSearchSpaceSettings = useCallback(
(_space: SearchSpace) => {
setSearchSpaceSettingsDialog({ open: true, initialTab: "general" });
(space: SearchSpace) => {
router.push(`/dashboard/${space.id}/search-space-settings`);
},
[setSearchSpaceSettingsDialog]
[router]
);
const handleSearchSpaceDeleteClick = useCallback((space: SearchSpace) => {
@ -568,8 +562,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
);
const handleSettings = useCallback(() => {
setSearchSpaceSettingsDialog({ open: true, initialTab: "general" });
}, [setSearchSpaceSettingsDialog]);
router.push(`/dashboard/${searchSpaceId}/search-space-settings`);
}, [router, searchSpaceId]);
const handleManageMembers = useCallback(() => {
setTeamDialogOpen(true);
@ -666,10 +660,12 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
// Detect if we're on the chat page (needs overflow-hidden for chat's own scroll)
const isChatPage = pathname?.includes("/new-chat") ?? false;
const isUserSettingsPage = pathname?.endsWith("/user-settings") === true;
const isSearchSpaceSettingsPage = pathname?.endsWith("/search-space-settings") === true;
const useWorkspacePanel =
pathname?.endsWith("/buy-more") === true ||
pathname?.endsWith("/more-pages") === true ||
isUserSettingsPage;
isUserSettingsPage ||
isSearchSpaceSettingsPage;
return (
<>
@ -709,9 +705,13 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
isChatPage={isChatPage}
useWorkspacePanel={useWorkspacePanel}
workspacePanelViewportClassName={
isUserSettingsPage ? "items-start justify-center px-6 py-8 md:px-10 md:py-10" : undefined
isUserSettingsPage || isSearchSpaceSettingsPage
? "items-start justify-center px-6 py-8 md:px-10 md:py-10"
: undefined
}
workspacePanelContentClassName={
isUserSettingsPage || isSearchSpaceSettingsPage ? "max-w-5xl" : undefined
}
workspacePanelContentClassName={isUserSettingsPage ? "max-w-5xl" : undefined}
isLoadingChats={isLoadingThreads}
activeSlideoutPanel={activeSlideoutPanel}
onSlideoutPanelChange={setActiveSlideoutPanel}
@ -891,7 +891,6 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
onOpenChange={setIsCreateSearchSpaceDialogOpen}
/>
<SearchSpaceSettingsDialog searchSpaceId={Number(searchSpaceId)} />
<TeamDialog searchSpaceId={Number(searchSpaceId)} />
<AnnouncementsDialog />

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

@ -3,13 +3,13 @@
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useAtomValue, useSetAtom } from "jotai";
import { Earth, User, Users } from "lucide-react";
import { useRouter } from "next/navigation";
import { useCallback, useState } from "react";
import { toast } from "sonner";
import { currentThreadAtom, setThreadVisibilityAtom } from "@/atoms/chat/current-thread.atom";
import { myAccessAtom } from "@/atoms/members/members-query.atoms";
import { createPublicChatSnapshotMutationAtom } from "@/atoms/public-chat-snapshots/public-chat-snapshots-mutation.atoms";
import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@ -49,8 +49,8 @@ const visibilityOptions: {
export function ChatShareButton({ thread, onVisibilityChange, className }: ChatShareButtonProps) {
const queryClient = useQueryClient();
const router = useRouter();
const [open, setOpen] = useState(false);
const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
// Use Jotai atom for visibility (single source of truth)
const currentThreadState = useAtomValue(currentThreadAtom);
@ -148,10 +148,9 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
variant="ghost"
size="icon"
onClick={() =>
setSearchSpaceSettingsDialog({
open: true,
initialTab: "public-links",
})
router.push(
`/dashboard/${thread.search_space_id}/search-space-settings?tab=public-links`
)
}
className="size-8 bg-muted/50 hover:bg-accent hover:text-accent-foreground"
>

140
surfsense_web/components/settings/search-space-settings-dialog.tsx
View file

@ -1,140 +0,0 @@
"use client";
import { useAtom } from "jotai";
import {
BookText,
Bot,
Brain,
CircleUser,
Earth,
ImageIcon,
ListChecks,
ScanEye,
UserKey,
} from "lucide-react";
import dynamic from "next/dynamic";
import { useTranslations } from "next-intl";
import type React from "react";
import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { SettingsDialog } from "@/components/settings/settings-dialog";
const GeneralSettingsManager = dynamic(
() =>
import("@/components/settings/general-settings-manager").then((m) => ({
default: m.GeneralSettingsManager,
})),
{ ssr: false }
);
const AgentModelManager = dynamic(
() =>
import("@/components/settings/agent-model-manager").then((m) => ({
default: m.AgentModelManager,
})),
{ ssr: false }
);
const LLMRoleManager = dynamic(
() =>
import("@/components/settings/llm-role-manager").then((m) => ({ default: m.LLMRoleManager })),
{ ssr: false }
);
const ImageModelManager = dynamic(
() =>
import("@/components/settings/image-model-manager").then((m) => ({
default: m.ImageModelManager,
})),
{ ssr: false }
);
const VisionModelManager = dynamic(
() =>
import("@/components/settings/vision-model-manager").then((m) => ({
default: m.VisionModelManager,
})),
{ ssr: false }
);
const RolesManager = dynamic(
() => import("@/components/settings/roles-manager").then((m) => ({ default: m.RolesManager })),
{ ssr: false }
);
const PromptConfigManager = dynamic(
() =>
import("@/components/settings/prompt-config-manager").then((m) => ({
default: m.PromptConfigManager,
})),
{ ssr: false }
);
const PublicChatSnapshotsManager = dynamic(
() =>
import("@/components/public-chat-snapshots/public-chat-snapshots-manager").then((m) => ({
default: m.PublicChatSnapshotsManager,
})),
{ ssr: false }
);
const TeamMemoryManager = dynamic(
() =>
import("@/components/settings/team-memory-manager").then((m) => ({
default: m.TeamMemoryManager,
})),
{ ssr: false }
);
interface SearchSpaceSettingsDialogProps {
searchSpaceId: number;
}
export function SearchSpaceSettingsDialog({ searchSpaceId }: SearchSpaceSettingsDialogProps) {
const t = useTranslations("searchSpaceSettings");
const [state, setState] = useAtom(searchSpaceSettingsDialogAtom);
const navItems = [
{ value: "general", label: t("nav_general"), icon: <CircleUser className="h-4 w-4" /> },
{ value: "roles", label: t("nav_role_assignments"), icon: <ListChecks className="h-4 w-4" /> },
{ value: "models", label: t("nav_agent_models"), icon: <Bot className="h-4 w-4" /> },
{
value: "image-models",
label: t("nav_image_models"),
icon: <ImageIcon className="h-4 w-4" />,
},
{
value: "vision-models",
label: t("nav_vision_models"),
icon: <ScanEye className="h-4 w-4" />,
},
{ value: "team-roles", label: t("nav_team_roles"), icon: <UserKey className="h-4 w-4" /> },
{
value: "prompts",
label: t("nav_system_instructions"),
icon: <BookText className="h-4 w-4" />,
},
{
value: "team-memory",
label: "Team Memory",
icon: <Brain className="h-4 w-4" />,
},
{ value: "public-links", label: t("nav_public_links"), icon: <Earth className="h-4 w-4" /> },
];
const content: Record<string, React.ReactNode> = {
general: <GeneralSettingsManager searchSpaceId={searchSpaceId} />,
models: <AgentModelManager searchSpaceId={searchSpaceId} />,
roles: <LLMRoleManager key={searchSpaceId} searchSpaceId={searchSpaceId} />,
"image-models": <ImageModelManager searchSpaceId={searchSpaceId} />,
"vision-models": <VisionModelManager searchSpaceId={searchSpaceId} />,
"team-roles": <RolesManager searchSpaceId={searchSpaceId} />,
prompts: <PromptConfigManager searchSpaceId={searchSpaceId} />,
"team-memory": <TeamMemoryManager searchSpaceId={searchSpaceId} />,
"public-links": <PublicChatSnapshotsManager searchSpaceId={searchSpaceId} />,
};
return (
<SettingsDialog
open={state.open}
onOpenChange={(open) => setState((prev) => ({ ...prev, open }))}
title={t("title")}
navItems={navItems}
activeItem={state.initialTab}
onItemChange={(tab) => setState((prev) => ({ ...prev, initialTab: tab }))}
>
<div className="pt-4">{content[state.initialTab]}</div>
</SettingsDialog>
);
}

245
surfsense_web/components/settings/search-space-settings-panel.tsx Normal file
View file

@ -0,0 +1,245 @@
"use client";
import {
BookText,
Bot,
Brain,
CircleUser,
Earth,
ImageIcon,
ListChecks,
ScanEye,
UserKey,
} from "lucide-react";
import dynamic from "next/dynamic";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import type React from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
const GeneralSettingsManager = dynamic(
() =>
import("@/components/settings/general-settings-manager").then((m) => ({
default: m.GeneralSettingsManager,
})),
{ ssr: false }
);
const AgentModelManager = dynamic(
() =>
import("@/components/settings/agent-model-manager").then((m) => ({
default: m.AgentModelManager,
})),
{ ssr: false }
);
const LLMRoleManager = dynamic(
() =>
import("@/components/settings/llm-role-manager").then((m) => ({ default: m.LLMRoleManager })),
{ ssr: false }
);
const ImageModelManager = dynamic(
() =>
import("@/components/settings/image-model-manager").then((m) => ({
default: m.ImageModelManager,
})),
{ ssr: false }
);
const VisionModelManager = dynamic(
() =>
import("@/components/settings/vision-model-manager").then((m) => ({
default: m.VisionModelManager,
})),
{ ssr: false }
);
const RolesManager = dynamic(
() => import("@/components/settings/roles-manager").then((m) => ({ default: m.RolesManager })),
{ ssr: false }
);
const PromptConfigManager = dynamic(
() =>
import("@/components/settings/prompt-config-manager").then((m) => ({
default: m.PromptConfigManager,
})),
{ ssr: false }
);
const PublicChatSnapshotsManager = dynamic(
() =>
import("@/components/public-chat-snapshots/public-chat-snapshots-manager").then((m) => ({
default: m.PublicChatSnapshotsManager,
})),
{ ssr: false }
);
const TeamMemoryManager = dynamic(
() =>
import("@/components/settings/team-memory-manager").then((m) => ({
default: m.TeamMemoryManager,
})),
{ ssr: false }
);
export type SearchSpaceSettingsTab =
| "general"
| "roles"
| "models"
| "image-models"
| "vision-models"
| "team-roles"
| "prompts"
| "team-memory"
| "public-links";
interface SearchSpaceSettingsPanelProps {
searchSpaceId: string;
initialTab?: SearchSpaceSettingsTab;
}
export function SearchSpaceSettingsPanel({
searchSpaceId,
initialTab = "general",
}: SearchSpaceSettingsPanelProps) {
const t = useTranslations("searchSpaceSettings");
const router = useRouter();
const numericSearchSpaceId = Number(searchSpaceId);
const [activeTab, setActiveTab] = useState<SearchSpaceSettingsTab>(initialTab);
const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
useEffect(() => {
setActiveTab(initialTab);
}, [initialTab]);
const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
const el = e.currentTarget;
const atStart = el.scrollLeft <= 2;
const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
}, []);
const navItems = useMemo(
() => [
{ value: "general", label: t("nav_general"), icon: <CircleUser className="h-4 w-4" /> },
{ value: "roles", label: t("nav_role_assignments"), icon: <ListChecks className="h-4 w-4" /> },
{ value: "models", label: t("nav_agent_models"), icon: <Bot className="h-4 w-4" /> },
{
value: "image-models",
label: t("nav_image_models"),
icon: <ImageIcon className="h-4 w-4" />,
},
{
value: "vision-models",
label: t("nav_vision_models"),
icon: <ScanEye className="h-4 w-4" />,
},
{ value: "team-roles", label: t("nav_team_roles"), icon: <UserKey className="h-4 w-4" /> },
{
value: "prompts",
label: t("nav_system_instructions"),
icon: <BookText className="h-4 w-4" />,
},
{
value: "team-memory",
label: "Team Memory",
icon: <Brain className="h-4 w-4" />,
},
{ value: "public-links", label: t("nav_public_links"), icon: <Earth className="h-4 w-4" /> },
],
[t]
);
const selectedTab = navItems.some((item) => item.value === activeTab) ? activeTab : "general";
const selectedLabel = navItems.find((item) => item.value === selectedTab)?.label ?? t("title");
const handleItemChange = (tab: SearchSpaceSettingsTab) => {
setActiveTab(tab);
const suffix = tab === "general" ? "" : `?tab=${tab}`;
router.replace(`/dashboard/${searchSpaceId}/search-space-settings${suffix}`, { scroll: false });
};
return (
<section className="flex h-full min-h-[min(680px,calc(100vh-5rem))] w-full select-none flex-col gap-6 md:pt-6 md:flex-row">
<div className="md:w-[220px] md:shrink-0">
<h1 className="mb-4 px-1 text-2xl font-semibold tracking-tight">{t("title")}</h1>
<nav className="hidden flex-col gap-0.5 md:flex">
{navItems.map((item) => (
<Button
key={item.value}
type="button"
variant="ghost"
onClick={() => handleItemChange(item.value as SearchSpaceSettingsTab)}
className={cn(
"h-auto justify-start gap-3 px-3 py-2.5 text-left text-sm font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
selectedTab === item.value
? "bg-accent text-accent-foreground"
: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)}
>
{item.icon}
{item.label}
</Button>
))}
</nav>
<div
className="overflow-x-auto border-b border-border pb-3 md:hidden"
onScroll={handleTabScroll}
style={{
maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
}}
>
<div className="flex gap-1">
{navItems.map((item) => (
<Button
key={item.value}
type="button"
variant="ghost"
onClick={() => handleItemChange(item.value as SearchSpaceSettingsTab)}
className={cn(
"h-auto shrink-0 gap-2 px-3 py-1.5 text-xs font-medium transition-colors duration-150 focus:outline-none focus-visible:outline-none",
selectedTab === item.value
? "bg-accent text-accent-foreground"
: "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)}
>
{item.icon}
{item.label}
</Button>
))}
</div>
</div>
</div>
<div className="min-w-0 flex-1">
<div className="hidden md:block">
<h2 className="text-lg font-semibold">{selectedLabel}</h2>
<Separator className="mt-4" />
</div>
<div className="min-w-0 pt-4 md:max-w-3xl">
{selectedTab === "general" && (
<GeneralSettingsManager searchSpaceId={numericSearchSpaceId} />
)}
{selectedTab === "models" && <AgentModelManager searchSpaceId={numericSearchSpaceId} />}
{selectedTab === "roles" && (
<LLMRoleManager key={searchSpaceId} searchSpaceId={numericSearchSpaceId} />
)}
{selectedTab === "image-models" && (
<ImageModelManager searchSpaceId={numericSearchSpaceId} />
)}
{selectedTab === "vision-models" && (
<VisionModelManager searchSpaceId={numericSearchSpaceId} />
)}
{selectedTab === "team-roles" && <RolesManager searchSpaceId={numericSearchSpaceId} />}
{selectedTab === "prompts" && (
<PromptConfigManager searchSpaceId={numericSearchSpaceId} />
)}
{selectedTab === "team-memory" && (
<TeamMemoryManager searchSpaceId={numericSearchSpaceId} />
)}
{selectedTab === "public-links" && (
<PublicChatSnapshotsManager searchSpaceId={numericSearchSpaceId} />
)}
</div>
</div>
</section>
);
}

129
surfsense_web/components/settings/settings-dialog.tsx
View file

@ -1,129 +0,0 @@
"use client";
import type * as React from "react";
import { useCallback, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
interface NavItem {
value: string;
label: string;
icon: React.ReactNode;
}
interface SettingsDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
navItems: NavItem[];
activeItem: string;
onItemChange: (value: string) => void;
children: React.ReactNode;
}
export function SettingsDialog({
open,
onOpenChange,
title,
navItems,
activeItem,
onItemChange,
children,
}: SettingsDialogProps) {
const activeRef = useRef<HTMLButtonElement>(null);
const [tabScrollPos, setTabScrollPos] = useState<"start" | "middle" | "end">("start");
const handleTabScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
const el = e.currentTarget;
const atStart = el.scrollLeft <= 2;
const atEnd = el.scrollWidth - el.scrollLeft - el.clientWidth <= 2;
setTabScrollPos(atStart ? "start" : atEnd ? "end" : "middle");
}, []);
const handleItemChange = (value: string) => {
onItemChange(value);
activeRef.current?.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="select-none max-w-[900px] w-[95vw] md:w-[90vw] h-[90vh] md:h-[80vh] max-h-[640px] flex flex-col md:flex-row p-0 gap-0 overflow-hidden [--card:var(--popover)]">
<DialogTitle className="sr-only">{title}</DialogTitle>
{/* Desktop: Left sidebar */}
<nav className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-border p-3 pt-6">
<div className="flex flex-col gap-0.5">
{navItems.map((item) => (
<Button
key={item.value}
type="button"
variant="ghost"
onClick={() => onItemChange(item.value)}
className={cn(
"h-auto justify-start gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none",
activeItem === item.value
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)}
>
{item.icon}
{item.label}
</Button>
))}
</div>
</nav>
{/* Mobile: Top header + horizontal tabs */}
<div className="flex md:hidden flex-col shrink-0">
<div className="px-4 pt-4 pb-2">
<h2 className="text-base font-semibold">{title}</h2>
</div>
<div
className="overflow-x-auto scrollbar-hide border-b border-border"
onScroll={handleTabScroll}
style={{
maskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
WebkitMaskImage: `linear-gradient(to right, ${tabScrollPos === "start" ? "black" : "transparent"}, black 24px, black calc(100% - 24px), ${tabScrollPos === "end" ? "black" : "transparent"})`,
}}
>
<div className="flex gap-1 px-4 pb-2">
{navItems.map((item) => (
<Button
key={item.value}
ref={activeItem === item.value ? activeRef : undefined}
type="button"
variant="ghost"
onClick={() => handleItemChange(item.value)}
className={cn(
"h-auto shrink-0 gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus-visible:outline-none",
activeItem === item.value
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
)}
>
{item.icon}
{item.label}
</Button>
))}
</div>
</div>
</div>
{/* Content area */}
<div className="flex flex-1 flex-col overflow-hidden min-w-0">
<div className="hidden md:block px-8 pt-6 pb-2">
<h2 className="text-lg font-semibold">
{navItems.find((i) => i.value === activeItem)?.label ?? title}
</h2>
<Separator className="mt-4" />
</div>
<div className="flex-1 overflow-y-auto overflow-x-hidden">
<div className="px-4 md:px-8 pb-6 pt-4 md:pt-0 min-w-0">{children}</div>
</div>
</div>
</DialogContent>
</Dialog>
);
}

2
surfsense_web/components/settings/team-dialog.tsx
View file

@ -3,7 +3,7 @@
import { useAtom } from "jotai";
import { useTranslations } from "next-intl";
import { TeamContent } from "@/app/dashboard/[search_space_id]/team/team-content";
import { teamDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
import { teamDialogAtom } from "@/atoms/layout/dialogs.atom";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
interface TeamDialogProps {