From e606762e7f18c205b6d92f29952376e65bdab6a0 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 26 Jan 2024 19:51:27 +0100
Subject: [PATCH] UI design of button and repeat function

---
 .../src/CustomNodes/GenericNode/index.tsx     |  38 ++--
 .../newChatView/chatInput/index.tsx           | 174 ++++++++++--------
 src/frontend/src/style/applies.css            |  14 +-
 src/frontend/src/utils/styleUtils.ts          |   2 +
 4 files changed, 124 insertions(+), 104 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 4f065e8a4..e5b128f56 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -4,6 +4,7 @@ import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
+import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import { priorityFields } from "../../constants/constants";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
@@ -320,8 +321,9 @@ export default function GenericNode({
               )}
             </div>
             {showNode && (
-              <div
-                className="round-button-div"
+              <Button
+                variant="outline"
+                className="h-9 px-1.5"
                 onClick={() => {
                   setNode(data.id, (old) => ({
                     ...old,
@@ -346,11 +348,12 @@ export default function GenericNode({
                     />
                   </div>
                 </Tooltip>
-              </div>
+              </Button>
             )}
             {showNode && (
-              <div
-                className="round-button-div"
+              <Button
+                variant="outline"
+                className="h-9 px-1.5"
                 onClick={() => buildFlow(data.id)}
               >
                 <div>
@@ -363,7 +366,7 @@ export default function GenericNode({
                           Build{" "}
                           <IconComponent
                             name="Zap"
-                            className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                            className=" h-5 fill-build-trigger stroke-build-trigger stroke-1"
                           />{" "}
                           flow to validate status.
                         </span>
@@ -381,34 +384,37 @@ export default function GenericNode({
                     }
                   >
                     <div className="generic-node-status-position flex items-center">
-                      <div
+                      <IconComponent
+                        name="Zap"
                         className={classNames(
                           validationStatus && validationStatus.valid
                             ? "green-status"
                             : "status-build-animation",
-                          "status-div"
+                          "h-5 stroke-1"
                         )}
-                      ></div>
-                      <div
+                      />
+                      <IconComponent
+                        name="Zap"
                         className={classNames(
                           validationStatus && !validationStatus.valid
                             ? "red-status"
                             : "status-build-animation",
-                          "status-div"
+                          "h-5 stroke-1"
                         )}
-                      ></div>
-                      <div
+                      />
+                      <IconComponent
+                        name="Zap"
                         className={classNames(
                           !validationStatus || isBuilding
                             ? "yellow-status"
                             : "status-build-animation",
-                          "status-div"
+                          "h-5 stroke-1"
                         )}
-                      ></div>
+                      />
                     </div>
                   </Tooltip>
                 </div>
-              </div>
+              </Button>
             )}
           </div>
         </div>
diff --git a/src/frontend/src/components/newChatView/chatInput/index.tsx b/src/frontend/src/components/newChatView/chatInput/index.tsx
index 2a4d39f4b..777fb5d79 100644
--- a/src/frontend/src/components/newChatView/chatInput/index.tsx
+++ b/src/frontend/src/components/newChatView/chatInput/index.tsx
@@ -3,6 +3,9 @@ import IconComponent from "../../../components/genericIconComponent";
 import { Textarea } from "../../../components/ui/textarea";
 import { chatInputType } from "../../../types/components";
 import { classNames } from "../../../utils/utils";
+import { Button } from "../../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover";
+import { Input } from "../../ui/input";
 
 export default function ChatInput({
   lockChat,
@@ -12,7 +15,7 @@ export default function ChatInput({
   inputRef,
   noInput,
 }: chatInputType): JSX.Element {
-  const [repeate, setRepeate] = useState(1);
+  const [repeat, setRepeat] = useState(1);
   useEffect(() => {
     if (!lockChat && inputRef.current) {
       inputRef.current.focus();
@@ -22,9 +25,9 @@ export default function ChatInput({
   function handleChange(value: number) {
     console.log(value);
     if (value > 0) {
-      setRepeate(value);
+      setRepeat(value);
     } else {
-      setRepeate(1);
+      setRepeat(1);
     }
   }
 
@@ -36,90 +39,99 @@ export default function ChatInput({
   }, [chatValue]);
 
   return (
-    <div className="relative">
-      <div className="flex flex-col">
-        <span className="text-xs">repeate</span>
-        <input
+    <div className="flex w-full gap-2">
+      <div className="relative w-full">
+        <Textarea
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !lockChat && !event.shiftKey) {
+              sendMessage(repeat);
+            }
+          }}
+          rows={1}
+          ref={inputRef}
+          disabled={lockChat || noInput}
+          style={{
+            resize: "none",
+            bottom: `${inputRef?.current?.scrollHeight}px`,
+            maxHeight: "150px",
+            overflow: `${
+              inputRef.current && inputRef.current.scrollHeight > 150
+                ? "auto"
+                : "hidden"
+            }`,
+          }}
+          value={lockChat ? "Thinking..." : chatValue}
+          onChange={(event): void => {
+            setChatValue(event.target.value);
+          }}
+          className={classNames(
+            lockChat
+              ? " form-modal-lock-true bg-input"
+              : noInput
+              ? "form-modal-no-input bg-input"
+              : " form-modal-lock-false bg-background",
+
+            "form-modal-lockchat"
+          )}
+          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",
+              noInput
+                ? "bg-high-indigo text-background"
+                : chatValue === ""
+                ? "text-primary"
+                : "bg-chat-send text-background"
+            )}
+            disabled={lockChat}
+            onClick={(): void => sendMessage()}
+          >
+            {lockChat ? (
+              <IconComponent
+                name="Lock"
+                className="form-modal-lock-icon"
+                aria-hidden="true"
+              />
+            ) : noInput ? (
+              <IconComponent
+                name="Sparkles"
+                className="form-modal-play-icon"
+                aria-hidden="true"
+              />
+            ) : (
+              <IconComponent
+                name="LucideSend"
+                className="form-modal-send-icon "
+                aria-hidden="true"
+              />
+            )}
+          </button>
+        </div>
+      </div>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="primary" className="h-13 px-4">
+            <IconComponent name="Repeat" className="" aria-hidden="true" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-fit"><div className="flex flex-col gap-2 items-center justify-center">
+        <span className="text-sm">Repetitions: </span>
+        <Input
           onChange={(e) => {
             handleChange(parseInt(e.target.value));
           }}
-          className="bg-background"
+          className="w-16"
           type="number"
           min={0}
         />
-      </div>
-      <Textarea
-        onKeyDown={(event) => {
-          if (event.key === "Enter" && !lockChat && !event.shiftKey) {
-            sendMessage(repeate);
-          }
-        }}
-        rows={1}
-        ref={inputRef}
-        disabled={lockChat || noInput}
-        style={{
-          resize: "none",
-          bottom: `${inputRef?.current?.scrollHeight}px`,
-          maxHeight: "150px",
-          overflow: `${
-            inputRef.current && inputRef.current.scrollHeight > 150
-              ? "auto"
-              : "hidden"
-          }`,
-        }}
-        value={lockChat ? "Thinking..." : chatValue}
-        onChange={(event): void => {
-          setChatValue(event.target.value);
-        }}
-        className={classNames(
-          lockChat
-            ? " form-modal-lock-true bg-input"
-            : noInput
-            ? "form-modal-no-input bg-input"
-            : " form-modal-lock-false bg-background",
-
-          "form-modal-lockchat"
-        )}
-        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",
-            noInput
-              ? "bg-high-indigo text-background"
-              : chatValue === ""
-              ? "text-primary"
-              : "bg-chat-send text-background"
-          )}
-          disabled={lockChat}
-          onClick={(): void => sendMessage()}
-        >
-          {lockChat ? (
-            <IconComponent
-              name="Lock"
-              className="form-modal-lock-icon"
-              aria-hidden="true"
-            />
-          ) : noInput ? (
-            <IconComponent
-              name="Sparkles"
-              className="form-modal-play-icon"
-              aria-hidden="true"
-            />
-          ) : (
-            <IconComponent
-              name="LucideSend"
-              className="form-modal-send-icon "
-              aria-hidden="true"
-            />
-          )}
-        </button>
-      </div>
+      </div></PopoverContent>
+      </Popover>
     </div>
   );
 }
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 908298c13..abaf9dc78 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -267,7 +267,7 @@
     @apply relative flex flex-col justify-center bg-background;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center gap-4 border-b bg-muted p-4;
+    @apply flex w-full items-center gap-2 border-b bg-muted p-4;
   }
   .generic-node-title-arrangement {
     @apply flex-max-width items-center truncate;
@@ -283,26 +283,26 @@
   }
 
   .generic-node-status-position {
-    @apply relative top-[3px] h-5 w-5;
+    @apply h-5 w-5;
   }
 
   .generic-node-status-animation {
     @apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0;
   }
   .generic-node-status {
-    @apply h-4 w-4 rounded-full opacity-100;
+    @apply opacity-100;
   }
   .green-status {
-    @apply generic-node-status bg-status-green;
+    @apply generic-node-status text-status-green fill-status-green;
   }
   .red-status {
-    @apply generic-node-status bg-status-red;
+    @apply generic-node-status text-status-red fill-status-red;
   }
   .yellow-status {
-    @apply generic-node-status bg-status-yellow;
+    @apply generic-node-status text-status-yellow fill-status-yellow;
   }
   .status-build-animation {
-    @apply hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0;
+    @apply hidden animate-spin text-ring opacity-0;
   }
   .status-div {
     @apply absolute w-4 duration-200 ease-in-out;
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 2ebb06509..23573129c 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -72,6 +72,7 @@ import {
   Plus,
   Redo,
   RefreshCcw,
+  Repeat,
   Rocket,
   Save,
   SaveAll,
@@ -385,5 +386,6 @@ export const nodeIconsLucide: iconsType = {
   RefreshCcw,
   Combine,
   TerminalIcon,
+  Repeat,
   io: ArrowDownUp,
 };