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

Added onboarding style for nudges

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-17 17:19:39 -03:00 • committed by Mike Fortman
parent b38da01efe
commit 26aea23b4e
1 changed files with 54 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
frontend/src/app/chat/nudges.tsx
View file

@ -1,46 +1,59 @@
import { motion, AnimatePresence } from "motion/react"; import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";
export default function Nudges({ export default function Nudges({
nudges, nudges,
handleSuggestionClick, onboarding,
handleSuggestionClick,
}: { }: {
nudges: string[]; nudges: string[];
onboarding?: boolean;
handleSuggestionClick: (suggestion: string) => void; handleSuggestionClick: (suggestion: string) => void;
}) { }) {
return ( return (
<div className="flex-shrink-0 h-12 w-full overflow-hidden"> <div className="flex-shrink-0 h-12 w-full overflow-hidden">
<AnimatePresence> <AnimatePresence>
{nudges.length > 0 && ( {nudges.length > 0 && (
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }} exit={{ opacity: 0, y: 20 }}
transition={{ transition={{
duration: 0.2, duration: 0.2,
ease: "easeInOut", ease: "easeInOut",
}} }}
> >
<div className="relative px-6 pt-4 flex justify-center"> <div
<div className="w-full max-w-[75%]"> className={
<div className="flex gap-3 justify-start overflow-x-auto scrollbar-hide"> onboarding
{nudges.map((suggestion: string, index: number) => ( ? "relative flex"
<button : "relative px-6 pt-4 flex justify-center"
key={index} }
onClick={() => handleSuggestionClick(suggestion)} >
className="px-2 py-1.5 bg-muted hover:bg-muted/50 rounded-lg text-sm text-placeholder-foreground hover:text-foreground transition-colors whitespace-nowrap" <div className="w-full max-w-[75%]">
> <div className="flex gap-3 justify-start overflow-x-auto scrollbar-hide">
{suggestion} {nudges.map((suggestion: string, index: number) => (
</button> <button
))} key={index}
</div> onClick={() => handleSuggestionClick(suggestion)}
{/* Fade out gradient on the right */} className={cn(
<div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent pointer-events-none"></div> onboarding
</div> ? "bg-background hover:bg-background/50 text-foreground border"
</div> : "bg-muted hover:bg-muted/50 text-placeholder-foreground hover:text-foreground",
</motion.div> "px-2 py-1.5 rounded-lg text-sm transition-colors whitespace-nowrap",
)} )}
</AnimatePresence> >
</div> {suggestion}
); </button>
))}
</div>
{/* Fade out gradient on the right */}
<div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent pointer-events-none"></div>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
);
} }