Merge branch 'main' into docs-perf-test
This commit is contained in:
Mendon Kissling
commit
ea7c7954e2
24 changed files with 900 additions and 815 deletions
|
|
@ -594,8 +594,8 @@ export function Navigation({
|
|||
No documents yet
|
||||
</div>
|
||||
) : (
|
||||
newConversationFiles?.map((file) => (
|
||||
<div key={`${file}`} className="flex-1 min-w-0 px-3">
|
||||
newConversationFiles?.map((file, index) => (
|
||||
<div key={`${file}-${index}`} className="flex-1 min-w-0 px-3">
|
||||
<div className="text-mmd font-medium text-foreground truncate">
|
||||
{file}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
|
|||
import { Message } from "./message";
|
||||
|
||||
interface UserMessageProps {
|
||||
content: string;
|
||||
content: string | undefined;
|
||||
isCompleted?: boolean;
|
||||
animate?: boolean;
|
||||
files?: string;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { type EndpointType, useChat } from "@/contexts/chat-context";
|
|||
import { useKnowledgeFilter } from "@/contexts/knowledge-filter-context";
|
||||
import { useTask } from "@/contexts/task-context";
|
||||
import { useChatStreaming } from "@/hooks/useChatStreaming";
|
||||
import { FILES_REGEX } from "@/lib/constants";
|
||||
import { FILE_CONFIRMATION, FILES_REGEX } from "@/lib/constants";
|
||||
import { useLoadingStore } from "@/stores/loadingStore";
|
||||
import { useGetNudgesQuery } from "../api/queries/useGetNudgesQuery";
|
||||
import { AssistantMessage } from "./components/assistant-message";
|
||||
|
|
@ -911,9 +911,9 @@ function ChatPage() {
|
|||
}
|
||||
|
||||
// Only send message if there's input text
|
||||
if (input.trim()) {
|
||||
if (input.trim() || uploadedFile) {
|
||||
// Pass the responseId from upload (if any) to handleSendMessage
|
||||
handleSendMessage(input, uploadedResponseId || undefined);
|
||||
handleSendMessage(!input.trim() ? FILE_CONFIRMATION : input, uploadedResponseId || undefined);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1154,6 +1154,8 @@ function ChatPage() {
|
|||
}
|
||||
};
|
||||
|
||||
console.log(messages)
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Debug header - only show in debug mode */}
|
||||
|
|
@ -1236,7 +1238,10 @@ function ChatPage() {
|
|||
? message.source !== "langflow"
|
||||
: false
|
||||
}
|
||||
content={message.content}
|
||||
content={index >= 2
|
||||
&& (messages[index - 2]?.content.match(
|
||||
FILES_REGEX,
|
||||
)?.[0] ?? undefined) && message.content === FILE_CONFIRMATION ? undefined : message.content}
|
||||
files={
|
||||
index >= 2
|
||||
? messages[index - 2]?.content.match(
|
||||
|
|
|
|||
|
|
@ -24,9 +24,6 @@ export function OnboardingContent({
|
|||
const [assistantMessage, setAssistantMessage] = useState<Message | null>(
|
||||
null,
|
||||
);
|
||||
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
|
||||
const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
|
||||
const [hasStartedOnboarding, setHasStartedOnboarding] = useState<boolean>(false);
|
||||
|
||||
const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
|
||||
onComplete: (message, newResponseId) => {
|
||||
|
|
@ -81,18 +78,14 @@ export function OnboardingContent({
|
|||
<OnboardingStep
|
||||
isVisible={currentStep >= 0}
|
||||
isCompleted={currentStep > 0}
|
||||
showCompleted={true}
|
||||
text="Let's get started by setting up your model provider."
|
||||
isLoadingModels={isLoadingModels}
|
||||
loadingStatus={loadingStatus}
|
||||
reserveSpaceForThinking={!hasStartedOnboarding}
|
||||
>
|
||||
<OnboardingCard
|
||||
onComplete={() => {
|
||||
setHasStartedOnboarding(true);
|
||||
handleStepComplete();
|
||||
}}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
setLoadingStatus={setLoadingStatus}
|
||||
isCompleted={currentStep > 0}
|
||||
/>
|
||||
</OnboardingStep>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,191 +2,126 @@ import { AnimatePresence, motion } from "motion/react";
|
|||
import { type ReactNode, useEffect, useState } from "react";
|
||||
import { Message } from "@/app/chat/components/message";
|
||||
import DogIcon from "@/components/logo/dog-icon";
|
||||
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
|
||||
import { MarkdownRenderer } from "@/components/markdown-renderer";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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,
|
||||
}: 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);
|
||||
|
||||
// Cycle through loading status messages once
|
||||
useEffect(() => {
|
||||
if (!isLoadingModels || loadingStatus.length === 0) {
|
||||
setCurrentStatusIndex(0);
|
||||
return;
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!isVisible) {
|
||||
setDisplayedText("");
|
||||
setShowChildren(false);
|
||||
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
|
||||
if (isCompleted) {
|
||||
setDisplayedText(text);
|
||||
setShowChildren(true);
|
||||
return;
|
||||
}
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isLoadingModels, loadingStatus]);
|
||||
let currentIndex = 0;
|
||||
setDisplayedText("");
|
||||
setShowChildren(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVisible) {
|
||||
setDisplayedText("");
|
||||
setShowChildren(false);
|
||||
return;
|
||||
}
|
||||
const interval = setInterval(() => {
|
||||
if (currentIndex < text.length) {
|
||||
setDisplayedText(text.slice(0, currentIndex + 1));
|
||||
currentIndex++;
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
setShowChildren(true);
|
||||
}
|
||||
}, 20); // 20ms per character
|
||||
|
||||
if (isCompleted) {
|
||||
setDisplayedText(text);
|
||||
setShowChildren(true);
|
||||
return;
|
||||
}
|
||||
return () => clearInterval(interval);
|
||||
}, [text, isVisible, isCompleted]);
|
||||
|
||||
let currentIndex = 0;
|
||||
setDisplayedText("");
|
||||
setShowChildren(false);
|
||||
if (!isVisible) return null;
|
||||
|
||||
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]);
|
||||
|
||||
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>
|
||||
{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>
|
||||
)}
|
||||
{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-4">{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;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
import { ArrowRight } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface ProgressBarProps {
|
||||
currentStep: number;
|
||||
totalSteps: number;
|
||||
onSkip?: () => void;
|
||||
}
|
||||
|
||||
export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
|
||||
export function ProgressBar({ currentStep, totalSteps, onSkip }: ProgressBarProps) {
|
||||
const progressPercentage = ((currentStep + 1) / totalSteps) * 100;
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex items-center max-w-48 mx-auto gap-3">
|
||||
<div className="flex-1 h-1 bg-background rounded-full overflow-hidden">
|
||||
<div className="w-full flex items-center px-6 gap-4">
|
||||
<div className="flex-1" />
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-48 h-1 bg-background rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full transition-all duration-300 ease-in-out"
|
||||
style={{
|
||||
|
|
@ -22,6 +27,19 @@ export function ProgressBar({ currentStep, totalSteps }: ProgressBarProps) {
|
|||
{currentStep + 1}/{totalSteps}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 flex justify-end">
|
||||
{currentStep > 0 && onSkip && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onSkip}
|
||||
className="flex items-center gap-2 text-xs text-muted-foreground"
|
||||
>
|
||||
Skip onboarding
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,86 +2,206 @@
|
|||
|
||||
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",
|
||||
processingStartTime,
|
||||
}: {
|
||||
currentStep: number;
|
||||
setCurrentStep: (step: number) => void;
|
||||
steps: string[];
|
||||
currentStep: number;
|
||||
isCompleted: boolean;
|
||||
setCurrentStep: (step: number) => void;
|
||||
steps: string[];
|
||||
storageKey?: string;
|
||||
processingStartTime?: number | null;
|
||||
}) {
|
||||
const [startTime, setStartTime] = useState<number | null>(null);
|
||||
const [elapsedTime, setElapsedTime] = useState<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentStep < steps.length - 1) {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentStep(currentStep + 1);
|
||||
}, 1500);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [currentStep, setCurrentStep, steps]);
|
||||
// Initialize start time from prop or local storage
|
||||
useEffect(() => {
|
||||
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 (processingStartTime) {
|
||||
// Use the start time passed from parent (when user clicked Complete)
|
||||
setStartTime(processingStartTime);
|
||||
}
|
||||
}, [storageKey, isCompleted, processingStartTime]);
|
||||
|
||||
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());
|
||||
}
|
||||
}, [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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,11 @@ export function IBMOnboarding({
|
|||
sampleDataset,
|
||||
setSampleDataset,
|
||||
setIsLoadingModels,
|
||||
setLoadingStatus,
|
||||
}: {
|
||||
setSettings: (settings: OnboardingVariables) => void;
|
||||
sampleDataset: boolean;
|
||||
setSampleDataset: (dataset: boolean) => void;
|
||||
setIsLoadingModels?: (isLoading: boolean) => void;
|
||||
setLoadingStatus?: (status: string[]) => void;
|
||||
}) {
|
||||
const [endpoint, setEndpoint] = useState("https://us-south.ml.cloud.ibm.com");
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
|
|
@ -91,6 +89,10 @@ export function IBMOnboarding({
|
|||
setSampleDataset(dataset);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoadingModels?.(isLoadingModels);
|
||||
}, [isLoadingModels, setIsLoadingModels]);
|
||||
|
||||
// Update settings when values change
|
||||
useUpdateSettings(
|
||||
"watsonx",
|
||||
|
|
@ -104,18 +106,6 @@ export function IBMOnboarding({
|
|||
setSettings,
|
||||
);
|
||||
|
||||
// Notify parent about loading state
|
||||
useEffect(() => {
|
||||
setIsLoadingModels?.(isLoadingModels);
|
||||
|
||||
// Set detailed loading status
|
||||
if (isLoadingModels) {
|
||||
const status = ["Connecting to IBM watsonx.ai", "Fetching language models", "Fetching embedding models"];
|
||||
setLoadingStatus?.(status);
|
||||
} else {
|
||||
setLoadingStatus?.([]);
|
||||
}
|
||||
}, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
|
|
|
|||
|
|
@ -14,13 +14,11 @@ export function OllamaOnboarding({
|
|||
sampleDataset,
|
||||
setSampleDataset,
|
||||
setIsLoadingModels,
|
||||
setLoadingStatus,
|
||||
}: {
|
||||
setSettings: (settings: OnboardingVariables) => void;
|
||||
sampleDataset: boolean;
|
||||
setSampleDataset: (dataset: boolean) => void;
|
||||
setIsLoadingModels?: (isLoading: boolean) => void;
|
||||
setLoadingStatus?: (status: string[]) => void;
|
||||
}) {
|
||||
const [endpoint, setEndpoint] = useState(`http://localhost:11434`);
|
||||
const [showConnecting, setShowConnecting] = useState(false);
|
||||
|
|
@ -74,20 +72,7 @@ export function OllamaOnboarding({
|
|||
},
|
||||
setSettings,
|
||||
);
|
||||
|
||||
// Notify parent about loading state
|
||||
useEffect(() => {
|
||||
setIsLoadingModels?.(isLoadingModels);
|
||||
|
||||
// Set detailed loading status
|
||||
if (isLoadingModels) {
|
||||
const status = ["Connecting to Ollama", "Fetching language models", "Fetching embedding models"];
|
||||
setLoadingStatus?.(status);
|
||||
} else {
|
||||
setLoadingStatus?.([]);
|
||||
}
|
||||
}, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
|
||||
|
||||
|
||||
// Check validation state based on models query
|
||||
const hasConnectionError = debouncedEndpoint && modelsError;
|
||||
const hasNoModels =
|
||||
|
|
|
|||
|
|
@ -27,24 +27,23 @@ import { OpenAIOnboarding } from "./openai-onboarding";
|
|||
|
||||
interface OnboardingCardProps {
|
||||
onComplete: () => void;
|
||||
isCompleted?: boolean;
|
||||
setIsLoadingModels?: (isLoading: boolean) => void;
|
||||
setLoadingStatus?: (status: string[]) => void;
|
||||
}
|
||||
|
||||
|
||||
const STEP_LIST = [
|
||||
"Setting up your model provider",
|
||||
"Defining schema",
|
||||
"Configuring Langflow",
|
||||
"Ingesting sample data",
|
||||
"Setting up your model provider",
|
||||
"Defining schema",
|
||||
"Configuring Langflow",
|
||||
"Ingesting sample data",
|
||||
];
|
||||
|
||||
const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
|
||||
|
||||
const OnboardingCard = ({
|
||||
onComplete,
|
||||
setIsLoadingModels: setIsLoadingModelsParent,
|
||||
setLoadingStatus: setLoadingStatusParent,
|
||||
isCompleted = false,
|
||||
}: OnboardingCardProps) => {
|
||||
const { isHealthy: isDoclingHealthy } = useDoclingHealth();
|
||||
|
||||
|
|
@ -54,40 +53,14 @@ const OnboardingCard = ({
|
|||
|
||||
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
|
||||
|
||||
const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
|
||||
const [loadingStep, setLoadingStep] = useState<number>(0);
|
||||
|
||||
const [currentStatusIndex, setCurrentStatusIndex] = useState<number>(0);
|
||||
|
||||
// Pass loading state to parent
|
||||
// Reset loading step when models start loading
|
||||
useEffect(() => {
|
||||
setIsLoadingModelsParent?.(isLoadingModels);
|
||||
}, [isLoadingModels, setIsLoadingModelsParent]);
|
||||
|
||||
useEffect(() => {
|
||||
setLoadingStatusParent?.(loadingStatus);
|
||||
}, [loadingStatus, setLoadingStatusParent]);
|
||||
|
||||
// Cycle through loading status messages once
|
||||
useEffect(() => {
|
||||
if (!isLoadingModels || loadingStatus.length === 0) {
|
||||
setCurrentStatusIndex(0);
|
||||
return;
|
||||
if (isLoadingModels) {
|
||||
setLoadingStep(0);
|
||||
}
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setCurrentStatusIndex((prev) => {
|
||||
const nextIndex = prev + 1;
|
||||
// Stop at the last message
|
||||
if (nextIndex >= loadingStatus.length - 1) {
|
||||
clearInterval(interval);
|
||||
return loadingStatus.length - 1;
|
||||
}
|
||||
return nextIndex;
|
||||
});
|
||||
}, 1500); // Change status every 1.5 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isLoadingModels, loadingStatus]);
|
||||
}, [isLoadingModels]);
|
||||
|
||||
const handleSetModelProvider = (provider: string) => {
|
||||
setModelProvider(provider);
|
||||
|
|
@ -104,7 +77,13 @@ const OnboardingCard = ({
|
|||
llm_model: "",
|
||||
});
|
||||
|
||||
const [currentStep, setCurrentStep] = useState<number | null>(null);
|
||||
const [currentStep, setCurrentStep] = useState<number | null>(
|
||||
isCompleted ? TOTAL_PROVIDER_STEPS : null,
|
||||
);
|
||||
|
||||
const [processingStartTime, setProcessingStartTime] = useState<number | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
// Query tasks to track completion
|
||||
const { data: tasks } = useGetTasksQuery({
|
||||
|
|
@ -129,7 +108,8 @@ const OnboardingCard = ({
|
|||
// If no active tasks and we've started onboarding, complete it
|
||||
if (
|
||||
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
|
||||
tasks.length > 0
|
||||
tasks.length > 0 &&
|
||||
!isCompleted
|
||||
) {
|
||||
// Set to final step to show "Done"
|
||||
setCurrentStep(TOTAL_PROVIDER_STEPS);
|
||||
|
|
@ -138,7 +118,7 @@ const OnboardingCard = ({
|
|||
onComplete();
|
||||
}, 1000);
|
||||
}
|
||||
}, [tasks, currentStep, onComplete]);
|
||||
}, [tasks, currentStep, onComplete, isCompleted]);
|
||||
|
||||
// Mutations
|
||||
const onboardingMutation = useOnboardingMutation({
|
||||
|
|
@ -186,6 +166,8 @@ const OnboardingCard = ({
|
|||
onboardingData.project_id = settings.project_id;
|
||||
}
|
||||
|
||||
// Record the start time when user clicks Complete
|
||||
setProcessingStartTime(Date.now());
|
||||
onboardingMutation.mutate(onboardingData);
|
||||
setCurrentStep(0);
|
||||
};
|
||||
|
|
@ -208,43 +190,91 @@ const OnboardingCard = ({
|
|||
onValueChange={handleSetModelProvider}
|
||||
>
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger
|
||||
value="openai"
|
||||
>
|
||||
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "openai" ? "bg-white" : "bg-muted")}>
|
||||
<OpenAILogo className={cn("w-4 h-4 shrink-0", modelProvider === "openai" ? "text-black" : "text-muted-foreground")} />
|
||||
<TabsTrigger value="openai">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
|
||||
modelProvider === "openai" ? "bg-white" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
<OpenAILogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "openai"
|
||||
? "text-black"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
OpenAI
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="watsonx"
|
||||
>
|
||||
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted")}>
|
||||
<IBMLogo className={cn("w-4 h-4 shrink-0", modelProvider === "watsonx" ? "text-white" : "text-muted-foreground")} />
|
||||
<TabsTrigger value="watsonx">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
|
||||
modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
<IBMLogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "watsonx"
|
||||
? "text-white"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
IBM watsonx.ai
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="ollama"
|
||||
>
|
||||
<div className={cn("flex items-center justify-center gap-2 w-8 h-8 rounded-md", modelProvider === "ollama" ? "bg-white" : "bg-muted")}>
|
||||
<TabsTrigger value="ollama">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
|
||||
modelProvider === "ollama" ? "bg-white" : "bg-muted",
|
||||
)}
|
||||
>
|
||||
<OllamaLogo
|
||||
className={cn(
|
||||
"w-4 h-4 shrink-0",
|
||||
modelProvider === "ollama" ? "text-black" : "text-muted-foreground",
|
||||
modelProvider === "ollama"
|
||||
? "text-black"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
Ollama
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
<AnimatePresence>
|
||||
{isLoadingModels && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.1, ease: "easeInOut" }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="py-3">
|
||||
<AnimatedProviderSteps
|
||||
currentStep={loadingStep}
|
||||
isCompleted={false}
|
||||
setCurrentStep={setLoadingStep}
|
||||
steps={[
|
||||
"Connecting to the provider",
|
||||
"Fetching language models",
|
||||
"Fetching embedding models",
|
||||
]}
|
||||
storageKey="model-loading-steps"
|
||||
/></div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<TabsContent value="openai">
|
||||
<OpenAIOnboarding
|
||||
setSettings={setSettings}
|
||||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
setLoadingStatus={setLoadingStatus}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="watsonx">
|
||||
|
|
@ -253,7 +283,6 @@ const OnboardingCard = ({
|
|||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
setLoadingStatus={setLoadingStatus}
|
||||
/>
|
||||
</TabsContent>
|
||||
<TabsContent value="ollama">
|
||||
|
|
@ -262,36 +291,37 @@ const OnboardingCard = ({
|
|||
sampleDataset={sampleDataset}
|
||||
setSampleDataset={setSampleDataset}
|
||||
setIsLoadingModels={setIsLoadingModels}
|
||||
setLoadingStatus={setLoadingStatus}
|
||||
/>
|
||||
</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
|
||||
|
||||
|
||||
<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>
|
||||
)}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
|
|
@ -302,10 +332,12 @@ const OnboardingCard = ({
|
|||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
||||
>
|
||||
<AnimatedProviderSteps
|
||||
currentStep={currentStep}
|
||||
setCurrentStep={setCurrentStep}
|
||||
steps={STEP_LIST}
|
||||
/>
|
||||
currentStep={currentStep}
|
||||
isCompleted={isCompleted}
|
||||
setCurrentStep={setCurrentStep}
|
||||
steps={STEP_LIST}
|
||||
processingStartTime={processingStartTime}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
|
|
|||
|
|
@ -15,13 +15,11 @@ export function OpenAIOnboarding({
|
|||
sampleDataset,
|
||||
setSampleDataset,
|
||||
setIsLoadingModels,
|
||||
setLoadingStatus,
|
||||
}: {
|
||||
setSettings: (settings: OnboardingVariables) => void;
|
||||
sampleDataset: boolean;
|
||||
setSampleDataset: (dataset: boolean) => void;
|
||||
setIsLoadingModels?: (isLoading: boolean) => void;
|
||||
setLoadingStatus?: (status: string[]) => void;
|
||||
}) {
|
||||
const [apiKey, setApiKey] = useState("");
|
||||
const [getFromEnv, setGetFromEnv] = useState(true);
|
||||
|
|
@ -62,6 +60,10 @@ export function OpenAIOnboarding({
|
|||
setEmbeddingModel("");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoadingModels?.(isLoadingModels);
|
||||
}, [isLoadingModels, setIsLoadingModels]);
|
||||
|
||||
// Update settings when values change
|
||||
useUpdateSettings(
|
||||
"openai",
|
||||
|
|
@ -72,19 +74,7 @@ export function OpenAIOnboarding({
|
|||
},
|
||||
setSettings,
|
||||
);
|
||||
|
||||
// Notify parent about loading state
|
||||
useEffect(() => {
|
||||
setIsLoadingModels?.(isLoadingModels);
|
||||
|
||||
// Set detailed loading status
|
||||
if (isLoadingModels) {
|
||||
const status = ["Connecting to OpenAI", "Fetching language models", "Fetching embedding models"];
|
||||
setLoadingStatus?.(status);
|
||||
} else {
|
||||
setLoadingStatus?.([]);
|
||||
}
|
||||
}, [isLoadingModels, setIsLoadingModels, setLoadingStatus]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-5">
|
||||
|
|
|
|||
|
|
@ -86,6 +86,14 @@ export function ChatRenderer({
|
|||
}
|
||||
};
|
||||
|
||||
const handleSkipOnboarding = () => {
|
||||
// Skip onboarding by marking it as complete
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.removeItem(ONBOARDING_STEP_KEY);
|
||||
}
|
||||
setShowLayout(true);
|
||||
};
|
||||
|
||||
// List of paths with smaller max-width
|
||||
const smallWidthPaths = ["/settings/connector/new"];
|
||||
const isSmallWidthPath = smallWidthPaths.includes(pathname);
|
||||
|
|
@ -149,6 +157,7 @@ export function ChatRenderer({
|
|||
className={cn(
|
||||
"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden",
|
||||
!showLayout && "absolute",
|
||||
showLayout && !isOnChatPage && "bg-background",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
|
|
@ -172,7 +181,7 @@ export function ChatRenderer({
|
|||
ease: "easeOut",
|
||||
delay: ANIMATION_DURATION,
|
||||
}}
|
||||
className={cn("w-full h-full 0v")}
|
||||
className={cn("w-full h-full")}
|
||||
>
|
||||
<div className={cn("w-full h-full", !showLayout && "hidden")}>
|
||||
{children}
|
||||
|
|
@ -195,6 +204,7 @@ export function ChatRenderer({
|
|||
<ProgressBar
|
||||
currentStep={currentStep}
|
||||
totalSteps={TOTAL_ONBOARDING_STEPS}
|
||||
onSkip={handleSkipOnboarding}
|
||||
/>
|
||||
</motion.div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,4 +35,6 @@ export const TOTAL_ONBOARDING_STEPS = 3;
|
|||
export const ONBOARDING_STEP_KEY = "onboarding_current_step";
|
||||
|
||||
export const FILES_REGEX =
|
||||
/(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;
|
||||
/(?<=I'm uploading a document called ['"])[^'"]+\.[^.]+(?=['"]\. Here is its content:)/;
|
||||
|
||||
export const FILE_CONFIRMATION = "Confirm that you received this file.";
|
||||
|
|
@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
|
|||
|
||||
[project]
|
||||
name = "openrag"
|
||||
version = "0.1.24"
|
||||
version = "0.1.25"
|
||||
description = "Add your description here"
|
||||
readme = "README.md"
|
||||
requires-python = ">=3.13"
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
../../../../documents/2506.08231v1.pdf
|
||||
|
|
@ -1 +0,0 @@
|
|||
../../../../documents/ai-human-resources.pdf
|
||||
1
src/tui/_assets/documents/docling.pdf
Symbolic link
1
src/tui/_assets/documents/docling.pdf
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../../../../documents/docling.pdf
|
||||
1
src/tui/_assets/documents/ibm_anthropic.pdf
Symbolic link
1
src/tui/_assets/documents/ibm_anthropic.pdf
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../../../../documents/ibm_anthropic.pdf
|
||||
1
src/tui/_assets/documents/openrag-documentation.pdf
Symbolic link
1
src/tui/_assets/documents/openrag-documentation.pdf
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../../../../documents/openrag-documentation.pdf
|
||||
|
|
@ -1 +0,0 @@
|
|||
../../../../flows/openrag_ingest_docling.json
|
||||
4
uv.lock
generated
4
uv.lock
generated
|
|
@ -1,5 +1,5 @@
|
|||
version = 1
|
||||
revision = 2
|
||||
revision = 3
|
||||
requires-python = ">=3.13"
|
||||
resolution-markers = [
|
||||
"platform_machine == 'x86_64' and sys_platform == 'linux'",
|
||||
|
|
@ -2352,7 +2352,7 @@ wheels = [
|
|||
|
||||
[[package]]
|
||||
name = "openrag"
|
||||
version = "0.1.24"
|
||||
version = "0.1.25"
|
||||
source = { editable = "." }
|
||||
dependencies = [
|
||||
{ name = "agentd" },
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue