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

Merge branch 'main' into docs-perf-test

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/components/navigation.tsx
View file

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

6
frontend/components/ui/accordion.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import * as AccordionPrimitive from "@radix-ui/react-accordion"; import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react"; import { ChevronRight } from "lucide-react";
import * as React from "react"; import * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -28,12 +28,12 @@ const AccordionTrigger = React.forwardRef<
<AccordionPrimitive.Trigger <AccordionPrimitive.Trigger
ref={ref} ref={ref}
className={cn( 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, className,
)} )}
{...props} {...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} {children}
</AccordionPrimitive.Trigger> </AccordionPrimitive.Trigger>
</AccordionPrimitive.Header> </AccordionPrimitive.Header>

2
frontend/src/app/chat/components/user-message.tsx
View file

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

13
frontend/src/app/chat/page.tsx
View file

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

11
frontend/src/app/new-onboarding/components/onboarding-content.tsx
View file

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

279
frontend/src/app/new-onboarding/components/onboarding-step.tsx
View file

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

184
frontend/src/app/new-onboarding/components/onboarding-upload.tsx
View file

@ -1,108 +1,108 @@
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 { Button } from "@/components/ui/button";
import { uploadFileForContext } from "@/lib/upload-utils"; import { uploadFileForContext } from "@/lib/upload-utils";
import { AnimatePresence, motion } from "motion/react";
import { AnimatedProviderSteps } from "@/app/onboarding/components/animated-provider-steps";
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", "Processing your document"];
"Uploading your document",
"Processing your document",
];
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 uploadFileForContext(file); await uploadFileForContext(file);
console.log("Document uploaded successfully"); console.log("Document uploaded successfully");
} catch (error) { } catch (error) {
console.error("Upload failed", (error as Error).message); console.error("Upload failed", (error as Error).message);
} finally { } finally {
setIsUploading(false); setIsUploading(false);
await new Promise(resolve => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
setCurrentStep(STEP_LIST.length); setCurrentStep(STEP_LIST.length);
await new Promise(resolve => setTimeout(resolve, 500)); await new Promise((resolve) => setTimeout(resolve, 500));
onComplete(); onComplete();
} }
}; };
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("Unable to prepare file for upload", (error as Error).message); console.error(
} finally { "Unable to prepare file for upload",
resetFileInput(); (error as Error).message,
} );
}; } finally {
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} >
> {isUploading ? "Uploading..." : "Add a Document"}
{isUploading ? "Uploading..." : "Add a Document"} </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}
steps={STEP_LIST} steps={STEP_LIST}
/> />
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
) );
} };
export default OnboardingUpload; export default OnboardingUpload;

26
frontend/src/app/new-onboarding/components/progress-bar.tsx
View file

@ -1,15 +1,20 @@
import { ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
interface ProgressBarProps { interface ProgressBarProps {
currentStep: number; currentStep: number;
totalSteps: number; totalSteps: number;
onSkip?: () => void;
} }
export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) { export function ProgressBar({ currentStep, totalSteps, onSkip }: ProgressBarProps) {
const progressPercentage = ((currentStep + 1) / totalSteps) * 100; const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
return ( return (
<div className="w-full"> <div className="w-full flex items-center px-6 gap-4">
<div className="flex items-center max-w-48 mx-auto gap-3"> <div className="flex-1" />
<div className="flex-1 h-1 bg-background rounded-full overflow-hidden"> <div className="flex items-center gap-3">
<div className="w-48 h-1 bg-background rounded-full overflow-hidden">
<div <div
className="h-full transition-all duration-300 ease-in-out" className="h-full transition-all duration-300 ease-in-out"
style={{ style={{
@ -22,6 +27,19 @@ export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
{currentStep + 1}/{totalSteps} {currentStep + 1}/{totalSteps}
</span> </span>
</div> </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> </div>
); );
} }

264
frontend/src/app/onboarding/components/animated-provider-steps.tsx
View file

@ -2,86 +2,206 @@
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
import { CheckIcon } from "lucide-react"; 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 AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
export function AnimatedProviderSteps({ export function AnimatedProviderSteps({
currentStep, currentStep,
setCurrentStep, isCompleted,
steps, setCurrentStep,
steps,
storageKey = "provider-steps",
processingStartTime,
}: { }: {
currentStep: number; currentStep: number;
setCurrentStep: (step: number) => void; isCompleted: boolean;
steps: string[]; setCurrentStep: (step: number) => void;
steps: string[];
storageKey?: string;
processingStartTime?: number | null;
}) { }) {
const [startTime, setStartTime] = useState<number | null>(null);
const [elapsedTime, setElapsedTime] = useState<number>(0);
useEffect(() => { // Initialize start time from prop or local storage
if (currentStep < steps.length - 1) { useEffect(() => {
const interval = setInterval(() => { const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
setCurrentStep(currentStep + 1);
}, 1500);
return () => clearInterval(interval);
}
}, [currentStep, setCurrentStep, steps]);
const isDone = currentStep >= steps.length; 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]);
return ( // Progress through steps
<div className="flex flex-col gap-2"> useEffect(() => {
<div className="flex items-center gap-2"> if (currentStep < steps.length - 1 && !isCompleted) {
<div const interval = setInterval(() => {
className={cn( setCurrentStep(currentStep + 1);
"transition-all duration-150 relative", }, 1500);
isDone ? "w-3.5 h-3.5" : "w-1.5 h-2.5", return () => clearInterval(interval);
)} }
> }, [currentStep, setCurrentStep, steps, isCompleted]);
<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",
)}
/>
<AnimatedProcessingIcon
className={cn(
"text-current shrink-0 absolute inset-0 transition-all duration-150",
isDone ? "opacity-0" : "opacity-100",
)}
/>
</div>
<span className="text-mmd font-medium text-muted-foreground"> // Calculate and store elapsed time when completed
{isDone ? "Done" : "Thinking"} useEffect(() => {
</span> if (isCompleted && startTime) {
</div> const elapsed = Date.now() - startTime;
<div className="overflow-hidden"> setElapsedTime(elapsed);
<AnimatePresence> localStorage.setItem(`${storageKey}-elapsed`, elapsed.toString());
{!isDone && ( }
<motion.div }, [isCompleted, startTime, storageKey]);
initial={{ opacity: 1, y: 0, height: "auto" }}
exit={{ opacity: 0, y: -24, height: 0 }} const isDone = currentStep >= steps.length && !isCompleted;
transition={{ duration: 0.4, ease: "easeInOut" }}
className="flex items-center gap-5 overflow-y-hidden relative h-6" return (
> <AnimatePresence mode="wait">
<div className="w-px h-6 bg-border" /> {!isCompleted ? (
<div className="relative h-5 w-full"> <motion.div
<AnimatePresence mode="sync" initial={false}> key="processing"
<motion.span initial={{ opacity: 0 }}
key={currentStep} animate={{ opacity: 1 }}
initial={{ y: 24, opacity: 0 }} exit={{ opacity: 0 }}
animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.3 }}
exit={{ y: -24, opacity: 0 }} className="flex flex-col gap-2"
transition={{ duration: 0.3, ease: "easeInOut" }} >
className="text-mmd font-medium text-primary absolute left-0" <div className="flex items-center gap-2">
> <div
{steps[currentStep]} className={cn(
</motion.span> "transition-all duration-150 relative",
</AnimatePresence> isDone ? "w-3.5 h-3.5" : "w-3.5 h-2.5",
</div> )}
</motion.div> >
)} <CheckIcon
</AnimatePresence> className={cn(
</div> "text-accent-emerald-foreground shrink-0 w-3.5 h-3.5 absolute inset-0 transition-all duration-150",
</div> isDone ? "opacity-100" : "opacity-0",
); )}
/>
<AnimatedProcessingIcon
className={cn(
"text-current shrink-0 absolute inset-0 transition-all duration-150",
isDone ? "opacity-0" : "opacity-100",
)}
/>
</div>
<span className="text-mmd font-medium text-muted-foreground">
{isDone ? "Done" : "Thinking"}
</span>
</div>
<div className="overflow-hidden">
<AnimatePresence>
{!isDone && (
<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-2" />
<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>
);
} }

18
frontend/src/app/onboarding/components/ibm-onboarding.tsx
View file

@ -15,13 +15,11 @@ export function IBMOnboarding({
sampleDataset, sampleDataset,
setSampleDataset, setSampleDataset,
setIsLoadingModels, setIsLoadingModels,
setLoadingStatus,
}: { }: {
setSettings: (settings: OnboardingVariables) => void; setSettings: (settings: OnboardingVariables) => void;
sampleDataset: boolean; sampleDataset: boolean;
setSampleDataset: (dataset: boolean) => void; setSampleDataset: (dataset: boolean) => void;
setIsLoadingModels?: (isLoading: boolean) => void; setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void;
}) { }) {
const [endpoint, setEndpoint] = useState("https://us-south.ml.cloud.ibm.com"); const [endpoint, setEndpoint] = useState("https://us-south.ml.cloud.ibm.com");
const [apiKey, setApiKey] = useState(""); const [apiKey, setApiKey] = useState("");
@ -91,6 +89,10 @@ export function IBMOnboarding({
setSampleDataset(dataset); setSampleDataset(dataset);
}; };
useEffect(() => {
setIsLoadingModels?.(isLoadingModels);
}, [isLoadingModels, setIsLoadingModels]);
// Update settings when values change // Update settings when values change
useUpdateSettings( useUpdateSettings(
"watsonx", "watsonx",
@ -104,18 +106,6 @@ export function IBMOnboarding({
setSettings, 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 ( return (
<> <>
<div className="space-y-4"> <div className="space-y-4">

15
frontend/src/app/onboarding/components/ollama-onboarding.tsx
View file

@ -14,13 +14,11 @@ export function OllamaOnboarding({
sampleDataset, sampleDataset,
setSampleDataset, setSampleDataset,
setIsLoadingModels, setIsLoadingModels,
setLoadingStatus,
}: { }: {
setSettings: (settings: OnboardingVariables) => void; setSettings: (settings: OnboardingVariables) => void;
sampleDataset: boolean; sampleDataset: boolean;
setSampleDataset: (dataset: boolean) => void; setSampleDataset: (dataset: boolean) => void;
setIsLoadingModels?: (isLoading: boolean) => void; setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void;
}) { }) {
const [endpoint, setEndpoint] = useState(`http://localhost:11434`); const [endpoint, setEndpoint] = useState(`http://localhost:11434`);
const [showConnecting, setShowConnecting] = useState(false); const [showConnecting, setShowConnecting] = useState(false);
@ -75,19 +73,6 @@ export function OllamaOnboarding({
setSettings, 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 // Check validation state based on models query
const hasConnectionError = debouncedEndpoint && modelsError; const hasConnectionError = debouncedEndpoint && modelsError;
const hasNoModels = const hasNoModels =

204
frontend/src/app/onboarding/components/onboarding-card.tsx
View file

@ -27,24 +27,23 @@ import { OpenAIOnboarding } from "./openai-onboarding";
interface OnboardingCardProps { interface OnboardingCardProps {
onComplete: () => void; onComplete: () => void;
isCompleted?: 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",
"Ingesting sample data", "Ingesting sample data",
]; ];
const TOTAL_PROVIDER_STEPS = STEP_LIST.length; const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
const OnboardingCard = ({ const OnboardingCard = ({
onComplete, onComplete,
setIsLoadingModels: setIsLoadingModelsParent, isCompleted = false,
setLoadingStatus: setLoadingStatusParent,
}: OnboardingCardProps) => { }: OnboardingCardProps) => {
const { isHealthy: isDoclingHealthy } = useDoclingHealth(); const { isHealthy: isDoclingHealthy } = useDoclingHealth();
@ -54,40 +53,14 @@ const OnboardingCard = ({
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false); const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
const [loadingStatus, setLoadingStatus] = useState<string[]>([]); const [loadingStep, setLoadingStep] = useState<number>(0);
const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0); // Reset loading step when models start loading
// Pass loading state to parent
useEffect(() => { useEffect(() => {
setIsLoadingModelsParent?.(isLoadingModels); if (isLoadingModels) {
}, [isLoadingModels, setIsLoadingModelsParent]); setLoadingStep(0);
useEffect(() => {
setLoadingStatusParent?.(loadingStatus);
}, [loadingStatus, setLoadingStatusParent]);
// Cycle through loading status messages once
useEffect(() => {
if (!isLoadingModels || loadingStatus.length === 0) {
setCurrentStatusIndex(0);
return;
} }
}, [isLoadingModels]);
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]);
const handleSetModelProvider = (provider: string) => { const handleSetModelProvider = (provider: string) => {
setModelProvider(provider); setModelProvider(provider);
@ -104,7 +77,13 @@ const OnboardingCard = ({
llm_model: "", 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 // Query tasks to track completion
const { data: tasks } = useGetTasksQuery({ const { data: tasks } = useGetTasksQuery({
@ -129,7 +108,8 @@ const OnboardingCard = ({
// 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
) { ) {
// Set to final step to show "Done" // Set to final step to show "Done"
setCurrentStep(TOTAL_PROVIDER_STEPS); setCurrentStep(TOTAL_PROVIDER_STEPS);
@ -138,7 +118,7 @@ const OnboardingCard = ({
onComplete(); onComplete();
}, 1000); }, 1000);
} }
}, [tasks, currentStep, onComplete]); }, [tasks, currentStep, onComplete, isCompleted]);
// Mutations // Mutations
const onboardingMutation = useOnboardingMutation({ const onboardingMutation = useOnboardingMutation({
@ -186,6 +166,8 @@ const OnboardingCard = ({
onboardingData.project_id = settings.project_id; onboardingData.project_id = settings.project_id;
} }
// Record the start time when user clicks Complete
setProcessingStartTime(Date.now());
onboardingMutation.mutate(onboardingData); onboardingMutation.mutate(onboardingData);
setCurrentStep(0); setCurrentStep(0);
}; };
@ -208,43 +190,91 @@ const OnboardingCard = ({
onValueChange={handleSetModelProvider} onValueChange={handleSetModelProvider}
> >
<TabsList className="mb-4"> <TabsList className="mb-4">
<TabsTrigger <TabsTrigger value="openai">
value="openai" <div
> className={cn(
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "openai" ? "bg-white" : "bg-muted")}> "flex items-center justify-center gap-2 w-8 h-8 rounded-md",
<OpenAILogo className={cn("w-4 h-4 shrink-0", modelProvider === "openai" ? "text-black" : "text-muted-foreground")} /> modelProvider === "openai" ? "bg-white" : "bg-muted",
)}
>
<OpenAILogo
className={cn(
"w-4 h-4 shrink-0",
modelProvider === "openai"
? "text-black"
: "text-muted-foreground",
)}
/>
</div> </div>
OpenAI OpenAI
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger value="watsonx">
value="watsonx" <div
> className={cn(
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted")}> "flex items-center justify-center gap-2 w-8 h-8 rounded-md",
<IBMLogo className={cn("w-4 h-4 shrink-0", modelProvider === "watsonx" ? "text-white" : "text-muted-foreground")} /> modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted",
)}
>
<IBMLogo
className={cn(
"w-4 h-4 shrink-0",
modelProvider === "watsonx"
? "text-white"
: "text-muted-foreground",
)}
/>
</div> </div>
IBM watsonx.ai IBM watsonx.ai
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger value="ollama">
value="ollama" <div
> className={cn(
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "ollama" ? "bg-white" : "bg-muted")}> "flex items-center justify-center gap-2 w-8 h-8 rounded-md",
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" ? "text-black" : "text-muted-foreground", modelProvider === "ollama"
? "text-black"
: "text-muted-foreground",
)} )}
/> />
</div> </div>
Ollama Ollama
</TabsTrigger> </TabsTrigger>
</TabsList> </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"> <TabsContent value="openai">
<OpenAIOnboarding <OpenAIOnboarding
setSettings={setSettings} setSettings={setSettings}
sampleDataset={sampleDataset} sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset} setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels} setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus}
/> />
</TabsContent> </TabsContent>
<TabsContent value="watsonx"> <TabsContent value="watsonx">
@ -253,7 +283,6 @@ const OnboardingCard = ({
sampleDataset={sampleDataset} sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset} setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels} setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus}
/> />
</TabsContent> </TabsContent>
<TabsContent value="ollama"> <TabsContent value="ollama">
@ -262,36 +291,37 @@ const OnboardingCard = ({
sampleDataset={sampleDataset} sampleDataset={sampleDataset}
setSampleDataset={setSampleDataset} setSampleDataset={setSampleDataset}
setIsLoadingModels={setIsLoadingModels} setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus}
/> />
</TabsContent> </TabsContent>
</Tabs> </Tabs>
{!isLoadingModels && (
<Tooltip>
<TooltipTrigger asChild> <Tooltip>
<div> <TooltipTrigger asChild>
<Button <div>
size="sm" <Button
onClick={handleComplete} size="sm"
disabled={!isComplete} onClick={handleComplete}
loading={onboardingMutation.isPending} disabled={!isComplete || isLoadingModels}
> loading={onboardingMutation.isPending}
<span className="select-none">Complete</span> >
</Button> <span className="select-none">Complete</span>
</div> </Button>
</TooltipTrigger> </div>
{!isComplete && ( </TooltipTrigger>
<TooltipContent> {!isComplete && (
{!!settings.llm_model && <TooltipContent>
!!settings.embedding_model && {isLoadingModels
!isDoclingHealthy ? "Loading models..."
: !!settings.llm_model &&
!!settings.embedding_model &&
!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>
</motion.div> </motion.div>
) : ( ) : (
@ -302,10 +332,12 @@ const OnboardingCard = ({
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
> >
<AnimatedProviderSteps <AnimatedProviderSteps
currentStep={currentStep} currentStep={currentStep}
setCurrentStep={setCurrentStep} isCompleted={isCompleted}
steps={STEP_LIST} setCurrentStep={setCurrentStep}
/> steps={STEP_LIST}
processingStartTime={processingStartTime}
/>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>

18
frontend/src/app/onboarding/components/openai-onboarding.tsx
View file

@ -15,13 +15,11 @@ export function OpenAIOnboarding({
sampleDataset, sampleDataset,
setSampleDataset, setSampleDataset,
setIsLoadingModels, setIsLoadingModels,
setLoadingStatus,
}: { }: {
setSettings: (settings: OnboardingVariables) => void; setSettings: (settings: OnboardingVariables) => void;
sampleDataset: boolean; sampleDataset: boolean;
setSampleDataset: (dataset: boolean) => void; setSampleDataset: (dataset: boolean) => void;
setIsLoadingModels?: (isLoading: boolean) => void; setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void;
}) { }) {
const [apiKey, setApiKey] = useState(""); const [apiKey, setApiKey] = useState("");
const [getFromEnv, setGetFromEnv] = useState(true); const [getFromEnv, setGetFromEnv] = useState(true);
@ -62,6 +60,10 @@ export function OpenAIOnboarding({
setEmbeddingModel(""); setEmbeddingModel("");
}; };
useEffect(() => {
setIsLoadingModels?.(isLoadingModels);
}, [isLoadingModels, setIsLoadingModels]);
// Update settings when values change // Update settings when values change
useUpdateSettings( useUpdateSettings(
"openai", "openai",
@ -73,18 +75,6 @@ export function OpenAIOnboarding({
setSettings, 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 ( return (
<> <>
<div className="space-y-5"> <div className="space-y-5">

12
frontend/src/components/chat-renderer.tsx
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 // List of paths with smaller max-width
const smallWidthPaths = ["/settings/connector/new"]; const smallWidthPaths = ["/settings/connector/new"];
const isSmallWidthPath = smallWidthPaths.includes(pathname); const isSmallWidthPath = smallWidthPaths.includes(pathname);
@ -149,6 +157,7 @@ export function ChatRenderer({
className={cn( className={cn(
"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden", "flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden",
!showLayout && "absolute", !showLayout && "absolute",
showLayout && !isOnChatPage && "bg-background",
)} )}
> >
<div <div
@ -172,7 +181,7 @@ export function ChatRenderer({
ease: "easeOut", ease: "easeOut",
delay: ANIMATION_DURATION, 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")}> <div className={cn("w-full h-full", !showLayout && "hidden")}>
{children} {children}
@ -195,6 +204,7 @@ export function ChatRenderer({
<ProgressBar <ProgressBar
currentStep={currentStep} currentStep={currentStep}
totalSteps={TOTAL_ONBOARDING_STEPS} totalSteps={TOTAL_ONBOARDING_STEPS}
onSkip={handleSkipOnboarding}
/> />
</motion.div> </motion.div>
</main> </main>

639
frontend/src/contexts/task-context.tsx
View file

@ -3,368 +3,373 @@
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
import type React from "react"; import type React from "react";
import { import {
createContext, createContext,
useCallback, useCallback,
useContext, useContext,
useEffect, useEffect,
useRef, useRef,
useState, useState,
} from "react"; } from "react";
import { toast } from "sonner"; import { toast } from "sonner";
import { useCancelTaskMutation } from "@/app/api/mutations/useCancelTaskMutation"; import { useCancelTaskMutation } from "@/app/api/mutations/useCancelTaskMutation";
import { import {
type Task, type Task,
type TaskFileEntry, type TaskFileEntry,
useGetTasksQuery, useGetTasksQuery,
} from "@/app/api/queries/useGetTasksQuery"; } from "@/app/api/queries/useGetTasksQuery";
import { useAuth } from "@/contexts/auth-context"; import { useAuth } from "@/contexts/auth-context";
import { ONBOARDING_STEP_KEY } from "@/lib/constants";
// Task interface is now imported from useGetTasksQuery // Task interface is now imported from useGetTasksQuery
export type { Task }; export type { Task };
export interface TaskFile { export interface TaskFile {
filename: string; filename: string;
mimetype: string; mimetype: string;
source_url: string; source_url: string;
size: number; size: number;
connector_type: string; connector_type: string;
status: "active" | "failed" | "processing"; status: "active" | "failed" | "processing";
task_id: string; task_id: string;
created_at: string; created_at: string;
updated_at: string; updated_at: string;
error?: string; error?: string;
embedding_model?: string; embedding_model?: string;
embedding_dimensions?: number; embedding_dimensions?: number;
} }
interface TaskContextType { interface TaskContextType {
tasks: Task[]; tasks: Task[];
files: TaskFile[]; files: TaskFile[];
addTask: (taskId: string) => void; addTask: (taskId: string) => void;
addFiles: (files: Partial<TaskFile>[], taskId: string) => void; addFiles: (files: Partial<TaskFile>[], taskId: string) => void;
refreshTasks: () => Promise<void>; refreshTasks: () => Promise<void>;
cancelTask: (taskId: string) => Promise<void>; cancelTask: (taskId: string) => Promise<void>;
isPolling: boolean; isPolling: boolean;
isFetching: boolean; isFetching: boolean;
isMenuOpen: boolean; isMenuOpen: boolean;
toggleMenu: () => void; toggleMenu: () => void;
isRecentTasksExpanded: boolean; isRecentTasksExpanded: boolean;
setRecentTasksExpanded: (expanded: boolean) => void; setRecentTasksExpanded: (expanded: boolean) => void;
// React Query states // React Query states
isLoading: boolean; isLoading: boolean;
error: Error | null; error: Error | null;
} }
const TaskContext = createContext<TaskContextType | undefined>(undefined); const TaskContext = createContext<TaskContextType | undefined>(undefined);
export function TaskProvider({ children }: { children: React.ReactNode }) { export function TaskProvider({ children }: { children: React.ReactNode }) {
const [files, setFiles] = useState<TaskFile[]>([]); const [files, setFiles] = useState<TaskFile[]>([]);
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isRecentTasksExpanded, setIsRecentTasksExpanded] = useState(false); const [isRecentTasksExpanded, setIsRecentTasksExpanded] = useState(false);
const previousTasksRef = useRef<Task[]>([]); const previousTasksRef = useRef<Task[]>([]);
const { isAuthenticated, isNoAuthMode } = useAuth(); const { isAuthenticated, isNoAuthMode } = useAuth();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
// Use React Query hooks // Use React Query hooks
const { const {
data: tasks = [], data: tasks = [],
isLoading, isLoading,
error, error,
refetch: refetchTasks, refetch: refetchTasks,
isFetching, isFetching,
} = useGetTasksQuery({ } = useGetTasksQuery({
enabled: isAuthenticated || isNoAuthMode, enabled: isAuthenticated || isNoAuthMode,
}); });
const cancelTaskMutation = useCancelTaskMutation({ const cancelTaskMutation = useCancelTaskMutation({
onSuccess: () => { onSuccess: () => {
toast.success("Task cancelled", { toast.success("Task cancelled", {
description: "Task has been cancelled successfully", description: "Task has been cancelled successfully",
}); });
}, },
onError: (error) => { onError: (error) => {
toast.error("Failed to cancel task", { toast.error("Failed to cancel task", {
description: error.message, description: error.message,
}); });
}, },
}); });
const refetchSearch = useCallback(() => { // Helper function to check if onboarding is active
queryClient.invalidateQueries({ const isOnboardingActive = useCallback(() => {
queryKey: ["search"], if (typeof window === "undefined") return false;
exact: false, return localStorage.getItem(ONBOARDING_STEP_KEY) !== null;
}); }, []);
}, [queryClient]);
const addFiles = useCallback( const refetchSearch = useCallback(() => {
(newFiles: Partial<TaskFile>[], taskId: string) => { queryClient.invalidateQueries({
const now = new Date().toISOString(); queryKey: ["search"],
const filesToAdd: TaskFile[] = newFiles.map((file) => ({ exact: false,
filename: file.filename || "", });
mimetype: file.mimetype || "", }, [queryClient]);
source_url: file.source_url || "",
size: file.size || 0,
connector_type: file.connector_type || "local",
status: "processing",
task_id: taskId,
created_at: now,
updated_at: now,
error: file.error,
embedding_model: file.embedding_model,
embedding_dimensions: file.embedding_dimensions,
}));
setFiles((prevFiles) => [...prevFiles, ...filesToAdd]); const addFiles = useCallback(
}, (newFiles: Partial<TaskFile>[], taskId: string) => {
[], const now = new Date().toISOString();
); const filesToAdd: TaskFile[] = newFiles.map((file) => ({
filename: file.filename || "",
mimetype: file.mimetype || "",
source_url: file.source_url || "",
size: file.size || 0,
connector_type: file.connector_type || "local",
status: "processing",
task_id: taskId,
created_at: now,
updated_at: now,
error: file.error,
embedding_model: file.embedding_model,
embedding_dimensions: file.embedding_dimensions,
}));
// Handle task status changes and file updates setFiles((prevFiles) => [...prevFiles, ...filesToAdd]);
useEffect(() => { },
if (tasks.length === 0) { [],
// Store current tasks as previous for next comparison );
previousTasksRef.current = tasks;
return;
}
// Check for task status changes by comparing with previous tasks // Handle task status changes and file updates
tasks.forEach((currentTask) => { useEffect(() => {
const previousTask = previousTasksRef.current.find( if (tasks.length === 0) {
(prev) => prev.task_id === currentTask.task_id, // Store current tasks as previous for next comparison
); previousTasksRef.current = tasks;
return;
}
// Only show toasts if we have previous data and status has changed // Check for task status changes by comparing with previous tasks
if ( tasks.forEach((currentTask) => {
(previousTask && previousTask.status !== currentTask.status) || const previousTask = previousTasksRef.current.find(
(!previousTask && previousTasksRef.current.length !== 0) (prev) => prev.task_id === currentTask.task_id,
) { );
// Process files from failed task and add them to files list
if (currentTask.files && typeof currentTask.files === "object") {
const taskFileEntries = Object.entries(currentTask.files);
const now = new Date().toISOString();
taskFileEntries.forEach(([filePath, fileInfo]) => { // Only show toasts if we have previous data and status has changed
if (typeof fileInfo === "object" && fileInfo) { if (
const fileInfoEntry = fileInfo as TaskFileEntry; (previousTask && previousTask.status !== currentTask.status) ||
// Use the filename from backend if available, otherwise extract from path (!previousTask && previousTasksRef.current.length !== 0)
const fileName = ) {
fileInfoEntry.filename || // Process files from failed task and add them to files list
filePath.split("/").pop() || if (currentTask.files && typeof currentTask.files === "object") {
filePath; const taskFileEntries = Object.entries(currentTask.files);
const fileStatus = fileInfoEntry.status ?? "processing"; const now = new Date().toISOString();
// Map backend file status to our TaskFile status taskFileEntries.forEach(([filePath, fileInfo]) => {
let mappedStatus: TaskFile["status"]; if (typeof fileInfo === "object" && fileInfo) {
switch (fileStatus) { const fileInfoEntry = fileInfo as TaskFileEntry;
case "pending": // Use the filename from backend if available, otherwise extract from path
case "running": const fileName =
mappedStatus = "processing"; fileInfoEntry.filename || filePath.split("/").pop() || filePath;
break; const fileStatus = fileInfoEntry.status ?? "processing";
case "completed":
mappedStatus = "active";
break;
case "failed":
mappedStatus = "failed";
break;
default:
mappedStatus = "processing";
}
const fileError = (() => { // Map backend file status to our TaskFile status
if ( let mappedStatus: TaskFile["status"];
typeof fileInfoEntry.error === "string" && switch (fileStatus) {
fileInfoEntry.error.trim().length > 0 case "pending":
) { case "running":
return fileInfoEntry.error.trim(); mappedStatus = "processing";
} break;
if ( case "completed":
mappedStatus === "failed" && mappedStatus = "active";
typeof currentTask.error === "string" && break;
currentTask.error.trim().length > 0 case "failed":
) { mappedStatus = "failed";
return currentTask.error.trim(); break;
} default:
return undefined; mappedStatus = "processing";
})(); }
setFiles((prevFiles) => { const fileError = (() => {
const existingFileIndex = prevFiles.findIndex( if (
(f) => typeof fileInfoEntry.error === "string" &&
f.source_url === filePath && fileInfoEntry.error.trim().length > 0
f.task_id === currentTask.task_id, ) {
); return fileInfoEntry.error.trim();
}
if (
mappedStatus === "failed" &&
typeof currentTask.error === "string" &&
currentTask.error.trim().length > 0
) {
return currentTask.error.trim();
}
return undefined;
})();
// Detect connector type based on file path or other indicators setFiles((prevFiles) => {
let connectorType = "local"; const existingFileIndex = prevFiles.findIndex(
if (filePath.includes("/") && !filePath.startsWith("/")) { (f) =>
// Likely S3 key format (bucket/path/file.ext) f.source_url === filePath &&
connectorType = "s3"; f.task_id === currentTask.task_id,
} );
const fileEntry: TaskFile = { // Detect connector type based on file path or other indicators
filename: fileName, let connectorType = "local";
mimetype: "", // We don't have this info from the task if (filePath.includes("/") && !filePath.startsWith("/")) {
source_url: filePath, // Likely S3 key format (bucket/path/file.ext)
size: 0, // We don't have this info from the task connectorType = "s3";
connector_type: connectorType, }
status: mappedStatus,
task_id: currentTask.task_id,
created_at:
typeof fileInfoEntry.created_at === "string"
? fileInfoEntry.created_at
: now,
updated_at:
typeof fileInfoEntry.updated_at === "string"
? fileInfoEntry.updated_at
: now,
error: fileError,
embedding_model:
typeof fileInfoEntry.embedding_model === "string"
? fileInfoEntry.embedding_model
: undefined,
embedding_dimensions:
typeof fileInfoEntry.embedding_dimensions === "number"
? fileInfoEntry.embedding_dimensions
: undefined,
};
if (existingFileIndex >= 0) { const fileEntry: TaskFile = {
// Update existing file filename: fileName,
const updatedFiles = [...prevFiles]; mimetype: "", // We don't have this info from the task
updatedFiles[existingFileIndex] = fileEntry; source_url: filePath,
return updatedFiles; size: 0, // We don't have this info from the task
} else { connector_type: connectorType,
// Add new file status: mappedStatus,
return [...prevFiles, fileEntry]; task_id: currentTask.task_id,
} created_at:
}); typeof fileInfoEntry.created_at === "string"
} ? fileInfoEntry.created_at
}); : now,
} updated_at:
if ( typeof fileInfoEntry.updated_at === "string"
previousTask && ? fileInfoEntry.updated_at
previousTask.status !== "completed" && : now,
currentTask.status === "completed" error: fileError,
) { embedding_model:
// Task just completed - show success toast with file counts typeof fileInfoEntry.embedding_model === "string"
const successfulFiles = currentTask.successful_files || 0; ? fileInfoEntry.embedding_model
const failedFiles = currentTask.failed_files || 0; : undefined,
embedding_dimensions:
typeof fileInfoEntry.embedding_dimensions === "number"
? fileInfoEntry.embedding_dimensions
: undefined,
};
let description = ""; if (existingFileIndex >= 0) {
if (failedFiles > 0) { // Update existing file
description = `${successfulFiles} file${ const updatedFiles = [...prevFiles];
successfulFiles !== 1 ? "s" : "" updatedFiles[existingFileIndex] = fileEntry;
} uploaded successfully, ${failedFiles} file${ return updatedFiles;
failedFiles !== 1 ? "s" : "" } else {
} failed`; // Add new file
} else { return [...prevFiles, fileEntry];
description = `${successfulFiles} file${ }
successfulFiles !== 1 ? "s" : "" });
} uploaded successfully`; }
} });
}
if (
previousTask &&
previousTask.status !== "completed" &&
currentTask.status === "completed"
) {
// Task just completed - show success toast with file counts
const successfulFiles = currentTask.successful_files || 0;
const failedFiles = currentTask.failed_files || 0;
toast.success("Task completed", { let description = "";
description, if (failedFiles > 0) {
action: { description = `${successfulFiles} file${
label: "View", successfulFiles !== 1 ? "s" : ""
onClick: () => { } uploaded successfully, ${failedFiles} file${
setIsMenuOpen(true); failedFiles !== 1 ? "s" : ""
setIsRecentTasksExpanded(true); } failed`;
}, } else {
}, description = `${successfulFiles} file${
}); successfulFiles !== 1 ? "s" : ""
setTimeout(() => { } uploaded successfully`;
setFiles((prevFiles) => }
prevFiles.filter( if (!isOnboardingActive()) {
(file) => toast.success("Task completed", {
file.task_id !== currentTask.task_id || description,
file.status === "failed", action: {
), label: "View",
); onClick: () => {
refetchSearch(); setIsMenuOpen(true);
}, 500); setIsRecentTasksExpanded(true);
} else if ( },
previousTask && },
previousTask.status !== "failed" && });
previousTask.status !== "error" && }
(currentTask.status === "failed" || currentTask.status === "error") setTimeout(() => {
) { setFiles((prevFiles) =>
// Task just failed - show error toast prevFiles.filter(
toast.error("Task failed", { (file) =>
description: `Task ${currentTask.task_id} failed: ${ file.task_id !== currentTask.task_id ||
currentTask.error || "Unknown error" file.status === "failed",
}`, ),
}); );
} refetchSearch();
} }, 500);
}); } else if (
previousTask &&
previousTask.status !== "failed" &&
previousTask.status !== "error" &&
(currentTask.status === "failed" || currentTask.status === "error")
) {
// Task just failed - show error toast
toast.error("Task failed", {
description: `Task ${currentTask.task_id} failed: ${
currentTask.error || "Unknown error"
}`,
});
}
}
});
// Store current tasks as previous for next comparison // Store current tasks as previous for next comparison
previousTasksRef.current = tasks; previousTasksRef.current = tasks;
}, [tasks, refetchSearch]); }, [tasks, refetchSearch, isOnboardingActive]);
const addTask = useCallback( const addTask = useCallback(
(_taskId: string) => { (_taskId: string) => {
// React Query will automatically handle polling when tasks are active // React Query will automatically handle polling when tasks are active
// Just trigger a refetch to get the latest data // Just trigger a refetch to get the latest data
setTimeout(() => { setTimeout(() => {
refetchTasks(); refetchTasks();
}, 500); }, 500);
}, },
[refetchTasks], [refetchTasks],
); );
const refreshTasks = useCallback(async () => { const refreshTasks = useCallback(async () => {
setFiles([]); setFiles([]);
await refetchTasks(); await refetchTasks();
}, [refetchTasks]); }, [refetchTasks]);
const cancelTask = useCallback(
async (taskId: string) => {
cancelTaskMutation.mutate({ taskId });
},
[cancelTaskMutation],
);
const cancelTask = useCallback( const toggleMenu = useCallback(() => {
async (taskId: string) => { setIsMenuOpen((prev) => !prev);
cancelTaskMutation.mutate({ taskId }); }, []);
},
[cancelTaskMutation],
);
const toggleMenu = useCallback(() => { // Determine if we're polling based on React Query's refetch interval
setIsMenuOpen((prev) => !prev); const isPolling =
}, []); isFetching &&
tasks.some(
(task) =>
task.status === "pending" ||
task.status === "running" ||
task.status === "processing",
);
// Determine if we're polling based on React Query's refetch interval const value: TaskContextType = {
const isPolling = tasks,
isFetching && files,
tasks.some( addTask,
(task) => addFiles,
task.status === "pending" || refreshTasks,
task.status === "running" || cancelTask,
task.status === "processing", isPolling,
); isFetching,
isMenuOpen,
toggleMenu,
isRecentTasksExpanded,
setRecentTasksExpanded: setIsRecentTasksExpanded,
isLoading,
error,
};
const value: TaskContextType = { return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
tasks,
files,
addTask,
addFiles,
refreshTasks,
cancelTask,
isPolling,
isFetching,
isMenuOpen,
toggleMenu,
isRecentTasksExpanded,
setRecentTasksExpanded: setIsRecentTasksExpanded,
isLoading,
error,
};
return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
} }
export function useTask() { export function useTask() {
const context = useContext(TaskContext); const context = useContext(TaskContext);
if (context === undefined) { if (context === undefined) {
throw new Error("useTask must be used within a TaskProvider"); throw new Error("useTask must be used within a TaskProvider");
} }
return context; return context;
} }

2
frontend/src/lib/constants.ts
View file

@ -36,3 +36,5 @@ export const ONBOARDING_STEP_KEY = "onboarding_current_step";
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:)/;
export const FILE_CONFIRMATION = "Confirm that you received this file.";

2
pyproject.toml
View file

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

1
src/tui/_assets/documents/2506.08231v1.pdf
View file

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

1
src/tui/_assets/documents/ai-human-resources.pdf
View file

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

1
src/tui/_assets/documents/docling.pdf Symbolic link
View file

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

1
src/tui/_assets/documents/ibm_anthropic.pdf Symbolic link
View file

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

1
src/tui/_assets/documents/openrag-documentation.pdf Symbolic link
View file

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

1
src/tui/_assets/flows/openrag_ingest_docling.json
View file

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

4
uv.lock generated
View file

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