upload component
This commit is contained in:
Mike Fortman
parent
70507067cb
commit
de52e863bd
3 changed files with 116 additions and 113 deletions
|
|
@ -1,6 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import { type ChangeEvent, useRef, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { StickToBottom } from "use-stick-to-bottom";
|
||||
import { AssistantMessage } from "@/app/chat/components/assistant-message";
|
||||
import { UserMessage } from "@/app/chat/components/user-message";
|
||||
|
|
@ -8,10 +8,9 @@ import Nudges from "@/app/chat/nudges";
|
|||
import type { Message } from "@/app/chat/types";
|
||||
import OnboardingCard from "@/app/onboarding/components/onboarding-card";
|
||||
import { useChatStreaming } from "@/hooks/useChatStreaming";
|
||||
import { DuplicateHandlingDialog } from "@/components/duplicate-handling-dialog";
|
||||
import { duplicateCheck, uploadFile as uploadFileUtil } from "@/lib/upload-utils";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { OnboardingStep } from "./onboarding-step";
|
||||
import OnboardingUpload from "./onboarding-upload";
|
||||
|
||||
export function OnboardingContent({
|
||||
handleStepComplete,
|
||||
|
|
@ -25,10 +24,6 @@ export function OnboardingContent({
|
|||
const [assistantMessage, setAssistantMessage] = useState<Message | null>(
|
||||
null,
|
||||
);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [pendingFile, setPendingFile] = useState<File | null>(null);
|
||||
const [showDuplicateDialog, setShowDuplicateDialog] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
|
||||
const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
|
||||
onComplete: (message, newResponseId) => {
|
||||
|
|
@ -61,76 +56,6 @@ export function OnboardingContent({
|
|||
}, 1500);
|
||||
};
|
||||
|
||||
const resetFileInput = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleDuplicateDialogChange = (open: boolean) => {
|
||||
if (!open) {
|
||||
setPendingFile(null);
|
||||
}
|
||||
setShowDuplicateDialog(open);
|
||||
};
|
||||
|
||||
const performUpload = async (file: File, replace = false) => {
|
||||
setIsUploading(true);
|
||||
try {
|
||||
await uploadFileUtil(file, replace);
|
||||
toast.success("Document uploaded successfully");
|
||||
} catch (error) {
|
||||
toast.error("Upload failed", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = event.target.files?.[0];
|
||||
if (!selectedFile) {
|
||||
resetFileInput();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const duplicateInfo = await duplicateCheck(selectedFile);
|
||||
if (duplicateInfo.exists) {
|
||||
setPendingFile(selectedFile);
|
||||
setShowDuplicateDialog(true);
|
||||
return;
|
||||
}
|
||||
|
||||
await performUpload(selectedFile, false);
|
||||
} catch (error) {
|
||||
toast.error("Unable to prepare file for upload", {
|
||||
description: error instanceof Error ? error.message : "Unknown error",
|
||||
});
|
||||
} finally {
|
||||
resetFileInput();
|
||||
}
|
||||
};
|
||||
|
||||
const handleOverwriteFile = async () => {
|
||||
if (!pendingFile) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fileToUpload = pendingFile;
|
||||
setPendingFile(null);
|
||||
try {
|
||||
await performUpload(fileToUpload, true);
|
||||
} finally {
|
||||
resetFileInput();
|
||||
}
|
||||
};
|
||||
|
||||
// Determine which message to show (streaming takes precedence)
|
||||
const displayMessage = streamingMessage || assistantMessage;
|
||||
|
||||
|
|
@ -177,29 +102,26 @@ export function OnboardingContent({
|
|||
{currentStep >= 1 &&
|
||||
!!selectedNudge &&
|
||||
(displayMessage || isLoading) && (
|
||||
<>
|
||||
<AssistantMessage
|
||||
content={displayMessage?.content || ""}
|
||||
functionCalls={displayMessage?.functionCalls}
|
||||
messageIndex={0}
|
||||
expandedFunctionCalls={new Set()}
|
||||
onToggle={() => {}}
|
||||
isStreaming={!!streamingMessage}
|
||||
isCompleted={currentStep > 1}
|
||||
/>
|
||||
{!isLoading && displayMessage && currentStep === 1 && (
|
||||
<div className="mt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleStepComplete}
|
||||
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
<AssistantMessage
|
||||
content={displayMessage?.content || ""}
|
||||
functionCalls={displayMessage?.functionCalls}
|
||||
messageIndex={0}
|
||||
expandedFunctionCalls={new Set()}
|
||||
onToggle={() => {}}
|
||||
isStreaming={!!streamingMessage}
|
||||
isCompleted={currentStep > 1}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Still kind of part of step 2 */}
|
||||
<OnboardingStep
|
||||
isVisible={currentStep === 1 && !isLoading && !!displayMessage}
|
||||
isCompleted={currentStep > 2}
|
||||
text="Now, let's add your data."
|
||||
hideIcon={true}
|
||||
>
|
||||
<OnboardingUpload onComplete={handleStepComplete} />
|
||||
</OnboardingStep>
|
||||
|
||||
<OnboardingStep
|
||||
isVisible={currentStep >= 2}
|
||||
|
|
@ -257,12 +179,6 @@ export function OnboardingContent({
|
|||
</div>
|
||||
</OnboardingStep>
|
||||
</div>
|
||||
<DuplicateHandlingDialog
|
||||
open={showDuplicateDialog}
|
||||
onOpenChange={handleDuplicateDialogChange}
|
||||
onOverwrite={handleOverwriteFile}
|
||||
isLoading={isUploading}
|
||||
/>
|
||||
</StickToBottom.Content>
|
||||
</StickToBottom>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ interface OnboardingStepProps {
|
|||
isCompleted?: boolean;
|
||||
icon?: ReactNode;
|
||||
isMarkdown?: boolean;
|
||||
hideIcon?: boolean;
|
||||
}
|
||||
|
||||
export function OnboardingStep({
|
||||
|
|
@ -21,6 +22,7 @@ export function OnboardingStep({
|
|||
isCompleted = false,
|
||||
icon,
|
||||
isMarkdown = false,
|
||||
hideIcon = false,
|
||||
}: OnboardingStepProps) {
|
||||
const [displayedText, setDisplayedText] = useState("");
|
||||
const [showChildren, setShowChildren] = useState(false);
|
||||
|
|
@ -66,13 +68,17 @@ export function OnboardingStep({
|
|||
>
|
||||
<Message
|
||||
icon={
|
||||
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>
|
||||
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>
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
import { ChangeEvent, useRef, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { duplicateCheck, uploadFile } from "@/lib/upload-utils";
|
||||
|
||||
interface OnboardingUploadProps {
|
||||
onComplete: () => void;
|
||||
}
|
||||
|
||||
const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
|
||||
const resetFileInput = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
const handleUploadClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
|
||||
const performUpload = async (file: File, replace = false) => {
|
||||
setIsUploading(true);
|
||||
try {
|
||||
await uploadFile(file, replace);
|
||||
console.log("Document uploaded successfully");
|
||||
} catch (error) {
|
||||
console.error("Upload failed", (error as Error).message);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
onComplete();
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFile = event.target.files?.[0];
|
||||
if (!selectedFile) {
|
||||
resetFileInput();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const duplicateInfo = await duplicateCheck(selectedFile);
|
||||
if (duplicateInfo.exists) {
|
||||
console.log("Duplicate file detected");
|
||||
return;
|
||||
}
|
||||
|
||||
await performUpload(selectedFile, false);
|
||||
} catch (error) {
|
||||
console.error("Unable to prepare file for upload", (error as Error).message);
|
||||
} finally {
|
||||
resetFileInput();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default OnboardingUpload;
|
||||
Loading…
Add table
Reference in a new issue