fix(dropdownComponent): add condition to check if options object is empty before rendering dropdown component

fix(chatInput): add condition to check if chatValue is an empty object before displaying message
fix(chatMessage): remove useMemo hook and fix condition to check if chat message is empty before displaying message
fix(formModal): add conditions to check if thought and files exist before updating chat object
fix(genericModal): add condition to check if inputVariables exist before displaying notice or success message

src/frontend/src/components/dropdownComponent/index.tsx

@@ -22,6 +22,8 @@ export default function Dropdown({
   }, [value]);
 
   return (
+    <>
+      {Object.keys(options)?.length > 0 ? (
         <>
           <Listbox
             value={internalValue}
@@ -71,7 +73,7 @@ export default function Dropdown({
                         apiModal ? "mb-2 w-[250px]" : "absolute w-full"
                       )}
                     >
-                  {options.map((option, id) => (
+                      {options?.map((option, id) => (
                         <Listbox.Option
                           key={id}
                           className={({ active }) =>
@@ -125,5 +127,15 @@ export default function Dropdown({
             )}
           </Listbox>
         </>
+      ) : (
+        <>
+          <div>
+            <span className="text-sm italic">
+              No parameters are available for display.
+            </span>
+          </div>
+        </>
+      )}
+    </>
   );
 }

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

@@ -46,7 +46,14 @@ export default function ChatInput({
               : "hidden"
           }`,
         }}
-        value={lockChat ? "Thinking..." : chatValue}
+        value={
+          lockChat
+            ? "Thinking..."
+            : typeof chatValue === "object" &&
+              Object.keys(chatValue)?.length === 0
+            ? "No chat input variables found. Click to run your flow."
+            : chatValue
+        }
         onChange={(event): void => {
           setChatValue(event.target.value);
         }}

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

@@ -1,5 +1,5 @@
 import Convert from "ansi-to-html";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
 import remarkGfm from "remark-gfm";
@@ -74,9 +74,7 @@ export default function ChatMessage({
             <div className="w-full">
               <div className="w-full dark:text-white">
                 <div className="w-full">
-                  {useMemo(
+                  {chat.message.toString() === "" && lockChat ? (
-                    () =>
-                      chat.message.toString() === "" && lockChat ? (
                     <IconComponent
                       name="MoreHorizontal"
                       className="h-8 w-8 animate-pulse"
@@ -113,9 +111,7 @@ export default function ChatMessage({
                             );
                           }
 
-                              const match = /language-(\w+)/.exec(
+                          const match = /language-(\w+)/.exec(className || "");
-                                className || ""
-                              );
 
                           return !inline ? (
                             <CodeTabsComponent
@@ -143,8 +139,6 @@ export default function ChatMessage({
                     >
                       {chat.message.toString()}
                     </ReactMarkdown>
-                      ),
-                    [chat.message, chat.message.toString()]
                   )}
                 </div>
                 {chat.files && (

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

@@ -146,13 +146,14 @@ export default function FormModal({
             newChat[newChat.length - 1].message + str;
         }
       }
-      if (thought) {
+
+      if (thought && newChat[newChat.length - 1]?.thought) {
         newChat[newChat.length - 1].thought = thought;
       }
-      if (files) {
+      if (files && newChat[newChat.length - 1]?.files) {
         newChat[newChat.length - 1].files = files;
       }
-      if (prompt) {
+      if (prompt && newChat[newChat.length - 2]?.template) {
         newChat[newChat.length - 2].template = prompt;
       }
       return newChat;

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

@@ -122,25 +122,22 @@ export default function GenericModal({
         }
         if (apiReturn.data) {
           let inputVariables = apiReturn.data.input_variables ?? [];
-          if (!inputVariables || inputVariables.length === 0) {
-            setIsEdit(true);
-            setNoticeData({
-              title: "Your template does not have any variables.",
-            });
-            setModalOpen(false);
-          } else {
           if (
-              JSON.stringify(apiReturn.data?.frontend_node) !==
+            JSON.stringify(apiReturn.data?.frontend_node) !== JSON.stringify({})
-              JSON.stringify({})
           ) {
             setNodeClass!(apiReturn.data?.frontend_node, inputValue);
             setModalOpen(closeModal);
             setIsEdit(false);
+          }
+          if (!inputVariables || inputVariables.length === 0) {
+            setNoticeData({
+              title: "Your template does not have any variables.",
+            });
+          } else {
             setSuccessData({
               title: "Prompt is ready",
             });
           }
-          }
         } else {
           setIsEdit(true);
           setErrorData({