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

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 // CSS for the stepped animation states
const animationCSS = ` const animationCSS = `
.state1 { animation: showState1 600ms infinite; } .state1 { animation: showDogState1 600ms infinite; }
.state2 { animation: showState2 600ms infinite; } .state2 { animation: showDogState2 600ms infinite; }
.state3 { animation: showState3 600ms infinite; } .state3 { animation: showDogState3 600ms infinite; }
.state4 { animation: showState4 600ms infinite; } .state4 { animation: showDogState4 600ms infinite; }
@keyframes showState1 { @keyframes showDogState1 {
0%, 24.99% { opacity: 1; } 0%, 24.99% { opacity: 1; }
25%, 100% { opacity: 0; } 25%, 100% { opacity: 0; }
} }
@keyframes showState2 { @keyframes showDogState2 {
0%, 24.99% { opacity: 0; } 0%, 24.99% { opacity: 0; }
25%, 49.99% { opacity: 1; } 25%, 49.99% { opacity: 1; }
50%, 100% { opacity: 0; } 50%, 100% { opacity: 0; }
} }
@keyframes showState3 { @keyframes showDogState3 {
0%, 49.99% { opacity: 0; } 0%, 49.99% { opacity: 0; }
50%, 74.99% { opacity: 1; } 50%, 74.99% { opacity: 1; }
75%, 100% { opacity: 0; } 75%, 100% { opacity: 0; }
} }
@keyframes showState4 { @keyframes showDogState4 {
0%, 74.99% { opacity: 0; } 0%, 74.99% { opacity: 0; }
75%, 100% { opacity: 1; } 75%, 100% { opacity: 1; }
} }

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

@ -46,7 +46,7 @@ export function AssistantMessage({
> >
<Message <Message
icon={ 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 <DogIcon
className="h-6 w-6 transition-colors duration-300" className="h-6 w-6 transition-colors duration-300"
disabled={isCompleted || isInactive} disabled={isCompleted || isInactive}

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

@ -1,5 +1,5 @@
import { ArrowRight, Check, Funnel, Loader2, Plus } from "lucide-react"; 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 TextareaAutosize from "react-textarea-autosize";
import type { FilterColor } from "@/components/filter-icon-popover"; import type { FilterColor } from "@/components/filter-icon-popover";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -9,7 +9,6 @@ import {
PopoverContent, PopoverContent,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import type { KnowledgeFilterData } from "../types"; import type { KnowledgeFilterData } from "../types";
import { useState } from "react";
import { FilePreview } from "./file-preview"; import { FilePreview } from "./file-preview";
import { SelectedKnowledgeFilter } from "./selected-knowledge-filter"; import { SelectedKnowledgeFilter } from "./selected-knowledge-filter";
@ -81,7 +80,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
fileInputRef.current?.click(); fileInputRef.current?.click();
}, },
})); }));
const handleFilePickerChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFilePickerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files; const files = e.target.files;
if (files && files.length > 0) { if (files && files.length > 0) {
@ -92,242 +91,247 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
}; };
return ( return (
<div className="w-full"> <div className="w-full">
<form onSubmit={onSubmit} className="relative"> <form onSubmit={onSubmit} className="relative">
{/* Outer container - flex-col to stack file preview above input */} {/* Outer container - flex-col to stack file preview above input */}
<div className="flex flex-col w-full gap-2 rounded-xl border border-input focus-within:ring-1 focus-within:ring-ring p-2"> <div className="flex flex-col w-full gap-2 rounded-xl border border-input focus-within:ring-1 focus-within:ring-ring p-2">
{/* File Preview Section - Always above */} {/* File Preview Section - Always above */}
{uploadedFile && ( {uploadedFile && (
<FilePreview <FilePreview
uploadedFile={uploadedFile} uploadedFile={uploadedFile}
onClear={() => { onClear={() => {
onFileSelected(null); onFileSelected(null);
}} }}
/> />
)} )}
{/* Main Input Container - flex-row or flex-col based on textarea height */} {/* Main Input Container - flex-row or flex-col based on textarea height */}
<div className={`relative flex w-full gap-2 ${ <div
textareaHeight > 40 ? 'flex-col' : 'flex-row items-center' 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 && ( {/* Filter + Textarea Section */}
selectedFilter ? ( <div
<SelectedKnowledgeFilter className={`flex items-center gap-2 ${textareaHeight > 40 ? "w-full" : "flex-1"}`}
selectedFilter={selectedFilter} >
parsedFilterData={parsedFilterData} {textareaHeight <= 40 &&
onClear={() => { (selectedFilter ? (
setSelectedFilter(null); <SelectedKnowledgeFilter
setIsFilterHighlighted(false); selectedFilter={selectedFilter}
}} parsedFilterData={parsedFilterData}
/> onClear={() => {
) : ( setSelectedFilter(null);
<Button setIsFilterHighlighted(false);
type="button" }}
variant="ghost"
size="iconSm"
className="h-8 w-8 p-0 rounded-md hover:bg-muted/50"
onMouseDown={(e) => {
e.preventDefault();
}}
onClick={onAtClick}
data-filter-button
>
<Funnel className="h-4 w-4" />
</Button>
)
)}
<div
className="relative flex-1"
style={{ height: `${textareaHeight}px` }}
>
<TextareaAutosize
ref={inputRef}
value={input}
onChange={onChange}
onKeyDown={onKeyDown}
onHeightChange={(height) => setTextareaHeight(height)}
maxRows={7}
minRows={1}
placeholder="Ask a question..."
disabled={loading}
className={`w-full text-sm bg-transparent focus-visible:outline-none resize-none`}
rows={1}
/> />
</div> ) : (
</div>
{/* Action Buttons Section */}
<div className={`flex items-center gap-2 ${textareaHeight > 40 ? 'justify-between w-full' : ''}`}>
{textareaHeight > 40 && (
selectedFilter ? (
<SelectedKnowledgeFilter
selectedFilter={selectedFilter}
parsedFilterData={parsedFilterData}
onClear={() => {
setSelectedFilter(null);
setIsFilterHighlighted(false);
}}
/>
) : (
<Button
type="button"
variant="ghost"
size="iconSm"
className="h-8 w-8 p-0 rounded-md hover:bg-muted/50"
onMouseDown={(e) => {
e.preventDefault();
}}
onClick={onAtClick}
data-filter-button
>
<Funnel className="h-4 w-4" />
</Button>
)
)}
<div className="flex items-center gap-2">
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
size="iconSm" size="iconSm"
onClick={onFilePickerClick} className="h-8 w-8 p-0 rounded-md hover:bg-muted/50"
disabled={isUploading} onMouseDown={(e) => {
className="h-8 w-8 p-0 !rounded-md hover:bg-muted/50" e.preventDefault();
}}
onClick={onAtClick}
data-filter-button
> >
<Plus className="h-4 w-4" /> <Funnel className="h-4 w-4" />
</Button> </Button>
))}
<div
className="relative flex-1"
style={{ height: `${textareaHeight}px` }}
>
<TextareaAutosize
ref={inputRef}
value={input}
onChange={onChange}
onKeyDown={onKeyDown}
onHeightChange={(height) => setTextareaHeight(height)}
maxRows={7}
autoComplete="off"
minRows={1}
placeholder="Ask a question..."
disabled={loading}
className={`w-full text-sm bg-transparent focus-visible:outline-none resize-none`}
rows={1}
/>
</div>
</div>
{/* Action Buttons Section */}
<div
className={`flex items-center gap-2 ${textareaHeight > 40 ? "justify-between w-full" : ""}`}
>
{textareaHeight > 40 &&
(selectedFilter ? (
<SelectedKnowledgeFilter
selectedFilter={selectedFilter}
parsedFilterData={parsedFilterData}
onClear={() => {
setSelectedFilter(null);
setIsFilterHighlighted(false);
}}
/>
) : (
<Button <Button
variant="default" type="button"
type="submit" variant="ghost"
size="iconSm" size="iconSm"
disabled={(!input.trim() && !uploadedFile) || loading} className="h-8 w-8 p-0 rounded-md hover:bg-muted/50"
className="!rounded-md h-8 w-8 p-0" onMouseDown={(e) => {
e.preventDefault();
}}
onClick={onAtClick}
data-filter-button
> >
{loading ? ( <Funnel className="h-4 w-4" />
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ArrowRight className="h-4 w-4" />
)}
</Button> </Button>
</div> ))}
<div className="flex items-center gap-2">
<Button
type="button"
variant="ghost"
size="iconSm"
onClick={onFilePickerClick}
disabled={isUploading}
className="h-8 w-8 p-0 !rounded-md hover:bg-muted/50"
>
<Plus className="h-4 w-4" />
</Button>
<Button
variant="default"
type="submit"
size="iconSm"
disabled={(!input.trim() && !uploadedFile) || loading}
className="!rounded-md h-8 w-8 p-0"
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<ArrowRight className="h-4 w-4" />
)}
</Button>
</div> </div>
</div> </div>
</div> </div>
<input </div>
ref={fileInputRef} <input
type="file" ref={fileInputRef}
onChange={handleFilePickerChange} type="file"
className="hidden" onChange={handleFilePickerChange}
accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt" className="hidden"
/> accept=".pdf,.doc,.docx,.txt,.md,.rtf,.odt"
/>
<Popover <Popover
open={isFilterDropdownOpen} open={isFilterDropdownOpen}
onOpenChange={(open) => { onOpenChange={(open) => {
setIsFilterDropdownOpen(open); setIsFilterDropdownOpen(open);
}} }}
> >
{anchorPosition && ( {anchorPosition && (
<PopoverAnchor <PopoverAnchor
asChild asChild
style={{ style={{
position: "fixed", position: "fixed",
left: anchorPosition.x, left: anchorPosition.x,
top: anchorPosition.y, top: anchorPosition.y,
width: 1, width: 1,
height: 1, height: 1,
pointerEvents: "none", pointerEvents: "none",
}}
>
<div />
</PopoverAnchor>
)}
<PopoverContent
className="w-64 p-2"
side="top"
align="start"
sideOffset={6}
alignOffset={-18}
onOpenAutoFocus={(e) => {
// Prevent auto focus on the popover content
e.preventDefault();
// Keep focus on the input
}} }}
> >
<div className="space-y-1"> <div />
{filterSearchTerm && ( </PopoverAnchor>
<div className="px-2 py-1.5 text-xs font-medium text-muted-foreground"> )}
Searching: @{filterSearchTerm} <PopoverContent
</div> className="w-64 p-2"
)} side="top"
{availableFilters.length === 0 ? ( align="start"
<div className="px-2 py-3 text-sm text-muted-foreground"> sideOffset={6}
No knowledge filters available alignOffset={-18}
</div> onOpenAutoFocus={(e) => {
) : ( // Prevent auto focus on the popover content
<> e.preventDefault();
{!filterSearchTerm && ( // Keep focus on the input
<button }}
type="button" >
onClick={() => onFilterSelect(null)} <div className="space-y-1">
className={`w-full text-left px-2 py-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${ {filterSearchTerm && (
selectedFilterIndex === -1 ? "bg-muted/50" : "" <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
}`} Searching: @{filterSearchTerm}
> </div>
<span>No knowledge filter</span> )}
{!selectedFilter && ( {availableFilters.length === 0 ? (
<Check className="h-4 w-4 shrink-0" /> <div className="px-2 py-3 text-sm text-muted-foreground">
)} No knowledge filters available
</button> </div>
)} ) : (
{availableFilters <>
.filter((filter) => {!filterSearchTerm && (
filter.name <button
.toLowerCase() type="button"
.includes(filterSearchTerm.toLowerCase()), onClick={() => onFilterSelect(null)}
) className={`w-full text-left px-2 py-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${
.map((filter, index) => ( selectedFilterIndex === -1 ? "bg-muted/50" : ""
<button }`}
key={filter.id} >
type="button" <span>No knowledge filter</span>
onClick={() => onFilterSelect(filter)} {!selectedFilter && (
className={`w-full overflow-hidden text-left px-2 py-2 gap-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${ <Check className="h-4 w-4 shrink-0" />
index === selectedFilterIndex ? "bg-muted/50" : "" )}
}`} </button>
> )}
<div className="overflow-hidden"> {availableFilters
<div className="font-medium truncate"> .filter((filter) =>
{filter.name}
</div>
{filter.description && (
<div className="text-xs text-muted-foreground truncate">
{filter.description}
</div>
)}
</div>
{selectedFilter?.id === filter.id && (
<Check className="h-4 w-4 shrink-0" />
)}
</button>
))}
{availableFilters.filter((filter) =>
filter.name filter.name
.toLowerCase() .toLowerCase()
.includes(filterSearchTerm.toLowerCase()), .includes(filterSearchTerm.toLowerCase()),
).length === 0 && )
filterSearchTerm && ( .map((filter, index) => (
<div className="px-2 py-3 text-sm text-muted-foreground"> <button
No filters match &quot;{filterSearchTerm}&quot; key={filter.id}
type="button"
onClick={() => onFilterSelect(filter)}
className={`w-full overflow-hidden text-left px-2 py-2 gap-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${
index === selectedFilterIndex ? "bg-muted/50" : ""
}`}
>
<div className="overflow-hidden">
<div className="font-medium truncate">
{filter.name}
</div>
{filter.description && (
<div className="text-xs text-muted-foreground truncate">
{filter.description}
</div>
)}
</div> </div>
)} {selectedFilter?.id === filter.id && (
</> <Check className="h-4 w-4 shrink-0" />
)} )}
</div> </button>
</PopoverContent> ))}
</Popover> {availableFilters.filter((filter) =>
</form> filter.name
</div> .toLowerCase()
.includes(filterSearchTerm.toLowerCase()),
).length === 0 &&
filterSearchTerm && (
<div className="px-2 py-3 text-sm text-muted-foreground">
No filters match &quot;{filterSearchTerm}&quot;
</div>
)}
</>
)}
</div>
</PopoverContent>
</Popover>
</form>
</div>
); );
}, },
); );

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

@ -80,7 +80,7 @@ export function AnimatedProviderSteps({
<div <div
className={cn( className={cn(
"transition-all duration-150 relative", "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 <CheckIcon
@ -110,7 +110,7 @@ export function AnimatedProviderSteps({
transition={{ duration: 0.4, ease: "easeInOut" }} transition={{ duration: 0.4, ease: "easeInOut" }}
className="flex items-center gap-4 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 ml-2" /> <div className="w-px h-6 bg-border ml-3" />
<div className="relative h-5 w-full"> <div className="relative h-5 w-full">
<AnimatePresence mode="sync" initial={false}> <AnimatePresence mode="sync" initial={false}>
<motion.span <motion.span

120
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 { IBMOnboarding } from "./ibm-onboarding";
import { OllamaOnboarding } from "./ollama-onboarding"; import { OllamaOnboarding } from "./ollama-onboarding";
import { OpenAIOnboarding } from "./openai-onboarding"; import { OpenAIOnboarding } from "./openai-onboarding";
import { TabTrigger } from "./tab-trigger";
interface OnboardingCardProps { interface OnboardingCardProps {
onComplete: () => void; onComplete: () => void;
@ -191,84 +192,77 @@ const OnboardingCard = ({
> >
<TabsList className="mb-4"> <TabsList className="mb-4">
<TabsTrigger value="openai"> <TabsTrigger value="openai">
<div <TabTrigger
className={cn( selected={modelProvider === "openai"}
"flex items-center justify-center gap-2 w-8 h-8 rounded-md", isLoading={isLoadingModels}
modelProvider === "openai" ? "bg-white" : "bg-muted",
)}
> >
<OpenAILogo <div
className={cn( className={cn(
"w-4 h-4 shrink-0", "flex items-center justify-center gap-2 w-8 h-8 rounded-md",
modelProvider === "openai" modelProvider === "openai" ? "bg-white" : "bg-muted",
? "text-black"
: "text-muted-foreground",
)} )}
/> >
</div> <OpenAILogo
OpenAI className={cn(
"w-4 h-4 shrink-0",
modelProvider === "openai"
? "text-black"
: "text-muted-foreground",
)}
/>
</div>
OpenAI
</TabTrigger>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="watsonx"> <TabsTrigger value="watsonx">
<div <TabTrigger
className={cn( selected={modelProvider === "watsonx"}
"flex items-center justify-center gap-2 w-8 h-8 rounded-md", isLoading={isLoadingModels}
modelProvider === "watsonx" ? "bg-[#1063FE]" : "bg-muted",
)}
> >
<IBMLogo <div
className={cn( className={cn(
"w-4 h-4 shrink-0", "flex items-center justify-center gap-2 w-8 h-8 rounded-md",
modelProvider === "watsonx" modelProvider === "watsonx"
? "text-white" ? "bg-[#1063FE]"
: "text-muted-foreground", : "bg-muted",
)} )}
/> >
</div> <IBMLogo
IBM watsonx.ai className={cn(
"w-4 h-4 shrink-0",
modelProvider === "watsonx"
? "text-white"
: "text-muted-foreground",
)}
/>
</div>
IBM watsonx.ai
</TabTrigger>
</TabsTrigger> </TabsTrigger>
<TabsTrigger value="ollama"> <TabsTrigger value="ollama">
<div <TabTrigger
className={cn( selected={modelProvider === "ollama"}
"flex items-center justify-center gap-2 w-8 h-8 rounded-md", isLoading={isLoadingModels}
modelProvider === "ollama" ? "bg-white" : "bg-muted",
)}
> >
<OllamaLogo <div
className={cn( className={cn(
"w-4 h-4 shrink-0", "flex items-center justify-center gap-2 w-8 h-8 rounded-md",
modelProvider === "ollama" modelProvider === "ollama" ? "bg-white" : "bg-muted",
? "text-black"
: "text-muted-foreground",
)} )}
/> >
</div> <OllamaLogo
Ollama className={cn(
"w-4 h-4 shrink-0",
modelProvider === "ollama"
? "text-black"
: "text-muted-foreground",
)}
/>
</div>
Ollama
</TabTrigger>
</TabsTrigger> </TabsTrigger>
</TabsList> </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"> <TabsContent value="openai">
<OpenAIOnboarding <OpenAIOnboarding
setSettings={setSettings} setSettings={setSettings}
@ -295,8 +289,6 @@ const OnboardingCard = ({
</TabsContent> </TabsContent>
</Tabs> </Tabs>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div> <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" /> <div className="w-8 h-8 rounded-lg flex-shrink-0" />
) : ( ) : (
icon || ( 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 <DogIcon
className="h-6 w-6 text-accent-foreground transition-colors duration-300" className="h-6 w-6 text-accent-foreground transition-colors duration-300"
disabled={isCompleted} disabled={isCompleted}

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

@ -76,7 +76,7 @@ const OnboardingUpload = ({ onComplete }: OnboardingUploadProps) => {
onClick={handleUploadClick} onClick={handleUploadClick}
disabled={isUploading} disabled={isUploading}
> >
{isUploading ? "Uploading..." : "Add a Document"} <div>{isUploading ? "Uploading..." : "Add a document"}</div>
</Button> </Button>
<input <input
ref={fileInputRef} 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"> <div className="flex-1 flex justify-end">
{currentStep > 0 && onSkip && ( {currentStep > 0 && onSkip && (
<Button <Button
variant="ghost" variant="link"
size="sm" size="sm"
onClick={onSkip} 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" /> <ArrowRight className="w-4 h-4" />
</Button> </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( className={cn(
"flex h-full w-full max-w-full max-h-full items-center justify-center overflow-hidden", "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", showLayout && !isOnChatPage && "bg-background",
)} )}
> >
@ -199,7 +199,7 @@ export function ChatRenderer({
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: showLayout ? 0 : 1, y: showLayout ? 20 : 0 }} animate={{ opacity: showLayout ? 0 : 1, y: showLayout ? 20 : 0 }}
transition={{ duration: ANIMATION_DURATION, ease: "easeOut" }} 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 <ProgressBar
currentStep={currentStep} currentStep={currentStep}

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

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