fix(UI): Fix results showing in light mode

feat(AI): Enhance system prompt for more reliable and relevant results
fix(Reddit): Reddit focus should work again. Works around SearXNG limitations of broken reddit search by using `site:reddit.com`

src/components/MessageTabs.tsx

@@ -377,7 +377,7 @@ const MessageTabs = ({
                 'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
                 'prose-code:bg-transparent prose-code:p-0 prose-code:text-inherit prose-code:font-normal prose-code:before:content-none prose-code:after:content-none',
                 'prose-pre:bg-transparent prose-pre:border-0 prose-pre:m-0 prose-pre:p-0',
-                'max-w-none break-words px-4 text-white',
+                'max-w-none break-words px-4 text-black dark:text-white',
               )}
               options={markdownOverrides}
             >

src/components/SearchImages.tsx

@@ -25,15 +25,27 @@ const SearchImages = ({
   const [loading, setLoading] = useState(true);
   const [open, setOpen] = useState(false);
   const [slides, setSlides] = useState<any[]>([]);
-  const hasLoadedRef = useRef(false);
+  const [displayLimit, setDisplayLimit] = useState(10); // Initially show only 10 images
+  const loadedMessageIdsRef = useRef<Set<string>>(new Set());
+
+  // Function to show more images when the Show More button is clicked
+  const handleShowMore = () => {
+    // If we're already showing all images, don't do anything
+    if (images && displayLimit >= images.length) return;
+    
+    // Otherwise, increase the display limit by 10, or show all images
+    setDisplayLimit(prev => images ? Math.min(prev + 10, images.length) : prev);
+  };
 
   useEffect(() => {
     // Skip fetching if images are already loaded for this message
-    if (hasLoadedRef.current) {
+    if (loadedMessageIdsRef.current.has(messageId)) {
       return;
     }
 
     const fetchImages = async () => {
+      // Mark as loaded to prevent refetching
+      loadedMessageIdsRef.current.add(messageId);
       setLoading(true);
 
       const chatModelProvider = localStorage.getItem('chatModelProvider');
@@ -80,8 +92,7 @@ const SearchImages = ({
         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 {
@@ -91,11 +102,7 @@ const SearchImages = ({
 
     fetchImages();
 
-    // Reset the loading state when component unmounts
-    return () => {
-      hasLoadedRef.current = false;
-    };
-  }, [query, messageId]);
+  }, [query, messageId, chatHistory, onImagesLoaded]);
 
   return (
     <>
@@ -111,8 +118,8 @@ const SearchImages = ({
       )}
       {images !== null && images.length > 0 && (
         <>
-          <div className="grid grid-cols-2 gap-2">
-            {images.map((image, i) => (
+          <div className="grid grid-cols-2 gap-2" key={`image-results-${messageId}`}>
+            {images.slice(0, displayLimit).map((image, i) => (
               <img
                 onClick={() => {
                   setOpen(true);
@@ -129,6 +136,17 @@ const SearchImages = ({
               />
             ))}
           </div>
+          {images.length > displayLimit && (
+            <div className="flex justify-center mt-4">
+              <button
+                onClick={handleShowMore}
+                className="px-4 py-2 bg-light-secondary dark:bg-dark-secondary hover:bg-light-200 dark:hover:bg-dark-200 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white rounded-md transition duration-200 flex items-center space-x-2"
+              >
+                <span>Show More Images</span> 
+                <span className="text-sm opacity-75">({displayLimit} of {images.length})</span>
+              </button>
+            </div>
+          )}
           <Lightbox open={open} close={() => setOpen(false)} slides={slides} />
         </>
       )}

src/components/SearchVideos.tsx

@@ -40,12 +40,22 @@ const Searchvideos = ({
   const [open, setOpen] = useState(false);
   const [slides, setSlides] = useState<VideoSlide[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [displayLimit, setDisplayLimit] = useState(10); // Initially show only 10 videos
   const videoRefs = useRef<(HTMLIFrameElement | null)[]>([]);
-  const hasLoadedRef = useRef(false);
+  const loadedMessageIdsRef = useRef<Set<string>>(new Set());
+
+  // Function to show more videos when the Show More button is clicked
+  const handleShowMore = () => {
+    // If we're already showing all videos, don't do anything
+    if (videos && displayLimit >= videos.length) return;
+    
+    // Otherwise, increase the display limit by 10, or show all videos
+    setDisplayLimit(prev => videos ? Math.min(prev + 10, videos.length) : prev);
+  };
 
   useEffect(() => {
     // Skip fetching if videos are already loaded for this message
-    if (hasLoadedRef.current) {
+    if (loadedMessageIdsRef.current.has(messageId)) {
       return;
     }
 
@@ -99,7 +109,7 @@ const Searchvideos = ({
           onVideosLoaded(videos.length);
         }
         // Mark as loaded to prevent refetching
-        hasLoadedRef.current = true;
+        loadedMessageIdsRef.current.add(messageId);
       } catch (error) {
         console.error('Error fetching videos:', error);
       } finally {
@@ -109,11 +119,7 @@ const Searchvideos = ({
 
     fetchVideos();
 
-    // Reset the loading state when component unmounts
-    return () => {
-      hasLoadedRef.current = false;
-    };
-  }, [query, messageId]);
+  }, [query, messageId, chatHistory, onVideosLoaded]);
 
   return (
     <>
@@ -129,8 +135,8 @@ const Searchvideos = ({
       )}
       {videos !== null && videos.length > 0 && (
         <>
-          <div className="grid grid-cols-2 gap-2">
-            {videos.map((video, i) => (
+          <div className="grid grid-cols-2 gap-2" key={`video-results-${messageId}`}>
+            {videos.slice(0, displayLimit).map((video, i) => (
               <div
                 onClick={() => {
                   setOpen(true);
@@ -155,6 +161,17 @@ const Searchvideos = ({
               </div>
             ))}
           </div>
+          {videos.length > displayLimit && (
+            <div className="flex justify-center mt-4">
+              <button
+                onClick={handleShowMore}
+                className="px-4 py-2 bg-light-secondary dark:bg-dark-secondary hover:bg-light-200 dark:hover:bg-dark-200 text-black/70 dark:text-white/70 hover:text-black dark:hover:text-white rounded-md transition duration-200 flex items-center space-x-2"
+              >
+                <span>Show More Videos</span> 
+                <span className="text-sm opacity-75">({displayLimit} of {videos.length})</span>
+              </button>
+            </div>
+          )}
           <Lightbox
             open={open}
             close={() => setOpen(false)}