feature: chat with image in the component

clients/search-component/example/src/routes/index.lazy.tsx

@@ -32,10 +32,10 @@ export default function Home() {
     import.meta.env.VITE_DEFAULT_SEARCH_MODE ?? "search";
 
   const defaultAiQuestions = (
-    import.meta.env.VITE_DEFAULT_AI_QUESTIONS ?? "What is Trieve?,How to perform autocomplete search?,How do I install the TS SDK?"
+    import.meta.env.VITE_DEFAULT_AI_QUESTIONS ??
+    "What is Trieve?,How to perform autocomplete search?,How do I install the TS SDK?"
   ).split(",");
-  const inline = 
-    import.meta.env.VITE_INLINE == "true";
+  const inline = import.meta.env.VITE_INLINE == "true";
 
   const [theme, setTheme] = useState<"light" | "dark">("light");
   const [component, setComponent] = useState(0);
@@ -78,7 +78,7 @@ export default function Home() {
               baseUrl={baseUrl}
               datasetId={datasetId}
               problemLink={problemLink}
-              type="pdf"
+              type="docs"
               defaultSearchQueries={defaultSearchQueries}
               theme={theme}
               tags={[
@@ -155,6 +155,7 @@ export default function Home() {
               searchOptions={{
                 use_autocomplete: false,
                 search_type: "fulltext",
+                score_threshold: 0.1,
               }}
               floatingButtonPosition={floatingButtonPosition}
               floatingSearchIconPosition={floatingSearchIconPosition}

clients/search-component/package.json

@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx

@@ -8,11 +8,13 @@ import { LoadingIcon, SparklesIcon } from "../icons";
 import { ChatPdfItem } from "../PdfView/ChatPdfItem";
 import { Carousel } from "./Carousel";
 import { FollowupQueries } from "./FollowupQueries";
+import ImagePreview from "../ImagePreview";
 
 type Message = {
   queryId: string | null;
   type: string;
   text: string;
+  imageUrl?: string;
   additional: Chunk[] | null;
 };
 
@@ -28,9 +30,14 @@ export const ChatMessage = ({
   return (
     <div key={idx}>
       {message.type == "user" ? (
-        <div className="" key={idx}>
+        <div key={idx}>
           <div className={message.type}>
-            <span className="user-text"> {message.text}</span>
+            <div className="flex flex-col space-y-1 items-end">
+              {message.imageUrl && 
+                <ImagePreview isUploading={false} imageUrl={message.imageUrl} />
+              }
+              <span className="user-text"> {message.text}</span>
+            </div>
           </div>
         </div>
       ) : (
@@ -307,7 +314,6 @@ export const Message = ({
               </div>
             </div>}
           </div>
-          {props.followupQuestions && <FollowupQueries />}
         </div>
       ) : null}
     </div>

clients/search-component/src/TrieveModal/Chat/ChatMode.tsx

@@ -6,6 +6,8 @@ import { ChatMessage } from "./ChatMessage";
 import { Tags } from "../Tags";
 import { SparklesIcon } from "../icons";
 import { SuggestedQuestions } from "./SuggestedQuestions";
+import { UploadImage } from "../Search/UploadImage";
+import ImagePreview from "../ImagePreview";
 
 export const ChatMode = () => {
   const {
@@ -17,6 +19,8 @@ export const ChatMode = () => {
     mode,
     currentGroup,
     setCurrentGroup,
+    uploadingImage,
+    imageUrl
   } = useModalState();
   const {
     askQuestion,
@@ -39,47 +43,51 @@ export const ChatMode = () => {
 
   return (
     <Suspense>
-      {props.inline && messages.length ? <div className="inline-chat-header">
-        <div>
-          <p>
-            {props.inlineHeader}
-          </p>
+      {props.inline && messages.length ? (
+        <div className="inline-chat-header">
+          <div>
+            <p>{props.inlineHeader}</p>
+          </div>
+          <button
+            onClick={() =>
+              isDoneReading ? clearConversation() : stopGeneratingMessage()
+            }
+            className="clear-button"
+          >
+            {isDoneReading ? "Clear" : "Stop"}
+          </button>
         </div>
-         <button
-          onClick={() =>
-              isDoneReading
-                ? clearConversation()
-                : stopGeneratingMessage()
-          }
-          className="clear-button"
-        >
-          {isDoneReading ? "Clear" : "Stop"}
-        </button> 
-      </div>: null}
-      <div className={`chat-outer-wrapper ${props.inline ? "": "chat-outer-popup"}`} ref={modalRef}>
-        {!props.inline &&
-        <div
-          className={`close-modal-button chat ${props.type}`}
-          onClick={() => setOpen(false)}
-        >
-          <svg
-            className="close-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"
+      ) : null}
+      <div
+        className={`chat-outer-wrapper ${
+          props.inline ? "" : "chat-outer-popup"
+        }`}
+        ref={modalRef}
+      >
+        {!props.inline && (
+          <div
+            className={`close-modal-button chat ${props.type}`}
+            onClick={() => setOpen(false)}
           >
-            <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>
-          <span>Close</span>
-        </div>}
+            <svg
+              className="close-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>
+            <span>Close</span>
+          </div>
+        )}
         <div
           className={`system-information-wrapper${
             currentGroup ? " with-group" : ""
@@ -88,32 +96,40 @@ export const ChatMode = () => {
           <div className="ai-message">
             <div className="chat-modal-wrapper">
               <div className="ai-message initial-message">
-                {props.inline ?  
+                {props.inline ? (
                   <>
-                    {!messages.length && !currentGroup ? 
-                    <>
-                    <div className="ai-avatar">
-                      {props.brandLogoImgSrcUrl ? (
-                        <img
-                          src={props.brandLogoImgSrcUrl}
-                          alt={props.brandName || "Brand logo"}
-                        />
-                      ) : (
-                        <SparklesIcon />
-                      )}
-                    </div>
-                    </>
-                    : null}
-                    {!messages.length && !currentGroup ? <SuggestedQuestions /> : null}
+                    {!messages.length && !currentGroup ? (
+                      <>
+                        <div className="ai-avatar">
+                          {props.brandLogoImgSrcUrl ? (
+                            <img
+                              src={props.brandLogoImgSrcUrl}
+                              alt={props.brandName || "Brand logo"}
+                            />
+                          ) : (
+                            <SparklesIcon />
+                          )}
+                        </div>
+                      </>
+                    ) : null}
+                    {!messages.length && !currentGroup ? (
+                      <SuggestedQuestions />
+                    ) : null}
                   </>
-                : <AIInitialMessage />
-                }
+                ) : (
+                  <AIInitialMessage />
+                )}
               </div>
               {messages.map((message, i) => (
                 <ChatMessage key={`${i}-message`} idx={i} message={message} />
               ))}
             </div>
           </div>
+          <ImagePreview
+            isUploading={uploadingImage}
+            imageUrl={imageUrl}
+            active
+          />
         </div>
       </div>
       <div
@@ -134,18 +150,19 @@ export const ChatMode = () => {
           </div>
         )}
         <div className="input-wrapper chat">
-          {!props.inline ?
-          <button
-            onClick={() => {
-              if (currentGroup) {
-                setCurrentGroup(null);
-              }
-              setMode("search");
-            }}
-            className="back-icon"
-          >
-            <i className="fa-solid fa-chevron-left"></i>
-          </button> : null}
+          {!props.inline ? (
+            <button
+              onClick={() => {
+                if (currentGroup) {
+                  setCurrentGroup(null);
+                }
+                setMode("search");
+              }}
+              className="back-icon"
+            >
+              <i className="fa-solid fa-chevron-left"></i>
+            </button>
+          ) : null}
           <form
             onSubmit={(e) => {
               e.preventDefault();
@@ -157,27 +174,27 @@ export const ChatMode = () => {
             <input
               ref={chatInput}
               value={currentQuestion}
-              className={`${props.inline ? "inline-input": ""}`}
+              className={`${props.inline ? "inline-input" : ""}`}
               onChange={(e) => setCurrentQuestion(e.target.value)}
               placeholder={`Ask me anything about${
                 props.brandName ? ` ${props.brandName}` : ""
               }`}
             />
           </form>
-          {props.inline ?
           <button
             onClick={() => {
               if (currentQuestion) {
-                  askQuestion(currentQuestion)
+                askQuestion(currentQuestion);
               }
             }}
             className="inline-submit-icon"
           >
             <i className="fa-solid fa-paper-plane"></i>
-          </button> : null}
+          </button>
+          <UploadImage />
         </div>
         <div className={`trieve-footer chat ${props.type}`}>
-          {(!props.inline) && (currentQuestion || messages.length) ? (
+          {!props.inline && (currentQuestion || messages.length) ? (
             <div className="chat-controls-row">
               <button
                 onClick={() =>

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { useModalState } from "../utils/hooks/modal-context";
+
+
+const ImagePreview = ({
+  imageUrl,
+  isUploading,
+  active,
+}: {
+  imageUrl: string;
+  isUploading: 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>
+      ) : 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>
+          )}
+          <div className={`mt-4 max-h-96 max-w-32 ${active ? "border p-2" : ""}`}>
+            <img src={imageUrl} alt="" />
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default ImagePreview;

clients/search-component/src/TrieveModal/Search/SearchMode.tsx

@@ -14,6 +14,7 @@ import { ProductItem } from "./ProductItem";
 import { ProductGroupItem } from "./ProductGroupItem";
 import { PdfItem } from "./PdfItem";
 import { SparklesIcon } from "../icons";
+import { UploadImage } from "./UploadImage";
 
 export const SearchMode = () => {
   const {
@@ -36,7 +37,7 @@ export const SearchMode = () => {
 
   const getItemComponent = (
     result: ChunkWithHighlights | GroupChunk[],
-    index: number,
+    index: number
   ) => {
     const isChunk = isChunkWithHighlights(result);
 
@@ -110,7 +111,7 @@ export const SearchMode = () => {
   const resultsDisplay = useMemo(() => {
     if (results.length) {
       const comps = results.map((result, index) =>
-        getItemComponent(result, index),
+        getItemComponent(result, index)
       );
       return comps;
     } else {
@@ -186,6 +187,9 @@ export const SearchMode = () => {
             </svg>
           </button>
         </div>
+        <div>
+          <UploadImage />
+        </div>
         {props.suggestedQueries && (!query || (query && !results.length)) && (
           <div className={`suggested-queries-wrapper ${props.type}`}>
             <>