clean all items from local storage on finish onboarding
This commit is contained in:
Lucas Oliveira
parent
b7e364a240
commit
5d83a40f76
5 changed files with 799 additions and 786 deletions
|
|
@ -5,210 +5,211 @@ import { CheckIcon, XIcon } from "lucide-react";
|
|||
import { useEffect, useState } from "react";
|
||||
import AnimatedProcessingIcon from "@/components/icons/animated-processing-icon";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { ONBOARDING_CARD_STEPS_KEY } from "@/lib/constants";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function AnimatedProviderSteps({
|
||||
currentStep,
|
||||
isCompleted,
|
||||
setCurrentStep,
|
||||
steps,
|
||||
storageKey = "provider-steps",
|
||||
processingStartTime,
|
||||
hasError = false,
|
||||
currentStep,
|
||||
isCompleted,
|
||||
setCurrentStep,
|
||||
steps,
|
||||
storageKey = ONBOARDING_CARD_STEPS_KEY,
|
||||
processingStartTime,
|
||||
hasError = false,
|
||||
}: {
|
||||
currentStep: number;
|
||||
isCompleted: boolean;
|
||||
setCurrentStep: (step: number) => void;
|
||||
steps: string[];
|
||||
storageKey?: string;
|
||||
processingStartTime?: number | null;
|
||||
hasError?: boolean;
|
||||
currentStep: number;
|
||||
isCompleted: boolean;
|
||||
setCurrentStep: (step: number) => void;
|
||||
steps: string[];
|
||||
storageKey?: string;
|
||||
processingStartTime?: number | null;
|
||||
hasError?: boolean;
|
||||
}) {
|
||||
const [startTime, setStartTime] = useState<number | null>(null);
|
||||
const [elapsedTime, setElapsedTime] = useState<number>(0);
|
||||
const [startTime, setStartTime] = useState<number | null>(null);
|
||||
const [elapsedTime, setElapsedTime] = useState<number>(0);
|
||||
|
||||
// Initialize start time from prop or local storage
|
||||
useEffect(() => {
|
||||
const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
|
||||
// Initialize start time from prop or local storage
|
||||
useEffect(() => {
|
||||
const storedElapsedTime = localStorage.getItem(storageKey);
|
||||
|
||||
if (isCompleted && storedElapsedTime) {
|
||||
// If completed, use stored elapsed time
|
||||
setElapsedTime(parseFloat(storedElapsedTime));
|
||||
} else if (processingStartTime) {
|
||||
// Use the start time passed from parent (when user clicked Complete)
|
||||
setStartTime(processingStartTime);
|
||||
}
|
||||
}, [storageKey, isCompleted, processingStartTime]);
|
||||
if (isCompleted && storedElapsedTime) {
|
||||
// If completed, use stored elapsed time
|
||||
setElapsedTime(parseFloat(storedElapsedTime));
|
||||
} else if (processingStartTime) {
|
||||
// Use the start time passed from parent (when user clicked Complete)
|
||||
setStartTime(processingStartTime);
|
||||
}
|
||||
}, [storageKey, isCompleted, processingStartTime]);
|
||||
|
||||
// Progress through steps
|
||||
useEffect(() => {
|
||||
if (currentStep < steps.length - 1 && !isCompleted) {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}, 1500);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [currentStep, setCurrentStep, steps, isCompleted]);
|
||||
// Progress through steps
|
||||
useEffect(() => {
|
||||
if (currentStep < steps.length - 1 && !isCompleted) {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}, 1500);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [currentStep, setCurrentStep, steps, isCompleted]);
|
||||
|
||||
// Calculate and store elapsed time when completed
|
||||
useEffect(() => {
|
||||
if (isCompleted && startTime) {
|
||||
const elapsed = Date.now() - startTime;
|
||||
setElapsedTime(elapsed);
|
||||
localStorage.setItem(`${storageKey}-elapsed`, elapsed.toString());
|
||||
}
|
||||
}, [isCompleted, startTime, storageKey]);
|
||||
// Calculate and store elapsed time when completed
|
||||
useEffect(() => {
|
||||
if (isCompleted && startTime) {
|
||||
const elapsed = Date.now() - startTime;
|
||||
setElapsedTime(elapsed);
|
||||
localStorage.setItem(storageKey, elapsed.toString());
|
||||
}
|
||||
}, [isCompleted, startTime, storageKey]);
|
||||
|
||||
const isDone = currentStep >= steps.length && !isCompleted && !hasError;
|
||||
const isDone = currentStep >= steps.length && !isCompleted && !hasError;
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{!isCompleted ? (
|
||||
<motion.div
|
||||
key="processing"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex flex-col gap-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"transition-all duration-300 relative",
|
||||
isDone || hasError ? "w-3.5 h-3.5" : "w-6 h-6",
|
||||
)}
|
||||
>
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"text-accent-emerald-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
|
||||
isDone ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<XIcon
|
||||
className={cn(
|
||||
"text-accent-red-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
|
||||
hasError ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<AnimatedProcessingIcon
|
||||
className={cn(
|
||||
"text-current shrink-0 absolute inset-0 transition-all duration-150",
|
||||
isDone || hasError ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{!isCompleted ? (
|
||||
<motion.div
|
||||
key="processing"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex flex-col gap-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"transition-all duration-300 relative",
|
||||
isDone || hasError ? "w-3.5 h-3.5" : "w-6 h-6",
|
||||
)}
|
||||
>
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"text-accent-emerald-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
|
||||
isDone ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<XIcon
|
||||
className={cn(
|
||||
"text-accent-red-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
|
||||
hasError ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
<AnimatedProcessingIcon
|
||||
className={cn(
|
||||
"text-current shrink-0 absolute inset-0 transition-all duration-150",
|
||||
isDone || hasError ? "opacity-0" : "opacity-100",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="!text-mmd font-medium text-muted-foreground">
|
||||
{hasError ? "Error" : isDone ? "Done" : "Thinking"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<AnimatePresence>
|
||||
{!isDone && !hasError && (
|
||||
<motion.div
|
||||
initial={{ opacity: 1, y: 0, height: "auto" }}
|
||||
exit={{ opacity: 0, y: -24, height: 0 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
className="flex items-center gap-4 overflow-y-hidden relative h-6"
|
||||
>
|
||||
<div className="w-px h-6 bg-border ml-3" />
|
||||
<div className="relative h-5 w-full">
|
||||
<AnimatePresence mode="sync" initial={false}>
|
||||
<motion.span
|
||||
key={currentStep}
|
||||
initial={{ y: 24, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: -24, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="text-mmd font-medium text-primary absolute left-0"
|
||||
>
|
||||
{steps[currentStep]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="completed"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="steps" className="border-none">
|
||||
<AccordionTrigger className="hover:no-underline p-0 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-mmd font-medium text-muted-foreground">
|
||||
{`Initialized in ${(elapsedTime / 1000).toFixed(1)} seconds`}
|
||||
</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pl-0 pt-2 pb-0">
|
||||
<div className="relative pl-1">
|
||||
{/* Connecting line on the left */}
|
||||
<motion.div
|
||||
className="absolute left-[7px] top-0 bottom-0 w-px bg-border z-0"
|
||||
initial={{ scaleY: 0 }}
|
||||
animate={{ scaleY: 1 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
style={{ transformOrigin: "top" }}
|
||||
/>
|
||||
<span className="!text-mmd font-medium text-muted-foreground">
|
||||
{hasError ? "Error" : isDone ? "Done" : "Thinking"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<AnimatePresence>
|
||||
{!isDone && !hasError && (
|
||||
<motion.div
|
||||
initial={{ opacity: 1, y: 0, height: "auto" }}
|
||||
exit={{ opacity: 0, y: -24, height: 0 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
className="flex items-center gap-4 overflow-y-hidden relative h-6"
|
||||
>
|
||||
<div className="w-px h-6 bg-border ml-3" />
|
||||
<div className="relative h-5 w-full">
|
||||
<AnimatePresence mode="sync" initial={false}>
|
||||
<motion.span
|
||||
key={currentStep}
|
||||
initial={{ y: 24, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: -24, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="text-mmd font-medium text-primary absolute left-0"
|
||||
>
|
||||
{steps[currentStep]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="completed"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="steps" className="border-none">
|
||||
<AccordionTrigger className="hover:no-underline p-0 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-mmd font-medium text-muted-foreground">
|
||||
{`Initialized in ${(elapsedTime / 1000).toFixed(1)} seconds`}
|
||||
</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pl-0 pt-2 pb-0">
|
||||
<div className="relative pl-1">
|
||||
{/* Connecting line on the left */}
|
||||
<motion.div
|
||||
className="absolute left-[7px] top-0 bottom-0 w-px bg-border z-0"
|
||||
initial={{ scaleY: 0 }}
|
||||
animate={{ scaleY: 1 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
style={{ transformOrigin: "top" }}
|
||||
/>
|
||||
|
||||
<div className="space-y-3 ml-4">
|
||||
<AnimatePresence>
|
||||
{steps.map((step, index) => (
|
||||
<motion.div
|
||||
key={step}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
delay: index * 0.05,
|
||||
}}
|
||||
className="flex items-center gap-1.5"
|
||||
>
|
||||
<motion.div
|
||||
className="relative w-3.5 h-3.5 shrink-0 z-10 bg-background"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.2,
|
||||
delay: index * 0.05 + 0.1,
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
key="check"
|
||||
initial={{ scale: 0, rotate: -180 }}
|
||||
animate={{ scale: 1, rotate: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<CheckIcon className="text-accent-emerald-foreground w-3.5 h-3.5" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
<span className="text-mmd text-muted-foreground">
|
||||
{step}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
<div className="space-y-3 ml-4">
|
||||
<AnimatePresence>
|
||||
{steps.map((step, index) => (
|
||||
<motion.div
|
||||
key={step}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
delay: index * 0.05,
|
||||
}}
|
||||
className="flex items-center gap-1.5"
|
||||
>
|
||||
<motion.div
|
||||
className="relative w-3.5 h-3.5 shrink-0 z-10 bg-background"
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{
|
||||
duration: 0.2,
|
||||
delay: index * 0.05 + 0.1,
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
key="check"
|
||||
initial={{ scale: 0, rotate: -180 }}
|
||||
animate={{ scale: 1, rotate: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<CheckIcon className="text-accent-emerald-foreground w-3.5 h-3.5" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
<span className="text-mmd text-muted-foreground">
|
||||
{step}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import { Info, X } from "lucide-react";
|
|||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
type OnboardingVariables,
|
||||
useOnboardingMutation,
|
||||
type OnboardingVariables,
|
||||
useOnboardingMutation,
|
||||
} from "@/app/api/mutations/useOnboardingMutation";
|
||||
import { useGetSettingsQuery } from "@/app/api/queries/useGetSettingsQuery";
|
||||
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { ONBOARDING_CARD_STEPS_KEY } from "@/lib/constants";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AnimatedProviderSteps } from "./animated-provider-steps";
|
||||
import { AnthropicOnboarding } from "./anthropic-onboarding";
|
||||
|
|
@ -33,506 +34,507 @@ import { OpenAIOnboarding } from "./openai-onboarding";
|
|||
import { TabTrigger } from "./tab-trigger";
|
||||
|
||||
interface OnboardingCardProps {
|
||||
onComplete: () => void;
|
||||
isCompleted?: boolean;
|
||||
isEmbedding?: boolean;
|
||||
setIsLoadingModels?: (isLoading: boolean) => void;
|
||||
setLoadingStatus?: (status: string[]) => void;
|
||||
onComplete: () => void;
|
||||
isCompleted?: boolean;
|
||||
isEmbedding?: boolean;
|
||||
setIsLoadingModels?: (isLoading: boolean) => void;
|
||||
setLoadingStatus?: (status: string[]) => void;
|
||||
}
|
||||
|
||||
const STEP_LIST = [
|
||||
"Setting up your model provider",
|
||||
"Defining schema",
|
||||
"Configuring Langflow",
|
||||
"Setting up your model provider",
|
||||
"Defining schema",
|
||||
"Configuring Langflow",
|
||||
];
|
||||
|
||||
const EMBEDDING_STEP_LIST = [
|
||||
"Setting up your model provider",
|
||||
"Defining schema",
|
||||
"Configuring Langflow",
|
||||
"Ingesting sample data",
|
||||
"Setting up your model provider",
|
||||
"Defining schema",
|
||||
"Configuring Langflow",
|
||||
"Ingesting sample data",
|
||||
];
|
||||
|
||||
const OnboardingCard = ({
|
||||
onComplete,
|
||||
isEmbedding = false,
|
||||
isCompleted = false,
|
||||
onComplete,
|
||||
isEmbedding = false,
|
||||
isCompleted = false,
|
||||
}: OnboardingCardProps) => {
|
||||
const { isHealthy: isDoclingHealthy } = useDoclingHealth();
|
||||
const { isHealthy: isDoclingHealthy } = useDoclingHealth();
|
||||
|
||||
const [modelProvider, setModelProvider] = useState<string>(
|
||||
isEmbedding ? "openai" : "anthropic",
|
||||
);
|
||||
const [modelProvider, setModelProvider] = useState<string>(
|
||||
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
|
||||
const { data: currentSettings } = useGetSettingsQuery();
|
||||
// Fetch current settings to check if providers are already configured
|
||||
const { data: currentSettings } = useGetSettingsQuery();
|
||||
|
||||
const handleSetModelProvider = (provider: string) => {
|
||||
setIsLoadingModels(false);
|
||||
setModelProvider(provider);
|
||||
setSettings({
|
||||
[isEmbedding ? "embedding_provider" : "llm_provider"]: provider,
|
||||
embedding_model: "",
|
||||
llm_model: "",
|
||||
});
|
||||
setError(null);
|
||||
};
|
||||
const handleSetModelProvider = (provider: string) => {
|
||||
setIsLoadingModels(false);
|
||||
setModelProvider(provider);
|
||||
setSettings({
|
||||
[isEmbedding ? "embedding_provider" : "llm_provider"]: provider,
|
||||
embedding_model: "",
|
||||
llm_model: "",
|
||||
});
|
||||
setError(null);
|
||||
};
|
||||
|
||||
// Check if the selected provider is already configured
|
||||
const isProviderAlreadyConfigured = (provider: string): boolean => {
|
||||
if (!isEmbedding || !currentSettings?.providers) return false;
|
||||
// Check if the selected provider is already configured
|
||||
const isProviderAlreadyConfigured = (provider: string): boolean => {
|
||||
if (!isEmbedding || !currentSettings?.providers) return false;
|
||||
|
||||
// Check if provider has been explicitly configured (not just from env vars)
|
||||
if (provider === "openai") {
|
||||
return currentSettings.providers.openai?.configured === true;
|
||||
} else if (provider === "anthropic") {
|
||||
return currentSettings.providers.anthropic?.configured === true;
|
||||
} else if (provider === "watsonx") {
|
||||
return currentSettings.providers.watsonx?.configured === true;
|
||||
} else if (provider === "ollama") {
|
||||
return currentSettings.providers.ollama?.configured === true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
// Check if provider has been explicitly configured (not just from env vars)
|
||||
if (provider === "openai") {
|
||||
return currentSettings.providers.openai?.configured === true;
|
||||
} else if (provider === "anthropic") {
|
||||
return currentSettings.providers.anthropic?.configured === true;
|
||||
} else if (provider === "watsonx") {
|
||||
return currentSettings.providers.watsonx?.configured === true;
|
||||
} else if (provider === "ollama") {
|
||||
return currentSettings.providers.ollama?.configured === true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const showProviderConfiguredMessage =
|
||||
isProviderAlreadyConfigured(modelProvider);
|
||||
const providerAlreadyConfigured =
|
||||
isEmbedding && showProviderConfiguredMessage;
|
||||
const showProviderConfiguredMessage =
|
||||
isProviderAlreadyConfigured(modelProvider);
|
||||
const providerAlreadyConfigured =
|
||||
isEmbedding && showProviderConfiguredMessage;
|
||||
|
||||
const totalSteps = isEmbedding
|
||||
? EMBEDDING_STEP_LIST.length
|
||||
: STEP_LIST.length;
|
||||
const totalSteps = isEmbedding
|
||||
? EMBEDDING_STEP_LIST.length
|
||||
: STEP_LIST.length;
|
||||
|
||||
const [settings, setSettings] = useState<OnboardingVariables>({
|
||||
[isEmbedding ? "embedding_provider" : "llm_provider"]: modelProvider,
|
||||
embedding_model: "",
|
||||
llm_model: "",
|
||||
// Provider-specific fields will be set by provider components
|
||||
openai_api_key: "",
|
||||
anthropic_api_key: "",
|
||||
watsonx_api_key: "",
|
||||
watsonx_endpoint: "",
|
||||
watsonx_project_id: "",
|
||||
ollama_endpoint: "",
|
||||
});
|
||||
const [settings, setSettings] = useState<OnboardingVariables>({
|
||||
[isEmbedding ? "embedding_provider" : "llm_provider"]: modelProvider,
|
||||
embedding_model: "",
|
||||
llm_model: "",
|
||||
// Provider-specific fields will be set by provider components
|
||||
openai_api_key: "",
|
||||
anthropic_api_key: "",
|
||||
watsonx_api_key: "",
|
||||
watsonx_endpoint: "",
|
||||
watsonx_project_id: "",
|
||||
ollama_endpoint: "",
|
||||
});
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<number | null>(
|
||||
isCompleted ? totalSteps : null,
|
||||
);
|
||||
const [currentStep, setCurrentStep] = useState<number | null>(
|
||||
isCompleted ? totalSteps : null,
|
||||
);
|
||||
|
||||
const [processingStartTime, setProcessingStartTime] = useState<number | null>(
|
||||
null,
|
||||
);
|
||||
const [processingStartTime, setProcessingStartTime] = useState<number | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Query tasks to track completion
|
||||
const { data: tasks } = useGetTasksQuery({
|
||||
enabled: currentStep !== null, // Only poll when onboarding has started
|
||||
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during onboarding
|
||||
});
|
||||
// Query tasks to track completion
|
||||
const { data: tasks } = useGetTasksQuery({
|
||||
enabled: currentStep !== null, // Only poll when onboarding has started
|
||||
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during onboarding
|
||||
});
|
||||
|
||||
// Monitor tasks and call onComplete when all tasks are done
|
||||
useEffect(() => {
|
||||
if (currentStep === null || !tasks || !isEmbedding) {
|
||||
return;
|
||||
}
|
||||
// Monitor tasks and call onComplete when all tasks are done
|
||||
useEffect(() => {
|
||||
if (currentStep === null || !tasks || !isEmbedding) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if there are any active tasks (pending, running, or processing)
|
||||
const activeTasks = tasks.find(
|
||||
(task) =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing",
|
||||
);
|
||||
// Check if there are any active tasks (pending, running, or processing)
|
||||
const activeTasks = tasks.find(
|
||||
(task) =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing",
|
||||
);
|
||||
|
||||
// If no active tasks and we've started onboarding, complete it
|
||||
if (
|
||||
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
|
||||
tasks.length > 0 &&
|
||||
!isCompleted
|
||||
) {
|
||||
// Set to final step to show "Done"
|
||||
setCurrentStep(totalSteps);
|
||||
// Wait a bit before completing
|
||||
setTimeout(() => {
|
||||
onComplete();
|
||||
}, 1000);
|
||||
}
|
||||
}, [tasks, currentStep, onComplete, isCompleted, isEmbedding, totalSteps]);
|
||||
// If no active tasks and we've started onboarding, complete it
|
||||
if (
|
||||
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
|
||||
tasks.length > 0 &&
|
||||
!isCompleted
|
||||
) {
|
||||
// Set to final step to show "Done"
|
||||
setCurrentStep(totalSteps);
|
||||
// Wait a bit before completing
|
||||
setTimeout(() => {
|
||||
onComplete();
|
||||
}, 1000);
|
||||
}
|
||||
}, [tasks, currentStep, onComplete, isCompleted, isEmbedding, totalSteps]);
|
||||
|
||||
// Mutations
|
||||
const onboardingMutation = useOnboardingMutation({
|
||||
onSuccess: (data) => {
|
||||
console.log("Onboarding completed successfully", data);
|
||||
// Update provider health cache to healthy since backend just validated
|
||||
const provider =
|
||||
(isEmbedding ? settings.embedding_provider : settings.llm_provider) ||
|
||||
modelProvider;
|
||||
const healthData: ProviderHealthResponse = {
|
||||
status: "healthy",
|
||||
message: "Provider is configured and working correctly",
|
||||
provider: provider,
|
||||
};
|
||||
queryClient.setQueryData(["provider", "health"], healthData);
|
||||
setError(null);
|
||||
if (!isEmbedding) {
|
||||
setCurrentStep(totalSteps);
|
||||
setTimeout(() => {
|
||||
onComplete();
|
||||
}, 1000);
|
||||
} else {
|
||||
setCurrentStep(0);
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
setError(error.message);
|
||||
setCurrentStep(totalSteps);
|
||||
// Reset to provider selection after 1 second
|
||||
setTimeout(() => {
|
||||
setCurrentStep(null);
|
||||
}, 1000);
|
||||
},
|
||||
});
|
||||
// Mutations
|
||||
const onboardingMutation = useOnboardingMutation({
|
||||
onSuccess: (data) => {
|
||||
console.log("Onboarding completed successfully", data);
|
||||
// Update provider health cache to healthy since backend just validated
|
||||
const provider =
|
||||
(isEmbedding ? settings.embedding_provider : settings.llm_provider) ||
|
||||
modelProvider;
|
||||
const healthData: ProviderHealthResponse = {
|
||||
status: "healthy",
|
||||
message: "Provider is configured and working correctly",
|
||||
provider: provider,
|
||||
};
|
||||
queryClient.setQueryData(["provider", "health"], healthData);
|
||||
setError(null);
|
||||
if (!isEmbedding) {
|
||||
setCurrentStep(totalSteps);
|
||||
setTimeout(() => {
|
||||
onComplete();
|
||||
}, 1000);
|
||||
} else {
|
||||
setCurrentStep(0);
|
||||
}
|
||||
},
|
||||
onError: (error) => {
|
||||
setError(error.message);
|
||||
setCurrentStep(totalSteps);
|
||||
// Reset to provider selection after 1 second
|
||||
setTimeout(() => {
|
||||
setCurrentStep(null);
|
||||
}, 1000);
|
||||
},
|
||||
});
|
||||
|
||||
const handleComplete = () => {
|
||||
const currentProvider = isEmbedding
|
||||
? settings.embedding_provider
|
||||
: settings.llm_provider;
|
||||
const handleComplete = () => {
|
||||
const currentProvider = isEmbedding
|
||||
? settings.embedding_provider
|
||||
: settings.llm_provider;
|
||||
|
||||
if (
|
||||
!currentProvider ||
|
||||
(isEmbedding &&
|
||||
!settings.embedding_model &&
|
||||
!showProviderConfiguredMessage) ||
|
||||
(!isEmbedding && !settings.llm_model)
|
||||
) {
|
||||
toast.error("Please complete all required fields");
|
||||
return;
|
||||
}
|
||||
if (
|
||||
!currentProvider ||
|
||||
(isEmbedding &&
|
||||
!settings.embedding_model &&
|
||||
!showProviderConfiguredMessage) ||
|
||||
(!isEmbedding && !settings.llm_model)
|
||||
) {
|
||||
toast.error("Please complete all required fields");
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear any previous error
|
||||
setError(null);
|
||||
// Clear any previous error
|
||||
setError(null);
|
||||
|
||||
// Prepare onboarding data with provider-specific fields
|
||||
const onboardingData: OnboardingVariables = {
|
||||
sample_data: sampleDataset,
|
||||
};
|
||||
// Prepare onboarding data with provider-specific fields
|
||||
const onboardingData: OnboardingVariables = {
|
||||
sample_data: sampleDataset,
|
||||
};
|
||||
|
||||
// Set the provider field
|
||||
if (isEmbedding) {
|
||||
onboardingData.embedding_provider = currentProvider;
|
||||
// If provider is already configured, use the existing embedding model from settings
|
||||
// Otherwise, use the embedding model from the form
|
||||
if (
|
||||
showProviderConfiguredMessage &&
|
||||
currentSettings?.knowledge?.embedding_model
|
||||
) {
|
||||
onboardingData.embedding_model =
|
||||
currentSettings.knowledge.embedding_model;
|
||||
} else {
|
||||
onboardingData.embedding_model = settings.embedding_model;
|
||||
}
|
||||
} else {
|
||||
onboardingData.llm_provider = currentProvider;
|
||||
onboardingData.llm_model = settings.llm_model;
|
||||
}
|
||||
// Set the provider field
|
||||
if (isEmbedding) {
|
||||
onboardingData.embedding_provider = currentProvider;
|
||||
// If provider is already configured, use the existing embedding model from settings
|
||||
// Otherwise, use the embedding model from the form
|
||||
if (
|
||||
showProviderConfiguredMessage &&
|
||||
currentSettings?.knowledge?.embedding_model
|
||||
) {
|
||||
onboardingData.embedding_model =
|
||||
currentSettings.knowledge.embedding_model;
|
||||
} else {
|
||||
onboardingData.embedding_model = settings.embedding_model;
|
||||
}
|
||||
} else {
|
||||
onboardingData.llm_provider = currentProvider;
|
||||
onboardingData.llm_model = settings.llm_model;
|
||||
}
|
||||
|
||||
// Add provider-specific credentials based on the selected provider
|
||||
if (currentProvider === "openai" && settings.openai_api_key) {
|
||||
onboardingData.openai_api_key = settings.openai_api_key;
|
||||
} else if (currentProvider === "anthropic" && settings.anthropic_api_key) {
|
||||
onboardingData.anthropic_api_key = settings.anthropic_api_key;
|
||||
} else if (currentProvider === "watsonx") {
|
||||
if (settings.watsonx_api_key) {
|
||||
onboardingData.watsonx_api_key = settings.watsonx_api_key;
|
||||
}
|
||||
if (settings.watsonx_endpoint) {
|
||||
onboardingData.watsonx_endpoint = settings.watsonx_endpoint;
|
||||
}
|
||||
if (settings.watsonx_project_id) {
|
||||
onboardingData.watsonx_project_id = settings.watsonx_project_id;
|
||||
}
|
||||
} else if (currentProvider === "ollama" && settings.ollama_endpoint) {
|
||||
onboardingData.ollama_endpoint = settings.ollama_endpoint;
|
||||
}
|
||||
// Add provider-specific credentials based on the selected provider
|
||||
if (currentProvider === "openai" && settings.openai_api_key) {
|
||||
onboardingData.openai_api_key = settings.openai_api_key;
|
||||
} else if (currentProvider === "anthropic" && settings.anthropic_api_key) {
|
||||
onboardingData.anthropic_api_key = settings.anthropic_api_key;
|
||||
} else if (currentProvider === "watsonx") {
|
||||
if (settings.watsonx_api_key) {
|
||||
onboardingData.watsonx_api_key = settings.watsonx_api_key;
|
||||
}
|
||||
if (settings.watsonx_endpoint) {
|
||||
onboardingData.watsonx_endpoint = settings.watsonx_endpoint;
|
||||
}
|
||||
if (settings.watsonx_project_id) {
|
||||
onboardingData.watsonx_project_id = settings.watsonx_project_id;
|
||||
}
|
||||
} else if (currentProvider === "ollama" && settings.ollama_endpoint) {
|
||||
onboardingData.ollama_endpoint = settings.ollama_endpoint;
|
||||
}
|
||||
|
||||
// Record the start time when user clicks Complete
|
||||
setProcessingStartTime(Date.now());
|
||||
onboardingMutation.mutate(onboardingData);
|
||||
setCurrentStep(0);
|
||||
};
|
||||
// Record the start time when user clicks Complete
|
||||
setProcessingStartTime(Date.now());
|
||||
onboardingMutation.mutate(onboardingData);
|
||||
setCurrentStep(0);
|
||||
};
|
||||
|
||||
const isComplete =
|
||||
(isEmbedding &&
|
||||
(!!settings.embedding_model || showProviderConfiguredMessage)) ||
|
||||
(!isEmbedding && !!settings.llm_model && isDoclingHealthy);
|
||||
const isComplete =
|
||||
(isEmbedding &&
|
||||
(!!settings.embedding_model || showProviderConfiguredMessage)) ||
|
||||
(!isEmbedding && !!settings.llm_model && isDoclingHealthy);
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{currentStep === null ? (
|
||||
<motion.div
|
||||
key="onboarding-form"
|
||||
initial={{ opacity: 0, y: -24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 24 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<div className={`w-full max-w-[600px] flex flex-col`}>
|
||||
<AnimatePresence mode="wait">
|
||||
{error && (
|
||||
<motion.div
|
||||
key="error"
|
||||
initial={{ opacity: 1, y: 0, height: "auto" }}
|
||||
exit={{ opacity: 0, y: -10, height: 0 }}
|
||||
>
|
||||
<div className="pb-6 flex items-center gap-4">
|
||||
<X className="w-4 h-4 text-destructive shrink-0" />
|
||||
<span className="text-mmd text-muted-foreground">
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div className={`w-full flex flex-col gap-6`}>
|
||||
<Tabs
|
||||
defaultValue={modelProvider}
|
||||
onValueChange={handleSetModelProvider}
|
||||
>
|
||||
<TabsList className="mb-4">
|
||||
{!isEmbedding && (
|
||||
<TabsTrigger
|
||||
value="anthropic"
|
||||
className={cn(
|
||||
error &&
|
||||
modelProvider === "anthropic" &&
|
||||
"data-[state=active]:border-destructive",
|
||||
)}
|
||||
>
|
||||
<TabTrigger
|
||||
selected={modelProvider === "anthropic"}
|
||||
isLoading={isLoadingModels}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
|
||||
modelProvider === "anthropic"
|
||||
? "bg-[#D97757]"
|
||||
: "bg-muted",
|
||||
)}
|
||||
>
|
||||
<AnthropicLogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "anthropic"
|
||||
? "text-black"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
Anthropic
|
||||
</TabTrigger>
|
||||
</TabsTrigger>
|
||||
)}
|
||||
<TabsTrigger
|
||||
value="openai"
|
||||
className={cn(
|
||||
error &&
|
||||
modelProvider === "openai" &&
|
||||
"data-[state=active]:border-destructive",
|
||||
)}
|
||||
>
|
||||
<TabTrigger
|
||||
selected={modelProvider === "openai"}
|
||||
isLoading={isLoadingModels}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
|
||||
modelProvider === "openai" ? "bg-white" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
<OpenAILogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "openai"
|
||||
? "text-black"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
OpenAI
|
||||
</TabTrigger>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="watsonx"
|
||||
className={cn(
|
||||
error &&
|
||||
modelProvider === "watsonx" &&
|
||||
"data-[state=active]:border-destructive",
|
||||
)}
|
||||
>
|
||||
<TabTrigger
|
||||
selected={modelProvider === "watsonx"}
|
||||
isLoading={isLoadingModels}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
|
||||
modelProvider === "watsonx"
|
||||
? "bg-[#1063FE]"
|
||||
: "bg-muted",
|
||||
)}
|
||||
>
|
||||
<IBMLogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "watsonx"
|
||||
? "text-white"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
IBM watsonx.ai
|
||||
</TabTrigger>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="ollama"
|
||||
className={cn(
|
||||
error &&
|
||||
modelProvider === "ollama" &&
|
||||
"data-[state=active]:border-destructive",
|
||||
)}
|
||||
>
|
||||
<TabTrigger
|
||||
selected={modelProvider === "ollama"}
|
||||
isLoading={isLoadingModels}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
|
||||
modelProvider === "ollama" ? "bg-white" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
<OllamaLogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "ollama"
|
||||
? "text-black"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
Ollama
|
||||
</TabTrigger>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
{!isEmbedding && (
|
||||
<TabsContent value="anthropic">
|
||||
<AnthropicOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
isEmbedding={isEmbedding}
|
||||
hasEnvApiKey={
|
||||
currentSettings?.providers?.anthropic?.has_api_key ===
|
||||
true
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
)}
|
||||
<TabsContent value="openai">
|
||||
<OpenAIOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
isEmbedding={isEmbedding}
|
||||
hasEnvApiKey={
|
||||
currentSettings?.providers?.openai?.has_api_key === true
|
||||
}
|
||||
alreadyConfigured={providerAlreadyConfigured}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="watsonx">
|
||||
<IBMOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
isEmbedding={isEmbedding}
|
||||
alreadyConfigured={providerAlreadyConfigured}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="ollama">
|
||||
<OllamaOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
isEmbedding={isEmbedding}
|
||||
alreadyConfigured={providerAlreadyConfigured}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{currentStep === null ? (
|
||||
<motion.div
|
||||
key="onboarding-form"
|
||||
initial={{ opacity: 0, y: -24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 24 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<div className={`w-full max-w-[600px] flex flex-col`}>
|
||||
<AnimatePresence mode="wait">
|
||||
{error && (
|
||||
<motion.div
|
||||
key="error"
|
||||
initial={{ opacity: 1, y: 0, height: "auto" }}
|
||||
exit={{ opacity: 0, y: -10, height: 0 }}
|
||||
>
|
||||
<div className="pb-6 flex items-center gap-4">
|
||||
<X className="w-4 h-4 text-destructive shrink-0" />
|
||||
<span className="text-mmd text-muted-foreground">
|
||||
{error}
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div className={`w-full flex flex-col gap-6`}>
|
||||
<Tabs
|
||||
defaultValue={modelProvider}
|
||||
onValueChange={handleSetModelProvider}
|
||||
>
|
||||
<TabsList className="mb-4">
|
||||
{!isEmbedding && (
|
||||
<TabsTrigger
|
||||
value="anthropic"
|
||||
className={cn(
|
||||
error &&
|
||||
modelProvider === "anthropic" &&
|
||||
"data-[state=active]:border-destructive",
|
||||
)}
|
||||
>
|
||||
<TabTrigger
|
||||
selected={modelProvider === "anthropic"}
|
||||
isLoading={isLoadingModels}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
|
||||
modelProvider === "anthropic"
|
||||
? "bg-[#D97757]"
|
||||
: "bg-muted",
|
||||
)}
|
||||
>
|
||||
<AnthropicLogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "anthropic"
|
||||
? "text-black"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
Anthropic
|
||||
</TabTrigger>
|
||||
</TabsTrigger>
|
||||
)}
|
||||
<TabsTrigger
|
||||
value="openai"
|
||||
className={cn(
|
||||
error &&
|
||||
modelProvider === "openai" &&
|
||||
"data-[state=active]:border-destructive",
|
||||
)}
|
||||
>
|
||||
<TabTrigger
|
||||
selected={modelProvider === "openai"}
|
||||
isLoading={isLoadingModels}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
|
||||
modelProvider === "openai" ? "bg-white" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
<OpenAILogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "openai"
|
||||
? "text-black"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
OpenAI
|
||||
</TabTrigger>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="watsonx"
|
||||
className={cn(
|
||||
error &&
|
||||
modelProvider === "watsonx" &&
|
||||
"data-[state=active]:border-destructive",
|
||||
)}
|
||||
>
|
||||
<TabTrigger
|
||||
selected={modelProvider === "watsonx"}
|
||||
isLoading={isLoadingModels}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
|
||||
modelProvider === "watsonx"
|
||||
? "bg-[#1063FE]"
|
||||
: "bg-muted",
|
||||
)}
|
||||
>
|
||||
<IBMLogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "watsonx"
|
||||
? "text-white"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
IBM watsonx.ai
|
||||
</TabTrigger>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="ollama"
|
||||
className={cn(
|
||||
error &&
|
||||
modelProvider === "ollama" &&
|
||||
"data-[state=active]:border-destructive",
|
||||
)}
|
||||
>
|
||||
<TabTrigger
|
||||
selected={modelProvider === "ollama"}
|
||||
isLoading={isLoadingModels}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md border",
|
||||
modelProvider === "ollama" ? "bg-white" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
<OllamaLogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "ollama"
|
||||
? "text-black"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
Ollama
|
||||
</TabTrigger>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
{!isEmbedding && (
|
||||
<TabsContent value="anthropic">
|
||||
<AnthropicOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
isEmbedding={isEmbedding}
|
||||
hasEnvApiKey={
|
||||
currentSettings?.providers?.anthropic?.has_api_key ===
|
||||
true
|
||||
}
|
||||
/>
|
||||
</TabsContent>
|
||||
)}
|
||||
<TabsContent value="openai">
|
||||
<OpenAIOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
isEmbedding={isEmbedding}
|
||||
hasEnvApiKey={
|
||||
currentSettings?.providers?.openai?.has_api_key === true
|
||||
}
|
||||
alreadyConfigured={providerAlreadyConfigured}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="watsonx">
|
||||
<IBMOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
isEmbedding={isEmbedding}
|
||||
alreadyConfigured={providerAlreadyConfigured}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="ollama">
|
||||
<OllamaOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
isEmbedding={isEmbedding}
|
||||
alreadyConfigured={providerAlreadyConfigured}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleComplete}
|
||||
disabled={!isComplete || isLoadingModels}
|
||||
loading={onboardingMutation.isPending}
|
||||
>
|
||||
<span className="select-none">Complete</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
{!isComplete && (
|
||||
<TooltipContent>
|
||||
{isLoadingModels
|
||||
? "Loading models..."
|
||||
: !!settings.llm_model &&
|
||||
!!settings.embedding_model &&
|
||||
!isDoclingHealthy
|
||||
? "docling-serve must be running to continue"
|
||||
: "Please fill in all required fields"}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="provider-steps"
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 24 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<AnimatedProviderSteps
|
||||
currentStep={currentStep}
|
||||
isCompleted={isCompleted}
|
||||
setCurrentStep={setCurrentStep}
|
||||
steps={isEmbedding ? EMBEDDING_STEP_LIST : STEP_LIST}
|
||||
processingStartTime={processingStartTime}
|
||||
hasError={!!error}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleComplete}
|
||||
disabled={!isComplete || isLoadingModels}
|
||||
loading={onboardingMutation.isPending}
|
||||
>
|
||||
<span className="select-none">Complete</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
{!isComplete && (
|
||||
<TooltipContent>
|
||||
{isLoadingModels
|
||||
? "Loading models..."
|
||||
: !!settings.llm_model &&
|
||||
!!settings.embedding_model &&
|
||||
!isDoclingHealthy
|
||||
? "docling-serve must be running to continue"
|
||||
: "Please fill in all required fields"}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="provider-steps"
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 24 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<AnimatedProviderSteps
|
||||
currentStep={currentStep}
|
||||
isCompleted={isCompleted}
|
||||
setCurrentStep={setCurrentStep}
|
||||
steps={isEmbedding ? EMBEDDING_STEP_LIST : STEP_LIST}
|
||||
processingStartTime={processingStartTime}
|
||||
storageKey={ONBOARDING_CARD_STEPS_KEY}
|
||||
hasError={!!error}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingCard;
|
||||
|
|
|
|||
|
|
@ -4,154 +4,156 @@ import { useGetNudgesQuery } from "@/app/api/queries/useGetNudgesQuery";
|
|||
import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
|
||||
import { AnimatedProviderSteps } from "@/app/onboarding/_components/animated-provider-steps";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ONBOARDING_UPLOAD_STEPS_KEY } from "@/lib/constants";
|
||||
import { uploadFile } from "@/lib/upload-utils";
|
||||
|
||||
interface OnboardingUploadProps {
|
||||
onComplete: () => void;
|
||||
onComplete: () => void;
|
||||
}
|
||||
|
||||
const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState<number | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState<number | null>(null);
|
||||
|
||||
const STEP_LIST = [
|
||||
"Uploading your document",
|
||||
"Generating embeddings",
|
||||
"Ingesting document",
|
||||
"Processing your document",
|
||||
];
|
||||
const STEP_LIST = [
|
||||
"Uploading your document",
|
||||
"Generating embeddings",
|
||||
"Ingesting document",
|
||||
"Processing your document",
|
||||
];
|
||||
|
||||
// Query tasks to track completion
|
||||
const { data: tasks } = useGetTasksQuery({
|
||||
enabled: currentStep !== null, // Only poll when upload has started
|
||||
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during upload
|
||||
});
|
||||
// Query tasks to track completion
|
||||
const { data: tasks } = useGetTasksQuery({
|
||||
enabled: currentStep !== null, // Only poll when upload has started
|
||||
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
|
||||
useEffect(() => {
|
||||
if (currentStep === null || !tasks) {
|
||||
return;
|
||||
}
|
||||
// Monitor tasks and call onComplete when file processing is done
|
||||
useEffect(() => {
|
||||
if (currentStep === null || !tasks) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if there are any active tasks (pending, running, or processing)
|
||||
const activeTasks = tasks.find(
|
||||
(task) =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing",
|
||||
);
|
||||
// Check if there are any active tasks (pending, running, or processing)
|
||||
const activeTasks = tasks.find(
|
||||
(task) =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing",
|
||||
);
|
||||
|
||||
// If no active tasks and we have more than 1 task (initial + new upload), complete it
|
||||
if (
|
||||
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
|
||||
tasks.length > 1
|
||||
) {
|
||||
// Set to final step to show "Done"
|
||||
setCurrentStep(STEP_LIST.length);
|
||||
// If no active tasks and we have more than 1 task (initial + new upload), complete it
|
||||
if (
|
||||
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
|
||||
tasks.length > 1
|
||||
) {
|
||||
// Set to final step to show "Done"
|
||||
setCurrentStep(STEP_LIST.length);
|
||||
|
||||
// Refetch nudges to get new ones
|
||||
refetchNudges();
|
||||
// Refetch nudges to get new ones
|
||||
refetchNudges();
|
||||
|
||||
// Wait a bit before completing
|
||||
setTimeout(() => {
|
||||
onComplete();
|
||||
}, 1000);
|
||||
}
|
||||
}, [tasks, currentStep, onComplete, refetchNudges]);
|
||||
// Wait a bit before completing
|
||||
setTimeout(() => {
|
||||
onComplete();
|
||||
}, 1000);
|
||||
}
|
||||
}, [tasks, currentStep, onComplete, refetchNudges]);
|
||||
|
||||
const resetFileInput = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
const resetFileInput = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
const handleUploadClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const performUpload = async (file: File) => {
|
||||
setIsUploading(true);
|
||||
try {
|
||||
setCurrentStep(0);
|
||||
await uploadFile(file, true);
|
||||
console.log("Document upload task started successfully");
|
||||
// Move to processing step - task monitoring will handle completion
|
||||
setTimeout(() => {
|
||||
setCurrentStep(1);
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.error("Upload failed", (error as Error).message);
|
||||
// Reset on error
|
||||
setCurrentStep(null);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
const performUpload = async (file: File) => {
|
||||
setIsUploading(true);
|
||||
try {
|
||||
setCurrentStep(0);
|
||||
await uploadFile(file, true);
|
||||
console.log("Document upload task started successfully");
|
||||
// Move to processing step - task monitoring will handle completion
|
||||
setTimeout(() => {
|
||||
setCurrentStep(1);
|
||||
}, 1500);
|
||||
} catch (error) {
|
||||
console.error("Upload failed", (error as Error).message);
|
||||
// Reset on error
|
||||
setCurrentStep(null);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = event.target.files?.[0];
|
||||
if (!selectedFile) {
|
||||
resetFileInput();
|
||||
return;
|
||||
}
|
||||
const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = event.target.files?.[0];
|
||||
if (!selectedFile) {
|
||||
resetFileInput();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await performUpload(selectedFile);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Unable to prepare file for upload",
|
||||
(error as Error).message,
|
||||
);
|
||||
} finally {
|
||||
resetFileInput();
|
||||
}
|
||||
};
|
||||
try {
|
||||
await performUpload(selectedFile);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Unable to prepare file for upload",
|
||||
(error as Error).message,
|
||||
);
|
||||
} finally {
|
||||
resetFileInput();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{currentStep === null ? (
|
||||
<motion.div
|
||||
key="user-ingest"
|
||||
initial={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -24 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleUploadClick}
|
||||
disabled={isUploading}
|
||||
>
|
||||
<div>{isUploading ? "Uploading..." : "Add a document"}</div>
|
||||
</Button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="ingest-steps"
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<AnimatedProviderSteps
|
||||
currentStep={currentStep}
|
||||
setCurrentStep={setCurrentStep}
|
||||
isCompleted={false}
|
||||
steps={STEP_LIST}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{currentStep === null ? (
|
||||
<motion.div
|
||||
key="user-ingest"
|
||||
initial={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -24 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleUploadClick}
|
||||
disabled={isUploading}
|
||||
>
|
||||
<div>{isUploading ? "Uploading..." : "Add a document"}</div>
|
||||
</Button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="ingest-steps"
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<AnimatedProviderSteps
|
||||
currentStep={currentStep}
|
||||
setCurrentStep={setCurrentStep}
|
||||
isCompleted={false}
|
||||
steps={STEP_LIST}
|
||||
storageKey={ONBOARDING_UPLOAD_STEPS_KEY}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingUpload;
|
||||
|
|
|
|||
|
|
@ -19,8 +19,10 @@ import {
|
|||
ANIMATION_DURATION,
|
||||
HEADER_HEIGHT,
|
||||
ONBOARDING_ASSISTANT_MESSAGE_KEY,
|
||||
ONBOARDING_CARD_STEPS_KEY,
|
||||
ONBOARDING_SELECTED_NUDGE_KEY,
|
||||
ONBOARDING_STEP_KEY,
|
||||
ONBOARDING_UPLOAD_STEPS_KEY,
|
||||
SIDEBAR_WIDTH,
|
||||
TOTAL_ONBOARDING_STEPS,
|
||||
} from "@/lib/constants";
|
||||
|
|
@ -85,6 +87,8 @@ export function ChatRenderer({
|
|||
localStorage.removeItem(ONBOARDING_STEP_KEY);
|
||||
localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
|
||||
localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
|
||||
localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
|
||||
localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
|
||||
}
|
||||
setShowLayout(true);
|
||||
}
|
||||
|
|
@ -102,6 +106,8 @@ export function ChatRenderer({
|
|||
localStorage.removeItem(ONBOARDING_STEP_KEY);
|
||||
localStorage.removeItem(ONBOARDING_ASSISTANT_MESSAGE_KEY);
|
||||
localStorage.removeItem(ONBOARDING_SELECTED_NUDGE_KEY);
|
||||
localStorage.removeItem(ONBOARDING_CARD_STEPS_KEY);
|
||||
localStorage.removeItem(ONBOARDING_UPLOAD_STEPS_KEY);
|
||||
}
|
||||
setShowLayout(true);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ export const TOTAL_ONBOARDING_STEPS = 5;
|
|||
export const ONBOARDING_STEP_KEY = "onboarding_current_step";
|
||||
export const ONBOARDING_ASSISTANT_MESSAGE_KEY = "onboarding_assistant_message";
|
||||
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 =
|
||||
/(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue