fix: added onboarding steps accordion, changed bg color (#313)
* 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
GitHub
parent
d8a8a5c961
commit
49ea058cfe
8 changed files with 815 additions and 684 deletions
|
|
@ -1,7 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
|
@ -28,12 +28,12 @@ const AccordionTrigger = React.forwardRef<
|
|||
<AccordionPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-180",
|
||||
"flex flex-1 items-center p-4 py-2.5 gap-2 font-medium !text-mmd text-muted-foreground transition-all [&[data-state=open]>svg]:rotate-90",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
|
||||
<ChevronRight className="h-3.5 w-3.5 shrink-0 transition-transform duration-200" />
|
||||
{children}
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ export function OnboardingContent({
|
|||
);
|
||||
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
|
||||
const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
|
||||
const [hasStartedOnboarding, setHasStartedOnboarding] = useState<boolean>(false);
|
||||
|
||||
const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
|
||||
onComplete: (message, newResponseId) => {
|
||||
|
|
@ -81,16 +80,17 @@ export function OnboardingContent({
|
|||
<OnboardingStep
|
||||
isVisible={currentStep >= 0}
|
||||
isCompleted={currentStep > 0}
|
||||
showCompleted={true}
|
||||
text="Let's get started by setting up your model provider."
|
||||
isLoadingModels={isLoadingModels}
|
||||
loadingStatus={loadingStatus}
|
||||
reserveSpaceForThinking={!hasStartedOnboarding}
|
||||
reserveSpaceForThinking={true}
|
||||
>
|
||||
<OnboardingCard
|
||||
onComplete={() => {
|
||||
setHasStartedOnboarding(true);
|
||||
handleStepComplete();
|
||||
}}
|
||||
isCompleted={currentStep > 0}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
setLoadingStatus={setLoadingStatus}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -2,191 +2,189 @@ import { AnimatePresence, motion } from "motion/react";
|
|||
import { type ReactNode, useEffect, useState } from "react";
|
||||
import { Message } from "@/app/chat/components/message";
|
||||
import DogIcon from "@/components/logo/dog-icon";
|
||||
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
|
||||
import { MarkdownRenderer } from "@/components/markdown-renderer";
|
||||
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface OnboardingStepProps {
|
||||
text: string;
|
||||
children?: ReactNode;
|
||||
isVisible: boolean;
|
||||
isCompleted?: boolean;
|
||||
icon?: ReactNode;
|
||||
isMarkdown?: boolean;
|
||||
hideIcon?: boolean;
|
||||
isLoadingModels?: boolean;
|
||||
loadingStatus?: string[];
|
||||
reserveSpaceForThinking?: boolean;
|
||||
text: string;
|
||||
children?: ReactNode;
|
||||
isVisible: boolean;
|
||||
isCompleted?: boolean;
|
||||
showCompleted?: boolean;
|
||||
icon?: ReactNode;
|
||||
isMarkdown?: boolean;
|
||||
hideIcon?: boolean;
|
||||
isLoadingModels?: boolean;
|
||||
loadingStatus?: string[];
|
||||
reserveSpaceForThinking?: boolean;
|
||||
}
|
||||
|
||||
export function OnboardingStep({
|
||||
text,
|
||||
children,
|
||||
isVisible,
|
||||
isCompleted = false,
|
||||
icon,
|
||||
isMarkdown = false,
|
||||
hideIcon = false,
|
||||
isLoadingModels = false,
|
||||
loadingStatus = [],
|
||||
reserveSpaceForThinking = false,
|
||||
text,
|
||||
children,
|
||||
isVisible,
|
||||
isCompleted = false,
|
||||
showCompleted = false,
|
||||
icon,
|
||||
isMarkdown = false,
|
||||
hideIcon = false,
|
||||
isLoadingModels = false,
|
||||
loadingStatus = [],
|
||||
reserveSpaceForThinking = false,
|
||||
}: OnboardingStepProps) {
|
||||
const [displayedText, setDisplayedText] = useState("");
|
||||
const [showChildren, setShowChildren] = useState(false);
|
||||
const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0);
|
||||
const [displayedText, setDisplayedText] = useState("");
|
||||
const [showChildren, setShowChildren] = useState(false);
|
||||
const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0);
|
||||
|
||||
// Cycle through loading status messages once
|
||||
useEffect(() => {
|
||||
if (!isLoadingModels || loadingStatus.length === 0) {
|
||||
setCurrentStatusIndex(0);
|
||||
return;
|
||||
}
|
||||
// Cycle through loading status messages once
|
||||
useEffect(() => {
|
||||
if (!isLoadingModels || loadingStatus.length === 0) {
|
||||
setCurrentStatusIndex(0);
|
||||
return;
|
||||
}
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentStatusIndex((prev) => {
|
||||
const nextIndex = prev + 1;
|
||||
// Stop at the last message
|
||||
if (nextIndex >= loadingStatus.length - 1) {
|
||||
clearInterval(interval);
|
||||
return loadingStatus.length - 1;
|
||||
}
|
||||
return nextIndex;
|
||||
});
|
||||
}, 1500); // Change status every 1.5 seconds
|
||||
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]);
|
||||
return () => clearInterval(interval);
|
||||
}, [isLoadingModels, loadingStatus]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVisible) {
|
||||
setDisplayedText("");
|
||||
setShowChildren(false);
|
||||
return;
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!isVisible) {
|
||||
setDisplayedText("");
|
||||
setShowChildren(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (isCompleted) {
|
||||
setDisplayedText(text);
|
||||
setShowChildren(true);
|
||||
return;
|
||||
}
|
||||
if (isCompleted) {
|
||||
setDisplayedText(text);
|
||||
setShowChildren(true);
|
||||
return;
|
||||
}
|
||||
|
||||
let currentIndex = 0;
|
||||
setDisplayedText("");
|
||||
setShowChildren(false);
|
||||
let currentIndex = 0;
|
||||
setDisplayedText("");
|
||||
setShowChildren(false);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (currentIndex < text.length) {
|
||||
setDisplayedText(text.slice(0, currentIndex + 1));
|
||||
currentIndex++;
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
setShowChildren(true);
|
||||
}
|
||||
}, 20); // 20ms per character
|
||||
const interval = setInterval(() => {
|
||||
if (currentIndex < text.length) {
|
||||
setDisplayedText(text.slice(0, currentIndex + 1));
|
||||
currentIndex++;
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
setShowChildren(true);
|
||||
}
|
||||
}, 20); // 20ms per character
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [text, isVisible, isCompleted]);
|
||||
return () => clearInterval(interval);
|
||||
}, [text, isVisible, isCompleted]);
|
||||
|
||||
if (!isVisible) return null;
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.4, ease: "easeOut" }}
|
||||
className={isCompleted ? "opacity-50" : ""}
|
||||
>
|
||||
<Message
|
||||
icon={
|
||||
hideIcon ? (
|
||||
<div className="w-8 h-8 rounded-lg flex-shrink-0" />
|
||||
) : (
|
||||
icon || (
|
||||
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0 select-none">
|
||||
<DogIcon
|
||||
className="h-6 w-6 text-accent-foreground transition-colors duration-300"
|
||||
disabled={isCompleted}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
<div>
|
||||
{isLoadingModels && loadingStatus.length > 0 ? (
|
||||
<div className="flex flex-col gap-2 py-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative w-1.5 h-2.5">
|
||||
<AnimatedProcessingIcon className="text-current shrink-0 absolute inset-0" />
|
||||
</div>
|
||||
<span className="text-mmd font-medium text-muted-foreground">
|
||||
Thinking
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<div className="flex items-center gap-5 overflow-y-hidden relative h-6">
|
||||
<div className="w-px h-6 bg-border" />
|
||||
<div className="relative h-5 w-full">
|
||||
<AnimatePresence mode="sync" initial={false}>
|
||||
<motion.span
|
||||
key={currentStatusIndex}
|
||||
initial={{ y: 24, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: -24, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="text-mmd font-medium text-primary absolute left-0"
|
||||
>
|
||||
{loadingStatus[currentStatusIndex]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : isMarkdown ? (
|
||||
<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>
|
||||
);
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.4, ease: "easeOut" }}
|
||||
className={isCompleted ? "opacity-50" : ""}
|
||||
>
|
||||
<Message
|
||||
icon={
|
||||
hideIcon ? (
|
||||
<div className="w-8 h-8 rounded-lg flex-shrink-0" />
|
||||
) : (
|
||||
icon || (
|
||||
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0 select-none">
|
||||
<DogIcon
|
||||
className="h-6 w-6 text-accent-foreground transition-colors duration-300"
|
||||
disabled={isCompleted}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
<div>
|
||||
{isLoadingModels && loadingStatus.length > 0 ? (
|
||||
<div className="flex flex-col gap-2 py-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="relative w-3.5 h-2.5">
|
||||
<AnimatedProcessingIcon className="text-current shrink-0 absolute inset-0" />
|
||||
</div>
|
||||
<span className="text-mmd font-medium text-muted-foreground">
|
||||
Thinking
|
||||
</span>
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<div className="flex items-center gap-5 overflow-y-hidden relative h-6">
|
||||
<div className="w-px h-6 bg-border" />
|
||||
<div className="relative h-5 w-full">
|
||||
<AnimatePresence mode="sync" initial={false}>
|
||||
<motion.span
|
||||
key={currentStatusIndex}
|
||||
initial={{ y: 24, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: -24, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
className="text-mmd font-medium text-primary absolute left-0"
|
||||
>
|
||||
{loadingStatus[currentStatusIndex]}
|
||||
</motion.span>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : isMarkdown ? (
|
||||
<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 || showCompleted)) ||
|
||||
isMarkdown) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }}
|
||||
>
|
||||
<div className="pt-2">{children}</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
</div>
|
||||
</Message>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { uploadFileForContext } from "@/lib/upload-utils";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { AnimatedProviderSteps } from "@/app/onboarding/components/animated-provider-steps";
|
||||
|
||||
interface OnboardingUploadProps {
|
||||
onComplete: () => void;
|
||||
onComplete: () => void;
|
||||
}
|
||||
|
||||
const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState<number | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState<number | null>(null);
|
||||
|
||||
const STEP_LIST = [
|
||||
"Uploading your document",
|
||||
"Processing your document",
|
||||
];
|
||||
const STEP_LIST = ["Uploading your document", "Processing your document"];
|
||||
|
||||
const resetFileInput = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
const resetFileInput = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
const handleUploadClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const performUpload = async (file: File) => {
|
||||
setIsUploading(true);
|
||||
try {
|
||||
setCurrentStep(0);
|
||||
await uploadFileForContext(file);
|
||||
console.log("Document uploaded successfully");
|
||||
} catch (error) {
|
||||
console.error("Upload failed", (error as Error).message);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
setCurrentStep(STEP_LIST.length);
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
onComplete();
|
||||
}
|
||||
};
|
||||
const performUpload = async (file: File) => {
|
||||
setIsUploading(true);
|
||||
try {
|
||||
setCurrentStep(0);
|
||||
await uploadFileForContext(file);
|
||||
console.log("Document uploaded successfully");
|
||||
} catch (error) {
|
||||
console.error("Upload failed", (error as Error).message);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
setCurrentStep(STEP_LIST.length);
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
onComplete();
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = event.target.files?.[0];
|
||||
if (!selectedFile) {
|
||||
resetFileInput();
|
||||
return;
|
||||
}
|
||||
const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = event.target.files?.[0];
|
||||
if (!selectedFile) {
|
||||
resetFileInput();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await performUpload(selectedFile);
|
||||
} catch (error) {
|
||||
console.error("Unable to prepare file for upload", (error as Error).message);
|
||||
} finally {
|
||||
resetFileInput();
|
||||
}
|
||||
};
|
||||
try {
|
||||
await performUpload(selectedFile);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Unable to prepare file for upload",
|
||||
(error as Error).message,
|
||||
);
|
||||
} finally {
|
||||
resetFileInput();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{currentStep === null ? (
|
||||
<motion.div
|
||||
key="user-ingest"
|
||||
initial={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -24 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleUploadClick}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading ? "Uploading..." : "Add a Document"}
|
||||
</Button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="ingest-steps"
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<AnimatedProviderSteps
|
||||
currentStep={currentStep}
|
||||
setCurrentStep={setCurrentStep}
|
||||
steps={STEP_LIST}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{currentStep === null ? (
|
||||
<motion.div
|
||||
key="user-ingest"
|
||||
initial={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -24 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleUploadClick}
|
||||
disabled={isUploading}
|
||||
>
|
||||
{isUploading ? "Uploading..." : "Add a Document"}
|
||||
</Button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="ingest-steps"
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<AnimatedProviderSteps
|
||||
currentStep={currentStep}
|
||||
setCurrentStep={setCurrentStep}
|
||||
isCompleted={false}
|
||||
steps={STEP_LIST}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnboardingUpload;
|
||||
|
|
|
|||
|
|
@ -2,86 +2,211 @@
|
|||
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { CheckIcon } from "lucide-react";
|
||||
import { useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function AnimatedProviderSteps({
|
||||
currentStep,
|
||||
setCurrentStep,
|
||||
steps,
|
||||
currentStep,
|
||||
isCompleted,
|
||||
setCurrentStep,
|
||||
steps,
|
||||
storageKey = "provider-steps",
|
||||
}: {
|
||||
currentStep: number;
|
||||
setCurrentStep: (step: number) => void;
|
||||
steps: string[];
|
||||
currentStep: number;
|
||||
isCompleted: boolean;
|
||||
setCurrentStep: (step: number) => void;
|
||||
steps: string[];
|
||||
storageKey?: string;
|
||||
}) {
|
||||
const [startTime, setStartTime] = useState<number | null>(null);
|
||||
const [elapsedTime, setElapsedTime] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentStep < steps.length - 1) {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}, 1500);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [currentStep, setCurrentStep, steps]);
|
||||
// Initialize start time from local storage or set new one
|
||||
useEffect(() => {
|
||||
const storedStartTime = localStorage.getItem(`${storageKey}-start`);
|
||||
const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
|
||||
|
||||
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 (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"transition-all duration-150 relative",
|
||||
isDone ? "w-3.5 h-3.5" : "w-1.5 h-2.5",
|
||||
)}
|
||||
>
|
||||
<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>
|
||||
// Progress through steps
|
||||
useEffect(() => {
|
||||
if (currentStep < steps.length - 1 && !isCompleted) {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}, 1500);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [currentStep, setCurrentStep, steps, isCompleted]);
|
||||
|
||||
<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-5 overflow-y-hidden relative h-6"
|
||||
>
|
||||
<div className="w-px h-6 bg-border" />
|
||||
<div className="relative h-5 w-full">
|
||||
<AnimatePresence mode="sync" initial={false}>
|
||||
<motion.span
|
||||
key={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>
|
||||
</div>
|
||||
);
|
||||
// Calculate and store elapsed time when completed
|
||||
useEffect(() => {
|
||||
if (isCompleted && startTime) {
|
||||
const elapsed = Date.now() - startTime;
|
||||
setElapsedTime(elapsed);
|
||||
localStorage.setItem(`${storageKey}-elapsed`, elapsed.toString());
|
||||
localStorage.removeItem(`${storageKey}-start`);
|
||||
}
|
||||
}, [isCompleted, startTime, storageKey]);
|
||||
|
||||
const isDone = currentStep >= steps.length && !isCompleted;
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{!isCompleted ? (
|
||||
<motion.div
|
||||
key="processing"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex flex-col gap-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className={cn(
|
||||
"transition-all duration-150 relative",
|
||||
isDone ? "w-3.5 h-3.5" : "w-3.5 h-2.5",
|
||||
)}
|
||||
>
|
||||
<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">
|
||||
{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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import { OpenAIOnboarding } from "./openai-onboarding";
|
|||
|
||||
interface OnboardingCardProps {
|
||||
onComplete: () => void;
|
||||
isCompleted?: boolean;
|
||||
setIsLoadingModels?: (isLoading: boolean) => void;
|
||||
setLoadingStatus?: (status: string[]) => void;
|
||||
}
|
||||
|
|
@ -43,6 +44,7 @@ const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
|
|||
|
||||
const OnboardingCard = ({
|
||||
onComplete,
|
||||
isCompleted = false,
|
||||
setIsLoadingModels: setIsLoadingModelsParent,
|
||||
setLoadingStatus: setLoadingStatusParent,
|
||||
}: OnboardingCardProps) => {
|
||||
|
|
@ -104,7 +106,7 @@ const OnboardingCard = ({
|
|||
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
|
||||
const { data: tasks } = useGetTasksQuery({
|
||||
|
|
@ -130,6 +132,7 @@ const OnboardingCard = ({
|
|||
if (
|
||||
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
|
||||
tasks.length > 0
|
||||
&& !isCompleted
|
||||
) {
|
||||
// Set to final step to show "Done"
|
||||
setCurrentStep(TOTAL_PROVIDER_STEPS);
|
||||
|
|
@ -138,7 +141,7 @@ const OnboardingCard = ({
|
|||
onComplete();
|
||||
}, 1000);
|
||||
}
|
||||
}, [tasks, currentStep, onComplete]);
|
||||
}, [tasks, currentStep, onComplete, isCompleted]);
|
||||
|
||||
// Mutations
|
||||
const onboardingMutation = useOnboardingMutation({
|
||||
|
|
@ -267,31 +270,29 @@ const OnboardingCard = ({
|
|||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{!isLoadingModels && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleComplete}
|
||||
disabled={!isComplete}
|
||||
loading={onboardingMutation.isPending}
|
||||
>
|
||||
<span className="select-none">Complete</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
{!isComplete && (
|
||||
<TooltipContent>
|
||||
{!!settings.llm_model &&
|
||||
!!settings.embedding_model &&
|
||||
!isDoclingHealthy
|
||||
? "docling-serve must be running to continue"
|
||||
: "Please fill in all required fields"}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
)}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={handleComplete}
|
||||
disabled={!isComplete || isLoadingModels}
|
||||
loading={onboardingMutation.isPending}
|
||||
>
|
||||
<span className="select-none">Complete</span>
|
||||
</Button>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
{!isComplete && (
|
||||
<TooltipContent>
|
||||
{isLoadingModels ? "Loading models..." : (!!settings.llm_model &&
|
||||
!!settings.embedding_model &&
|
||||
!isDoclingHealthy
|
||||
? "docling-serve must be running to continue"
|
||||
: "Please fill in all required fields")}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
|
|
@ -303,6 +304,7 @@ const OnboardingCard = ({
|
|||
>
|
||||
<AnimatedProviderSteps
|
||||
currentStep={currentStep}
|
||||
isCompleted={isCompleted}
|
||||
setCurrentStep={setCurrentStep}
|
||||
steps={STEP_LIST}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -149,6 +149,7 @@ export function ChatRenderer({
|
|||
className={cn(
|
||||
"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden",
|
||||
!showLayout && "absolute",
|
||||
showLayout && !isOnChatPage && "bg-background",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
|
|
@ -172,7 +173,7 @@ export function ChatRenderer({
|
|||
ease: "easeOut",
|
||||
delay: ANIMATION_DURATION,
|
||||
}}
|
||||
className={cn("w-full h-full 0v")}
|
||||
className={cn("w-full h-full")}
|
||||
>
|
||||
<div className={cn("w-full h-full", !showLayout && "hidden")}>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -3,368 +3,373 @@
|
|||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import type React from "react";
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { toast } from "sonner";
|
||||
import { useCancelTaskMutation } from "@/app/api/mutations/useCancelTaskMutation";
|
||||
import {
|
||||
type Task,
|
||||
type TaskFileEntry,
|
||||
useGetTasksQuery,
|
||||
type Task,
|
||||
type TaskFileEntry,
|
||||
useGetTasksQuery,
|
||||
} from "@/app/api/queries/useGetTasksQuery";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { ONBOARDING_STEP_KEY } from "@/lib/constants";
|
||||
|
||||
// Task interface is now imported from useGetTasksQuery
|
||||
export type { Task };
|
||||
|
||||
export interface TaskFile {
|
||||
filename: string;
|
||||
mimetype: string;
|
||||
source_url: string;
|
||||
size: number;
|
||||
connector_type: string;
|
||||
status: "active" | "failed" | "processing";
|
||||
task_id: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
error?: string;
|
||||
embedding_model?: string;
|
||||
embedding_dimensions?: number;
|
||||
filename: string;
|
||||
mimetype: string;
|
||||
source_url: string;
|
||||
size: number;
|
||||
connector_type: string;
|
||||
status: "active" | "failed" | "processing";
|
||||
task_id: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
error?: string;
|
||||
embedding_model?: string;
|
||||
embedding_dimensions?: number;
|
||||
}
|
||||
interface TaskContextType {
|
||||
tasks: Task[];
|
||||
files: TaskFile[];
|
||||
addTask: (taskId: string) => void;
|
||||
addFiles: (files: Partial<TaskFile>[], taskId: string) => void;
|
||||
refreshTasks: () => Promise<void>;
|
||||
cancelTask: (taskId: string) => Promise<void>;
|
||||
isPolling: boolean;
|
||||
isFetching: boolean;
|
||||
isMenuOpen: boolean;
|
||||
toggleMenu: () => void;
|
||||
isRecentTasksExpanded: boolean;
|
||||
setRecentTasksExpanded: (expanded: boolean) => void;
|
||||
// React Query states
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
tasks: Task[];
|
||||
files: TaskFile[];
|
||||
addTask: (taskId: string) => void;
|
||||
addFiles: (files: Partial<TaskFile>[], taskId: string) => void;
|
||||
refreshTasks: () => Promise<void>;
|
||||
cancelTask: (taskId: string) => Promise<void>;
|
||||
isPolling: boolean;
|
||||
isFetching: boolean;
|
||||
isMenuOpen: boolean;
|
||||
toggleMenu: () => void;
|
||||
isRecentTasksExpanded: boolean;
|
||||
setRecentTasksExpanded: (expanded: boolean) => void;
|
||||
// React Query states
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
const TaskContext = createContext<TaskContextType | undefined>(undefined);
|
||||
|
||||
export function TaskProvider({ children }: { children: React.ReactNode }) {
|
||||
const [files, setFiles] = useState<TaskFile[]>([]);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isRecentTasksExpanded, setIsRecentTasksExpanded] = useState(false);
|
||||
const previousTasksRef = useRef<Task[]>([]);
|
||||
const { isAuthenticated, isNoAuthMode } = useAuth();
|
||||
const [files, setFiles] = useState<TaskFile[]>([]);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isRecentTasksExpanded, setIsRecentTasksExpanded] = useState(false);
|
||||
const previousTasksRef = useRef<Task[]>([]);
|
||||
const { isAuthenticated, isNoAuthMode } = useAuth();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Use React Query hooks
|
||||
const {
|
||||
data: tasks = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch: refetchTasks,
|
||||
isFetching,
|
||||
} = useGetTasksQuery({
|
||||
enabled: isAuthenticated || isNoAuthMode,
|
||||
});
|
||||
// Use React Query hooks
|
||||
const {
|
||||
data: tasks = [],
|
||||
isLoading,
|
||||
error,
|
||||
refetch: refetchTasks,
|
||||
isFetching,
|
||||
} = useGetTasksQuery({
|
||||
enabled: isAuthenticated || isNoAuthMode,
|
||||
});
|
||||
|
||||
const cancelTaskMutation = useCancelTaskMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Task cancelled", {
|
||||
description: "Task has been cancelled successfully",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to cancel task", {
|
||||
description: error.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
const cancelTaskMutation = useCancelTaskMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Task cancelled", {
|
||||
description: "Task has been cancelled successfully",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error("Failed to cancel task", {
|
||||
description: error.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const refetchSearch = useCallback(() => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["search"],
|
||||
exact: false,
|
||||
});
|
||||
}, [queryClient]);
|
||||
// Helper function to check if onboarding is active
|
||||
const isOnboardingActive = useCallback(() => {
|
||||
if (typeof window === "undefined") return false;
|
||||
return localStorage.getItem(ONBOARDING_STEP_KEY) !== null;
|
||||
}, []);
|
||||
|
||||
const 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,
|
||||
}));
|
||||
const refetchSearch = useCallback(() => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["search"],
|
||||
exact: false,
|
||||
});
|
||||
}, [queryClient]);
|
||||
|
||||
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
|
||||
useEffect(() => {
|
||||
if (tasks.length === 0) {
|
||||
// Store current tasks as previous for next comparison
|
||||
previousTasksRef.current = tasks;
|
||||
return;
|
||||
}
|
||||
setFiles((prevFiles) => [...prevFiles, ...filesToAdd]);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Check for task status changes by comparing with previous tasks
|
||||
tasks.forEach((currentTask) => {
|
||||
const previousTask = previousTasksRef.current.find(
|
||||
(prev) => prev.task_id === currentTask.task_id,
|
||||
);
|
||||
// Handle task status changes and file updates
|
||||
useEffect(() => {
|
||||
if (tasks.length === 0) {
|
||||
// Store current tasks as previous for next comparison
|
||||
previousTasksRef.current = tasks;
|
||||
return;
|
||||
}
|
||||
|
||||
// Only show toasts if we have previous data and status has changed
|
||||
if (
|
||||
(previousTask && previousTask.status !== currentTask.status) ||
|
||||
(!previousTask && previousTasksRef.current.length !== 0)
|
||||
) {
|
||||
// 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();
|
||||
// Check for task status changes by comparing with previous tasks
|
||||
tasks.forEach((currentTask) => {
|
||||
const previousTask = previousTasksRef.current.find(
|
||||
(prev) => prev.task_id === currentTask.task_id,
|
||||
);
|
||||
|
||||
taskFileEntries.forEach(([filePath, fileInfo]) => {
|
||||
if (typeof fileInfo === "object" && fileInfo) {
|
||||
const fileInfoEntry = fileInfo as TaskFileEntry;
|
||||
// Use the filename from backend if available, otherwise extract from path
|
||||
const fileName =
|
||||
fileInfoEntry.filename ||
|
||||
filePath.split("/").pop() ||
|
||||
filePath;
|
||||
const fileStatus = fileInfoEntry.status ?? "processing";
|
||||
// Only show toasts if we have previous data and status has changed
|
||||
if (
|
||||
(previousTask && previousTask.status !== currentTask.status) ||
|
||||
(!previousTask && previousTasksRef.current.length !== 0)
|
||||
) {
|
||||
// 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();
|
||||
|
||||
// Map backend file status to our TaskFile status
|
||||
let mappedStatus: TaskFile["status"];
|
||||
switch (fileStatus) {
|
||||
case "pending":
|
||||
case "running":
|
||||
mappedStatus = "processing";
|
||||
break;
|
||||
case "completed":
|
||||
mappedStatus = "active";
|
||||
break;
|
||||
case "failed":
|
||||
mappedStatus = "failed";
|
||||
break;
|
||||
default:
|
||||
mappedStatus = "processing";
|
||||
}
|
||||
taskFileEntries.forEach(([filePath, fileInfo]) => {
|
||||
if (typeof fileInfo === "object" && fileInfo) {
|
||||
const fileInfoEntry = fileInfo as TaskFileEntry;
|
||||
// Use the filename from backend if available, otherwise extract from path
|
||||
const fileName =
|
||||
fileInfoEntry.filename || filePath.split("/").pop() || filePath;
|
||||
const fileStatus = fileInfoEntry.status ?? "processing";
|
||||
|
||||
const fileError = (() => {
|
||||
if (
|
||||
typeof fileInfoEntry.error === "string" &&
|
||||
fileInfoEntry.error.trim().length > 0
|
||||
) {
|
||||
return fileInfoEntry.error.trim();
|
||||
}
|
||||
if (
|
||||
mappedStatus === "failed" &&
|
||||
typeof currentTask.error === "string" &&
|
||||
currentTask.error.trim().length > 0
|
||||
) {
|
||||
return currentTask.error.trim();
|
||||
}
|
||||
return undefined;
|
||||
})();
|
||||
// Map backend file status to our TaskFile status
|
||||
let mappedStatus: TaskFile["status"];
|
||||
switch (fileStatus) {
|
||||
case "pending":
|
||||
case "running":
|
||||
mappedStatus = "processing";
|
||||
break;
|
||||
case "completed":
|
||||
mappedStatus = "active";
|
||||
break;
|
||||
case "failed":
|
||||
mappedStatus = "failed";
|
||||
break;
|
||||
default:
|
||||
mappedStatus = "processing";
|
||||
}
|
||||
|
||||
setFiles((prevFiles) => {
|
||||
const existingFileIndex = prevFiles.findIndex(
|
||||
(f) =>
|
||||
f.source_url === filePath &&
|
||||
f.task_id === currentTask.task_id,
|
||||
);
|
||||
const fileError = (() => {
|
||||
if (
|
||||
typeof fileInfoEntry.error === "string" &&
|
||||
fileInfoEntry.error.trim().length > 0
|
||||
) {
|
||||
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
|
||||
let connectorType = "local";
|
||||
if (filePath.includes("/") && !filePath.startsWith("/")) {
|
||||
// Likely S3 key format (bucket/path/file.ext)
|
||||
connectorType = "s3";
|
||||
}
|
||||
setFiles((prevFiles) => {
|
||||
const existingFileIndex = prevFiles.findIndex(
|
||||
(f) =>
|
||||
f.source_url === filePath &&
|
||||
f.task_id === currentTask.task_id,
|
||||
);
|
||||
|
||||
const fileEntry: TaskFile = {
|
||||
filename: fileName,
|
||||
mimetype: "", // We don't have this info from the task
|
||||
source_url: filePath,
|
||||
size: 0, // We don't have this info from the task
|
||||
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,
|
||||
};
|
||||
// Detect connector type based on file path or other indicators
|
||||
let connectorType = "local";
|
||||
if (filePath.includes("/") && !filePath.startsWith("/")) {
|
||||
// Likely S3 key format (bucket/path/file.ext)
|
||||
connectorType = "s3";
|
||||
}
|
||||
|
||||
if (existingFileIndex >= 0) {
|
||||
// Update existing file
|
||||
const updatedFiles = [...prevFiles];
|
||||
updatedFiles[existingFileIndex] = fileEntry;
|
||||
return updatedFiles;
|
||||
} else {
|
||||
// Add new file
|
||||
return [...prevFiles, fileEntry];
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
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;
|
||||
const fileEntry: TaskFile = {
|
||||
filename: fileName,
|
||||
mimetype: "", // We don't have this info from the task
|
||||
source_url: filePath,
|
||||
size: 0, // We don't have this info from the task
|
||||
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,
|
||||
};
|
||||
|
||||
let description = "";
|
||||
if (failedFiles > 0) {
|
||||
description = `${successfulFiles} file${
|
||||
successfulFiles !== 1 ? "s" : ""
|
||||
} uploaded successfully, ${failedFiles} file${
|
||||
failedFiles !== 1 ? "s" : ""
|
||||
} failed`;
|
||||
} else {
|
||||
description = `${successfulFiles} file${
|
||||
successfulFiles !== 1 ? "s" : ""
|
||||
} uploaded successfully`;
|
||||
}
|
||||
if (existingFileIndex >= 0) {
|
||||
// Update existing file
|
||||
const updatedFiles = [...prevFiles];
|
||||
updatedFiles[existingFileIndex] = fileEntry;
|
||||
return updatedFiles;
|
||||
} else {
|
||||
// Add new file
|
||||
return [...prevFiles, fileEntry];
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
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", {
|
||||
description,
|
||||
action: {
|
||||
label: "View",
|
||||
onClick: () => {
|
||||
setIsMenuOpen(true);
|
||||
setIsRecentTasksExpanded(true);
|
||||
},
|
||||
},
|
||||
});
|
||||
setTimeout(() => {
|
||||
setFiles((prevFiles) =>
|
||||
prevFiles.filter(
|
||||
(file) =>
|
||||
file.task_id !== currentTask.task_id ||
|
||||
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"
|
||||
}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
let description = "";
|
||||
if (failedFiles > 0) {
|
||||
description = `${successfulFiles} file${
|
||||
successfulFiles !== 1 ? "s" : ""
|
||||
} uploaded successfully, ${failedFiles} file${
|
||||
failedFiles !== 1 ? "s" : ""
|
||||
} failed`;
|
||||
} else {
|
||||
description = `${successfulFiles} file${
|
||||
successfulFiles !== 1 ? "s" : ""
|
||||
} uploaded successfully`;
|
||||
}
|
||||
if (!isOnboardingActive()) {
|
||||
toast.success("Task completed", {
|
||||
description,
|
||||
action: {
|
||||
label: "View",
|
||||
onClick: () => {
|
||||
setIsMenuOpen(true);
|
||||
setIsRecentTasksExpanded(true);
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
setTimeout(() => {
|
||||
setFiles((prevFiles) =>
|
||||
prevFiles.filter(
|
||||
(file) =>
|
||||
file.task_id !== currentTask.task_id ||
|
||||
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
|
||||
previousTasksRef.current = tasks;
|
||||
}, [tasks, refetchSearch]);
|
||||
// Store current tasks as previous for next comparison
|
||||
previousTasksRef.current = tasks;
|
||||
}, [tasks, refetchSearch, isOnboardingActive]);
|
||||
|
||||
const addTask = useCallback(
|
||||
(_taskId: string) => {
|
||||
// React Query will automatically handle polling when tasks are active
|
||||
// Just trigger a refetch to get the latest data
|
||||
setTimeout(() => {
|
||||
refetchTasks();
|
||||
}, 500);
|
||||
},
|
||||
[refetchTasks],
|
||||
);
|
||||
const addTask = useCallback(
|
||||
(_taskId: string) => {
|
||||
// React Query will automatically handle polling when tasks are active
|
||||
// Just trigger a refetch to get the latest data
|
||||
setTimeout(() => {
|
||||
refetchTasks();
|
||||
}, 500);
|
||||
},
|
||||
[refetchTasks],
|
||||
);
|
||||
|
||||
const refreshTasks = useCallback(async () => {
|
||||
setFiles([]);
|
||||
await refetchTasks();
|
||||
}, [refetchTasks]);
|
||||
const refreshTasks = useCallback(async () => {
|
||||
setFiles([]);
|
||||
await refetchTasks();
|
||||
}, [refetchTasks]);
|
||||
|
||||
const cancelTask = useCallback(
|
||||
async (taskId: string) => {
|
||||
cancelTaskMutation.mutate({ taskId });
|
||||
},
|
||||
[cancelTaskMutation],
|
||||
);
|
||||
|
||||
const cancelTask = useCallback(
|
||||
async (taskId: string) => {
|
||||
cancelTaskMutation.mutate({ taskId });
|
||||
},
|
||||
[cancelTaskMutation],
|
||||
);
|
||||
const toggleMenu = useCallback(() => {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
const toggleMenu = useCallback(() => {
|
||||
setIsMenuOpen((prev) => !prev);
|
||||
}, []);
|
||||
// Determine if we're polling based on React Query's refetch interval
|
||||
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 isPolling =
|
||||
isFetching &&
|
||||
tasks.some(
|
||||
(task) =>
|
||||
task.status === "pending" ||
|
||||
task.status === "running" ||
|
||||
task.status === "processing",
|
||||
);
|
||||
const value: TaskContextType = {
|
||||
tasks,
|
||||
files,
|
||||
addTask,
|
||||
addFiles,
|
||||
refreshTasks,
|
||||
cancelTask,
|
||||
isPolling,
|
||||
isFetching,
|
||||
isMenuOpen,
|
||||
toggleMenu,
|
||||
isRecentTasksExpanded,
|
||||
setRecentTasksExpanded: setIsRecentTasksExpanded,
|
||||
isLoading,
|
||||
error,
|
||||
};
|
||||
|
||||
const value: TaskContextType = {
|
||||
tasks,
|
||||
files,
|
||||
addTask,
|
||||
addFiles,
|
||||
refreshTasks,
|
||||
cancelTask,
|
||||
isPolling,
|
||||
isFetching,
|
||||
isMenuOpen,
|
||||
toggleMenu,
|
||||
isRecentTasksExpanded,
|
||||
setRecentTasksExpanded: setIsRecentTasksExpanded,
|
||||
isLoading,
|
||||
error,
|
||||
};
|
||||
|
||||
return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
|
||||
return <TaskContext.Provider value={value}>{children}</TaskContext.Provider>;
|
||||
}
|
||||
|
||||
export function useTask() {
|
||||
const context = useContext(TaskContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useTask must be used within a TaskProvider");
|
||||
}
|
||||
return context;
|
||||
const context = useContext(TaskContext);
|
||||
if (context === undefined) {
|
||||
throw new Error("useTask must be used within a TaskProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue