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

Added animation to displaying nudges

Browse source
This commit is contained in:
Lucas Oliveira 2025-09-05 17:01:03 -03:00
parent 01b10d403a
commit 560683d782
1 changed files with 35 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,28 @@
import { motion, AnimatePresence } from "motion/react";
export default function Nudges({ export default function Nudges({
nudges, nudges,
handleSuggestionClick, handleSuggestionClick,
}: { }: {
nudges: string[]; nudges: string[];
handleSuggestionClick: (suggestion: string) => void; handleSuggestionClick: (suggestion: string) => void;
}) { }) {
return ( return (
<div className="flex-shrink-0 px-6 pt-4 flex justify-center"> <div className="flex-shrink-0 h-12 w-full overflow-hidden">
<div className="w-full max-w-[75%] relative"> <AnimatePresence>
{nudges.length > 0 && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
transition={{
duration: 0.2,
ease: "easeInOut",
}}
>
<div className="relative px-6 pt-4 flex justify-center">
<div className="w-full max-w-[75%]">
<div className="flex gap-3 justify-start overflow-x-auto scrollbar-hide"> <div className="flex gap-3 justify-start overflow-x-auto scrollbar-hide">
{nudges.map((suggestion: string, index: number) => ( {nudges.map((suggestion: string, index: number) => (
<button <button
@ -23,5 +38,9 @@ export default function Nudges({
<div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent pointer-events-none"></div> <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>
</div> </div>
</motion.div>
)}
</AnimatePresence>
</div>
); );
} }