bugfix: fix image search

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<FileRouteTypes>()
 
+/* prettier-ignore-end */
+
 /* ROUTE_MANIFEST_START
 {
   "routes": {

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": {

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 = () => {
               <line x1="18" y1="6" x2="6" y2="18" />
               <line x1="6" y1="6" x2="18" y2="18" />
             </svg>
-            <span>{messages.length < 1 ? "Close" : isDoneReading ? "Clear" : "Stop"} </span>
+            <span>
+              {messages.length < 1 ? "Close" : isDoneReading ? "Clear" : "Stop"}{" "}
+            </span>
           </div>
         )}
         {!props.inline && (currentQuestion || messages.length) ? (
@@ -171,7 +173,11 @@ export const ChatMode = () => {
             </button>
           </div>
         )}
-        <div className={`input-wrapper chat ${props.type == "ecommerce" ? "": props.type} ${props.inline && "inline-input-wrapper"}`}>
+        <div
+          className={`input-wrapper chat ${
+            props.type == "ecommerce" ? "" : props.type
+          } ${props.inline && "inline-input-wrapper"}`}
+        >
           {!props.inline ? (
             <button
               onClick={() => {

clients/search-component/src/TrieveModal/ImagePreview.tsx

@@ -1,39 +1,37 @@
 import React from "react";
 import { useModalState } from "../utils/hooks/modal-context";
 
-
 const ImagePreview = ({
   imageUrl,
   isUploading,
   active,
 }: {
   imageUrl: string;
   isUploading: boolean;
-  active?: boolean
+  active?: boolean;
 }) => {
-
   const { setImageUrl } = useModalState();
-
   return (
     <>
       {isUploading ? (
-        <div
-          className="mt-4 max-h-32 max-w-20">
-          <div className="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"></div>
+        <div className="relative w-fit">
+          <div className={`max-h-96 max-w-32 ${active ? "border p-2" : ""}`}>
+            <div className="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"></div>
+          </div>
         </div>
       ) : imageUrl ? (
         <div className="relative w-fit">
           {active && (
-              <button
-                onClick={() => {
-                  setImageUrl("");
-                }}
-                className="flex items-center justify-center absolute -top-2 -right-2 rounded-full bg-zinc-500 "
-              >
-                <i className="fa-solid fa-close p-1 w-4 h-4 cursor-pointer z-10" ></i>
-              </button>
+            <button
+              onClick={() => {
+                setImageUrl("");
+              }}
+              className={`flex items-center justify-center absolute -right-3 -top-2 rounded-full bg-zinc-500 `}
+            >
+              <i className="fa-solid fa-close p-1 w-4 h-4 cursor-pointer z-10"></i>
+            </button>
           )}
-          <div className={`mt-4 max-h-96 max-w-32 ${active ? "border p-2" : ""}`}>
+          <div className={`max-h-96 max-w-32 ${active ? "border p-2" : ""}`}>
             <img src={imageUrl} alt="" />
           </div>
         </div>

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}
           />
-
-          <button className="clear-query" onClick={() => setQuery("")}>
-            <svg
-              className="clear-query-icon"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
+          {query && (
+            <button className="clear-query" onClick={() => setQuery("")}>
+              <svg
+                className="clear-query-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
+          )}
         </div>
         <div>
           <UploadImage />
         </div>
+        <ImagePreview isUploading={uploadingImage} imageUrl={imageUrl} active />
         {props.suggestedQueries && (!query || (query && !results.length)) && (
           <div className={`suggested-queries-wrapper ${props.type}`}>
             <>
@@ -204,7 +214,7 @@ export const SearchMode = () => {
               <p>Suggested Queries: </p>
               {!suggestedQueries.length && (
                 <p className="suggested-query empty-state-loading">
-                  Loading random query suggestions...
+                  Loading query suggestions...
                 </p>
               )}
               {suggestedQueries.map((q) => {
@@ -228,7 +238,7 @@ export const SearchMode = () => {
       </div>
 
       <ul className={`trieve-elements-${props.type}`}>
-        {resultsLength && props.chat ? (
+        {resultsLength && props.chat && imageUrl.length == 0 ? (
           <li className="start-chat-li" key="chat">
             <button
               id="trieve-search-item-0"
@@ -262,23 +272,25 @@ export const SearchMode = () => {
           resultsDisplay
         )}
 
-        {query && !resultsLength && !loadingResults ? (
+        {(imageUrl || query) && !resultsLength && !loadingResults ? (
           <div className="no-results">
             <p className="no-results-text">No results found</p>
             {props.problemLink && (
               <p>
                 Believe this query should return results?{" "}
                 <a
                   className="no-results-help-link"
-                  href={`${props.problemLink}No results found for query: ${query} on ${props.brandName}`}
+                  href={`${props.problemLink}No results found for query: ${
+                    query.length > 0 ? query : ""
+                  } on ${props.brandName}`}
                   target="_blank"
                 >
                   Contact us
                 </a>
               </p>
             )}
           </div>
-        ) : query && !resultsLength && loadingResults ? (
+        ) : (imageUrl || query) && !resultsLength && loadingResults ? (
           <p className={`no-results-loading ${props.type}`}>Searching...</p>
         ) : null}
       </ul>

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<File | null>(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 = () => {
     <div>
       <button
         onClick={handleClick}
-        className="text-zinc-700 rounded top-[0.825rem] right-14 absolute z-20"
+        className={`rounded top-[0.825rem] ${
+          mode === "chat"
+            ? "right-14"
+            : query.length == 0
+              ? "right-[9.5rem]"
+              : "right-10"
+        } absolute z-20 dark:text-white text-zinc-700`}
       >
         <i className="fa-solid fa-image"> </i>
       </button>

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 {