/* eslint-disable @next/next/no-img-element */ import { ImagesIcon, PlusIcon } from 'lucide-react'; import { useState } from 'react'; import Lightbox from 'yet-another-react-lightbox'; import 'yet-another-react-lightbox/styles.css'; import { Message } from './ChatWindow'; type Image = { url: string; img_src: string; title: string; }; const SearchImages = ({ query, chat_history, }: { query: string; chat_history: Message[]; }) => { const [images, setImages] = useState(null); const [loading, setLoading] = useState(false); const [open, setOpen] = useState(false); const [slides, setSlides] = useState([]); return ( <> {!loading && images === null && ( )} {loading && (
{[...Array(4)].map((_, i) => (
))}
)} {images !== null && images.length > 0 && ( <>
{images.length > 4 ? images.slice(0, 3).map((image, i) => ( { 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 cursor-pointer" /> )) : images.map((image, i) => ( { 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 cursor-pointer" /> ))} {images.length > 4 && ( )}
setOpen(false)} slides={slides} /> )} ); }; export default SearchImages;