feat(opensearch): Add autocomplete functionality to opensearch. This gets proxied to the searxng instance.

This commit is contained in:
Willie Zutz
2025-05-11 13:44:47 -06:00
parent 03b27d9cbb
commit c3a1e434e5
6 changed files with 105 additions and 16 deletions

View File

@@ -32,9 +32,11 @@ const SearchImages = ({
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);
setDisplayLimit((prev) =>
images ? Math.min(prev + 10, images.length) : prev,
);
};
useEffect(() => {
@@ -92,7 +94,6 @@ const SearchImages = ({
if (onImagesLoaded && images.length > 0) {
onImagesLoaded(images.length);
}
} catch (error) {
console.error('Error fetching images:', error);
} finally {
@@ -101,7 +102,6 @@ const SearchImages = ({
};
fetchImages();
}, [query, messageId, chatHistory, onImagesLoaded]);
return (
@@ -118,7 +118,10 @@ const SearchImages = ({
)}
{images !== null && images.length > 0 && (
<>
<div className="grid grid-cols-2 gap-2" key={`image-results-${messageId}`}>
<div
className="grid grid-cols-2 gap-2"
key={`image-results-${messageId}`}
>
{images.slice(0, displayLimit).map((image, i) => (
<img
onClick={() => {
@@ -142,8 +145,10 @@ const SearchImages = ({
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>
<span>Show More Images</span>
<span className="text-sm opacity-75">
({displayLimit} of {images.length})
</span>
</button>
</div>
)}

View File

@@ -48,9 +48,11 @@ const Searchvideos = ({
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);
setDisplayLimit((prev) =>
videos ? Math.min(prev + 10, videos.length) : prev,
);
};
useEffect(() => {
@@ -118,7 +120,6 @@ const Searchvideos = ({
};
fetchVideos();
}, [query, messageId, chatHistory, onVideosLoaded]);
return (
@@ -135,7 +136,10 @@ const Searchvideos = ({
)}
{videos !== null && videos.length > 0 && (
<>
<div className="grid grid-cols-2 gap-2" key={`video-results-${messageId}`}>
<div
className="grid grid-cols-2 gap-2"
key={`video-results-${messageId}`}
>
{videos.slice(0, displayLimit).map((video, i) => (
<div
onClick={() => {
@@ -167,8 +171,10 @@ const Searchvideos = ({
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>
<span>Show More Videos</span>
<span className="text-sm opacity-75">
({displayLimit} of {videos.length})
</span>
</button>
</div>
)}