Merge branch 'dev' into 335-implement-docarray-vectorstore

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

@@ -58,7 +58,6 @@ export default function GenericNode({
         if (response.status === 200) {
           let jsonResponse = await response.json();
           let jsonResponseParsed = await JSON.parse(jsonResponse);
-          console.log(jsonResponseParsed);
           setValidationStatus(jsonResponseParsed);
         }
       } catch (error) {

src/frontend/src/contexts/tabsContext.tsx

@@ -58,7 +58,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	}
 	useEffect(() => {
 		//save tabs locally
-		// console.log(id)
 		save();
 	}, [flows, id, tabIndex, newNodeId]);
 
@@ -173,8 +172,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 	 */
 
 	function paste(selectionInstance, position){
-		console.log(position);
-		console.log(selectionInstance)
 		let minimumX = Infinity;
 		let minimumY = Infinity;
 		let idsMap = {};
@@ -214,7 +211,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 			nodes = nodes
 			  .map((e) => ({ ...e, selected: false }))
 			  .concat({ ...newNode, selected: false })
-		  console.log(nodes);
 		});
 		reactFlowInstance.setNodes(nodes);
 	
@@ -250,7 +246,6 @@ export function TabsProvider({ children }: { children: ReactNode }) {
 			  },
 			  edges.map((e) => ({ ...e, selected: false }))
 			);
-			console.log(edges);
 		});
 		reactFlowInstance.setEdges(edges);
 	  };

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

@@ -183,7 +183,6 @@ export default function ChatModal({
       newWs.onopen = () => {
         console.log("WebSocket connection established!");
       };
-      console.log(flow.id);
       newWs.onmessage = (event) => {
         const data = JSON.parse(event.data);
         console.log("Received data:", data);

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -129,9 +129,7 @@ export default function CodeAreaModal({
 											onClick={() => {
 												checkCode(code)
 													.then((apiReturn) => {
-														console.log(apiReturn);
 														if (apiReturn.data) {
-															console.log(apiReturn.data);
 															let importsErrors = apiReturn.data.imports.errors;
 															let funcErrors = apiReturn.data.function.errors;
 															if (

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect } from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { DocumentDuplicateIcon } from "@heroicons/react/solid";
 import { classNames } from "../../../utils";
 import Tooltip from "../../../components/TooltipComponent";
@@ -24,7 +24,7 @@ export default function ButtonBox({
 }) {
   let bigCircle: string;
   let smallCircle: string;
-  let titleFontSize: string;
+  let minTitleFontSize: number;
   let descriptionFontSize: string;
   let padding: string;
   let marginTop: string;
@@ -32,23 +32,24 @@ export default function ButtonBox({
   let width: string;
   let textHeight: number;
   let textWidth: number;
+  const [truncate, setTruncate] = useState<boolean>(false);
   switch (size) {
     case "small":
       bigCircle = "h-12 w-12";
       smallCircle = "h-8 w-8";
-      titleFontSize = "text-sm";
+      minTitleFontSize =9;
       descriptionFontSize = "text-xs";
       padding = "p-2 py-3";
       marginTop = "mt-2";
       height = "h-36";
       textHeight = 70;
-      textWidth = 80;
+      textWidth = 40;
       width = "w-32";
       break;
     case "medium":
       bigCircle = "h-16 w-16";
       smallCircle = "h-12 w-12";
-      titleFontSize = "text-base";
+      minTitleFontSize = 11;
       descriptionFontSize = "text-sm";
       padding = "p-4 py-5";
       marginTop = "mt-3";
@@ -60,7 +61,7 @@ export default function ButtonBox({
     case "big":
       bigCircle = "h-20 w-20";
       smallCircle = "h-16 w-16";
-      titleFontSize = "text-lg";
+      minTitleFontSize = 12;
       descriptionFontSize = "text-sm";
       padding = "p-8 py-10";
       marginTop = "mt-6";
@@ -70,7 +71,7 @@ export default function ButtonBox({
     default:
       bigCircle = "h-20 w-20";
       smallCircle = "h-16 w-16";
-      titleFontSize = "text-lg";
+      minTitleFontSize = 12;
       descriptionFontSize = "text-sm";
       padding = "p-8 py-10";
       marginTop = "mt-6";
@@ -79,43 +80,41 @@ export default function ButtonBox({
       break;
   }
 
-  const titleRef = React.useRef<HTMLHeadingElement>(null);
+  const [fontSize, setFontSize] = useState<number>(16); // Initial font size value
+
+  const titleRef = useRef<HTMLHeadingElement>(null);
+  const parentDivRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const resizeFont = () => {
+	const textElement = titleRef.current;
-      const titleElement = titleRef.current;
+	const parentDivElement = parentDivRef.current;
-      if (titleElement) {
+  
-        const containerWidth = titleElement.offsetWidth;
+	if (!textElement || !parentDivElement) return;
-        const containerHeight = titleElement.offsetHeight;
+  
-
+	const parentDivHeight = parentDivElement.offsetHeight;
-        const titleComputedStyle = window.getComputedStyle(titleElement);
+	const parentDivWidth = parentDivElement.offsetWidth;
-        const titleWidth = titleElement.getBoundingClientRect().width;
+	let textElementHeight = textElement.scrollHeight;
-
+	let textElementWidth = textElement.scrollWidth;
-        const currentFontSize = parseFloat(titleComputedStyle.fontSize);
+  
-
+	if (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth && fontSize > minTitleFontSize) {
-        const desiredWidth = textWidth - 10; // Subtracting the desired padding
+	  let newFontSize = fontSize;
-
+  
-        // Calculate the desired font size based on the adjusted width
+	  while (textElementHeight > parentDivHeight || textElementWidth > parentDivWidth) {
-        let desiredFontSize = currentFontSize * (desiredWidth / titleWidth);
+		newFontSize -= 1;
-
+		textElement.style.fontSize = `${newFontSize}px`;
-        // Adjust the desired font size to fit within the container height, if needed
+		textElementHeight = textElement.scrollHeight;
-        const maxHeight = containerHeight - 10; // Subtracting the desired top padding
+		textElementWidth = textElement.scrollWidth;
-        const maxHeightFontSize = maxHeight * 0.8; // Adjust the scaling factor as needed
+	  }
-        desiredFontSize = Math.min(desiredFontSize, maxHeightFontSize);
+    if(newFontSize <= minTitleFontSize){
-
+      setTruncate(true);
-        // Apply the desired font size and padding to the title element
+      setFontSize(minTitleFontSize);
-        titleElement.style.fontSize = `${desiredFontSize}px`;
+    }
-        titleElement.style.paddingLeft = "5px";
+    else{
-        titleElement.style.paddingRight = "5px";
+      setFontSize(newFontSize);
-      }
+    }
-    };
+	}
-
+  }, [title, size, fontSize]);
-    resizeFont();
+  
-    window.addEventListener("resize", resizeFont);
-    return () => {
-      window.removeEventListener("resize", resizeFont);
-    };
-  }, []);
 
   return (
     <button disabled={deactivate} onClick={onClick}>
@@ -129,7 +128,7 @@ export default function ButtonBox({
         )}
       >
         <div
-          className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`}
+          className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full mb-1`}
         >
           <div
             className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
@@ -137,16 +136,15 @@ export default function ButtonBox({
             <div className={textColor}>{icon}</div>
           </div>
         </div>
-        <h3
+		<div ref={parentDivRef} className="w-full h-1/2 mt-auto">
+		<div
           ref={titleRef}
-          className={classNames(
+          className={classNames(truncate?"truncate":"",
-            " font-semibold text-white dark:text-white/80",
+            " font-semibold text-white h-full dark:text-white/80",
-
+          )}        >
-            marginTop
-          )}
-        >
           {title}
-        </h3>
+        </div>
+		</div>
       </div>
     </button>
   );

src/frontend/src/modals/importModal/index.tsx

@@ -180,7 +180,7 @@ export default function ImportModal() {
 													<div id="index">
 														{" "}
 														<ButtonBox
-															size="small"
+															size="big"
 															bgColor="bg-emerald-500 dark:bg-emerald-500/75"
 															description={
 																example.description ?? "Prebuilt Examples"

src/frontend/src/modals/promptModal/index.tsx

@@ -109,7 +109,6 @@ export default function PromptAreaModal({
 											onClick={() => {
 												checkPrompt(myValue)
 													.then((apiReturn) => {
-														console.log(apiReturn);
 														if (apiReturn.data) {
 															let inputVariables =
 																apiReturn.data.input_variables;

src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts

@@ -1,5 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { Edge, Node, useReactFlow } from 'reactflow';
+import { TabsContext } from '../../../contexts/tabsContext';
+import { cloneDeep } from 'lodash';
 
 type UseUndoRedoOptions = {
   maxHistorySize: number;
@@ -30,47 +32,80 @@ export const useUndoRedo: UseUndoRedo = ({
   enableShortcuts = defaultOptions.enableShortcuts,
 } = defaultOptions) => {
   // the past and future arrays store the states that we can jump to
-  const [past, setPast] = useState<HistoryItem[]>([]);
+  const { tabIndex, flows } = useContext(TabsContext);
-  const [future, setFuture] = useState<HistoryItem[]>([]);
+
+  const [past, setPast] = useState<HistoryItem[][]>(flows.map(()=>[]));
+  const [future, setFuture] = useState<HistoryItem[][]>(flows.map(()=>[]));
+
+  useEffect(() => {
+    // whenever the flows variable changes, we need to add one array to the past and future states
+    setPast((old) => flows.map((f, i)=>old[i] ? old[i] : []));
+    setFuture((old) => flows.map((f, i)=>old[i] ? old[i] : []));
+  }, [flows]);
+
 
   const { setNodes, setEdges, getNodes, getEdges } = useReactFlow();
 
   const takeSnapshot = useCallback(() => {
     // push the current graph to the past state
-    setPast((past) => [
+    setPast((old) => {
-      ...past.slice(past.length - maxHistorySize + 1, past.length),
+      let newPast = cloneDeep(old);
-      { nodes: getNodes(), edges: getEdges() },
+      newPast[tabIndex] = old[tabIndex].slice(old[tabIndex].length - maxHistorySize + 1, old[tabIndex].length);
-    ]);
+      newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+      return newPast;
+    });
 
     // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches
-    setFuture([]);
+    setFuture((old) => {
-  }, [getNodes, getEdges, maxHistorySize]);
+      let newFuture = cloneDeep(old);
+      newFuture[tabIndex] = [];
+      return newFuture
+    });
+  }, [getNodes, getEdges, past, future, tabIndex, setPast, setFuture, maxHistorySize]);
 
   const undo = useCallback(() => {
     // get the last state that we want to go back to
-    const pastState = past[past.length - 1];
+    const pastState = past[tabIndex][past[tabIndex].length - 1];
 
     if (pastState) {
       // first we remove the state from the history
-      setPast((past) => past.slice(0, past.length - 1));
+      setPast((old) => {
+        let newPast = cloneDeep(old);
+        newPast[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
+        return newPast
+      });
       // we store the current graph for the redo operation
-      setFuture((future) => [...future, { nodes: getNodes(), edges: getEdges() }]);
+      setFuture((old) => {
+        let newFuture = cloneDeep(old);
+        newFuture[tabIndex] = old[tabIndex]
+        newFuture[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+        return newFuture
+      });
       // now we can set the graph to the past state
       setNodes(pastState.nodes);
       setEdges(pastState.edges);
     }
-  }, [setNodes, setEdges, getNodes, getEdges, past]);
+  }, [setNodes, setEdges, getNodes, getEdges, future, past, setFuture, setPast, tabIndex]);
 
   const redo = useCallback(() => {
-    const futureState = future[future.length - 1];
+    const futureState = future[tabIndex][future[tabIndex].length - 1];
 
     if (futureState) {
-      setFuture((future) => future.slice(0, future.length - 1));
+      setFuture((old) => {
-      setPast((past) => [...past, { nodes: getNodes(), edges: getEdges() }]);
+        let newFuture = cloneDeep(old);
+        newFuture[tabIndex] = old[tabIndex].slice(0, old[tabIndex].length - 1);
+        return newFuture
+      });
+      setPast((old) => {
+        let newPast = cloneDeep(old);
+        newPast[tabIndex] = old[tabIndex];
+        newPast[tabIndex].push({ nodes: getNodes(), edges: getEdges() });
+        return newPast
+      });
       setNodes(futureState.nodes);
       setEdges(futureState.edges);
     }
-  }, [setNodes, setEdges, getNodes, getEdges, future]);
+  }, [future, past, setFuture, setPast, setNodes, setEdges, getNodes, getEdges, future, tabIndex]);
 
   useEffect(() => {
     // this effect is used to attach the global event handlers

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

@@ -56,7 +56,6 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
     // this effect is used to attach the global event handlers
 
     const onKeyDown = (event: KeyboardEvent) => {
-      console.log("keydownou", lastCopiedSelection, position);
       if (
         (event.ctrlKey || event.metaKey) &&
         event.key === "c" &&