feature: add styling for images

devflowinc · Jan 9, 2025 · 2afc2fe · 2afc2fe
1 parent 0ba4ab7
commit 2afc2fe
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 20 deletions.
diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMessage.tsx b/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>

diff --git a/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx b/clients/search-component/src/TrieveModal/Chat/ChatMode.tsx
@@ -7,6 +7,7 @@ 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 {
@@ -18,6 +19,8 @@ export const ChatMode = () => {
     mode,
     currentGroup,
     setCurrentGroup,
+    uploadingImage,
+    imageUrl
   } = useModalState();
   const {
     askQuestion,
@@ -122,6 +125,11 @@ export const ChatMode = () => {
               ))}
             </div>
           </div>
+          <ImagePreview
+            isUploading={uploadingImage}
+            imageUrl={imageUrl}
+            active
+          />
         </div>
       </div>
       <div
@@ -173,21 +181,19 @@ export const ChatMode = () => {
               }`}
             />
           </form>
-          {props.inline ? (
-            <button
-              onClick={() => {
-                if (currentQuestion) {
-                  askQuestion(currentQuestion);
-                }
-              }}
-              className="inline-submit-icon"
-            >
-              <i className="fa-solid fa-paper-plane"></i>
-            </button>
-          ) : null}
+          <button
+            onClick={() => {
+              if (currentQuestion) {
+                askQuestion(currentQuestion);
+              }
+            }}
+            className="inline-submit-icon"
+          >
+            <i className="fa-solid fa-paper-plane"></i>
+          </button>
+          <UploadImage />
         </div>
         <div className={`trieve-footer chat ${props.type}`}>
-          <UploadImage />
           {!props.inline && (currentQuestion || messages.length) ? (
             <div className="chat-controls-row">
               <button

diff --git a/clients/search-component/src/TrieveModal/ImagePreview.tsx b/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;
diff --git a/clients/search-component/src/TrieveModal/Search/UploadImage.tsx b/clients/search-component/src/TrieveModal/Search/UploadImage.tsx
@@ -5,7 +5,7 @@ import { getPresignedUrl, uploadFile } from "../../utils/trieve";
 export const UploadImage = () => {
   const fileInputRef = useRef(null);
   const [file, setFile] = React.useState<File | null>(null);
-  const { trieveSDK, setImageUrl } = useModalState();
+  const { trieveSDK, setImageUrl, setUploadingImage } = useModalState();
 
   const handleClick = () => {
     if (!fileInputRef.current) return;
@@ -29,6 +29,7 @@ export const UploadImage = () => {
 
   useEffect(() => {
     if (file) {
+      setUploadingImage(true);
       (async () => {
         const data = await toBase64(file);
         const base64File = data
@@ -40,6 +41,7 @@ export const UploadImage = () => {
         const fileId = await uploadFile(trieveSDK, file.name, base64File);
         const imageUrl = await getPresignedUrl(trieveSDK, fileId);
         setImageUrl(imageUrl);
+        setUploadingImage(false);
         setFile(null);
       })();
     }
@@ -49,9 +51,9 @@ export const UploadImage = () => {
     <div>
       <button
         onClick={handleClick}
-        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        className="text-zinc-700 rounded top-[0.825rem] right-14 absolute z-20"
       >
-        Upload Image
+        <i className="fa-solid fa-image"> </i>
       </button>
       <input
         ref={fileInputRef}

diff --git a/clients/search-component/src/utils/hooks/chat-context.tsx b/clients/search-component/src/utils/hooks/chat-context.tsx
@@ -59,7 +59,7 @@ const ChatContext = createContext<{
 });
 
 function ChatProvider({ children }: { children: React.ReactNode }) {
-  const { query, trieveSDK, setMode, setCurrentGroup, imageUrl } =
+  const { query, trieveSDK, setMode, setCurrentGroup, imageUrl, setImageUrl } =
     useModalState();
   const [currentQuestion, setCurrentQuestion] = useState(query);
   const [currentTopic, setCurrentTopic] = useState("");
@@ -213,6 +213,10 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
           },
           chatMessageAbortController.current.signal
         );
+
+      if (imageUrl) {
+        setImageUrl("");
+      }
       handleReader(reader, queryId);
     }
   };
@@ -266,6 +270,7 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
         text: question || currentQuestion,
         additional: null,
         queryId: null,
+        imageUrl: imageUrl ? imageUrl : null
       },
     ]);
 

diff --git a/clients/search-component/src/utils/hooks/modal-context.tsx b/clients/search-component/src/utils/hooks/modal-context.tsx
@@ -159,8 +159,10 @@ const ModalContext = createContext<{
   trieveSDK: TrieveSDK;
   query: string;
   imageUrl: string;
+  uploadingImage: boolean;
   setQuery: React.Dispatch<React.SetStateAction<string>>;
   setImageUrl: React.Dispatch<React.SetStateAction<string>>;
+  setUploadingImage: React.Dispatch<React.SetStateAction<boolean>>;
   results: ChunkWithHighlights[] | GroupChunk[][];
   setResults: React.Dispatch<
     React.SetStateAction<ChunkWithHighlights[] | GroupChunk[][]>
@@ -187,6 +189,7 @@ const ModalContext = createContext<{
   trieveSDK: (() => {}) as unknown as TrieveSDK,
   query: "",
   imageUrl: "",
+  uploadingImage: false,
   results: [],
   loadingResults: false,
   open: false,
@@ -197,6 +200,7 @@ const ModalContext = createContext<{
   setOpen: () => {},
   setQuery: () => {},
   setImageUrl: () => {},
+  setUploadingImage: () => {},
   setResults: () => {},
   requestID: "",
   setRequestID: () => {},
@@ -223,6 +227,7 @@ const ModalProvider = ({
   });
   const [query, setQuery] = useState("");
   const [imageUrl, setImageUrl] = useState("");
+  const [uploadingImage, setUploadingImage] = useState<boolean>(false);
   const [results, setResults] = useState<
     ChunkWithHighlights[] | GroupChunk[][]
   >([]);
@@ -451,6 +456,8 @@ const ModalProvider = ({
         setQuery,
         imageUrl,
         setImageUrl,
+        uploadingImage,
+        setUploadingImage,
         open,
         setOpen,
         inputRef,