refactor(tarko-agent-ui): remove redundant motion animations (#1530)

Author: ulivz

multimodal/tarko/agent-ui/src/common/components/LoadingSpinner.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
-import { motion } from 'framer-motion';
 
 interface LoadingSpinnerProps {
   size?: number;
   className?: string;
 }
 
-export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ 
-  size = 8, 
-  className = 'border-blue-500 border-t-transparent' 
-}) => (
-  <motion.div
-    animate={{ rotate: 360 }}
-    transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
-    className={`w-${size} h-${size} border-2 rounded-full ${className}`}
-  />
-);
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = 8,
+  className = 'border-blue-500 border-t-transparent',
+}) => <div className={`w-${size} h-${size} border-2 rounded-full animate-spin ${className}`} />;

multimodal/tarko/agent-ui/src/sdk/dialog/ConfirmDialog.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Dialog } from '@headlessui/react';
-import { motion } from 'framer-motion';
 import { FiAlertTriangle, FiX } from 'react-icons/fi';
 
 interface ConfirmDialogProps {
@@ -73,33 +72,27 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
               </div>
             </div>
 
-            <motion.button
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
+            <button
               onClick={onClose}
-              className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"
+              className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all hover:scale-110 active:scale-90"
             >
               <FiX size={18} />
-            </motion.button>
+            </button>
           </div>
 
           <div className="mt-6 flex justify-end gap-3">
-            <motion.button
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
+            <button
               onClick={onClose}
-              className="px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg text-sm font-medium transition-colors"
+              className="px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg text-sm font-medium transition-all hover:scale-105 active:scale-95"
             >
               {cancelText}
-            </motion.button>
-            <motion.button
-              whileHover={{ scale: 1.02 }}
-              whileTap={{ scale: 0.98 }}
+            </button>
+            <button
               onClick={onConfirm}
-              className={`px-4 py-2 ${typeStyles.confirmButton} rounded-lg text-sm font-medium transition-colors`}
+              className={`px-4 py-2 ${typeStyles.confirmButton} rounded-lg text-sm font-medium transition-all hover:scale-105 active:scale-95`}
             >
               {confirmText}
-            </motion.button>
+            </button>
           </div>
         </Dialog.Panel>
       </div>

multimodal/tarko/agent-ui/src/sdk/markdown-renderer/components/Image.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { motion } from 'framer-motion';
 
 interface ImageProps {
   src?: string;
@@ -22,13 +21,11 @@ export const InteractiveImage: React.FC<ImageProps> = ({
   };
 
   return (
-    <motion.img
-      className="max-w-full h-auto my-6 rounded-lg cursor-pointer"
+    <img
+      className="max-w-full h-auto my-6 rounded-lg cursor-pointer transition-transform duration-200 hover:scale-[1.01]"
       src={src}
       alt={alt}
       onClick={handleClick}
-      whileHover={{ scale: 1.01 }}
-      transition={{ duration: 0.2 }}
     />
   );
 };

multimodal/tarko/agent-ui/src/standalone/chat/Message/components/ActionButton.tsx

@@ -97,12 +97,9 @@ export const ActionButton: React.FC<ActionButtonProps> = ({
   };
 
   return (
-    <motion.button
+    <button
       onClick={onClick}
-      className={`flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-xl hover:scale-[1.01] active:scale-[0.99] border text-left group w-full ${getStatusColorClasses()} ${getHoverColorClasses()}`}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.5 }}
+      className={`flex items-center gap-2 px-3 py-1.5 text-xs font-medium rounded-xl hover:scale-[1.01] active:scale-[0.99] border text-left group w-full transition-all ${getStatusColorClasses()} ${getHoverColorClasses()}`}
     >
       <div className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{icon}</div>
 
@@ -144,6 +141,6 @@ export const ActionButton: React.FC<ActionButtonProps> = ({
           />
         )}
       </div>
-    </motion.button>
+    </button>
   );
 };

multimodal/tarko/agent-ui/src/standalone/chat/Message/components/ReportFileEntry.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { motion } from 'framer-motion';
 import { FiFileText, FiBookOpen, FiChevronRight } from 'react-icons/fi';
 import { useSession } from '@/common/hooks/useSession';
 
@@ -28,11 +27,9 @@ export const ReportFileEntry: React.FC<ReportFileEntryProps> = ({ title, timesta
   };
 
   return (
-    <motion.div
-      whileHover={{ y: -2, backgroundColor: 'rgba(0, 0, 0, 0.01)' }}
-      whileTap={{ scale: 0.98 }}
+    <div
       onClick={handleClick}
-      className="mt-3 p-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-100/40 dark:border-gray-700/20 cursor-pointer flex items-center gap-3 group"
+      className="mt-3 p-3 bg-white dark:bg-gray-800 rounded-xl border border-gray-100/40 dark:border-gray-700/20 cursor-pointer flex items-center gap-3 group transition-all duration-200 hover:-translate-y-0.5 hover:bg-gray-50/50 dark:hover:bg-gray-750/50 active:scale-98"
     >
       <div className="w-10 h-10 flex-shrink-0 rounded-lg bg-accent-50 dark:bg-accent-900/20 flex items-center justify-center border border-accent-100/40 dark:border-accent-800/30">
         <FiBookOpen className="text-accent-600 dark:text-accent-400" size={18} />
@@ -51,6 +48,6 @@ export const ReportFileEntry: React.FC<ReportFileEntryProps> = ({ title, timesta
         className="text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity"
         size={16}
       />
-    </motion.div>
+    </div>
   );
 };

multimodal/tarko/agent-ui/src/standalone/chat/Message/components/SkeletonLoader.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { motion } from 'framer-motion';
 
 interface SkeletonLoaderProps {
   lines?: number;
@@ -20,24 +19,18 @@ export const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
         )}
         <div className="flex-1 space-y-3">
           {Array.from({ length: lines }).map((_, index) => (
-            <motion.div
+            <div
               key={index}
-              initial={{ opacity: 0, width: '0%' }}
-              animate={{ opacity: 1, width: '100%' }}
-              transition={{
-                delay: index * 0.2,
-                duration: 0.8,
-                ease: 'easeOut',
-              }}
-              className="space-y-2"
+              className="space-y-2 animate-in fade-in duration-800"
+              style={{ animationDelay: `${index * 0.2}s` }}
             >
               <div
                 className="h-3 bg-gray-200 dark:bg-gray-700 rounded"
                 style={{
                   width: index === lines - 1 ? '75%' : '100%',
                 }}
               />
-            </motion.div>
+            </div>
           ))}
         </div>
       </div>
@@ -73,13 +66,7 @@ export const TypewriterLoader: React.FC<TypewriterLoaderProps> = ({
   return (
     <div className={`font-mono ${className}`}>
       {displayText}
-      <motion.span
-        animate={{ opacity: [1, 0] }}
-        transition={{ duration: 0.5, repeat: Infinity, repeatType: 'reverse' }}
-        className="ml-1"
-      >
-        |_
-      </motion.span>
+      <span className="ml-1 animate-pulse">|_</span>
     </div>
   );
 };

multimodal/tarko/agent-ui/src/standalone/chat/Message/components/ToggleButton.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { motion } from 'framer-motion';
 import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
 
 interface ToggleButtonProps {
@@ -23,13 +22,12 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
   icon,
   children,
 }) => (
-  <motion.button
-    whileHover={{ x: 3 }}
+  <button
     onClick={onToggle}
-    className="flex items-center text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 py-1 px-2 mt-1 rounded-lg hover:bg-gray-50/70 dark:hover:bg-gray-700/20 transition-all duration-200"
+    className="flex items-center text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 py-1 px-2 mt-1 rounded-lg hover:bg-gray-50/70 dark:hover:bg-gray-700/20 transition-all duration-200 hover:translate-x-1"
   >
     {isExpanded ? <FiChevronUp className="mr-1.5" /> : <FiChevronDown className="mr-1.5" />}
     {icon}
     {children}
-  </motion.button>
+  </button>
 );

multimodal/tarko/agent-ui/src/standalone/chat/MessageInput/ChatInput.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { FiSend, FiRefreshCw, FiImage, FiSquare, FiX } from 'react-icons/fi';
-import { motion, AnimatePresence } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
 import { ConnectionStatus } from '@/common/types';
 import { ChatCompletionContentPart } from '@tarko/agent-interface';
 import { useSession } from '@/common/hooks/useSession';
@@ -409,21 +409,19 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             {/* File upload button */}
             {showAttachments && (
               <div className="absolute left-3 bottom-3 flex items-center gap-2">
-                <motion.button
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
+                <button
                   type="button"
                   onClick={handleFileUpload}
                   disabled={isDisabled || isProcessing}
-                  className={`p-2 rounded-full transition-colors ${
+                  className={`p-2 rounded-full transition-all duration-200 hover:scale-105 active:scale-95 ${
                     isDisabled || isProcessing
                       ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed'
                       : 'text-gray-400 hover:text-accent-500 hover:bg-gray-50 dark:hover:bg-gray-700/30 dark:text-gray-400'
                   }`}
                   title="Attach image (or paste directly)"
                 >
                   <FiImage size={18} />
-                </motion.button>
+                </button>
 
                 <input
                   type="file"
@@ -445,11 +443,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                   initial={{ opacity: 0, scale: 0.8 }}
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 0.8 }}
-                  whileTap={{ scale: 0.9 }}
-                  whileHover={{ scale: 1.05 }}
                   type="button"
                   onClick={onReconnect}
-                  className="absolute right-3 bottom-3 p-2 rounded-full text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700/30 dark:text-gray-400 transition-all duration-200"
+                  className="absolute right-3 bottom-3 p-2 rounded-full text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700/30 dark:text-gray-400 transition-all duration-200 hover:scale-105 active:scale-90"
                   title="Try to reconnect"
                 >
                   <FiRefreshCw
@@ -464,16 +460,14 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
                   transition={{ duration: 0.2 }}
-                  whileTap={{ scale: 0.95 }}
-                  whileHover={{ scale: 1.02 }}
                   type="button"
                   onClick={handleAbort}
                   disabled={isAborting}
-                  className={`absolute right-3 bottom-3 w-10 h-10 rounded-full flex items-center justify-center ${
+                  className={`absolute right-3 bottom-3 w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-105 active:scale-95 ${
                     isAborting
                       ? 'bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100 dark:from-indigo-800/30 dark:via-purple-800/30 dark:to-pink-800/30 text-indigo-400 dark:text-indigo-500 cursor-not-allowed border-2 border-indigo-200 dark:border-indigo-700/50'
                       : 'bg-gradient-to-r from-indigo-50 via-purple-50 to-pink-50 hover:from-indigo-100 hover:via-purple-100 hover:to-pink-100 dark:from-indigo-900/20 dark:via-purple-900/20 dark:to-pink-900/20 dark:hover:from-indigo-900/30 dark:hover:via-purple-900/30 dark:hover:to-pink-900/30 text-indigo-600 dark:text-indigo-400 border-2 border-indigo-200 dark:border-indigo-700/50'
-                  } transition-all duration-200 shadow-sm bg-[length:200%_200%] animate-border-flow`}
+                  } shadow-sm bg-[length:200%_200%] animate-border-flow`}
                   title="Stop generation"
                 >
                   {isAborting ? (
@@ -488,15 +482,13 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                   initial={{ opacity: 0, scale: 0.8 }}
                   animate={{ opacity: 1, scale: 1 }}
                   exit={{ opacity: 0, scale: 0.8 }}
-                  whileTap={{ scale: 0.9 }}
-                  whileHover={{ scale: 1.05 }}
                   type="submit"
                   disabled={isMessageEmpty(contextualState.input, uploadedImages) || isDisabled}
-                  className={`absolute right-3 bottom-3 p-3 rounded-full ${
+                  className={`absolute right-3 bottom-3 p-3 rounded-full transition-all duration-200 hover:scale-105 active:scale-90 ${
                     isMessageEmpty(contextualState.input, uploadedImages) || isDisabled
                       ? 'bg-gray-100 dark:bg-gray-700 text-gray-400 cursor-not-allowed'
                       : 'bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400 text-white dark:text-gray-900 shadow-sm'
-                  } transition-all duration-200`}
+                  }`}
                 >
                   <FiSend size={18} />
                 </motion.button>
@@ -510,34 +502,22 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       {showHelpText && (
         <div className="flex justify-center mt-2 text-xs">
           {connectionStatus && !connectionStatus.connected ? (
-            <motion.span
-              initial={{ opacity: 0.7 }}
-              animate={{ opacity: 1 }}
-              className="text-red-500 dark:text-red-400 flex items-center font-medium"
-            >
+            <span className="text-red-500 dark:text-red-400 flex items-center font-medium animate-in fade-in duration-300">
               {connectionStatus.reconnecting
                 ? 'Attempting to reconnect...'
                 : 'Server disconnected. Click the button to reconnect.'}
-            </motion.span>
+            </span>
           ) : isProcessing ? (
-            <motion.span
-              initial={{ opacity: 0.7 }}
-              whileHover={{ opacity: 1 }}
-              className="text-accent-500 dark:text-accent-400 flex items-center"
-            >
+            <span className="text-accent-500 dark:text-accent-400 flex items-center animate-in fade-in duration-300">
               <span className="typing-indicator mr-2">
                 <span></span>
                 <span></span>
                 <span></span>
               </span>
               Agent is processing your request...
-            </motion.span>
+            </span>
           ) : (
-            <motion.span
-              initial={{ opacity: 0.7 }}
-              whileHover={{ opacity: 1 }}
-              className="text-gray-500 dark:text-gray-400 transition-opacity"
-            >
+            <span className="text-gray-500 dark:text-gray-400 transition-opacity hover:opacity-100 animate-in fade-in duration-300">
               {contextualSelectorEnabled ? (
                 <>
                   Use @ to reference files/folders • Ctrl+Enter to send • You can also paste images
@@ -546,7 +526,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               ) : (
                 <>Use Ctrl+Enter to quickly send • You can also paste images directly</>
               )}
-            </motion.span>
+            </span>
           )}
         </div>
       )}