-
-
+ (null);
+ const [messages, setMessages] = useState([]);
+ const [isRunning, setIsRunning] = useState(false);
+ // Store thinking steps per message ID - kept separate from content to avoid
+ // "unsupported part type" errors from assistant-ui
+ const [messageThinkingSteps, setMessageThinkingSteps] = useState>(
+ new Map()
+ );
+ const abortControllerRef = useRef(null);
+
+ // Create the attachment adapter for file processing
+ const attachmentAdapter = useMemo(() => createAttachmentAdapter(), []);
+
+ // Extract search_space_id from URL params
+ const searchSpaceId = useMemo(() => {
+ const id = params.search_space_id;
+ const parsed = typeof id === "string" ? Number.parseInt(id, 10) : 0;
+ return Number.isNaN(parsed) ? 0 : parsed;
+ }, [params.search_space_id]);
+
+ // Extract chat_id from URL params
+ const urlChatId = useMemo(() => {
+ const id = params.chat_id;
+ let parsed = 0;
+ if (Array.isArray(id) && id.length > 0) {
+ parsed = Number.parseInt(id[0], 10);
+ } else if (typeof id === "string") {
+ parsed = Number.parseInt(id, 10);
+ }
+ return Number.isNaN(parsed) ? 0 : parsed;
+ }, [params.chat_id]);
+
+ // Initialize thread and load messages
+ const initializeThread = useCallback(async () => {
+ setIsInitializing(true);
+
+ try {
+ if (urlChatId > 0) {
+ // Thread exists - load messages
+ setThreadId(urlChatId);
+ const response = await getThreadMessages(urlChatId);
+ if (response.messages && response.messages.length > 0) {
+ const loadedMessages = response.messages.map(convertToThreadMessage);
+ setMessages(loadedMessages);
+
+ // Extract and restore thinking steps from persisted messages
+ const restoredThinkingSteps = new Map();
+ for (const msg of response.messages) {
+ if (msg.role === "assistant") {
+ const steps = extractThinkingSteps(msg.content);
+ if (steps.length > 0) {
+ restoredThinkingSteps.set(`msg-${msg.id}`, steps);
+ }
+ }
+ }
+ if (restoredThinkingSteps.size > 0) {
+ setMessageThinkingSteps(restoredThinkingSteps);
+ }
+ }
+ } else {
+ // Create new thread
+ const newThread = await createThread(searchSpaceId, "New Chat");
+ setThreadId(newThread.id);
+ router.replace(`/dashboard/${searchSpaceId}/new-chat/${newThread.id}`);
+ }
+ } catch (error) {
+ console.error("[NewChatPage] Failed to initialize thread:", error);
+ // Keep threadId as null - don't use Date.now() as it creates an invalid ID
+ // that will cause 404 errors on subsequent API calls
+ setThreadId(null);
+ toast.error("Failed to initialize chat. Please try again.");
+ } finally {
+ setIsInitializing(false);
+ }
+ }, [urlChatId, searchSpaceId, router]);
+
+ // Initialize on mount
+ useEffect(() => {
+ initializeThread();
+ }, [initializeThread]);
+
+ // Cancel ongoing request
+ const cancelRun = useCallback(async () => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ abortControllerRef.current = null;
+ }
+ setIsRunning(false);
+ }, []);
+
+ // Handle new message from user
+ const onNew = useCallback(
+ async (message: AppendMessage) => {
+ if (!threadId) return;
+
+ // Extract user query text from content parts
+ let userQuery = "";
+ for (const part of message.content) {
+ if (part.type === "text") {
+ userQuery += part.text;
+ }
+ }
+
+ // Extract attachments from message
+ // AppendMessage.attachments contains the processed attachment objects (from adapter.send())
+ const messageAttachments: Array> = [];
+ if (message.attachments && message.attachments.length > 0) {
+ for (const att of message.attachments) {
+ messageAttachments.push(att as unknown as Record);
+ }
+ }
+
+ if (!userQuery.trim() && messageAttachments.length === 0) return;
+
+ // Check if podcast is already generating
+ if (isPodcastGenerating() && looksLikePodcastRequest(userQuery)) {
+ toast.warning("A podcast is already being generated.");
+ return;
+ }
+
+ const token = getBearerToken();
+ if (!token) {
+ toast.error("Not authenticated. Please log in again.");
+ return;
+ }
+
+ // Add user message to state
+ const userMsgId = `msg-user-${Date.now()}`;
+ const userMessage: ThreadMessageLike = {
+ id: userMsgId,
+ role: "user",
+ content: message.content,
+ createdAt: new Date(),
+ };
+ setMessages((prev) => [...prev, userMessage]);
+
+ // Persist user message (don't await, fire and forget)
+ appendMessage(threadId, {
+ role: "user",
+ content: message.content,
+ }).catch((err) => console.error("Failed to persist user message:", err));
+
+ // Start streaming response
+ setIsRunning(true);
+ const controller = new AbortController();
+ abortControllerRef.current = controller;
+
+ // Prepare assistant message
+ const assistantMsgId = `msg-assistant-${Date.now()}`;
+ const currentThinkingSteps = new Map();
+
+ // Ordered content parts to preserve inline tool call positions
+ // Each part is either a text segment or a tool call
+ type ContentPart =
+ | { type: "text"; text: string }
+ | {
+ type: "tool-call";
+ toolCallId: string;
+ toolName: string;
+ args: Record;
+ result?: unknown;
+ };
+ const contentParts: ContentPart[] = [];
+
+ // Track the current text segment index (for appending text deltas)
+ let currentTextPartIndex = -1;
+
+ // Map to track tool call indices for updating results
+ const toolCallIndices = new Map();
+
+ // Helper to get or create the current text part for appending text
+ const appendText = (delta: string) => {
+ if (currentTextPartIndex >= 0 && contentParts[currentTextPartIndex]?.type === "text") {
+ // Append to existing text part
+ (contentParts[currentTextPartIndex] as { type: "text"; text: string }).text += delta;
+ } else {
+ // Create new text part
+ contentParts.push({ type: "text", text: delta });
+ currentTextPartIndex = contentParts.length - 1;
+ }
+ };
+
+ // Helper to add a tool call (this "breaks" the current text segment)
+ const addToolCall = (toolCallId: string, toolName: string, args: Record) => {
+ if (TOOLS_WITH_UI.has(toolName)) {
+ contentParts.push({
+ type: "tool-call",
+ toolCallId,
+ toolName,
+ args,
+ });
+ toolCallIndices.set(toolCallId, contentParts.length - 1);
+ // Reset text part index so next text creates a new segment
+ currentTextPartIndex = -1;
+ }
+ };
+
+ // Helper to update a tool call's args or result
+ const updateToolCall = (
+ toolCallId: string,
+ update: { args?: Record; result?: unknown }
+ ) => {
+ const index = toolCallIndices.get(toolCallId);
+ if (index !== undefined && contentParts[index]?.type === "tool-call") {
+ const tc = contentParts[index] as ContentPart & { type: "tool-call" };
+ if (update.args) tc.args = update.args;
+ if (update.result !== undefined) tc.result = update.result;
+ }
+ };
+
+ // Helper to build content for UI (without thinking-steps to avoid assistant-ui errors)
+ const buildContentForUI = (): ThreadMessageLike["content"] => {
+ // Filter to only include text parts with content and tool-calls with UI
+ const filtered = contentParts.filter((part) => {
+ if (part.type === "text") return part.text.length > 0;
+ if (part.type === "tool-call") return TOOLS_WITH_UI.has(part.toolName);
+ return false;
+ });
+ return filtered.length > 0
+ ? (filtered as ThreadMessageLike["content"])
+ : [{ type: "text", text: "" }];
+ };
+
+ // Helper to build content for persistence (includes thinking-steps for restoration)
+ const buildContentForPersistence = (): unknown[] => {
+ const parts: unknown[] = [];
+
+ // Include thinking steps for persistence
+ if (currentThinkingSteps.size > 0) {
+ parts.push({
+ type: "thinking-steps",
+ steps: Array.from(currentThinkingSteps.values()),
+ });
+ }
+
+ // Add content parts (filtered)
+ for (const part of contentParts) {
+ if (part.type === "text" && part.text.length > 0) {
+ parts.push(part);
+ } else if (part.type === "tool-call" && TOOLS_WITH_UI.has(part.toolName)) {
+ parts.push(part);
+ }
+ }
+
+ return parts.length > 0 ? parts : [{ type: "text", text: "" }];
+ };
+
+ // Add placeholder assistant message
+ setMessages((prev) => [
+ ...prev,
+ {
+ id: assistantMsgId,
+ role: "assistant",
+ content: [{ type: "text", text: "" }],
+ createdAt: new Date(),
+ },
+ ]);
+
+ try {
+ const backendUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
+
+ // Build message history for context
+ const messageHistory = messages
+ .filter((m) => m.role === "user" || m.role === "assistant")
+ .map((m) => {
+ let text = "";
+ for (const part of m.content) {
+ if (typeof part === "object" && part.type === "text" && "text" in part) {
+ text += part.text;
+ }
+ }
+ return { role: m.role, content: text };
+ })
+ .filter((m) => m.content.length > 0);
+
+ // Extract attachment content to send with the request
+ const attachments = extractAttachmentContent(messageAttachments);
+
+ const response = await fetch(`${backendUrl}/api/v1/new_chat`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${token}`,
+ },
+ body: JSON.stringify({
+ chat_id: threadId,
+ user_query: userQuery.trim(),
+ search_space_id: searchSpaceId,
+ messages: messageHistory,
+ attachments: attachments.length > 0 ? attachments : undefined,
+ }),
+ signal: controller.signal,
+ });
+
+ if (!response.ok) {
+ throw new Error(`Backend error: ${response.status}`);
+ }
+
+ if (!response.body) {
+ throw new Error("No response body");
+ }
+
+ // Parse SSE stream
+ const reader = response.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = "";
+
+ try {
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+
+ buffer += decoder.decode(value, { stream: true });
+ const events = buffer.split(/\r?\n\r?\n/);
+ buffer = events.pop() || "";
+
+ for (const event of events) {
+ const lines = event.split(/\r?\n/);
+ for (const line of lines) {
+ if (!line.startsWith("data: ")) continue;
+ const data = line.slice(6).trim();
+ if (!data || data === "[DONE]") continue;
+
+ try {
+ const parsed = JSON.parse(data);
+
+ switch (parsed.type) {
+ case "text-delta":
+ appendText(parsed.delta);
+ setMessages((prev) =>
+ prev.map((m) =>
+ m.id === assistantMsgId ? { ...m, content: buildContentForUI() } : m
+ )
+ );
+ break;
+
+ case "tool-input-start":
+ // Add tool call inline - this breaks the current text segment
+ addToolCall(parsed.toolCallId, parsed.toolName, {});
+ setMessages((prev) =>
+ prev.map((m) =>
+ m.id === assistantMsgId ? { ...m, content: buildContentForUI() } : m
+ )
+ );
+ break;
+
+ case "tool-input-available": {
+ // Update existing tool call's args, or add if not exists
+ if (toolCallIndices.has(parsed.toolCallId)) {
+ updateToolCall(parsed.toolCallId, { args: parsed.input || {} });
+ } else {
+ addToolCall(parsed.toolCallId, parsed.toolName, parsed.input || {});
+ }
+ setMessages((prev) =>
+ prev.map((m) =>
+ m.id === assistantMsgId ? { ...m, content: buildContentForUI() } : m
+ )
+ );
+ break;
+ }
+
+ case "tool-output-available": {
+ // Update the tool call with its result
+ updateToolCall(parsed.toolCallId, { result: parsed.output });
+ // Handle podcast-specific logic
+ if (parsed.output?.status === "processing" && parsed.output?.task_id) {
+ // Check if this is a podcast tool by looking at the content part
+ const idx = toolCallIndices.get(parsed.toolCallId);
+ if (idx !== undefined) {
+ const part = contentParts[idx];
+ if (part?.type === "tool-call" && part.toolName === "generate_podcast") {
+ setActivePodcastTaskId(parsed.output.task_id);
+ }
+ }
+ }
+ setMessages((prev) =>
+ prev.map((m) =>
+ m.id === assistantMsgId ? { ...m, content: buildContentForUI() } : m
+ )
+ );
+ break;
+ }
+
+ case "data-thinking-step": {
+ // Handle thinking step events for chain-of-thought display
+ const stepData = parsed.data as ThinkingStepData;
+ if (stepData?.id) {
+ currentThinkingSteps.set(stepData.id, stepData);
+ // Update thinking steps state for rendering
+ // The ThinkingStepsScrollHandler in Thread component
+ // will handle auto-scrolling when this state changes
+ setMessageThinkingSteps((prev) => {
+ const newMap = new Map(prev);
+ newMap.set(assistantMsgId, Array.from(currentThinkingSteps.values()));
+ return newMap;
+ });
+ }
+ break;
+ }
+
+ case "error":
+ throw new Error(parsed.errorText || "Server error");
+ }
+ } catch (e) {
+ if (e instanceof SyntaxError) continue;
+ throw e;
+ }
+ }
+ }
+ }
+ } finally {
+ reader.releaseLock();
+ }
+
+ // Persist assistant message (with thinking steps for restoration on refresh)
+ const finalContent = buildContentForPersistence();
+ if (contentParts.length > 0) {
+ appendMessage(threadId, {
+ role: "assistant",
+ content: finalContent,
+ }).catch((err) => console.error("Failed to persist assistant message:", err));
+ }
+ } catch (error) {
+ if (error instanceof Error && error.name === "AbortError") {
+ // Request was cancelled
+ return;
+ }
+ console.error("[NewChatPage] Chat error:", error);
+ toast.error("Failed to get response. Please try again.");
+ // Update assistant message with error
+ setMessages((prev) =>
+ prev.map((m) =>
+ m.id === assistantMsgId
+ ? {
+ ...m,
+ content: [
+ {
+ type: "text",
+ text: "Sorry, there was an error. Please try again.",
+ },
+ ],
+ }
+ : m
+ )
+ );
+ } finally {
+ setIsRunning(false);
+ abortControllerRef.current = null;
+ // Note: We no longer clear thinking steps - they persist with the message
+ }
+ },
+ [threadId, searchSpaceId, messages]
+ );
+
+ // Convert message (pass through since already in correct format)
+ const convertMessage = useCallback(
+ (message: ThreadMessageLike): ThreadMessageLike => message,
+ []
+ );
+
+ // Handle editing a message - removes messages after the edited one and sends as new
+ const onEdit = useCallback(
+ async (message: AppendMessage) => {
+ // Find the message being edited by looking at the parentId
+ // The parentId tells us which message's response we're editing
+ // For now, we'll just treat edits like new messages
+ // A more sophisticated implementation would truncate the history
+ await onNew(message);
+ },
+ [onNew]
+ );
+
+ // Create external store runtime with attachment support
+ const runtime = useExternalStoreRuntime({
+ messages,
+ isRunning,
+ onNew,
+ onEdit,
+ convertMessage,
+ onCancel: cancelRun,
+ adapters: {
+ attachments: attachmentAdapter,
+ },
+ });
+
+ // Show loading state
+ if (isInitializing) {
+ return (
+
+
+ );
+}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
index 1df54d8b2..25f189203 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx
@@ -1,312 +1,268 @@
"use client";
import { useAtomValue } from "jotai";
-import { FileText, MessageSquare, UserPlus, Users } from "lucide-react";
+import { Loader2 } from "lucide-react";
import { motion } from "motion/react";
import { useParams, useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
-import { updateLLMPreferencesMutationAtom } from "@/atoms/llm-config/llm-config-mutation.atoms";
import {
- globalLLMConfigsAtom,
- llmConfigsAtom,
+ createNewLLMConfigMutationAtom,
+ updateLLMPreferencesMutationAtom,
+} from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
+import {
+ globalNewLLMConfigsAtom,
llmPreferencesAtom,
-} from "@/atoms/llm-config/llm-config-query.atoms";
-import { OnboardActionCard } from "@/components/onboard/onboard-action-card";
-import { OnboardAdvancedSettings } from "@/components/onboard/onboard-advanced-settings";
-import { OnboardHeader } from "@/components/onboard/onboard-header";
-import { OnboardLLMSetup } from "@/components/onboard/onboard-llm-setup";
-import { OnboardLoading } from "@/components/onboard/onboard-loading";
-import { OnboardStats } from "@/components/onboard/onboard-stats";
+} from "@/atoms/new-llm-config/new-llm-config-query.atoms";
+import { Logo } from "@/components/Logo";
+import { LLMConfigForm, type LLMConfigFormData } from "@/components/shared/llm-config-form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { getBearerToken, redirectToLogin } from "@/lib/auth-utils";
-const OnboardPage = () => {
- const t = useTranslations("onboard");
+export default function OnboardPage() {
const router = useRouter();
const params = useParams();
const searchSpaceId = Number(params.search_space_id);
+ // Queries
const {
- data: llmConfigs = [],
- isFetching: configsLoading,
- refetch: refreshConfigs,
- } = useAtomValue(llmConfigsAtom);
- const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
- useAtomValue(globalLLMConfigsAtom);
- const {
- data: preferences = {},
- isFetching: preferencesLoading,
- refetch: refreshPreferences,
- } = useAtomValue(llmPreferencesAtom);
- const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
+ data: globalConfigs = [],
+ isFetching: globalConfigsLoading,
+ isSuccess: globalConfigsLoaded,
+ } = useAtomValue(globalNewLLMConfigsAtom);
+ const { data: preferences = {}, isFetching: preferencesLoading } =
+ useAtomValue(llmPreferencesAtom);
- // Compute isOnboardingComplete
- const isOnboardingComplete = useMemo(() => {
- return !!(
- preferences.long_context_llm_id &&
- preferences.fast_llm_id &&
- preferences.strategic_llm_id
- );
- }, [preferences]);
+ // Mutations
+ const { mutateAsync: createConfig, isPending: isCreating } = useAtomValue(
+ createNewLLMConfigMutationAtom
+ );
+ const { mutateAsync: updatePreferences, isPending: isUpdatingPreferences } = useAtomValue(
+ updateLLMPreferencesMutationAtom
+ );
+ // State
const [isAutoConfiguring, setIsAutoConfiguring] = useState(false);
- const [autoConfigComplete, setAutoConfigComplete] = useState(false);
- const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
- const [showPromptSettings, setShowPromptSettings] = useState(false);
-
- const handleRefreshPreferences = useCallback(async () => {
- await refreshPreferences();
- }, []);
-
- // Track if we've already attempted auto-configuration
const hasAttemptedAutoConfig = useRef(false);
- // Track if onboarding was complete on initial mount
- const wasCompleteOnMount = useRef(null);
- const hasCheckedInitialState = useRef(false);
-
- // Check if user is authenticated
+ // Check authentication
useEffect(() => {
const token = getBearerToken();
if (!token) {
- // Save current path and redirect to login
redirectToLogin();
- return;
}
}, []);
- // Capture onboarding state on first load
+ // Check if onboarding is already complete
+ const isOnboardingComplete = preferences.agent_llm_id && preferences.document_summary_llm_id;
+
+ // If onboarding is already complete, redirect immediately
useEffect(() => {
- if (
- !hasCheckedInitialState.current &&
- !preferencesLoading &&
- !configsLoading &&
- !globalConfigsLoading
- ) {
- wasCompleteOnMount.current = isOnboardingComplete;
- hasCheckedInitialState.current = true;
+ if (!preferencesLoading && isOnboardingComplete) {
+ router.push(`/dashboard/${searchSpaceId}/new-chat`);
}
- }, [preferencesLoading, configsLoading, globalConfigsLoading, isOnboardingComplete]);
+ }, [preferencesLoading, isOnboardingComplete, router, searchSpaceId]);
- // Redirect to dashboard if onboarding was already complete
+ // Auto-configure if global configs are available
useEffect(() => {
- if (
- wasCompleteOnMount.current === true &&
- !preferencesLoading &&
- !configsLoading &&
- !globalConfigsLoading
- ) {
- const timer = setTimeout(() => {
- router.push(`/dashboard/${searchSpaceId}`);
- }, 300);
- return () => clearTimeout(timer);
- }
- }, [preferencesLoading, configsLoading, globalConfigsLoading, router, searchSpaceId]);
+ const autoConfigureWithGlobal = async () => {
+ if (hasAttemptedAutoConfig.current) return;
+ if (globalConfigsLoading || preferencesLoading) return;
+ if (!globalConfigsLoaded) return;
+ if (isOnboardingComplete) return;
- // Auto-configure LLM roles if global configs are available
- const autoConfigureLLMs = useCallback(async () => {
- if (hasAttemptedAutoConfig.current) return;
- if (globalConfigs.length === 0) return;
- if (isOnboardingComplete) {
- setAutoConfigComplete(true);
- return;
- }
+ // Only auto-configure if we have global configs
+ if (globalConfigs.length > 0) {
+ hasAttemptedAutoConfig.current = true;
+ setIsAutoConfiguring(true);
- hasAttemptedAutoConfig.current = true;
- setIsAutoConfiguring(true);
+ try {
+ const firstGlobalConfig = globalConfigs[0];
- try {
- const allConfigs = [...globalConfigs, ...llmConfigs];
+ await updatePreferences({
+ search_space_id: searchSpaceId,
+ data: {
+ agent_llm_id: firstGlobalConfig.id,
+ document_summary_llm_id: firstGlobalConfig.id,
+ },
+ });
- if (allConfigs.length === 0) {
- setIsAutoConfiguring(false);
- return;
+ toast.success("AI configured automatically!", {
+ description: `Using ${firstGlobalConfig.name}. You can customize this later in Settings.`,
+ });
+
+ // Redirect to new-chat
+ router.push(`/dashboard/${searchSpaceId}/new-chat`);
+ } catch (error) {
+ console.error("Auto-configuration failed:", error);
+ toast.error("Auto-configuration failed. Please add a configuration manually.");
+ setIsAutoConfiguring(false);
+ }
}
+ };
- // Use first available config for all roles
- const defaultConfigId = allConfigs[0].id;
+ autoConfigureWithGlobal();
+ }, [
+ globalConfigs,
+ globalConfigsLoading,
+ globalConfigsLoaded,
+ preferencesLoading,
+ isOnboardingComplete,
+ updatePreferences,
+ searchSpaceId,
+ router,
+ ]);
- const newPreferences = {
- long_context_llm_id: defaultConfigId,
- fast_llm_id: defaultConfigId,
- strategic_llm_id: defaultConfigId,
- };
+ // Handle form submission
+ const handleSubmit = async (formData: LLMConfigFormData) => {
+ try {
+ // Create the config
+ const newConfig = await createConfig(formData);
+ // Auto-assign to all roles
await updatePreferences({
search_space_id: searchSpaceId,
- data: newPreferences,
+ data: {
+ agent_llm_id: newConfig.id,
+ document_summary_llm_id: newConfig.id,
+ },
});
- await refreshPreferences();
- setAutoConfigComplete(true);
- toast.success("AI models configured automatically!", {
- description: "You can customize these in advanced settings.",
+
+ toast.success("Configuration created!", {
+ description: "Redirecting to chat...",
});
+
+ // Redirect to new-chat
+ router.push(`/dashboard/${searchSpaceId}/new-chat`);
} catch (error) {
- console.error("Auto-configuration failed:", error);
- } finally {
- setIsAutoConfiguring(false);
+ console.error("Failed to create config:", error);
+ if (error instanceof Error) {
+ toast.error(error.message || "Failed to create configuration");
+ }
}
- }, [globalConfigs, llmConfigs, isOnboardingComplete, updatePreferences, refreshPreferences]);
+ };
- // Trigger auto-configuration once data is loaded
- useEffect(() => {
- if (!configsLoading && !globalConfigsLoading && !preferencesLoading) {
- autoConfigureLLMs();
- }
- }, [configsLoading, globalConfigsLoading, preferencesLoading, autoConfigureLLMs]);
-
- const allConfigs = [...globalConfigs, ...llmConfigs];
- const isReady = autoConfigComplete || isOnboardingComplete;
+ const isSubmitting = isCreating || isUpdatingPreferences;
// Loading state
- if (configsLoading || preferencesLoading || globalConfigsLoading || isAutoConfiguring) {
+ if (globalConfigsLoading || preferencesLoading || isAutoConfiguring) {
return (
- refreshConfigs()}
- onConfigDeleted={() => refreshConfigs()}
- onPreferencesUpdated={handleRefreshPreferences}
- />
- );
- }
-
- // Main onboarding view
- return (
-
@@ -275,7 +272,7 @@ export default function SettingsPage() {
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const handleBackToApp = useCallback(() => {
- router.push(`/dashboard/${searchSpaceId}/researcher`);
+ router.push(`/dashboard/${searchSpaceId}/new-chat`);
}, [router, searchSpaceId]);
return (
diff --git a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
index 49e1de2ab..ed67fa1f5 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/team/page.tsx
@@ -807,7 +807,6 @@ function RolesTab({
-
+
+
+
-
-
-
- {
- setChatUIState((prev) => ({
- ...prev,
- isChatPannelOpen: !isChatPannelOpen,
- }));
- setShowIndicator(false);
- }}
- className={cn(
- "shrink-0 rounded-full p-2 transition-all duration-300 relative",
- showIndicator
- ? "bg-primary/20 hover:bg-primary/30 shadow-lg shadow-primary/25"
- : "hover:bg-muted",
- activeChatId && !showIndicator && "hover:bg-primary/10"
- )}
- title="Toggle Artifacts Panel"
- whileHover={{ scale: 1.05 }}
- whileTap={{ scale: 0.95 }}
- >
-
-
-
-
- {/* Pulsing indicator badge */}
-
- {showIndicator && (
-
-
-
-
-
- )}
-
-
- )}
-
+
+
- {/* Only render chat panel on researcher page */}
- {isResearcherPage &&
+
-
- {children}
-
+
+ {children}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
index 814cf49f4..ce2c778c5 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
@@ -29,7 +29,7 @@ export default function DashboardLayout({
const customNavMain = [
{
title: "Chat",
- url: `/dashboard/${search_space_id}/researcher`,
+ url: `/dashboard/${search_space_id}/new-chat`,
icon: "SquareTerminal",
items: [],
},
diff --git a/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
new file mode 100644
index 000000000..00514facb
--- /dev/null
+++ b/surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx
@@ -0,0 +1,637 @@
+"use client";
+
+import {
+ type AppendMessage,
+ AssistantRuntimeProvider,
+ type ThreadMessageLike,
+ useExternalStoreRuntime,
+} from "@assistant-ui/react";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Thread } from "@/components/assistant-ui/thread";
+import { ChatHeader } from "@/components/new-chat/chat-header";
+import type { ThinkingStep } from "@/components/tool-ui/deepagent-thinking";
+import { DisplayImageToolUI } from "@/components/tool-ui/display-image";
+import { GeneratePodcastToolUI } from "@/components/tool-ui/generate-podcast";
+import { LinkPreviewToolUI } from "@/components/tool-ui/link-preview";
+import { ScrapeWebpageToolUI } from "@/components/tool-ui/scrape-webpage";
+import { getBearerToken } from "@/lib/auth-utils";
+import { createAttachmentAdapter, extractAttachmentContent } from "@/lib/chat/attachment-adapter";
+import {
+ isPodcastGenerating,
+ looksLikePodcastRequest,
+ setActivePodcastTaskId,
+} from "@/lib/chat/podcast-state";
+import {
+ appendMessage,
+ createThread,
+ getThreadMessages,
+ type MessageRecord,
+} from "@/lib/chat/thread-persistence";
+
+/**
+ * Extract thinking steps from message content
+ */
+function extractThinkingSteps(content: unknown): ThinkingStep[] {
+ if (!Array.isArray(content)) return [];
+
+ const thinkingPart = content.find(
+ (part: unknown) =>
+ typeof part === "object" &&
+ part !== null &&
+ "type" in part &&
+ (part as { type: string }).type === "thinking-steps"
+ ) as { type: "thinking-steps"; steps: ThinkingStep[] } | undefined;
+
+ return thinkingPart?.steps || [];
+}
+
+/**
+ * Convert backend message to assistant-ui ThreadMessageLike format
+ * Filters out 'thinking-steps' part as it's handled separately via messageThinkingSteps
+ */
+function convertToThreadMessage(msg: MessageRecord): ThreadMessageLike {
+ let content: ThreadMessageLike["content"];
+
+ if (typeof msg.content === "string") {
+ content = [{ type: "text", text: msg.content }];
+ } else if (Array.isArray(msg.content)) {
+ // Filter out thinking-steps part - it's handled separately via messageThinkingSteps
+ const filteredContent = msg.content.filter(
+ (part: unknown) =>
+ !(
+ typeof part === "object" &&
+ part !== null &&
+ "type" in part &&
+ (part as { type: string }).type === "thinking-steps"
+ )
+ );
+ content =
+ filteredContent.length > 0
+ ? (filteredContent as ThreadMessageLike["content"])
+ : [{ type: "text", text: "" }];
+ } else {
+ content = [{ type: "text", text: String(msg.content) }];
+ }
+
+ return {
+ id: `msg-${msg.id}`,
+ role: msg.role,
+ content,
+ createdAt: new Date(msg.created_at),
+ };
+}
+
+/**
+ * Tools that should render custom UI in the chat.
+ */
+const TOOLS_WITH_UI = new Set([
+ "generate_podcast",
+ "link_preview",
+ "display_image",
+ "scrape_webpage",
+]);
+
+/**
+ * Type for thinking step data from the backend
+ */
+interface ThinkingStepData {
+ id: string;
+ title: string;
+ status: "pending" | "in_progress" | "completed";
+ items: string[];
+}
+
+export default function NewChatPage() {
+ const params = useParams();
+ const router = useRouter();
+ const [isInitializing, setIsInitializing] = useState(true);
+ const [threadId, setThreadId] = useState
+
+ );
+ }
+
+ // Show error state if thread initialization failed
+ if (!threadId) {
+ return (
+ Loading chat...
+
+
+ );
+ }
+
+ return (
+ Failed to initialize chat
+
+
+
+
+
+
- ([]);
- const [searchQuery, setSearchQuery] = useState("");
- const [sortOrder, setSortOrder] = useState("newest");
- const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
- const [podcastToDelete, setPodcastToDelete] = useState<{
- id: number;
- title: string;
- } | null>(null);
-
- // Audio player state
- const [currentPodcast, setCurrentPodcast] = useState(null);
- const [audioSrc, setAudioSrc] = useState(undefined);
- const [isAudioLoading, setIsAudioLoading] = useState(false);
- const [isPlaying, setIsPlaying] = useState(false);
- const [currentTime, setCurrentTime] = useState(0);
- const [duration, setDuration] = useState(0);
- const [volume, setVolume] = useState(0.7);
- const [isMuted, setIsMuted] = useState(false);
- const audioRef = useRef(null);
- const currentObjectUrlRef = useRef(null);
- const [{ isPending: isDeletingPodcast, mutateAsync: deletePodcast, error: deleteError }] =
- useAtom(deletePodcastMutationAtom);
- const {
- data: podcasts,
- isLoading: isFetchingPodcasts,
- error: fetchError,
- } = useAtomValue(podcastsAtom);
-
- // Add podcast image URL constant
- const PODCAST_IMAGE_URL =
- "https://static.vecteezy.com/system/resources/thumbnails/002/157/611/small_2x/illustrations-concept-design-podcast-channel-free-vector.jpg";
-
- useEffect(() => {
- if (isFetchingPodcasts) return;
-
- if (fetchError) {
- console.error("Error fetching podcasts:", fetchError);
- setFilteredPodcasts([]);
- return;
- }
-
- if (!podcasts) {
- setFilteredPodcasts([]);
- return;
- }
-
- setFilteredPodcasts(podcasts);
- }, []);
-
- // Filter and sort podcasts based on search query and sort order
- useEffect(() => {
- if (!podcasts) return;
-
- let result = [...podcasts];
-
- // Filter by search term
- if (searchQuery) {
- const query = searchQuery.toLowerCase();
- result = result.filter((podcast) => podcast.title.toLowerCase().includes(query));
- }
-
- // Filter by search space
- result = result.filter((podcast) => podcast.search_space_id === parseInt(searchSpaceId));
-
- // Sort podcasts
- result.sort((a, b) => {
- const dateA = new Date(a.created_at).getTime();
- const dateB = new Date(b.created_at).getTime();
-
- return sortOrder === "newest" ? dateB - dateA : dateA - dateB;
- });
-
- setFilteredPodcasts(result);
- }, [podcasts, searchQuery, sortOrder, searchSpaceId]);
-
- // Cleanup object URL on unmount or when currentPodcast changes
- useEffect(() => {
- return () => {
- if (currentObjectUrlRef.current) {
- URL.revokeObjectURL(currentObjectUrlRef.current);
- currentObjectUrlRef.current = null;
- }
- };
- }, []);
-
- // Audio player time update handler
- const handleTimeUpdate = () => {
- if (audioRef.current) {
- setCurrentTime(audioRef.current.currentTime);
- }
- };
-
- // Audio player metadata loaded handler
- const handleMetadataLoaded = () => {
- if (audioRef.current) {
- setDuration(audioRef.current.duration);
- }
- };
-
- // Play/pause toggle
- const togglePlayPause = () => {
- if (audioRef.current) {
- if (isPlaying) {
- audioRef.current.pause();
- } else {
- audioRef.current.play();
- }
- setIsPlaying(!isPlaying);
- }
- };
-
- // To close player
- const closePlayer = () => {
- if (isPlaying) {
- audioRef.current?.pause();
- }
- setIsPlaying(false);
- setAudioSrc(undefined);
- setCurrentTime(0);
- setCurrentPodcast(null);
- };
-
- // Seek to position
- const handleSeek = (value: number[]) => {
- if (audioRef.current) {
- audioRef.current.currentTime = value[0];
- setCurrentTime(value[0]);
- }
- };
-
- // Volume change
- const handleVolumeChange = (value: number[]) => {
- if (audioRef.current) {
- const newVolume = value[0];
-
- // Set volume
- audioRef.current.volume = newVolume;
- setVolume(newVolume);
-
- // Handle mute state based on volume
- if (newVolume === 0) {
- audioRef.current.muted = true;
- setIsMuted(true);
- } else {
- audioRef.current.muted = false;
- setIsMuted(false);
- }
- }
- };
-
- // Toggle mute
- const toggleMute = () => {
- if (audioRef.current) {
- const newMutedState = !isMuted;
- audioRef.current.muted = newMutedState;
- setIsMuted(newMutedState);
-
- // If unmuting, restore previous volume if it was 0
- if (!newMutedState && volume === 0) {
- const restoredVolume = 0.5;
- audioRef.current.volume = restoredVolume;
- setVolume(restoredVolume);
- }
- }
- };
-
- // Skip forward 10 seconds
- const skipForward = () => {
- if (audioRef.current) {
- audioRef.current.currentTime = Math.min(
- audioRef.current.duration,
- audioRef.current.currentTime + 10
- );
- }
- };
-
- // Skip backward 10 seconds
- const skipBackward = () => {
- if (audioRef.current) {
- audioRef.current.currentTime = Math.max(0, audioRef.current.currentTime - 10);
- }
- };
-
- // Format time in MM:SS
- const formatTime = (time: number) => {
- const minutes = Math.floor(time / 60);
- const seconds = Math.floor(time % 60);
- return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
- };
-
- // Play podcast - Fetch blob and set object URL
- const playPodcast = async (podcast: Podcast) => {
- // If the same podcast is selected, just toggle play/pause
- if (currentPodcast && currentPodcast.id === podcast.id) {
- togglePlayPause();
- return;
- }
-
- // Prevent multiple simultaneous loading requests
- if (isAudioLoading) {
- return;
- }
-
- try {
- // Reset player state and show loading
- setCurrentPodcast(podcast);
- setAudioSrc(undefined);
- setCurrentTime(0);
- setDuration(0);
- setIsPlaying(false);
- setIsAudioLoading(true);
-
- // Revoke previous object URL if exists (only after we've started the new request)
- if (currentObjectUrlRef.current) {
- URL.revokeObjectURL(currentObjectUrlRef.current);
- currentObjectUrlRef.current = null;
- }
-
- // Use AbortController to handle timeout or cancellation
- const controller = new AbortController();
- const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
-
- try {
- const response = await podcastsApiService.loadPodcast({
- request: { id: podcast.id },
- controller,
- });
- const objectUrl = URL.createObjectURL(response);
- currentObjectUrlRef.current = objectUrl;
-
- // Set audio source
- setAudioSrc(objectUrl);
-
- // Wait for the audio to be ready before playing
- // We'll handle actual playback in the onLoadedData event instead of here
- } catch (error) {
- if (error instanceof DOMException && error.name === "AbortError") {
- throw new Error("Request timed out. Please try again.");
- }
- throw error;
- } finally {
- clearTimeout(timeoutId);
- }
- } catch (error) {
- console.error("Error fetching or playing podcast:", error);
- toast.error(error instanceof Error ? error.message : "Failed to load podcast audio.");
- // Reset state on error
- setCurrentPodcast(null);
- setAudioSrc(undefined);
- } finally {
- setIsAudioLoading(false);
- }
- };
-
- // Function to handle podcast deletion
- const handleDeletePodcast = async () => {
- if (!podcastToDelete) return;
-
- try {
- await deletePodcast({ id: podcastToDelete.id });
-
- // Close dialog
- setDeleteDialogOpen(false);
- setPodcastToDelete(null);
-
- // If the current playing podcast is deleted, stop playback
- if (currentPodcast && currentPodcast.id === podcastToDelete.id) {
- if (audioRef.current) {
- audioRef.current.pause();
- }
- setCurrentPodcast(null);
- setIsPlaying(false);
- }
- } catch (error) {
- console.error("Error deleting podcast:", error);
- toast.error(error instanceof Error ? error.message : "Failed to delete podcast");
- }
- };
-
- return (
-
-
- );
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/researcher/[[...chat_id]]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/researcher/[[...chat_id]]/page.tsx
deleted file mode 100644
index 60980f034..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/researcher/[[...chat_id]]/page.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-"use client";
-
-import { type CreateMessage, type Message, useChat } from "@ai-sdk/react";
-import { useAtom, useAtomValue } from "jotai";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useMemo, useRef } from "react";
-import { createChatMutationAtom, updateChatMutationAtom } from "@/atoms/chats/chat-mutation.atoms";
-import { activeChatAtom } from "@/atoms/chats/chat-query.atoms";
-import { activeChatIdAtom } from "@/atoms/chats/ui.atoms";
-import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
-import ChatInterface from "@/components/chat/ChatInterface";
-import type { Document } from "@/contracts/types/document.types";
-import { useChatState } from "@/hooks/use-chat";
-import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
-
-export default function ResearcherPage() {
- const { search_space_id } = useParams();
- const router = useRouter();
- const hasSetInitialConnectors = useRef(false);
- const hasInitiatedResponse = useRef(null);
- const activeChatId = useAtomValue(activeChatIdAtom);
- const { data: activeChatState, isFetching: isChatLoading } = useAtomValue(activeChatAtom);
- const { mutateAsync: createChat } = useAtomValue(createChatMutationAtom);
- const { mutateAsync: updateChat } = useAtomValue(updateChatMutationAtom);
- const isNewChat = !activeChatId;
-
- // Reset the flag when chat ID changes (but not hasInitiatedResponse - we need to remember if we already initiated)
- useEffect(() => {
- hasSetInitialConnectors.current = false;
- }, [activeChatId]);
-
- const {
- token,
- researchMode,
- selectedConnectors,
- setSelectedConnectors,
- selectedDocuments,
- setSelectedDocuments,
- topK,
- setTopK,
- } = useChatState({
- search_space_id: search_space_id as string,
- chat_id: activeChatId ?? undefined,
- });
-
- // Fetch all available sources (document types + live search connectors)
- // Use the documentTypeCountsAtom for fetching document types
- const [documentTypeCountsQuery] = useAtom(documentTypeCountsAtom);
- const { data: documentTypeCountsData } = documentTypeCountsQuery;
-
- // Transform the response into the expected format
- const documentTypes = useMemo(() => {
- if (!documentTypeCountsData) return [];
- return Object.entries(documentTypeCountsData).map(([type, count]) => ({
- type,
- count,
- }));
- }, [documentTypeCountsData]);
-
- const { connectors: searchConnectors } = useSearchSourceConnectors(
- false,
- Number(search_space_id)
- );
-
- // Filter for non-indexable connectors (live search)
- const liveSearchConnectors = useMemo(
- () => searchConnectors.filter((connector) => !connector.is_indexable),
- [searchConnectors]
- );
-
- // Memoize document IDs to prevent infinite re-renders
- const documentIds = useMemo(() => {
- return selectedDocuments.map((doc) => doc.id);
- }, [selectedDocuments]);
-
- // Memoize connector types to prevent infinite re-renders
- const connectorTypes = useMemo(() => {
- return selectedConnectors;
- }, [selectedConnectors]);
-
- // Unified localStorage management for chat state
- interface ChatState {
- selectedDocuments: Document[];
- selectedConnectors: string[];
- researchMode: "QNA"; // Always QNA mode
- topK: number;
- }
-
- const getChatStateStorageKey = (searchSpaceId: string, chatId: string) =>
- `surfsense_chat_state_${searchSpaceId}_${chatId}`;
-
- const storeChatState = (searchSpaceId: string, chatId: string, state: ChatState) => {
- const key = getChatStateStorageKey(searchSpaceId, chatId);
- localStorage.setItem(key, JSON.stringify(state));
- };
-
- const restoreChatState = (searchSpaceId: string, chatId: string): ChatState | null => {
- const key = getChatStateStorageKey(searchSpaceId, chatId);
- const stored = localStorage.getItem(key);
- if (stored) {
- localStorage.removeItem(key); // Clean up after restoration
- try {
- return JSON.parse(stored);
- } catch (error) {
- console.error("Error parsing stored chat state:", error);
- return null;
- }
- }
- return null;
- };
-
- const handler = useChat({
- api: `${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/chat`,
- streamProtocol: "data",
- initialMessages: [],
- headers: {
- ...(token && { Authorization: `Bearer ${token}` }),
- },
- body: {
- data: {
- search_space_id: search_space_id,
- selected_connectors: connectorTypes,
- research_mode: researchMode,
- document_ids_to_add_in_context: documentIds,
- top_k: topK,
- },
- },
- onError: (error) => {
- console.error("Chat error:", error);
- },
- });
-
- const customHandlerAppend = async (
- message: Message | CreateMessage,
- chatRequestOptions?: { data?: any }
- ) => {
- // Use the first message content as the chat title (truncated to 100 chars)
- const messageContent = typeof message.content === "string" ? message.content : "";
- const chatTitle = messageContent.slice(0, 100) || "Untitled Chat";
-
- const newChat = await createChat({
- type: researchMode,
- title: chatTitle,
- initial_connectors: selectedConnectors,
- messages: [
- {
- role: "user",
- content: message.content,
- },
- ],
- search_space_id: Number(search_space_id),
- });
- if (newChat) {
- // Store chat state before navigation
- storeChatState(search_space_id as string, String(newChat.id), {
- selectedDocuments,
- selectedConnectors,
- researchMode,
- topK,
- });
- router.replace(`/dashboard/${search_space_id}/researcher/${newChat.id}`);
- }
- return String(newChat.id);
- };
-
- useEffect(() => {
- if (token && !isNewChat && activeChatId) {
- const chatData = activeChatState?.chatDetails;
- if (!chatData) return;
-
- // Update configuration from chat data
- // researchMode is always "QNA", no need to set from chat data
-
- if (chatData.initial_connectors && Array.isArray(chatData.initial_connectors)) {
- setSelectedConnectors(chatData.initial_connectors);
- }
-
- // Load existing messages
- if (chatData.messages && Array.isArray(chatData.messages)) {
- if (chatData.messages.length === 1 && chatData.messages[0].role === "user") {
- // Single user message - append to trigger LLM response
- // Only if we haven't already initiated for this chat and handler doesn't have messages yet
- if (hasInitiatedResponse.current !== activeChatId && handler.messages.length === 0) {
- hasInitiatedResponse.current = activeChatId;
- handler.append({
- role: "user",
- content: chatData.messages[0].content,
- });
- }
- } else if (chatData.messages.length > 1) {
- // Multiple messages - set them all
- handler.setMessages(chatData.messages);
- }
- }
- }
- }, [token, isNewChat, activeChatId, isChatLoading]);
-
- // Restore chat state from localStorage on page load
- useEffect(() => {
- if (activeChatId && search_space_id) {
- const restoredState = restoreChatState(search_space_id as string, activeChatId);
- if (restoredState) {
- setSelectedDocuments(restoredState.selectedDocuments);
- setSelectedConnectors(restoredState.selectedConnectors);
- setTopK(restoredState.topK);
- // researchMode is always "QNA", no need to restore
- }
- }
- }, [
- activeChatId,
- isChatLoading,
- search_space_id,
- setSelectedDocuments,
- setSelectedConnectors,
- setTopK,
- ]);
-
- // Set all sources as default for new chats (only once on initial mount)
- useEffect(() => {
- if (
- isNewChat &&
- !hasSetInitialConnectors.current &&
- selectedConnectors.length === 0 &&
- documentTypes.length > 0
- ) {
- // Combine all document types and live search connectors
- const allSourceTypes = [
- ...documentTypes.map((dt) => dt.type),
- ...liveSearchConnectors.map((c) => c.connector_type),
- ];
-
- if (allSourceTypes.length > 0) {
- setSelectedConnectors(allSourceTypes);
- hasSetInitialConnectors.current = true;
- }
- }
- }, [
- isNewChat,
- documentTypes,
- liveSearchConnectors,
- selectedConnectors.length,
- setSelectedConnectors,
- ]);
-
- // Auto-update chat when messages change (only for existing chats)
- useEffect(() => {
- if (
- !isNewChat &&
- activeChatId &&
- handler.status === "ready" &&
- handler.messages.length > 0 &&
- handler.messages[handler.messages.length - 1]?.role === "assistant"
- ) {
- const userMessages = handler.messages.filter((msg) => msg.role === "user");
- if (userMessages.length === 0) return;
- const title = userMessages[0].content;
-
- updateChat({
- type: researchMode,
- title: title,
- initial_connectors: selectedConnectors,
- messages: handler.messages,
- search_space_id: Number(search_space_id),
- id: Number(activeChatId),
- });
- }
- }, [handler.messages, handler.status, activeChatId, isNewChat, isChatLoading]);
-
- if (isChatLoading) {
- return (
-
+
+
+
+ );
+ }
+
+ // If global configs exist but auto-config failed, show simple message
+ if (globalConfigs.length > 0 && !isAutoConfiguring) {
+ return null; // Will redirect via useEffect
+ }
+
+ // No global configs - show the config form
+ return (
+
-
-
- }
- >
-
+
+
+
+
+
+
+ + {isAutoConfiguring ? "Setting up your AI..." : "Loading..."} +
++ {isAutoConfiguring + ? "Auto-configuring with available settings" + : "Please wait while we check your configuration"} +
+
+ {[0, 1, 2].map((i) => (
+
+
+
);
-};
-
-export default OnboardPage;
+}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/podcasts/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/podcasts/page.tsx
deleted file mode 100644
index c8c724ee2..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/podcasts/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Suspense } from "react";
-import PodcastsPageClient from "./podcasts-client";
-
-interface PageProps {
- params: {
- search_space_id: string;
- };
-}
-
-export default async function PodcastsPage({ params }: PageProps) {
- const { search_space_id: searchSpaceId } = await Promise.resolve(params);
-
- return (
-
+
{/* Header */}
-
- router.push(`/dashboard/${searchSpaceId}/researcher`)}
- colorScheme="violet"
- delay={0.9}
- />
-
- router.push(`/dashboard/${searchSpaceId}/sources/add`)}
- colorScheme="blue"
- delay={0.8}
- />
-
- router.push(`/dashboard/${searchSpaceId}/team`)}
- colorScheme="emerald"
- delay={0.7}
- />
+
+
+ LLM Configuration
+
+
+
+
- {/* Advanced Settings */}
- refreshConfigs()}
- onConfigDeleted={() => refreshConfigs()}
- onPreferencesUpdated={handleRefreshPreferences}
- />
-
- {/* Footer */}
-
-
+ You can add more configurations and customize settings anytime in{" "}
+
+
+
+
- {/* Quick Stats */}
-
- {/* Action Cards */}
+ {/* Config Form */}
+
+ Configure Your AI
++ Add your LLM provider to get started with SurfSense +
+- You can always adjust these settings later in{" "} - -
-
-
-
- {filteredPodcasts.map((podcast, index) => (
- playPodcast(podcast)}
- >
-
-
-
- )}
-
- {currentPodcast?.id === podcast.id && !isAudioLoading && (
-
-
-
-
-
-
-
-
-
-
-
- )}
-
-
- ))}
-
-
- )}
-
- {/* Current Podcast Player (Fixed at bottom) */}
- {currentPodcast && !isAudioLoading && audioSrc && (
-
-
- )}
-
-
- {/* Delete Confirmation Dialog */}
-
-
- {/* Hidden audio element for playback */}
-
-
-
-
- {/* Filter and Search Bar */}
- Podcasts
-Listen to generated podcasts.
-
-
-
- {/* Status Messages */}
- {isFetchingPodcasts && (
-
-
-
-
-
-
-
-
-
-
- )}
-
- {fetchError && !isFetchingPodcasts && (
-
-
-
- Loading podcasts...
-
-
- )}
-
- {!isFetchingPodcasts && !fetchError && filteredPodcasts.length === 0 && (
- Error loading podcasts
-{fetchError.message ?? "Failed to load podcasts"}
-
-
- )}
-
- {/* Podcast Grid */}
- {!isFetchingPodcasts && !fetchError && filteredPodcasts.length > 0 && (
- No podcasts found
-- {searchQuery - ? "Try adjusting your search filters" - : "Generate podcasts from your chats to get started"} -
-
- {/* Podcast image with gradient overlay */}
-
-
-
-
-
- )}
-
- {/* Play button with animations */}
- {!(currentPodcast?.id === podcast.id && (isPlaying || isAudioLoading)) && (
-
-
-
- )}
-
- {/* Pause button with animations */}
- {currentPodcast?.id === podcast.id && isPlaying && !isAudioLoading && (
-
-
-
- )}
-
- {/* Now playing indicator */}
- {currentPodcast?.id === podcast.id && !isAudioLoading && (
-
-
- Loading podcast...
-
-
-
-
-
- Now Playing
-
- )}
-
-
-
- {currentPodcast?.id === podcast.id && !isAudioLoading && (
- - {podcast.title || "Untitled Podcast"} -
-
-
- {formatTime(currentTime)}
- {formatTime(duration)}
-
-
-
-
-
-
-
- {
- e.stopPropagation();
- setPodcastToDelete({
- id: podcast.id,
- title: podcast.title,
- });
- setDeleteDialogOpen(true);
- }}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {currentPodcast.title}
- -
-
-
-
-
- {formatTime(currentTime)} / {formatTime(duration)}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- return (
- Loading...
- {activeItem?.label}
-- {activeItem?.description} -
-
+
{
diff --git a/surfsense_web/app/globals.css b/surfsense_web/app/globals.css
index 5aee982bb..4f4ab6de1 100644
--- a/surfsense_web/app/globals.css
+++ b/surfsense_web/app/globals.css
@@ -158,3 +158,4 @@ button {
}
@source '../node_modules/@llamaindex/chat-ui/**/*.{ts,tsx}';
+@source '../node_modules/streamdown/dist/*.js';
diff --git a/surfsense_web/app/layout.tsx b/surfsense_web/app/layout.tsx
index 54086194b..871293875 100644
--- a/surfsense_web/app/layout.tsx
+++ b/surfsense_web/app/layout.tsx
@@ -1,7 +1,7 @@
import type { Metadata } from "next";
import "./globals.css";
import { GoogleAnalytics } from "@next/third-parties/google";
-import { RootProvider } from "fumadocs-ui/provider";
+import { RootProvider } from "fumadocs-ui/provider/next";
import { Roboto } from "next/font/google";
import { I18nProvider } from "@/components/providers/I18nProvider";
import { ThemeProvider } from "@/components/theme/theme-provider";
diff --git a/surfsense_web/atoms/chats/chat-mutation.atoms.ts b/surfsense_web/atoms/chats/chat-mutation.atoms.ts
deleted file mode 100644
index c761a706f..000000000
--- a/surfsense_web/atoms/chats/chat-mutation.atoms.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { atomWithMutation } from "jotai-tanstack-query";
-import { toast } from "sonner";
-import type {
- ChatSummary,
- CreateChatRequest,
- DeleteChatRequest,
- UpdateChatRequest,
-} from "@/contracts/types/chat.types";
-import { chatsApiService } from "@/lib/apis/chats-api.service";
-import { getBearerToken } from "@/lib/auth-utils";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { queryClient } from "@/lib/query-client/client";
-import { activeSearchSpaceIdAtom } from "../search-spaces/search-space-query.atoms";
-import { globalChatsQueryParamsAtom } from "./ui.atoms";
-
-export const deleteChatMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
- const authToken = getBearerToken();
- const chatsQueryParams = get(globalChatsQueryParamsAtom);
-
- return {
- mutationKey: cacheKeys.chats.globalQueryParams(chatsQueryParams),
- enabled: !!searchSpaceId && !!authToken,
- mutationFn: async (request: DeleteChatRequest) => {
- return chatsApiService.deleteChat(request);
- },
-
- onSuccess: (_, request: DeleteChatRequest) => {
- toast.success("Chat deleted successfully");
- // Optimistically update the current query
- queryClient.setQueryData(
- cacheKeys.chats.globalQueryParams(chatsQueryParams),
- (oldData: ChatSummary[]) => {
- return oldData?.filter((chat) => chat.id !== request.id) ?? [];
- }
- );
- // Invalidate all chat queries to ensure consistency across components
- queryClient.invalidateQueries({
- queryKey: ["chats"],
- });
- // Also invalidate the "all-chats" query used by AllChatsSidebar
- queryClient.invalidateQueries({
- queryKey: ["all-chats"],
- });
- },
- };
-});
-
-export const createChatMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
- const authToken = getBearerToken();
- const chatsQueryParams = get(globalChatsQueryParamsAtom);
-
- return {
- mutationKey: cacheKeys.chats.globalQueryParams(chatsQueryParams),
- enabled: !!searchSpaceId && !!authToken,
- mutationFn: async (request: CreateChatRequest) => {
- return chatsApiService.createChat(request);
- },
-
- onSuccess: () => {
- // Invalidate ALL chat queries to ensure sidebar and other components refresh
- // Using a partial key match to avoid stale closure issues with specific query params
- queryClient.invalidateQueries({
- queryKey: ["chats"],
- });
- // Also invalidate the "all-chats" query used by AllChatsSidebar
- queryClient.invalidateQueries({
- queryKey: ["all-chats"],
- });
- },
- };
-});
-
-export const updateChatMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
- const authToken = getBearerToken();
- const chatsQueryParams = get(globalChatsQueryParamsAtom);
-
- return {
- mutationKey: cacheKeys.chats.globalQueryParams(chatsQueryParams),
- enabled: !!searchSpaceId && !!authToken,
- mutationFn: async (request: UpdateChatRequest) => {
- return chatsApiService.updateChat(request);
- },
-
- onSuccess: () => {
- queryClient.invalidateQueries({
- queryKey: cacheKeys.chats.globalQueryParams(chatsQueryParams),
- });
- },
- };
-});
diff --git a/surfsense_web/atoms/chats/chat-query.atoms.ts b/surfsense_web/atoms/chats/chat-query.atoms.ts
deleted file mode 100644
index 5a1242ded..000000000
--- a/surfsense_web/atoms/chats/chat-query.atoms.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { atomWithQuery } from "jotai-tanstack-query";
-import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { chatsApiService } from "@/lib/apis/chats-api.service";
-import { podcastsApiService } from "@/lib/apis/podcasts-api.service";
-import { getBearerToken } from "@/lib/auth-utils";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { activeChatIdAtom, globalChatsQueryParamsAtom } from "./ui.atoms";
-
-export const activeChatAtom = atomWithQuery((get) => {
- const activeChatId = get(activeChatIdAtom);
- const authToken = getBearerToken();
-
- return {
- queryKey: cacheKeys.chats.activeChat(activeChatId ?? ""),
- enabled: !!activeChatId && !!authToken,
- queryFn: async () => {
- if (!authToken) {
- throw new Error("No authentication token found");
- }
- if (!activeChatId) {
- throw new Error("No active chat id found");
- }
-
- const [podcast, chatDetails] = await Promise.all([
- podcastsApiService.getPodcastByChatId({ chat_id: Number(activeChatId) }),
- chatsApiService.getChatDetails({ id: Number(activeChatId) }),
- ]);
-
- return { chatId: activeChatId, chatDetails, podcast };
- },
- };
-});
-
-export const chatsAtom = atomWithQuery((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
- const authToken = getBearerToken();
- const queryParams = get(globalChatsQueryParamsAtom);
-
- return {
- queryKey: cacheKeys.chats.globalQueryParams(queryParams),
- enabled: !!searchSpaceId && !!authToken,
- queryFn: async () => {
- return chatsApiService.getChats({
- queryParams: queryParams,
- });
- },
- };
-});
diff --git a/surfsense_web/atoms/chats/ui.atoms.ts b/surfsense_web/atoms/chats/ui.atoms.ts
deleted file mode 100644
index c92365aef..000000000
--- a/surfsense_web/atoms/chats/ui.atoms.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { atom } from "jotai";
-import type { GetChatsRequest } from "@/contracts/types/chat.types";
-
-type ActiveChathatUIState = {
- isChatPannelOpen: boolean;
-};
-
-export const activeChathatUIAtom = atom({
- isChatPannelOpen: false,
-});
-
-export const activeChatIdAtom = atom(null);
-
-export const globalChatsQueryParamsAtom = atom({
- limit: 5,
- skip: 0,
-});
diff --git a/surfsense_web/atoms/llm-config/llm-config-mutation.atoms.ts b/surfsense_web/atoms/llm-config/llm-config-mutation.atoms.ts
deleted file mode 100644
index f28b1d708..000000000
--- a/surfsense_web/atoms/llm-config/llm-config-mutation.atoms.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { atomWithMutation } from "jotai-tanstack-query";
-import { toast } from "sonner";
-import type {
- CreateLLMConfigRequest,
- DeleteLLMConfigRequest,
- GetLLMConfigsResponse,
- UpdateLLMConfigRequest,
- UpdateLLMConfigResponse,
- UpdateLLMPreferencesRequest,
-} from "@/contracts/types/llm-config.types";
-import { llmConfigApiService } from "@/lib/apis/llm-config-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { queryClient } from "@/lib/query-client/client";
-import { activeSearchSpaceIdAtom } from "../search-spaces/search-space-query.atoms";
-
-export const createLLMConfigMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
-
- return {
- mutationKey: cacheKeys.llmConfigs.all(searchSpaceId!),
- enabled: !!searchSpaceId,
- mutationFn: async (request: CreateLLMConfigRequest) => {
- return llmConfigApiService.createLLMConfig(request);
- },
-
- onSuccess: () => {
- toast.success("LLM configuration created successfully");
- queryClient.invalidateQueries({
- queryKey: cacheKeys.llmConfigs.all(searchSpaceId!),
- });
- queryClient.invalidateQueries({
- queryKey: cacheKeys.llmConfigs.global(),
- });
- },
- };
-});
-
-export const updateLLMConfigMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
-
- return {
- mutationKey: cacheKeys.llmConfigs.all(searchSpaceId!),
- enabled: !!searchSpaceId,
- mutationFn: async (request: UpdateLLMConfigRequest) => {
- return llmConfigApiService.updateLLMConfig(request);
- },
-
- onSuccess: (_: UpdateLLMConfigResponse, request: UpdateLLMConfigRequest) => {
- toast.success("LLM configuration updated successfully");
- queryClient.invalidateQueries({
- queryKey: cacheKeys.llmConfigs.all(searchSpaceId!),
- });
- queryClient.invalidateQueries({
- queryKey: cacheKeys.llmConfigs.byId(String(request.id)),
- });
- queryClient.invalidateQueries({
- queryKey: cacheKeys.llmConfigs.global(),
- });
- },
- };
-});
-
-export const deleteLLMConfigMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
- const authToken = localStorage.getItem("surfsense_bearer_token");
-
- return {
- mutationKey: cacheKeys.llmConfigs.all(searchSpaceId!),
- enabled: !!searchSpaceId && !!authToken,
- mutationFn: async (request: DeleteLLMConfigRequest) => {
- return llmConfigApiService.deleteLLMConfig(request);
- },
-
- onSuccess: (_, request: DeleteLLMConfigRequest) => {
- toast.success("LLM configuration deleted successfully");
- queryClient.setQueryData(
- cacheKeys.llmConfigs.all(searchSpaceId!),
- (oldData: GetLLMConfigsResponse | undefined) => {
- if (!oldData) return oldData;
- return oldData.filter((config) => config.id !== request.id);
- }
- );
- queryClient.invalidateQueries({
- queryKey: cacheKeys.llmConfigs.byId(String(request.id)),
- });
- queryClient.invalidateQueries({
- queryKey: cacheKeys.llmConfigs.global(),
- });
- },
- };
-});
-
-export const updateLLMPreferencesMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
-
- return {
- mutationKey: cacheKeys.llmConfigs.preferences(searchSpaceId!),
- enabled: !!searchSpaceId,
- mutationFn: async (request: UpdateLLMPreferencesRequest) => {
- return llmConfigApiService.updateLLMPreferences(request);
- },
-
- onSuccess: () => {
- toast.success("LLM preferences updated successfully");
- queryClient.invalidateQueries({
- queryKey: cacheKeys.llmConfigs.preferences(searchSpaceId!),
- });
- },
- };
-});
diff --git a/surfsense_web/atoms/llm-config/llm-config-query.atoms.ts b/surfsense_web/atoms/llm-config/llm-config-query.atoms.ts
deleted file mode 100644
index 22ae63d7f..000000000
--- a/surfsense_web/atoms/llm-config/llm-config-query.atoms.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { atomWithQuery } from "jotai-tanstack-query";
-import { llmConfigApiService } from "@/lib/apis/llm-config-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { activeSearchSpaceIdAtom } from "../search-spaces/search-space-query.atoms";
-
-export const llmConfigsAtom = atomWithQuery((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
-
- return {
- queryKey: cacheKeys.llmConfigs.all(searchSpaceId!),
- enabled: !!searchSpaceId,
- staleTime: 5 * 60 * 1000, // 5 minutes
- queryFn: async () => {
- return llmConfigApiService.getLLMConfigs({
- queryParams: {
- search_space_id: searchSpaceId!,
- },
- });
- },
- };
-});
-
-export const globalLLMConfigsAtom = atomWithQuery(() => {
- return {
- queryKey: cacheKeys.llmConfigs.global(),
- staleTime: 10 * 60 * 1000, // 10 minutes
- queryFn: async () => {
- return llmConfigApiService.getGlobalLLMConfigs();
- },
- };
-});
-
-export const llmPreferencesAtom = atomWithQuery((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
-
- return {
- queryKey: cacheKeys.llmConfigs.preferences(String(searchSpaceId)),
- enabled: !!searchSpaceId,
- staleTime: 5 * 60 * 1000, // 5 minutes
- queryFn: async () => {
- return llmConfigApiService.getLLMPreferences({
- search_space_id: Number(searchSpaceId),
- });
- },
- };
-});
diff --git a/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts b/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
new file mode 100644
index 000000000..8f81b7475
--- /dev/null
+++ b/surfsense_web/atoms/new-llm-config/new-llm-config-mutation.atoms.ts
@@ -0,0 +1,116 @@
+import { atomWithMutation } from "jotai-tanstack-query";
+import { toast } from "sonner";
+import type {
+ CreateNewLLMConfigRequest,
+ DeleteNewLLMConfigRequest,
+ GetNewLLMConfigsResponse,
+ UpdateLLMPreferencesRequest,
+ UpdateNewLLMConfigRequest,
+ UpdateNewLLMConfigResponse,
+} from "@/contracts/types/new-llm-config.types";
+import { newLLMConfigApiService } from "@/lib/apis/new-llm-config-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { queryClient } from "@/lib/query-client/client";
+import { activeSearchSpaceIdAtom } from "../search-spaces/search-space-query.atoms";
+
+/**
+ * Mutation atom for creating a new NewLLMConfig
+ */
+export const createNewLLMConfigMutationAtom = atomWithMutation((get) => {
+ const searchSpaceId = get(activeSearchSpaceIdAtom);
+
+ return {
+ mutationKey: ["new-llm-configs", "create"],
+ enabled: !!searchSpaceId,
+ mutationFn: async (request: CreateNewLLMConfigRequest) => {
+ return newLLMConfigApiService.createConfig(request);
+ },
+ onSuccess: () => {
+ toast.success("Configuration created successfully");
+ queryClient.invalidateQueries({
+ queryKey: cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
+ });
+ },
+ onError: (error: Error) => {
+ toast.error(error.message || "Failed to create configuration");
+ },
+ };
+});
+
+/**
+ * Mutation atom for updating an existing NewLLMConfig
+ */
+export const updateNewLLMConfigMutationAtom = atomWithMutation((get) => {
+ const searchSpaceId = get(activeSearchSpaceIdAtom);
+
+ return {
+ mutationKey: ["new-llm-configs", "update"],
+ enabled: !!searchSpaceId,
+ mutationFn: async (request: UpdateNewLLMConfigRequest) => {
+ return newLLMConfigApiService.updateConfig(request);
+ },
+ onSuccess: (_: UpdateNewLLMConfigResponse, request: UpdateNewLLMConfigRequest) => {
+ toast.success("Configuration updated successfully");
+ queryClient.invalidateQueries({
+ queryKey: cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
+ });
+ queryClient.invalidateQueries({
+ queryKey: cacheKeys.newLLMConfigs.byId(request.id),
+ });
+ },
+ onError: (error: Error) => {
+ toast.error(error.message || "Failed to update configuration");
+ },
+ };
+});
+
+/**
+ * Mutation atom for deleting a NewLLMConfig
+ */
+export const deleteNewLLMConfigMutationAtom = atomWithMutation((get) => {
+ const searchSpaceId = get(activeSearchSpaceIdAtom);
+
+ return {
+ mutationKey: ["new-llm-configs", "delete"],
+ enabled: !!searchSpaceId,
+ mutationFn: async (request: DeleteNewLLMConfigRequest) => {
+ return newLLMConfigApiService.deleteConfig(request);
+ },
+ onSuccess: (_, request: DeleteNewLLMConfigRequest) => {
+ toast.success("Configuration deleted successfully");
+ queryClient.setQueryData(
+ cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
+ (oldData: GetNewLLMConfigsResponse | undefined) => {
+ if (!oldData) return oldData;
+ return oldData.filter((config) => config.id !== request.id);
+ }
+ );
+ },
+ onError: (error: Error) => {
+ toast.error(error.message || "Failed to delete configuration");
+ },
+ };
+});
+
+/**
+ * Mutation atom for updating LLM preferences (role assignments)
+ */
+export const updateLLMPreferencesMutationAtom = atomWithMutation((get) => {
+ const searchSpaceId = get(activeSearchSpaceIdAtom);
+
+ return {
+ mutationKey: ["llm-preferences", "update"],
+ enabled: !!searchSpaceId,
+ mutationFn: async (request: UpdateLLMPreferencesRequest) => {
+ return newLLMConfigApiService.updateLLMPreferences(request);
+ },
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: cacheKeys.newLLMConfigs.preferences(Number(searchSpaceId)),
+ });
+ },
+ onError: (error: Error) => {
+ toast.error(error.message || "Failed to update LLM preferences");
+ },
+ };
+});
diff --git a/surfsense_web/atoms/new-llm-config/new-llm-config-query.atoms.ts b/surfsense_web/atoms/new-llm-config/new-llm-config-query.atoms.ts
new file mode 100644
index 000000000..9f5085d33
--- /dev/null
+++ b/surfsense_web/atoms/new-llm-config/new-llm-config-query.atoms.ts
@@ -0,0 +1,64 @@
+import { atomWithQuery } from "jotai-tanstack-query";
+import { newLLMConfigApiService } from "@/lib/apis/new-llm-config-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { activeSearchSpaceIdAtom } from "../search-spaces/search-space-query.atoms";
+
+/**
+ * Query atom for fetching all NewLLMConfigs for the active search space
+ */
+export const newLLMConfigsAtom = atomWithQuery((get) => {
+ const searchSpaceId = get(activeSearchSpaceIdAtom);
+
+ return {
+ queryKey: cacheKeys.newLLMConfigs.all(Number(searchSpaceId)),
+ enabled: !!searchSpaceId,
+ staleTime: 5 * 60 * 1000, // 5 minutes
+ queryFn: async () => {
+ return newLLMConfigApiService.getConfigs({
+ search_space_id: Number(searchSpaceId),
+ });
+ },
+ };
+});
+
+/**
+ * Query atom for fetching global NewLLMConfigs (from YAML, negative IDs)
+ */
+export const globalNewLLMConfigsAtom = atomWithQuery(() => {
+ return {
+ queryKey: cacheKeys.newLLMConfigs.global(),
+ staleTime: 10 * 60 * 1000, // 10 minutes - global configs rarely change
+ queryFn: async () => {
+ return newLLMConfigApiService.getGlobalConfigs();
+ },
+ };
+});
+
+/**
+ * Query atom for fetching LLM preferences (role assignments) for the active search space
+ */
+export const llmPreferencesAtom = atomWithQuery((get) => {
+ const searchSpaceId = get(activeSearchSpaceIdAtom);
+
+ return {
+ queryKey: cacheKeys.newLLMConfigs.preferences(Number(searchSpaceId)),
+ enabled: !!searchSpaceId,
+ staleTime: 5 * 60 * 1000, // 5 minutes
+ queryFn: async () => {
+ return newLLMConfigApiService.getLLMPreferences(Number(searchSpaceId));
+ },
+ };
+});
+
+/**
+ * Query atom for fetching default system instructions template
+ */
+export const defaultSystemInstructionsAtom = atomWithQuery(() => {
+ return {
+ queryKey: cacheKeys.newLLMConfigs.defaultInstructions(),
+ staleTime: 60 * 60 * 1000, // 1 hour - this rarely changes
+ queryFn: async () => {
+ return newLLMConfigApiService.getDefaultSystemInstructions();
+ },
+ };
+});
diff --git a/surfsense_web/atoms/podcasts/podcast-mutation.atoms.ts b/surfsense_web/atoms/podcasts/podcast-mutation.atoms.ts
deleted file mode 100644
index cdb28ceb2..000000000
--- a/surfsense_web/atoms/podcasts/podcast-mutation.atoms.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { atomWithMutation } from "jotai-tanstack-query";
-import { toast } from "sonner";
-import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import type {
- DeletePodcastRequest,
- GeneratePodcastRequest,
- Podcast,
-} from "@/contracts/types/podcast.types";
-import { podcastsApiService } from "@/lib/apis/podcasts-api.service";
-import { getBearerToken } from "@/lib/auth-utils";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { queryClient } from "@/lib/query-client/client";
-import { globalPodcastsQueryParamsAtom } from "./ui.atoms";
-
-export const deletePodcastMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
- const authToken = getBearerToken();
- const podcastsQueryParams = get(globalPodcastsQueryParamsAtom);
-
- return {
- mutationKey: cacheKeys.podcasts.globalQueryParams(podcastsQueryParams),
- enabled: !!searchSpaceId && !!authToken,
- mutationFn: async (request: DeletePodcastRequest) => {
- return podcastsApiService.deletePodcast(request);
- },
-
- onSuccess: (_, request: DeletePodcastRequest) => {
- toast.success("Podcast deleted successfully");
- queryClient.setQueryData(
- cacheKeys.podcasts.globalQueryParams(podcastsQueryParams),
- (oldData: Podcast[]) => {
- return oldData.filter((podcast) => podcast.id !== request.id);
- }
- );
- },
- };
-});
-
-export const generatePodcastMutationAtom = atomWithMutation((get) => {
- const searchSpaceId = get(activeSearchSpaceIdAtom);
- const authToken = getBearerToken();
- const podcastsQueryParams = get(globalPodcastsQueryParamsAtom);
-
- return {
- mutationKey: cacheKeys.podcasts.globalQueryParams(podcastsQueryParams),
- enabled: !!searchSpaceId && !!authToken,
- mutationFn: async (request: GeneratePodcastRequest) => {
- return podcastsApiService.generatePodcast(request);
- },
- };
-});
diff --git a/surfsense_web/atoms/podcasts/podcast-query.atoms.ts b/surfsense_web/atoms/podcasts/podcast-query.atoms.ts
deleted file mode 100644
index ea5c1c104..000000000
--- a/surfsense_web/atoms/podcasts/podcast-query.atoms.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { atomWithQuery } from "jotai-tanstack-query";
-import { podcastsApiService } from "@/lib/apis/podcasts-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { globalPodcastsQueryParamsAtom } from "./ui.atoms";
-
-export const podcastsAtom = atomWithQuery((get) => {
- const queryParams = get(globalPodcastsQueryParamsAtom);
-
- return {
- queryKey: cacheKeys.podcasts.globalQueryParams(queryParams),
- queryFn: async () => {
- return podcastsApiService.getPodcasts({
- queryParams: queryParams,
- });
- },
- };
-});
diff --git a/surfsense_web/atoms/podcasts/ui.atoms.ts b/surfsense_web/atoms/podcasts/ui.atoms.ts
deleted file mode 100644
index 0f2701375..000000000
--- a/surfsense_web/atoms/podcasts/ui.atoms.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { atom } from "jotai";
-import type { GetPodcastsRequest } from "@/contracts/types/podcast.types";
-
-export const globalPodcastsQueryParamsAtom = atom({
- limit: 5,
- skip: 0,
-});
diff --git a/surfsense_web/atoms/search-spaces/search-space-query.atoms.ts b/surfsense_web/atoms/search-spaces/search-space-query.atoms.ts
index 4aa024e93..588466d90 100644
--- a/surfsense_web/atoms/search-spaces/search-space-query.atoms.ts
+++ b/surfsense_web/atoms/search-spaces/search-space-query.atoms.ts
@@ -25,13 +25,3 @@ export const searchSpacesAtom = atomWithQuery((get) => {
},
};
});
-
-export const communityPromptsAtom = atomWithQuery(() => {
- return {
- queryKey: cacheKeys.searchSpaces.communityPrompts,
- staleTime: 30 * 60 * 1000,
- queryFn: async () => {
- return searchSpacesApiService.getCommunityPrompts();
- },
- };
-});
diff --git a/surfsense_web/components/assistant-ui/attachment.tsx b/surfsense_web/components/assistant-ui/attachment.tsx
new file mode 100644
index 000000000..dfb63cbf3
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/attachment.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import {
+ AttachmentPrimitive,
+ ComposerPrimitive,
+ MessagePrimitive,
+ useAssistantApi,
+ useAssistantState,
+} from "@assistant-ui/react";
+import { FileText, Loader2, PlusIcon, XIcon } from "lucide-react";
+import Image from "next/image";
+import { type FC, type PropsWithChildren, useEffect, useState } from "react";
+import { useShallow } from "zustand/shallow";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+const useFileSrc = (file: File | undefined) => {
+ const [src, setSrc] = useState(undefined);
+
+ useEffect(() => {
+ if (!file) {
+ setSrc(undefined);
+ return;
+ }
+
+ const objectUrl = URL.createObjectURL(file);
+ setSrc(objectUrl);
+
+ return () => {
+ URL.revokeObjectURL(objectUrl);
+ };
+ }, [file]);
+
+ return src;
+};
+
+const useAttachmentSrc = () => {
+ const { file, src } = useAssistantState(
+ useShallow(({ attachment }): { file?: File; src?: string } => {
+ if (!attachment || attachment.type !== "image") return {};
+ if (attachment.file) return { file: attachment.file };
+ // Only try to filter if content is an array (standard assistant-ui format)
+ // Our custom ChatAttachment has content as a string, so skip this
+ if (Array.isArray(attachment.content)) {
+ const src = attachment.content.filter((c) => c.type === "image")[0]?.image;
+ if (src) return { src };
+ }
+ return {};
+ })
+ );
+
+ return useFileSrc(file) ?? src;
+};
+
+type AttachmentPreviewProps = {
+ src: string;
+};
+
+const AttachmentPreview: FC = ({ src }) => {
+ const [isLoaded, setIsLoaded] = useState(false);
+ return (
+ setIsLoaded(true)}
+ priority={false}
+ />
+ );
+};
+
+const AttachmentPreviewDialog: FC = ({ children }) => {
+ const src = useAttachmentSrc();
+
+ if (!src) return children;
+
+ return (
+
+ );
+};
+
+const AttachmentThumb: FC = () => {
+ const isImage = useAssistantState(({ attachment }) => attachment?.type === "image");
+ // Check if actively processing (running AND progress < 100)
+ // When progress is 100, processing is done but waiting for send()
+ const isProcessing = useAssistantState(({ attachment }) => {
+ const status = attachment?.status;
+ if (status?.type !== "running") return false;
+ // If progress is defined and equals 100, processing is complete
+ const progress = (status as { type: "running"; progress?: number }).progress;
+ return progress === undefined || progress < 100;
+ });
+ const src = useAttachmentSrc();
+
+ // Show loading spinner only when actively processing (not when done and waiting for send)
+ if (isProcessing) {
+ return (
+
+
+
+
+ );
+};
+
+const AttachmentUI: FC = () => {
+ const api = useAssistantApi();
+ const isComposer = api.attachment.source === "composer";
+
+ const isImage = useAssistantState(({ attachment }) => attachment?.type === "image");
+ // Check if actively processing (running AND progress < 100)
+ // When progress is 100, processing is done but waiting for send()
+ const isProcessing = useAssistantState(({ attachment }) => {
+ const status = attachment?.status;
+ if (status?.type !== "running") return false;
+ const progress = (status as { type: "running"; progress?: number }).progress;
+ return progress === undefined || progress < 100;
+ });
+ const typeLabel = useAssistantState(({ attachment }) => {
+ const type = attachment?.type;
+ switch (type) {
+ case "image":
+ return "Image";
+ case "document":
+ return "Document";
+ case "file":
+ return "File";
+ default:
+ return "File"; // Default fallback for unknown types
+ }
+ });
+
+ return (
+
+ #attachment-tile]:size-24"
+ )}
+ >
+
+
+
+
+ {isComposer && !isProcessing &&
+
+ {isProcessing ? (
+
+
+
+ );
+};
+
+const AttachmentRemove: FC = () => {
+ return (
+
+
+
+
+ );
+};
+
+export const UserMessageAttachments: FC = () => {
+ return (
+
+
+
+
+ );
+};
diff --git a/surfsense_web/components/assistant-ui/inline-citation.tsx b/surfsense_web/components/assistant-ui/inline-citation.tsx
new file mode 100644
index 000000000..065f37e8e
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/inline-citation.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import type { FC } from "react";
+import { useState } from "react";
+import { SourceDetailPanel } from "@/components/new-chat/source-detail-panel";
+
+interface InlineCitationProps {
+ chunkId: number;
+ citationNumber: number;
+}
+
+/**
+ * Inline citation component for the new chat.
+ * Renders a clickable numbered badge that opens the SourceDetailPanel with document chunk details.
+ */
+export const InlineCitation: FC = ({ chunkId, citationNumber }) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+ setIsOpen(true)}
+ onKeyDown={(e) => e.key === "Enter" && setIsOpen(true)}
+ className="text-[10px] font-bold bg-primary/80 hover:bg-primary text-primary-foreground rounded-full min-w-4 h-4 px-1 inline-flex items-center justify-center align-super cursor-pointer transition-colors ml-0.5"
+ title={`View source #${citationNumber}`}
+ role="button"
+ tabIndex={0}
+ >
+ {citationNumber}
+
+
+ );
+};
diff --git a/surfsense_web/components/assistant-ui/markdown-text.tsx b/surfsense_web/components/assistant-ui/markdown-text.tsx
new file mode 100644
index 000000000..41d6143b9
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/markdown-text.tsx
@@ -0,0 +1,325 @@
+"use client";
+
+import "@assistant-ui/react-markdown/styles/dot.css";
+
+import {
+ type CodeHeaderProps,
+ MarkdownTextPrimitive,
+ unstable_memoizeMarkdownComponents as memoizeMarkdownComponents,
+ useIsMarkdownCodeBlock,
+} from "@assistant-ui/react-markdown";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { type FC, memo, type ReactNode, useState } from "react";
+import remarkGfm from "remark-gfm";
+import { InlineCitation } from "@/components/assistant-ui/inline-citation";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
+
+// Citation pattern: [citation:CHUNK_ID]
+const CITATION_REGEX = /\[citation:(\d+)\]/g;
+
+// Track chunk IDs to citation numbers mapping for consistent numbering
+// This map is reset when a new message starts rendering
+let chunkIdToCitationNumber: Map = new Map();
+let nextCitationNumber = 1;
+
+/**
+ * Resets the citation counter - should be called at the start of each message
+ */
+export function resetCitationCounter() {
+ chunkIdToCitationNumber = new Map();
+ nextCitationNumber = 1;
+}
+
+/**
+ * Gets or assigns a citation number for a chunk ID
+ */
+function getCitationNumber(chunkId: number): number {
+ if (!chunkIdToCitationNumber.has(chunkId)) {
+ chunkIdToCitationNumber.set(chunkId, nextCitationNumber++);
+ }
+ return chunkIdToCitationNumber.get(chunkId)!;
+}
+
+/**
+ * Parses text and replaces [citation:XXX] patterns with InlineCitation components
+ */
+function parseTextWithCitations(text: string): ReactNode[] {
+ const parts: ReactNode[] = [];
+ let lastIndex = 0;
+ let match: RegExpExecArray | null;
+ let instanceIndex = 0;
+
+ // Reset regex state
+ CITATION_REGEX.lastIndex = 0;
+
+ while ((match = CITATION_REGEX.exec(text)) !== null) {
+ // Add text before the citation
+ if (match.index > lastIndex) {
+ parts.push(text.substring(lastIndex, match.index));
+ }
+
+ // Add the citation component
+ const chunkId = Number.parseInt(match[1], 10);
+ const citationNumber = getCitationNumber(chunkId);
+ parts.push(
+ = ({ language, code }) => {
+ const { isCopied, copyToClipboard } = useCopyToClipboard();
+ const onCopy = () => {
+ if (!code || isCopied) return;
+ copyToClipboard(code);
+ };
+
+ return (
+ (false);
+
+ const copyToClipboard = (value: string) => {
+ if (!value) return;
+
+ navigator.clipboard.writeText(value).then(() => {
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), copiedDuration);
+ });
+ };
+
+ return { isCopied, copyToClipboard };
+};
+
+/**
+ * Helper to process children and replace citation patterns with components
+ */
+function processChildrenWithCitations(children: ReactNode): ReactNode {
+ if (typeof children === "string") {
+ const parsed = parseTextWithCitations(children);
+ return parsed.length === 1 && typeof parsed[0] === "string" ? children : <>{parsed};
+ }
+
+ if (Array.isArray(children)) {
+ return children.map((child, index) => {
+ if (typeof child === "string") {
+ const parsed = parseTextWithCitations(child);
+ return parsed.length === 1 && typeof parsed[0] === "string" ? (
+ child
+ ) : (
+ {parsed}
+ );
+ }
+ return child;
+ });
+ }
+
+ return children;
+}
+
+const defaultComponents = memoizeMarkdownComponents({
+ h1: ({ className, children, ...props }) => (
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+};
+
+export const ComposerAttachments: FC = () => {
+ return (
+
+
+ );
+};
+
+export const ComposerAddAttachment: FC = () => {
+ return (
+
+ {language}
+
+ {!isCopied &&
+
+ );
+};
+
+const useCopyToClipboard = ({ copiedDuration = 3000 }: { copiedDuration?: number } = {}) => {
+ const [isCopied, setIsCopied] = useState+ {processChildrenWithCitations(children)} +
+ ), + h2: ({ className, children, ...props }) => ( ++ {processChildrenWithCitations(children)} +
+ ), + h3: ({ className, children, ...props }) => ( ++ {processChildrenWithCitations(children)} +
+ ), + h4: ({ className, children, ...props }) => ( ++ {processChildrenWithCitations(children)} +
+ ), + h5: ({ className, children, ...props }) => ( ++ {processChildrenWithCitations(children)} +
+ ), + h6: ({ className, children, ...props }) => ( ++ {processChildrenWithCitations(children)} +
+ ), + p: ({ className, children, ...props }) => ( ++ {processChildrenWithCitations(children)} +
+ ), + a: ({ className, children, ...props }) => ( + + {processChildrenWithCitations(children)} + + ), + blockquote: ({ className, children, ...props }) => ( ++ {processChildrenWithCitations(children)} ++ ), + ul: ({ className, ...props }) => ( +
- li]:mt-2", className)} {...props} />
+ ),
+ ol: ({ className, ...props }) => (
+
- + {processChildrenWithCitations(children)} + + ), + hr: ({ className, ...props }) => ( +
- - {key.replace(/_/g, " ")}: - -
- {String(value)} -
- - - {page.title} - - - ))} -
- {children} , - ul: ({ node, ...props }: any) =>
- {children} , + ul: ({ ...props }) =>
- + {key.replace(/_/g, " ")} + +
- {String(value)} +
- li]:mt-2", className)} {...props} />
+ ),
+ li: ({ className, children, ...props }) => (
+
+ ), + table: ({ className, ...props }) => ( +
+
+ );
+ }
+
+ if (state.error) {
+ return (
+
+ Loading threads...
+
+
+
+ );
+ }
+
+ return (
+
+ {state.error}
+
+
+
+ {/* Header with New Chat button */}
+
+ );
+}
+
+interface ThreadListItemComponentProps {
+ thread: ThreadListItem;
+ isActive: boolean;
+ isArchived: boolean;
+ onClick: () => void;
+ onArchive: () => void;
+ onUnarchive: () => void;
+ onDelete: () => void;
+}
+
+function ThreadListItemComponent({
+ thread,
+ isActive,
+ isArchived,
+ onClick,
+ onArchive,
+ onUnarchive,
+ onDelete,
+}: ThreadListItemComponentProps) {
+ return (
+
+
+
+ {/* Tab toggle for active/archived */}
+ Conversations
+ +
+
+
+
+
+ {/* Thread list */}
+
+ {displayedThreads.length === 0 ? (
+
+
+
+ ) : (
+ + {showArchived ? "No archived conversations" : "No conversations yet"} +
+ {!showArchived && ( + + )} +
+ {displayedThreads.map((thread) => (
+ handleSwitchToThread(thread.id)}
+ onArchive={() => handleArchive(thread.id)}
+ onUnarchive={() => handleUnarchive(thread.id)}
+ onDelete={() => handleDelete(thread.id)}
+ />
+ ))}
+
+ )}
+ {
+ if (e.key === "Enter" || e.key === " ") onClick();
+ }}
+ role="button"
+ tabIndex={0}
+ >
+
+
+
+
+
+ {isArchived ? (
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+
+ );
+}
+
+/**
+ * Format a date as relative time (e.g., "2 hours ago", "Yesterday")
+ */
+function formatRelativeTime(date: Date): string {
+ const now = new Date();
+ const diffMs = now.getTime() - date.getTime();
+ const diffSecs = Math.floor(diffMs / 1000);
+ const diffMins = Math.floor(diffSecs / 60);
+ const diffHours = Math.floor(diffMins / 60);
+ const diffDays = Math.floor(diffHours / 24);
+
+ if (diffSecs < 60) return "Just now";
+ if (diffMins < 60) return `${diffMins} min${diffMins === 1 ? "" : "s"} ago`;
+ if (diffHours < 24) return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+ if (diffDays === 1) return "Yesterday";
+ if (diffDays < 7) return `${diffDays} days ago`;
+
+ return date.toLocaleDateString();
+}
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
new file mode 100644
index 000000000..33d6a0cad
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -0,0 +1,862 @@
+import {
+ ActionBarPrimitive,
+ AssistantIf,
+ BranchPickerPrimitive,
+ ComposerPrimitive,
+ ErrorPrimitive,
+ MessagePrimitive,
+ ThreadPrimitive,
+ useAssistantState,
+ useMessage,
+ useThreadViewport,
+} from "@assistant-ui/react";
+import { useAtomValue } from "jotai";
+import {
+ AlertCircle,
+ ArrowDownIcon,
+ ArrowUpIcon,
+ Brain,
+ CheckCircle2,
+ CheckIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ CopyIcon,
+ DownloadIcon,
+ Loader2,
+ PencilIcon,
+ Plug2,
+ Plus,
+ RefreshCwIcon,
+ Search,
+ Sparkles,
+ SquareIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { type FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
+import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
+import {
+ globalNewLLMConfigsAtom,
+ llmPreferencesAtom,
+ newLLMConfigsAtom,
+} from "@/atoms/new-llm-config/new-llm-config-query.atoms";
+import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { currentUserAtom } from "@/atoms/user/user-query.atoms";
+import {
+ ComposerAddAttachment,
+ ComposerAttachments,
+ UserMessageAttachments,
+} from "@/components/assistant-ui/attachment";
+import { MarkdownText } from "@/components/assistant-ui/markdown-text";
+import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import {
+ ChainOfThought,
+ ChainOfThoughtContent,
+ ChainOfThoughtItem,
+ ChainOfThoughtStep,
+ ChainOfThoughtTrigger,
+} from "@/components/prompt-kit/chain-of-thought";
+import type { ThinkingStep } from "@/components/tool-ui/deepagent-thinking";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
+import { cn } from "@/lib/utils";
+
+/**
+ * Props for the Thread component
+ */
+interface ThreadProps {
+ messageThinkingSteps?: Map
+
+ {thread.title || "New Chat"}
++ {formatRelativeTime(new Date(thread.updatedAt))} +
+
+
+ {steps.map((step, index) => {
+ const effectiveStatus = getEffectiveStatus(step);
+ const icon = getStepIcon(effectiveStatus, step.title);
+ const isOpen = getStepOpenState(step, index);
+ return (
+ handleToggle(step.id, isOpen)}
+ >
+
+ {step.title}
+
+ {step.items && step.items.length > 0 && (
+
+ {step.items.map((item, idx) => (
+ {item}
+ ))}
+
+ )}
+
+ );
+ })}
+
+
+ );
+};
+
+/**
+ * Component that handles auto-scroll when thinking steps update.
+ * Uses useThreadViewport to scroll to bottom when thinking steps change,
+ * ensuring the user always sees the latest content during streaming.
+ */
+const ThinkingStepsScrollHandler: FC = () => {
+ const thinkingStepsMap = useContext(ThinkingStepsContext);
+ const viewport = useThreadViewport();
+ const isRunning = useAssistantState(({ thread }) => thread.isRunning);
+ // Track the serialized state to detect any changes
+ const prevStateRef = useRef
+
+
+ {/* Greeting positioned above the composer - fixed position */}
+
+ );
+};
+
+const Composer: FC = () => {
+ // Check if a model is configured - needed to disable input
+ const { data: userConfigs } = useAtomValue(newLLMConfigsAtom);
+ const { data: globalConfigs } = useAtomValue(globalNewLLMConfigsAtom);
+ const { data: preferences } = useAtomValue(llmPreferencesAtom);
+
+ const hasModelConfigured = useMemo(() => {
+ if (!preferences) return false;
+ const agentLlmId = preferences.agent_llm_id;
+ if (agentLlmId === null || agentLlmId === undefined) return false;
+
+ // Check if the configured model actually exists
+ if (agentLlmId < 0) {
+ return globalConfigs?.some((c) => c.id === agentLlmId) ?? false;
+ }
+ return userConfigs?.some((c) => c.id === agentLlmId) ?? false;
+ }, [preferences, globalConfigs, userConfigs]);
+
+ return (
+
+
+ {/* Composer - top edge fixed, expands downward only */}
+ + {getTimeBasedGreeting(user?.email)} +
+
+
+
+
+ ) : (
+
+
+ Connected Sources
+ + {totalSourceCount} + +
+ {/* Document types from the search space */}
+ {activeDocumentTypes.map(([docType, count]) => (
+
+
+ {getConnectorIcon(docType, "size-3.5")}
+ {getDocumentTypeLabel(docType)}
+
+ ))}
+ {/* Search source connectors */}
+ {connectors.map((connector) => (
+
+ {getConnectorIcon(connector.connector_type, "size-3.5")}
+ {connector.name}
+
+ ))}
+
+
+
+
+
+ )}
+ No sources yet
++ Add documents or connect data sources to enhance search results. +
+ +
+ !thread.isRunning}>
+
+
+
+
+
+
+ thread.isRunning}>
+
+
+
+
+
+ );
+};
+
+const MessageError: FC = () => {
+ return (
+
+
+
+ {/* Show processing indicator when attachments are being processed */}
+ {hasProcessingAttachments && (
+
+
+ )}
+
+ {/* Show warning when no model is configured */}
+ {!hasModelConfigured && !hasProcessingAttachments && (
+
+
+ )}
+
+
+
+ );
+};
+
+const AssistantMessageInner: FC = () => {
+ return (
+ <>
+ {/* Render thinking steps from message content - this ensures proper scroll tracking */}
+
+
+
+
+
+
+ );
+};
+
+const AssistantMessage: FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx b/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx
new file mode 100644
index 000000000..154240cb4
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { Slottable } from "@radix-ui/react-slot";
+import { type ComponentPropsWithRef, forwardRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+export type TooltipIconButtonProps = ComponentPropsWithRef
+ {isCancelled ? (
+
+ {!isCollapsed && (
+ + {isCancelled ? "Cancelled tool: " : "Used tool: "} + {toolName} +
+ +
+ {cancelledReason && (
+
+ )}
+
+
+ )}
+ + Cancelled reason: +
++ {cancelledReason} +
+
+
+ {!isCancelled && result !== undefined && (
+ {argsText}
+
+
+ )}
+ Result:
+
+ {typeof result === "string" ? result : JSON.stringify(result, null, 2)}
+
+
-
- );
-}
diff --git a/surfsense_web/components/chat/ChatCitation.tsx b/surfsense_web/components/chat/ChatCitation.tsx
deleted file mode 100644
index d8c681781..000000000
--- a/surfsense_web/components/chat/ChatCitation.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import type React from "react";
-import { useState } from "react";
-import { SheetTrigger } from "@/components/ui/sheet";
-import { SourceDetailSheet } from "./SourceDetailSheet";
-
-export const CitationDisplay: React.FC<{ index: number; node: any }> = ({ index, node }) => {
- const chunkId = Number(node?.id);
- const sourceType = node?.metadata?.source_type;
- const [isOpen, setIsOpen] = useState(false);
-
- return (
-
-
-
-
-
-
-
-
-
- SurfSense
-
-
-
-
-
-
-
-
-
- Results
-
-
-
-
- Results per Source
-- Control how many results to fetch from each data source. Set a higher number to get - more information, or a lower number for faster, more focused results. -
-
- Recommended: 5-20
- •
-
- Range: {MIN_VALUE}-{MAX_VALUE}
-
-
-
- {selectedConfig.provider}
- •
-
- {selectedConfig.name}
-
- {"is_global" in selectedConfig && selectedConfig.is_global && (
- 🌐
- )}
-
- );
- }, [selectedConfig]);
-
- const handleValueChange = React.useCallback(
- (value: string) => {
- const llmId = value ? parseInt(value, 10) : undefined;
- updatePreferences({
- search_space_id: searchSpaceId,
- data: { fast_llm_id: llmId },
- });
- },
- [updatePreferences, searchSpaceId]
- );
-
- // Loading skeleton
- if (isLoading) {
- return (
-
-
- );
- }
-
- // Error state
- if (error || globalConfigsError) {
- return (
-
-
-
-
-
-
-
- );
- }
-
- return (
-
-
-
- );
-});
-
-LLMSelector.displayName = "LLMSelector";
-
-const CustomChatInputOptions = React.memo(
- ({
- onDocumentSelectionChange,
- selectedDocuments,
- onConnectorSelectionChange,
- selectedConnectors,
- topK,
- onTopKChange,
- }: {
- onDocumentSelectionChange?: (documents: Document[]) => void;
- selectedDocuments?: Document[];
- onConnectorSelectionChange?: (connectorTypes: string[]) => void;
- selectedConnectors?: string[];
- topK?: number;
- onTopKChange?: (topK: number) => void;
- }) => {
- // Memoize the loading fallback to prevent recreation
- const loadingFallback = React.useMemo(
- () => ,
- []
- );
-
- return (
-
-
- );
- }
-);
-
-CustomChatInputOptions.displayName = "CustomChatInputOptions";
-
-export const ChatInputUI = React.memo(
- ({
- onDocumentSelectionChange,
- selectedDocuments,
- onConnectorSelectionChange,
- selectedConnectors,
- topK,
- onTopKChange,
- }: {
- onDocumentSelectionChange?: (documents: Document[]) => void;
- selectedDocuments?: Document[];
- onConnectorSelectionChange?: (connectorTypes: string[]) => void;
- selectedConnectors?: string[];
- topK?: number;
- onTopKChange?: (topK: number) => void;
- }) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
-
- {isLast &&
-
- {isChatLoading || chatError ? (
-
- ) : null;
-}
diff --git a/surfsense_web/components/chat/ChatPanel/ChatPanelView.tsx b/surfsense_web/components/chat/ChatPanel/ChatPanelView.tsx
deleted file mode 100644
index 5eb428946..000000000
--- a/surfsense_web/components/chat/ChatPanel/ChatPanelView.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-"use client";
-
-import { useAtom, useAtomValue } from "jotai";
-import { AlertCircle, Play, RefreshCw, Sparkles } from "lucide-react";
-import { motion } from "motion/react";
-import { useCallback } from "react";
-import { activeChatAtom } from "@/atoms/chats/chat-query.atoms";
-import { activeChathatUIAtom } from "@/atoms/chats/ui.atoms";
-import { cn } from "@/lib/utils";
-import { getPodcastStalenessMessage, isPodcastStale } from "../PodcastUtils";
-import type { GeneratePodcastRequest } from "./ChatPanelContainer";
-import { ConfigModal } from "./ConfigModal";
-import { PodcastPlayer } from "./PodcastPlayer";
-
-interface ChatPanelViewProps {
- generatePodcast: (request: GeneratePodcastRequest) => Promise
- {isChatLoading ? (
-
- ) : null}
-
- {!isChatLoading && !chatError && activeChatState?.chatDetails && (
-
-
- ) : chatError ? (
-
-
- ) : null}
-
-
- );
- // biome-ignore-end lint/a11y/useSemanticElements : using div for custom layout — will convert later
-}
diff --git a/surfsense_web/components/chat/ChatPanel/ConfigModal.tsx b/surfsense_web/components/chat/ChatPanel/ConfigModal.tsx
deleted file mode 100644
index 7c1497df9..000000000
--- a/surfsense_web/components/chat/ChatPanel/ConfigModal.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { Pencil } from "lucide-react";
-import { useCallback, useContext, useState } from "react";
-import { activeChatAtom } from "@/atoms/chats/chat-query.atoms";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import type { GeneratePodcastRequest } from "./ChatPanelContainer";
-
-interface ConfigModalProps {
- generatePodcast: (request: GeneratePodcastRequest) => Promise
- {isChatPannelOpen ? (
-
- setChatUIState((prev) => ({
- ...prev,
- isChatPannelOpen: !isChatPannelOpen,
- }))
- }
- whileHover={{ scale: 1.1 }}
- whileTap={{ scale: 0.9 }}
- className={cn(
- "p-2.5 rounded-full transition-colors shadow-sm",
- podcastIsStale
- ? "bg-amber-500/20 hover:bg-amber-500/30 text-amber-600 dark:text-amber-400"
- : "bg-primary/20 hover:bg-primary/30 text-primary"
- )}
- >
- {podcastIsStale ?
- )}
-
- {podcast ? (
-
- {/* Show stale podcast warning if applicable */}
- {podcastIsStale && (
-
-
- )}
-
-
-
- {/* ConfigModal positioned absolutely to avoid nesting buttons */}
-
-
- ) : (
-
-
-
-
-
-
- Podcast Outdated
-- {getPodcastStalenessMessage( - chatDetails?.state_version || 0, - podcast?.chat_state_version - )} -
-
-
-
- {isChatPannelOpen ? (
- setChatUIState((prev) => ({ ...prev, isChatPannelOpen: true }))}
- whileHover={{ scale: 1.1 }}
- whileTap={{ scale: 0.9 }}
- className="p-2.5 rounded-full bg-green-500/20 hover:bg-green-500/30 text-green-600 dark:text-green-400 transition-colors shadow-sm"
- >
-
- ) : null}
-
- ) : null}
-
- {/* Audio Visualizer */}
-
- {isPlaying && (
-
-
- {/* Progress Bar with Time */}
-
-
-
-
- );
- }
-
- return null;
-}
diff --git a/surfsense_web/components/chat/ChatPanel/PodcastPlayer/PodcastPlayerCompactSkeleton.tsx b/surfsense_web/components/chat/ChatPanel/PodcastPlayer/PodcastPlayerCompactSkeleton.tsx
deleted file mode 100644
index d7007dadd..000000000
--- a/surfsense_web/components/chat/ChatPanel/PodcastPlayer/PodcastPlayerCompactSkeleton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client";
-
-import { Podcast } from "lucide-react";
-import { motion } from "motion/react";
-
-export function PodcastPlayerCompactSkeleton() {
- return (
-
-
-
- {/* Controls */}
-
- {formatTime(currentTime)}
- {formatTime(duration)}
-
-
- {/* Left: Volume */}
-
-
-
-
-
-
-
- {/* Center: Playback Controls */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Right: Placeholder for symmetry */}
-
-
- {/* Header with icon and title */}
-
- );
-}
diff --git a/surfsense_web/components/chat/ChatPanel/PodcastPlayer/index.ts b/surfsense_web/components/chat/ChatPanel/PodcastPlayer/index.ts
deleted file mode 100644
index 55c19f934..000000000
--- a/surfsense_web/components/chat/ChatPanel/PodcastPlayer/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { PodcastPlayer } from "./PodcastPlayer";
-export { PodcastPlayerCompactSkeleton } from "./PodcastPlayerCompactSkeleton";
diff --git a/surfsense_web/components/chat/ChatSources.tsx b/surfsense_web/components/chat/ChatSources.tsx
deleted file mode 100644
index 5f205d005..000000000
--- a/surfsense_web/components/chat/ChatSources.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-"use client";
-
-import { getAnnotationData, type Message } from "@llamaindex/chat-ui";
-import { ExternalLink, FileText } from "lucide-react";
-import { useState } from "react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import { SourceDetailSheet } from "./SourceDetailSheet";
-
-interface Source {
- id: string;
- title: string;
- description: string;
- url: string;
- sourceType: string;
-}
-
-interface SourceGroup {
- id: number;
- name: string;
- type: string;
- sources: Source[];
-}
-
-// New interfaces for the updated data format
-interface NodeMetadata {
- title: string;
- source_type: string;
- group_name: string;
-}
-
-interface SourceNode {
- id: string;
- text: string;
- url: string;
- metadata: NodeMetadata;
-}
-
-function getSourceIcon(type: string) {
- // Handle USER_SELECTED_ prefix
- const normalizedType = type.startsWith("USER_SELECTED_")
- ? type.replace("USER_SELECTED_", "")
- : type;
- return getConnectorIcon(normalizedType, "h-4 w-4");
-}
-
-function SourceCard({ source }: { source: Source }) {
- const hasUrl = source.url && source.url.trim() !== "";
- const chunkId = Number(source.id);
- const sourceType = source.sourceType;
- const [isOpen, setIsOpen] = useState(false);
-
- // Clean up the description for better display
- const cleanDescription = source.description
- .replace(/## Metadata\n\n/g, "")
- .replace(/\n+/g, " ")
- .trim();
-
- const handleUrlClick = (e: React.MouseEvent, url: string) => {
- e.preventDefault();
- e.stopPropagation();
- window.open(url, "_blank", "noopener,noreferrer");
- };
-
- return (
-
-
-
- {/* Title skeleton */}
-
-
-
- {/* Progress bar skeleton */}
-
-
-
-
-
- {/* Controls skeleton */}
-
-
-
-
-
-
-
-
- {source.title}
-
-
-
-
- #{chunkId}
-
- {hasUrl && (
-
- )}
-
-
- Sources
-
- {totalSources} {totalSources === 1 ? "source" : "sources"}
-
-
-
-
- {sourceGroups.map((group) => (
-
- {getSourceIcon(group.type)}
-
- {group.name}
-
-
- {group.sources.length}
-
-
- ))}
-
-
- {sourceGroups.map((group) => (
-
-
-
- {group.sources.map((source) => (
-
-
- {/* Terminal Header */}
-
-
- {/* Terminal Content (animated expand/collapse) */}
-
- );
-}
diff --git a/surfsense_web/components/chat/Citation.tsx b/surfsense_web/components/chat/Citation.tsx
deleted file mode 100644
index 27b352e96..000000000
--- a/surfsense_web/components/chat/Citation.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { ExternalLink } from "lucide-react";
-import { memo, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { getConnectorIcon } from "./ConnectorComponents";
-import type { Source } from "./types";
-
-type CitationProps = {
- citationId: number;
- citationText: string;
- position: number;
- source: Source | null;
-};
-
-/**
- * Citation component to handle individual citations
- */
-export const Citation = memo(({ citationId, citationText, position, source }: CitationProps) => {
- const [open, setOpen] = useState(false);
- const citationKey = `citation-${citationId}-${position}`;
-
- if (!source) return <>{citationText};
-
- return (
-
-
-
-
- {events.map((event, index) => (
-
-
- $
- [{event.type || ""}]
-
- {event.text || ""}...
-
-
- ))}
- {events.length === 0 && (
- No agent events to display...
- )}
-
-
-
- {getConnectorIcon(source.connectorType || "")}
-
-
-
-
-
-
- {source.title}
-{source.description}
-
- {source.url}
-
-
-
-));
-
-FallbackCodeBlock.displayName = "FallbackCodeBlock";
-
-// Code block component with syntax highlighting and copy functionality
-export const CodeBlock = memo
- {children}
-
-
-
- {children}
-
-
- );
-});
-
-CodeBlock.displayName = "CodeBlock";
-
-// Optimized language renderer factory with memoization
-const createLanguageRenderer = (lang: string): LanguageRenderer => {
- const renderer = ({ code }: { code: string }) =>
-
-
-
- {getConnectorIcon(type)}
-
-);
-
-/**
- * Displays a count indicator for additional connectors
- */
-export const ConnectorCountBadge = ({ count }: { count: number }) => (
-
- +{count}
-
-);
-
-type ConnectorButtonProps = {
- selectedConnectors: string[];
- onClick: () => void;
- connectorSources: Connector[];
-};
-
-/**
- * Button that displays selected connectors and opens connector selection dialog
- */
-export const ConnectorButton = ({
- selectedConnectors,
- onClick,
- connectorSources,
-}: ConnectorButtonProps) => {
- const totalConnectors = connectorSources.length;
- const selectedCount = selectedConnectors.length;
- const progressPercentage = (selectedCount / totalConnectors) * 100;
-
- // Get the name of a single selected connector
- const getSingleConnectorName = () => {
- const connector = connectorSources.find((c) => c.type === selectedConnectors[0]);
- return connector?.name || "";
- };
-
- // Get display text based on selection count
- const getDisplayText = () => {
- if (selectedCount === totalConnectors) return "All Connectors";
- if (selectedCount === 1) return getSingleConnectorName();
- return `${selectedCount} Connectors`;
- };
-
- // Render the empty state (no connectors selected)
- const renderEmptyState = () => (
- <>
-
- {/* Show up to 3 connector icons */}
- {selectedConnectors.slice(0, 3).map((type, index) => (
-
-
- {/* Display text */}
- {getDisplayText()}
-
- );
-
- return (
-
- );
-};
diff --git a/surfsense_web/components/chat/DocumentsDataTable.tsx b/surfsense_web/components/chat/DocumentsDataTable.tsx
deleted file mode 100644
index 77f1a05bd..000000000
--- a/surfsense_web/components/chat/DocumentsDataTable.tsx
+++ /dev/null
@@ -1,604 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import {
- type ColumnDef,
- flexRender,
- getCoreRowModel,
- type SortingState,
- useReactTable,
-} from "@tanstack/react-table";
-import { useAtomValue } from "jotai";
-import { ArrowUpDown, Calendar, FileText, Filter, Plus, Search } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from "@/components/ui/table";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { Document, DocumentTypeEnum } from "@/contracts/types/document.types";
-import { documentsApiService } from "@/lib/apis/documents-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-
-interface DocumentsDataTableProps {
- searchSpaceId: number;
- onSelectionChange: (documents: Document[]) => void;
- onDone: () => void;
- initialSelectedDocuments?: Document[];
-}
-
-function useDebounced
- {title}
-
- );
- },
- },
- {
- accessorKey: "document_type",
- header: "Type",
- cell: ({ row }) => {
- const type = row.getValue("document_type") as DocumentType;
- return (
-
- {getConnectorIcon(String(type))}
-
- );
- },
- size: 80,
- meta: {
- className: "hidden sm:table-cell",
- },
- },
- {
- accessorKey: "content",
- header: "Preview",
- cell: ({ row }) => {
- const content = row.getValue("content") as string;
- return (
-
- {content.substring(0, 30)}...
- {content.substring(0, 100)}...
-
- );
- },
- enableSorting: false,
- meta: {
- className: "hidden md:table-cell",
- },
- },
- {
- accessorKey: "created_at",
- header: ({ column }) => (
-
- ),
- cell: ({ row }) => {
- const date = new Date(row.getValue("created_at"));
- return (
-
-
- {date.toLocaleDateString("en-US", {
- month: "short",
- day: "numeric",
- year: "numeric",
- })}
-
-
- {date.toLocaleDateString("en-US", {
- month: "numeric",
- day: "numeric",
- })}
-
-
- );
- },
- size: 80,
- },
-];
-
-export function DocumentsDataTable({
- searchSpaceId,
- onSelectionChange,
- onDone,
- initialSelectedDocuments = [],
-}: DocumentsDataTableProps) {
- const router = useRouter();
- const [sorting, setSorting] = useState
- {/* Header Controls */}
-
- );
-}
diff --git a/surfsense_web/components/chat/PodcastUtils.ts b/surfsense_web/components/chat/PodcastUtils.ts
deleted file mode 100644
index 5662f96b5..000000000
--- a/surfsense_web/components/chat/PodcastUtils.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Determines if a podcast is stale compared to the current chat state.
- * A podcast is considered stale if:
- * - The chat's current state_version is greater than the podcast's chat_state_version
- *
- * @param chatVersion - The current state_version of the chat
- * @param podcastVersion - The chat_state_version stored when the podcast was generated (nullable)
- * @returns true if the podcast is stale, false otherwise
- */
-export function isPodcastStale(
- chatVersion: number,
- podcastVersion: number | null | undefined
-): boolean {
- // If podcast has no version, it's stale (generated before this feature)
- if (!podcastVersion) {
- return true;
- }
- // If chat version is greater than podcast version, it's stale : We can change this condition to consider staleness after a huge number of updates
- return chatVersion > podcastVersion;
-}
-
-/**
- * Gets a human-readable message about podcast staleness
- *
- * @param chatVersion - The current state_version of the chat
- * @param podcastVersion - The chat_state_version stored when the podcast was generated
- * @returns A descriptive message about the podcast's staleness status
- */
-export function getPodcastStalenessMessage(
- chatVersion: number,
- podcastVersion: number | null | undefined
-): string {
- if (!podcastVersion) {
- return "This podcast was generated before chat updates were tracked. Consider regenerating it.";
- }
-
- if (chatVersion > podcastVersion) {
- const versionDiff = chatVersion - podcastVersion;
- return `This podcast is outdated. The chat has been updated ${versionDiff} time${versionDiff > 1 ? "s" : ""} since this podcast was generated.`;
- }
-
- return "This podcast is up to date with the current chat.";
-}
diff --git a/surfsense_web/components/chat/ScrollUtils.tsx b/surfsense_web/components/chat/ScrollUtils.tsx
deleted file mode 100644
index 3984246ae..000000000
--- a/surfsense_web/components/chat/ScrollUtils.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { type RefObject, useEffect } from "react";
-
-/**
- * Function to scroll to the bottom of a container
- */
-export const scrollToBottom = (ref: RefObject
- {/* Search and Filter Row */}
-
-
- {/* Table Container */}
-
-
-
-
-
-
-
-
-
-
- {/* Action Controls Row */}
-
-
-
-
- Filter by Type
-
- {availableTypes.map((type) => (
-
- {documentTypeFilter.length > 0 && (
-
- )}
-
- handleToggleType(type, !!checked)}
- />
-
-
- ))}
-
-
-
-
- {selectedCount} selected {actualLoading && "· Loading..."}
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Footer Pagination */}
-
- {actualLoading ? (
-
-
- )}
-
-
-
- ) : (
-
-
-
- Loading documents...
-
-
-
- Showing {pageIndex * pageSize + 1} to {Math.min((pageIndex + 1) * pageSize, actualTotal)}{" "}
- of {actualTotal} documents
-
-
-
-
-
- Page
- {pageIndex + 1}
- of
- {Math.ceil(actualTotal / pageSize)}
-
-
-
- {options.map((option) => (
-
- ))}
-
- );
-}
-
-export default SegmentedControl;
diff --git a/surfsense_web/components/chat/SourceDetailSheet.tsx b/surfsense_web/components/chat/SourceDetailSheet.tsx
deleted file mode 100644
index 7f5ebbeab..000000000
--- a/surfsense_web/components/chat/SourceDetailSheet.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { ChevronDown, ChevronUp, ExternalLink, Loader2 } from "lucide-react";
-import type React from "react";
-import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { MarkdownViewer } from "@/components/markdown-viewer";
-import { Button } from "@/components/ui/button";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
- Sheet,
- SheetContent,
- SheetDescription,
- SheetHeader,
- SheetTitle,
-} from "@/components/ui/sheet";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import { documentsApiService } from "@/lib/apis/documents-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { cn } from "@/lib/utils";
-
-interface SourceDetailSheetProps {
- open: boolean;
- onOpenChange: (open: boolean) => void;
- chunkId: number;
- sourceType: string;
- title: string;
- description?: string;
- url?: string;
- children?: ReactNode;
-}
-
-const formatDocumentType = (type: string) => {
- return type
- .split("_")
- .map((word) => word.charAt(0) + word.slice(1).toLowerCase())
- .join(" ");
-};
-
-export function SourceDetailSheet({
- open,
- onOpenChange,
- chunkId,
- sourceType,
- title,
- description,
- url,
- children,
-}: SourceDetailSheetProps) {
- const chunksContainerRef = useRef
-
- )}
-
- {!isDirectRenderSource && documentByChunkFetchingError && (
-
-
- )}
-
- {/* Direct render for web search providers */}
- {isDirectRenderSource && (
- - {documentByChunkFetchingError.message || "Failed to load document"} -
-
- {/* External Link */}
- {url && (
-
-
-
-
- )}
-
- {/* Source Information */}
-
-
- Source Information
-
- {title || "Untitled"}
-
-
- {description || "No content available"}
-
-
- {/* Document Metadata */}
- {document.document_metadata && Object.keys(document.document_metadata).length > 0 && (
-
-
-
- )}
-
- {/* External Link */}
- {url && (
- Document Information
--
- {Object.entries(document.document_metadata).map(([key, value]) => (
-
-
- ))}
-
-
-
- )}
-
- {/* Chunks */}
-
-
-
- {/* Header row: header and button side by side */}
-
-
-
-
- )}
-
-
- {document.chunks.map((chunk, idx) => (
-
-
-
- Summary
- {summaryOpen ? (
-
-
- )}
-
- {/* Expanded summary content: always full width, below the row */}
- {document.content && (
- Document Content
- {document.content && ( -
-
-
-
- ))}
-
-
- Chunk {idx + 1} of {document.chunks.length}
-
- {chunk.id === chunkId && (
-
- Referenced Chunk
-
- )}
-
-
-
-
-
- );
-}
-
-const GridLineHorizontal = ({ className, offset }: { className?: string; offset?: string }) => {
- return (
-
- );
-};
diff --git a/surfsense_web/components/homepage/integrations.tsx b/surfsense_web/components/homepage/integrations.tsx
index 0a5d93a98..53aaf624a 100644
--- a/surfsense_web/components/homepage/integrations.tsx
+++ b/surfsense_web/components/homepage/integrations.tsx
@@ -16,7 +16,10 @@ const INTEGRATIONS: Integration[] = [
{ name: "Elasticsearch", icon: "https://cdn.simpleicons.org/elastic/00A9E5" },
// Communication
- { name: "Slack", icon: "https://cdn.simpleicons.org/slack/4A154B" },
+ {
+ name: "Slack",
+ icon: "https://upload.wikimedia.org/wikipedia/commons/d/d5/Slack_icon_2019.svg",
+ },
{ name: "Discord", icon: "https://cdn.simpleicons.org/discord/5865F2" },
{ name: "Gmail", icon: "https://cdn.simpleicons.org/gmail/EA4335" },
diff --git a/surfsense_web/components/markdown-viewer.tsx b/surfsense_web/components/markdown-viewer.tsx
index eea7ed2d8..5318ba5d1 100644
--- a/surfsense_web/components/markdown-viewer.tsx
+++ b/surfsense_web/components/markdown-viewer.tsx
@@ -1,14 +1,6 @@
-import { Check, Copy } from "lucide-react";
import Image from "next/image";
-import { useTheme } from "next-themes";
-import { useEffect, useMemo, useRef, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark, oneLight } from "react-syntax-highlighter/dist/cjs/styles/prism";
-import rehypeRaw from "rehype-raw";
-import rehypeSanitize from "rehype-sanitize";
-import remarkGfm from "remark-gfm";
-import { Button } from "@/components/ui/button";
+import type { Components } from "react-markdown";
+import { Streamdown } from "streamdown";
import { cn } from "@/lib/utils";
interface MarkdownViewerProps {
@@ -17,203 +9,98 @@ interface MarkdownViewerProps {
}
export function MarkdownViewer({ content, className }: MarkdownViewerProps) {
- const ref = useRef
-
-
-
-
-
-
-
- SurfSense
-
- -
- {pages.map((page) => (
-
-
- - © SurfSense 2025 -
-
-
-
- - {children} -
- ), - a: ({ node, children, ...props }: any) => ( - - {children} - - ), - li: ({ node, children, ...props }: any) =>- {children} -
- ), - h2: ({ node, children, ...props }: any) => ( -- {children} -
- ), - h3: ({ node, children, ...props }: any) => ( -- {children} -
- ), - h4: ({ node, children, ...props }: any) => ( -- {children} -
- ), - blockquote: ({ node, ...props }: any) => ( - - ), - hr: ({ node, ...props }: any) =>, - img: ({ node, ...props }: any) => ( -
-
-
- ),
- th: ({ node, ...props }: any) => (
- + {children} +
+ ), + a: ({ children, ...props }) => ( + + {children} + + ), + li: ({ children, ...props }) =>+ {children} +
+ ), + h2: ({ children, ...props }) => ( ++ {children} +
+ ), + h3: ({ children, ...props }) => ( ++ {children} +
+ ), + h4: ({ children, ...props }) => ( ++ {children} +
+ ), + blockquote: ({ ...props }) => ( + + ), + hr: ({ ...props }) =>, + img: ({ src, alt, width: _w, height: _h, ...props }) => ( +
+
+
+ ),
+ th: ({ ...props }) =>
- {children}
-
- );
- }
-
- // For code blocks, add syntax highlighting and copy functionality
+ if (isInline) {
return (
-
+ {children}
+
);
- },
- };
- }, []);
+ }
+
+ // For code blocks, let Streamdown handle syntax highlighting
+ return (
+
+ {children}
+
+ );
+ },
+ };
return (
-
-
+
+ {open && (
+ <>
+ {/* Backdrop */}
+ onOpenChange(false)}
+ />
+
+ {/* Sidebar Panel */}
+
+ {/* Header */}
+
+
+ )}
+
+ );
+}
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
new file mode 100644
index 000000000..89390f957
--- /dev/null
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -0,0 +1,384 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import {
+ Bot,
+ Check,
+ ChevronDown,
+ Cloud,
+ Edit3,
+ Globe,
+ Loader2,
+ Plus,
+ Settings2,
+ Sparkles,
+ User,
+ Zap,
+} from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { updateLLMPreferencesMutationAtom } from "@/atoms/new-llm-config/new-llm-config-mutation.atoms";
+import {
+ globalNewLLMConfigsAtom,
+ llmPreferencesAtom,
+ newLLMConfigsAtom,
+} from "@/atoms/new-llm-config/new-llm-config-query.atoms";
+import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+} from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import type {
+ GlobalNewLLMConfig,
+ NewLLMConfigPublic,
+} from "@/contracts/types/new-llm-config.types";
+import { cn } from "@/lib/utils";
+
+// Provider icons mapping
+const getProviderIcon = (provider: string) => {
+ const iconClass = "size-4";
+ switch (provider?.toUpperCase()) {
+ case "OPENAI":
+ return
+
+
+
+
+
+
+ {/* Switching overlay */}
+ {isSwitching && (
+
+
+
+
+ {/* Global Configs Section */}
+ {filteredGlobalConfigs.length > 0 && (
+
+ handleSelectConfig(config)}
+ className={cn(
+ "mx-2 rounded-lg mb-1 cursor-pointer",
+ "aria-selected:bg-accent/50",
+ isSelected && "bg-accent/80"
+ )}
+ >
+
+ );
+ })}
+
+ )}
+
+ {filteredGlobalConfigs.length > 0 && filteredUserConfigs.length > 0 && (
+
+ handleSelectConfig(config)}
+ className={cn(
+ "mx-2 rounded-lg mb-1 cursor-pointer",
+ "aria-selected:bg-accent/50",
+ isSelected && "bg-accent/80"
+ )}
+ >
+
+ );
+ })}
+
+ )}
+
+ {/* Add New Config Button */}
+
+
+
+
+ );
+}
diff --git a/surfsense_web/components/new-chat/source-detail-panel.tsx b/surfsense_web/components/new-chat/source-detail-panel.tsx
new file mode 100644
index 000000000..6e3e7cce0
--- /dev/null
+++ b/surfsense_web/components/new-chat/source-detail-panel.tsx
@@ -0,0 +1,607 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import {
+ BookOpen,
+ ChevronDown,
+ ChevronUp,
+ ExternalLink,
+ FileText,
+ Hash,
+ Loader2,
+ Sparkles,
+ X,
+} from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import type React from "react";
+import { forwardRef, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { MarkdownViewer } from "@/components/markdown-viewer";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { documentsApiService } from "@/lib/apis/documents-api.service";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { cn } from "@/lib/utils";
+
+interface SourceDetailPanelProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ chunkId: number;
+ sourceType: string;
+ title: string;
+ description?: string;
+ url?: string;
+ children?: ReactNode;
+}
+
+const formatDocumentType = (type: string) => {
+ if (!type) return "";
+ return type
+ .split("_")
+ .map((word) => word.charAt(0) + word.slice(1).toLowerCase())
+ .join(" ");
+};
+
+// Chunk card component
+// For large documents (>30 chunks), we disable animation to prevent layout shifts
+// which break auto-scroll functionality
+interface ChunkCardProps {
+ chunk: { id: number; content: string };
+ index: number;
+ totalChunks: number;
+ isCited: boolean;
+ isActive: boolean;
+ disableLayoutAnimation?: boolean;
+}
+
+const ChunkCard = forwardRef(
+ ({ chunk, index, totalChunks, isCited, isActive, disableLayoutAnimation }, ref) => {
+ return (
+ (null);
+ const hasScrolledRef = useRef(false); // Use ref to avoid stale closures
+ const [summaryOpen, setSummaryOpen] = useState(false);
+ const [activeChunkIndex, setActiveChunkIndex] = useState(null);
+ const [mounted, setMounted] = useState(false);
+ const [hasScrolledToCited, setHasScrolledToCited] = useState(false);
+ const shouldReduceMotion = useReducedMotion();
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ const {
+ data: documentData,
+ isLoading: isDocumentByChunkFetching,
+ error: documentByChunkFetchingError,
+ } = useQuery({
+ queryKey: cacheKeys.documents.byChunk(chunkId.toString()),
+ queryFn: () => documentsApiService.getDocumentByChunk({ chunk_id: chunkId }),
+ enabled: !!chunkId && open,
+ staleTime: 5 * 60 * 1000,
+ });
+
+ const isDirectRenderSource =
+ sourceType === "TAVILY_API" ||
+ sourceType === "LINKUP_API" ||
+ sourceType === "SEARXNG_API" ||
+ sourceType === "BAIDU_SEARCH_API";
+
+ // Find cited chunk index
+ const citedChunkIndex = documentData?.chunks?.findIndex((chunk) => chunk.id === chunkId) ?? -1;
+
+ // Simple scroll function that scrolls to a chunk by index
+ const scrollToChunkByIndex = useCallback(
+ (chunkIndex: number, smooth = true) => {
+ const scrollContainer = scrollAreaRef.current;
+ if (!scrollContainer) return;
+
+ const viewport = scrollContainer.querySelector(
+ "[data-radix-scroll-area-viewport]"
+ ) as HTMLElement | null;
+ if (!viewport) return;
+
+ const chunkElement = scrollContainer.querySelector(
+ `[data-chunk-index="${chunkIndex}"]`
+ ) as HTMLElement | null;
+ if (!chunkElement) return;
+
+ // Get positions using getBoundingClientRect for accuracy
+ const viewportRect = viewport.getBoundingClientRect();
+ const chunkRect = chunkElement.getBoundingClientRect();
+
+ // Calculate where to scroll to center the chunk
+ const currentScrollTop = viewport.scrollTop;
+ const chunkTopRelativeToViewport = chunkRect.top - viewportRect.top + currentScrollTop;
+ const scrollTarget =
+ chunkTopRelativeToViewport - viewportRect.height / 2 + chunkRect.height / 2;
+
+ viewport.scrollTo({
+ top: Math.max(0, scrollTarget),
+ behavior: smooth && !shouldReduceMotion ? "smooth" : "auto",
+ });
+
+ setActiveChunkIndex(chunkIndex);
+ },
+ [shouldReduceMotion]
+ );
+
+ // Callback ref for the cited chunk - scrolls when the element mounts
+ const citedChunkRefCallback = useCallback(
+ (node: HTMLDivElement | null) => {
+ if (node && !hasScrolledRef.current && open) {
+ hasScrolledRef.current = true; // Mark immediately to prevent duplicate scrolls
+
+ // Store the node reference for the delayed scroll
+ const scrollToCitedChunk = () => {
+ const scrollContainer = scrollAreaRef.current;
+ if (!scrollContainer || !node.isConnected) return false;
+
+ const viewport = scrollContainer.querySelector(
+ "[data-radix-scroll-area-viewport]"
+ ) as HTMLElement | null;
+ if (!viewport) return false;
+
+ // Get positions
+ const viewportRect = viewport.getBoundingClientRect();
+ const chunkRect = node.getBoundingClientRect();
+
+ // Calculate scroll position to center the chunk
+ const currentScrollTop = viewport.scrollTop;
+ const chunkTopRelativeToViewport = chunkRect.top - viewportRect.top + currentScrollTop;
+ const scrollTarget =
+ chunkTopRelativeToViewport - viewportRect.height / 2 + chunkRect.height / 2;
+
+ viewport.scrollTo({
+ top: Math.max(0, scrollTarget),
+ behavior: "auto", // Instant scroll for initial positioning
+ });
+
+ return true;
+ };
+
+ // Scroll multiple times with delays to handle progressive content rendering
+ // Each subsequent scroll will correct for any layout shifts
+ const scrollAttempts = [50, 150, 300, 600, 1000];
+
+ scrollAttempts.forEach((delay) => {
+ setTimeout(() => {
+ scrollToCitedChunk();
+ }, delay);
+ });
+
+ // After final attempt, mark state as scrolled
+ setTimeout(
+ () => {
+ setHasScrolledToCited(true);
+ setActiveChunkIndex(citedChunkIndex);
+ },
+ scrollAttempts[scrollAttempts.length - 1] + 50
+ );
+ }
+ },
+ [open, citedChunkIndex]
+ );
+
+ // Reset scroll state when panel closes
+ useEffect(() => {
+ if (!open) {
+ hasScrolledRef.current = false;
+ setHasScrolledToCited(false);
+ setActiveChunkIndex(null);
+ }
+ }, [open]);
+
+ // Handle escape key
+ useEffect(() => {
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === "Escape" && open) {
+ onOpenChange(false);
+ }
+ };
+ window.addEventListener("keydown", handleEscape);
+ return () => window.removeEventListener("keydown", handleEscape);
+ }, [open, onOpenChange]);
+
+ // Prevent body scroll when open
+ useEffect(() => {
+ if (open) {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "";
+ }
+ return () => {
+ document.body.style.overflow = "";
+ };
+ }, [open]);
+
+ const handleUrlClick = (e: React.MouseEvent, clickUrl: string) => {
+ e.preventDefault();
+ e.stopPropagation();
+ window.open(clickUrl, "_blank", "noopener,noreferrer");
+ };
+
+ const scrollToChunk = useCallback(
+ (index: number) => {
+ scrollToChunkByIndex(index, true);
+ },
+ [scrollToChunkByIndex]
+ );
+
+ const panelContent = (
+
+ {open && (
+ <>
+ {/* Backdrop */}
+ onOpenChange(false)}
+ />
+
+ {/* Panel */}
+
+ {/* Header */}
+
+
+
+ {/* Loading State */}
+ {!isDirectRenderSource && isDocumentByChunkFetching && (
+
+
+ )}
+
+ {/* API-fetched document content */}
+ {!isDirectRenderSource && documentData && (
+
+
+ )}
+
+ );
+
+ if (!mounted) return <>{children};
+
+ return (
+ <>
+ {children}
+ {createPortal(panelContent, globalThis.document.body)}
+
+ );
+}
diff --git a/surfsense_web/components/onboard/index.ts b/surfsense_web/components/onboard/index.ts
deleted file mode 100644
index 607ba4e7d..000000000
--- a/surfsense_web/components/onboard/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { OnboardActionCard } from "./onboard-action-card";
-export { OnboardAdvancedSettings } from "./onboard-advanced-settings";
-export { OnboardHeader } from "./onboard-header";
-export { OnboardLLMSetup } from "./onboard-llm-setup";
-export { OnboardLoading } from "./onboard-loading";
-export { OnboardStats } from "./onboard-stats";
-export { SetupLLMStep } from "./setup-llm-step";
-export { SetupPromptStep } from "./setup-prompt-step";
diff --git a/surfsense_web/components/onboard/onboard-action-card.tsx b/surfsense_web/components/onboard/onboard-action-card.tsx
deleted file mode 100644
index c6bb41dbf..000000000
--- a/surfsense_web/components/onboard/onboard-action-card.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-"use client";
-
-import { ArrowRight, CheckCircle, type LucideIcon } from "lucide-react";
-import { motion } from "motion/react";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { cn } from "@/lib/utils";
-
-interface OnboardActionCardProps {
- title: string;
- description: string;
- icon: LucideIcon;
- features: string[];
- buttonText: string;
- onClick: () => void;
- colorScheme: "emerald" | "blue" | "violet";
- delay?: number;
-}
-
-const colorSchemes = {
- emerald: {
- iconBg: "bg-emerald-500/10 dark:bg-emerald-500/20",
- iconRing: "ring-emerald-500/20 dark:ring-emerald-500/30",
- iconColor: "text-emerald-600 dark:text-emerald-400",
- checkColor: "text-emerald-500",
- buttonBg: "bg-emerald-600 hover:bg-emerald-500",
- hoverBorder: "hover:border-emerald-500/50",
- },
- blue: {
- iconBg: "bg-blue-500/10 dark:bg-blue-500/20",
- iconRing: "ring-blue-500/20 dark:ring-blue-500/30",
- iconColor: "text-blue-600 dark:text-blue-400",
- checkColor: "text-blue-500",
- buttonBg: "bg-blue-600 hover:bg-blue-500",
- hoverBorder: "hover:border-blue-500/50",
- },
- violet: {
- iconBg: "bg-violet-500/10 dark:bg-violet-500/20",
- iconRing: "ring-violet-500/20 dark:ring-violet-500/30",
- iconColor: "text-violet-600 dark:text-violet-400",
- checkColor: "text-violet-500",
- buttonBg: "bg-violet-600 hover:bg-violet-500",
- hoverBorder: "hover:border-violet-500/50",
- },
-};
-
-export function OnboardActionCard({
- title,
- description,
- icon: Icon,
- features,
- buttonText,
- onClick,
- colorScheme,
- delay = 0,
-}: OnboardActionCardProps) {
- const colors = colorSchemes[colorScheme];
-
- return (
-
-
-
-
-
- {title}
- {description}
-
-
-
-
-
-
- );
-}
diff --git a/surfsense_web/components/onboard/onboard-advanced-settings.tsx b/surfsense_web/components/onboard/onboard-advanced-settings.tsx
deleted file mode 100644
index b2b9c5080..000000000
--- a/surfsense_web/components/onboard/onboard-advanced-settings.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-"use client";
-
-import { ChevronDown, MessageSquare, Settings2 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import { SetupLLMStep } from "@/components/onboard/setup-llm-step";
-import { SetupPromptStep } from "@/components/onboard/setup-prompt-step";
-import { Card, CardContent } from "@/components/ui/card";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { cn } from "@/lib/utils";
-
-interface OnboardAdvancedSettingsProps {
- searchSpaceId: number;
- showLLMSettings: boolean;
- setShowLLMSettings: (show: boolean) => void;
- showPromptSettings: boolean;
- setShowPromptSettings: (show: boolean) => void;
- onConfigCreated: () => void;
- onConfigDeleted: () => void;
- onPreferencesUpdated: () => Promise;
-}
-
-export function OnboardAdvancedSettings({
- searchSpaceId,
- showLLMSettings,
- setShowLLMSettings,
- showPromptSettings,
- setShowPromptSettings,
- onConfigCreated,
- onConfigDeleted,
- onPreferencesUpdated,
-}: OnboardAdvancedSettingsProps) {
- return (
-
- {/* LLM Configuration */}
-
-
-
-
-
-
-
-
-
-
- {showLLMSettings && (
-
-
-
-
-
-
- )}
-
-
-
-
- {/* Prompt Configuration */}
-
-
-
-
-
-
-
-
-
-
- {showPromptSettings && (
-
-
-
- setShowPromptSettings(false)}
- />
-
-
-
- )}
-
-
-
-
- );
-}
diff --git a/surfsense_web/components/onboard/onboard-header.tsx b/surfsense_web/components/onboard/onboard-header.tsx
deleted file mode 100644
index d84bb5adc..000000000
--- a/surfsense_web/components/onboard/onboard-header.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-
-import { CheckCircle } from "lucide-react";
-import { motion } from "motion/react";
-import { Logo } from "@/components/Logo";
-import { Badge } from "@/components/ui/badge";
-
-interface OnboardHeaderProps {
- title: string;
- subtitle: string;
- isReady?: boolean;
-}
-
-export function OnboardHeader({ title, subtitle, isReady }: OnboardHeaderProps) {
- return (
-
-
-
-
-
-
-
- {isReady && (
-
-
-
-
- )}
-
- );
-}
diff --git a/surfsense_web/components/onboard/onboard-llm-setup.tsx b/surfsense_web/components/onboard/onboard-llm-setup.tsx
deleted file mode 100644
index b0b2d3fac..000000000
--- a/surfsense_web/components/onboard/onboard-llm-setup.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-"use client";
-
-import { Bot } from "lucide-react";
-import { motion } from "motion/react";
-import { Logo } from "@/components/Logo";
-import { SetupLLMStep } from "@/components/onboard/setup-llm-step";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-
-interface OnboardLLMSetupProps {
- searchSpaceId: number;
- title: string;
- configTitle: string;
- configDescription: string;
- onConfigCreated: () => void;
- onConfigDeleted: () => void;
- onPreferencesUpdated: () => Promise;
-}
-
-export function OnboardLLMSetup({
- searchSpaceId,
- title,
- configTitle,
- configDescription,
- onConfigCreated,
- onConfigDeleted,
- onPreferencesUpdated,
-}: OnboardLLMSetupProps) {
- return (
-
- {globalConfigsCount > 0 && (
-
-
- )}
- {userConfigsCount > 0 && (
-
-
- )}
-
-
-
- );
-}
diff --git a/surfsense_web/components/onboard/setup-llm-step.tsx b/surfsense_web/components/onboard/setup-llm-step.tsx
deleted file mode 100644
index 97555c2f9..000000000
--- a/surfsense_web/components/onboard/setup-llm-step.tsx
+++ /dev/null
@@ -1,813 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import {
- AlertCircle,
- Bot,
- Brain,
- Check,
- CheckCircle,
- ChevronDown,
- ChevronsUpDown,
- ChevronUp,
- Plus,
- Trash2,
- Zap,
-} from "lucide-react";
-import { motion } from "motion/react";
-import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import {
- createLLMConfigMutationAtom,
- deleteLLMConfigMutationAtom,
- updateLLMPreferencesMutationAtom,
-} from "@/atoms/llm-config/llm-config-mutation.atoms";
-import {
- globalLLMConfigsAtom,
- llmConfigsAtom,
- llmPreferencesAtom,
-} from "@/atoms/llm-config/llm-config-query.atoms";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
-} from "@/components/ui/command";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { LANGUAGES } from "@/contracts/enums/languages";
-import { getModelsByProvider } from "@/contracts/enums/llm-models";
-import { LLM_PROVIDERS } from "@/contracts/enums/llm-providers";
-import { type CreateLLMConfigRequest, LLMConfig } from "@/contracts/types/llm-config.types";
-import { cn } from "@/lib/utils";
-import InferenceParamsEditor from "../inference-params-editor";
-
-interface SetupLLMStepProps {
- searchSpaceId: number;
- onConfigCreated?: () => void;
- onConfigDeleted?: () => void;
- onPreferencesUpdated?: () => Promise;
-}
-
-const ROLE_DESCRIPTIONS = {
- long_context: {
- icon: Brain,
- key: "long_context_llm_id" as const,
- titleKey: "long_context_llm_title",
- descKey: "long_context_llm_desc",
- examplesKey: "long_context_llm_examples",
- color:
- "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950 dark:text-blue-200 dark:border-blue-800",
- },
- fast: {
- icon: Zap,
- key: "fast_llm_id" as const,
- titleKey: "fast_llm_title",
- descKey: "fast_llm_desc",
- examplesKey: "fast_llm_examples",
- color:
- "bg-green-100 text-green-800 border-green-200 dark:bg-green-950 dark:text-green-200 dark:border-green-800",
- },
- strategic: {
- icon: Bot,
- key: "strategic_llm_id" as const,
- titleKey: "strategic_llm_title",
- descKey: "strategic_llm_desc",
- examplesKey: "strategic_llm_examples",
- color:
- "bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950 dark:text-purple-200 dark:border-purple-800",
- },
-};
-
-export function SetupLLMStep({
- searchSpaceId,
- onConfigCreated,
- onConfigDeleted,
- onPreferencesUpdated,
-}: SetupLLMStepProps) {
- const { mutate: createLLMConfig, isPending: isCreatingLlmConfig } = useAtomValue(
- createLLMConfigMutationAtom
- );
- const t = useTranslations("onboard");
- const { mutateAsync: deleteLLMConfig } = useAtomValue(deleteLLMConfigMutationAtom);
- const { data: llmConfigs = [] } = useAtomValue(llmConfigsAtom);
- const { data: globalConfigs = [] } = useAtomValue(globalLLMConfigsAtom);
- const { data: preferences = {} } = useAtomValue(llmPreferencesAtom);
- const { mutateAsync: updatePreferences } = useAtomValue(updateLLMPreferencesMutationAtom);
-
- const [isAddingNew, setIsAddingNew] = useState(false);
- const [formData, setFormData] = useState({
- name: "",
- provider: "" as CreateLLMConfigRequest["provider"], // Allow it as Default
- custom_provider: "",
- model_name: "",
- api_key: "",
- api_base: "",
- language: "English",
- litellm_params: {},
- search_space_id: searchSpaceId,
- });
- const [modelComboboxOpen, setModelComboboxOpen] = useState(false);
- const [showProviderForm, setShowProviderForm] = useState(false);
-
- // Role assignments state
- const [assignments, setAssignments] = useState({
- long_context_llm_id: preferences.long_context_llm_id || "",
- fast_llm_id: preferences.fast_llm_id || "",
- strategic_llm_id: preferences.strategic_llm_id || "",
- });
-
- // Combine global and user-specific configs
- const allConfigs = [...globalConfigs, ...llmConfigs];
-
- useEffect(() => {
- setAssignments({
- long_context_llm_id: preferences.long_context_llm_id || "",
- fast_llm_id: preferences.fast_llm_id || "",
- strategic_llm_id: preferences.strategic_llm_id || "",
- });
- }, [preferences]);
-
- const handleInputChange = (field: keyof CreateLLMConfigRequest, value: string) => {
- setFormData((prev) => ({ ...prev, [field]: value }));
- };
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- if (!formData.name || !formData.provider || !formData.model_name || !formData.api_key) {
- toast.error("Please fill in all required fields");
- return;
- }
-
- createLLMConfig(formData, {
- onError: (error) => {
- console.error("Error creating LLM config:", error);
- if (error instanceof Error) {
- toast.error(error?.message || "Failed to create LLM config");
- }
- },
- onSuccess: () => {
- toast.success("LLM config created successfully");
- setFormData({
- name: "",
- provider: "" as CreateLLMConfigRequest["provider"],
- custom_provider: "",
- model_name: "",
- api_key: "",
- api_base: "",
- language: "English",
- litellm_params: {},
- search_space_id: searchSpaceId,
- });
- onConfigCreated?.();
- },
- onSettled: () => {
- setIsAddingNew(false);
- },
- });
- };
-
- const handleRoleAssignment = async (role: string, configId: string) => {
- const newAssignments = {
- ...assignments,
- [role]: configId === "" ? "" : parseInt(configId),
- };
-
- setAssignments(newAssignments);
-
- // Auto-save if this assignment completes all roles
- const hasAllAssignments =
- newAssignments.long_context_llm_id &&
- newAssignments.fast_llm_id &&
- newAssignments.strategic_llm_id;
-
- if (hasAllAssignments) {
- const numericAssignments = {
- long_context_llm_id:
- typeof newAssignments.long_context_llm_id === "string"
- ? parseInt(newAssignments.long_context_llm_id)
- : newAssignments.long_context_llm_id,
- fast_llm_id:
- typeof newAssignments.fast_llm_id === "string"
- ? parseInt(newAssignments.fast_llm_id)
- : newAssignments.fast_llm_id,
- strategic_llm_id:
- typeof newAssignments.strategic_llm_id === "string"
- ? parseInt(newAssignments.strategic_llm_id)
- : newAssignments.strategic_llm_id,
- };
-
- await updatePreferences({
- search_space_id: searchSpaceId,
- data: numericAssignments,
- });
-
- if (onPreferencesUpdated) {
- await onPreferencesUpdated();
- }
- }
- };
-
- const selectedProvider = LLM_PROVIDERS.find((p) => p.value === formData.provider);
- const availableModels = formData.provider ? getModelsByProvider(formData.provider) : [];
-
- const handleParamsChange = (newParams: Record) => {
- setFormData((prev) => ({ ...prev, litellm_params: newParams }));
- };
-
- const handleProviderChange = (value: string) => {
- handleInputChange("provider", value);
- setFormData((prev) => ({ ...prev, model_name: "" }));
- };
-
- const isAssignmentComplete =
- assignments.long_context_llm_id && assignments.fast_llm_id && assignments.strategic_llm_id;
-
- return (
- (null);
- const [expandedPrompts, setExpandedPrompts] = useState>(new Set());
- const [selectedCategory, setSelectedCategory] = useState("all");
-
- // Mark that we have changes when user modifies anything
- useEffect(() => {
- setHasChanges(true);
- }, [enableCitations, customInstructions]);
-
- const handleSelectCommunityPrompt = (promptKey: string, promptValue: string) => {
- setCustomInstructions(promptValue);
- setSelectedPromptKey(promptKey);
- toast.success("Community prompt applied");
- };
-
- const toggleExpand = (promptKey: string) => {
- const newExpanded = new Set(expandedPrompts);
- if (newExpanded.has(promptKey)) {
- newExpanded.delete(promptKey);
- } else {
- newExpanded.add(promptKey);
- }
- setExpandedPrompts(newExpanded);
- };
-
- // Get unique categories
- const categories = Array.from(new Set(prompts.map((p) => p.category || "general")));
- const filteredPrompts =
- selectedCategory === "all"
- ? prompts
- : prompts.filter((p) => (p.category || "general") === selectedCategory);
-
- const truncateText = (text: string, maxLength: number = 150) => {
- if (text.length <= maxLength) return text;
- return text.substring(0, maxLength) + "...";
- };
-
- 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 authenticatedFetch(
- `${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/searchspaces/${searchSpaceId}`,
- {
- method: "PUT",
- headers: { "Content-Type": "application/json" },
- 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 (
-
+
{content}
-
+
);
}
-
-// Code block component with syntax highlighting and copy functionality
-const CodeBlock = ({ children, language }: { children: string; language: string }) => {
- const [copied, setCopied] = useState(false);
- const { resolvedTheme, theme } = useTheme();
- const [mounted, setMounted] = useState(false);
-
- // Prevent hydration issues
- useEffect(() => {
- setMounted(true);
- }, []);
-
- const handleCopy = async () => {
- await navigator.clipboard.writeText(children);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- };
-
- // Choose theme based on current system/user preference
- const isDarkTheme = mounted && (resolvedTheme === "dark" || theme === "dark");
- const syntaxTheme = isDarkTheme ? oneDark : oneLight;
-
- return (
-
-
- {children}
-
- ) : (
-
- );
-};
diff --git a/surfsense_web/components/new-chat/chat-header.tsx b/surfsense_web/components/new-chat/chat-header.tsx
new file mode 100644
index 000000000..ef1533e23
--- /dev/null
+++ b/surfsense_web/components/new-chat/chat-header.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type {
+ GlobalNewLLMConfig,
+ NewLLMConfigPublic,
+} from "@/contracts/types/new-llm-config.types";
+import { ModelConfigSidebar } from "./model-config-sidebar";
+import { ModelSelector } from "./model-selector";
+
+interface ChatHeaderProps {
+ searchSpaceId: number;
+}
+
+export function ChatHeader({ searchSpaceId }: ChatHeaderProps) {
+ const [sidebarOpen, setSidebarOpen] = useState(false);
+ const [selectedConfig, setSelectedConfig] = useState<
+ NewLLMConfigPublic | GlobalNewLLMConfig | null
+ >(null);
+ const [isGlobal, setIsGlobal] = useState(false);
+ const [sidebarMode, setSidebarMode] = useState<"create" | "edit" | "view">("view");
+
+ const handleEditConfig = useCallback(
+ (config: NewLLMConfigPublic | GlobalNewLLMConfig, global: boolean) => {
+ setSelectedConfig(config);
+ setIsGlobal(global);
+ setSidebarMode(global ? "view" : "edit");
+ setSidebarOpen(true);
+ },
+ []
+ );
+
+ const handleAddNew = useCallback(() => {
+ setSelectedConfig(null);
+ setIsGlobal(false);
+ setSidebarMode("create");
+ setSidebarOpen(true);
+ }, []);
+
+ const handleSidebarClose = useCallback((open: boolean) => {
+ setSidebarOpen(open);
+ if (!open) {
+ // Reset state when closing
+ setSelectedConfig(null);
+ }
+ }, []);
+
+ return (
+ <>
+ {/* Header Bar */}
+
-
-
- {mounted ? (
-
-
- )}
-
- {children}
-
-
+
+
+ {/* Config Sidebar */}
+
+
+
+ {/* Content - use overflow-y-auto instead of ScrollArea for better compatibility */}
+
+
+
+
+
+
+
+ {getTitle()}
+
+ {isGlobal ? (
+
+
+ ) : mode !== "create" ? (
+
+
+ ) : null}
+ {config && (
+ {config.model_name}
+ )}
+
+
+
+
+ {/* Global config notice */}
+ {isGlobal && mode !== "create" && (
+
+
+ Global configurations are read-only. To customize settings, create a new
+ configuration based on this template.
+
+
+ )}
+
+ {/* Form */}
+ {mode === "create" ? (
+ onOpenChange(false)}
+ isSubmitting={isSubmitting}
+ mode="create"
+ submitLabel="Create & Use"
+ />
+ ) : isGlobal && config ? (
+ // Read-only view for global configs
+ onOpenChange(false)}
+ isSubmitting={isSubmitting}
+ mode="edit"
+ submitLabel="Save Changes"
+ />
+ ) : null}
+
+
+ {/* Config Details */}
+
+ ) : config ? (
+ // Edit form for user configs
+
+
+
+ {/* Action Buttons */}
+
+
+
+
+
+
+
+
+ {config.description && (
+ {config.name}
+
+
+
+ )}
+ {config.description}
+
+
+
+
+
+
+
+
+ {config.provider}
+
+
+
+ {config.model_name}
+
+
+
+ {config.system_instructions && (
+ <>
+
+
+
+
+ {config.citations_enabled ? "Enabled" : "Disabled"}
+
+
+
+
+
+
+ )}
+
+
+ + {config.system_instructions} +
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ No models found
+Try a different search term
+
+
+ {filteredGlobalConfigs.map((config) => {
+ const isSelected = currentConfig?.id === config.id;
+ return (
+
+
+
+
+
+ {getProviderIcon(config.provider)}
+
+
+
+ {config.name}
+ {isSelected &&
+
+
+ {config.model_name}
+
+ {config.citations_enabled && (
+
+ Citations
+
+ )}
+
+
+
+ {filteredUserConfigs.map((config) => {
+ const isSelected = currentConfig?.id === config.id;
+ return (
+
+
+
+
+
+ {getProviderIcon(config.provider)}
+
+
+
+ {config.name}
+ {isSelected &&
+
+
+ {config.model_name}
+
+ {config.citations_enabled && (
+
+ Citations
+
+ )}
+
+
+
+
+
+ {/* Cited indicator glow effect */}
+ {isCited && }
+
+ {/* Header */}
+
+ );
+ }
+);
+ChunkCard.displayName = "ChunkCard";
+
+export function SourceDetailPanel({
+ open,
+ onOpenChange,
+ chunkId,
+ sourceType,
+ title,
+ description,
+ url,
+ children,
+}: SourceDetailPanelProps) {
+ const scrollAreaRef = useRef
+
+
+ )}
+
+
+ {/* Content */}
+
+
+ {isCited && (
+
+ {index + 1}
+
+ of {totalChunks} chunks
+
+
+
+
+ + {documentData?.title || title || "Source Document"} +
++ {documentData + ? formatDocumentType(documentData.document_type) + : sourceType && formatDocumentType(sourceType)} + {documentData?.chunks && ( + + • {documentData.chunks.length} chunk + {documentData.chunks.length !== 1 ? "s" : ""} + + )} +
+
+ {url && (
+
+ )}
+
+
+
+
+
+
+ )}
+
+ {/* Error State */}
+ {!isDirectRenderSource && documentByChunkFetchingError && (
+
+
+
+ Loading document...
+
+
+
+
+ )}
+
+ {/* Direct render for web search providers */}
+ {isDirectRenderSource && (
+
+
+
+
+
+ + Failed to load document +
++ {documentByChunkFetchingError.message || + "An unexpected error occurred. Please try again."} +
+
+ {url && (
+
+ )}
+
+
+
+
+
+
+
+
+ {title || "Untitled"}
+
+
+ {description || "No content available"}
+
+
+ {/* Chunk Navigation Sidebar */}
+ {documentData.chunks.length > 1 && (
+
+
+
+
+ )}
+
+ {/* Main Content */}
+
+
+
+ )}
+
+ {documentData.chunks.map((chunk, idx) => {
+ const isCited = chunk.id === chunkId;
+ const isActive = activeChunkIndex === idx;
+ return (
+ scrollToChunk(idx)}
+ initial={{ opacity: 0, scale: 0.8 }}
+ animate={{ opacity: 1, scale: 1 }}
+ transition={{ delay: Math.min(idx * 0.02, 0.2) }}
+ className={cn(
+ "relative w-11 h-9 mx-auto rounded-lg text-xs font-semibold transition-all duration-200 flex items-center justify-center",
+ isCited
+ ? "bg-primary text-primary-foreground shadow-md"
+ : isActive
+ ? "bg-muted text-foreground"
+ : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground"
+ )}
+ title={isCited ? `Chunk ${idx + 1} (Cited)` : `Chunk ${idx + 1}`}
+ >
+ {idx + 1}
+ {isCited && (
+
+
+ );
+ })}
+
+
+ {/* Document Metadata */}
+ {documentData.document_metadata &&
+ Object.keys(documentData.document_metadata).length > 0 && (
+
+
+
+
+ )}
+
+ {/* Summary Collapsible */}
+ {documentData.content && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Chunks Header */}
+
+
+
+ -
+ {Object.entries(documentData.document_metadata).map(([key, value]) => (
+
+
+ ))}
+
+
+
+ {citedChunkIndex !== -1 && (
+
+ )}
+
+
+ {/* Chunks */}
+
+
+ {citedChunkIndex !== -1 && (
+
+ )}
+
+ {documentData.chunks.map((chunk, idx) => {
+ const isCited = chunk.id === chunkId;
+ return (
+ 30}
+ />
+ );
+ })}
+
+
- {features.map((feature, index) => (
-
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
- LLM Configuration
-- Customize AI models and role assignments -
-
-
-
-
-
-
-
-
-
-
- AI Response Settings
-- Configure citations and custom instructions (Optional) -
-{title}
-{subtitle}
-
-
- {/* Header */}
-
-
-
- {configDescription}
-
-
-
-
-
-
-
- );
-}
diff --git a/surfsense_web/components/onboard/onboard-loading.tsx b/surfsense_web/components/onboard/onboard-loading.tsx
deleted file mode 100644
index 4a85736d2..000000000
--- a/surfsense_web/components/onboard/onboard-loading.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import { Wand2 } from "lucide-react";
-import { motion } from "motion/react";
-
-interface OnboardLoadingProps {
- title: string;
- subtitle: string;
-}
-
-export function OnboardLoading({ title, subtitle }: OnboardLoadingProps) {
- return (
-
-
-
-
- {title}
-
-
- Configure your AI model to get started
-
-
-
- {/* LLM Setup Card */}
-
- {configTitle}
-
-
-
-
-
-
-
- );
-}
diff --git a/surfsense_web/components/onboard/onboard-stats.tsx b/surfsense_web/components/onboard/onboard-stats.tsx
deleted file mode 100644
index 0918c74e2..000000000
--- a/surfsense_web/components/onboard/onboard-stats.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-import { Bot, Brain, Sparkles } from "lucide-react";
-import { motion } from "motion/react";
-import { Badge } from "@/components/ui/badge";
-
-interface OnboardStatsProps {
- globalConfigsCount: number;
- userConfigsCount: number;
-}
-
-export function OnboardStats({ globalConfigsCount, userConfigsCount }: OnboardStatsProps) {
- return (
-
-
-
-
- {title}
-{subtitle}
-
- {[0, 1, 2].map((i) => (
-
-
- {/* Global Configs Notice - Prominent at top */}
- {globalConfigs.length > 0 && (
-
-
-
-
- )}
-
- {/* Section 1: Add LLM Providers */}
-
- );
-}
diff --git a/surfsense_web/components/onboard/setup-prompt-step.tsx b/surfsense_web/components/onboard/setup-prompt-step.tsx
deleted file mode 100644
index b53e49700..000000000
--- a/surfsense_web/components/onboard/setup-prompt-step.tsx
+++ /dev/null
@@ -1,340 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { ChevronDown, ChevronUp, ExternalLink, Info, Sparkles, User } from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { communityPromptsAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Switch } from "@/components/ui/switch";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import { authenticatedFetch } from "@/lib/auth-utils";
-
-interface SetupPromptStepProps {
- searchSpaceId: number;
- onComplete?: () => void;
-}
-
-export function SetupPromptStep({ searchSpaceId, onComplete }: SetupPromptStepProps) {
- const { data: prompts = [], isPending: loadingPrompts } = useAtomValue(communityPromptsAtom);
- const [enableCitations, setEnableCitations] = useState(true);
- const [customInstructions, setCustomInstructions] = useState("");
- const [saving, setSaving] = useState(false);
- const [hasChanges, setHasChanges] = useState(false);
- const [selectedPromptKey, setSelectedPromptKey] = useState
-
- - {globalConfigs.length} global configuration(s) available! -
-- You can skip adding your own LLM provider and use our pre-configured models in the - role assignment section below. -
-- Or expand "Add LLM Provider" to add your own custom configurations. -
-
-
- {/* Info Alert */}
-
- {t("add_provider_instruction")}
-
-
- {/* Existing Configurations */}
- {llmConfigs.length > 0 && (
-
-
-
-
- ) : (
-
-
- {t("add_new_llm_provider")}
- {t("configure_new_provider")}
-
-
-
-
-
- )}
-
- )}
-
-
-
-
-
- {showProviderForm && (
-
-
-
-
-
-
-
- {t("configure_first_provider")}
-
-
- )}
-
- {/* Add New Provider */}
- {!isAddingNew ? (
- - {t("your_llm_configs")} -
-
- {llmConfigs.map((config) => (
-
-
-
-
-
-
- ))}
-
-
-
-
-
-
-
-
- {config.provider}
-
-
- {config.name}
-- {t("model")}: {config.model_name} - {config.language && ` • ${t("language")}: ${config.language}`} - {config.api_base && ` • ${t("base")}: ${config.api_base}`} -
-{t("add_provider_title")}
-- {t("add_provider_subtitle")} -
- -
-
- {t("add_provider_before_roles")}
-
- ) : (
-
-
-
-
-
-
- {allConfigs.length === 0 ? (
-
-
- {t("assign_specific_roles")}
-
-
- {t("assign_roles_instruction")}
-
-
-
- )}
-
- {Object.entries(ROLE_DESCRIPTIONS).map(([roleKey, role]) => {
- const IconComponent = role.icon;
- const currentAssignment = assignments[role.key];
- const assignedConfig = allConfigs.find((config) => config.id === currentAssignment);
-
- return (
-
-
-
-
-
-
-
-
- );
- })}
-
-
- {/* Status Indicators */}
-
-
-
-
- {currentAssignment &&
-
-
- {t(role.titleKey)}
-
- {t(role.descKey)}
-
-
-
-
-
-
-
- {assignedConfig && (
-
-
- )}
-
-
- 🌐 Global
-
- )}
-
- {assignedConfig.provider}
-
- {assignedConfig.name}
-
-
- {t("model")}: {assignedConfig.model_name}
-
-
-
-
- {t("progress")}:
-
-
- {isAssignmentComplete && (
-
- {Object.keys(ROLE_DESCRIPTIONS).map((key) => {
- const roleKey = ROLE_DESCRIPTIONS[key as keyof typeof ROLE_DESCRIPTIONS].key;
- return (
-
- );
- })}
-
-
- {t("roles_assigned", {
- assigned: Object.values(assignments).filter(Boolean).length,
- total: Object.keys(ROLE_DESCRIPTIONS).length,
- })}
-
-
-
- )}
-
-
-
- These settings are optional. You can skip this step and configure them later in settings.
-
-
-
- {/* Citation Toggle */}
-
-
-
- Disabling citations means AI responses won't include source references. You can
- re-enable this anytime in settings.
-
-
- )}
-
-
- {/* SearchSpace System Instructions */}
-
-
-
- {!enableCitations && (
-
-
-
- - When enabled, AI responses will include citations to source documents using - [citation:id] format. -
-
-
-
-
-
-
-
-
- Browse {prompts.length} curated prompts. Click to preview or apply directly
-
-
-
-
-
-
- All ({prompts.length})
-
- {categories.map((category) => (
-
- {category} (
- {prompts.filter((p) => (p.category || "general") === category).length})
-
- ))}
-
-
-
-
-
-
-
- )}
-
-
- Add system instructions to guide how the AI should respond. Choose from community - prompts below or write your own. -
- - {/* Community Prompts Section */} - {!loadingPrompts && prompts.length > 0 && ( -
- {filteredPrompts.map((prompt) => {
- const isExpanded = expandedPrompts.has(prompt.key);
- const isSelected = selectedPromptKey === prompt.key;
- const displayText = isExpanded
- ? prompt.value
- : truncateText(prompt.value, 120);
-
- return (
-
-
-
- );
- })}
-
-
-
-
-
- {prompt.key.replace(/_/g, " ")}
-
- {prompt.category && (
-
- {prompt.category}
-
- )}
- {isSelected && (
-
- ✓ Selected
-
- )}
-
- {prompt.link && (
-
- - {displayText} -
- -
-
-
-
-
-
- {prompt.value.length > 120 && (
-
- )}
-
-
-