feat: Added Search Space System Instructions

- Added `citations_enabled` and `qna_custom_instructions` fields to the SearchSpace model for better QnA configuration.
- Updated the creation and update schemas to handle new fields with appropriate defaults.
- Refactored QnA handling in the agent to utilize the new SearchSpace fields for improved response customization.
- Adjusted UI components to include settings for managing QnA configurations.
- Enhanced onboarding process to incorporate prompt setup as an optional step.
This commit is contained in:
DESKTOP-RTLN3BA\$punk 2025-11-19 15:04:46 -08:00
parent 1eb70e2734
commit 6648409237
18 changed files with 737 additions and 166 deletions

View file

@ -33,13 +33,6 @@ export default function DashboardLayout({
icon: "SquareTerminal",
items: [],
},
{
title: "Manage LLMs",
url: `/dashboard/${search_space_id}/settings`,
icon: "Settings2",
items: [],
},
{
title: "Sources",
url: "#",
@ -59,6 +52,12 @@ export default function DashboardLayout({
},
],
},
{
title: "Settings",
url: `/dashboard/${search_space_id}/settings`,
icon: "Settings2",
items: [],
},
{
title: "Logs",
url: `/dashboard/${search_space_id}/logs`,

View file

@ -1,6 +1,6 @@
"use client";
import { ArrowLeft, ArrowRight, Bot, CheckCircle, Sparkles } from "lucide-react";
import { ArrowLeft, ArrowRight, Bot, CheckCircle, MessageSquare, Sparkles } from "lucide-react";
import { AnimatePresence, motion } from "motion/react";
import { useParams, useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
@ -8,12 +8,13 @@ import { useEffect, useRef, useState } from "react";
import { Logo } from "@/components/Logo";
import { CompletionStep } from "@/components/onboard/completion-step";
import { SetupLLMStep } from "@/components/onboard/setup-llm-step";
import { SetupPromptStep } from "@/components/onboard/setup-prompt-step";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { useGlobalLLMConfigs, useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
const TOTAL_STEPS = 2;
const TOTAL_STEPS = 3;
const OnboardPage = () => {
const t = useTranslations("onboard");
@ -95,9 +96,13 @@ const OnboardPage = () => {
const progress = (currentStep / TOTAL_STEPS) * 100;
const stepTitles = [t("setup_llm_configuration"), t("setup_complete")];
const stepTitles = [t("setup_llm_configuration"), "Configure AI Responses", t("setup_complete")];
const stepDescriptions = [t("configure_providers_and_assign_roles"), t("all_set")];
const stepDescriptions = [
t("configure_providers_and_assign_roles"),
"Customize how the AI responds to your queries (Optional)",
t("all_set"),
];
// User can proceed to step 2 if all roles are assigned
const canProceedToStep2 =
@ -106,6 +111,9 @@ const OnboardPage = () => {
preferences.fast_llm_id &&
preferences.strategic_llm_id;
// User can always proceed from step 2 to step 3 (prompt config is optional)
const canProceedToStep3 = true;
const handleNext = () => {
if (currentStep < TOTAL_STEPS) {
setCurrentStep(currentStep + 1);
@ -200,7 +208,8 @@ const OnboardPage = () => {
<CardHeader className="text-center">
<CardTitle className="text-2xl flex items-center justify-center gap-2">
{currentStep === 1 && <Sparkles className="w-6 h-6" />}
{currentStep === 2 && <CheckCircle className="w-6 h-6" />}
{currentStep === 2 && <MessageSquare className="w-6 h-6" />}
{currentStep === 3 && <CheckCircle className="w-6 h-6" />}
{stepTitles[currentStep - 1]}
</CardTitle>
<CardDescription className="text-base">
@ -224,7 +233,10 @@ const OnboardPage = () => {
onPreferencesUpdated={refreshPreferences}
/>
)}
{currentStep === 2 && <CompletionStep searchSpaceId={searchSpaceId} />}
{currentStep === 2 && (
<SetupPromptStep searchSpaceId={searchSpaceId} onComplete={handleNext} />
)}
{currentStep === 3 && <CompletionStep searchSpaceId={searchSpaceId} />}
</motion.div>
</AnimatePresence>
</CardContent>
@ -244,11 +256,31 @@ const OnboardPage = () => {
<ArrowRight className="w-4 h-4" />
</Button>
</>
) : currentStep === 2 ? (
<>
<Button
variant="outline"
onClick={handlePrevious}
className="flex items-center gap-2"
>
<ArrowLeft className="w-4 h-4" />
{t("previous")}
</Button>
{/* Next button is handled by SetupPromptStep component */}
<div />
</>
) : (
<Button variant="outline" onClick={handlePrevious} className="flex items-center gap-2">
<ArrowLeft className="w-4 h-4" />
{t("previous")}
</Button>
<>
<Button
variant="outline"
onClick={handlePrevious}
className="flex items-center gap-2"
>
<ArrowLeft className="w-4 h-4" />
{t("previous")}
</Button>
<div />
</>
)}
</div>
</motion.div>

View file

@ -1,9 +1,10 @@
"use client";
import { ArrowLeft, Bot, Brain, Settings } from "lucide-react";
import { ArrowLeft, Bot, Brain, MessageSquare, Settings } from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { LLMRoleManager } from "@/components/settings/llm-role-manager";
import { ModelConfigManager } from "@/components/settings/model-config-manager";
import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@ -34,7 +35,7 @@ export default function SettingsPage() {
<div className="space-y-1">
<h1 className="text-3xl font-bold tracking-tight">Settings</h1>
<p className="text-lg text-muted-foreground">
Manage your LLM configurations and role assignments for this search space.
Manage your settings for this search space.
</p>
</div>
</div>
@ -44,7 +45,7 @@ export default function SettingsPage() {
{/* Settings Content */}
<Tabs defaultValue="models" className="space-y-8">
<div className="overflow-x-auto">
<TabsList className="grid w-full min-w-fit grid-cols-2 lg:w-auto lg:inline-grid">
<TabsList className="grid w-full min-w-fit grid-cols-3 lg:w-auto lg:inline-grid">
<TabsTrigger value="models" className="flex items-center gap-2 text-sm">
<Bot className="h-4 w-4" />
<span className="hidden sm:inline">Model Configs</span>
@ -55,6 +56,11 @@ export default function SettingsPage() {
<span className="hidden sm:inline">LLM Roles</span>
<span className="sm:hidden">Roles</span>
</TabsTrigger>
<TabsTrigger value="prompts" className="flex items-center gap-2 text-sm">
<MessageSquare className="h-4 w-4" />
<span className="hidden sm:inline">System Instructions</span>
<span className="sm:hidden">System Instructions</span>
</TabsTrigger>
</TabsList>
</div>
@ -65,6 +71,10 @@ export default function SettingsPage() {
<TabsContent value="roles" className="space-y-6">
<LLMRoleManager searchSpaceId={searchSpaceId} />
</TabsContent>
<TabsContent value="prompts" className="space-y-6">
<PromptConfigManager searchSpaceId={searchSpaceId} />
</TabsContent>
</Tabs>
</div>
</div>

View file

@ -624,10 +624,6 @@ export function SetupLLMStep({
</div>
</CardHeader>
<CardContent className="space-y-3">
<div className="text-xs text-muted-foreground">
<strong>{t("use_cases")}:</strong> {t(role.examplesKey)}
</div>
<div className="space-y-2">
<Label className="text-sm font-medium">{t("assign_llm_config")}:</Label>
<Select

View file

@ -0,0 +1,152 @@
"use client";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
interface SetupPromptStepProps {
searchSpaceId: number;
onComplete?: () => void;
}
export function SetupPromptStep({ searchSpaceId, onComplete }: SetupPromptStepProps) {
const [enableCitations, setEnableCitations] = useState(true);
const [customInstructions, setCustomInstructions] = useState("");
const [saving, setSaving] = useState(false);
const [hasChanges, setHasChanges] = useState(false);
// Mark that we have changes when user modifies anything
useEffect(() => {
setHasChanges(true);
}, [enableCitations, customInstructions]);
const handleSave = async () => {
try {
setSaving(true);
// Prepare the update payload with simplified schema
const payload: any = {
citations_enabled: enableCitations,
qna_custom_instructions: customInstructions.trim() || "",
};
// Only send update if there's something to update
if (Object.keys(payload).length > 0) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/searchspaces/${searchSpaceId}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
},
body: JSON.stringify(payload),
}
);
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(
errorData.detail || `Failed to save prompt configuration (${response.status})`
);
}
toast.success("Prompt configuration saved successfully");
}
setHasChanges(false);
onComplete?.();
} catch (error: any) {
console.error("Error saving prompt configuration:", error);
toast.error(error.message || "Failed to save prompt configuration");
} finally {
setSaving(false);
}
};
const handleSkip = () => {
// Skip without saving - use defaults
onComplete?.();
};
return (
<div className="space-y-6">
<Alert>
<Info className="h-4 w-4" />
<AlertDescription>
These settings are optional. You can skip this step and configure them later in settings.
</AlertDescription>
</Alert>
{/* Citation Toggle */}
<div className="space-y-4">
<div className="flex items-center justify-between space-x-4 p-4 rounded-lg border bg-card">
<div className="flex-1 space-y-1">
<Label htmlFor="enable-citations" className="text-base font-medium">
Enable Citations
</Label>
<p className="text-sm text-muted-foreground">
When enabled, AI responses will include citations to source documents using
[citation:id] format.
</p>
</div>
<Switch
id="enable-citations"
checked={enableCitations}
onCheckedChange={setEnableCitations}
/>
</div>
{!enableCitations && (
<Alert
variant="default"
className="bg-yellow-50 dark:bg-yellow-950/20 border-yellow-200 dark:border-yellow-800"
>
<Info className="h-4 w-4 text-yellow-600 dark:text-yellow-500" />
<AlertDescription className="text-yellow-800 dark:text-yellow-300">
Disabling citations means AI responses won't include source references. You can
re-enable this anytime in settings.
</AlertDescription>
</Alert>
)}
</div>
{/* SearchSpace System Instructions */}
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="custom-instructions" className="text-base font-medium">
SearchSpace System Instructions (Optional)
</Label>
<p className="text-sm text-muted-foreground">
Add system instructions to guide how the AI should respond. For example: "Always provide
code examples" or "Keep responses concise and technical".
</p>
<Textarea
id="custom-instructions"
placeholder="E.g., Always provide practical examples, be concise, focus on technical details..."
value={customInstructions}
onChange={(e) => setCustomInstructions(e.target.value)}
rows={6}
className="resize-none"
/>
<p className="text-xs text-muted-foreground">{customInstructions.length} characters</p>
</div>
</div>
{/* Action Buttons */}
<div className="flex items-center justify-between pt-4 border-t">
<Button variant="ghost" onClick={handleSkip} disabled={saving}>
Skip for now
</Button>
<Button onClick={handleSave} disabled={saving || !hasChanges}>
{saving ? "Saving..." : "Save Configuration"}
</Button>
</div>
</div>
);
}

View file

@ -33,7 +33,7 @@ const ROLE_DESCRIPTIONS = {
long_context: {
icon: Brain,
title: "Long Context LLM",
description: "Handles complex tasks requiring extensive context understanding and reasoning",
description: "Handles summarization of long documents and complex Q&A",
color: "bg-blue-100 text-blue-800 border-blue-200",
examples: "Document analysis, research synthesis, complex Q&A",
characteristics: ["Large context window", "Deep reasoning", "Complex analysis"],

View file

@ -0,0 +1,269 @@
"use client";
import { Info, RotateCcw, Save } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { useSearchSpace } from "@/hooks/use-search-space";
interface PromptConfigManagerProps {
searchSpaceId: number;
}
export function PromptConfigManager({ searchSpaceId }: PromptConfigManagerProps) {
const { searchSpace, loading, fetchSearchSpace } = useSearchSpace({
searchSpaceId,
autoFetch: true,
});
const [enableCitations, setEnableCitations] = useState(true);
const [customInstructions, setCustomInstructions] = useState("");
const [saving, setSaving] = useState(false);
const [hasChanges, setHasChanges] = useState(false);
// Initialize state from fetched search space
useEffect(() => {
if (searchSpace) {
setEnableCitations(searchSpace.citations_enabled);
setCustomInstructions(searchSpace.qna_custom_instructions || "");
setHasChanges(false);
}
}, [searchSpace]);
// Track changes
useEffect(() => {
if (searchSpace) {
const currentCustom = searchSpace.qna_custom_instructions || "";
const changed =
searchSpace.citations_enabled !== enableCitations || currentCustom !== customInstructions;
setHasChanges(changed);
}
}, [searchSpace, enableCitations, customInstructions]);
const handleSave = async () => {
try {
setSaving(true);
// Prepare payload with simplified schema
const payload: any = {
citations_enabled: enableCitations,
qna_custom_instructions: customInstructions.trim() || "",
};
// Only send request if we have something to update
if (Object.keys(payload).length > 0) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/searchspaces/${searchSpaceId}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
},
body: JSON.stringify(payload),
}
);
if (!response.ok) {
const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.detail || "Failed to save prompt configuration");
}
toast.success("Prompt configuration saved successfully");
}
setHasChanges(false);
// Refresh to get updated data
await fetchSearchSpace();
} catch (error: any) {
console.error("Error saving prompt configuration:", error);
toast.error(error.message || "Failed to save prompt configuration");
} finally {
setSaving(false);
}
};
const handleReset = () => {
if (searchSpace) {
setEnableCitations(searchSpace.citations_enabled);
setCustomInstructions(searchSpace.qna_custom_instructions || "");
setHasChanges(false);
}
};
if (loading) {
return (
<div className="space-y-6">
<Card>
<CardHeader>
<Skeleton className="h-6 w-48" />
<Skeleton className="h-4 w-full max-w-md" />
</CardHeader>
<CardContent className="space-y-4">
<Skeleton className="h-20 w-full" />
<Skeleton className="h-32 w-full" />
</CardContent>
</Card>
</div>
);
}
return (
<div className="space-y-6">
<Alert>
<Info className="h-4 w-4" />
<AlertDescription>
Configure how the AI responds to your queries. Citations add source references, and the
system instructions personalize the response style.
</AlertDescription>
</Alert>
{/* Citations Card */}
<Card>
<CardHeader>
<CardTitle>Citation Configuration</CardTitle>
<CardDescription>
Control whether AI responses include citations to source documents
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-center justify-between space-x-4 p-4 rounded-lg border bg-card">
<div className="flex-1 space-y-1">
<Label htmlFor="enable-citations-settings" className="text-base font-medium">
Enable Citations
</Label>
<p className="text-sm text-muted-foreground">
When enabled, AI responses will include citations in [citation:id] format linking to
source documents.
</p>
</div>
<Switch
id="enable-citations-settings"
checked={enableCitations}
onCheckedChange={setEnableCitations}
/>
</div>
{!enableCitations && (
<Alert
variant="default"
className="bg-yellow-50 dark:bg-yellow-950/20 border-yellow-200 dark:border-yellow-800"
>
<Info className="h-4 w-4 text-yellow-600 dark:text-yellow-500" />
<AlertDescription className="text-yellow-800 dark:text-yellow-300">
Citations are currently disabled. AI responses will not include source references.
You can re-enable this anytime.
</AlertDescription>
</Alert>
)}
{enableCitations && (
<Alert>
<Info className="h-4 w-4" />
<AlertDescription>
Citations are enabled. When answering questions, the AI will reference source
documents using the [citation:id] format.
</AlertDescription>
</Alert>
)}
</CardContent>
</Card>
{/* SearchSpace System Instructions Card */}
<Card>
<CardHeader>
<CardTitle>SearchSpace System Instructions</CardTitle>
<CardDescription>
Add system instructions to guide the AI's response style and behavior
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="custom-instructions-settings" className="text-base font-medium">
Your System Instructions
</Label>
<p className="text-sm text-muted-foreground">
Provide specific guidelines for how you want the AI to respond. These instructions
will be applied to all answers.
</p>
<Textarea
id="custom-instructions-settings"
placeholder="E.g., Always provide practical examples, be concise, focus on technical details, use simple language..."
value={customInstructions}
onChange={(e) => setCustomInstructions(e.target.value)}
rows={8}
className="resize-none font-mono text-sm"
/>
<div className="flex items-center justify-between">
<p className="text-xs text-muted-foreground">
{customInstructions.length} characters
</p>
{customInstructions.length > 0 && (
<Button
variant="ghost"
size="sm"
onClick={() => setCustomInstructions("")}
className="h-auto py-1 px-2 text-xs"
>
Clear
</Button>
)}
</div>
</div>
{customInstructions.trim().length === 0 && (
<Alert>
<Info className="h-4 w-4" />
<AlertDescription>
No system instructions are currently set. The AI will use default behavior.
</AlertDescription>
</Alert>
)}
</CardContent>
</Card>
{/* Action Buttons */}
<div className="flex items-center justify-between pt-4">
<Button
variant="outline"
onClick={handleReset}
disabled={!hasChanges || saving}
className="flex items-center gap-2"
>
<RotateCcw className="h-4 w-4" />
Reset Changes
</Button>
<Button
onClick={handleSave}
disabled={!hasChanges || saving}
className="flex items-center gap-2"
>
<Save className="h-4 w-4" />
{saving ? "Saving..." : "Save Configuration"}
</Button>
</div>
{hasChanges && (
<Alert
variant="default"
className="bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-800"
>
<Info className="h-4 w-4 text-blue-600 dark:text-blue-500" />
<AlertDescription className="text-blue-800 dark:text-blue-300">
You have unsaved changes. Click "Save Configuration" to apply them.
</AlertDescription>
</Alert>
)}
</div>
);
}

View file

@ -9,6 +9,8 @@ interface SearchSpace {
name: string;
description: string;
user_id: string;
citations_enabled: boolean;
qna_custom_instructions: string | null;
}
interface UseSearchSpaceOptions {

View file

@ -8,7 +8,8 @@ interface SearchSpace {
name: string;
description: string;
created_at: string;
// Add other fields from your SearchSpaceRead model
citations_enabled: boolean;
qna_custom_instructions: string | null;
}
export function useSearchSpaces() {

View file

@ -131,6 +131,7 @@
"book_a_call": "Book a call"
},
"nav_menu": {
"settings": "Settings",
"platform": "Platform",
"researcher": "Researcher",
"manage_llms": "Manage LLMs",
@ -425,7 +426,7 @@
"long_context_llm": "Long Context LLM",
"fast_llm": "Fast LLM",
"strategic_llm": "Strategic LLM",
"long_context_desc": "Handles complex tasks requiring extensive context understanding and reasoning",
"long_context_desc": "Handles summarization of long documents and complex Q&A",
"long_context_examples": "Document analysis, research synthesis, complex Q&A",
"large_context_window": "Large context window",
"deep_reasoning": "Deep reasoning",
@ -572,7 +573,7 @@
"no_llm_configs_found": "No LLM Configurations Found",
"add_provider_before_roles": "Please add at least one LLM provider in the previous step before assigning roles.",
"long_context_llm_title": "Long Context LLM",
"long_context_llm_desc": "Handles complex tasks requiring extensive context understanding and reasoning",
"long_context_llm_desc": "Handles summarization of long documents and complex Q&A",
"long_context_llm_examples": "Document analysis, research synthesis, complex Q&A",
"fast_llm_title": "Fast LLM",
"fast_llm_desc": "Optimized for quick responses and real-time interactions",

View file

@ -131,6 +131,7 @@
"book_a_call": "预约咨询"
},
"nav_menu": {
"settings": "设置",
"platform": "平台",
"researcher": "AI 研究",
"manage_llms": "管理 LLM",
@ -425,7 +426,7 @@
"long_context_llm": "长上下文 LLM",
"fast_llm": "快速 LLM",
"strategic_llm": "战略 LLM",
"long_context_desc": "处理需要广泛上下文理解和推理的复杂任务",
"long_context_desc": "处理长文档摘要和复杂问答",
"long_context_examples": "文档分析、研究综合、复杂问答",
"large_context_window": "大型上下文窗口",
"deep_reasoning": "深度推理",
@ -572,7 +573,7 @@
"no_llm_configs_found": "未找到 LLM 配置",
"add_provider_before_roles": "在分配角色之前,请先在上一步中添加至少一个 LLM 提供商。",
"long_context_llm_title": "长上下文 LLM",
"long_context_llm_desc": "处理需要广泛上下文理解和推理的复杂任务",
"long_context_llm_desc": "处理长文档摘要和复杂问答",
"long_context_llm_examples": "文档分析、研究综合、复杂问答",
"fast_llm_title": "快速 LLM",
"fast_llm_desc": "针对快速响应和实时交互进行优化",