From f4b369b837690d38f82fb8dd3ededffb9ed41be8 Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Wed, 19 Jun 2024 01:02:55 -0300
Subject: [PATCH] refactor: Improve handling of inputValue in GenericModal
 component

This commit improves the handling of the inputValue in the GenericModal component. It checks if the inputValue is a string before assigning it to coloredContent. Additionally, it updates the classNames in the JSX elements to ensure consistent ordering. These changes enhance the reliability and maintainability of the code.
---
 src/frontend/src/modals/genericModal/index.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 06980af69..0a30e4efa 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -96,9 +96,16 @@ export default function GenericModal({
   }, [inputValue, type]);
 
   useEffect(() => {
-    setInputValue(value);
+    if (typeof value === "string") setInputValue(value);
   }, [value, modalOpen]);
-  const coloredContent = (inputValue || "")
+  let coloredContent = inputValue || "";
+  // Check if coloredContent is a string
+  // calling toString on undefined will throw an error
+  // so we need to check if it is a string first
+  if (typeof coloredContent !== "string") {
+    coloredContent = "";
+  }
+  coloredContent
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")
     .replace(regexHighlight, (match, p1, p2) => {
@@ -205,7 +212,7 @@ export default function GenericModal({
         />
       </BaseModal.Header>
       <BaseModal.Content overflowHidden>
-        <div className={classNames("rounded-lg border flex h-full w-full")}>
+        <div className={classNames("flex h-full w-full rounded-lg border")}>
           {type === TypeModal.PROMPT && isEdit && !readonly ? (
             <Textarea
               id={"modal-" + id}
@@ -228,7 +235,7 @@ export default function GenericModal({
             />
           ) : type === TypeModal.PROMPT && (!isEdit || readonly) ? (
             <SanitizedHTMLWrapper
-              className={getClassByNumberLength()+ " bg-muted"}
+              className={getClassByNumberLength() + " bg-muted"}
               content={coloredContent}
               onClick={() => {
                 setIsEdit(true);