fixed error not popping up on upload
This commit is contained in:
Lucas Oliveira
parent
3ffa405ae9
commit
358af97936
1 changed files with 368 additions and 222 deletions
|
|
@ -1,3 +1,4 @@
|
||||||
|
import { X } from "lucide-react";
|
||||||
import { AnimatePresence, motion } from "motion/react";
|
import { AnimatePresence, motion } from "motion/react";
|
||||||
import { type ChangeEvent, useEffect, useRef, useState } from "react";
|
import { type ChangeEvent, useEffect, useRef, useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
@ -7,262 +8,407 @@ import { useGetTasksQuery } from "@/app/api/queries/useGetTasksQuery";
|
||||||
import { AnimatedProviderSteps } from "@/app/onboarding/_components/animated-provider-steps";
|
import { AnimatedProviderSteps } from "@/app/onboarding/_components/animated-provider-steps";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
ONBOARDING_UPLOAD_STEPS_KEY,
|
ONBOARDING_UPLOAD_STEPS_KEY,
|
||||||
ONBOARDING_USER_DOC_FILTER_ID_KEY,
|
ONBOARDING_USER_DOC_FILTER_ID_KEY,
|
||||||
} from "@/lib/constants";
|
} from "@/lib/constants";
|
||||||
import { uploadFile } from "@/lib/upload-utils";
|
import { uploadFile } from "@/lib/upload-utils";
|
||||||
|
|
||||||
interface OnboardingUploadProps {
|
interface OnboardingUploadProps {
|
||||||
onComplete: () => void;
|
onComplete: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
|
const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
const [isUploading, setIsUploading] = useState(false);
|
||||||
const [currentStep, setCurrentStep] = useState<number | null>(null);
|
const [currentStep, setCurrentStep] = useState<number | null>(null);
|
||||||
const [uploadedFilename, setUploadedFilename] = useState<string | null>(null);
|
const [uploadedFilename, setUploadedFilename] = useState<string | null>(null);
|
||||||
const [uploadedTaskId, setUploadedTaskId] = useState<string | null>(null);
|
const [uploadedTaskId, setUploadedTaskId] = useState<string | null>(null);
|
||||||
const [shouldCreateFilter, setShouldCreateFilter] = useState(false);
|
const [shouldCreateFilter, setShouldCreateFilter] = useState(false);
|
||||||
const [isCreatingFilter, setIsCreatingFilter] = useState(false);
|
const [isCreatingFilter, setIsCreatingFilter] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
const createFilterMutation = useCreateFilter();
|
// Track which tasks we've already handled to prevent infinite loops
|
||||||
|
const handledFailedTasksRef = useRef<Set<string>>(new Set());
|
||||||
|
|
||||||
const STEP_LIST = [
|
const createFilterMutation = useCreateFilter();
|
||||||
"Uploading your document",
|
|
||||||
"Generating embeddings",
|
|
||||||
"Ingesting document",
|
|
||||||
"Processing your document",
|
|
||||||
];
|
|
||||||
|
|
||||||
// Query tasks to track completion
|
const STEP_LIST = [
|
||||||
const { data: tasks } = useGetTasksQuery({
|
"Uploading your document",
|
||||||
enabled: currentStep !== null, // Only poll when upload has started
|
"Generating embeddings",
|
||||||
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during upload
|
"Ingesting document",
|
||||||
});
|
"Processing your document",
|
||||||
|
];
|
||||||
|
|
||||||
const { refetch: refetchNudges } = useGetNudgesQuery(null);
|
// Query tasks to track completion
|
||||||
|
const { data: tasks } = useGetTasksQuery({
|
||||||
|
enabled: currentStep !== null, // Only poll when upload has started
|
||||||
|
refetchInterval: currentStep !== null ? 1000 : false, // Poll every 1 second during upload
|
||||||
|
});
|
||||||
|
|
||||||
// Monitor tasks and call onComplete when file processing is done
|
const { refetch: refetchNudges } = useGetNudgesQuery(null);
|
||||||
useEffect(() => {
|
|
||||||
if (currentStep === null || !tasks || !uploadedTaskId) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Find the task by task ID from the upload response
|
// Monitor tasks and call onComplete when file processing is done
|
||||||
const matchingTask = tasks.find((task) => task.task_id === uploadedTaskId);
|
useEffect(() => {
|
||||||
|
if (currentStep === null || !tasks || !uploadedTaskId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// If no matching task found, wait for it to appear
|
// Find the task by task ID from the upload response
|
||||||
if (!matchingTask) {
|
const matchingTask = tasks.find((task) => task.task_id === uploadedTaskId);
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if the matching task is still active (pending, running, or processing)
|
// If no matching task found, wait for it to appear
|
||||||
const isTaskActive =
|
if (!matchingTask) {
|
||||||
matchingTask.status === "pending" ||
|
return;
|
||||||
matchingTask.status === "running" ||
|
}
|
||||||
matchingTask.status === "processing";
|
|
||||||
|
|
||||||
// If task is completed or has processed files, complete the onboarding step
|
// Skip if this task was already handled as a failed task (from a previous failed upload)
|
||||||
if (!isTaskActive || (matchingTask.processed_files ?? 0) > 0) {
|
// This prevents processing old failed tasks when a new upload starts
|
||||||
// Set to final step to show "Done"
|
if (handledFailedTasksRef.current.has(matchingTask.task_id)) {
|
||||||
setCurrentStep(STEP_LIST.length);
|
// Check if it's a failed task that we've already handled
|
||||||
|
const hasFailedFile =
|
||||||
|
matchingTask.files &&
|
||||||
|
Object.values(matchingTask.files).some(
|
||||||
|
(file) => file.status === "failed" || file.status === "error",
|
||||||
|
);
|
||||||
|
if (hasFailedFile) {
|
||||||
|
// This is an old failed task that we've already handled, ignore it
|
||||||
|
console.log(
|
||||||
|
"Skipping already-handled failed task:",
|
||||||
|
matchingTask.task_id,
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// If it's not a failed task, remove it from handled list (it might have succeeded on retry)
|
||||||
|
handledFailedTasksRef.current.delete(matchingTask.task_id);
|
||||||
|
}
|
||||||
|
|
||||||
// Create knowledge filter for uploaded document if requested
|
// Check if any file failed in the matching task
|
||||||
// Guard against race condition: only create if not already creating
|
const hasFailedFile = (() => {
|
||||||
if (shouldCreateFilter && uploadedFilename && !isCreatingFilter) {
|
// Must have files object
|
||||||
// Reset flags immediately (synchronously) to prevent duplicate creation
|
if (!matchingTask.files || typeof matchingTask.files !== "object") {
|
||||||
setShouldCreateFilter(false);
|
return false;
|
||||||
const filename = uploadedFilename;
|
}
|
||||||
setUploadedFilename(null);
|
|
||||||
setIsCreatingFilter(true);
|
|
||||||
|
|
||||||
// Get display name from filename (remove extension for cleaner name)
|
const fileEntries = Object.values(matchingTask.files);
|
||||||
const displayName = filename.includes(".")
|
|
||||||
? filename.substring(0, filename.lastIndexOf("."))
|
|
||||||
: filename;
|
|
||||||
|
|
||||||
const queryData = JSON.stringify({
|
// Must have at least one file
|
||||||
query: "",
|
if (fileEntries.length === 0) {
|
||||||
filters: {
|
return false;
|
||||||
data_sources: [filename],
|
}
|
||||||
document_types: ["*"],
|
|
||||||
owners: ["*"],
|
|
||||||
connector_types: ["*"],
|
|
||||||
},
|
|
||||||
limit: 10,
|
|
||||||
scoreThreshold: 0,
|
|
||||||
color: "green",
|
|
||||||
icon: "file",
|
|
||||||
});
|
|
||||||
|
|
||||||
createFilterMutation
|
// Check if any file has failed status
|
||||||
.mutateAsync({
|
return fileEntries.some(
|
||||||
name: displayName,
|
(file) => file.status === "failed" || file.status === "error",
|
||||||
description: `Filter for ${filename}`,
|
);
|
||||||
queryData: queryData,
|
})();
|
||||||
})
|
|
||||||
.then((result) => {
|
|
||||||
if (result.filter?.id && typeof window !== "undefined") {
|
|
||||||
localStorage.setItem(
|
|
||||||
ONBOARDING_USER_DOC_FILTER_ID_KEY,
|
|
||||||
result.filter.id,
|
|
||||||
);
|
|
||||||
console.log(
|
|
||||||
"Created knowledge filter for uploaded document",
|
|
||||||
result.filter.id,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error("Failed to create knowledge filter:", error);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
setIsCreatingFilter(false);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refetch nudges to get new ones
|
// If any file failed, show error and jump back one step (like onboarding-card.tsx)
|
||||||
refetchNudges();
|
// Only handle if we haven't already handled this task
|
||||||
|
if (
|
||||||
|
hasFailedFile &&
|
||||||
|
!isCreatingFilter &&
|
||||||
|
!handledFailedTasksRef.current.has(matchingTask.task_id)
|
||||||
|
) {
|
||||||
|
console.error("File failed in task, jumping back one step", matchingTask);
|
||||||
|
|
||||||
// Wait a bit before completing
|
// Mark this task as handled to prevent infinite loops
|
||||||
setTimeout(() => {
|
handledFailedTasksRef.current.add(matchingTask.task_id);
|
||||||
onComplete();
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
tasks,
|
|
||||||
currentStep,
|
|
||||||
onComplete,
|
|
||||||
refetchNudges,
|
|
||||||
shouldCreateFilter,
|
|
||||||
uploadedFilename,
|
|
||||||
uploadedTaskId,
|
|
||||||
createFilterMutation,
|
|
||||||
isCreatingFilter,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const resetFileInput = () => {
|
// Extract error messages from failed files
|
||||||
if (fileInputRef.current) {
|
const errorMessages: string[] = [];
|
||||||
fileInputRef.current.value = "";
|
if (matchingTask.files) {
|
||||||
}
|
Object.values(matchingTask.files).forEach((file) => {
|
||||||
};
|
if (
|
||||||
|
(file.status === "failed" || file.status === "error") &&
|
||||||
|
file.error
|
||||||
|
) {
|
||||||
|
errorMessages.push(file.error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const handleUploadClick = () => {
|
// Also check task-level error
|
||||||
fileInputRef.current?.click();
|
if (matchingTask.error) {
|
||||||
};
|
errorMessages.push(matchingTask.error);
|
||||||
|
}
|
||||||
|
|
||||||
const performUpload = async (file: File) => {
|
// Use the first error message, or a generic message if no errors found
|
||||||
setIsUploading(true);
|
const errorMessage =
|
||||||
try {
|
errorMessages.length > 0
|
||||||
setCurrentStep(0);
|
? errorMessages[0]
|
||||||
const result = await uploadFile(file, true, true); // Pass createFilter=true
|
: "Document failed to ingest. Please try again with a different file.";
|
||||||
console.log("Document upload task started successfully");
|
|
||||||
|
|
||||||
// Store task ID to track the specific upload task
|
// Set error message and jump back one step
|
||||||
if (result.taskId) {
|
setError(errorMessage);
|
||||||
setUploadedTaskId(result.taskId);
|
setCurrentStep(STEP_LIST.length);
|
||||||
}
|
|
||||||
|
|
||||||
// Store filename and createFilter flag in state to create filter after ingestion succeeds
|
// Clear filter creation flags since ingestion failed
|
||||||
if (result.createFilter && result.filename) {
|
setShouldCreateFilter(false);
|
||||||
setUploadedFilename(result.filename);
|
setUploadedFilename(null);
|
||||||
setShouldCreateFilter(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Move to processing step - task monitoring will handle completion
|
// Jump back one step after 1 second (go back to upload step)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setCurrentStep(1);
|
setCurrentStep(null);
|
||||||
}, 1500);
|
}, 1000);
|
||||||
} catch (error) {
|
return;
|
||||||
const errorMessage = error instanceof Error ? error.message : "Upload failed";
|
}
|
||||||
console.error("Upload failed", errorMessage);
|
|
||||||
|
|
||||||
// Dispatch event that chat context can listen to
|
// Check if the matching task is still active (pending, running, or processing)
|
||||||
// This avoids circular dependency issues
|
const isTaskActive =
|
||||||
if (typeof window !== "undefined") {
|
matchingTask.status === "pending" ||
|
||||||
window.dispatchEvent(
|
matchingTask.status === "running" ||
|
||||||
new CustomEvent("ingestionFailed", {
|
matchingTask.status === "processing";
|
||||||
detail: { source: "onboarding" },
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show error toast notification
|
// If task is completed successfully (no failures) and has processed files, complete the onboarding step
|
||||||
toast.error("Document upload failed", {
|
if (
|
||||||
description: errorMessage,
|
(!isTaskActive || (matchingTask.processed_files ?? 0) > 0) &&
|
||||||
duration: 5000,
|
!hasFailedFile
|
||||||
});
|
) {
|
||||||
|
// Set to final step to show "Done"
|
||||||
|
setCurrentStep(STEP_LIST.length);
|
||||||
|
|
||||||
// Reset on error
|
// Create knowledge filter for uploaded document if requested
|
||||||
setCurrentStep(null);
|
// Guard against race condition: only create if not already creating
|
||||||
setUploadedTaskId(null);
|
if (shouldCreateFilter && uploadedFilename && !isCreatingFilter) {
|
||||||
} finally {
|
// Reset flags immediately (synchronously) to prevent duplicate creation
|
||||||
setIsUploading(false);
|
setShouldCreateFilter(false);
|
||||||
}
|
const filename = uploadedFilename;
|
||||||
};
|
setUploadedFilename(null);
|
||||||
|
setIsCreatingFilter(true);
|
||||||
|
|
||||||
const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
// Get display name from filename (remove extension for cleaner name)
|
||||||
const selectedFile = event.target.files?.[0];
|
const displayName = filename.includes(".")
|
||||||
if (!selectedFile) {
|
? filename.substring(0, filename.lastIndexOf("."))
|
||||||
resetFileInput();
|
: filename;
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
const queryData = JSON.stringify({
|
||||||
await performUpload(selectedFile);
|
query: "",
|
||||||
} catch (error) {
|
filters: {
|
||||||
console.error(
|
data_sources: [filename],
|
||||||
"Unable to prepare file for upload",
|
document_types: ["*"],
|
||||||
(error as Error).message,
|
owners: ["*"],
|
||||||
);
|
connector_types: ["*"],
|
||||||
} finally {
|
},
|
||||||
resetFileInput();
|
limit: 10,
|
||||||
}
|
scoreThreshold: 0,
|
||||||
};
|
color: "green",
|
||||||
|
icon: "file",
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
// Wait for filter creation to complete before proceeding
|
||||||
<AnimatePresence mode="wait">
|
createFilterMutation
|
||||||
{currentStep === null ? (
|
.mutateAsync({
|
||||||
<motion.div
|
name: displayName,
|
||||||
key="user-ingest"
|
description: `Filter for ${filename}`,
|
||||||
initial={{ opacity: 1, y: 0 }}
|
queryData: queryData,
|
||||||
exit={{ opacity: 0, y: -24 }}
|
})
|
||||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
.then((result) => {
|
||||||
>
|
if (result.filter?.id && typeof window !== "undefined") {
|
||||||
<Button
|
localStorage.setItem(
|
||||||
size="sm"
|
ONBOARDING_USER_DOC_FILTER_ID_KEY,
|
||||||
variant="outline"
|
result.filter.id,
|
||||||
onClick={handleUploadClick}
|
);
|
||||||
disabled={isUploading}
|
console.log(
|
||||||
>
|
"Created knowledge filter for uploaded document",
|
||||||
<div>{isUploading ? "Uploading..." : "Add a document"}</div>
|
result.filter.id,
|
||||||
</Button>
|
);
|
||||||
<input
|
}
|
||||||
ref={fileInputRef}
|
})
|
||||||
type="file"
|
.catch((error) => {
|
||||||
onChange={handleFileChange}
|
console.error("Failed to create knowledge filter:", error);
|
||||||
className="hidden"
|
})
|
||||||
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
|
.finally(() => {
|
||||||
/>
|
setIsCreatingFilter(false);
|
||||||
</motion.div>
|
// Refetch nudges to get new ones
|
||||||
) : (
|
refetchNudges();
|
||||||
<motion.div
|
|
||||||
key="ingest-steps"
|
// Wait a bit before completing (after filter is created)
|
||||||
initial={{ opacity: 0, y: 24 }}
|
setTimeout(() => {
|
||||||
animate={{ opacity: 1, y: 0 }}
|
onComplete();
|
||||||
transition={{ duration: 0.4, ease: "easeInOut" }}
|
}, 1000);
|
||||||
>
|
});
|
||||||
<AnimatedProviderSteps
|
} else {
|
||||||
currentStep={currentStep}
|
// No filter to create, just complete
|
||||||
setCurrentStep={setCurrentStep}
|
// Refetch nudges to get new ones
|
||||||
isCompleted={false}
|
refetchNudges();
|
||||||
steps={STEP_LIST}
|
|
||||||
storageKey={ONBOARDING_UPLOAD_STEPS_KEY}
|
// Wait a bit before completing
|
||||||
/>
|
setTimeout(() => {
|
||||||
</motion.div>
|
onComplete();
|
||||||
)}
|
}, 1000);
|
||||||
</AnimatePresence>
|
}
|
||||||
);
|
}
|
||||||
|
}, [
|
||||||
|
tasks,
|
||||||
|
currentStep,
|
||||||
|
onComplete,
|
||||||
|
refetchNudges,
|
||||||
|
shouldCreateFilter,
|
||||||
|
uploadedFilename,
|
||||||
|
uploadedTaskId,
|
||||||
|
createFilterMutation,
|
||||||
|
isCreatingFilter,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const resetFileInput = () => {
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.value = "";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUploadClick = () => {
|
||||||
|
// Clear any previous error when user clicks to upload again
|
||||||
|
setError(null);
|
||||||
|
fileInputRef.current?.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const performUpload = async (file: File) => {
|
||||||
|
setIsUploading(true);
|
||||||
|
// Clear any previous error when starting a new upload
|
||||||
|
setError(null);
|
||||||
|
// Clear handled tasks ref to allow retry
|
||||||
|
handledFailedTasksRef.current.clear();
|
||||||
|
// Reset task ID to prevent matching old failed tasks
|
||||||
|
setUploadedTaskId(null);
|
||||||
|
// Clear filter creation flags
|
||||||
|
setShouldCreateFilter(false);
|
||||||
|
setUploadedFilename(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
setCurrentStep(0);
|
||||||
|
const result = await uploadFile(file, true, true); // Pass createFilter=true
|
||||||
|
console.log("Document upload task started successfully");
|
||||||
|
|
||||||
|
// Store task ID to track the specific upload task
|
||||||
|
if (result.taskId) {
|
||||||
|
setUploadedTaskId(result.taskId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store filename and createFilter flag in state to create filter after ingestion succeeds
|
||||||
|
if (result.createFilter && result.filename) {
|
||||||
|
setUploadedFilename(result.filename);
|
||||||
|
setShouldCreateFilter(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Move to processing step - task monitoring will handle completion
|
||||||
|
setTimeout(() => {
|
||||||
|
setCurrentStep(1);
|
||||||
|
}, 1500);
|
||||||
|
} catch (error) {
|
||||||
|
const errorMessage =
|
||||||
|
error instanceof Error ? error.message : "Upload failed";
|
||||||
|
console.error("Upload failed", errorMessage);
|
||||||
|
|
||||||
|
// Dispatch event that chat context can listen to
|
||||||
|
// This avoids circular dependency issues
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent("ingestionFailed", {
|
||||||
|
detail: { source: "onboarding" },
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show error toast notification
|
||||||
|
toast.error("Document upload failed", {
|
||||||
|
description: errorMessage,
|
||||||
|
duration: 5000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset on error
|
||||||
|
setCurrentStep(null);
|
||||||
|
setUploadedTaskId(null);
|
||||||
|
setError(errorMessage);
|
||||||
|
setShouldCreateFilter(false);
|
||||||
|
setUploadedFilename(null);
|
||||||
|
} finally {
|
||||||
|
setIsUploading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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" }}
|
||||||
|
>
|
||||||
|
<div className="w-full flex flex-col gap-4">
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
{error && (
|
||||||
|
<motion.div
|
||||||
|
key="error"
|
||||||
|
initial={{ opacity: 1, y: 0, height: "auto" }}
|
||||||
|
exit={{ opacity: 0, y: -10, height: 0 }}
|
||||||
|
>
|
||||||
|
<div className="pb-2 flex items-center gap-4">
|
||||||
|
<X className="w-4 h-4 text-destructive shrink-0" />
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{error}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={handleUploadClick}
|
||||||
|
disabled={isUploading}
|
||||||
|
>
|
||||||
|
<div>{isUploading ? "Uploading..." : "Add a document"}</div>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
ref={fileInputRef}
|
||||||
|
type="file"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
className="hidden"
|
||||||
|
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</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}
|
||||||
|
storageKey={ONBOARDING_UPLOAD_STEPS_KEY}
|
||||||
|
hasError={!!error}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default OnboardingUpload;
|
export default OnboardingUpload;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue