better animation

This commit is contained in:
Cole Goldsmith 2025-11-20 12:49:07 -06:00
parent c76e1d1b91
commit 1168b66e4e

View file

@ -54,6 +54,7 @@ export function AssistantMessage({
<div className="w-8 h-8 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">
{/* Dog icon with bark animation when greeting */} {/* Dog icon with bark animation when greeting */}
<motion.div <motion.div
initial={isInitialGreeting ? { rotate: -5, y: -1 } : false}
animate={ animate={
isInitialGreeting isInitialGreeting
? { ? {
@ -100,25 +101,26 @@ export function AssistantMessage({
/> />
<div className="relative"> <div className="relative">
{/* Slide animation for initial greeting */} {/* Slide animation for initial greeting */}
{isInitialGreeting ? ( <motion.div
<motion.div initial={isInitialGreeting ? { opacity: 0, x: -16 } : false}
initial={{ opacity: 0, x: -16 }} animate={
animate={{ isInitialGreeting
opacity: [0, 0, 1, 1], ? {
x: [-16, -8, 0, 0], opacity: [0, 0, 1, 1],
}} x: [-16, -8, 0, 0],
transition={{ }
duration: 0.8, : {}
times: [0, 0.3, 0.6, 1], }
ease: "easeOut", transition={
}} isInitialGreeting
> ? {
<MarkdownRenderer duration: 0.8,
className="text-sm py-1.5 text-foreground" times: [0, 0.3, 0.6, 1],
chatMessage={content} ease: "easeOut",
/> }
</motion.div> : {}
) : ( }
>
<MarkdownRenderer <MarkdownRenderer
className={cn( className={cn(
"text-sm py-1.5 transition-colors duration-300", "text-sm py-1.5 transition-colors duration-300",
@ -133,7 +135,7 @@ export function AssistantMessage({
: content : content
} }
/> />
)} </motion.div>
</div> </div>
</Message> </Message>
</motion.div> </motion.div>