feat(chat): add animated deer to response indicator (#269)

web/src/app/chat/components/messages-block.tsx

@@ -130,8 +130,26 @@ export function MessagesBlock({ className }: { className?: string }) {
               )}
             >
               <div className="flex items-center justify-between">
-                <div className="flex-grow">
-                  <CardHeader>
+                <div className="flex flex-grow items-center">
+                  {responding && (
+                    <motion.div
+                      className="ml-3"
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.8 }}
+                      transition={{ duration: 0.3 }}
+                    >
+                      <video
+                        // Walking deer animation, designed by @liangzhaojun. Thank you for creating it!
+                        src="/images/walking_deer.webm"
+                        autoPlay
+                        loop
+                        muted
+                        className="h-[42px] w-[42px] object-contain"
+                      />
+                    </motion.div>
+                  )}
+                  <CardHeader className={cn("flex-grow", responding && "pl-3")}>
                     <CardTitle>
                       <RainbowText animated={responding}>
                         {responding ? "Replaying" : `${replayTitle}`}