GIFs work now

2026-06-30 15:11:15 +02:00
parent 1e8f979cf9
commit 7a5e833722
5 changed files with 401 additions and 90 deletions
@@ -0,0 +1,193 @@
+"use client"
+
+import { useState, useRef, useEffect, useCallback } from "react"
+import { Search, Loader2, ImageIcon } from "lucide-react"
+
+interface GifResult {
+  id: string
+  title: string
+  url: string
+  previewUrl: string
+  previewHeight: number
+  width: number
+  height: number
+}
+
+interface GifPickerProps {
+  onSelect: (gif: { url: string; previewUrl: string; title: string }) => void
+  onClose: () => void
+}
+
+const SEARCH_CACHE = new Map<string, GifResult[]>()
+
+export function GifPicker({ onSelect, onClose }: GifPickerProps) {
+  const [gifs, setGifs] = useState<GifResult[]>([])
+  const [loading, setLoading] = useState(true)
+  const [loadingMore, setLoadingMore] = useState(false)
+  const [search, setSearch] = useState("")
+  const [offset, setOffset] = useState(0)
+  const [hasMore, setHasMore] = useState(true)
+  const [error, setError] = useState("")
+  const sentinelRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
+
+  const fetchGifs = useCallback(async (q: string, off: number, append: boolean) => {
+    if (off === 0) {
+      const cacheKey = q || "__trending__"
+      const cached = SEARCH_CACHE.get(cacheKey)
+      if (cached) {
+        setGifs(cached)
+        setLoading(false)
+        setHasMore(true)
+        setOffset(cached.length)
+        return
+      }
+    }
+
+    try {
+      if (!append) setLoading(true)
+      else setLoadingMore(true)
+      setError("")
+
+      const params = new URLSearchParams()
+      if (q) {
+        params.set("type", "search")
+        params.set("q", q)
+      }
+      params.set("offset", String(off))
+      params.set("limit", "20")
+
+      const res = await fetch(`/api/ai/giphy?${params}`)
+      if (!res.ok) {
+        const data = await res.json()
+        throw new Error(data.error || "Failed to fetch GIFs")
+      }
+
+      const data = await res.json()
+      const newGifs: GifResult[] = data.gifs || []
+
+      if (append) {
+        setGifs((prev) => [...prev, ...newGifs])
+      } else {
+        setGifs(newGifs)
+        if (off === 0 && !q) {
+          SEARCH_CACHE.set("__trending__", newGifs)
+        }
+        if (q) {
+          SEARCH_CACHE.set(q, newGifs)
+        }
+      }
+
+      setOffset(off + newGifs.length)
+      setHasMore(newGifs.length === 20)
+    } catch (err: any) {
+      setError(err.message || "Failed to load GIFs")
+    } finally {
+      setLoading(false)
+      setLoadingMore(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchGifs("", 0, false)
+  }, [fetchGifs])
+
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current)
+    if (!search.trim()) {
+      fetchGifs("", 0, false)
+      return
+    }
+    searchTimeoutRef.current = setTimeout(() => {
+      fetchGifs(search.trim(), 0, false)
+    }, 400)
+    return () => {
+      if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current)
+    }
+  }, [search, fetchGifs])
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
+          fetchGifs(search.trim(), offset, true)
+        }
+      },
+      { rootMargin: "200px" }
+    )
+
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [hasMore, loadingMore, loading, offset, search, fetchGifs])
+
+  return (
+    <div className="absolute bottom-full left-0 right-0 mb-2 bg-card border border-border rounded-2xl shadow-xl shadow-black/20 overflow-hidden z-50">
+      <div className="p-3 border-b border-border">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search GIFs..."
+            className="w-full bg-muted/50 text-foreground text-sm rounded-xl pl-9 pr-4 py-2.5 outline-none focus:ring-2 focus:ring-primary/30 placeholder:text-muted-foreground/60"
+          />
+        </div>
+      </div>
+
+      <div className="overflow-y-auto" style={{ maxHeight: "360px" }}>
+        {loading ? (
+          <div className="flex items-center justify-center py-16">
+            <Loader2 className="h-6 w-6 animate-spin text-primary" />
+          </div>
+        ) : error ? (
+          <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
+            <ImageIcon className="h-8 w-8 text-muted-foreground mb-2" />
+            <p className="text-sm text-muted-foreground">{error}</p>
+          </div>
+        ) : gifs.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
+            <ImageIcon className="h-8 w-8 text-muted-foreground mb-2" />
+            <p className="text-sm text-muted-foreground">No GIFs found.</p>
+          </div>
+        ) : (
+          <>
+            <div className="grid grid-cols-2 gap-2 p-3">
+              {gifs.map((gif) => (
+                <button
+                  key={gif.id}
+                  type="button"
+                  onClick={() => onSelect({ url: gif.url, previewUrl: gif.previewUrl, title: gif.title })}
+                  className="relative rounded-xl overflow-hidden bg-muted/30 hover:ring-2 hover:ring-primary/50 transition-all duration-200 aspect-video"
+                  title={gif.title}
+                >
+                  <img
+                    src={gif.previewUrl}
+                    alt={gif.title || "GIF"}
+                    loading="lazy"
+                    className="w-full h-full object-cover"
+                  />
+                </button>
+              ))}
+            </div>
+            {loadingMore && (
+              <div className="flex items-center justify-center py-4">
+                <Loader2 className="h-5 w-5 animate-spin text-primary" />
+              </div>
+            )}
+            {hasMore && <div ref={sentinelRef} className="h-4" />}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}