refactor(formModal): Add formModal tailwind constants classes (#628)

src/frontend/src/index.css

@@ -913,5 +913,141 @@ 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 ml-3 mr-6 mt-1
+  }
+  .form-modal-chat-image {
+    @apply flex flex-col items-center gap-1
+  }
+  .form-modal-chat-img-box {
+    @apply relative 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-icon-img {
+    @apply absolute scale-[60%]
+  }
+  .form-modal-chat-text-position {
+    @apply flex w-full flex-1 text-start
+  }
+  .form-modal-chat-text {
+    @apply relative flex w-full flex-col text-start text-sm font-normal text-muted-foreground
+  }
+  .form-modal-chat-icon-div {
+    @apply absolute -left-6 -top-3 cursor-pointer
+  }
+  .form-modal-chat-icon {
+    @apply h-4 w-4 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-2 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

@@ -48,32 +48,24 @@ export default function ChatInput({
           setChatValue(e.target.value);
         }}
         className={classNames(
-          lockChat
-            ? " bg-input text-black dark:bg-gray-700 dark:text-gray-300"
-            : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "form-input block w-full rounded-md border-gray-300 p-4 pr-16 custom-scroll dark:border-gray-600 sm:text-sm"
+          lockChat ? " form-modal-lock-true" : " form-modal-lock-false",
+          "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}
           onClick={() => sendMessage()}
         >
           {lockChat ? (
-            <Lock
-              className="ml-1 mr-1 h-5 w-5 animate-pulse"
-              aria-hidden="true"
-            />
+            <Lock className="form-modal-lock-icon" aria-hidden="true" />
           ) : (
-            <LucideSend
-              className="mr-2 h-5 w-5 rotate-[44deg] "
-              aria-hidden="true"
-            />
+            <LucideSend className="form-modal-send-icon " aria-hidden="true" />
           )}
         </button>
       </div>

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

@@ -28,42 +28,38 @@ export default function ChatMessage({
   const [promptOpen, setPromptOpen] = useState(false);
   return (
     <div
-      className={classNames(
-        "flex w-full px-2 py-6 pl-4 pr-9",
-        chat.isSend ? "" : " "
-      )}
+      className={classNames("form-modal-chat-position", chat.isSend ? "" : " ")}
     >
-      <div className={classNames("mb-3 ml-3 mr-6 mt-1 ")}>
+      <div className={classNames("form-modal-chatbot-icon ")}>
         {!chat.isSend ? (
-          <div className="flex flex-col items-center gap-1">
-            <div className="relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#afe6ef] p-5 text-2xl ">
-              <img src={Robot} className="absolute scale-[60%]" />
+          <div className="form-modal-chat-image">
+            <div className="form-modal-chat-bot-icon ">
+              <img src={Robot} className="form-modal-chat-icon-img" />
             </div>
           </div>
         ) : (
-          <div className="flex flex-col items-center gap-1">
-            <div className="relative flex h-8 w-8 items-center justify-center overflow-hidden rounded-md bg-[#aface9] p-5 text-2xl ">
-              <img src={MaleTechnology} className="absolute scale-[60%]" />
+          <div className="form-modal-chat-image">
+            <div className="form-modal-chat-user-icon ">
+              <img src={MaleTechnology} className="form-modal-chat-icon-img" />
             </div>
           </div>
         )}
       </div>
       {!chat.isSend ? (
-        <div className="flex w-full flex-1 text-start">
-          <div className="relative flex w-full flex-col text-start text-sm font-normal text-muted-foreground">
-            {hidden && chat.thought && chat.thought !== "" && (
+        <div className="form-modal-chat-text-position">
+          <div className="form-modal-chat-text">
+            {hidden && (
               <div
                 onClick={() => setHidden((prev) => !prev)}
-                className="absolute -left-6 -top-3 cursor-pointer"
+                className="form-modal-chat-icon-div"
               >
-                <THOUGHTS_ICON className="h-4 w-4 animate-bounce dark:text-white" />
+                <THOUGHTS_ICON 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
-								border-gray-300 bg-muted px-2 text-start text-primary scrollbar-hide dark:border-gray-500 dark:bg-gray-800"
+                className=" form-modal-chat-thought "
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
@@ -83,7 +79,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>
                             );
@@ -137,7 +133,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-2 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="mr-6 flex h-full w-2/6 flex-col justify-start overflow-auto scrollbar-hide">
-              <div className="flex items-center py-2">
-                <Variable className=" -ml-px mr-1 h-4 w-4 text-primary"></Variable>
-                <span className="text-md font-semibold text-primary">
+          <div className="form-modal-iv-box ">
+            <div className="form-modal-iv-size">
+              <div className="file-component-arrangement">
+                <Variable className=" file-component-variable"></Variable>
+                <span className="file-component-variables-span text-md">
                   Input Variables
                 </span>
               </div>
-              <div className="flex items-center justify-between pt-2">
-                <div className="mr-2.5 flex items-center">
+              <div className="file-component-variables-title">
+                <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="relative flex h-full w-full flex-col rounded-md border bg-muted">
-                <div className="absolute right-3 top-3 z-50">
+            <div className="eraser-column-arrangement">
+              <div className="eraser-size">
+                <div className="eraser-position">
                   <button disabled={lockChat} onClick={() => clearChat()}>
                     <Eraser
                       className={classNames(
@@ -509,10 +509,7 @@ export default function FormModal({
                     />
                   </button>
                 </div>
-                <div
-                  ref={messagesRef}
-                  className="flex h-full w-full flex-col items-center overflow-scroll scrollbar-hide"
-                >
+                <div ref={messagesRef} className="chat-message-div">
                   {chatHistory.length > 0 ? (
                     chatHistory.map((c, i) => (
                       <ChatMessage
@@ -523,16 +520,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">
-                        <span className="text-base text-gray-500">
+                      <div className="langflow-chat-desc">
+                        <span className="langflow-chat-desc-span">
                           Start a conversation and click the agent's thoughts{" "}
                           <span>
                             <THOUGHTS_ICON className="mx-1 inline h-5 w-5 animate-bounce " />
@@ -544,8 +541,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="relative w-full rounded-md shadow-sm">
+                <div className="langflow-chat-input-div">
+                  <div className="langflow-chat-input">
                     <ChatInput
                       chatValue={chatValue}
                       lockChat={lockChat}