Merge branch 'main' into docs-perf-test

This commit is contained in:
Mendon Kissling 2025-10-28 09:29:57 -04:00
commit ea7c7954e2
24 changed files with 900 additions and 815 deletions

View file

@ -594,8 +594,8 @@ export function Navigation({
No documents yet
</div>
) : (
newConversationFiles?.map((file) => (
<div key={`${file}`} className="flex-1 min-w-0 px-3">
newConversationFiles?.map((file, index) => (
<div key={`${file}-${index}`} className="flex-1 min-w-0 px-3">
<div className="text-mmd font-medium text-foreground truncate">
{file}
</div>

View file

@ -1,7 +1,7 @@
"use client";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";
import { ChevronRight } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
@ -28,12 +28,12 @@ const AccordionTrigger = React.forwardRef<
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-180",
"flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-90",
className,
)}
{...props}
>
<ChevronDown className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
<ChevronRight className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
{children}
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>

View file

@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
import { Message } from "./message";
interface UserMessageProps {
content: string;
content: string | undefined;
isCompleted?: boolean;
animate?: boolean;
files?: string;

View file

@ -9,7 +9,7 @@ import { type EndpointType, useChat } from "@/contexts/chat-context";
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
import { useTask } from "@/contexts/task-context";
import { useChatStreaming } from "@/hooks/useChatStreaming";
import { FILES_REGEX } from "@/lib/constants";
import { FILE_CONFIRMATION, FILES_REGEX } from "@/lib/constants";
import { useLoadingStore } from "@/stores/loadingStore";
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
import { AssistantMessage } from "./components/assistant-message";
@ -911,9 +911,9 @@ function ChatPage() {
}
// Only send message if there's input text
if (input.trim()) {
if (input.trim() || uploadedFile) {
// Pass the responseId from upload (if any) to handleSendMessage
handleSendMessage(input, uploadedResponseId || undefined);
handleSendMessage(!input.trim() ? FILE_CONFIRMATION : input, uploadedResponseId || undefined);
}
};
@ -1154,6 +1154,8 @@ function ChatPage() {
}
};
console.log(messages)
return (
<>
{/* Debug header - only show in debug mode */}
@ -1236,7 +1238,10 @@ function ChatPage() {
? message.source !== "langflow"
: false
}
content={message.content}
content={index >= 2
&& (messages[index - 2]?.content.match(
FILES_REGEX,
)?.[0] ?? undefined) && message.content === FILE_CONFIRMATION ? undefined : message.content}
files={
index >= 2
? messages[index - 2]?.content.match(

View file

@ -24,9 +24,6 @@ export function OnboardingContent({
const [assistantMessage, setAssistantMessage] = useState<Message | null>(
null,
);
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
const [hasStartedOnboarding, setHasStartedOnboarding] = useState<boolean>(false);
const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
onComplete: (message, newResponseId) => {
@ -81,18 +78,14 @@ export function OnboardingContent({
<OnboardingStep
isVisible={currentStep >= 0}
isCompleted={currentStep > 0}
showCompleted={true}
text="Let's get started by setting up your model provider."
isLoadingModels={isLoadingModels}
loadingStatus={loadingStatus}
reserveSpaceForThinking={!hasStartedOnboarding}
>
<OnboardingCard
onComplete={() => {
setHasStartedOnboarding(true);
handleStepComplete();
}}
setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus}
isCompleted={currentStep > 0}
/>
</OnboardingStep>

View file

@ -2,7 +2,6 @@ import { AnimatePresence, motion } from "motion/react";
import { type ReactNode, useEffect, useState } from "react";
import { Message } from "@/app/chat/components/message";
import DogIcon from "@/components/logo/dog-icon";
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
import { MarkdownRenderer } from "@/components/markdown-renderer";
import { cn } from "@/lib/utils";
@ -11,12 +10,10 @@ interface OnboardingStepProps {
children?: ReactNode;
isVisible: boolean;
isCompleted?: boolean;
showCompleted?: boolean;
icon?: ReactNode;
isMarkdown?: boolean;
hideIcon?: boolean;
isLoadingModels?: boolean;
loadingStatus?: string[];
reserveSpaceForThinking?: boolean;
}
export function OnboardingStep({
@ -24,38 +21,13 @@ export function OnboardingStep({
children,
isVisible,
isCompleted = false,
showCompleted = false,
icon,
isMarkdown = false,
hideIcon = false,
isLoadingModels = false,
loadingStatus = [],
reserveSpaceForThinking = false,
}: OnboardingStepProps) {
const [displayedText, setDisplayedText] = useState("");
const [showChildren, setShowChildren] = useState(false);
const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0);
// Cycle through loading status messages once
useEffect(() => {
if (!isLoadingModels || loadingStatus.length === 0) {
setCurrentStatusIndex(0);
return;
}
const interval = setInterval(() => {
setCurrentStatusIndex((prev) => {
const nextIndex = prev + 1;
// Stop at the last message
if (nextIndex >= loadingStatus.length - 1) {
clearInterval(interval);
return loadingStatus.length - 1;
}
return nextIndex;
});
}, 1500); // Change status every 1.5 seconds
return () => clearInterval(interval);
}, [isLoadingModels, loadingStatus]);
useEffect(() => {
if (!isVisible) {
@ -113,48 +85,15 @@ export function OnboardingStep({
}
>
<div>
{isLoadingModels && loadingStatus.length > 0 ? (
<div className="flex flex-col gap-2 py-1.5">
<div className="flex items-center gap-2">
<div className="relative w-1.5 h-2.5">
<AnimatedProcessingIcon className="text-current shrink-0 absolute inset-0" />
</div>
<span className="text-mmd font-medium text-muted-foreground">
Thinking
</span>
</div>
<div className="overflow-hidden">
<div className="flex items-center gap-5 overflow-y-hidden relative h-6">
<div className="w-px h-6 bg-border" />
<div className="relative h-5 w-full">
<AnimatePresence mode="sync" initial={false}>
<motion.span
key={currentStatusIndex}
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"
>
{loadingStatus[currentStatusIndex]}
</motion.span>
</AnimatePresence>
</div>
</div>
</div>
</div>
) : isMarkdown ? (
{isMarkdown ? (
<MarkdownRenderer
className={cn(
isCompleted
? "text-placeholder-foreground"
: "text-foreground",
isCompleted ? "text-placeholder-foreground" : "text-foreground",
"text-sm py-1.5 transition-colors duration-300",
)}
chatMessage={text}
/>
) : (
<>
<p
className={`text-foreground text-sm py-1.5 transition-colors duration-300 ${
isCompleted ? "text-placeholder-foreground" : ""
@ -165,22 +104,18 @@ export function OnboardingStep({
<span className="inline-block w-1 h-3.5 bg-primary ml-1 animate-pulse" />
)}
</p>
{reserveSpaceForThinking && (
<div className="h-8" />
)}
</>
)}
{children && (
<AnimatePresence>
{((showChildren && !isCompleted) || isMarkdown) && (
{((showChildren && (!isCompleted || showCompleted)) ||
isMarkdown) && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }}
>
<div className="pt-2">
{children}</div>
<div className="pt-4">{children}</div>
</motion.div>
)}
</AnimatePresence>

View file

@ -1,8 +1,8 @@
import { ChangeEvent, useRef, useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { type ChangeEvent, useRef, useState } from "react";
import { AnimatedProviderSteps } from "@/app/onboarding/components/animated-provider-steps";
import { Button } from "@/components/ui/button";
import { uploadFileForContext } from "@/lib/upload-utils";
import { AnimatePresence, motion } from "motion/react";
import { AnimatedProviderSteps } from "@/app/onboarding/components/animated-provider-steps";
interface OnboardingUploadProps {
onComplete: () => void;
@ -13,10 +13,7 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
const [isUploading, setIsUploading] = useState(false);
const [currentStep, setCurrentStep] = useState<number | null>(null);
const STEP_LIST = [
"Uploading your document",
"Processing your document",
];
const STEP_LIST = ["Uploading your document", "Processing your document"];
const resetFileInput = () => {
if (fileInputRef.current) {
@ -38,9 +35,9 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
console.error("Upload failed", (error as Error).message);
} finally {
setIsUploading(false);
await new Promise(resolve => setTimeout(resolve, 1000));
await new Promise((resolve) => setTimeout(resolve, 1000));
setCurrentStep(STEP_LIST.length);
await new Promise(resolve => setTimeout(resolve, 500));
await new Promise((resolve) => setTimeout(resolve, 500));
onComplete();
}
};
@ -55,13 +52,15 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
try {
await performUpload(selectedFile);
} catch (error) {
console.error("Unable to prepare file for upload", (error as Error).message);
console.error(
"Unable to prepare file for upload",
(error as Error).message,
);
} finally {
resetFileInput();
}
};
return (
<AnimatePresence mode="wait">
{currentStep === null ? (
@ -97,12 +96,13 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
<AnimatedProviderSteps
currentStep={currentStep}
setCurrentStep={setCurrentStep}
isCompleted={false}
steps={STEP_LIST}
/>
</motion.div>
)}
</AnimatePresence>
)
}
);
};
export default OnboardingUpload;

View file

@ -1,15 +1,20 @@
import { ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
interface ProgressBarProps {
currentStep: number;
totalSteps: number;
onSkip?: () => void;
}
export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
export function ProgressBar({ currentStep, totalSteps, onSkip }: ProgressBarProps) {
const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
return (
<div className="w-full">
<div className="flex items-center max-w-48 mx-auto gap-3">
<div className="flex-1 h-1 bg-background rounded-full overflow-hidden">
<div className="w-full flex items-center px-6 gap-4">
<div className="flex-1" />
<div className="flex items-center gap-3">
<div className="w-48 h-1 bg-background rounded-full overflow-hidden">
<div
className="h-full transition-all duration-300 ease-in-out"
style={{
@ -22,6 +27,19 @@ export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
{currentStep + 1}/{totalSteps}
</span>
</div>
<div className="flex-1 flex justify-end">
{currentStep > 0 && onSkip && (
<Button
variant="ghost"
size="sm"
onClick={onSkip}
className="flex items-center gap-2 text-xs text-muted-foreground"
>
Skip onboarding
<ArrowRight className="w-4 h-4" />
</Button>
)}
</div>
</div>
);
}

View file

@ -2,38 +2,85 @@
import { AnimatePresence, motion } from "framer-motion";
import { CheckIcon } from "lucide-react";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
import { cn } from "@/lib/utils";
export function AnimatedProviderSteps({
currentStep,
isCompleted,
setCurrentStep,
steps,
storageKey = "provider-steps",
processingStartTime,
}: {
currentStep: number;
isCompleted: boolean;
setCurrentStep: (step: number) => void;
steps: string[];
storageKey?: string;
processingStartTime?: number | null;
}) {
const [startTime, setStartTime] = useState<number | null>(null);
const [elapsedTime, setElapsedTime] = useState<number>(0);
// Initialize start time from prop or local storage
useEffect(() => {
if (currentStep < steps.length - 1) {
const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
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]);
}, [currentStep, setCurrentStep, steps, isCompleted]);
const isDone = currentStep >= steps.length;
// 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]);
const isDone = currentStep >= steps.length && !isCompleted;
return (
<div className="flex flex-col gap-2">
<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-150 relative",
isDone ? "w-3.5 h-3.5" : "w-1.5 h-2.5",
isDone ? "w-3.5 h-3.5" : "w-3.5 h-2.5",
)}
>
<CheckIcon
@ -61,9 +108,9 @@ export function AnimatedProviderSteps({
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-5 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" />
<div className="w-px h-6 bg-border ml-2" />
<div className="relative h-5 w-full">
<AnimatePresence mode="sync" initial={false}>
<motion.span
@ -82,6 +129,79 @@ export function AnimatedProviderSteps({
)}
</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>
);
}

View file

@ -15,13 +15,11 @@ export function IBMOnboarding({
sampleDataset,
setSampleDataset,
setIsLoadingModels,
setLoadingStatus,
}: {
setSettings: (settings: OnboardingVariables) => void;
sampleDataset: boolean;
setSampleDataset: (dataset: boolean) => void;
setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void;
}) {
const [endpoint, setEndpoint] = useState("https://us-south.ml.cloud.ibm.com");
const [apiKey, setApiKey] = useState("");
@ -91,6 +89,10 @@ export function IBMOnboarding({
setSampleDataset(dataset);
};
useEffect(() => {
setIsLoadingModels?.(isLoadingModels);
}, [isLoadingModels, setIsLoadingModels]);
// Update settings when values change
useUpdateSettings(
"watsonx",
@ -104,18 +106,6 @@ export function IBMOnboarding({
setSettings,
);
// Notify parent about loading state
useEffect(() => {
setIsLoadingModels?.(isLoadingModels);
// Set detailed loading status
if (isLoadingModels) {
const status = ["Connecting to IBM watsonx.ai", "Fetching language models", "Fetching embedding models"];
setLoadingStatus?.(status);
} else {
setLoadingStatus?.([]);
}
}, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
return (
<>
<div className="space-y-4">

View file

@ -14,13 +14,11 @@ export function OllamaOnboarding({
sampleDataset,
setSampleDataset,
setIsLoadingModels,
setLoadingStatus,
}: {
setSettings: (settings: OnboardingVariables) => void;
sampleDataset: boolean;
setSampleDataset: (dataset: boolean) => void;
setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void;
}) {
const [endpoint, setEndpoint] = useState(`http://localhost:11434`);
const [showConnecting, setShowConnecting] = useState(false);
@ -75,19 +73,6 @@ export function OllamaOnboarding({
setSettings,
);
// Notify parent about loading state
useEffect(() => {
setIsLoadingModels?.(isLoadingModels);
// Set detailed loading status
if (isLoadingModels) {
const status = ["Connecting to Ollama", "Fetching language models", "Fetching embedding models"];
setLoadingStatus?.(status);
} else {
setLoadingStatus?.([]);
}
}, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
// Check validation state based on models query
const hasConnectionError = debouncedEndpoint && modelsError;
const hasNoModels =

View file

@ -27,11 +27,11 @@ import { OpenAIOnboarding } from "./openai-onboarding";
interface OnboardingCardProps {
onComplete: () => void;
isCompleted?: boolean;
setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void;
}
const STEP_LIST = [
"Setting up your model provider",
"Defining schema",
@ -43,8 +43,7 @@ const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
const OnboardingCard = ({
onComplete,
setIsLoadingModels: setIsLoadingModelsParent,
setLoadingStatus: setLoadingStatusParent,
isCompleted = false,
}: OnboardingCardProps) => {
const { isHealthy: isDoclingHealthy } = useDoclingHealth();
@ -54,40 +53,14 @@ const OnboardingCard = ({
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
const [loadingStep, setLoadingStep] = useState<number>(0);
const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0);
// Pass loading state to parent
// Reset loading step when models start loading
useEffect(() => {
setIsLoadingModelsParent?.(isLoadingModels);
}, [isLoadingModels, setIsLoadingModelsParent]);
useEffect(() => {
setLoadingStatusParent?.(loadingStatus);
}, [loadingStatus, setLoadingStatusParent]);
// Cycle through loading status messages once
useEffect(() => {
if (!isLoadingModels || loadingStatus.length === 0) {
setCurrentStatusIndex(0);
return;
if (isLoadingModels) {
setLoadingStep(0);
}
const interval = setInterval(() => {
setCurrentStatusIndex((prev) => {
const nextIndex = prev + 1;
// Stop at the last message
if (nextIndex >= loadingStatus.length - 1) {
clearInterval(interval);
return loadingStatus.length - 1;
}
return nextIndex;
});
}, 1500); // Change status every 1.5 seconds
return () => clearInterval(interval);
}, [isLoadingModels, loadingStatus]);
}, [isLoadingModels]);
const handleSetModelProvider = (provider: string) => {
setModelProvider(provider);
@ -104,7 +77,13 @@ const OnboardingCard = ({
llm_model: "",
});
const [currentStep, setCurrentStep] = useState<number | null>(null);
const [currentStep, setCurrentStep] = useState<number | null>(
isCompleted ? TOTAL_PROVIDER_STEPS : null,
);
const [processingStartTime, setProcessingStartTime] = useState<number | null>(
null,
);
// Query tasks to track completion
const { data: tasks } = useGetTasksQuery({
@ -129,7 +108,8 @@ const OnboardingCard = ({
// If no active tasks and we've started onboarding, complete it
if (
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
tasks.length > 0
tasks.length > 0 &&
!isCompleted
) {
// Set to final step to show "Done"
setCurrentStep(TOTAL_PROVIDER_STEPS);
@ -138,7 +118,7 @@ const OnboardingCard = ({
onComplete();
}, 1000);
}
}, [tasks, currentStep, onComplete]);
}, [tasks, currentStep, onComplete, isCompleted]);
// Mutations
const onboardingMutation = useOnboardingMutation({
@ -186,6 +166,8 @@ const OnboardingCard = ({
onboardingData.project_id = settings.project_id;
}
// Record the start time when user clicks Complete
setProcessingStartTime(Date.now());
onboardingMutation.mutate(onboardingData);
setCurrentStep(0);
};
@ -208,43 +190,91 @@ const OnboardingCard = ({
onValueChange={handleSetModelProvider}
>
<TabsList className="mb-4">
<TabsTrigger
value="openai"
<TabsTrigger value="openai">
<div
className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
modelProvider === "openai" ? "bg-white" : "bg-muted",
)}
>
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "openai" ? "bg-white" : "bg-muted")}>
<OpenAILogo className={cn("w-4 h-4 shrink-0", modelProvider === "openai" ? "text-black" : "text-muted-foreground")} />
<OpenAILogo
className={cn(
"w-4 h-4 shrink-0",
modelProvider === "openai"
? "text-black"
: "text-muted-foreground",
)}
/>
</div>
OpenAI
</TabsTrigger>
<TabsTrigger
value="watsonx"
<TabsTrigger value="watsonx">
<div
className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted",
)}
>
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted")}>
<IBMLogo className={cn("w-4 h-4 shrink-0", modelProvider === "watsonx" ? "text-white" : "text-muted-foreground")} />
<IBMLogo
className={cn(
"w-4 h-4 shrink-0",
modelProvider === "watsonx"
? "text-white"
: "text-muted-foreground",
)}
/>
</div>
IBM watsonx.ai
</TabsTrigger>
<TabsTrigger
value="ollama"
<TabsTrigger value="ollama">
<div
className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
modelProvider === "ollama" ? "bg-white" : "bg-muted",
)}
>
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "ollama" ? "bg-white" : "bg-muted")}>
<OllamaLogo
className={cn(
"w-4 h-4 shrink-0",
modelProvider === "ollama" ? "text-black" : "text-muted-foreground",
modelProvider === "ollama"
? "text-black"
: "text-muted-foreground",
)}
/>
</div>
Ollama
</TabsTrigger>
</TabsList>
<AnimatePresence>
{isLoadingModels && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.1, ease: "easeInOut" }}
className="overflow-hidden"
>
<div className="py-3">
<AnimatedProviderSteps
currentStep={loadingStep}
isCompleted={false}
setCurrentStep={setLoadingStep}
steps={[
"Connecting to the provider",
"Fetching language models",
"Fetching embedding models",
]}
storageKey="model-loading-steps"
/></div>
</motion.div>
)}
</AnimatePresence>
<TabsContent value="openai">
<OpenAIOnboarding
setSettings={setSettings}
sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus}
/>
</TabsContent>
<TabsContent value="watsonx">
@ -253,7 +283,6 @@ const OnboardingCard = ({
sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus}
/>
</TabsContent>
<TabsContent value="ollama">
@ -262,19 +291,19 @@ const OnboardingCard = ({
sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus}
/>
</TabsContent>
</Tabs>
{!isLoadingModels && (
<Tooltip>
<TooltipTrigger asChild>
<div>
<Button
size="sm"
onClick={handleComplete}
disabled={!isComplete}
disabled={!isComplete || isLoadingModels}
loading={onboardingMutation.isPending}
>
<span className="select-none">Complete</span>
@ -283,7 +312,9 @@ const OnboardingCard = ({
</TooltipTrigger>
{!isComplete && (
<TooltipContent>
{!!settings.llm_model &&
{isLoadingModels
? "Loading models..."
: !!settings.llm_model &&
!!settings.embedding_model &&
!isDoclingHealthy
? "docling-serve must be running to continue"
@ -291,7 +322,6 @@ const OnboardingCard = ({
</TooltipContent>
)}
</Tooltip>
)}
</div>
</motion.div>
) : (
@ -303,8 +333,10 @@ const OnboardingCard = ({
>
<AnimatedProviderSteps
currentStep={currentStep}
isCompleted={isCompleted}
setCurrentStep={setCurrentStep}
steps={STEP_LIST}
processingStartTime={processingStartTime}
/>
</motion.div>
)}

View file

@ -15,13 +15,11 @@ export function OpenAIOnboarding({
sampleDataset,
setSampleDataset,
setIsLoadingModels,
setLoadingStatus,
}: {
setSettings: (settings: OnboardingVariables) => void;
sampleDataset: boolean;
setSampleDataset: (dataset: boolean) => void;
setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void;
}) {
const [apiKey, setApiKey] = useState("");
const [getFromEnv, setGetFromEnv] = useState(true);
@ -62,6 +60,10 @@ export function OpenAIOnboarding({
setEmbeddingModel("");
};
useEffect(() => {
setIsLoadingModels?.(isLoadingModels);
}, [isLoadingModels, setIsLoadingModels]);
// Update settings when values change
useUpdateSettings(
"openai",
@ -73,18 +75,6 @@ export function OpenAIOnboarding({
setSettings,
);
// Notify parent about loading state
useEffect(() => {
setIsLoadingModels?.(isLoadingModels);
// Set detailed loading status
if (isLoadingModels) {
const status = ["Connecting to OpenAI", "Fetching language models", "Fetching embedding models"];
setLoadingStatus?.(status);
} else {
setLoadingStatus?.([]);
}
}, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
return (
<>
<div className="space-y-5">

View file

@ -86,6 +86,14 @@ export function ChatRenderer({
}
};
const handleSkipOnboarding = () => {
// Skip onboarding by marking it as complete
if (typeof window !== "undefined") {
localStorage.removeItem(ONBOARDING_STEP_KEY);
}
setShowLayout(true);
};
// List of paths with smaller max-width
const smallWidthPaths = ["/settings/connector/new"];
const isSmallWidthPath = smallWidthPaths.includes(pathname);
@ -149,6 +157,7 @@ export function ChatRenderer({
className={cn(
"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden",
!showLayout && "absolute",
showLayout && !isOnChatPage && "bg-background",
)}
>
<div
@ -172,7 +181,7 @@ export function ChatRenderer({
ease: "easeOut",
delay: ANIMATION_DURATION,
}}
className={cn("w-full h-full 0v")}
className={cn("w-full h-full")}
>
<div className={cn("w-full h-full", !showLayout && "hidden")}>
{children}
@ -195,6 +204,7 @@ export function ChatRenderer({
<ProgressBar
currentStep={currentStep}
totalSteps={TOTAL_ONBOARDING_STEPS}
onSkip={handleSkipOnboarding}
/>
</motion.div>
</main>

View file

@ -18,6 +18,7 @@ import {
useGetTasksQuery,
} from "@/app/api/queries/useGetTasksQuery";
import { useAuth } from "@/contexts/auth-context";
import { ONBOARDING_STEP_KEY } from "@/lib/constants";
// Task interface is now imported from useGetTasksQuery
export type { Task };
@ -89,6 +90,12 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
},
});
// Helper function to check if onboarding is active
const isOnboardingActive = useCallback(() => {
if (typeof window === "undefined") return false;
return localStorage.getItem(ONBOARDING_STEP_KEY) !== null;
}, []);
const refetchSearch = useCallback(() => {
queryClient.invalidateQueries({
queryKey: ["search"],
@ -148,9 +155,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
const fileInfoEntry = fileInfo as TaskFileEntry;
// Use the filename from backend if available, otherwise extract from path
const fileName =
fileInfoEntry.filename ||
filePath.split("/").pop() ||
filePath;
fileInfoEntry.filename || filePath.split("/").pop() || filePath;
const fileStatus = fileInfoEntry.status ?? "processing";
// Map backend file status to our TaskFile status
@ -262,7 +267,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
successfulFiles !== 1 ? "s" : ""
} uploaded successfully`;
}
if (!isOnboardingActive()) {
toast.success("Task completed", {
description,
action: {
@ -273,6 +278,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
},
},
});
}
setTimeout(() => {
setFiles((prevFiles) =>
prevFiles.filter(
@ -301,7 +307,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
// Store current tasks as previous for next comparison
previousTasksRef.current = tasks;
}, [tasks, refetchSearch]);
}, [tasks, refetchSearch, isOnboardingActive]);
const addTask = useCallback(
(_taskId: string) => {
@ -319,7 +325,6 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
await refetchTasks();
}, [refetchTasks]);
const cancelTask = useCallback(
async (taskId: string) => {
cancelTaskMutation.mutate({ taskId });

View file

@ -36,3 +36,5 @@ export const ONBOARDING_STEP_KEY = "onboarding_current_step";
export const FILES_REGEX =
/(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;
export const FILE_CONFIRMATION = "Confirm that you received this file.";

View file

@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
[project]
name = "openrag"
version = "0.1.24"
version = "0.1.25"
description = "Add your description here"
readme = "README.md"
requires-python = ">=3.13"

View file

@ -1 +0,0 @@
../../../../documents/2506.08231v1.pdf

View file

@ -1 +0,0 @@
../../../../documents/ai-human-resources.pdf

View file

@ -0,0 +1 @@
../../../../documents/docling.pdf

View file

@ -0,0 +1 @@
../../../../documents/ibm_anthropic.pdf

View file

@ -0,0 +1 @@
../../../../documents/openrag-documentation.pdf

View file

@ -1 +0,0 @@
../../../../flows/openrag_ingest_docling.json

4
uv.lock generated
View file

@ -1,5 +1,5 @@
version = 1
revision = 2
revision = 3
requires-python = ">=3.13"
resolution-markers = [
"platform_machine == 'x86_64' and sys_platform == 'linux'",
@ -2352,7 +2352,7 @@ wheels = [
[[package]]
name = "openrag"
version = "0.1.24"
version = "0.1.25"
source = { editable = "." }
dependencies = [
{ name = "agentd" },