refactor(formModal): Add formModal tailwind constants classes

src/frontend/src/index.css

@@ -913,5 +913,138 @@ The cursor: default; property value restores the browser's default cursor style
     @apply ml-3 h-6 w-6
   }
 
+  .form-modal-lock-true {
+    @apply bg-input 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
+  }
+  .form-modal-send-icon-position {
+    @apply absolute bottom-2 right-4
+  }
+  .form-modal-send-button {
+    @apply rounded-md p-2 px-1 transition-all duration-300
+  }
+  .form-modal-lock-icon {
+    @apply ml-1 mr-1 h-5 w-5 animate-pulse
+  }
+  .form-modal-send-icon {
+    @apply mr-2 h-5 w-5 rotate-[44deg]
+  }
+  .form-modal-chat-position {
+    @apply flex-max-width px-2 py-6 pl-4 pr-9
+  }
+  .form-modal-chatbot-icon {
+    @apply mb-3 mr-3 mt-1 w-20
+  }
+  .form-modal-chat-image {
+    @apply flex flex-col items-center gap-1
+  }
+  .form-modal-chat-img-box {
+    @apply 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]
+  }
+  .form-modal-chat-user-icon {
+    @apply form-modal-chat-img-box bg-[#aface9]
+  }
+  .form-modal-chat-text-position {
+    @apply flex w-full flex-1 items-center text-start
+  }
+  .form-modal-chat-text {
+    @apply relative inline-block w-full text-start text-sm font-normal text-muted-foreground
+  }
+  .form-modal-chat-icon-div {
+    @apply absolute -left-8 -top-5 cursor-pointer
+  }
+  .form-modal-chat-icon {
+    @apply h-5 w-5 animate-bounce dark:text-white
+  }
+  .form-modal-chat-thought-border {
+    @apply rounded-md border border-gray-300
+  }
+  .form-modal-chat-thought-size {
+    @apply inline-block h-full w-[95%]
+  }
+  .form-modal-chat-thought {
+    @apply ml-3 cursor-pointer overflow-scroll  bg-muted px-2 text-start text-primary scrollbar-hide dark:border-gray-500 dark:bg-gray-800 form-modal-chat-thought-border form-modal-chat-thought-size
+  }
+  .form-modal-markdown-span {
+    @apply mt-1 animate-pulse cursor-default
+  }
+  .form-modal-initial-prompt-btn {
+    @apply mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-background px-4 py-3 text-base font-semibold
+  }
+  .form-modal-iv-box {
+    @apply mt-2 flex-max-width h-[80vh]
+  }
+  .form-modal-iv-size {
+    @apply mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide
+  }
+  .file-component-arrangement {
+    @apply flex items-center py-2
+  }
+  .file-component-variable {
+    @apply -ml-px mr-1 h-4 w-4 text-primary
+  }
+  .file-component-variables-span {
+    @apply font-semibold text-primary
+  }
+  .file-component-variables-title {
+    @apply flex items-center justify-between pt-2
+  }
+  .file-component-variables-div {
+    @apply mr-2.5 flex items-center
+  }
+  .file-component-variables-title-txt {
+    @apply text-sm font-medium text-primary
+  }
+  .file-component-accordion-div {
+    @apply flex items-start gap-3
+  }
+  .file-component-badge-div {
+    @apply flex-max-width items-center justify-between
+  }
+  .file-component-tab-column {
+    @apply flex flex-col gap-2 p-1
+  }
+  .tab-accordion-badge-div {
+    @apply flex flex-1 items-center justify-between py-4 text-sm font-normal text-muted-foreground transition-all
+  }
+  .eraser-column-arrangement {
+    @apply flex-max-width flex-1 flex-col
+  }
+  .eraser-size {
+    @apply relative flex h-full w-full flex-col rounded-md border bg-muted
+  }
+  .eraser-position {
+    @apply absolute right-3 top-3 z-50
+  }
+  .chat-message-div {
+    @apply flex-max-width h-full flex-col items-center overflow-scroll scrollbar-hide
+  }
+  .chat-alert-box {
+    @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
+  }
+  .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
+  }
+  .langflow-chat-desc-span {
+    @apply text-base text-gray-500
+  }
+  .langflow-chat-input-div {
+    @apply flex-max-width flex-col items-center justify-between px-8 pb-6
+  }
+  .langflow-chat-input {
+    @apply relative w-full rounded-md shadow-sm
+  }
+
 
 }

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

@@ -50,16 +50,16 @@ export default function ChatInput({
         }}
         className={classNames(
           lockChat
-            ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
+            ? " form-modal-lock-true"
-            : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
+            : " form-modal-lock-false",
-          "form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm"
+          "form-modal-lockchat"
         )}
         placeholder={"Send a message..."}
       />
-      <div className="absolute bottom-2 right-4">
+      <div className="form-modal-send-icon-position">
         <button
           className={classNames(
-            "rounded-md p-2 px-1 transition-all duration-300",
+            "form-modal-send-button",
             chatValue == "" ? "text-primary" : " bg-indigo-600 text-background"
           )}
           disabled={lockChat}
@@ -67,12 +67,12 @@ export default function ChatInput({
         >
           {lockChat ? (
             <Lock
-              className="ml-1 mr-1 h-5 w-5 animate-pulse"
+              className="form-modal-lock-icon"
               aria-hidden="true"
             />
           ) : (
             <LucideSend
-              className="mr-2 h-5 w-5 rotate-[44deg] "
+              className="form-modal-send-icon "
               aria-hidden="true"
             />
           )}

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

@@ -35,21 +35,21 @@ export default function ChatMessage({
   return (
     <div
       className={classNames(
-        "flex w-full px-2 py-6 pl-4 pr-9",
+        "form-modal-chat-position",
         chat.isSend ? "" : " "
       )}
     >
-      <div className={classNames("mb-3 mr-3 mt-1 w-20 ")}>
+      <div className={classNames("form-modal-chatbot-icon ")}>
         {!chat.isSend ? (
-          <div className="flex flex-col items-center gap-1">
+          <div className="form-modal-chat-image">
-            <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl ">
+            <div className="form-modal-chat-bot-icon ">
               🤖
             </div>
             <span className="text-xs">Chatbot</span>
           </div>
         ) : (
-          <div className="flex flex-col items-center gap-1">
+          <div className="form-modal-chat-image">
-            <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl ">
+            <div className="form-modal-chat-user-icon ">
               👨‍💻
             </div>
             <span className="text-xs">User</span>
@@ -57,21 +57,20 @@ export default function ChatMessage({
         )}
       </div>
       {!chat.isSend ? (
-        <div className="flex w-full flex-1 items-center text-start">
+        <div className="form-modal-chat-text-position">
-          <div className="relative inline-block w-full text-start text-sm font-normal text-muted-foreground">
+          <div className="form-modal-chat-text">
             {hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className="absolute -left-8 -top-5 cursor-pointer"
+                className="form-modal-chat-icon-div"
               >
-                <MessageSquare className="h-5 w-5 animate-bounce dark:text-white" />
+                <MessageSquare className="form-modal-chat-icon" />
               </div>
             )}
             {chat.thought && chat.thought !== "" && !hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className=" ml-3 inline-block h-full w-[95%] cursor-pointer overflow-scroll rounded-md border
+                className=" form-modal-chat-thought "
-								border-gray-300 bg-muted px-2 text-start text-primary scrollbar-hide dark:border-gray-500 dark:bg-gray-800"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
@@ -91,7 +90,7 @@ export default function ChatMessage({
                         if (children.length) {
                           if (children[0] == "▍") {
                             return (
-                              <span className="mt-1 animate-pulse cursor-default">
+                              <span className="form-modal-markdown-span">
                                 ▍
                               </span>
                             );
@@ -145,7 +144,7 @@ export default function ChatMessage({
       ) : (
         <div>
           <button
-            className="mb-2 flex items-center gap-4 rounded-md border border-ring/60 bg-background px-4 py-3 text-base font-semibold"
+            className="form-modal-initial-prompt-btn"
             onClick={() => {
               setPromptOpen((old) => !old);
             }}

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

@@ -401,19 +401,19 @@ export default function FormModal({
             <DialogDescription>{CHAT_FORM_DIALOG_SUBTITLE}</DialogDescription>
           </DialogHeader>
 
-          <div className="mt-2 flex h-[80vh] w-full ">
+          <div className="form-modal-iv-box ">
-            <div className="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
+            <div className="form-modal-iv-size">
-              <div className="flex items-center py-2">
+              <div className="file-component-arrangement">
-                <Variable className=" -ml-px mr-1 h-4 w-4 text-primary"></Variable>
+                <Variable className=" file-component-variable"></Variable>
-                <span className="text-md font-semibold text-primary">
+                <span className="file-component-variables-span text-md">
                   Input Variables
                 </span>
               </div>
-              <div className="flex items-center justify-between pt-2">
+              <div className="file-component-variables-title">
-                <div className="mr-2.5 flex items-center">
+                <div className="file-component-variables-div">
                   <span className="text-sm font-medium text-primary">Name</span>
                 </div>
-                <div className="mr-2.5 flex items-center">
+                <div className="file-component-variables-div">
                   <span className="text-sm font-medium text-primary">
                     Chat Input
                   </span>
@@ -422,10 +422,10 @@ export default function FormModal({
               <Accordion type="multiple" className="w-full">
                 {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
                   (i, k) => (
-                    <div className="flex items-start gap-3" key={k}>
+                    <div className="file-component-accordion-div" key={k}>
                       <AccordionItem className="w-full" key={k} value={i}>
                         <AccordionTrigger className="flex gap-2">
-                          <div className="flex w-full items-center justify-between">
+                          <div className="file-component-badge-div">
                             <Badge variant="gray" size="md">
                               {i}
                             </Badge>
@@ -450,7 +450,7 @@ export default function FormModal({
                           </div>
                         </AccordionTrigger>
                         <AccordionContent>
-                          <div className="flex flex-col gap-2 p-1">
+                          <div className="file-component-tab-column">
                             {tabsState[
                               id.current
                             ].formKeysData.handle_keys.some((t) => t === i) && (
@@ -482,7 +482,7 @@ export default function FormModal({
                 )}
                 {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
                   <AccordionItem key={k} value={i}>
-                    <div className="group flex flex-1 items-center justify-between py-4 text-sm font-normal text-muted-foreground transition-all">
+                    <div className="tab-accordion-badge-div group">
                       <div className="group-hover:underline">
                         <Badge size="md" variant="gray">
                           {i}
@@ -494,9 +494,9 @@ export default function FormModal({
                 ))}
               </Accordion>
             </div>
-            <div className="flex w-full flex-1 flex-col">
+            <div className="eraser-column-arrangement">
-              <div className="relative flex h-full w-full flex-col rounded-md border bg-muted">
+              <div className="eraser-size">
-                <div className="absolute right-3 top-3 z-50">
+                <div className="eraser-position">
                   <button disabled={lockChat} onClick={() => clearChat()}>
                     <Eraser
                       className={classNames(
@@ -511,7 +511,7 @@ export default function FormModal({
                 </div>
                 <div
                   ref={messagesRef}
-                  className="flex h-full w-full flex-col items-center overflow-scroll scrollbar-hide"
+                  className="chat-message-div"
                 >
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
@@ -523,16 +523,16 @@ export default function FormModal({
                       />
                     ))
                   ) : (
-                    <div className="flex h-full w-full flex-col items-center justify-center text-center align-middle">
+                    <div className="chat-alert-box">
                       <span>
                         👋{" "}
-                        <span className="text-lg text-gray-600 dark:text-gray-300">
+                        <span className="langflow-chat-span">
                           LangFlow Chat
                         </span>
                       </span>
                       <br />
-                      <div className="w-2/4 rounded-md border border-gray-200 bg-muted px-6 py-8 dark:border-gray-700 dark:bg-gray-900">
+                      <div className="langflow-chat-desc">
-                        <span className="text-base text-gray-500">
+                        <span className="langflow-chat-desc-span">
                           Start a conversation and click the agent's thoughts{" "}
                           <span>
                             <MessageSquare className="mx-1 inline h-5 w-5 animate-bounce " />
@@ -544,8 +544,8 @@ export default function FormModal({
                   )}
                   <div ref={ref}></div>
                 </div>
-                <div className="flex w-full flex-col items-center justify-between px-8 pb-6">
+                <div className="langflow-chat-input-div">
-                  <div className="relative w-full rounded-md shadow-sm">
+                  <div className="langflow-chat-input">
                     <ChatInput
                       chatValue={chatValue}
                       lockChat={lockChat}