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

fix: fix loading states, flickering and positioning on onboarding (#323)

Browse source 
* Removed background from dog

* Changed loading providers to be on tab

* Fixed case on add a document button

* fixed dog icon flickering

* Changed size of animated processing icon on tab trigger

* fixed max height on onboarding

* Fixed animated steps size

* Changed skip overview design

* disable autocomplete
This commit is contained in:
Lucas Oliveira 2025-10-28 18:06:29 -03:00 • committed by GitHub
parent 9d55ecd717
commit d63fcb3843
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 330 additions and 301 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/components/logo/dog-icon.tsx
View file

@ -7,29 +7,29 @@ const DogIcon = ({ disabled = false, stroke, ...props }: DogIconProps) => {
// CSS for the stepped animation states
const animationCSS = `
.state1 { animation: showState1 600ms infinite; }
.state2 { animation: showState2 600ms infinite; }
.state3 { animation: showState3 600ms infinite; }
.state4 { animation: showState4 600ms infinite; }
.state1 { animation: showDogState1 600ms infinite; }
.state2 { animation: showDogState2 600ms infinite; }
.state3 { animation: showDogState3 600ms infinite; }
.state4 { animation: showDogState4 600ms infinite; }
@keyframes showState1 {
@keyframes showDogState1 {
0%, 24.99% { opacity: 1; }
25%, 100% { opacity: 0; }
}
@keyframes showState2 {
@keyframes showDogState2 {
0%, 24.99% { opacity: 0; }
25%, 49.99% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes showState3 {
@keyframes showDogState3 {
0%, 49.99% { opacity: 0; }
50%, 74.99% { opacity: 1; }
75%, 100% { opacity: 0; }
}
@keyframes showState4 {
@keyframes showDogState4 {
0%, 74.99% { opacity: 0; }
75%, 100% { opacity: 1; }
}

2
frontend/src/app/chat/components/assistant-message.tsx
View file

@ -46,7 +46,7 @@ export function AssistantMessage({
>
<Message
icon={
<div className="w-8 h-8 rounded-lg bg-accent/20 flex items-center justify-center flex-shrink-0 select-none">
<div className="w-8 h-8 flex items-center justify-center flex-shrink-0 select-none">
<DogIcon
className="h-6 w-6 transition-colors duration-300"
disabled={isCompleted || isInactive}

34
frontend/src/app/chat/components/chat-input.tsx
View file

@ -1,5 +1,5 @@
import { ArrowRight, Check, Funnel, Loader2, Plus } from "lucide-react";
import { forwardRef, useImperativeHandle, useRef } from "react";
import { forwardRef, useImperativeHandle, useRef, useState } from "react";
import TextareaAutosize from "react-textarea-autosize";
import type { FilterColor } from "@/components/filter-icon-popover";
import { Button } from "@/components/ui/button";
@ -9,7 +9,6 @@ import {
PopoverContent,
} from "@/components/ui/popover";
import type { KnowledgeFilterData } from "../types";
import { useState } from "react";
import { FilePreview } from "./file-preview";
import { SelectedKnowledgeFilter } from "./selected-knowledge-filter";
@ -107,13 +106,17 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
)}
{/* Main Input Container - flex-row or flex-col based on textarea height */}
<div className={`relative flex w-full gap-2 ${
textareaHeight > 40 ? 'flex-col' : 'flex-row items-center'
}`}>
<div
className={`relative flex w-full gap-2 ${
textareaHeight > 40 ? "flex-col" : "flex-row items-center"
}`}
>
{/* Filter + Textarea Section */}
<div className={`flex items-center gap-2 ${textareaHeight > 40 ? 'w-full' : 'flex-1'}`}>
{textareaHeight <= 40 && (
selectedFilter ? (
<div
className={`flex items-center gap-2 ${textareaHeight > 40 ? "w-full" : "flex-1"}`}
>
{textareaHeight <= 40 &&
(selectedFilter ? (
<SelectedKnowledgeFilter
selectedFilter={selectedFilter}
parsedFilterData={parsedFilterData}
@ -136,8 +139,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
>
<Funnel className="h-4 w-4" />
</Button>
)
)}
))}
<div
className="relative flex-1"
style={{ height: `${textareaHeight}px` }}
@ -149,6 +151,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
onKeyDown={onKeyDown}
onHeightChange={(height) => setTextareaHeight(height)}
maxRows={7}
autoComplete="off"
minRows={1}
placeholder="Ask a question..."
disabled={loading}
@ -159,9 +162,11 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
</div>
{/* Action Buttons Section */}
<div className={`flex items-center gap-2 ${textareaHeight > 40 ? 'justify-between w-full' : ''}`}>
{textareaHeight > 40 && (
selectedFilter ? (
<div
className={`flex items-center gap-2 ${textareaHeight > 40 ? "justify-between w-full" : ""}`}
>
{textareaHeight > 40 &&
(selectedFilter ? (
<SelectedKnowledgeFilter
selectedFilter={selectedFilter}
parsedFilterData={parsedFilterData}
@ -184,8 +189,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
>
<Funnel className="h-4 w-4" />
</Button>
)
)}
))}
<div className="flex items-center gap-2">
<Button
type="button"

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

@ -80,7 +80,7 @@ export function AnimatedProviderSteps({
<div
className={cn(
"transition-all duration-150 relative",
isDone ? "w-3.5 h-3.5" : "w-3.5 h-2.5",
isDone ? "w-3.5 h-3.5" : "w-6 h-6",
)}
>
<CheckIcon
@ -110,7 +110,7 @@ export function AnimatedProviderSteps({
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="w-px h-6 bg-border ml-3" />
<div className="relative h-5 w-full">
<AnimatePresence mode="sync" initial={false}>
<motion.span

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

@ -24,6 +24,7 @@ import { AnimatedProviderSteps } from "./animated-provider-steps";
import { IBMOnboarding } from "./ibm-onboarding";
import { OllamaOnboarding } from "./ollama-onboarding";
import { OpenAIOnboarding } from "./openai-onboarding";
import { TabTrigger } from "./tab-trigger";
interface OnboardingCardProps {
onComplete: () => void;
@ -191,6 +192,10 @@ const OnboardingCard = ({
>
<TabsList className="mb-4">
<TabsTrigger value="openai">
<TabTrigger
selected={modelProvider === "openai"}
isLoading={isLoadingModels}
>
<div
className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
@ -207,12 +212,19 @@ const OnboardingCard = ({
/>
</div>
OpenAI
</TabTrigger>
</TabsTrigger>
<TabsTrigger value="watsonx">
<TabTrigger
selected={modelProvider === "watsonx"}
isLoading={isLoadingModels}
>
<div
className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted",
modelProvider === "watsonx"
? "bg-[#1063FE]"
: "bg-muted",
)}
>
<IBMLogo
@ -225,8 +237,13 @@ const OnboardingCard = ({
/>
</div>
IBM watsonx.ai
</TabTrigger>
</TabsTrigger>
<TabsTrigger value="ollama">
<TabTrigger
selected={modelProvider === "ollama"}
isLoading={isLoadingModels}
>
<div
className={cn(
"flex items-center justify-center gap-2 w-8 h-8 rounded-md",
@ -243,32 +260,9 @@ const OnboardingCard = ({
/>
</div>
Ollama
</TabTrigger>
</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}
@ -295,8 +289,6 @@ const OnboardingCard = ({
</TabsContent>
</Tabs>
<Tooltip>
<TooltipTrigger asChild>
<div>

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

@ -74,7 +74,7 @@ export function OnboardingStep({
<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">
<div className="w-8 h-8 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}

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

@ -76,7 +76,7 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
onClick={handleUploadClick}
disabled={isUploading}
>
{isUploading ? "Uploading..." : "Add a Document"}
<div>{isUploading ? "Uploading..." : "Add a document"}</div>
</Button>
<input
ref={fileInputRef}

6
frontend/src/app/onboarding/components/progress-bar.tsx
View file

@ -30,12 +30,12 @@ export function ProgressBar({ currentStep, totalSteps, onSkip }: ProgressBarProp
<div className="flex-1 flex justify-end">
{currentStep > 0 && onSkip && (
<Button
variant="ghost"
variant="link"
size="sm"
onClick={onSkip}
className="flex items-center gap-2 text-xs text-muted-foreground"
className="flex items-center gap-2 text-mmd !text-placeholder-foreground hover:!text-foreground hover:!no-underline"
>
Skip onboarding
Skip overview
<ArrowRight className="w-4 h-4" />
</Button>
)}

33
frontend/src/app/onboarding/components/tab-trigger.tsx Normal file
View file

@ -0,0 +1,33 @@
import AnimatedProcessingIcon from "@/components/ui/animated-processing-icon";
import { cn } from "@/lib/utils";
export function TabTrigger({
children,
selected,
isLoading,
}: {
children: React.ReactNode;
selected: boolean;
isLoading: boolean;
}) {
return (
<div className="flex flex-col relative items-start justify-between gap-4 h-full w-full">
<div
className={cn(
"flex absolute items-center justify-center h-full w-full transition-opacity duration-200",
isLoading && selected ? "opacity-100" : "opacity-0",
)}
>
<AnimatedProcessingIcon className="text-current shrink-0 h-10 w-10" />
</div>
<div
className={cn(
"flex flex-col items-start justify-between gap-4 h-full w-full transition-opacity duration-200",
isLoading && selected ? "opacity-0" : "opacity-100",
)}
>
{children}
</div>
</div>
);
}

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

@ -156,7 +156,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 && "absolute max-h-[calc(100vh-190px)]",
showLayout && !isOnChatPage && "bg-background",
)}
>
@ -199,7 +199,7 @@ export function ChatRenderer({
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: showLayout ? 0 : 1, y: showLayout ? 20 : 0 }}
transition={{ duration: ANIMATION_DURATION, ease: "easeOut" }}
className={cn("absolute bottom-10 left-0 right-0")}
className={cn("absolute bottom-6 left-0 right-0")}
>
<ProgressBar
currentStep={currentStep}

4
frontend/src/components/ui/animated-processing-icon.tsx
View file

@ -51,8 +51,8 @@ const AnimatedProcessingIcon = ({
return (
<svg
width="16"
height="16"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"