Add fast fade transition animation when screenshots change

- Implemented 150ms fade out/in transition when scrolling between different screenshots - Uses opacity animation with CSS transitions for smooth visual experience - Maintains current screenshot during transition to prevent flickering - Enhances user experience when navigating through conversation screenshots 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

Author: zlwaterfield

packages/bytebot-ui/src/components/screenshot/ScreenshotViewer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { ScreenshotData } from '@/utils/screenshotUtils';
 
@@ -8,8 +8,25 @@ interface ScreenshotViewerProps {
 }
 
 export function ScreenshotViewer({ screenshot, className = '' }: ScreenshotViewerProps) {
- 
- if (!screenshot) {
+ const [isVisible, setIsVisible] = useState(true);
+ const [currentScreenshot, setCurrentScreenshot] = useState(screenshot);
+
+ useEffect(() => {
+ if (screenshot?.id !== currentScreenshot?.id) {
+ // Start fade out
+ setIsVisible(false);
+ 
+ // After fade out completes, update screenshot and fade in
+ const timeout = setTimeout(() => {
+ setCurrentScreenshot(screenshot);
+ setIsVisible(true);
+ }, 75); // Half of the transition duration
+ 
+ return () => clearTimeout(timeout);
+ }
+ }, [screenshot, currentScreenshot]);
+
+ if (!currentScreenshot) {
  return (
  <div className={`flex items-center justify-center bg-gray-100 ${className}`}>
  <div className="text-center text-gray-500">
@@ -24,10 +41,12 @@ export function ScreenshotViewer({ screenshot, className = '' }: ScreenshotViewe
  return (
  <div className={`relative overflow-hidden ${className}`}>
  <Image
- src={`data:image/png;base64,${screenshot.base64Data}`}
+ src={`data:image/png;base64,${currentScreenshot.base64Data}`}
  alt="Task screenshot"
  fill
- className="object-contain"
+ className={`object-contain transition-opacity duration-150 ease-in-out ${
+ isVisible ? 'opacity-100' : 'opacity-0'
+ }`}
  priority
  />
  </div>