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

fix: added onboarding steps accordion, changed bg color (#313)

Browse source 
* fixed accordion chevron side

* Added steps history to animated provider steps

* always reserve space for thinking, and pass required things for children

* update onboarding card to reflect changes

* added showCompleted

* passed required props

* Added background to other pages

* Made tasks just appear when not on onboarding

* changed task context to not have error

* changed default to closed

* fixed onboarding card

* changed line to show up centered
This commit is contained in:
Lucas Oliveira 2025-10-27 17:27:22 -03:00 • committed by GitHub
parent d8a8a5c961
commit 49ea058cfe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 815 additions and 684 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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>

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

@ -26,7 +26,6 @@ export function OnboardingContent({
); );
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false); const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
const [loadingStatus, setLoadingStatus] = useState<string[]>([]); 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,16 +80,17 @@ 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} isLoadingModels={isLoadingModels}
loadingStatus={loadingStatus} loadingStatus={loadingStatus}
reserveSpaceForThinking={!hasStartedOnboarding} reserveSpaceForThinking={true}
> >
<OnboardingCard <OnboardingCard
onComplete={() => { onComplete={() => {
setHasStartedOnboarding(true);
handleStepComplete(); handleStepComplete();
}} }}
isCompleted={currentStep > 0}
setIsLoadingModels={setIsLoadingModels} setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus} setLoadingStatus={setLoadingStatus}
/> />

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

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

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

@ -2,86 +2,211 @@
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",
}: { }: {
currentStep: number; currentStep: number;
setCurrentStep: (step: number) => void; isCompleted: boolean;
steps: string[]; setCurrentStep: (step: number) => void;
steps: string[];
storageKey?: string;
}) { }) {
const [startTime, setStartTime] = useState<number | null>(null);
const [elapsedTime, setElapsedTime] = useState<number>(0);
useEffect(() => { // Initialize start time from local storage or set new one
if (currentStep < steps.length - 1) { useEffect(() => {
const interval = setInterval(() => { const storedStartTime = localStorage.getItem(`${storageKey}-start`);
setCurrentStep(currentStep + 1); const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
}, 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 (storedStartTime) {
// If in progress, use stored start time
setStartTime(parseInt(storedStartTime));
} else {
// First time, set new start time
const now = Date.now();
setStartTime(now);
localStorage.setItem(`${storageKey}-start`, now.toString());
}
}, [storageKey, isCompleted]);
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 && ( localStorage.removeItem(`${storageKey}-start`);
<motion.div }
initial={{ opacity: 1, y: 0, height: "auto" }} }, [isCompleted, startTime, storageKey]);
exit={{ opacity: 0, y: -24, height: 0 }}
transition={{ duration: 0.4, ease: "easeInOut" }} const isDone = currentStep >= steps.length && !isCompleted;
className="flex items-center gap-5 overflow-y-hidden relative h-6"
> return (
<div className="w-px h-6 bg-border" /> <AnimatePresence mode="wait">
<div className="relative h-5 w-full"> {!isCompleted ? (
<AnimatePresence mode="sync" initial={false}> <motion.div
<motion.span key="processing"
key={currentStep} initial={{ opacity: 0 }}
initial={{ y: 24, opacity: 0 }} animate={{ opacity: 1 }}
animate={{ y: 0, opacity: 1 }} exit={{ opacity: 0 }}
exit={{ y: -24, opacity: 0 }} transition={{ duration: 0.3 }}
transition={{ duration: 0.3, ease: "easeInOut" }} className="flex flex-col gap-2"
className="text-mmd font-medium text-primary absolute left-0" >
> <div className="flex items-center gap-2">
{steps[currentStep]} <div
</motion.span> className={cn(
</AnimatePresence> "transition-all duration-150 relative",
</div> isDone ? "w-3.5 h-3.5" : "w-3.5 h-2.5",
</motion.div> )}
)} >
</AnimatePresence> <CheckIcon
</div> className={cn(
</div> "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">
{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>
);
} }

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

@ -27,6 +27,7 @@ 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;
} }
@ -43,6 +44,7 @@ const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
const OnboardingCard = ({ const OnboardingCard = ({
onComplete, onComplete,
isCompleted = false,
setIsLoadingModels: setIsLoadingModelsParent, setIsLoadingModels: setIsLoadingModelsParent,
setLoadingStatus: setLoadingStatusParent, setLoadingStatus: setLoadingStatusParent,
}: OnboardingCardProps) => { }: OnboardingCardProps) => {
@ -104,7 +106,7 @@ const OnboardingCard = ({
llm_model: "", llm_model: "",
}); });
const [currentStep, setCurrentStep] = useState<number | null>(null); const [currentStep, setCurrentStep] = useState<number | null>(isCompleted ? TOTAL_PROVIDER_STEPS : null);
// Query tasks to track completion // Query tasks to track completion
const { data: tasks } = useGetTasksQuery({ const { data: tasks } = useGetTasksQuery({
@ -130,6 +132,7 @@ const OnboardingCard = ({
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 +141,7 @@ const OnboardingCard = ({
onComplete(); onComplete();
}, 1000); }, 1000);
} }
}, [tasks, currentStep, onComplete]); }, [tasks, currentStep, onComplete, isCompleted]);
// Mutations // Mutations
const onboardingMutation = useOnboardingMutation({ const onboardingMutation = useOnboardingMutation({
@ -267,31 +270,29 @@ const OnboardingCard = ({
</TabsContent> </TabsContent>
</Tabs> </Tabs>
{!isLoadingModels && ( <Tooltip>
<Tooltip> <TooltipTrigger asChild>
<TooltipTrigger asChild> <div>
<div> <Button
<Button size="sm"
size="sm" onClick={handleComplete}
onClick={handleComplete} disabled={!isComplete || isLoadingModels}
disabled={!isComplete} loading={onboardingMutation.isPending}
loading={onboardingMutation.isPending} >
> <span className="select-none">Complete</span>
<span className="select-none">Complete</span> </Button>
</Button> </div>
</div> </TooltipTrigger>
</TooltipTrigger> {!isComplete && (
{!isComplete && ( <TooltipContent>
<TooltipContent> {isLoadingModels ? "Loading models..." : (!!settings.llm_model &&
{!!settings.llm_model && !!settings.embedding_model &&
!!settings.embedding_model && !isDoclingHealthy
!isDoclingHealthy ? "docling-serve must be running to continue"
? "docling-serve must be running to continue" : "Please fill in all required fields")}
: "Please fill in all required fields"} </TooltipContent>
</TooltipContent> )}
)} </Tooltip>
</Tooltip>
)}
</div> </div>
</motion.div> </motion.div>
) : ( ) : (
@ -303,6 +304,7 @@ const OnboardingCard = ({
> >
<AnimatedProviderSteps <AnimatedProviderSteps
currentStep={currentStep} currentStep={currentStep}
isCompleted={isCompleted}
setCurrentStep={setCurrentStep} setCurrentStep={setCurrentStep}
steps={STEP_LIST} steps={STEP_LIST}
/> />

3
frontend/src/components/chat-renderer.tsx
View file

@ -149,6 +149,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 +173,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}

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;
} }