feat(UI): Tabbed interface for messages.

src/components/SearchImages.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import { ImagesIcon, PlusIcon } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Lightbox from 'yet-another-react-lightbox';
 import 'yet-another-react-lightbox/styles.css';
 import { Message } from './ChatWindow';
@@ -15,75 +14,91 @@ const SearchImages = ({
   query,
   chatHistory,
   messageId,
+  onImagesLoaded,
 }: {
   query: string;
   chatHistory: Message[];
   messageId: string;
+  onImagesLoaded?: (count: number) => void;
 }) => {
   const [images, setImages] = useState<Image[] | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [open, setOpen] = useState(false);
   const [slides, setSlides] = useState<any[]>([]);
+  const hasLoadedRef = useRef(false);
+
+  useEffect(() => {
+    // Skip fetching if images are already loaded for this message
+    if (hasLoadedRef.current) {
+      return;
+    }
+
+    const fetchImages = async () => {
+      setLoading(true);
+
+      const chatModelProvider = localStorage.getItem('chatModelProvider');
+      const chatModel = localStorage.getItem('chatModel');
+      const customOpenAIBaseURL = localStorage.getItem('openAIBaseURL');
+      const customOpenAIKey = localStorage.getItem('openAIApiKey');
+      const ollamaContextWindow =
+        localStorage.getItem('ollamaContextWindow') || '2048';
+
+      try {
+        const res = await fetch(`/api/images`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            query: query,
+            chatHistory: chatHistory,
+            chatModel: {
+              provider: chatModelProvider,
+              model: chatModel,
+              ...(chatModelProvider === 'custom_openai' && {
+                customOpenAIBaseURL: customOpenAIBaseURL,
+                customOpenAIKey: customOpenAIKey,
+              }),
+              ...(chatModelProvider === 'ollama' && {
+                ollamaContextWindow: parseInt(ollamaContextWindow),
+              }),
+            },
+          }),
+        });
+
+        const data = await res.json();
+
+        const images = data.images ?? [];
+        setImages(images);
+        setSlides(
+          images.map((image: Image) => {
+            return {
+              src: image.img_src,
+            };
+          }),
+        );
+        if (onImagesLoaded && images.length > 0) {
+          onImagesLoaded(images.length);
+        }
+        // Mark as loaded to prevent refetching
+        hasLoadedRef.current = true;
+      } catch (error) {
+        console.error('Error fetching images:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchImages();
+
+    // Reset the loading state when component unmounts
+    return () => {
+      hasLoadedRef.current = false;
+    };
+  }, [query, messageId]);
 
   return (
     <>
-      {!loading && images === null && (
-        <button
-          id={`search-images-${messageId}`}
-          onClick={async () => {
-            setLoading(true);
-
-            const chatModelProvider = localStorage.getItem('chatModelProvider');
-            const chatModel = localStorage.getItem('chatModel');
-            const customOpenAIBaseURL = localStorage.getItem('openAIBaseURL');
-            const customOpenAIKey = localStorage.getItem('openAIApiKey');
-            const ollamaContextWindow =
-              localStorage.getItem('ollamaContextWindow') || '2048';
-
-            const res = await fetch(`/api/images`, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                query: query,
-                chatHistory: chatHistory,
-                chatModel: {
-                  provider: chatModelProvider,
-                  model: chatModel,
-                  ...(chatModelProvider === 'custom_openai' && {
-                    customOpenAIBaseURL: customOpenAIBaseURL,
-                    customOpenAIKey: customOpenAIKey,
-                  }),
-                  ...(chatModelProvider === 'ollama' && {
-                    ollamaContextWindow: parseInt(ollamaContextWindow),
-                  }),
-                },
-              }),
-            });
-
-            const data = await res.json();
-
-            const images = data.images ?? [];
-            setImages(images);
-            setSlides(
-              images.map((image: Image) => {
-                return {
-                  src: image.img_src,
-                };
-              }),
-            );
-            setLoading(false);
-          }}
-          className="border border-dashed border-light-200 dark:border-dark-200 hover:bg-light-200 dark:hover:bg-dark-200 active:scale-95 duration-200 transition px-4 py-2 flex flex-row items-center justify-between rounded-lg dark:text-white text-sm w-full"
-        >
-          <div className="flex flex-row items-center space-x-2">
-            <ImagesIcon size={17} />
-            <p>Search images</p>
-          </div>
-          <PlusIcon className="text-[#24A0ED]" size={17} />
-        </button>
-      )}
       {loading && (
         <div className="grid grid-cols-2 gap-2">
           {[...Array(4)].map((_, i) => (
@@ -97,59 +112,22 @@ const SearchImages = ({
       {images !== null && images.length > 0 && (
         <>
           <div className="grid grid-cols-2 gap-2">
-            {images.length > 4
-              ? images.slice(0, 3).map((image, i) => (
-                  <img
-                    onClick={() => {
-                      setOpen(true);
-                      setSlides([
-                        slides[i],
-                        ...slides.slice(0, i),
-                        ...slides.slice(i + 1),
-                      ]);
-                    }}
-                    key={i}
-                    src={image.img_src}
-                    alt={image.title}
-                    className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 hover:scale-[1.02] cursor-zoom-in"
-                  />
-                ))
-              : images.map((image, i) => (
-                  <img
-                    onClick={() => {
-                      setOpen(true);
-                      setSlides([
-                        slides[i],
-                        ...slides.slice(0, i),
-                        ...slides.slice(i + 1),
-                      ]);
-                    }}
-                    key={i}
-                    src={image.img_src}
-                    alt={image.title}
-                    className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 hover:scale-[1.02] cursor-zoom-in"
-                  />
-                ))}
-            {images.length > 4 && (
-              <button
-                onClick={() => setOpen(true)}
-                className="bg-light-100 hover:bg-light-200 dark:bg-dark-100 dark:hover:bg-dark-200 transition duration-200 active:scale-95 hover:scale-[1.02] h-auto w-full rounded-lg flex flex-col justify-between text-white p-2"
-              >
-                <div className="flex flex-row items-center space-x-1">
-                  {images.slice(3, 6).map((image, i) => (
-                    <img
-                      key={i}
-                      src={image.img_src}
-                      alt={image.title}
-                      className="h-6 w-12 rounded-md lg:h-3 lg:w-6 lg:rounded-sm aspect-video object-cover"
-                    />
-                  ))}
-                </div>
-                <p className="text-black/70 dark:text-white/70 text-xs">
-                  View {images.length - 3} more
-                </p>
-              </button>
-            )}
+            {images.map((image, i) => (
+              <img
+                onClick={() => {
+                  setOpen(true);
+                  setSlides([
+                    slides[i],
+                    ...slides.slice(0, i),
+                    ...slides.slice(i + 1),
+                  ]);
+                }}
+                key={i}
+                src={image.img_src}
+                alt={image.title}
+                className="h-full w-full aspect-video object-cover rounded-lg transition duration-200 active:scale-95 hover:scale-[1.02] cursor-zoom-in"
+              />
+            ))}
           </div>
           <Lightbox open={open} close={() => setOpen(false)} slides={slides} />
         </>