From d59b648b75e3ea1790869ba3c5da86362154a067 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 28 Jun 2023 00:38:21 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20refactor(formTrigger):=20remove?=
 =?UTF-8?q?=20unused=20FormTrigger=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔥 refactor(chatComponent): remove import and usage of FormTrigger component

🔥 refactor(ui/badge): remove unused size variant in Badge component

🔥 refactor(formModal/chatInput): remove unused Eraser icon import and clearChat function

🔥 refactor(formModal/chatMessage): remove unused classNames import and remove dark mode classes

🔥 refactor(formModal): remove unused Eraser icon import and clearChat function
---
 .../chatComponent/formTrigger/index.tsx       | 51 -------------------
 .../src/components/chatComponent/index.tsx    |  9 ++--
 src/frontend/src/components/ui/badge.tsx      | 13 +++--
 .../src/modals/formModal/chatInput/index.tsx  | 21 +++++---
 .../modals/formModal/chatMessage/index.tsx    |  4 +-
 src/frontend/src/modals/formModal/index.tsx   | 26 +++++++---
 6 files changed, 48 insertions(+), 76 deletions(-)
 delete mode 100644 src/frontend/src/components/chatComponent/formTrigger/index.tsx

diff --git a/src/frontend/src/components/chatComponent/formTrigger/index.tsx b/src/frontend/src/components/chatComponent/formTrigger/index.tsx
deleted file mode 100644
index c281a92e3..000000000
--- a/src/frontend/src/components/chatComponent/formTrigger/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Transition } from "@headlessui/react";
-import { FormInput, MessagesSquare } from "lucide-react";
-
-import { alertContext } from "../../../contexts/alertContext";
-import { useContext } from "react";
-
-export default function FormTrigger({ open, setOpen, isBuilt }) {
-  const { setErrorData } = useContext(alertContext);
-
-  function handleClick() {
-    if (isBuilt) {
-      setOpen(true);
-    } else {
-      setErrorData({
-        title: "Flow not built",
-        list: ["Please build the flow before chatting"],
-      });
-    }
-  }
-
-  return (
-    <Transition
-      show={!open}
-      appear={true}
-      enter="transition ease-out duration-300"
-      enterFrom="translate-y-96"
-      enterTo="translate-y-0"
-      leave="transition ease-in duration-300"
-      leaveFrom="translate-y-0"
-      leaveTo="translate-y-96"
-    >
-      <div className="fixed bottom-36 right-4">
-        <div
-          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032]
-          bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
-          onClick={handleClick}
-        >
-          <button>
-            <div className="flex gap-3">
-              <FormInput
-                className="pth-6 w-6 stroke-2 stroke-[#5c8be1]"
-                style={{ color: "white" }}
-                strokeWidth={1.5}
-              />
-            </div>
-          </button>
-        </div>
-      </div>
-    </Transition>
-  );
-}
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 741cf4ec8..eaf0ba4ef 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -7,7 +7,6 @@ import ChatModal from "../../modals/chatModal";
 
 import { getBuildStatus } from "../../controllers/API";
 import { NodeType } from "../../types/flow";
-import FormTrigger from "./formTrigger";
 import FormModal from "../../modals/formModal";
 
 export default function Chat({ flow }: ChatType) {
@@ -66,15 +65,13 @@ export default function Chat({ flow }: ChatType) {
       {isBuilt ? (
         <div>
           <BuildTrigger
-            open={open || openForm}
+            open={open}
             flow={flow}
             setIsBuilt={setIsBuilt}
             isBuilt={isBuilt}
           />
-          <ChatModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
-          <FormModal key={flow.id + "form"} flow={flow} open={openForm} setOpen={setOpenForm} />
-          <ChatTrigger open={open || openForm} setOpen={setOpen} isBuilt={isBuilt} />
-          <FormTrigger open={open || openForm} setOpen={setOpenForm} isBuilt={isBuilt} />
+          <FormModal key={flow.id} flow={flow} open={open} setOpen={setOpen} />
+          <ChatTrigger open={open} setOpen={setOpen} isBuilt={isBuilt} />
         </div>
       ) : (
         <BuildTrigger
diff --git a/src/frontend/src/components/ui/badge.tsx b/src/frontend/src/components/ui/badge.tsx
index d8f6ca740..1516bf273 100644
--- a/src/frontend/src/components/ui/badge.tsx
+++ b/src/frontend/src/components/ui/badge.tsx
@@ -3,18 +3,25 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center border rounded-full px-2.5 h-6 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center border rounded-full px-2.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
           "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
+        gray:
+          "bg-border hover:bg-border/80 text-secondary-foreground",
         secondary:
           "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
         destructive:
           "bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
         outline: "text-foreground",
       },
+      size: {
+        sm: "h-4 text-xs",
+        md: "h-5 text-sm",
+        lg: "h-6 text-base",
+      }
     },
     defaultVariants: {
       variant: "default",
@@ -26,9 +33,9 @@ export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
+function Badge({ className, variant, size, ...props }: BadgeProps) {
   return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+    <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
   );
 }
 
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index cb77cd277..c03ab2003 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -2,12 +2,13 @@ import { classNames } from "../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import { TabsContext } from "../../../contexts/tabsContext";
 import { INPUT_STYLE } from "../../../constants";
-import { Lock, Send } from "lucide-react";
+import { Eraser, Lock, LucideSend, Send } from "lucide-react";
 
 export default function ChatInput({
   lockChat,
   chatValue,
   sendMessage,
+  clearChat,
   setChatValue,
   inputRef,
 }) {
@@ -58,16 +59,24 @@ export default function ChatInput({
         )}
         placeholder={"Send a message..."}
       />
-      <div className="absolute bottom-2.5 right-4">
-        <button disabled={lockChat} onClick={() => sendMessage()}>
+{/*       <div className="absolute bottom-2.5 right-16">
+        <button disabled={lockChat} onClick={() => clearChat()}>
+          <Eraser 
+            className={classNames("h-5 w-5", lockChat ? "text-gray-500 animate-pulse" : "text-gray-500 hover:text-gray-600")}
+            aria-hidden="true"
+          />
+        </button>
+      </div> */}
+      <div className="absolute bottom-2 right-4">
+        <button className={classNames("p-2 pl-1 pr-3 transition-all duration-300 rounded-md",chatValue == "" ? "text-gray-500 hover:text-gray-600" : " bg-indigo-600 text-background")} disabled={lockChat} onClick={() => sendMessage()}>
           {lockChat ? (
             <Lock
-              className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
+              className="h-5 w-5 text-gray-500 animate-pulse"
               aria-hidden="true"
             />
           ) : (
-            <Send
-              className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+            <LucideSend
+              className="h-5 w-5 rotate-[44deg] "
               aria-hidden="true"
             />
           )}
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 98e42d4fa..637870790 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -33,8 +33,8 @@ export default function ChatMessage({
         className={classNames(
           "w-full py-2 px-2 pl-4 flex",
           chat.isSend
-            ? " dark:bg-gray-900 "
-            : " dark:bg-gray-800"
+            ? " bg-border"
+            : " "
         )}
       >
         <div
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index f0e5e0f5c..0e6141bb3 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -1,10 +1,10 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import { FlowType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
-import { validateNodes } from "../../utils";
+import { classNames, validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
-import { TerminalSquare, MessageSquare, Variable } from "lucide-react";
+import { TerminalSquare, MessageSquare, Variable, Eraser } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
@@ -397,7 +397,7 @@ export default function FormModal({
               <Accordion type="single" collapsible className="w-full">
                 {tabsState[id.current].formKeysData.input_keys.map((i, k) => (
                   <AccordionItem key={k} value={i}>
-                    <AccordionTrigger>{i}</AccordionTrigger>
+                    <AccordionTrigger><Badge variant="gray" size="md">{i}</Badge></AccordionTrigger>
                     <AccordionContent>
                       <div className="p-1 flex flex-col gap-4">
                         <div className="flex items-center space-x-2">
@@ -425,16 +425,25 @@ export default function FormModal({
                 ))}
                 {tabsState[id.current].formKeysData.memory_keys.map((i, k) => (
                   <AccordionItem key={k} value={i}>
-                    <div className="flex flex-1 items-center justify-between py-4 font-medium transition-all group">
-                      <div className="group-hover:underline">{i}</div>
-                      <Badge>Memory Key</Badge>
+                    <div className="flex flex-1 items-center justify-between py-4 font-normal transition-all group text-muted-foreground text-sm">
+                      <div className="group-hover:underline"><Badge size="md" variant="gray">{i}</Badge></div>
+                      Used as Memory Key
                     </div>
                   </AccordionItem>
                 ))}
               </Accordion>
             </div>
-            <div className="w-full ">
-              <div className="flex flex-col rounded-md border bg-muted w-full h-full">
+            <div className="w-full">
+              <div className="flex flex-col rounded-md border bg-muted w-full h-full relative">
+              <div className="absolute right-3 top-3">
+
+              <button disabled={lockChat} onClick={() => clearChat()}>
+                <Eraser 
+                  className={classNames("h-5 w-5", lockChat ? "text-gray-500 animate-pulse" : "text-gray-500 hover:text-gray-600")}
+                  aria-hidden="true"
+                />
+              </button>
+              </div>
                 <div
                   ref={messagesRef}
                   className="w-full h-full flex-col flex items-center overflow-scroll scrollbar-hide"
@@ -475,6 +484,7 @@ export default function FormModal({
                     <ChatInput
                       chatValue={chatValue}
                       lockChat={lockChat}
+                      clearChat={clearChat}
                       sendMessage={sendMessage}
                       setChatValue={setChatValue}
                       inputRef={ref}