Upload File Endpoint / Better VectorStore Implementation (#525)

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -239,7 +239,8 @@ export default function ParameterComponent({
             fileTypes={data.node.template[name].fileTypes}
             suffixes={data.node.template[name].suffixes}
             onFileChange={(t: string) => {
-              data.node.template[name].content = t;
+              data.node.template[name].file_path = t;
+              save();
             }}
           ></InputFileComponent>
         ) : left === true && type === "int" ? (

src/frontend/src/components/LoadingSpinner/index.tsx

@@ -0,0 +1,6 @@
+import { useContext, useEffect, useRef, useState } from "react";
+import { RadialProgressType } from "../../types/components";
+
+export default function LoadingSpinner({}) {
+  return <></>;
+}

src/frontend/src/components/inputFileComponent/index.tsx

@@ -2,7 +2,9 @@ import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
+import { TabsContext } from "../../contexts/tabsContext";
 import { INPUT_STYLE } from "../../constants";
+import { uploadFile } from "../../controllers/API";
 
 export default function InputFileComponent({
   value,
@@ -14,7 +16,9 @@ export default function InputFileComponent({
   editNode = false,
 }: FileComponentType) {
   const [myValue, setMyValue] = useState(value);
+  const [loading, setLoading] = useState(false);
   const { setErrorData } = useContext(alertContext);
+  const { tabId } = useContext(TabsContext);
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -23,12 +27,6 @@ export default function InputFileComponent({
     }
   }, [disabled, onChange]);
 
-  function attachFile(fileReadEvent: ProgressEvent<FileReader>) {
-    fileReadEvent.preventDefault();
-    const file = fileReadEvent.target.result;
-    onFileChange(file as string);
-  }
-
   function checkFileType(fileName: string): boolean {
     for (let index = 0; index < suffixes.length; index++) {
       if (fileName.endsWith(suffixes[index])) {
@@ -43,27 +41,54 @@ export default function InputFileComponent({
   }, [value]);
 
   const handleButtonClick = () => {
+    // Create a file input element
     const input = document.createElement("input");
     input.type = "file";
     input.accept = suffixes.join(",");
-    input.style.display = "none";
-    input.multiple = false;
+    input.style.display = "none"; // Hidden from view
+    input.multiple = false; // Allow only one file selection
+
     input.onchange = (e: Event) => {
+      setLoading(true);
+
+      // Get the selected file
       const file = (e.target as HTMLInputElement).files?.[0];
-      const fileData = new FileReader();
-      fileData.onload = attachFile;
+
+      // Check if the file type is correct
       if (file && checkFileType(file.name)) {
-        fileData.readAsDataURL(file);
-        setMyValue(file.name);
-        onChange(file.name);
+        // Upload the file
+        uploadFile(file, tabId)
+          .then((res) => res.data)
+          .then((data) => {
+            console.log("File uploaded successfully");
+            // Get the file name from the response
+            const { file_path } = data;
+            console.log("File name:", file_path);
+
+            // Update the state and callback with the name of the file
+            // sets the value to the user
+            setMyValue(file.name);
+            onChange(file.name);
+            // sets the value that goes to the backend
+            onFileChange(file_path);
+            setLoading(false);
+          })
+          .catch(() => {
+            console.error("Error occurred while uploading file");
+            setLoading(false);
+          });
       } else {
+        // Show an error if the file type is not allowed
         setErrorData({
           title:
-            "Please select a valid file. Only files this files are allowed:",
+            "Please select a valid file. Only these file types are allowed:",
           list: fileTypes,
         });
+        setLoading(false);
       }
     };
+
+    // Trigger the file selection dialog
     input.click();
   };
 
@@ -73,7 +98,7 @@ export default function InputFileComponent({
         disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"
       }
     >
-      <div className="w-full flex items-center gap-3">
+      <div className="w-full flex items-center gap-2">
         <span
           onClick={handleButtonClick}
           className={
@@ -88,9 +113,12 @@ export default function InputFileComponent({
           {myValue !== "" ? myValue : "No file"}
         </span>
         <button onClick={handleButtonClick}>
-          {!editNode && (
+          {!editNode && !loading && (
             <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-ring" />
           )}
+          {!editNode && loading && (
+            <span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span>
+          )}
         </button>
       </div>
     </div>

src/frontend/src/constants.tsx

@@ -66,7 +66,7 @@ export const getPythonApiCode = (flow: FlowType): string => {
 
 BASE_API_URL = "${window.location.protocol}//${
     window.location.host
-  }/api/v1/predict"
+  }/api/v1/process"
 FLOW_ID = "${flowId}"
 # You can tweak the flow by adding a tweaks dictionary
 # e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
@@ -83,7 +83,7 @@ def run_flow(message: str, flow_id: str, tweaks: dict = None) -> dict:
     """
     api_url = f"{BASE_API_URL}/{flow_id}"
 
-    payload = {"message": message}
+    payload = {"inputs": {"input": message}}
 
     if tweaks:
         payload["tweaks"] = tweaks
@@ -106,9 +106,9 @@ export const getCurlCode = (flow: FlowType): string => {
   return `curl -X POST \\
   ${window.location.protocol}//${
     window.location.host
-  }/api/v1/predict/${flowId} \\
+  }/api/v1/process/${flowId} \\
   -H 'Content-Type: application/json' \\
-  -d '{"message": "Your message", "tweaks": ${JSON.stringify(
+  -d '{"inputs": {"input": message}, "tweaks": ${JSON.stringify(
     tweaks,
     null,
     2

src/frontend/src/controllers/API/index.ts

@@ -3,6 +3,7 @@ import {
   PromptTypeAPI,
   errorsTypeAPI,
   InitTypeAPI,
+  UploadFileTypeAPI,
 } from "./../../types/api/index";
 import { APIObjectType, sendAllProps } from "../../types/api/index";
 import axios, { AxiosResponse } from "axios";
@@ -48,13 +49,6 @@ export async function postValidateCode(
   return await axios.post("/api/v1/validate/code", { code });
 }
 
-export async function postValidateNode(
-  nodeId: string,
-  data: any
-): Promise<AxiosResponse<string>> {
-  return await axios.post(`/api/v1/validate/node/${nodeId}`, { data });
-}
-
 /**
  * Checks the prompt for the code block by sending it to an API endpoint.
  *
@@ -319,3 +313,21 @@ export async function postBuildInit(
 ): Promise<AxiosResponse<InitTypeAPI>> {
   return await axios.post(`/api/v1/build/init`, flow);
 }
+
+// fetch(`/upload/${id}`, {
+//   method: "POST",
+//   body: formData,
+// });
+/**
+ * Uploads a file to the server.
+ * @param {File} file - The file to upload.
+ * @param {string} id - The ID of the flow to upload the file to.
+ */
+export async function uploadFile(
+  file: File,
+  id: string
+): Promise<AxiosResponse<UploadFileTypeAPI>> {
+  const formData = new FormData();
+  formData.append("file", file);
+  return await axios.post(`/api/v1/upload/${id}`, formData);
+}

src/frontend/src/icons/MongoDB/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as MongoDBSVG } from "./mongodb-icon.svg";
+
+export const MongoDBIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <MongoDBSVG ref={ref} {...props} />;
+});

src/frontend/src/icons/MongoDB/mongodb-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><path d="M15.9.087l.854 1.604c.192.296.4.558.645.802.715.715 1.394 1.464 2.004 2.266 1.447 1.9 2.423 4.01 3.12 6.292.418 1.394.645 2.824.662 4.27.07 4.323-1.412 8.035-4.4 11.12-.488.488-1.01.94-1.57 1.342-.296 0-.436-.227-.558-.436-.227-.383-.366-.82-.436-1.255-.105-.523-.174-1.046-.14-1.586v-.244C16.057 24.21 15.796.21 15.9.087z" fill="#599636"/><path d="M15.9.034c-.035-.07-.07-.017-.105.017.017.35-.105.662-.296.96-.21.296-.488.523-.767.767-1.55 1.342-2.77 2.963-3.747 4.776-1.3 2.44-1.97 5.055-2.16 7.808-.087.993.314 4.497.627 5.508.854 2.684 2.388 4.933 4.375 6.885.488.47 1.01.906 1.55 1.325.157 0 .174-.14.21-.244a4.78 4.78 0 0 0 .157-.68l.35-2.614L15.9.034z" fill="#6cac48"/><path d="M16.754 28.845c.035-.4.227-.732.436-1.063-.21-.087-.366-.26-.488-.453-.105-.174-.192-.383-.26-.575-.244-.732-.296-1.5-.366-2.248v-.453c-.087.07-.105.662-.105.75a17.37 17.37 0 0 1-.314 2.353c-.052.314-.087.627-.28.906 0 .035 0 .07.017.122.314.924.4 1.865.453 2.824v.35c0 .418-.017.33.33.47.14.052.296.07.436.174.105 0 .122-.087.122-.157l-.052-.575v-1.604c-.017-.28.035-.558.07-.82z" fill="#c2bfbf"/></svg>

src/frontend/src/icons/Pinecone/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as PineconeSVG } from "./pinecone_logo.svg";
+
+export const PineconeIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <PineconeSVG ref={ref} {...props} />;
+});

src/frontend/src/icons/Pinecone/pinecone_logo.svg

@@ -0,0 +1,21 @@
+<svg width="32" height="35" viewBox="0 0 32 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8555 34.2962C14.9325 34.2962 15.8055 33.4451 15.8055 32.3954C15.8055 31.3456 14.9325 30.4946 13.8555 30.4946C12.7786 30.4946 11.9055 31.3456 11.9055 32.3954C11.9055 33.4451 12.7786 34.2962 13.8555 34.2962Z" fill="black"/>
+<path d="M18.4138 7.19675L19.2512 2.66005" stroke="black" stroke-width="2.11786" stroke-linecap="square"/>
+<path d="M22.2656 5.5855L19.3466 2.11099L15.3748 4.37292" stroke="black" stroke-width="2.11786" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M14.9202 26.5528L15.7337 22.0169" stroke="black" stroke-width="2.11786" stroke-linecap="square"/>
+<path d="M18.7729 24.9304L15.83 21.4671L11.8701 23.741" stroke="black" stroke-width="2.11786" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M16.6077 17.1996L17.4212 12.6633" stroke="black" stroke-width="2.11786" stroke-linecap="square"/>
+<path d="M20.4587 15.58L17.5277 12.128L13.5679 14.3904" stroke="black" stroke-width="2.11786" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M8.32871 26.1554L4.75171 28.5815" stroke="black" stroke-width="2.01017" stroke-linecap="square"/>
+<path d="M8.54383 30.0865L4.3208 28.8738L4.63185 24.5944" stroke="black" stroke-width="2.01017" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M21.3213 28.4299L23.8096 31.9282" stroke="black" stroke-width="2.01017" stroke-linecap="square"/>
+<path d="M19.718 32.045L24.1085 32.3365L25.3527 28.2438" stroke="black" stroke-width="2.01017" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M25.3999 21.3291L29.7784 22.0996" stroke="black" stroke-width="2.05804" stroke-linecap="square"/>
+<path d="M26.9072 25.072L30.3048 22.1919L28.1634 18.3557" stroke="black" stroke-width="2.05804" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M24.1196 12.8615L28.0197 10.763" stroke="black" stroke-width="2.05804" stroke-linecap="square"/>
+<path d="M24.3357 8.83965L28.4869 10.5188L27.7093 14.8216" stroke="black" stroke-width="2.05804" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M6.91639 18.1572L2.52588 17.4101" stroke="black" stroke-width="2.05804" stroke-linecap="square"/>
+<path d="M4.17731 21.1645L2 17.328L5.36167 14.436" stroke="black" stroke-width="2.05804" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M11.0799 10.6129L8.14893 7.34769" stroke="black" stroke-width="2.05804" stroke-linecap="square"/>
+<path d="M12.2897 6.77496L7.80349 6.96156L7.01392 11.2649" stroke="black" stroke-width="2.05804" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

src/frontend/src/icons/supabase/index.tsx

@@ -0,0 +1,9 @@
+import React, { forwardRef } from "react";
+import { ReactComponent as SupabaseSvg } from "./supabase-icon.svg";
+
+export const SupabaseIcon = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return <SupabaseSvg ref={ref} {...props} />;
+});

src/frontend/src/icons/supabase/supabase-icon.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg20"
+   sodipodi:docname="supabase-icon.svg"
+   style="fill:none"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata24">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1687"
+     inkscape:window-height="849"
+     id="namedview22"
+     showgrid="false"
+     inkscape:zoom="2.0884956"
+     inkscape:cx="54.5"
+     inkscape:cy="56.5"
+     inkscape:window-x="70"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg20" />
+  <path
+     d="m 37.41219,62.936701 c -1.634985,2.05896 -4.950068,0.93085 -4.989463,-1.69817 L 31.846665,22.786035 h 25.855406 c 4.683108,0 7.294967,5.409033 4.382927,9.07673 z"
+     id="path2"
+     style="fill:url(#paint0_linear);stroke-width:0.57177335"
+     inkscape:connector-curvature="0" />
+  <path
+     d="m 37.41219,62.936701 c -1.634985,2.05896 -4.950068,0.93085 -4.989463,-1.69817 L 31.846665,22.786035 h 25.855406 c 4.683108,0 7.294967,5.409033 4.382927,9.07673 z"
+     id="path4"
+     style="fill:url(#paint1_linear);fill-opacity:0.2;stroke-width:0.57177335"
+     inkscape:connector-curvature="0" />
+  <path
+     d="m 26.89694,1.0634102 c 1.634986,-2.05918508 4.950125,-0.93090008 4.989521,1.698149 L 32.138899,41.214003 H 6.607076 c -4.6832501,0 -7.29518376,-5.409032 -4.3830007,-9.07673 z"
+     id="path6"
+     inkscape:connector-curvature="0"
+     style="fill:#3ecf8e;stroke-width:0.57177335" />
+  <defs
+     id="defs18">
+    <linearGradient
+       id="paint0_linear"
+       x1="53.973801"
+       y1="54.973999"
+       x2="94.163498"
+       y2="71.829498"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.57177306,0,0,0.57177334,0.98590077,-0.12074988)">
+      <stop
+         stop-color="#249361"
+         id="stop8" />
+      <stop
+         offset="1"
+         stop-color="#3ECF8E"
+         id="stop10" />
+    </linearGradient>
+    <linearGradient
+       id="paint1_linear"
+       x1="36.1558"
+       y1="30.577999"
+       x2="54.484402"
+       y2="65.080597"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.57177306,0,0,0.57177334,0.98590077,-0.12074988)">
+      <stop
+         id="stop13" />
+      <stop
+         offset="1"
+         stop-opacity="0"
+         id="stop15" />
+    </linearGradient>
+  </defs>
+</svg>

src/frontend/src/modals/chatModal/chatInput/index.tsx

@@ -14,10 +14,7 @@ export default function ChatInput({
     if (!lockChat && inputRef.current) {
       inputRef.current.focus();
     }
-  },[
-    lockChat,inputRef
-  ])
-
+  }, [lockChat, inputRef]);
 
   useEffect(() => {
     if (inputRef.current) {

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -398,7 +398,8 @@ export default function Page({ flow }: { flow: FlowType }) {
                   zoomOnDoubleClick={!disableCopyPaste}
                   selectNodesOnDrag={false}
                   className="theme-attribution"
-                  minZoom={0.05}
+                  minZoom={0.01}
+                  maxZoom={8}
                 >
                   <Background className="dark:bg-gray-900" />
                   <Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600"></Controls>

src/frontend/src/types/api/index.ts

@@ -46,3 +46,8 @@ export type BuildStatusTypeAPI = {
 export type InitTypeAPI = {
   flowId: string;
 };
+
+export type UploadFileTypeAPI = {
+  file_path: string;
+  flowId: string;
+};

src/frontend/src/utils.ts

@@ -39,9 +39,12 @@ import { OpenAiIcon } from "./icons/OpenAi";
 import { QDrantIcon } from "./icons/QDrant";
 import { SearxIcon } from "./icons/Searx";
 import { SlackIcon } from "./icons/Slack";
+import { PineconeIcon } from "./icons/Pinecone";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./constants";
+import { SupabaseIcon } from "./icons/supabase";
+import { MongoDBIcon } from "./icons/MongoDB";
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
@@ -170,6 +173,9 @@ export const nodeIcons: {
   ChatOpenAI: OpenAiIcon,
   OpenAI: OpenAiIcon,
   OpenAIEmbeddings: OpenAiIcon,
+  Pinecone: PineconeIcon,
+  SupabaseVectorStore: SupabaseIcon,
+  MongoDBAtlasVectorSearch: MongoDBIcon,
   // UnstructuredPowerPointLoader: PowerPointIcon, // word and powerpoint have differente styles
   Qdrant: QDrantIcon,
   // ReadTheDocsLoader: ReadTheDocsIcon, // does not work
@@ -403,9 +409,7 @@ export function toFirstUpperCase(str: string) {
 }
 
 export function snakeToSpaces(str: string) {
-  let result = str.split("_").join(" ");
-
-  return result;
+  return str.split("_").join(" ");
 }
 
 export function toNormalCase(str: string) {
@@ -449,10 +453,7 @@ export function roundNumber(x: number, decimals: number) {
 export function getConnectedNodes(edge: Edge, nodes: Array<Node>): Array<Node> {
   const sourceId = edge.source;
   const targetId = edge.target;
-  const connectedNodes = nodes.filter(
-    (node) => node.id === targetId || node.id === sourceId
-  );
-  return connectedNodes;
+  return nodes.filter((node) => node.id === targetId || node.id === sourceId);
 }
 
 export function isValidConnection(
@@ -699,7 +700,7 @@ export function groupByFamily(data, baseClasses) {
     return foundIndex === index;
   });
 
-  let groupedObj = groupedBy.reduce((result, item) => {
+  return groupedBy.reduce((result, item) => {
     const existingGroup = result.find((group) => group.family === item.family);
 
     if (existingGroup) {
@@ -710,8 +711,6 @@ export function groupByFamily(data, baseClasses) {
 
     return result;
   }, []);
-
-  return groupedObj;
 }
 
 export function buildTweaks(flow) {
@@ -752,9 +751,7 @@ export function validateNode(
             )
           ? [
               `${type} is missing ${
-                template.display_name
-                  ? template.display_name
-                  : toNormalCase(template[t].name)
+                template.display_name || toNormalCase(template[t].name)
               }.`,
             ]
           : []