Added placeholder message when a chat key does not exist

src/frontend/src/index.css

@@ -917,11 +917,14 @@ 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
   }
+  .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
   }
   .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-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm
   }
   .form-modal-send-icon-position {
     @apply absolute bottom-2 right-4
@@ -935,6 +938,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
   }

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";
 
@@ -49,24 +49,37 @@ export default function ChatInput({
           setChatValue(e.target.value);
         }}
         className={classNames(
-          lockChat || noInput
-            ? " form-modal-lock-true bg-input "
+          lockChat
+            ? " 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" />
           )}