merge fix

src/backend/langflow/api/v1/chat.py

@@ -126,7 +126,7 @@ async def stream_build(flow_id: str):
                     params = vertex._built_object_repr()
                     valid = True
                     logger.debug(
-                        f"Building node {params[:50]}{'...' if len(params) > 50 else ''}"
+                        f"Building node {str(params)[:50]}{'...' if len(str(params)) > 50 else ''}"
                     )
                     if vertex.artifacts:
                         # The artifacts will be prompt variables

src/backend/langflow/graph/vertex/types.py

@@ -213,23 +213,27 @@ class PromptVertex(Vertex):
 
     def _built_object_repr(self):
         if (
-            self.artifacts
-            and self._built_object is not None
-            and hasattr(self._built_object, "format")
+            not self.artifacts
+            or self._built_object is None
+            or not hasattr(self._built_object, "format")
         ):
-            # We'll build the prompt with the artifacts
-            # to show the user what the prompt looks like
-            # with the variables filled in
-            artifacts = self.artifacts.copy()
-            # Remove the handle_keys from the artifacts
-            # so the prompt format doesn't break
-            artifacts.pop("handle_keys", None)
-            try:
-                return self._built_object.format(**artifacts)
-            except KeyError:
-                return super()._built_object_repr()
-        else:
             return super()._built_object_repr()
+        # We'll build the prompt with the artifacts
+        # to show the user what the prompt looks like
+        # with the variables filled in
+        artifacts = self.artifacts.copy()
+        # Remove the handle_keys from the artifacts
+        # so the prompt format doesn't break
+        artifacts.pop("handle_keys", None)
+        try:
+            template = self._built_object.format(**artifacts)
+            return (
+                template
+                if isinstance(template, str)
+                else f"{self.vertex_type}({template})"
+            )
+        except KeyError:
+            return str(self._built_object)
 
 
 class OutputParserVertex(Vertex):

src/backend/langflow/interface/initialize/loading.py

@@ -1,3 +1,4 @@
+import contextlib
 import json
 from typing import Any, Callable, Dict, List, Sequence, Type
 
@@ -67,7 +68,11 @@ def instantiate_based_on_type(class_object, base_type, node_type, params):
     elif base_type == "prompts":
         return instantiate_prompt(node_type, class_object, params)
     elif base_type == "tools":
-        return instantiate_tool(node_type, class_object, params)
+        tool = instantiate_tool(node_type, class_object, params)
+        if hasattr(tool, "name") and isinstance(tool, BaseTool):
+            # tool name shouldn't contain spaces
+            tool.name = tool.name.replace(" ", "_")
+        return tool
     elif base_type == "toolkits":
         return instantiate_toolkit(node_type, class_object, params)
     elif base_type == "embeddings":
@@ -132,6 +137,9 @@ def instantiate_llm(node_type, class_object, params: Dict):
 def instantiate_memory(node_type, class_object, params):
     # process input_key and output_key to remove them if
     # they are empty strings
+    if node_type == "ConversationEntityMemory":
+        params.pop("memory_key", None)
+
     for key in ["input_key", "output_key"]:
         if key in params and (params[key] == "" or not params[key]):
             params.pop(key)
@@ -196,7 +204,7 @@ def instantiate_prompt(node_type, class_object, params: Dict):
         if "tools" not in params:
             params["tools"] = []
         return ZeroShotAgent.create_prompt(**params)
-    if "MessagePromptTemplate" in node_type:
+    elif "MessagePromptTemplate" in node_type:
         # Then we only need the template
         from_template_params = {
             "template": params.pop("prompt", params.pop("template", ""))
@@ -204,12 +212,12 @@ def instantiate_prompt(node_type, class_object, params: Dict):
 
         if not from_template_params.get("template"):
             raise ValueError("Prompt template is required")
-        return class_object.from_template(**from_template_params)
+        prompt = class_object.from_template(**from_template_params)
 
-    if node_type == "ChatPromptTemplate":
-        return class_object.from_messages(**params)
-
-    prompt = class_object(**params)
+    elif node_type == "ChatPromptTemplate":
+        prompt = class_object.from_messages(**params)
+    else:
+        prompt = class_object(**params)
 
     format_kwargs: Dict[str, Any] = {}
     for input_variable in prompt.input_variables:
@@ -221,18 +229,23 @@ def instantiate_prompt(node_type, class_object, params: Dict):
                 variable, "get_format_instructions"
             ):
                 format_kwargs[input_variable] = variable.get_format_instructions()
-            # check if is a list of Document
             elif isinstance(variable, List) and all(
                 isinstance(item, Document) for item in variable
             ):
                 # Format document to contain page_content and metadata
                 # as one string separated by a newline
-                format_kwargs[input_variable] = "\n".join(
-                    [
-                        f"Document:{item.page_content}\nMetadata:{item.metadata}"
-                        for item in variable
-                    ]
-                )
+                if len(variable) > 1:
+                    content = "\n".join(
+                        [item.page_content for item in variable if item.page_content]
+                    )
+                else:
+                    content = variable[0].page_content
+                    # content could be a json list of strings
+                    with contextlib.suppress(json.JSONDecodeError):
+                        content = json.loads(content)
+                        if isinstance(content, list):
+                            content = ",".join([str(item) for item in content])
+                format_kwargs[input_variable] = content
                 # handle_keys will be a list but it does not exist yet
                 # so we need to create it
 

src/backend/langflow/processing/base.py

@@ -19,8 +19,11 @@ async def get_result_and_steps(langchain_object, inputs: Union[dict, str], **kwa
             # Deactivating until we have a frontend solution
             # to display intermediate steps
             langchain_object.return_intermediate_steps = True
+        try:
+            fix_memory_inputs(langchain_object)
+        except Exception as exc:
+            logger.error(exc)
 
-        fix_memory_inputs(langchain_object)
         try:
             async_callbacks = [AsyncStreamingLLMCallbackHandler(**kwargs)]
             output = await langchain_object.acall(inputs, callbacks=async_callbacks)

src/backend/langflow/processing/process.py

@@ -22,7 +22,10 @@ def fix_memory_inputs(langchain_object):
     if not hasattr(langchain_object, "memory") or langchain_object.memory is None:
         return
     try:
-        if langchain_object.memory.memory_key in langchain_object.input_variables:
+        if (
+            hasattr(langchain_object.memory, "memory_key")
+            and langchain_object.memory.memory_key in langchain_object.input_variables
+        ):
             return
     except AttributeError:
         input_variables = (

src/backend/langflow/template/frontend_node/chains.py

@@ -81,7 +81,7 @@ class ChainFrontendNode(FrontendNode):
             field.advanced = False
         if field.name == "verbose":
             field.required = False
-            field.show = True
+            field.show = False
             field.advanced = True
         if field.name == "llm":
             field.required = True

src/backend/langflow/template/frontend_node/memories.py

@@ -90,6 +90,9 @@ class MemoryFrontendNode(FrontendNode):
             field.show = True
         if field.name == "entity_store":
             field.show = False
+        if name == "ConversationEntityMemory" and field.name == "memory_key":
+            field.show = False
+            field.required = False
 
 
 class PostgresChatMessageHistoryFrontendNode(MemoryFrontendNode):

src/backend/langflow/template/frontend_node/tools.py

@@ -109,7 +109,7 @@ class PythonFunctionToolNode(FrontendNode):
         ],
     )
     description: str = "Python function to be executed."
-    base_classes: list[str] = ["Tool"]
+    base_classes: list[str] = ["BaseTool", "Tool"]
 
     def to_dict(self):
         return super().to_dict()

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

@@ -16,6 +16,7 @@ import { PopUpContext } from "../../../../contexts/popUpContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { typesContext } from "../../../../contexts/typesContext";
 import { ParameterComponentType } from "../../../../types/components";
+import { cleanEdges } from "../../../../util/reactflowUtils";
 import {
   classNames,
   getRandomKeyByssmm,
@@ -25,6 +26,7 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils";
+import { MAX_LENGTH_TO_SCROLL_TOOLTIP } from "../../../../constants";
 
 export default function ParameterComponent({
   left,
@@ -96,8 +98,9 @@ export default function ParameterComponent({
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
 
-    refNumberComponents.current = groupedObj[0]?.component?.length;
-
+    refNumberComponents.current = groupedObj[0]?.type?.length;
+    console.log(refNumberComponents);
+    
     refHtml.current = groupedObj.map((item, i) => {
       const Icon: any = nodeIconsLucide[item.family];
 
@@ -180,7 +183,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            style={refNumberComponents.current > 10 ? "tooltip-fixed-width custom-scroll overflow-y-scroll nowheel" : "tooltip-fixed-width"}
+            styleClasses={refNumberComponents.current > MAX_LENGTH_TO_SCROLL_TOOLTIP ? "tooltip-fixed-width custom-scroll overflow-y-scroll nowheel" : "tooltip-fixed-width"}
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}
@@ -306,6 +309,13 @@ export default function ParameterComponent({
               field_name={name}
               setNodeClass={(nodeClass) => {
                 data.node = nodeClass;
+                cleanEdges({
+                  flow: {
+                    edges: reactFlowInstance.getEdges(),
+                    nodes: reactFlowInstance.getNodes(),
+                  },
+                  updateEdge: (edge) => reactFlowInstance.setEdges(edge),
+                });
               }}
               nodeClass={data.node}
               disabled={disabled}

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/codeAreaComponent/index.tsx

@@ -48,8 +48,8 @@ export default function CodeAreaComponent({
           className={
             editNode
               ? "input-edit-node input-dialog"
-              : (disabled ? " input-disable " : "") +
-                " input-dialog input-primary"
+              : (disabled ? " input-disable input-ring " : "") +
+                " input-primary text-muted-foreground "
           }
         >
           {myValue !== "" ? myValue : "Type something..."}

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"}>
@@ -69,8 +69,8 @@ export default function PromptAreaComponent({
           className={
             editNode
               ? "input-edit-node input-dialog"
-              : (disabled ? " input-disable " : "") +
-                " input-dialog input-primary"
+              : (disabled ? " input-disable text-ring " : "") +
+                " input-primary text-muted-foreground "
           }
         >
           {myValue !== "" ? myValue : "Type your prompt here"}

src/frontend/src/components/ui/tooltip.tsx

@@ -14,15 +14,17 @@ const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
-      className
-    )}
-    {...props}
-  />
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 

src/frontend/src/constants.tsx

@@ -5,6 +5,12 @@ import { FlowType } from "./types/flow";
 import { TabsState } from "./types/tabs";
 import { buildInputs, buildTweaks } from "./utils";
 
+/**
+ * Number maximum of components to scroll on tooltips
+ * @constant
+ */
+export const MAX_LENGTH_TO_SCROLL_TOOLTIP = 200;
+
 /**
  * The base text for subtitle of Export Dialog (Toolbar)
  * @constant

src/frontend/src/index.css

@@ -6,8 +6,8 @@
 /* TODO: Confirm that all colors here are found in tailwind config */
 
 @layer base {
-
-:root {
+  
+  :root {
   --background: 0 0% 100%; /* hsl(0 0% 100%) */
   --foreground: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
   --muted: 210 40% 98%; /* hsl(210 40% 98%) */
@@ -28,21 +28,24 @@
   --destructive-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
   --radius: 0.5rem;
   --ring: 215 20.2% 65.1%; /* hsl(215 20% 65%) */
-
+  
   --round-btn-shadow: #00000063;
-
+  
   --error-background: #fef2f2;
   --error-foreground: #991b1b;
-
+  
   --success-background: #f0fdf4;
   --success-foreground: #14532d;
 
   --info-background: #f0f4fd;
   --info-foreground: #141653;
-
+  
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
 
+  --chat-bot-icon: #afe6ef;
+  --chat-user-icon: #aface9;
+  
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923de;
   --build-trigger: 	#dc735b;
@@ -213,7 +216,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply input-primary pr-7 mx-2
   }
   .input-disable{
-    @apply bg-input text-muted-foreground
+    @apply bg-border placeholder:text-ring border-transparent
   }
   .input-dialog{
     @apply text-ring cursor-pointer bg-transparent
@@ -915,13 +918,16 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .form-modal-lock-true {
-    @apply bg-input text-black dark:bg-gray-700 dark:text-gray-300
+    @apply bg-input text-black
+  }
+  .form-modal-no-input {
+    @apply bg-input text-center text-black dark:bg-gray-700 dark:text-gray-300
   }
   .form-modal-lock-false {
-    @apply bg-white text-black dark:bg-gray-900 dark:text-gray-300
+    @apply bg-white text-black
   }
   .form-modal-lockchat {
-    @apply form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm
+    @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
   }
   .form-modal-send-icon-position {
     @apply absolute bottom-2 right-4
@@ -935,6 +941,9 @@ The cursor: default; property value restores the browser's default cursor style
   .form-modal-send-icon {
     @apply mr-2 h-5 w-5 rotate-[44deg]
   }
+  .form-modal-play-icon {
+    @apply h-5 w-5 mx-1
+  }
   .form-modal-chat-position {
     @apply flex-max-width px-2 py-6 pl-4 pr-9
   }
@@ -948,10 +957,10 @@ The cursor: default; property value restores the browser's default cursor style
     @apply relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md p-5 text-2xl
   }
   .form-modal-chat-bot-icon {
-    @apply form-modal-chat-img-box bg-[#afe6ef]
+    @apply form-modal-chat-img-box bg-chat-bot-icon
   }
   .form-modal-chat-user-icon {
-    @apply form-modal-chat-img-box bg-[#aface9]
+    @apply form-modal-chat-img-box bg-chat-user-icon
   }
   .form-modal-chat-icon-img {
     @apply absolute scale-[60%]
@@ -966,7 +975,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply absolute -left-6 -top-3 cursor-pointer
   }
   .form-modal-chat-icon {
-    @apply h-4 w-4 animate-bounce dark:text-white
+    @apply h-4 w-4 animate-bounce
   }
   .form-modal-chat-thought-border {
     @apply rounded-md border border-ring/60
@@ -1035,13 +1044,13 @@ The cursor: default; property value restores the browser's default cursor style
     @apply flex-max-width h-full flex-col items-center justify-center text-center align-middle
   }
   .langflow-chat-span {
-    @apply text-lg text-gray-600 dark:text-gray-300
+    @apply text-lg text-foreground
   }
   .langflow-chat-desc {
-    @apply w-2/4 rounded-md border border-gray-200 bg-muted px-6 py-8 dark:border-gray-700 dark:bg-gray-900
+    @apply w-2/4 rounded-md border border-border bg-muted px-6 py-8
   }
   .langflow-chat-desc-span {
-    @apply text-base text-gray-500
+    @apply text-base text-muted-foreground
   }
   .langflow-chat-input-div {
     @apply flex-max-width flex-col items-center justify-between px-8 pb-6
@@ -1054,4 +1063,4 @@ The cursor: default; property value restores the browser's default cursor style
     @apply max-w-[30vw] max-h-[20vh] overflow-auto
   }
 
-}
+}

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

@@ -1,156 +0,0 @@
-import Convert from "ansi-to-html";
-import { MessageCircle, User2 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import ReactMarkdown from "react-markdown";
-import rehypeMathjax from "rehype-mathjax";
-import remarkGfm from "remark-gfm";
-import remarkMath from "remark-math";
-import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
-import AiIconStill from "../../../assets/froze-flow.png";
-import SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper";
-import { ChatMessageType } from "../../../types/chat";
-import { classNames } from "../../../utils";
-import { CodeBlock } from "../../formModal/chatMessage/codeBlock";
-import FileCard from "../../formModal/fileComponent";
-export default function ChatMessage({
-  chat,
-  lockChat,
-  lastMessage,
-}: {
-  chat: ChatMessageType;
-  lockChat: boolean;
-  lastMessage: boolean;
-}) {
-  const convert = new Convert({ newline: true });
-  const [message, setMessage] = useState("");
-  const imgRef = useRef(null);
-  useEffect(() => {
-    setMessage(chat.message);
-  }, [chat.message]);
-  const [hidden, setHidden] = useState(true);
-  return (
-    <div
-      className={classNames(
-        "chat-message-modal",
-        chat.isSend ? "bg-background " : "bg-input"
-      )}
-    >
-      <div className={classNames("chat-message-modal-div")}>
-        {!chat.isSend && (
-          <div className="relative h-8 w-8">
-            <img
-              className={
-                "chat-message-modal-img " +
-                (lockChat ? "opacity-100" : "opacity-0")
-              }
-              src={lastMessage ? AiIcon : AiIconStill}
-            />
-            <img
-              className={
-                "chat-message-modal-img " +
-                (lockChat ? "opacity-0" : "opacity-100")
-              }
-              src={AiIconStill}
-            />
-          </div>
-        )}
-        {chat.isSend && <User2 className="-mb-1 h-6 w-6 text-primary " />}
-      </div>
-      {!chat.isSend ? (
-        <div className="chat-message-modal-display">
-          <div className="chat-message-modal-text">
-            {hidden && chat.thought && chat.thought !== "" && (
-              <div
-                onClick={() => setHidden((prev) => !prev)}
-                className="chat-message-modal-icon-div"
-              >
-                <MessageCircle className="h-5 w-5 animate-bounce " />
-              </div>
-            )}
-            {chat.thought && chat.thought !== "" && !hidden && (
-              <SanitizedHTMLWrapper
-                className=" chat-message-modal-thought"
-                content={convert.toHtml(chat.thought)}
-                suppressWarning={false}
-                onClick={() => setHidden((prev) => !prev)}
-              />
-            )}
-            {chat.thought && chat.thought !== "" && !hidden && <br></br>}
-            <div className="chat-message-modal-markdown">
-              <div className="w-full">
-                <div className="w-full">
-                  <ReactMarkdown
-                    remarkPlugins={[remarkGfm, remarkMath]}
-                    rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose text-muted-foreground "
-                    components={{
-                      code({ node, inline, className, children, ...props }) {
-                        if (children.length) {
-                          if (children[0] === "▍") {
-                            return (
-                              <span className="chat-message-modal-markdown-span">
-                                ▍
-                              </span>
-                            );
-                          }
-
-                          children[0] = (children[0] as string).replace(
-                            "`▍`",
-                            "▍"
-                          );
-                        }
-
-                        const match = /language-(\w+)/.exec(className || "");
-
-                        return !inline ? (
-                          <CodeBlock
-                            key={Math.random()}
-                            language={(match && match[1]) || ""}
-                            value={String(children).replace(/\n$/, "")}
-                            {...props}
-                          />
-                        ) : (
-                          <code className={className} {...props}>
-                            {children}
-                          </code>
-                        );
-                      },
-                    }}
-                  >
-                    {message}
-                  </ReactMarkdown>
-                </div>
-                {chat.files && (
-                  <div className="my-2 w-full">
-                    {chat.files.map((file, index) => {
-                      return (
-                        <div key={index} className="my-2 w-full">
-                          <FileCard
-                            fileName={"Generated File"}
-                            fileType={file.data_type}
-                            content={file.data}
-                          />
-                        </div>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="flex w-full items-center">
-          <div className="chat-message-modal-alert ">
-            {message.split("\n").map((line, index) => (
-              <span key={index} className="text-muted-foreground ">
-                {line}
-                <br />
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,423 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { Eraser, MessagesSquare, X } from "lucide-react";
-import { Fragment, useContext, useEffect, useRef, useState } from "react";
-import { alertContext } from "../../contexts/alertContext";
-import { typesContext } from "../../contexts/typesContext";
-import { sendAllProps } from "../../types/api";
-import { ChatMessageType } from "../../types/chat";
-import { FlowType } from "../../types/flow";
-import { validateNodes } from "../../utils";
-import ChatInput from "./chatInput";
-import ChatMessage from "./chatMessage";
-
-import _ from "lodash";
-import { getHealth } from "../../controllers/API";
-
-export default function ChatModal({
-  flow,
-  open,
-  setOpen,
-}: {
-  open: boolean;
-  setOpen: Function;
-  flow: FlowType;
-}) {
-  const [chatValue, setChatValue] = useState("");
-  const [chatHistory, setChatHistory] = useState<ChatMessageType[]>([]);
-  const { reactFlowInstance } = useContext(typesContext);
-  const { setErrorData } = useContext(alertContext);
-  const ws = useRef<WebSocket | null>(null);
-  const [lockChat, setLockChat] = useState(false);
-  const isOpen = useRef(open);
-  const messagesRef = useRef(null);
-  const id = useRef(flow.id);
-
-  useEffect(() => {
-    if (messagesRef.current) {
-      messagesRef.current.scrollTop = messagesRef.current.scrollHeight;
-    }
-  }, [chatHistory]);
-
-  useEffect(() => {
-    isOpen.current = open;
-  }, [open]);
-  useEffect(() => {
-    id.current = flow.id;
-  }, [flow.id]);
-
-  var isStream = false;
-
-  const addChatHistory = (
-    message: string,
-    isSend: boolean,
-    thought?: string,
-    files?: Array<any>
-  ) => {
-    setChatHistory((old) => {
-      let newChat = _.cloneDeep(old);
-      if (files) {
-        newChat.push({ message, isSend, files, thought });
-      } else if (thought) {
-        newChat.push({ message, isSend, thought });
-      } else {
-        newChat.push({ message, isSend });
-      }
-      return newChat;
-    });
-  };
-
-  //add proper type signature for function
-
-  function updateLastMessage({
-    str,
-    thought,
-    end = false,
-    files,
-  }: {
-    str?: string;
-    thought?: string;
-    // end param default is false
-    end?: boolean;
-    files?: Array<any>;
-  }) {
-    setChatHistory((old) => {
-      let newChat = [...old];
-      if (str) {
-        if (end) {
-          newChat[newChat.length - 1].message = str;
-        } else {
-          newChat[newChat.length - 1].message += str;
-        }
-      }
-      if (thought) {
-        if (end) {
-          newChat[newChat.length - 1].thought = thought;
-        } else {
-          newChat[newChat.length - 1].thought += thought;
-        }
-      }
-      if (files) {
-        newChat[newChat.length - 1].files = files;
-      }
-      return newChat;
-    });
-  }
-
-  function handleOnClose(event: CloseEvent) {
-    if (isOpen.current) {
-      setErrorData({ title: event.reason });
-      setTimeout(() => {
-        connectWS();
-        setLockChat(false);
-      }, 1000);
-    }
-  }
-
-  function getWebSocketUrl(chatId, isDevelopment = false) {
-    const isSecureProtocol = window.location.protocol === "https:";
-    const webSocketProtocol = isSecureProtocol ? "wss" : "ws";
-    const host = isDevelopment ? "localhost:7860" : window.location.host;
-    const chatEndpoint = `/api/v1/chat/${chatId}`;
-
-    return `${
-      isDevelopment ? "ws" : webSocketProtocol
-    }://${host}${chatEndpoint}`;
-  }
-
-  function handleWsMessage(data: any) {
-    if (Array.isArray(data)) {
-      //set chat history
-      setChatHistory((_) => {
-        let newChatHistory: ChatMessageType[] = [];
-        data.forEach(
-          (chatItem: {
-            intermediate_steps?: "string";
-            is_bot: boolean;
-            message: string;
-            type: string;
-            files?: Array<any>;
-          }) => {
-            if (chatItem.message) {
-              newChatHistory.push(
-                chatItem.files
-                  ? {
-                      isSend: !chatItem.is_bot,
-                      message: chatItem.message,
-                      thought: chatItem.intermediate_steps,
-                      files: chatItem.files,
-                    }
-                  : {
-                      isSend: !chatItem.is_bot,
-                      message: chatItem.message,
-                      thought: chatItem.intermediate_steps,
-                    }
-              );
-            }
-          }
-        );
-        return newChatHistory;
-      });
-    }
-    if (data.type === "start") {
-      addChatHistory("", false);
-      isStream = true;
-    }
-    if (data.type === "end") {
-      if (data.message) {
-        updateLastMessage({ str: data.message, end: true });
-      }
-      if (data.intermediate_steps) {
-        updateLastMessage({
-          str: data.message,
-          thought: data.intermediate_steps,
-          end: true,
-        });
-      }
-      if (data.files) {
-        updateLastMessage({
-          end: true,
-          files: data.files,
-        });
-      }
-
-      setLockChat(false);
-      isStream = false;
-    }
-    if (data.type === "stream" && isStream) {
-      updateLastMessage({
-        str: data.message,
-        thought: data.intermediate_steps,
-      });
-    }
-  }
-
-  function connectWS() {
-    try {
-      const urlWs = getWebSocketUrl(
-        id.current,
-        process.env.NODE_ENV === "development"
-      );
-      const newWs = new WebSocket(urlWs);
-      newWs.onopen = () => {
-        console.log("WebSocket connection established!");
-      };
-      newWs.onmessage = (event) => {
-        const data = JSON.parse(event.data);
-        console.log("Received data:", data);
-        handleWsMessage(data);
-        //get chat history
-      };
-      newWs.onclose = (event) => {
-        handleOnClose(event);
-      };
-      newWs.onerror = (ev) => {
-        getHealth()
-          .then((res) => {
-            if (res.status === 200) {
-              connectWS();
-            }
-          })
-          .catch((err) => {
-            setErrorData({
-              // message when the backend failed
-              title: "The backend is not responding. Please try again later.",
-              // possible solution list
-              list: [
-                "Check your internet connection.",
-                "Check if the backend is running.",
-              ],
-            });
-          });
-      };
-      ws.current = newWs;
-    } catch (error) {
-      connectWS();
-      console.log(error);
-    }
-  }
-
-  useEffect(() => {
-    connectWS();
-    return () => {
-      console.log("unmount");
-      console.log(ws);
-      if (ws.current) {
-        ws.current.close();
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (
-      ws.current &&
-      (ws.current.readyState === ws.current.CLOSED ||
-        ws.current.readyState === ws.current.CLOSING)
-    ) {
-      connectWS();
-      setLockChat(false);
-    }
-  }, [lockChat]);
-
-  async function sendAll(data: sendAllProps) {
-    try {
-      if (ws) {
-        ws.current.send(JSON.stringify(data));
-      }
-    } catch (error) {
-      setErrorData({
-        title: "There was an error sending the message",
-        list: [error.message],
-      });
-      setChatValue(data.message);
-      connectWS();
-    }
-  }
-
-  useEffect(() => {
-    if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
-  }, [chatHistory]);
-
-  const ref = useRef(null);
-
-  useEffect(() => {
-    if (open && ref.current) {
-      ref.current.focus();
-    }
-  }, [open]);
-
-  function sendMessage() {
-    if (chatValue !== "") {
-      let nodeValidationErrors = validateNodes(reactFlowInstance);
-      if (nodeValidationErrors.length === 0) {
-        setLockChat(true);
-        let message = chatValue;
-        setChatValue("");
-        addChatHistory(message, true);
-        sendAll({
-          ...reactFlowInstance.toObject(),
-          message,
-          chatHistory,
-          name: flow.name,
-          description: flow.description,
-        });
-      } else {
-        setErrorData({
-          title: "Oops! Looks like you missed some required information:",
-          list: nodeValidationErrors,
-        });
-      }
-    } else {
-      setErrorData({
-        title: "Error sending message",
-        list: ["The message cannot be empty."],
-      });
-    }
-  }
-  function clearChat() {
-    setChatHistory([]);
-    ws.current.send(JSON.stringify({ clear_history: true }));
-    if (lockChat) setLockChat(false);
-  }
-
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-  }
-  return (
-    <Transition.Root show={open} appear={open} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="send-message-modal-transition" />
-        </Transition.Child>
-
-        <div className="chat-modal-box">
-          <div className="chat-modal-box-div">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className=" chat-modal-dialog-panel">
-                <div className="chat-modal-dialog-panel-div">
-                  <button
-                    onClick={() => clearChat()}
-                    className="chat-modal-dialog-trash-panel"
-                  >
-                    <Eraser className="h-4 w-4" />
-                  </button>
-                  <button
-                    onClick={() => setModalOpen(false)}
-                    className="chat-modal-dialog-x-panel"
-                  >
-                    <X className="h-5 w-5" />
-                  </button>
-                </div>
-                <div ref={messagesRef} className="chat-modal-dialog-history">
-                  {chatHistory.length > 0 ? (
-                    chatHistory.map((c, i) => (
-                      <ChatMessage
-                        lockChat={lockChat}
-                        chat={c}
-                        lastMessage={
-                          chatHistory.length - 1 === i ? true : false
-                        }
-                        key={i}
-                      />
-                    ))
-                  ) : (
-                    <div className="chat-modal-dialog-span-box">
-                      <span>
-                        👋{" "}
-                        <span className="text-lg  text-muted-foreground">
-                          Langflow Chat
-                        </span>
-                      </span>
-                      <br />
-                      <div className="chat-modal-dialog-desc">
-                        <span className="text-base text-ring">
-                          Start a conversation and click the agent’s thoughts{" "}
-                          <span>
-                            <MessagesSquare className="mx-1 inline h-5 w-5 animate-bounce " />
-                          </span>{" "}
-                          to inspect the chaining process.
-                        </span>
-                      </div>
-                    </div>
-                  )}
-                  <div ref={ref}></div>
-                </div>
-                <div className="chat-modal-input-div">
-                  <div className="chat-modal-input">
-                    <ChatInput
-                      chatValue={chatValue}
-                      lockChat={lockChat}
-                      sendMessage={sendMessage}
-                      setChatValue={setChatValue}
-                      inputRef={ref}
-                    />
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-}

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

@@ -5,7 +5,7 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 import { TerminalSquare } from "lucide-react";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useState } from "react";
 import AceEditor from "react-ace";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
@@ -27,19 +27,10 @@ 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);
-  const [error, setError] = useState<{
-    detail: { error: string; traceback: string };
-  }>(null);
-  const ref = useRef();
-  useEffect(() => {
-    setValue(code);
-  }, [code, setValue]);
 
   function setModalOpen(x: boolean) {
     if (x === false) {
@@ -49,10 +40,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;
@@ -61,7 +50,6 @@ export default function CodeAreaModal({
               title: "Code is ready to run",
             });
             setValue(code);
-            setOpen((old) => !old);
             setModalOpen(false);
           } else {
             if (funcErrors.length !== 0) {
@@ -84,7 +72,6 @@ export default function CodeAreaModal({
         }
       })
       .catch((_) => {
-        setLoading(false);
         setErrorData({
           title: "There is something wrong with this code, please review it",
         });
@@ -92,7 +79,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>
@@ -122,23 +109,6 @@ export default function CodeAreaModal({
               className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
             />
           </div>
-          <div
-            className={
-              "w-full transition-all delay-500 " +
-              (error?.detail.error !== undefined ? "h-2/6" : "h-0")
-            }
-          >
-            <div className="mt-1 h-full w-full overflow-x-clip overflow-y-scroll text-left custom-scroll">
-              <h1 className="text-lg text-status-red">
-                {error?.detail?.error}
-              </h1>
-              <div className="ml-2 w-full break-all text-sm text-status-red">
-                <pre className="w-full whitespace-pre-wrap break-all">
-                  {error?.detail?.traceback}
-                </pre>
-              </div>
-            </div>
-          </div>
           <div className="flex h-fit w-full justify-end">
             <Button className="mt-3" onClick={handleClick} type="submit">
               Check & Save

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

@@ -1,4 +1,4 @@
-import { Lock, LucideSend } from "lucide-react";
+import { Lock, LucideSend, Sparkles } from "lucide-react";
 import { useEffect } from "react";
 import { classNames } from "../../../utils";
 
@@ -8,6 +8,7 @@ export default function ChatInput({
   sendMessage,
   setChatValue,
   inputRef,
+  noInput,
 }) {
   useEffect(() => {
     if (!lockChat && inputRef.current) {
@@ -32,7 +33,7 @@ export default function ChatInput({
         }}
         rows={1}
         ref={inputRef}
-        disabled={lockChat}
+        disabled={lockChat || noInput}
         style={{
           resize: "none",
           bottom: `${inputRef?.current?.scrollHeight}px`,
@@ -49,23 +50,36 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " form-modal-lock-true bg-input "
+            ? " form-modal-lock-true bg-input"
+            : noInput
+            ? "form-modal-no-input bg-input"
             : " form-modal-lock-false",
+
           "form-modal-lockchat"
         )}
-        placeholder={"Send a message..."}
+        placeholder={
+          noInput
+            ? "No chat input variables found. Click to run your flow."
+            : "Send a message..."
+        }
       />
       <div className="form-modal-send-icon-position">
         <button
           className={classNames(
             "form-modal-send-button",
-            chatValue === "" ? "text-primary" : " bg-indigo-600 text-background"
+            noInput
+              ? "bg-indigo-600 text-background"
+              : chatValue === ""
+              ? "text-primary"
+              : "bg-emerald-600 text-background"
           )}
           disabled={lockChat}
           onClick={() => sendMessage()}
         >
           {lockChat ? (
             <Lock className="form-modal-lock-icon" aria-hidden="true" />
+          ) : noInput ? (
+            <Sparkles className="form-modal-play-icon" aria-hidden="true" />
           ) : (
             <LucideSend className="form-modal-send-icon " aria-hidden="true" />
           )}

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

@@ -1,5 +1,5 @@
 import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
-import { FC, memo, useState } from "react";
+import { useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import { programmingLanguages } from "../../../../utils";
@@ -9,7 +9,7 @@ interface Props {
   value: string;
 }
 
-export const CodeBlock: FC<Props> = memo(({ language, value }) => {
+export function CodeBlock({ language, value }) {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
 
   const copyToClipboard = () => {
@@ -63,7 +63,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
       </div>
 
       <SyntaxHighlighter
-        className=" w-[47vw]"
+        className="overflow-auto"
         language={language}
         style={oneDark}
         customStyle={{ margin: 0 }}
@@ -72,5 +72,5 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
       </SyntaxHighlighter>
     </div>
   );
-});
+}
 CodeBlock.displayName = "CodeBlock";

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

@@ -1,6 +1,6 @@
 import Convert from "ansi-to-html";
 import { ChevronDown } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
@@ -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
@@ -75,47 +75,60 @@ export default function ChatMessage({
             <div className="w-full">
               <div className="w-full dark:text-white">
                 <div className="w-full">
-                  <ReactMarkdown
-                    remarkPlugins={[remarkGfm, remarkMath]}
-                    rehypePlugins={[rehypeMathjax]}
-                    className="markdown prose inline-block break-words text-primary
+                  {useMemo(
+                    () => (
+                      <ReactMarkdown
+                        remarkPlugins={[remarkGfm, remarkMath]}
+                        rehypePlugins={[rehypeMathjax]}
+                        className="markdown prose inline-block break-words text-primary
                      dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw]"
-                    components={{
-                      code({ node, inline, className, children, ...props }) {
-                        if (children.length) {
-                          if (children[0] === "▍") {
-                            return (
-                              <span className="form-modal-markdown-span">
-                                ▍
-                              </span>
+                        components={{
+                          code: ({
+                            node,
+                            inline,
+                            className,
+                            children,
+                            ...props
+                          }) => {
+                            if (children.length) {
+                              if (children[0] === "▍") {
+                                return (
+                                  <span className="form-modal-markdown-span">
+                                    ▍
+                                  </span>
+                                );
+                              }
+
+                              children[0] = (children[0] as string).replace(
+                                "`▍`",
+                                "▍"
+                              );
+                            }
+
+                            const match = /language-(\w+)/.exec(
+                              className || ""
                             );
-                          }
 
-                          children[0] = (children[0] as string).replace(
-                            "`▍`",
-                            "▍"
-                          );
-                        }
-
-                        const match = /language-(\w+)/.exec(className || "");
-
-                        return !inline ? (
-                          <CodeBlock
-                            key={Math.random()}
-                            language={(match && match[1]) || ""}
-                            value={String(children).replace(/\n$/, "")}
-                            {...props}
-                          />
-                        ) : (
-                          <code className={className} {...props}>
-                            {children}
-                          </code>
-                        );
-                      },
-                    }}
-                  >
-                    {chat.message.toString()}
-                  </ReactMarkdown>
+                            return !inline ? (
+                              <CodeBlock
+                                key={Math.random()}
+                                language={(match && match[1]) || ""}
+                                value={String(children).replace(/\n$/, "")}
+                                {...props}
+                              />
+                            ) : (
+                              <code className={className} {...props}>
+                                {children}
+                              </code>
+                            );
+                          },
+                        }}
+                      >
+                        {chat.message.toString()}
+                      </ReactMarkdown>
+                    ),
+                    [chat.message, chat.message.toString()]
+                  )}
                 </div>
                 {chat.files && (
                   <div className="my-2 w-full">
@@ -138,51 +151,56 @@ export default function ChatMessage({
         </div>
       ) : (
         <div>
-          <button
-            className="form-modal-initial-prompt-btn"
-            onClick={() => {
-              setPromptOpen((old) => !old);
-            }}
-          >
-            Display Prompt
-            <ChevronDown
-              className={
-                "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
-              }
-            />
-          </button>
-          <span className="prose inline-block break-words text-primary dark:prose-invert">
-            {promptOpen
-              ? template?.split("\n")?.map((line, index) => {
-                  const regex = /{([^}]+)}/g;
-                  let match;
-                  let parts = [];
-                  let lastIndex = 0;
-                  while ((match = regex.exec(line)) !== null) {
-                    // Push text up to the match
-                    if (match.index !== lastIndex) {
-                      parts.push(line.substring(lastIndex, match.index));
-                    }
-                    // Push div with matched text
-                    if (chat.message[match[1]]) {
-                      parts.push(
-                        <span className="my-1 rounded-md bg-indigo-100">
-                          {chat.message[match[1]]}
-                        </span>
-                      );
-                    }
+          {template && (
+            <>
+              <button
+                className="form-modal-initial-prompt-btn"
+                onClick={() => {
+                  setPromptOpen((old) => !old);
+                }}
+              >
+                Display Prompt
+                <ChevronDown
+                  className={
+                    "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
+                  }
+                />
+              </button>
+              <span className="prose inline-block break-words text-primary dark:prose-invert">
+                {promptOpen
+                  ? template?.split("\n")?.map((line, index) => {
+                      const regex = /{([^}]+)}/g;
+                      let match;
+                      let parts = [];
+                      let lastIndex = 0;
+                      while ((match = regex.exec(line)) !== null) {
+                        // Push text up to the match
+                        if (match.index !== lastIndex) {
+                          parts.push(line.substring(lastIndex, match.index));
+                        }
+                        // Push div with matched text
+                        if (chat.message[match[1]]) {
+                          parts.push(
+                            <span className="my-1 rounded-md bg-indigo-100">
+                              {chat.message[match[1]]}
+                            </span>
+                          );
+                        }
 
-                    // Update last index
-                    lastIndex = regex.lastIndex;
-                  }
-                  // Push text after the last match
-                  if (lastIndex !== line.length) {
-                    parts.push(line.substring(lastIndex));
-                  }
-                  return <p>{parts}</p>;
-                })
-              : chat.message[chat.chatKey]}
-          </span>
+                        // Update last index
+                        lastIndex = regex.lastIndex;
+                      }
+                      // Push text after the last match
+                      if (lastIndex !== line.length) {
+                        parts.push(line.substring(lastIndex));
+                      }
+                      return <p>{parts}</p>;
+                    })
+                  : chat.message[chat.chatKey]}
+              </span>
+            </>
+          )}
+          {chat.message[chat.chatKey]}
         </div>
       )}
     </div>

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 {
@@ -333,41 +333,35 @@ export default function FormModal({
   }, [open]);
 
   function sendMessage() {
-    if (chatValue !== "") {
-      let nodeValidationErrors = validateNodes(reactFlowInstance);
-      if (nodeValidationErrors.length === 0) {
-        setLockChat(true);
-        let inputs = tabsState[id.current].formKeysData.input_keys;
-        setChatValue("");
-        const message = inputs;
-        addChatHistory(
-          message,
-          true,
-          chatKey,
-          tabsState[flow.id].formKeysData.template
-        );
-        sendAll({
-          ...reactFlowInstance.toObject(),
-          inputs: inputs,
-          chatHistory,
-          name: flow.name,
-          description: flow.description,
-        });
-        setTabsState((old) => {
-          let newTabsState = _.cloneDeep(old);
-          newTabsState[id.current].formKeysData.input_keys[chatKey] = "";
-          return newTabsState;
-        });
-      } else {
-        setErrorData({
-          title: "Oops! Looks like you missed some required information:",
-          list: nodeValidationErrors,
-        });
-      }
+    let nodeValidationErrors = validateNodes(reactFlowInstance);
+    if (nodeValidationErrors.length === 0) {
+      setLockChat(true);
+      let inputs = tabsState[id.current].formKeysData.input_keys;
+      setChatValue("");
+      const message = inputs;
+      addChatHistory(
+        message,
+        true,
+        chatKey,
+        tabsState[flow.id].formKeysData.template
+      );
+      sendAll({
+        ...reactFlowInstance.toObject(),
+        inputs: inputs,
+        chatHistory,
+        name: flow.name,
+        description: flow.description,
+      });
+      setTabsState((old) => {
+        if (!chatKey) return old;
+        let newTabsState = _.cloneDeep(old);
+        newTabsState[id.current].formKeysData.input_keys[chatKey] = "";
+        return newTabsState;
+      });
     } else {
       setErrorData({
-        title: "Error sending message",
-        list: ["The message cannot be empty."],
+        title: "Oops! Looks like you missed some required information:",
+        list: nodeValidationErrors,
       });
     }
   }
@@ -549,13 +543,12 @@ export default function FormModal({
                   <div className="langflow-chat-input">
                     <ChatInput
                       chatValue={chatValue}
+                      noInput={!chatKey}
                       lockChat={lockChat}
                       sendMessage={sendMessage}
                       setChatValue={(value) => {
                         setChatValue(value);
                         setTabsState((old) => {
-                          // chatKey is undefined when there are no chat input keys
-                          if (!chatKey) return old;
                           let newTabsState = _.cloneDeep(old);
                           newTabsState[id.current].formKeysData.input_keys[
                             chatKey

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;")
@@ -135,10 +133,9 @@ export default function GenericModal({
     postValidatePrompt(field_name, inputValue, nodeClass)
       .then((apiReturn) => {
         if (apiReturn.data) {
-          setNodeClass(apiReturn.data.frontend_node);
-
-          let inputVariables = apiReturn.data.input_variables;
-          if (inputVariables.length === 0) {
+          setNodeClass(apiReturn.data?.frontend_node);
+          let inputVariables = apiReturn.data.input_variables ?? [];
+          if (inputVariables && inputVariables.length === 0) {
             setIsEdit(true);
             setNoticeData({
               title: "Your template does not have any variables.",
@@ -159,6 +156,7 @@ export default function GenericModal({
         }
       })
       .catch((error) => {
+        console.log(error);
         setIsEdit(true);
         return setErrorData({
           title: "There is something wrong with this prompt, please review it",

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 = {

src/frontend/src/types/utils/reactflowUtils.ts

@@ -0,0 +1,10 @@
+import { Edge } from "reactflow";
+import { NodeType } from "../flow";
+
+export type cleanEdgesType = {
+  flow: {
+    edges: Edge[];
+    nodes: NodeType[];
+  };
+  updateEdge: (edge: Edge[]) => void;
+};

src/frontend/src/util/reactflowUtils.ts

@@ -0,0 +1,46 @@
+import _ from "lodash";
+import { cleanEdgesType } from "./../types/utils/reactflowUtils";
+
+export function cleanEdges({
+  flow: { edges, nodes },
+  updateEdge,
+}: cleanEdgesType) {
+  let newEdges = _.cloneDeep(edges);
+  edges.forEach((edge) => {
+    // check if the source and target node still exists
+    const sourceNode = nodes.find((node) => node.id === edge.source);
+    const targetNode = nodes.find((node) => node.id === edge.target);
+    if (!sourceNode || !targetNode) {
+      newEdges = newEdges.filter((e) => e.id !== edge.id);
+    }
+    // check if the source and target handle still exists
+    if (sourceNode && targetNode) {
+      const sourceHandle = edge.sourceHandle; //right
+      const targetHandle = edge.targetHandle; //left
+      if (targetHandle) {
+        const field = targetHandle.split("|")[1];
+        const id =
+          (targetNode.data.node.template[field]?.input_types?.join(";") ??
+            targetNode.data.node.template[field]?.type) +
+          "|" +
+          field +
+          "|" +
+          targetNode.data.id;
+        if (id !== targetHandle) {
+          newEdges = newEdges.filter((e) => e.id !== edge.id);
+        }
+      }
+      if (sourceHandle) {
+        const id = [
+          sourceNode.data.type,
+          sourceNode.data.id,
+          ...sourceNode.data.node.base_classes,
+        ].join("|");
+        if (id !== sourceHandle) {
+          newEdges = newEdges.filter((e) => e.id !== edge.id);
+        }
+      }
+    }
+  });
+  updateEdge(newEdges);
+}

src/frontend/tailwind.config.js

@@ -82,6 +82,8 @@ module.exports = {
         "status-yellow": "var(--status-yellow)",
         "success-background": "var(--success-background)",
         "success-foreground": "var(--success-foreground)",
+        "chat-bot-icon": "var(--chat-bot-icon)",
+        "chat-user-icon": "var(--chat-user-icon)",
 
         white: "var(--white)",
         border: "hsl(var(--border))",