From 0aaa01bde15b020d89837cea14d09a2fa842c244 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Mon, 17 Mar 2025 20:33:54 +0100
Subject: [PATCH] chat update

---
 components/dashboard/ChatDetail.tsx      | 61 +++++++++++-------------
 components/modals/image-viewer-modal.tsx | 46 ++++++++++++++----
 2 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/components/dashboard/ChatDetail.tsx b/components/dashboard/ChatDetail.tsx
index 47651da..3d533c5 100644
--- a/components/dashboard/ChatDetail.tsx
+++ b/components/dashboard/ChatDetail.tsx
@@ -298,45 +298,42 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
   const handleImageNavigation = (direction: 'prev' | 'next') => {
     if (!chat || selectedMessageIndex === null || selectedAttachmentIndex === null) return;
 
-    const currentMessage = chat.messages[selectedMessageIndex];
-    const currentAttachments = currentMessage.attachments.filter(att => 
-      /\.(jpg|jpeg|png|gif|webp|svg|bmp|tiff)($|\?)/i.test(att) || 
-      att.includes('/photos/') || 
-      att.includes('/photo/')
+    // Get all images from all messages
+    const allImages: { messageIndex: number; attachmentIndex: number; url: string }[] = [];
+    
+    chat.messages.forEach((msg, msgIndex) => {
+      msg.attachments.forEach((att, attIndex) => {
+        if (/\.(jpg|jpeg|png|gif|webp|svg|bmp|tiff)($|\?)/i.test(att) || 
+            att.includes('/photos/') || 
+            att.includes('/photo/')) {
+          allImages.push({ messageIndex: msgIndex, attachmentIndex: attIndex, url: att });
+        }
+      });
+    });
+
+    if (allImages.length === 0) return;
+
+    // Find current image index
+    const currentIndex = allImages.findIndex(img => 
+      img.messageIndex === selectedMessageIndex && 
+      img.attachmentIndex === selectedAttachmentIndex
     );
 
-    let newAttachmentIndex = selectedAttachmentIndex;
-    let newMessageIndex = selectedMessageIndex;
+    if (currentIndex === -1) return;
 
+    // Calculate new index
+    let newIndex;
     if (direction === 'next') {
-      newAttachmentIndex++;
-      if (newAttachmentIndex >= currentAttachments.length) {
-        newAttachmentIndex = 0;
-        newMessageIndex++;
-        if (newMessageIndex >= chat.messages.length) {
-          newMessageIndex = 0;
-        }
-      }
+      newIndex = (currentIndex + 1) % allImages.length;
     } else {
-      newAttachmentIndex--;
-      if (newAttachmentIndex < 0) {
-        newMessageIndex--;
-        if (newMessageIndex < 0) {
-          newMessageIndex = chat.messages.length - 1;
-        }
-        const prevMessage = chat.messages[newMessageIndex];
-        const prevAttachments = prevMessage.attachments.filter(att => 
-          /\.(jpg|jpeg|png|gif|webp|svg|bmp|tiff)($|\?)/i.test(att) || 
-          att.includes('/photos/') || 
-          att.includes('/photo/')
-        );
-        newAttachmentIndex = prevAttachments.length - 1;
-      }
+      newIndex = currentIndex === 0 ? allImages.length - 1 : currentIndex - 1;
     }
 
-    setSelectedMessageIndex(newMessageIndex);
-    setSelectedAttachmentIndex(newAttachmentIndex);
-    setSelectedImage(currentAttachments[newAttachmentIndex]);
+    // Update state with new image
+    const newImage = allImages[newIndex];
+    setSelectedMessageIndex(newImage.messageIndex);
+    setSelectedAttachmentIndex(newImage.attachmentIndex);
+    setSelectedImage(newImage.url);
   };
 
   // Update the image click handler
diff --git a/components/modals/image-viewer-modal.tsx b/components/modals/image-viewer-modal.tsx
index a792e13..57bab04 100644
--- a/components/modals/image-viewer-modal.tsx
+++ b/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>