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

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

Browse source 
* fixed accordion chevron side

* Added steps history to animated provider steps

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

* update onboarding card to reflect changes

* added showCompleted

* passed required props

* Added background to other pages

* Made tasks just appear when not on onboarding

* changed task context to not have error

* changed default to closed

* fixed onboarding card

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

6
frontend/components/ui/accordion.tsx
View file

@ -1,7 +1,7 @@
"use client";
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
frontend/src/app/new-onboarding/components/onboarding-content.tsx
View file

@ -26,7 +26,6 @@ export function OnboardingContent({
);
const [isLoadingModels, setIsLoadingModels] = useState<boolean>(false);
const [loadingStatus, setLoadingStatus] = useState<string[]>([]);
const [hasStartedOnboarding, setHasStartedOnboarding] = useState<boolean>(false);
const { streamingMessage, isLoading, sendMessage } = useChatStreaming({
onComplete: (message, newResponseId) => {
@ -81,16 +80,17 @@ export function OnboardingContent({
<OnboardingStep
isVisible={currentStep >= 0}
isCompleted={currentStep > 0}
showCompleted={true}
text="Let's get started by setting up your model provider."
isLoadingModels={isLoadingModels}
loadingStatus={loadingStatus}
reserveSpaceForThinking={!hasStartedOnboarding}
reserveSpaceForThinking={true}
>
<OnboardingCard
onComplete={() => {
setHasStartedOnboarding(true);
handleStepComplete();
}}
isCompleted={currentStep > 0}
setIsLoadingModels={setIsLoadingModels}
setLoadingStatus={setLoadingStatus}
/>

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

@ -2,8 +2,8 @@ import { AnimatePresence, motion } from "motion/react";
import { type ReactNode, useEffect, useState } from "react";
import { Message } from "@/app/chat/components/message";
import DogIcon from "@/components/logo/dog-icon";
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
import { MarkdownRenderer } from "@/components/markdown-renderer";
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
import { cn } from "@/lib/utils";
interface OnboardingStepProps {
@ -11,6 +11,7 @@ interface OnboardingStepProps {
children?: ReactNode;
isVisible: boolean;
isCompleted?: boolean;
showCompleted?: boolean;
icon?: ReactNode;
isMarkdown?: boolean;
hideIcon?: boolean;
@ -24,6 +25,7 @@ export function OnboardingStep({
children,
isVisible,
isCompleted = false,
showCompleted = false,
icon,
isMarkdown = false,
hideIcon = false,
@ -116,7 +118,7 @@ export function OnboardingStep({
{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">
<div className="relative w-3.5 h-2.5">
<AnimatedProcessingIcon className="text-current shrink-0 absolute inset-0" />
</div>
<span className="text-mmd font-medium text-muted-foreground">
@ -146,9 +148,7 @@ export function OnboardingStep({
) : isMarkdown ? (
<MarkdownRenderer
className={cn(
isCompleted
? "text-placeholder-foreground"
: "text-foreground",
isCompleted ? "text-placeholder-foreground" : "text-foreground",
"text-sm py-1.5 transition-colors duration-300",
)}
chatMessage={text}
@ -165,22 +165,20 @@ export function OnboardingStep({
<span className="inline-block w-1 h-3.5 bg-primary ml-1 animate-pulse" />
)}
</p>
{reserveSpaceForThinking && (
<div className="h-8" />
)}
{reserveSpaceForThinking && <div className="h-8" />}
</>
)}
{children && (
<AnimatePresence>
{((showChildren && !isCompleted) || isMarkdown) && (
{((showChildren && (!isCompleted || showCompleted)) ||
isMarkdown) && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }}
>
<div className="pt-2">
{children}</div>
<div className="pt-2">{children}</div>
</motion.div>
)}
</AnimatePresence>

26
frontend/src/app/new-onboarding/components/onboarding-upload.tsx
View file

@ -1,8 +1,8 @@
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;
@ -13,10 +13,7 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
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) {
@ -38,9 +35,9 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
console.error("Upload failed", (error as Error).message);
} finally {
setIsUploading(false);
await new Promise(resolve => setTimeout(resolve, 1000));
await new Promise((resolve) => setTimeout(resolve, 1000));
setCurrentStep(STEP_LIST.length);
await new Promise(resolve => setTimeout(resolve, 500));
await new Promise((resolve) => setTimeout(resolve, 500));
onComplete();
}
};
@ -55,13 +52,15 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
try {
await performUpload(selectedFile);
} catch (error) {
console.error("Unable to prepare file for upload", (error as Error).message);
console.error(
"Unable to prepare file for upload",
(error as Error).message,
);
} finally {
resetFileInput();
}
};
return (
<AnimatePresence mode="wait">
{currentStep === null ? (
@ -97,12 +96,13 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
<AnimatedProviderSteps
currentStep={currentStep}
setCurrentStep={setCurrentStep}
isCompleted={false}
steps={STEP_LIST}
/>
</motion.div>
)}
</AnimatePresence>
)
}
);
};
export default OnboardingUpload;

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

@ -2,38 +2,90 @@
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,
isCompleted,
setCurrentStep,
steps,
storageKey = "provider-steps",
}: {
currentStep: number;
isCompleted: boolean;
setCurrentStep: (step: number) => void;
steps: string[];
storageKey?: string;
}) {
const [startTime, setStartTime] = useState<number | null>(null);
const [elapsedTime, setElapsedTime] = useState<number>(0);
// Initialize start time from local storage or set new one
useEffect(() => {
if (currentStep < steps.length - 1) {
const storedStartTime = localStorage.getItem(`${storageKey}-start`);
const storedElapsedTime = localStorage.getItem(`${storageKey}-elapsed`);
if (isCompleted && storedElapsedTime) {
// If completed, use stored elapsed time
setElapsedTime(parseFloat(storedElapsedTime));
} else if (storedStartTime) {
// If in progress, use stored start time
setStartTime(parseInt(storedStartTime));
} else {
// First time, set new start time
const now = Date.now();
setStartTime(now);
localStorage.setItem(`${storageKey}-start`, now.toString());
}
}, [storageKey, isCompleted]);
// Progress through steps
useEffect(() => {
if (currentStep < steps.length - 1 && !isCompleted) {
const interval = setInterval(() => {
setCurrentStep(currentStep + 1);
}, 1500);
return () => clearInterval(interval);
}
}, [currentStep, setCurrentStep, steps]);
}, [currentStep, setCurrentStep, steps, isCompleted]);
const isDone = currentStep >= steps.length;
// Calculate and store elapsed time when completed
useEffect(() => {
if (isCompleted && startTime) {
const elapsed = Date.now() - startTime;
setElapsedTime(elapsed);
localStorage.setItem(`${storageKey}-elapsed`, elapsed.toString());
localStorage.removeItem(`${storageKey}-start`);
}
}, [isCompleted, startTime, storageKey]);
const isDone = currentStep >= steps.length && !isCompleted;
return (
<div className="flex flex-col gap-2">
<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-1.5 h-2.5",
isDone ? "w-3.5 h-3.5" : "w-3.5 h-2.5",
)}
>
<CheckIcon
@ -61,9 +113,9 @@ export function AnimatedProviderSteps({
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"
className="flex items-center gap-4 overflow-y-hidden relative h-6"
>
<div className="w-px h-6 bg-border" />
<div className="w-px h-6 bg-border ml-2" />
<div className="relative h-5 w-full">
<AnimatePresence mode="sync" initial={false}>
<motion.span
@ -82,6 +134,79 @@ export function AnimatedProviderSteps({
)}
</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>
);
}

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

@ -27,6 +27,7 @@ import { OpenAIOnboarding } from "./openai-onboarding";
interface OnboardingCardProps {
onComplete: () => void;
isCompleted?: boolean;
setIsLoadingModels?: (isLoading: boolean) => void;
setLoadingStatus?: (status: string[]) => void;
}
@ -43,6 +44,7 @@ const TOTAL_PROVIDER_STEPS = STEP_LIST.length;
const OnboardingCard = ({
onComplete,
isCompleted = false,
setIsLoadingModels: setIsLoadingModelsParent,
setLoadingStatus: setLoadingStatusParent,
}: OnboardingCardProps) => {
@ -104,7 +106,7 @@ const OnboardingCard = ({
llm_model: "",
});
const [currentStep, setCurrentStep] = useState<number | null>(null);
const [currentStep, setCurrentStep] = useState<number | null>(isCompleted ? TOTAL_PROVIDER_STEPS : null);
// Query tasks to track completion
const { data: tasks } = useGetTasksQuery({
@ -130,6 +132,7 @@ const OnboardingCard = ({
if (
(!activeTasks || (activeTasks.processed_files ?? 0) > 0) &&
tasks.length > 0
&& !isCompleted
) {
// Set to final step to show "Done"
setCurrentStep(TOTAL_PROVIDER_STEPS);
@ -138,7 +141,7 @@ const OnboardingCard = ({
onComplete();
}, 1000);
}
}, [tasks, currentStep, onComplete]);
}, [tasks, currentStep, onComplete, isCompleted]);
// Mutations
const onboardingMutation = useOnboardingMutation({
@ -267,14 +270,13 @@ const OnboardingCard = ({
</TabsContent>
</Tabs>
{!isLoadingModels && (
<Tooltip>
<TooltipTrigger asChild>
<div>
<Button
size="sm"
onClick={handleComplete}
disabled={!isComplete}
disabled={!isComplete || isLoadingModels}
loading={onboardingMutation.isPending}
>
<span className="select-none">Complete</span>
@ -283,15 +285,14 @@ const OnboardingCard = ({
</TooltipTrigger>
{!isComplete && (
<TooltipContent>
{!!settings.llm_model &&
{isLoadingModels ? "Loading models..." : (!!settings.llm_model &&
!!settings.embedding_model &&
!isDoclingHealthy
? "docling-serve must be running to continue"
: "Please fill in all required fields"}
: "Please fill in all required fields")}
</TooltipContent>
)}
</Tooltip>
)}
</div>
</motion.div>
) : (
@ -303,6 +304,7 @@ const OnboardingCard = ({
>
<AnimatedProviderSteps
currentStep={currentStep}
isCompleted={isCompleted}
setCurrentStep={setCurrentStep}
steps={STEP_LIST}
/>

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

@ -149,6 +149,7 @@ export function ChatRenderer({
className={cn(
"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden",
!showLayout && "absolute",
showLayout && !isOnChatPage && "bg-background",
)}
>
<div
@ -172,7 +173,7 @@ export function ChatRenderer({
ease: "easeOut",
delay: ANIMATION_DURATION,
}}
className={cn("w-full h-full 0v")}
className={cn("w-full h-full")}
>
<div className={cn("w-full h-full", !showLayout && "hidden")}>
{children}

17
frontend/src/contexts/task-context.tsx
View file

@ -18,6 +18,7 @@ import {
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 };
@ -89,6 +90,12 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
},
});
// 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 refetchSearch = useCallback(() => {
queryClient.invalidateQueries({
queryKey: ["search"],
@ -148,9 +155,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
const fileInfoEntry = fileInfo as TaskFileEntry;
// Use the filename from backend if available, otherwise extract from path
const fileName =
fileInfoEntry.filename ||
filePath.split("/").pop() ||
filePath;
fileInfoEntry.filename || filePath.split("/").pop() || filePath;
const fileStatus = fileInfoEntry.status ?? "processing";
// Map backend file status to our TaskFile status
@ -262,7 +267,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
successfulFiles !== 1 ? "s" : ""
} uploaded successfully`;
}
if (!isOnboardingActive()) {
toast.success("Task completed", {
description,
action: {
@ -273,6 +278,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
},
},
});
}
setTimeout(() => {
setFiles((prevFiles) =>
prevFiles.filter(
@ -301,7 +307,7 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
// Store current tasks as previous for next comparison
previousTasksRef.current = tasks;
}, [tasks, refetchSearch]);
}, [tasks, refetchSearch, isOnboardingActive]);
const addTask = useCallback(
(_taskId: string) => {
@ -319,7 +325,6 @@ export function TaskProvider({ children }: { children: React.ReactNode }) {
await refetchTasks();
}, [refetchTasks]);
const cancelTask = useCallback(
async (taskId: string) => {
cancelTaskMutation.mutate({ taskId });