feat: add general settings management to search space settings

- Introduced a new GeneralSettingsManager component for managing search space name and description.
- Updated the settings navigation to include a general section with an icon and description.
- Modified the SettingsPage to default to the general settings section.
- Enhanced the CreateSearchSpaceDialog for improved UI and accessibility.
- Updated English and Chinese translations for new settings labels and descriptions.

surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx

@@ -10,11 +10,13 @@ import {
 	MessageSquare,
 	Settings,
 	X,
+	FileText,
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useState } from "react";
+import { GeneralSettingsManager } from "@/components/settings/general-settings-manager";
 import { LLMRoleManager } from "@/components/settings/llm-role-manager";
 import { ModelConfigManager } from "@/components/settings/model-config-manager";
 import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
@@ -30,6 +32,12 @@ interface SettingsNavItem {
 }
 
 const settingsNavItems: SettingsNavItem[] = [
+	{
+		id: "general",
+		labelKey: "nav_general",
+		descriptionKey: "nav_general_desc",
+		icon: FileText,
+	},
 	{
 		id: "models",
 		labelKey: "nav_agent_configs",
@@ -262,6 +270,9 @@ function SettingsContent({
 								ease: [0.4, 0, 0.2, 1],
 							}}
 						>
+							{activeSection === "general" && (
+								<GeneralSettingsManager searchSpaceId={searchSpaceId} />
+							)}
 							{activeSection === "models" && <ModelConfigManager searchSpaceId={searchSpaceId} />}
 							{activeSection === "roles" && <LLMRoleManager searchSpaceId={searchSpaceId} />}
 							{activeSection === "prompts" && <PromptConfigManager searchSpaceId={searchSpaceId} />}
@@ -277,7 +288,7 @@ export default function SettingsPage() {
 	const router = useRouter();
 	const params = useParams();
 	const searchSpaceId = Number(params.search_space_id);
-	const [activeSection, setActiveSection] = useState("models");
+	const [activeSection, setActiveSection] = useState("general");
 	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
 	// Track settings section view

surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx

@@ -82,29 +82,31 @@ export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpac
 
 	return (
 		<Dialog open={open} onOpenChange={handleOpenChange}>
-			<DialogContent className="sm:max-w-md">
-				<DialogHeader>
-					<div className="flex items-center gap-3">
-						<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
-							<Search className="h-5 w-5 text-primary" />
+			<DialogContent className="max-w-[90vw] sm:max-w-sm p-4 sm:p-5 data-[state=open]:animate-none data-[state=closed]:animate-none">
+				<DialogHeader className="space-y-2 pb-2">
+					<div className="flex items-center gap-2 sm:gap-3">
+						<div className="flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-lg bg-primary/10 flex-shrink-0">
+							<Search className="h-4 w-4 sm:h-5 sm:w-5 text-primary" />
 						</div>
-						<div>
-							<DialogTitle>{t("create_title")}</DialogTitle>
-							<DialogDescription>{t("create_description")}</DialogDescription>
+						<div className="flex-1 min-w-0">
+							<DialogTitle className="text-base sm:text-lg">{t("create_title")}</DialogTitle>
+							<DialogDescription className="text-xs sm:text-sm mt-0.5">
+								{t("create_description")}
+							</DialogDescription>
 						</div>
 					</div>
 				</DialogHeader>
 
 				<Form {...form}>
-					<form onSubmit={form.handleSubmit(handleSubmit)} className="flex flex-col gap-4">
+					<form onSubmit={form.handleSubmit(handleSubmit)} className="flex flex-col gap-3 sm:gap-4">
 						<FormField
 							control={form.control}
 							name="name"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel>{t("name_label")}</FormLabel>
+									<FormLabel className="text-sm">{t("name_label")}</FormLabel>
 									<FormControl>
-										<Input placeholder={t("name_placeholder")} {...field} autoFocus />
+										<Input placeholder={t("name_placeholder")} {...field} autoFocus className="text-sm h-9 sm:h-10" />
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -116,38 +118,39 @@ export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpac
 							name="description"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel>
+									<FormLabel className="text-sm">
 										{t("description_label")}{" "}
 										<span className="text-muted-foreground font-normal">
 											({tCommon("optional")})
 										</span>
 									</FormLabel>
 									<FormControl>
-										<Input placeholder={t("description_placeholder")} {...field} />
+										<Input placeholder={t("description_placeholder")} {...field} className="text-sm h-9 sm:h-10" />
 									</FormControl>
 									<FormMessage />
 								</FormItem>
 							)}
 						/>
 
-						<DialogFooter className="flex gap-2 pt-2">
+						<DialogFooter className="flex-col sm:flex-row gap-2 pt-2 sm:pt-3">
 							<Button
 								type="button"
 								variant="outline"
 								onClick={() => handleOpenChange(false)}
 								disabled={isSubmitting}
+								className="w-full sm:w-auto h-9 sm:h-10 text-sm"
 							>
 								{tCommon("cancel")}
 							</Button>
-							<Button type="submit" disabled={isSubmitting}>
+							<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto h-9 sm:h-10 text-sm">
 								{isSubmitting ? (
 									<>
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+										<Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
 										{t("creating")}
 									</>
 								) : (
 									<>
-										<Plus className="mr-2 h-4 w-4" />
+										<Plus className="-mr-1 h-4 w-4" />
 										{t("create_button")}
 									</>
 								)}

surfsense_web/components/settings/general-settings-manager.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import { useQuery } from "@tanstack/react-query";
+import { Info, RotateCcw, Save } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { updateSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Skeleton } from "@/components/ui/skeleton";
+import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+
+interface GeneralSettingsManagerProps {
+	searchSpaceId: number;
+}
+
+export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManagerProps) {
+	const t = useTranslations("searchSpaceSettings");
+	const tCommon = useTranslations("common");
+	const {
+		data: searchSpace,
+		isLoading: loading,
+		refetch: fetchSearchSpace,
+	} = useQuery({
+		queryKey: cacheKeys.searchSpaces.detail(searchSpaceId.toString()),
+		queryFn: () => searchSpacesApiService.getSearchSpace({ id: searchSpaceId }),
+		enabled: !!searchSpaceId,
+	});
+
+	const { mutateAsync: updateSearchSpace } = useAtomValue(updateSearchSpaceMutationAtom);
+
+	const [name, setName] = useState("");
+	const [description, setDescription] = useState("");
+	const [saving, setSaving] = useState(false);
+	const [hasChanges, setHasChanges] = useState(false);
+
+	// Initialize state from fetched search space
+	useEffect(() => {
+		if (searchSpace) {
+			setName(searchSpace.name || "");
+			setDescription(searchSpace.description || "");
+			setHasChanges(false);
+		}
+	}, [searchSpace]);
+
+	// Track changes
+	useEffect(() => {
+		if (searchSpace) {
+			const currentName = searchSpace.name || "";
+			const currentDescription = searchSpace.description || "";
+			const changed = currentName !== name || currentDescription !== description;
+			setHasChanges(changed);
+		}
+	}, [searchSpace, name, description]);
+
+	const handleSave = async () => {
+		try {
+			setSaving(true);
+
+			await updateSearchSpace({
+				id: searchSpaceId,
+				data: {
+					name: name.trim(),
+					description: description.trim() || undefined,
+				},
+			});
+
+			setHasChanges(false);
+			await fetchSearchSpace();
+		} catch (error: any) {
+			console.error("Error saving search space details:", error);
+			toast.error(error.message || "Failed to save search space details");
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	const handleReset = () => {
+		if (searchSpace) {
+			setName(searchSpace.name || "");
+			setDescription(searchSpace.description || "");
+			setHasChanges(false);
+		}
+	};
+
+	if (loading) {
+		return (
+			<div className="space-y-4 md:space-y-6">
+				<Card>
+					<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
+						<Skeleton className="h-5 md:h-6 w-36 md:w-48" />
+						<Skeleton className="h-3 md:h-4 w-full max-w-md mt-2" />
+					</CardHeader>
+					<CardContent className="space-y-3 md:space-y-4 px-3 md:px-6 pb-3 md:pb-6">
+						<Skeleton className="h-10 md:h-12 w-full" />
+						<Skeleton className="h-10 md:h-12 w-full" />
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-4 md:space-y-6">
+			<Alert className="py-3 md:py-4">
+				<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+				<AlertDescription className="text-xs md:text-sm">
+					Update your search space name and description. These details help identify and organize your
+					workspace.
+				</AlertDescription>
+			</Alert>
+
+			{/* Search Space Details Card */}
+			<Card>
+				<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
+					<CardTitle className="text-base md:text-lg">Search Space Details</CardTitle>
+					<CardDescription className="text-xs md:text-sm">
+						Manage the basic information for this search space.
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="space-y-4 md:space-y-5 px-3 md:px-6 pb-3 md:pb-6">
+					<div className="space-y-1.5 md:space-y-2">
+						<Label htmlFor="search-space-name" className="text-sm md:text-base font-medium">
+							{t("general_name_label")}
+						</Label>
+						<Input
+							id="search-space-name"
+							placeholder={t("general_name_placeholder")}
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							className="text-sm md:text-base h-9 md:h-10"
+						/>
+						<p className="text-[10px] md:text-xs text-muted-foreground">
+							{t("general_name_description")}
+						</p>
+					</div>
+
+					<div className="space-y-1.5 md:space-y-2">
+						<Label htmlFor="search-space-description" className="text-sm md:text-base font-medium">
+							{t("general_description_label")}{" "}
+							<span className="text-muted-foreground font-normal">
+								({tCommon("optional")})
+							</span>
+						</Label>
+						<Input
+							id="search-space-description"
+							placeholder={t("general_description_placeholder")}
+							value={description}
+							onChange={(e) => setDescription(e.target.value)}
+							className="text-sm md:text-base h-9 md:h-10"
+						/>
+						<p className="text-[10px] md:text-xs text-muted-foreground">
+							{t("general_description_description")}
+						</p>
+					</div>
+				</CardContent>
+			</Card>
+
+			{/* Action Buttons */}
+			<div className="flex items-center justify-between pt-3 md:pt-4 gap-2">
+				<Button
+					variant="outline"
+					onClick={handleReset}
+					disabled={!hasChanges || saving}
+					className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
+				>
+					<RotateCcw className="h-3.5 w-3.5 md:h-4 md:w-4" />
+					{t("general_reset")}
+				</Button>
+				<Button
+					onClick={handleSave}
+					disabled={!hasChanges || saving || !name.trim()}
+					className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
+				>
+					<Save className="h-3.5 w-3.5 md:h-4 md:w-4" />
+					{saving ? t("general_saving") : t("general_save")}
+				</Button>
+			</div>
+
+			{hasChanges && (
+				<Alert
+					variant="default"
+					className="bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-800 py-3 md:py-4"
+				>
+					<Info className="h-3 w-3 md:h-4 md:w-4 text-blue-600 dark:text-blue-500 shrink-0" />
+					<AlertDescription className="text-blue-800 dark:text-blue-300 text-xs md:text-sm">
+						{t("general_unsaved_changes")}
+					</AlertDescription>
+				</Alert>
+			)}
+		</div>
+	);
+}
+

surfsense_web/messages/en.json

@@ -723,12 +723,24 @@
 	"searchSpaceSettings": {
 		"title": "Search Space Settings",
 		"back_to_app": "Back to app",
+		"nav_general": "General",
+		"nav_general_desc": "Name, description & basic info",
 		"nav_agent_configs": "Agent Configs",
 		"nav_agent_configs_desc": "LLM models with prompts & citations",
 		"nav_role_assignments": "Role Assignments",
 		"nav_role_assignments_desc": "Assign configs to agent roles",
 		"nav_system_instructions": "System Instructions",
-		"nav_system_instructions_desc": "SearchSpace-wide AI instructions"
+		"nav_system_instructions_desc": "SearchSpace-wide AI instructions",
+		"general_name_label": "Name",
+		"general_name_placeholder": "Enter search space name",
+		"general_name_description": "A unique name for your search space.",
+		"general_description_label": "Description",
+		"general_description_placeholder": "Enter search space description",
+		"general_description_description": "A brief description of what this search space will be used for.",
+		"general_reset": "Reset Changes",
+		"general_save": "Save Changes",
+		"general_saving": "Saving",
+		"general_unsaved_changes": "You have unsaved changes. Click \"Save Changes\" to apply them."
 	},
 	"homepage": {
 		"hero_title_part1": "The AI Workspace",

surfsense_web/messages/zh.json

@@ -708,12 +708,24 @@
 	"searchSpaceSettings": {
 		"title": "搜索空间设置",
 		"back_to_app": "返回应用",
+		"nav_general": "常规",
+		"nav_general_desc": "名称、描述和基本信息",
 		"nav_agent_configs": "代理配置",
 		"nav_agent_configs_desc": "LLM 模型配置提示词和引用",
 		"nav_role_assignments": "角色分配",
 		"nav_role_assignments_desc": "为代理角色分配配置",
 		"nav_system_instructions": "系统指令",
-		"nav_system_instructions_desc": "搜索空间级别的 AI 指令"
+		"nav_system_instructions_desc": "搜索空间级别的 AI 指令",
+		"general_name_label": "名称",
+		"general_name_placeholder": "输入搜索空间名称",
+		"general_name_description": "您的搜索空间的唯一名称。",
+		"general_description_label": "描述",
+		"general_description_placeholder": "输入搜索空间描述",
+		"general_description_description": "此搜索空间用途的简要描述。",
+		"general_reset": "重置更改",
+		"general_save": "保存更改",
+		"general_saving": "保存中...",
+		"general_unsaved_changes": "您有未保存的更改。点击\"保存更改\"以应用它们。"
 	},
 	"homepage": {
 		"hero_title_part1": "AI 工作空间",