Merge branch 'form_io' of personal:logspace-ai/langflow into form_io

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

@@ -177,7 +177,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            style="tooltip-fixed-width custom-scroll"
+            styleClasses="tooltip-fixed-width custom-scroll"
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}

src/frontend/src/components/ShadTooltipComponent/index.tsx

@@ -6,7 +6,7 @@ export default function ShadTooltip({
   side,
   asChild = true,
   children,
-  style,
+  styleClasses,
   delayDuration = 500,
 }: ShadToolTipType) {
   return (
@@ -14,7 +14,7 @@ export default function ShadTooltip({
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
 
       <TooltipContent
-        className={style}
+        className={styleClasses}
         side={side}
         avoidCollisions={false}
         sticky="always"

src/frontend/src/components/chatComponent/index.tsx

@@ -72,7 +72,7 @@ export default function Chat({ flow }: ChatType) {
     }
 
     prevNodesRef.current = currentNodes;
-  }, [tabsState, flow.id]);
+  }, [tabsState, flow.id, nodes]);
 
   return (
     <>

src/frontend/src/components/promptComponent/index.tsx

@@ -44,7 +44,7 @@ export default function PromptAreaComponent({
         })
         .catch((error) => {});
     }
-  }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass]);
+  }, [reactFlowInstance, field_name, myValue, nodeClass, setNodeClass, value]);
 
   return (
     <div className={disabled ? "pointer-events-none w-full " : " w-full"}>

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

@@ -27,9 +27,7 @@ export default function CodeAreaModal({
   nodeClass: APIClassType;
   setNodeClass: (Class: APIClassType) => void;
 }) {
-  const [open, setOpen] = useState(true);
   const [code, setCode] = useState(value);
-  const [loading, setLoading] = useState(false);
   const { dark } = useContext(darkContext);
   const { closePopUp, setCloseEdit } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
@@ -46,10 +44,8 @@ export default function CodeAreaModal({
   }
 
   function handleClick() {
-    setLoading(true);
     postValidateCode(code)
       .then((apiReturn) => {
-        setLoading(false);
         if (apiReturn.data) {
           let importsErrors = apiReturn.data.imports.errors;
           let funcErrors = apiReturn.data.function.errors;
@@ -58,7 +54,6 @@ export default function CodeAreaModal({
               title: "Code is ready to run",
             });
             setValue(code);
-            setOpen((old) => !old);
             setModalOpen(false);
           } else {
             if (funcErrors.length !== 0) {
@@ -81,7 +76,6 @@ export default function CodeAreaModal({
         }
       })
       .catch((_) => {
-        setLoading(false);
         setErrorData({
           title: "There is something wrong with this code, please review it",
         });
@@ -89,7 +83,7 @@ export default function CodeAreaModal({
   }
 
   return (
-    <BaseModal open={true} setOpen={setOpen}>
+    <BaseModal open={true} setOpen={setModalOpen}>
       <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
         <DialogTitle className="flex items-center">
           <span className="pr-2">Edit Code</span>

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -24,7 +24,7 @@ export default function ChatMessage({
 }) {
   const convert = new Convert({ newline: true });
   const [hidden, setHidden] = useState(true);
-  const [template, setTemplate] = useState(chat.template);
+  const template = chat.template;
   const [promptOpen, setPromptOpen] = useState(false);
   return (
     <div
@@ -127,7 +127,7 @@ export default function ChatMessage({
                         {chat.message.toString()}
                       </ReactMarkdown>
                     ),
-                    [chat.message.toString()]
+                    [chat.message, chat.message.toString()]
                   )}
                 </div>
                 {chat.files && (

src/frontend/src/modals/formModal/index.tsx

@@ -292,7 +292,7 @@ export default function FormModal({
         ws.current.close();
       }
     };
-  }, []);
+  }, [connectWS]);
 
   useEffect(() => {
     if (
@@ -303,7 +303,7 @@ export default function FormModal({
       connectWS();
       setLockChat(false);
     }
-  }, [lockChat]);
+  }, [lockChat, connectWS]);
 
   async function sendAll(data: sendAllProps) {
     try {

src/frontend/src/modals/genericModal/index.tsx

@@ -57,7 +57,6 @@ export default function GenericModal({
   const [myModalType] = useState(type);
   const [inputValue, setInputValue] = useState(value);
   const [isEdit, setIsEdit] = useState(true);
-  const [wordsHighlightInvalid, setWordsHighlightInvalid] = useState([]);
   const [wordsHighlight, setWordsHighlight] = useState([]);
   const { dark } = useContext(darkContext);
   const { setErrorData, setSuccessData, setNoticeData } =
@@ -102,15 +101,14 @@ export default function GenericModal({
       (word) => !invalid_chars.includes(word)
     );
 
-    setWordsHighlightInvalid(invalid_chars);
     setWordsHighlight(filteredWordsHighlight);
   }
 
   useEffect(() => {
-    if (type == TypeModal.PROMPT && inputValue && inputValue != "") {
+    if (type === TypeModal.PROMPT && inputValue && inputValue != "") {
       checkVariables(inputValue);
     }
-  }, []);
+  }, [inputValue, type]);
 
   const coloredContent = (inputValue || "")
     .replace(/</g, "&lt;")

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

@@ -288,7 +288,7 @@ export default function Page({ flow }: { flow: FlowType }) {
       }
     },
     // Specify dependencies for useCallback
-    [getNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot]
+    [getNodeId, reactFlowInstance, setNodes, takeSnapshot]
   );
 
   useEffect(() => {
@@ -322,7 +322,7 @@ export default function Page({ flow }: { flow: FlowType }) {
         setEdges((els) => updateEdge(oldEdge, newConnection, els));
       }
     },
-    []
+    [reactFlowInstance, setEdges]
   );
 
   const onEdgeUpdateEnd = useCallback((_, edge) => {

src/frontend/src/types/components/index.ts

@@ -147,7 +147,7 @@ export type ShadToolTipType = {
   asChild?: boolean;
   children?: ReactElement;
   delayDuration?: number;
-  style?: string;
+  styleClasses?: string;
 };
 
 export type TextHighlightType = {