better animation
This commit is contained in:
parent
c76e1d1b91
commit
1168b66e4e
1 changed files with 22 additions and 20 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue