Bug Fixes and Style Updates (#643)

src/backend/langflow/graph/graph/base.py

@@ -60,7 +60,7 @@ class Graph:
         # the toolkit node
         self._build_node_params()
         # remove invalid nodes
-        self._remove_invalid_nodes()
+        self._validate_nodes()
 
     def _build_node_params(self) -> None:
         """Identifies and handles the LLM node within the graph."""
@@ -75,14 +75,13 @@ class Graph:
                 if isinstance(node, ToolkitVertex):
                     node.params["llm"] = llm_node
 
-    def _remove_invalid_nodes(self) -> None:
+    def _validate_nodes(self) -> None:
-        """Removes invalid nodes from the graph."""
+        """Check that all nodes have edges"""
-        self.nodes = [
+        for node in self.nodes:
-            node
+            if not self._validate_node(node):
-            for node in self.nodes
+                raise ValueError(
-            if self._validate_node(node)
+                    f"{node.vertex_type} is not connected to any other components"
-            or (len(self.nodes) == 1 and len(self.edges) == 0)
+                )
-        ]
 
     def _validate_node(self, node: Vertex) -> bool:
         """Validates a node."""

src/frontend/src/constants.tsx

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

src/frontend/src/contexts/tabsContext.tsx

@@ -195,7 +195,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     if (!flow.data || !flow.data.edges) return;
     flow.data.edges.forEach((edge) => {
       edge.className = "";
-      edge.style = { stroke: "#555555" };
+      edge.style = { stroke: "#555" };
     });
   }
 
@@ -472,7 +472,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
           sourceHandle,
           targetHandle,
           id,
-          style: { stroke: "inherit" },
+          style: { stroke: "#555" },
           className:
             targetHandle.split("|")[0] === "Text"
               ? "stroke-gray-800 "

src/frontend/src/index.css

@@ -116,6 +116,9 @@
   --status-blue: #2563eb;
   --connection: #555;
   
+  --chat-bot-icon: #235d70;
+  --chat-user-icon: #4f3d6e;
+
 }}
 
 @layer base {
@@ -652,10 +655,10 @@ The cursor: default; property value restores the browser's default cursor style
     @apply flex items-center justify-between px-4 py-1.5
   }
   .code-block-modal-span {
-    @apply text-xs lowercase text-background
+    @apply text-xs lowercase text-muted-foreground
   }
   .code-block-modal-button {
-    @apply flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background
+    @apply flex items-center gap-1.5 rounded bg-none p-1 text-xs text-muted-foreground
   }
 
   .chat-message-modal {
@@ -930,7 +933,11 @@ The cursor: default; property value restores the browser's default cursor style
     @apply bg-white text-primary
   }
   .code-highlight{
-    @apply block px-3 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden
+    @apply block px-3 py-2 w-full max-h-[64vh] text-sm outline-0 border-0 break-all overflow-y-hidden
+  }
+
+  .code-nohighlight{
+    @apply block px-3 py-2 w-full max-h-[70vh] text-sm outline-0 border-0 break-all overflow-y-hidden
   }
   .form-modal-lockchat {
     @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

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

@@ -81,7 +81,7 @@ export default function ChatMessage({
                         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]"
+                     dark:prose-invert sm:max-w-[30vw] lg:max-w-[40vw] sm:w-[30vw] lg:w-[40vw]"
                         components={{
                           code: ({
                             node,

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

@@ -6,7 +6,7 @@ import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
+import { MAX_WORDS_HIGHLIGHT, PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -58,6 +58,8 @@ export default function GenericModal({
       closePopUp();
     }
   }
+  const divRef = useRef(null);
+  const divRefPrompt = useRef(null);
 
   function checkVariables(valueToCheck) {
     const regex = /\{([^{}]+)\}/g;
@@ -108,7 +110,7 @@ export default function GenericModal({
   const TextAreaContentView = () => {
     return (
       <SanitizedHTMLWrapper
-        className="code-highlight"
+        className={getClassByNumberLength()}
         content={coloredContent}
         onClick={() => {
           setIsEdit(true);
@@ -118,6 +120,15 @@ export default function GenericModal({
     );
   };
 
+  function getClassByNumberLength(){
+    let sumOfCaracteres: number = 0;
+    wordsHighlight.forEach(element => {
+      sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length
+    });
+    return sumOfCaracteres > MAX_WORDS_HIGHLIGHT ? "code-highlight" : "code-nohighlight"
+  }
+
+
   function validatePrompt(closeModal: boolean) {
     postValidatePrompt(field_name, inputValue, nodeClass)
       .then((apiReturn) => {
@@ -189,7 +200,7 @@ export default function GenericModal({
           >
             {type === TypeModal.PROMPT && isEdit ? (
               <Textarea
-                ref={ref}
+                ref={divRefPrompt}
                 className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
                 value={inputValue}
                 onBlur={() => {
@@ -223,7 +234,7 @@ export default function GenericModal({
             <div className="mb-auto flex-1">
               {type === TypeModal.PROMPT && (
                 <div className=" mr-2">
-                  <div className="max-h-20 overflow-y-auto custom-scroll">
+                  <div ref={divRef} className="max-h-20 overflow-y-auto custom-scroll">
                     <div className="flex flex-wrap items-center">
                       <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
                       <span className="text-md font-semibold text-primary">