From 26f35d318226c3b3c32a767f6de423aa94afb24a Mon Sep 17 00:00:00 2001 From: Dens Sumesh Date: Thu, 9 Jan 2025 11:09:30 -0800 Subject: [PATCH] bugfix: fix image search --- .../example/src/routeTree.gen.ts | 10 +-- clients/search-component/package.json | 2 +- .../src/TrieveModal/Chat/ChatMode.tsx | 12 +++- .../src/TrieveModal/ImagePreview.tsx | 30 +++++---- .../src/TrieveModal/Search/SearchMode.tsx | 62 +++++++++++-------- .../src/TrieveModal/Search/UploadImage.tsx | 25 ++++++-- .../src/TrieveModal/index.css | 10 ++- .../src/TrieveModal/index.tsx | 30 +++++---- .../src/utils/hooks/modal-context.tsx | 9 +-- 9 files changed, 110 insertions(+), 80 deletions(-) diff --git a/clients/search-component/example/src/routeTree.gen.ts b/clients/search-component/example/src/routeTree.gen.ts index 25f03397c1..740177945e 100644 --- a/clients/search-component/example/src/routeTree.gen.ts +++ b/clients/search-component/example/src/routeTree.gen.ts @@ -1,12 +1,12 @@ +/* prettier-ignore-start */ + /* eslint-disable */ // @ts-nocheck // noinspection JSUnusedGlobalSymbols -// This file was automatically generated by TanStack Router. -// You should NOT make any changes in this file as it will be overwritten. -// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified. +// This file is auto-generated by TanStack Router import { createFileRoute } from '@tanstack/react-router' @@ -22,13 +22,11 @@ const IndexLazyImport = createFileRoute('/')() // Create/Update Routes const EcommerceRoute = EcommerceImport.update({ - id: '/ecommerce', path: '/ecommerce', getParentRoute: () => rootRoute, } as any) const IndexLazyRoute = IndexLazyImport.update({ - id: '/', path: '/', getParentRoute: () => rootRoute, } as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route)) @@ -95,6 +93,8 @@ export const routeTree = rootRoute ._addFileChildren(rootRouteChildren) ._addFileTypes() +/* prettier-ignore-end */ + /* ROUTE_MANIFEST_START { "routes": { diff --git a/clients/search-component/package.json b/clients/search-component/package.json index a2c2e85dd0..d93a5d168d 100644 --- a/clients/search-component/package.json +++ b/clients/search-component/package.json @@ -19,7 +19,7 @@ "import": "./dist/vanilla/index.js" } }, - "version": "0.3.5", + "version": "0.3.6", "license": "MIT", "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component", "scripts": { diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx index 0ff9f1f7d7..2a1de49ebc 100644 --- a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx +++ b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx @@ -20,7 +20,7 @@ export const ChatMode = () => { currentGroup, setCurrentGroup, uploadingImage, - imageUrl + imageUrl, } = useModalState(); const { askQuestion, @@ -91,7 +91,9 @@ export const ChatMode = () => { - {messages.length < 1 ? "Close" : isDoneReading ? "Clear" : "Stop"} + + {messages.length < 1 ? "Close" : isDoneReading ? "Clear" : "Stop"}{" "} + )} {!props.inline && (currentQuestion || messages.length) ? ( @@ -171,7 +173,11 @@ export const ChatMode = () => { )} -
+
{!props.inline ? ( + )} -
+
diff --git a/clients/search-component/src/TrieveModal/Search/SearchMode.tsx b/clients/search-component/src/TrieveModal/Search/SearchMode.tsx index 7690284348..005ea9f32c 100644 --- a/clients/search-component/src/TrieveModal/Search/SearchMode.tsx +++ b/clients/search-component/src/TrieveModal/Search/SearchMode.tsx @@ -15,6 +15,7 @@ import { ProductGroupItem } from "./ProductGroupItem"; import { PdfItem } from "./PdfItem"; import { SparklesIcon } from "../icons"; import { UploadImage } from "./UploadImage"; +import ImagePreview from "../ImagePreview"; export const SearchMode = () => { const { @@ -28,6 +29,8 @@ export const SearchMode = () => { inputRef, open, mode, + uploadingImage, + imageUrl, } = useModalState(); const { suggestedQueries, getQueries, isLoadingSuggestedQueries } = @@ -164,32 +167,39 @@ export const SearchMode = () => { ref={inputRef} value={query} onChange={(e) => setQuery(e.target.value)} - placeholder={props.placeholder || "Search for anything"} + placeholder={ + imageUrl.length > 0 + ? "Using Image for Search" + : props.placeholder || "Search for anything" + } className={`search-input ${props.type}`} + disabled={imageUrl.length > 0} /> - - + {query && ( + + )}
+ {props.suggestedQueries && (!query || (query && !results.length)) && (
<> @@ -204,7 +214,7 @@ export const SearchMode = () => {

Suggested Queries:

{!suggestedQueries.length && (

- Loading random query suggestions... + Loading query suggestions...

)} {suggestedQueries.map((q) => { @@ -228,7 +238,7 @@ export const SearchMode = () => {
diff --git a/clients/search-component/src/TrieveModal/Search/UploadImage.tsx b/clients/search-component/src/TrieveModal/Search/UploadImage.tsx index 1f37e985eb..1c05c57a43 100644 --- a/clients/search-component/src/TrieveModal/Search/UploadImage.tsx +++ b/clients/search-component/src/TrieveModal/Search/UploadImage.tsx @@ -5,7 +5,8 @@ import { getPresignedUrl, uploadFile } from "../../utils/trieve"; export const UploadImage = () => { const fileInputRef = useRef(null); const [file, setFile] = React.useState(null); - const { trieveSDK, setImageUrl, setUploadingImage } = useModalState(); + const { trieveSDK, setImageUrl, setUploadingImage, mode, query, setQuery } = + useModalState(); const handleClick = () => { if (!fileInputRef.current) return; @@ -28,21 +29,27 @@ export const UploadImage = () => { }); useEffect(() => { - if (file) { + const internalFile = file; + setFile(null); + if (internalFile) { + setQuery(""); setUploadingImage(true); (async () => { - const data = await toBase64(file); + const data = await toBase64(internalFile); const base64File = data .split(",")[1] .replace(/\+/g, "-") .replace(/\//g, "_") .replace(/=+$/, ""); - const fileId = await uploadFile(trieveSDK, file.name, base64File); + const fileId = await uploadFile( + trieveSDK, + internalFile.name, + base64File + ); const imageUrl = await getPresignedUrl(trieveSDK, fileId); setImageUrl(imageUrl); setUploadingImage(false); - setFile(null); })(); } }, [file, trieveSDK]); @@ -51,7 +58,13 @@ export const UploadImage = () => {
diff --git a/clients/search-component/src/TrieveModal/index.css b/clients/search-component/src/TrieveModal/index.css index c72cb57c5b..087013c595 100644 --- a/clients/search-component/src/TrieveModal/index.css +++ b/clients/search-component/src/TrieveModal/index.css @@ -769,7 +769,7 @@ body { &.docs, &.pdf { - @apply m-2 mr-0; + @apply m-2; } &.inline-input-wrapper { @@ -875,7 +875,7 @@ body { .item { @apply select-none cursor-pointer py-2 text-left flex items-start gap-2 w-full h-full text-sm outline-none rounded-lg px-5 overflow-ellipsis; - background-color: var(--tv-zinc-50); + background-color: white; .ecommerce-secondary-row { @apply flex justify-between items-center; @@ -898,8 +898,7 @@ body { } .chunk-path { - color: var(--tv-zinc-600); - @apply text-xs line-clamp-1 overflow-ellipsis; + @apply text-xs line-clamp-1 overflow-ellipsis text-zinc-600 dark:text-zinc-300; } .chunk-title { @@ -1234,7 +1233,7 @@ body { } .item { - color: var(--tv-zinc-50); + color: white; background-color: var(--tv-zinc-900); border-color: var(--tv-zinc-700); @@ -1279,7 +1278,6 @@ body { @apply max-w-[90rem] pt-10 px-4; } } - } body { diff --git a/clients/search-component/src/TrieveModal/index.tsx b/clients/search-component/src/TrieveModal/index.tsx index e5722c3f8c..09811090f2 100644 --- a/clients/search-component/src/TrieveModal/index.tsx +++ b/clients/search-component/src/TrieveModal/index.tsx @@ -93,7 +93,7 @@ const Modal = () => { clearConversation(); chatWithGroup( customEvent.detail.group, - customEvent.detail.betterGroupName, + customEvent.detail.betterGroupName ); if (customEvent.detail.message) { askQuestion(customEvent.detail.message, customEvent.detail.group); @@ -139,14 +139,14 @@ const Modal = () => { window.addEventListener( "trieve-start-chat-with-group", - chatWithGroupListener, + chatWithGroupListener ); window.addEventListener("trieve-open-with-text", openWithTextListener); return () => { window.removeEventListener( "trieve-start-chat-with-group", - chatWithGroupListener, + chatWithGroupListener ); window.removeEventListener("trieve-open-with-text", openWithTextListener); @@ -156,18 +156,18 @@ const Modal = () => { useEffect(() => { document.documentElement.style.setProperty( "--tv-prop-brand-color", - props.brandColor ?? "#CB53EB", + props.brandColor ?? "#CB53EB" ); if (props.theme === "dark") { document.documentElement.style.setProperty( "--tv-prop-scrollbar-thumb-color", - "var(--tv-zinc-700)", + "var(--tv-zinc-700)" ); } else { document.documentElement.style.setProperty( "--tv-prop-scrollbar-thumb-color", - "var(--tv-zinc-300)", + "var(--tv-zinc-300)" ); } @@ -175,7 +175,7 @@ const Modal = () => { "--tv-prop-brand-font-family", props.brandFontFamily ?? `Maven Pro, ui-sans-serif, system-ui, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"` ); }, [props.brandColor, props.brandFontFamily]); @@ -230,11 +230,17 @@ const Modal = () => { className={ mode === "chat" && !fullscreenPdfState ? "chat-container" : "" } - style={props.type == "pdf" ? { - display: - mode === "chat" && !fullscreenPdfState ? "block" : "none", - maxHeight: fullscreenPdfState ? "none" : "60vh", - }: {}} + style={ + props.type == "pdf" + ? {} + : { + display: + mode === "chat" && !fullscreenPdfState + ? "block" + : "none", + maxHeight: fullscreenPdfState ? "none" : "60vh", + } + } >
diff --git a/clients/search-component/src/utils/hooks/modal-context.tsx b/clients/search-component/src/utils/hooks/modal-context.tsx index 7612fd27da..60df502d74 100644 --- a/clients/search-component/src/utils/hooks/modal-context.tsx +++ b/clients/search-component/src/utils/hooks/modal-context.tsx @@ -253,7 +253,7 @@ const ModalProvider = ({ }); const search = async (abortController: AbortController) => { - if (!query) { + if (!query && !imageUrl) { setResults([]); return; } @@ -321,10 +321,7 @@ const ModalProvider = ({ setRequestID(results.requestID); } } catch (e) { - if ( - e != "AbortError" && - e != "AbortError: signal is aborted without reason" - ) { + if ((e as DOMException)?.name != "AbortError") { console.error(e); } } finally { @@ -427,7 +424,7 @@ const ModalProvider = ({ clearTimeout(timeout); abortController.abort(); }; - }, [query, currentTag]); + }, [query, imageUrl, currentTag]); useEffect(() => { const abortController = new AbortController();