Fixed the gif picker just need to add in gifs

src/app/api/gifs/route.ts

@@ -15,11 +15,7 @@ export async function GET(request: NextRequest) {
     const pos = searchParams.get("pos") || ""
 
     if (!TENOR_API_KEY) {
-      return NextResponse.json({
+      return NextResponse.json({ results: [], noKey: true })
-        results: [],
-        error: "TENOR_API_KEY not configured",
-        noKey: true,
-      })
     }
 
     const endpoint = q

src/components/chats/media-picker.tsx

@@ -39,8 +39,9 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
   const [gifResults, setGifResults] = useState<any[]>([])
   const [gifLoading, setGifLoading] = useState(false)
   const [gifError, setGifError] = useState("")
-  const [gifNoKey, setGifNoKey] = useState(false)
+  const [gifUnavailable, setGifUnavailable] = useState(false)
   const [gifNext, setGifNext] = useState("")
+  const gifCache = useRef<Map<string, { results: any[]; next: string }>>(new Map())
   const [recentGifs, setRecentGifs] = useState<string[]>([])
   const [recentStickers, setRecentStickers] = useState<string[]>([])
   const [stickerPacks] = useState<StickerPack[]>(getStickerPacks)
@@ -60,6 +61,13 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
   useEffect(() => { setRecentStickers(getRecent(RECENT_STICKERS_KEY)) }, [])
 
   const fetchGifs = useCallback(async (query: string, pos = "") => {
+    const cacheKey = `${query}::${pos}`
+    const cached = gifCache.current.get(cacheKey)
+    if (cached && !pos) {
+      setGifResults(cached.results)
+      setGifNext(cached.next)
+      return
+    }
     setGifLoading(true)
     setGifError("")
     try {
@@ -68,17 +76,18 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
       const res = await fetch(`/api/gifs?${params}`)
       const data = await res.json()
       if (data.noKey) {
-        setGifNoKey(true)
+        setGifUnavailable(true)
         setGifResults([])
       } else if (data.results) {
         setGifResults((prev) => (pos ? [...prev, ...data.results] : data.results))
         setGifNext(data.next || "")
-        setGifNoKey(false)
+        setGifUnavailable(false)
+        if (!pos) gifCache.current.set(cacheKey, { results: data.results, next: data.next || "" })
       } else {
         setGifError("No results found")
       }
     } catch {
-      setGifError("Failed to load GIFs")
+      setGifError("Could not load GIFs. Check your connection.")
     }
     setGifLoading(false)
   }, [])
@@ -196,11 +205,10 @@ export default function MediaPicker({ onEmojiSelect, onMediaSelect, onClose, the
               <div className="flex items-center justify-center h-48">
                 <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
               </div>
-            ) : gifNoKey ? (
+            ) : 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>GIF search requires a Tenor API key</span>
+                <span>GIFs are temporarily unavailable.</span>
-                <span className="text-xs opacity-60">Set TENOR_API_KEY in .env.local</span>
               </div>
             ) : gifError ? (
               <div className="flex flex-col items-center justify-center h-48 text-muted-foreground text-sm gap-2">