fix(tarko): disable share button during agent execution instead of hiding

Author: ulivz

multimodal/tarko/agent-web-ui/src/standalone/navbar/Navbar.tsx

@@ -135,7 +135,7 @@ export const Navbar: React.FC = () => {
           </motion.button>
 
           {/* Share button - moved to last position */}
-          {activeSessionId && !isProcessing && !isReplayMode && <ShareButton variant="navbar" />}
+          {activeSessionId && !isReplayMode && <ShareButton variant="navbar" disabled={isProcessing} />}
         </div>
       </div>
 

multimodal/tarko/agent-web-ui/src/standalone/share/ShareButton.tsx

@@ -6,6 +6,7 @@ import { ShareModal } from './ShareModal';
 
 interface ShareButtonProps {
   variant?: 'default' | 'navbar';
+  disabled?: boolean;
 }
 
 /**
@@ -17,11 +18,12 @@ interface ShareButtonProps {
  * - Fine hover and click animations, enhancing interactive experience
  * - Support different display variants to adapt to different positions
  */
-export const ShareButton: React.FC<ShareButtonProps> = ({ variant = 'default' }) => {
+export const ShareButton: React.FC<ShareButtonProps> = ({ variant = 'default', disabled = false }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { activeSessionId } = useSession();
 
   const handleOpenModal = () => {
+    if (disabled) return;
     setIsModalOpen(true);
   };
 
@@ -38,16 +40,21 @@ export const ShareButton: React.FC<ShareButtonProps> = ({ variant = 'default' })
     return (
       <>
         <motion.button
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
+          whileHover={disabled ? {} : { scale: 1.05 }}
+          whileTap={disabled ? {} : { scale: 0.95 }}
           onClick={handleOpenModal}
-          className="p-2 text-gray-600 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200 hover:bg-gray-100/40 dark:hover:bg-gray-700/40 rounded-full transition-all duration-200"
-          title="Share this conversation"
+          disabled={disabled}
+          className={`p-2 rounded-full transition-all duration-200 ${
+            disabled
+              ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed'
+              : 'text-gray-600 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200 hover:bg-gray-100/40 dark:hover:bg-gray-700/40'
+          }`}
+          title={disabled ? 'Share unavailable during agent execution' : 'Share this conversation'}
         >
           <FiShare2 size={16} />
         </motion.button>
 
-        <ShareModal isOpen={isModalOpen} onClose={handleCloseModal} sessionId={activeSessionId} />
+        {!disabled && <ShareModal isOpen={isModalOpen} onClose={handleCloseModal} sessionId={activeSessionId} />}
       </>
     );
   }
@@ -56,17 +63,22 @@ export const ShareButton: React.FC<ShareButtonProps> = ({ variant = 'default' })
   return (
     <>
       <motion.button
-        whileHover={{ scale: 1.05 }}
-        whileTap={{ scale: 0.95 }}
+        whileHover={disabled ? {} : { scale: 1.05 }}
+        whileTap={disabled ? {} : { scale: 0.95 }}
         onClick={handleOpenModal}
-        className="flex items-center gap-1.5 px-3 py-1.5 rounded-3xl text-xs text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-200/70 dark:border-gray-700/30 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700/70 transition-all duration-200"
-        title="Share this conversation"
+        disabled={disabled}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-3xl text-xs border shadow-sm transition-all duration-200 ${
+          disabled
+            ? 'text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-700 border-gray-200/50 dark:border-gray-600/30 cursor-not-allowed'
+            : 'text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-gray-200/70 dark:border-gray-700/30 hover:bg-gray-50 dark:hover:bg-gray-700/70'
+        }`}
+        title={disabled ? 'Share unavailable during agent execution' : 'Share this conversation'}
       >
-        <FiShare2 className="text-gray-500 dark:text-gray-400" size={14} />
+        <FiShare2 className={disabled ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'} size={14} />
         <span>Share</span>
       </motion.button>
 
-      <ShareModal isOpen={isModalOpen} onClose={handleCloseModal} sessionId={activeSessionId} />
+      {!disabled && <ShareModal isOpen={isModalOpen} onClose={handleCloseModal} sessionId={activeSessionId} />}
     </>
   );
 };