chat update

components/modals/image-viewer-modal.tsx

@@ -1,6 +1,7 @@
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { X, ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useEffect } from "react";
 
 interface ImageViewerModalProps {
   isOpen: boolean;
@@ -10,24 +11,49 @@ interface ImageViewerModalProps {
 }
 
 export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: ImageViewerModalProps) {
+  const handleNavigation = (direction: 'prev' | 'next') => (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onNavigate?.(direction);
+  };
+
+  // Add keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!onNavigate) return;
+      
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        onNavigate('prev');
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        onNavigate('next');
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, onNavigate, onClose]);
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none">
         <div className="relative w-full h-full">
-          <button
-            onClick={onClose}
-            className="absolute -top-10 right-0 p-2 text-white hover:text-gray-300 transition-colors"
-          >
-            <X size={24} />
-          </button>
-          
           {onNavigate && (
             <>
               <Button
                 variant="ghost"
                 size="icon"
                 className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 hover:bg-white/10"
-                onClick={() => onNavigate('prev')}
+                onClick={handleNavigation('prev')}
               >
                 <ChevronLeft size={24} />
               </Button>
@@ -35,7 +61,7 @@ export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: Imag
                 variant="ghost"
                 size="icon"
                 className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 hover:bg-white/10"
-                onClick={() => onNavigate('next')}
+                onClick={handleNavigation('next')}
               >
                 <ChevronRight size={24} />
               </Button>