GIFs work now

src/components/chats/media-picker.tsx

@@ -57,7 +57,13 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
     return () => document.removeEventListener("mousedown", handleClick)
   }, [onClose])
 
-  useEffect(() => { setRecentGifs(getRecent(RECENT_GIFS_KEY)) }, [])
+  useEffect(() => {
+    setRecentGifs(getRecent(RECENT_GIFS_KEY))
+    if (!navigator.onLine) {
+      console.warn("[GIF Picker] Browser is offline — GIF service may be unavailable")
+    }
+  }, [])
+
   useEffect(() => { setRecentStickers(getRecent(RECENT_STICKERS_KEY)) }, [])
 
   const fetchGifs = useCallback(async (query: string, pos = "") => {
@@ -76,6 +82,7 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
       const res = await fetch(`/api/gifs?${params}`)
       const data = await res.json()
       if (data.noKey) {
+        console.error("[GIF Picker] GIPHY_API_KEY is not configured on the server. Add GIPHY_API_KEY to .env.local and restart the dev server.")
         setGifUnavailable(true)
         setGifResults([])
       } else if (data.results) {
@@ -103,6 +110,15 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
     return () => { if (searchTimer.current) clearTimeout(searchTimer.current) }
   }, [tab, gifQuery, fetchGifs])
 
+  useEffect(() => {
+    if (tab !== "gif" || !gifError) return
+    const interval = setInterval(() => {
+      if (gifUnavailable) return
+      fetchGifs(gifQuery.trim())
+    }, 15000)
+    return () => clearInterval(interval)
+  }, [tab, gifError, gifUnavailable, gifQuery, fetchGifs])
+
   const handleGifSelect = (gif: any) => {
     const content = JSON.stringify({ gif: gif.url, w: gif.width, h: gif.height })
     addRecent(RECENT_GIFS_KEY, gif.id)
@@ -208,7 +224,7 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
             ) : gifUnavailable ? (
               <div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-2">
                 <Image className="h-8 w-8 opacity-40" />
-                <span>GIFs are temporarily unavailable.</span>
+                <span>GIF service not configured.</span>
               </div>
             ) : gifError ? (
               <div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-2">