gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

clean all items from local storage on finish onboarding

Browse source
This commit is contained in:
Lucas Oliveira 2025-11-18 17:12:38 -03:00
parent b7e364a240
commit 5d83a40f76
5 changed files with 799 additions and 786 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

385
frontend/app/onboarding/_components/animated-provider-steps.tsx
View file

@ -5,210 +5,211 @@ import { CheckIcon, XIcon } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import AnimatedProcessingIcon from "@/components/icons/animated-processing-icon"; import AnimatedProcessingIcon from "@/components/icons/animated-processing-icon";
import { import {
Accordion, Accordion,
AccordionContent, AccordionContent,
AccordionItem, AccordionItem,
AccordionTrigger, AccordionTrigger,
} from "@/components/ui/accordion"; } from "@/components/ui/accordion";
import { ONBOARDING_CARD_STEPS_KEY } from "@/lib/constants";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
export function AnimatedProviderSteps({ export function AnimatedProviderSteps({
currentStep, currentStep,
isCompleted, isCompleted,
setCurrentStep, setCurrentStep,
steps, steps,
storageKey = "provider-steps", storageKey = ONBOARDING_CARD_STEPS_KEY,
processingStartTime, processingStartTime,
hasError = false, hasError = false,
}: { }: {
currentStep: number; currentStep: number;
isCompleted: boolean; isCompleted: boolean;
setCurrentStep: (step: number) => void; setCurrentStep: (step: number) => void;
steps: string[]; steps: string[];
storageKey?: string; storageKey?: string;
processingStartTime?: number | null; processingStartTime?: number | null;
hasError?: boolean; hasError?: boolean;
}) { }) {
const [startTime, setStartTime] = useState<number | null>(null); const [startTime, setStartTime] = useState<number | null>(null);
const [elapsedTime, setElapsedTime] = useState<number>(0); const [elapsedTime, setElapsedTime] = useState<number>(0);
// Initialize start time from prop or local storage // Initialize start time from prop or local storage
useEffect(() => { useEffect(() => {
const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`); const storedElapsedTime = localStorage.getItem(storageKey);
if (isCompleted && storedElapsedTime) { if (isCompleted && storedElapsedTime) {
// If completed, use stored elapsed time // If completed, use stored elapsed time
setElapsedTime(parseFloat(storedElapsedTime)); setElapsedTime(parseFloat(storedElapsedTime));
} else if (processingStartTime) { } else if (processingStartTime) {
// Use the start time passed from parent (when user clicked Complete) // Use the start time passed from parent (when user clicked Complete)
setStartTime(processingStartTime); setStartTime(processingStartTime);
} }
}, [storageKey, isCompleted, processingStartTime]); }, [storageKey, isCompleted, processingStartTime]);
// Progress through steps // Progress through steps
useEffect(() => { useEffect(() => {
if (currentStep < steps.length - 1 && !isCompleted) { if (currentStep < steps.length - 1 && !isCompleted) {
const interval = setInterval(() => { const interval = setInterval(() => {
setCurrentStep(currentStep + 1); setCurrentStep(currentStep + 1);
}, 1500); }, 1500);
return () => clearInterval(interval); return () => clearInterval(interval);
} }
}, [currentStep, setCurrentStep, steps, isCompleted]); }, [currentStep, setCurrentStep, steps, isCompleted]);
// Calculate and store elapsed time when completed // Calculate and store elapsed time when completed
useEffect(() => { useEffect(() => {
if (isCompleted && startTime) { if (isCompleted && startTime) {
const elapsed = Date.now() - startTime; const elapsed = Date.now() - startTime;
setElapsedTime(elapsed); setElapsedTime(elapsed);
localStorage.setItem(`${storageKey}-elapsed`, elapsed.toString()); localStorage.setItem(storageKey, elapsed.toString());
} }
}, [isCompleted, startTime, storageKey]); }, [isCompleted, startTime, storageKey]);
const isDone = currentStep >= steps.length && !isCompleted && !hasError; const isDone = currentStep >= steps.length && !isCompleted && !hasError;
return ( return (
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{!isCompleted ? ( {!isCompleted ? (
<motion.div <motion.div
key="processing" key="processing"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
className="flex flex-col gap-2" className="flex flex-col gap-2"
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div <div
className={cn( className={cn(
"transition-all duration-300 relative", "transition-all duration-300 relative",
isDone || hasError ? "w-3.5 h-3.5" : "w-6 h-6", isDone || hasError ? "w-3.5 h-3.5" : "w-6 h-6",
)} )}
> >
<CheckIcon <CheckIcon
className={cn( className={cn(
"text-accent-emerald-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150", "text-accent-emerald-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
isDone ? "opacity-100" : "opacity-0", isDone ? "opacity-100" : "opacity-0",
)} )}
/> />
<XIcon <XIcon
className={cn( className={cn(
"text-accent-red-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150", "text-accent-red-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
hasError ? "opacity-100" : "opacity-0", hasError ? "opacity-100" : "opacity-0",
)} )}
/> />
<AnimatedProcessingIcon <AnimatedProcessingIcon
className={cn( className={cn(
"text-current shrink-0 absolute inset-0 transition-all duration-150", "text-current shrink-0 absolute inset-0 transition-all duration-150",
isDone || hasError ? "opacity-0" : "opacity-100", isDone || hasError ? "opacity-0" : "opacity-100",
)} )}
/> />
</div> </div>
<span className="!text-mmd font-medium text-muted-foreground"> <span className="!text-mmd font-medium text-muted-foreground">
{hasError ? "Error" : isDone ? "Done" : "Thinking"} {hasError ? "Error" : isDone ? "Done" : "Thinking"}
</span> </span>
</div> </div>
<div className="overflow-hidden"> <div className="overflow-hidden">
<AnimatePresence> <AnimatePresence>
{!isDone && !hasError && ( {!isDone && !hasError && (
<motion.div <motion.div
initial={{ opacity: 1, y: 0, height: "auto" }} initial={{ opacity: 1, y: 0, height: "auto" }}
exit={{ opacity: 0, y: -24, height: 0 }} exit={{ opacity: 0, y: -24, height: 0 }}
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
className="flex items-center gap-4 overflow-y-hidden relative h-6" className="flex items-center gap-4 overflow-y-hidden relative h-6"
> >
<div className="w-px h-6 bg-border ml-3" /> <div className="w-px h-6 bg-border ml-3" />
<div className="relative h-5 w-full"> <div className="relative h-5 w-full">
<AnimatePresence mode="sync" initial={false}> <AnimatePresence mode="sync" initial={false}>
<motion.span <motion.span
key={currentStep} key={currentStep}
initial={{ y: 24, opacity: 0 }} initial={{ y: 24, opacity: 0 }}
animate={{ y: 0, opacity: 1 }} animate={{ y: 0, opacity: 1 }}
exit={{ y: -24, opacity: 0 }} exit={{ y: -24, opacity: 0 }}
transition={{ duration: 0.3, ease: "easeInOut" }} transition={{ duration: 0.3, ease: "easeInOut" }}
className="text-mmd font-medium text-primary absolute left-0" className="text-mmd font-medium text-primary absolute left-0"
> >
{steps[currentStep]} {steps[currentStep]}
</motion.span> </motion.span>
</AnimatePresence> </AnimatePresence>
</div> </div>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
</div> </div>
</motion.div> </motion.div>
) : ( ) : (
<motion.div <motion.div
key="completed" key="completed"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<Accordion type="single" collapsible> <Accordion type="single" collapsible>
<AccordionItem value="steps" className="border-none"> <AccordionItem value="steps" className="border-none">
<AccordionTrigger className="hover:no-underline p-0 py-2"> <AccordionTrigger className="hover:no-underline p-0 py-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-mmd font-medium text-muted-foreground"> <span className="text-mmd font-medium text-muted-foreground">
{`Initialized in ${(elapsedTime / 1000).toFixed(1)} seconds`} {`Initialized in ${(elapsedTime / 1000).toFixed(1)} seconds`}
</span> </span>
</div> </div>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="pl-0 pt-2 pb-0"> <AccordionContent className="pl-0 pt-2 pb-0">
<div className="relative pl-1"> <div className="relative pl-1">
{/* Connecting line on the left */} {/* Connecting line on the left */}
<motion.div <motion.div
className="absolute left-[7px] top-0 bottom-0 w-px bg-border z-0" className="absolute left-[7px] top-0 bottom-0 w-px bg-border z-0"
initial={{ scaleY: 0 }} initial={{ scaleY: 0 }}
animate={{ scaleY: 1 }} animate={{ scaleY: 1 }}
transition={{ duration: 0.3, ease: "easeOut" }} transition={{ duration: 0.3, ease: "easeOut" }}
style={{ transformOrigin: "top" }} style={{ transformOrigin: "top" }}
/> />
<div className="space-y-3 ml-4"> <div className="space-y-3 ml-4">
<AnimatePresence> <AnimatePresence>
{steps.map((step, index) => ( {steps.map((step, index) => (
<motion.div <motion.div
key={step} key={step}
initial={{ opacity: 0, x: -10 }} initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
transition={{ transition={{
duration: 0.3, duration: 0.3,
delay: index * 0.05, delay: index * 0.05,
}} }}
className="flex items-center gap-1.5" className="flex items-center gap-1.5"
> >
<motion.div <motion.div
className="relative w-3.5 h-3.5 shrink-0 z-10 bg-background" className="relative w-3.5 h-3.5 shrink-0 z-10 bg-background"
initial={{ scale: 0 }} initial={{ scale: 0 }}
animate={{ scale: 1 }} animate={{ scale: 1 }}
transition={{ transition={{
duration: 0.2, duration: 0.2,
delay: index * 0.05 + 0.1, delay: index * 0.05 + 0.1,
}} }}
> >
<motion.div <motion.div
key="check" key="check"
initial={{ scale: 0, rotate: -180 }} initial={{ scale: 0, rotate: -180 }}
animate={{ scale: 1, rotate: 0 }} animate={{ scale: 1, rotate: 0 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<CheckIcon className="text-accent-emerald-foreground w-3.5 h-3.5" /> <CheckIcon className="text-accent-emerald-foreground w-3.5 h-3.5" />
</motion.div> </motion.div>
</motion.div> </motion.div>
<span className="text-mmd text-muted-foreground"> <span className="text-mmd text-muted-foreground">
{step} {step}
</span> </span>
</motion.div> </motion.div>
))} ))}
</AnimatePresence> </AnimatePresence>
</div> </div>
</div> </div>
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
); );
} }

934
frontend/app/onboarding/_components/onboarding-card.tsx
View file

@ -6,8 +6,8 @@ import { Info, X } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { import {
type OnboardingVariables, type OnboardingVariables,
useOnboardingMutation, useOnboardingMutation,
} from "@/app/api/mutations/useOnboardingMutation"; } from "@/app/api/mutations/useOnboardingMutation";
import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery"; import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery"; import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
@ -20,10 +20,11 @@ import OpenAILogo from "@/components/icons/openai-logo";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { ONBOARDING_CARD_STEPS_KEY } from "@/lib/constants";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { AnimatedProviderSteps } from "./animated-provider-steps"; import { AnimatedProviderSteps } from "./animated-provider-steps";
import { AnthropicOnboarding } from "./anthropic-onboarding"; import { AnthropicOnboarding } from "./anthropic-onboarding";
@ -33,506 +34,507 @@ import { OpenAIOnboarding } from "./openai-onboarding";
import { TabTrigger } from "./tab-trigger"; import { TabTrigger } from "./tab-trigger";
interface OnboardingCardProps { interface OnboardingCardProps {
onComplete: () => void; onComplete: () => void;
isCompleted?: boolean; isCompleted?: boolean;
isEmbedding?: boolean; isEmbedding?: boolean;
setIsLoadingModels?: (isLoading: boolean) => void; setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void; setLoadingStatus?: (status: string[]) => void;
} }
const STEP_LIST = [ const STEP_LIST = [
"Setting up your model provider", "Setting up your model provider",
"Defining schema", "Defining schema",
"Configuring Langflow", "Configuring Langflow",
]; ];
const EMBEDDING_STEP_LIST = [ const EMBEDDING_STEP_LIST = [
"Setting up your model provider", "Setting up your model provider",
"Defining schema", "Defining schema",
"Configuring Langflow", "Configuring Langflow",
"Ingesting sample data", "Ingesting sample data",
]; ];
const OnboardingCard = ({ const OnboardingCard = ({
onComplete, onComplete,
isEmbedding = false, isEmbedding = false,
isCompleted = false, isCompleted = false,
}: OnboardingCardProps) => { }: OnboardingCardProps) => {
const { isHealthy: isDoclingHealthy } = useDoclingHealth(); const { isHealthy: isDoclingHealthy } = useDoclingHealth();
const [modelProvider, setModelProvider] = useState<string>( const [modelProvider, setModelProvider] = useState<string>(
isEmbedding ? "openai" : "anthropic", isEmbedding ? "openai" : "anthropic",
); );
const [sampleDataset, setSampleDataset] = useState<boolean>(true); const [sampleDataset, setSampleDataset] = useState<boolean>(true);
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false); const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
const queryClient = useQueryClient(); const queryClient = useQueryClient();
// Fetch current settings to check if providers are already configured // Fetch current settings to check if providers are already configured
const { data: currentSettings } = useGetSettingsQuery(); const { data: currentSettings } = useGetSettingsQuery();
const handleSetModelProvider = (provider: string) => { const handleSetModelProvider = (provider: string) => {
setIsLoadingModels(false); setIsLoadingModels(false);
setModelProvider(provider); setModelProvider(provider);
setSettings({ setSettings({
[isEmbedding ? "embedding_provider" : "llm_provider"]: provider, [isEmbedding ? "embedding_provider" : "llm_provider"]: provider,
embedding_model: "", embedding_model: "",
llm_model: "", llm_model: "",
}); });
setError(null); setError(null);
}; };
// Check if the selected provider is already configured // Check if the selected provider is already configured
const isProviderAlreadyConfigured = (provider: string): boolean => { const isProviderAlreadyConfigured = (provider: string): boolean => {
if (!isEmbedding || !currentSettings?.providers) return false; if (!isEmbedding || !currentSettings?.providers) return false;
// Check if provider has been explicitly configured (not just from env vars) // Check if provider has been explicitly configured (not just from env vars)
if (provider === "openai") { if (provider === "openai") {
return currentSettings.providers.openai?.configured === true; return currentSettings.providers.openai?.configured === true;
} else if (provider === "anthropic") { } else if (provider === "anthropic") {
return currentSettings.providers.anthropic?.configured === true; return currentSettings.providers.anthropic?.configured === true;
} else if (provider === "watsonx") { } else if (provider === "watsonx") {
return currentSettings.providers.watsonx?.configured === true; return currentSettings.providers.watsonx?.configured === true;
} else if (provider === "ollama") { } else if (provider === "ollama") {
return currentSettings.providers.ollama?.configured === true; return currentSettings.providers.ollama?.configured === true;
} }
return false; return false;
}; };
const showProviderConfiguredMessage = const showProviderConfiguredMessage =
isProviderAlreadyConfigured(modelProvider); isProviderAlreadyConfigured(modelProvider);
const providerAlreadyConfigured = const providerAlreadyConfigured =
isEmbedding && showProviderConfiguredMessage; isEmbedding && showProviderConfiguredMessage;
const totalSteps = isEmbedding const totalSteps = isEmbedding
? EMBEDDING_STEP_LIST.length ? EMBEDDING_STEP_LIST.length
: STEP_LIST.length; : STEP_LIST.length;
const [settings, setSettings] = useState<OnboardingVariables>({ const [settings, setSettings] = useState<OnboardingVariables>({
[isEmbedding ? "embedding_provider" : "llm_provider"]: modelProvider, [isEmbedding ? "embedding_provider" : "llm_provider"]: modelProvider,
embedding_model: "", embedding_model: "",
llm_model: "", llm_model: "",
// Provider-specific fields will be set by provider components // Provider-specific fields will be set by provider components
openai_api_key: "", openai_api_key: "",
anthropic_api_key: "", anthropic_api_key: "",
watsonx_api_key: "", watsonx_api_key: "",
watsonx_endpoint: "", watsonx_endpoint: "",
watsonx_project_id: "", watsonx_project_id: "",
ollama_endpoint: "", ollama_endpoint: "",
}); });
const [currentStep, setCurrentStep] = useState<number | null>( const [currentStep, setCurrentStep] = useState<number | null>(
isCompleted ? totalSteps : null, isCompleted ? totalSteps : null,
); );
const [processingStartTime, setProcessingStartTime] = useState<number | null>( const [processingStartTime, setProcessingStartTime] = useState<number | null>(
null, null,
); );
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// Query tasks to track completion // Query tasks to track completion
const { data: tasks } = useGetTasksQuery({ const { data: tasks } = useGetTasksQuery({
enabled: currentStep !== null, // Only poll when onboarding has started enabled: currentStep !== null, // Only poll when onboarding has started
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during onboarding refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during onboarding
}); });
// Monitor tasks and call onComplete when all tasks are done // Monitor tasks and call onComplete when all tasks are done
useEffect(() => { useEffect(() => {
if (currentStep === null || !tasks || !isEmbedding) { if (currentStep === null || !tasks || !isEmbedding) {
return; return;
} }
// Check if there are any active tasks (pending, running, or processing) // Check if there are any active tasks (pending, running, or processing)
const activeTasks = tasks.find( const activeTasks = tasks.find(
(task) => (task) =>
task.status === "pending" || task.status === "pending" ||
task.status === "running" || task.status === "running" ||
task.status === "processing", task.status === "processing",
); );
// If no active tasks and we've started onboarding, complete it // If no active tasks and we've started onboarding, complete it
if ( if (
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) && (!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
tasks.length > 0 && tasks.length > 0 &&
!isCompleted !isCompleted
) { ) {
// Set to final step to show "Done" // Set to final step to show "Done"
setCurrentStep(totalSteps); setCurrentStep(totalSteps);
// Wait a bit before completing // Wait a bit before completing
setTimeout(() => { setTimeout(() => {
onComplete(); onComplete();
}, 1000); }, 1000);
} }
}, [tasks, currentStep, onComplete, isCompleted, isEmbedding, totalSteps]); }, [tasks, currentStep, onComplete, isCompleted, isEmbedding, totalSteps]);
// Mutations // Mutations
const onboardingMutation = useOnboardingMutation({ const onboardingMutation = useOnboardingMutation({
onSuccess: (data) => { onSuccess: (data) => {
console.log("Onboarding completed successfully", data); console.log("Onboarding completed successfully", data);
// Update provider health cache to healthy since backend just validated // Update provider health cache to healthy since backend just validated
const provider = const provider =
(isEmbedding ? settings.embedding_provider : settings.llm_provider) || (isEmbedding ? settings.embedding_provider : settings.llm_provider) ||
modelProvider; modelProvider;
const healthData: ProviderHealthResponse = { const healthData: ProviderHealthResponse = {
status: "healthy", status: "healthy",
message: "Provider is configured and working correctly", message: "Provider is configured and working correctly",
provider: provider, provider: provider,
}; };
queryClient.setQueryData(["provider", "health"], healthData); queryClient.setQueryData(["provider", "health"], healthData);
setError(null); setError(null);
if (!isEmbedding) { if (!isEmbedding) {
setCurrentStep(totalSteps); setCurrentStep(totalSteps);
setTimeout(() => { setTimeout(() => {
onComplete(); onComplete();
}, 1000); }, 1000);
} else { } else {
setCurrentStep(0); setCurrentStep(0);
} }
}, },
onError: (error) => { onError: (error) => {
setError(error.message); setError(error.message);
setCurrentStep(totalSteps); setCurrentStep(totalSteps);
// Reset to provider selection after 1 second // Reset to provider selection after 1 second
setTimeout(() => { setTimeout(() => {
setCurrentStep(null); setCurrentStep(null);
}, 1000); }, 1000);
}, },
}); });
const handleComplete = () => { const handleComplete = () => {
const currentProvider = isEmbedding const currentProvider = isEmbedding
? settings.embedding_provider ? settings.embedding_provider
: settings.llm_provider; : settings.llm_provider;
if ( if (
!currentProvider || !currentProvider ||
(isEmbedding && (isEmbedding &&
!settings.embedding_model && !settings.embedding_model &&
!showProviderConfiguredMessage) || !showProviderConfiguredMessage) ||
(!isEmbedding && !settings.llm_model) (!isEmbedding && !settings.llm_model)
) { ) {
toast.error("Please complete all required fields"); toast.error("Please complete all required fields");
return; return;
} }
// Clear any previous error // Clear any previous error
setError(null); setError(null);
// Prepare onboarding data with provider-specific fields // Prepare onboarding data with provider-specific fields
const onboardingData: OnboardingVariables = { const onboardingData: OnboardingVariables = {
sample_data: sampleDataset, sample_data: sampleDataset,
}; };
// Set the provider field // Set the provider field
if (isEmbedding) { if (isEmbedding) {
onboardingData.embedding_provider = currentProvider; onboardingData.embedding_provider = currentProvider;
// If provider is already configured, use the existing embedding model from settings // If provider is already configured, use the existing embedding model from settings
// Otherwise, use the embedding model from the form // Otherwise, use the embedding model from the form
if ( if (
showProviderConfiguredMessage && showProviderConfiguredMessage &&
currentSettings?.knowledge?.embedding_model currentSettings?.knowledge?.embedding_model
) { ) {
onboardingData.embedding_model = onboardingData.embedding_model =
currentSettings.knowledge.embedding_model; currentSettings.knowledge.embedding_model;
} else { } else {
onboardingData.embedding_model = settings.embedding_model; onboardingData.embedding_model = settings.embedding_model;
} }
} else { } else {
onboardingData.llm_provider = currentProvider; onboardingData.llm_provider = currentProvider;
onboardingData.llm_model = settings.llm_model; onboardingData.llm_model = settings.llm_model;
} }
// Add provider-specific credentials based on the selected provider // Add provider-specific credentials based on the selected provider
if (currentProvider === "openai" && settings.openai_api_key) { if (currentProvider === "openai" && settings.openai_api_key) {
onboardingData.openai_api_key = settings.openai_api_key; onboardingData.openai_api_key = settings.openai_api_key;
} else if (currentProvider === "anthropic" && settings.anthropic_api_key) { } else if (currentProvider === "anthropic" && settings.anthropic_api_key) {
onboardingData.anthropic_api_key = settings.anthropic_api_key; onboardingData.anthropic_api_key = settings.anthropic_api_key;
} else if (currentProvider === "watsonx") { } else if (currentProvider === "watsonx") {
if (settings.watsonx_api_key) { if (settings.watsonx_api_key) {
onboardingData.watsonx_api_key = settings.watsonx_api_key; onboardingData.watsonx_api_key = settings.watsonx_api_key;
} }
if (settings.watsonx_endpoint) { if (settings.watsonx_endpoint) {
onboardingData.watsonx_endpoint = settings.watsonx_endpoint; onboardingData.watsonx_endpoint = settings.watsonx_endpoint;
} }
if (settings.watsonx_project_id) { if (settings.watsonx_project_id) {
onboardingData.watsonx_project_id = settings.watsonx_project_id; onboardingData.watsonx_project_id = settings.watsonx_project_id;
} }
} else if (currentProvider === "ollama" && settings.ollama_endpoint) { } else if (currentProvider === "ollama" && settings.ollama_endpoint) {
onboardingData.ollama_endpoint = settings.ollama_endpoint; onboardingData.ollama_endpoint = settings.ollama_endpoint;
} }
// Record the start time when user clicks Complete // Record the start time when user clicks Complete
setProcessingStartTime(Date.now()); setProcessingStartTime(Date.now());
onboardingMutation.mutate(onboardingData); onboardingMutation.mutate(onboardingData);
setCurrentStep(0); setCurrentStep(0);
}; };
const isComplete = const isComplete =
(isEmbedding && (isEmbedding &&
(!!settings.embedding_model || showProviderConfiguredMessage)) || (!!settings.embedding_model || showProviderConfiguredMessage)) ||
(!isEmbedding && !!settings.llm_model && isDoclingHealthy); (!isEmbedding && !!settings.llm_model && isDoclingHealthy);
return ( return (
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{currentStep === null ? ( {currentStep === null ? (
<motion.div <motion.div
key="onboarding-form" key="onboarding-form"
initial={{ opacity: 0, y: -24 }} initial={{ opacity: 0, y: -24 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 24 }} exit={{ opacity: 0, y: 24 }}
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
> >
<div className={`w-full max-w-[600px] flex flex-col`}> <div className={`w-full max-w-[600px] flex flex-col`}>
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{error && ( {error && (
<motion.div <motion.div
key="error" key="error"
initial={{ opacity: 1, y: 0, height: "auto" }} initial={{ opacity: 1, y: 0, height: "auto" }}
exit={{ opacity: 0, y: -10, height: 0 }} exit={{ opacity: 0, y: -10, height: 0 }}
> >
<div className="pb-6 flex items-center gap-4"> <div className="pb-6 flex items-center gap-4">
<X className="w-4 h-4 text-destructive shrink-0" /> <X className="w-4 h-4 text-destructive shrink-0" />
<span className="text-mmd text-muted-foreground"> <span className="text-mmd text-muted-foreground">
{error} {error}
</span> </span>
</div> </div>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
<div className={`w-full flex flex-col gap-6`}> <div className={`w-full flex flex-col gap-6`}>
<Tabs <Tabs
defaultValue={modelProvider} defaultValue={modelProvider}
onValueChange={handleSetModelProvider} onValueChange={handleSetModelProvider}
> >
<TabsList className="mb-4"> <TabsList className="mb-4">
{!isEmbedding && ( {!isEmbedding && (
<TabsTrigger <TabsTrigger
value="anthropic" value="anthropic"
className={cn( className={cn(
error && error &&
modelProvider === "anthropic" && modelProvider === "anthropic" &&
"data-[state=active]:border-destructive", "data-[state=active]:border-destructive",
)} )}
> >
<TabTrigger <TabTrigger
selected={modelProvider === "anthropic"} selected={modelProvider === "anthropic"}
isLoading={isLoadingModels} isLoading={isLoadingModels}
> >
<div <div
className={cn( className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border", "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
modelProvider === "anthropic" modelProvider === "anthropic"
? "bg-[#D97757]" ? "bg-[#D97757]"
: "bg-muted", : "bg-muted",
)} )}
> >
<AnthropicLogo <AnthropicLogo
className={cn( className={cn(
"w-4 h-4 shrink-0", "w-4 h-4 shrink-0",
modelProvider === "anthropic" modelProvider === "anthropic"
? "text-black" ? "text-black"
: "text-muted-foreground", : "text-muted-foreground",
)} )}
/> />
</div> </div>
Anthropic Anthropic
</TabTrigger> </TabTrigger>
</TabsTrigger> </TabsTrigger>
)} )}
<TabsTrigger <TabsTrigger
value="openai" value="openai"
className={cn( className={cn(
error && error &&
modelProvider === "openai" && modelProvider === "openai" &&
"data-[state=active]:border-destructive", "data-[state=active]:border-destructive",
)} )}
> >
<TabTrigger <TabTrigger
selected={modelProvider === "openai"} selected={modelProvider === "openai"}
isLoading={isLoadingModels} isLoading={isLoadingModels}
> >
<div <div
className={cn( className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border", "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
modelProvider === "openai" ? "bg-white" : "bg-muted", modelProvider === "openai" ? "bg-white" : "bg-muted",
)} )}
> >
<OpenAILogo <OpenAILogo
className={cn( className={cn(
"w-4 h-4 shrink-0", "w-4 h-4 shrink-0",
modelProvider === "openai" modelProvider === "openai"
? "text-black" ? "text-black"
: "text-muted-foreground", : "text-muted-foreground",
)} )}
/> />
</div> </div>
OpenAI OpenAI
</TabTrigger> </TabTrigger>
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="watsonx" value="watsonx"
className={cn( className={cn(
error && error &&
modelProvider === "watsonx" && modelProvider === "watsonx" &&
"data-[state=active]:border-destructive", "data-[state=active]:border-destructive",
)} )}
> >
<TabTrigger <TabTrigger
selected={modelProvider === "watsonx"} selected={modelProvider === "watsonx"}
isLoading={isLoadingModels} isLoading={isLoadingModels}
> >
<div <div
className={cn( className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border", "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
modelProvider === "watsonx" modelProvider === "watsonx"
? "bg-[#1063FE]" ? "bg-[#1063FE]"
: "bg-muted", : "bg-muted",
)} )}
> >
<IBMLogo <IBMLogo
className={cn( className={cn(
"w-4 h-4 shrink-0", "w-4 h-4 shrink-0",
modelProvider === "watsonx" modelProvider === "watsonx"
? "text-white" ? "text-white"
: "text-muted-foreground", : "text-muted-foreground",
)} )}
/> />
</div> </div>
IBM watsonx.ai IBM watsonx.ai
</TabTrigger> </TabTrigger>
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="ollama" value="ollama"
className={cn( className={cn(
error && error &&
modelProvider === "ollama" && modelProvider === "ollama" &&
"data-[state=active]:border-destructive", "data-[state=active]:border-destructive",
)} )}
> >
<TabTrigger <TabTrigger
selected={modelProvider === "ollama"} selected={modelProvider === "ollama"}
isLoading={isLoadingModels} isLoading={isLoadingModels}
> >
<div <div
className={cn( className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border", "flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
modelProvider === "ollama" ? "bg-white" : "bg-muted", modelProvider === "ollama" ? "bg-white" : "bg-muted",
)} )}
> >
<OllamaLogo <OllamaLogo
className={cn( className={cn(
"w-4 h-4 shrink-0", "w-4 h-4 shrink-0",
modelProvider === "ollama" modelProvider === "ollama"
? "text-black" ? "text-black"
: "text-muted-foreground", : "text-muted-foreground",
)} )}
/> />
</div> </div>
Ollama Ollama
</TabTrigger> </TabTrigger>
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
{!isEmbedding && ( {!isEmbedding && (
<TabsContent value="anthropic"> <TabsContent value="anthropic">
<AnthropicOnboarding <AnthropicOnboarding
setSettings={setSettings} setSettings={setSettings}
sampleDataset={sampleDataset} sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset} setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels} setIsLoadingModels={setIsLoadingModels}
isEmbedding={isEmbedding} isEmbedding={isEmbedding}
hasEnvApiKey={ hasEnvApiKey={
currentSettings?.providers?.anthropic?.has_api_key === currentSettings?.providers?.anthropic?.has_api_key ===
true true
} }
/> />
</TabsContent> </TabsContent>
)} )}
<TabsContent value="openai"> <TabsContent value="openai">
<OpenAIOnboarding <OpenAIOnboarding
setSettings={setSettings} setSettings={setSettings}
sampleDataset={sampleDataset} sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset} setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels} setIsLoadingModels={setIsLoadingModels}
isEmbedding={isEmbedding} isEmbedding={isEmbedding}
hasEnvApiKey={ hasEnvApiKey={
currentSettings?.providers?.openai?.has_api_key === true currentSettings?.providers?.openai?.has_api_key === true
} }
alreadyConfigured={providerAlreadyConfigured} alreadyConfigured={providerAlreadyConfigured}
/> />
</TabsContent> </TabsContent>
<TabsContent value="watsonx"> <TabsContent value="watsonx">
<IBMOnboarding <IBMOnboarding
setSettings={setSettings} setSettings={setSettings}
sampleDataset={sampleDataset} sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset} setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels} setIsLoadingModels={setIsLoadingModels}
isEmbedding={isEmbedding} isEmbedding={isEmbedding}
alreadyConfigured={providerAlreadyConfigured} alreadyConfigured={providerAlreadyConfigured}
/> />
</TabsContent> </TabsContent>
<TabsContent value="ollama"> <TabsContent value="ollama">
<OllamaOnboarding <OllamaOnboarding
setSettings={setSettings} setSettings={setSettings}
sampleDataset={sampleDataset} sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset} setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels} setIsLoadingModels={setIsLoadingModels}
isEmbedding={isEmbedding} isEmbedding={isEmbedding}
alreadyConfigured={providerAlreadyConfigured} alreadyConfigured={providerAlreadyConfigured}
/> />
</TabsContent> </TabsContent>
</Tabs> </Tabs>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div> <div>
<Button <Button
size="sm" size="sm"
onClick={handleComplete} onClick={handleComplete}
disabled={!isComplete || isLoadingModels} disabled={!isComplete || isLoadingModels}
loading={onboardingMutation.isPending} loading={onboardingMutation.isPending}
> >
<span className="select-none">Complete</span> <span className="select-none">Complete</span>
</Button> </Button>
</div> </div>
</TooltipTrigger> </TooltipTrigger>
{!isComplete && ( {!isComplete && (
<TooltipContent> <TooltipContent>
{isLoadingModels {isLoadingModels
? "Loading models..." ? "Loading models..."
: !!settings.llm_model && : !!settings.llm_model &&
!!settings.embedding_model && !!settings.embedding_model &&
!isDoclingHealthy !isDoclingHealthy
? "docling-serve must be running to continue" ? "docling-serve must be running to continue"
: "Please fill in all required fields"} : "Please fill in all required fields"}
</TooltipContent> </TooltipContent>
)} )}
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
</motion.div> </motion.div>
) : ( ) : (
<motion.div <motion.div
key="provider-steps" key="provider-steps"
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 24 }} exit={{ opacity: 0, y: 24 }}
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
> >
<AnimatedProviderSteps <AnimatedProviderSteps
currentStep={currentStep} currentStep={currentStep}
isCompleted={isCompleted} isCompleted={isCompleted}
setCurrentStep={setCurrentStep} setCurrentStep={setCurrentStep}
steps={isEmbedding ? EMBEDDING_STEP_LIST : STEP_LIST} steps={isEmbedding ? EMBEDDING_STEP_LIST : STEP_LIST}
processingStartTime={processingStartTime} processingStartTime={processingStartTime}
hasError={!!error} storageKey={ONBOARDING_CARD_STEPS_KEY}
/> hasError={!!error}
</motion.div> />
)} </motion.div>
</AnimatePresence> )}
); </AnimatePresence>
);
}; };
export default OnboardingCard; export default OnboardingCard;

258
frontend/app/onboarding/_components/onboarding-upload.tsx
View file

@ -4,154 +4,156 @@ import { useGetNudgesQuery } from "@/app/api/queries/useGetNudgesQuery";
import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery"; import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
import { AnimatedProviderSteps } from "@/app/onboarding/_components/animated-provider-steps"; import { AnimatedProviderSteps } from "@/app/onboarding/_components/animated-provider-steps";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ONBOARDING_UPLOAD_STEPS_KEY } from "@/lib/constants";
import { uploadFile } from "@/lib/upload-utils"; import { uploadFile } from "@/lib/upload-utils";
interface OnboardingUploadProps { interface OnboardingUploadProps {
onComplete: () => void; onComplete: () => void;
} }
const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => { const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const [isUploading, setIsUploading] = useState(false); const [isUploading, setIsUploading] = useState(false);
const [currentStep, setCurrentStep] = useState<number | null>(null); const [currentStep, setCurrentStep] = useState<number | null>(null);
const STEP_LIST = [ const STEP_LIST = [
"Uploading your document", "Uploading your document",
"Generating embeddings", "Generating embeddings",
"Ingesting document", "Ingesting document",
"Processing your document", "Processing your document",
]; ];
// Query tasks to track completion // Query tasks to track completion
const { data: tasks } = useGetTasksQuery({ const { data: tasks } = useGetTasksQuery({
enabled: currentStep !== null, // Only poll when upload has started enabled: currentStep !== null, // Only poll when upload has started
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during upload refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during upload
}); });
const { refetch: refetchNudges } = useGetNudgesQuery(null); const { refetch: refetchNudges } = useGetNudgesQuery(null);
// Monitor tasks and call onComplete when file processing is done // Monitor tasks and call onComplete when file processing is done
useEffect(() => { useEffect(() => {
if (currentStep === null || !tasks) { if (currentStep === null || !tasks) {
return; return;
} }
// Check if there are any active tasks (pending, running, or processing) // Check if there are any active tasks (pending, running, or processing)
const activeTasks = tasks.find( const activeTasks = tasks.find(
(task) => (task) =>
task.status === "pending" || task.status === "pending" ||
task.status === "running" || task.status === "running" ||
task.status === "processing", task.status === "processing",
); );
// If no active tasks and we have more than 1 task (initial + new upload), complete it // If no active tasks and we have more than 1 task (initial + new upload), complete it
if ( if (
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) && (!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
tasks.length > 1 tasks.length > 1
) { ) {
// Set to final step to show "Done" // Set to final step to show "Done"
setCurrentStep(STEP_LIST.length); setCurrentStep(STEP_LIST.length);
// Refetch nudges to get new ones // Refetch nudges to get new ones
refetchNudges(); refetchNudges();
// Wait a bit before completing // Wait a bit before completing
setTimeout(() => { setTimeout(() => {
onComplete(); onComplete();
}, 1000); }, 1000);
} }
}, [tasks, currentStep, onComplete, refetchNudges]); }, [tasks, currentStep, onComplete, refetchNudges]);
const resetFileInput = () => { const resetFileInput = () => {
if (fileInputRef.current) { if (fileInputRef.current) {
fileInputRef.current.value = ""; fileInputRef.current.value = "";
} }
}; };
const handleUploadClick = () => { const handleUploadClick = () => {
fileInputRef.current?.click(); fileInputRef.current?.click();
}; };
const performUpload = async (file: File) => { const performUpload = async (file: File) => {
setIsUploading(true); setIsUploading(true);
try { try {
setCurrentStep(0); setCurrentStep(0);
await uploadFile(file, true); await uploadFile(file, true);
console.log("Document upload task started successfully"); console.log("Document upload task started successfully");
// Move to processing step - task monitoring will handle completion // Move to processing step - task monitoring will handle completion
setTimeout(() => { setTimeout(() => {
setCurrentStep(1); setCurrentStep(1);
}, 1500); }, 1500);
} catch (error) { } catch (error) {
console.error("Upload failed", (error as Error).message); console.error("Upload failed", (error as Error).message);
// Reset on error // Reset on error
setCurrentStep(null); setCurrentStep(null);
} finally { } finally {
setIsUploading(false); setIsUploading(false);
} }
}; };
const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
const selectedFile = event.target.files?.[0]; const selectedFile = event.target.files?.[0];
if (!selectedFile) { if (!selectedFile) {
resetFileInput(); resetFileInput();
return; return;
} }
try { try {
await performUpload(selectedFile); await performUpload(selectedFile);
} catch (error) { } catch (error) {
console.error( console.error(
"Unable to prepare file for upload", "Unable to prepare file for upload",
(error as Error).message, (error as Error).message,
); );
} finally { } finally {
resetFileInput(); resetFileInput();
} }
}; };
return ( return (
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{currentStep === null ? ( {currentStep === null ? (
<motion.div <motion.div
key="user-ingest" key="user-ingest"
initial={{ opacity: 1, y: 0 }} initial={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -24 }} exit={{ opacity: 0, y: -24 }}
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
> >
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
onClick={handleUploadClick} onClick={handleUploadClick}
disabled={isUploading} disabled={isUploading}
> >
<div>{isUploading ? "Uploading..." : "Add a document"}</div> <div>{isUploading ? "Uploading..." : "Add a document"}</div>
</Button> </Button>
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
onChange={handleFileChange} onChange={handleFileChange}
className="hidden" className="hidden"
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt" accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
/> />
</motion.div> </motion.div>
) : ( ) : (
<motion.div <motion.div
key="ingest-steps" key="ingest-steps"
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
> >
<AnimatedProviderSteps <AnimatedProviderSteps
currentStep={currentStep} currentStep={currentStep}
setCurrentStep={setCurrentStep} setCurrentStep={setCurrentStep}
isCompleted={false} isCompleted={false}
steps={STEP_LIST} steps={STEP_LIST}
/> storageKey={ONBOARDING_UPLOAD_STEPS_KEY}
</motion.div> />
)} </motion.div>
</AnimatePresence> )}
); </AnimatePresence>
);
}; };
export default OnboardingUpload; export default OnboardingUpload;

6
frontend/components/chat-renderer.tsx
View file

@ -19,8 +19,10 @@ import {
ANIMATION_DURATION, ANIMATION_DURATION,
HEADER_HEIGHT, HEADER_HEIGHT,
ONBOARDING_ASSISTANT_MESSAGE_KEY, ONBOARDING_ASSISTANT_MESSAGE_KEY,
ONBOARDING_CARD_STEPS_KEY,
ONBOARDING_SELECTED_NUDGE_KEY, ONBOARDING_SELECTED_NUDGE_KEY,
ONBOARDING_STEP_KEY, ONBOARDING_STEP_KEY,
ONBOARDING_UPLOAD_STEPS_KEY,
SIDEBAR_WIDTH, SIDEBAR_WIDTH,
TOTAL_ONBOARDING_STEPS, TOTAL_ONBOARDING_STEPS,
} from "@/lib/constants"; } from "@/lib/constants";
@ -85,6 +87,8 @@ export function ChatRenderer({
localStorage.removeItem(ONBOARDING_STEP_KEY); localStorage.removeItem(ONBOARDING_STEP_KEY);
localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY); localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY); localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
} }
setShowLayout(true); setShowLayout(true);
} }
@ -102,6 +106,8 @@ export function ChatRenderer({
localStorage.removeItem(ONBOARDING_STEP_KEY); localStorage.removeItem(ONBOARDING_STEP_KEY);
localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY); localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY); localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
} }
setShowLayout(true); setShowLayout(true);
}; };

2
frontend/lib/constants.ts
View file

@ -36,6 +36,8 @@ export const TOTAL_ONBOARDING_STEPS = 5;
export const ONBOARDING_STEP_KEY = "onboarding_current_step"; export const ONBOARDING_STEP_KEY = "onboarding_current_step";
export const ONBOARDING_ASSISTANT_MESSAGE_KEY = "onboarding_assistant_message"; export const ONBOARDING_ASSISTANT_MESSAGE_KEY = "onboarding_assistant_message";
export const ONBOARDING_SELECTED_NUDGE_KEY = "onboarding_selected_nudge"; export const ONBOARDING_SELECTED_NUDGE_KEY = "onboarding_selected_nudge";
export const ONBOARDING_CARD_STEPS_KEY = "onboarding_card_steps";
export const ONBOARDING_UPLOAD_STEPS_KEY = "onboarding_upload_steps";
export const FILES_REGEX = export const FILES_REGEX =
/(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/; /(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;