From f456795fb17feb96ab32b81ccb9be4ac34ff6056 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Fri, 4 Apr 2025 16:35:17 +0700
Subject: [PATCH] reusable toggle button for system prompt (#477)

---
 .../reusable/ToggleButton/ToggleButton.tsx    | 34 ++++++++++++
 .../components/reusable/ToggleButton/index.ts |  1 +
 .../app/components/reusable/Tooltip.tsx       |  6 +-
 .../editor3d/app/components/reusable/index.ts |  1 +
 .../PageEnigma/comps/PromptBox/PromptBox.tsx  | 55 +++++++++++++++----
 5 files changed, 84 insertions(+), 13 deletions(-)
 create mode 100644 frontend/editor3d/app/components/reusable/ToggleButton/ToggleButton.tsx
 create mode 100644 frontend/editor3d/app/components/reusable/ToggleButton/index.ts

diff --git a/frontend/editor3d/app/components/reusable/ToggleButton/ToggleButton.tsx b/frontend/editor3d/app/components/reusable/ToggleButton/ToggleButton.tsx
new file mode 100644
index 0000000000..36c83170e5
--- /dev/null
+++ b/frontend/editor3d/app/components/reusable/ToggleButton/ToggleButton.tsx
@@ -0,0 +1,34 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { Button } from "~/components";
+import { twMerge } from "tailwind-merge";
+
+interface ToggleButtonProps {
+  isActive: boolean;
+  icon?: IconDefinition;
+  activeIcon?: IconDefinition;
+  onClick: () => void;
+  className?: string;
+}
+
+export const ToggleButton = ({
+  isActive,
+  icon,
+  activeIcon,
+  onClick,
+  className,
+}: ToggleButtonProps) => {
+  return (
+    <Button
+      className={twMerge(
+        "flex h-9 w-9 items-center border-2 border-transparent text-sm text-white backdrop-blur-lg transition-all",
+        isActive
+          ? "border-white/20 bg-brand-primary/40 hover:border-white/30 hover:bg-brand-primary/40"
+          : "bg-[#5F5F68]/60 hover:bg-[#5F5F68]/90",
+        className,
+      )}
+      variant="secondary"
+      icon={isActive && activeIcon ? activeIcon : icon}
+      onClick={onClick}
+    />
+  );
+};
diff --git a/frontend/editor3d/app/components/reusable/ToggleButton/index.ts b/frontend/editor3d/app/components/reusable/ToggleButton/index.ts
new file mode 100644
index 0000000000..26d3bd6600
--- /dev/null
+++ b/frontend/editor3d/app/components/reusable/ToggleButton/index.ts
@@ -0,0 +1 @@
+export * from "./ToggleButton";
diff --git a/frontend/editor3d/app/components/reusable/Tooltip.tsx b/frontend/editor3d/app/components/reusable/Tooltip.tsx
index 66a42166f6..15bc2ead7c 100644
--- a/frontend/editor3d/app/components/reusable/Tooltip.tsx
+++ b/frontend/editor3d/app/components/reusable/Tooltip.tsx
@@ -7,6 +7,7 @@ interface TooltipProps {
   content: React.ReactNode;
   position: "top" | "bottom" | "left" | "right";
   className?: string;
+  delay?: number;
 }
 
 export const Tooltip = ({
@@ -14,6 +15,7 @@ export const Tooltip = ({
   content,
   position,
   className,
+  delay = 300,
 }: TooltipProps) => {
   const [isShowing, setIsShowing] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -63,7 +65,7 @@ export const Tooltip = ({
       {children}
       <Transition
         show={isShowing}
-        enter="transition ease-out duration-200 delay-300"
+        enter={`transition ease-out duration-200 delay-${delay}`}
         enterFrom="opacity-0"
         enterTo="opacity-100"
         leave="transition ease-in duration-150"
@@ -74,7 +76,7 @@ export const Tooltip = ({
           ref={tooltipRef}
           style={getStyleForPosition()}
           className={twMerge(
-            "pointer-events-none absolute z-10 w-max rounded-lg bg-ui-controls px-2.5 py-1.5 text-sm font-medium text-white shadow-xl",
+            "pointer-events-none absolute z-10 w-max rounded-lg bg-[#5F5F68] px-2.5 py-1.5 text-sm font-medium text-white shadow-xl",
             className ? className : "",
           )}
         >
diff --git a/frontend/editor3d/app/components/reusable/index.ts b/frontend/editor3d/app/components/reusable/index.ts
index fd8bea9e77..7f2eac6bd7 100644
--- a/frontend/editor3d/app/components/reusable/index.ts
+++ b/frontend/editor3d/app/components/reusable/index.ts
@@ -24,6 +24,7 @@ export * from "./Select";
 export * from "./Slider";
 export * from "./Tabs";
 export * from "./Textarea";
+export * from "./ToggleButton";
 export * from "./Tooltip";
 export * from "./TransitionDialogue";
 export * from "./Typography";
diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
index 413dcfad31..c30b697bcb 100644
--- a/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
+++ b/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
@@ -13,6 +13,10 @@ import {
   faDownload,
   faSpinnerThird,
   faTimes,
+  faCheck,
+  faSpellCheck,
+  faMessageCheck,
+  faMessageXmark,
 } from "@fortawesome/pro-solid-svg-icons";
 import {
   faRectangleWide,
@@ -23,9 +27,14 @@ import {
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { PopoverItem, PopoverMenu } from "~/components/reusable/Popover";
-import { Button } from "~/components";
+import { Button, ToggleButton, Tooltip } from "~/components";
 import { CameraAspectRatio } from "~/pages/PageEnigma/enums";
-import { cameraAspectRatio, disableHotkeyInput, DomLevels, enableHotkeyInput } from "~/pages/PageEnigma/signals";
+import {
+  cameraAspectRatio,
+  disableHotkeyInput,
+  DomLevels,
+  enableHotkeyInput,
+} from "~/pages/PageEnigma/signals";
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
@@ -45,6 +54,7 @@ export const PromptBox = () => {
   const editorEngine = useContext(EngineContext);
   const [prompt, setPrompt] = useState("");
   const [isEnqueueing, setisEnqueueing] = useState(false);
+  const [useSystemPrompt, setUseSystemPrompt] = useState(true);
   const [referenceImages, setReferenceImages] = useState<ReferenceImage[]>([]);
   const [aspectRatioList, setAspectRatioList] = useState<PopoverItem[]>([
     {
@@ -384,11 +394,11 @@ export const PromptBox = () => {
             onPaste={handlePaste}
             onKeyDown={handleKeyDown}
             onFocus={() => {
-              console.log("disabling hotkeys")
+              console.log("disabling hotkeys");
               disableHotkeyInput(DomLevels.INPUT);
             }}
             onBlur={() => {
-              console.log("enabling hotkeys")
+              console.log("enabling hotkeys");
               enableHotkeyInput(DomLevels.INPUT);
             }}
           />
@@ -420,16 +430,39 @@ export const PromptBox = () => {
               mode="toggle"
               panelTitle="Camera"
             />
+            <Tooltip
+              content={
+                useSystemPrompt
+                  ? "Use system prompt: ON"
+                  : "Use system prompt: OFF"
+              }
+              position="top"
+              className="z-50"
+              delay={100}
+            >
+              <ToggleButton
+                isActive={useSystemPrompt}
+                icon={faMessageXmark}
+                activeIcon={faMessageCheck}
+                onClick={() => setUseSystemPrompt(!useSystemPrompt)}
+              />
+            </Tooltip>
           </div>
           <div className="flex items-center gap-2">
-            <Button
-              className="flex items-center border-none bg-[#5F5F68]/60 px-3 text-sm text-white backdrop-blur-lg hover:bg-[#5F5F68]/90"
-              variant="secondary"
-              icon={faDownload}
-              onClick={handleDownloadFrame}
+            <Tooltip
+              content="Download frame"
+              position="top"
+              className="z-50"
+              delay={100}
             >
-              Download frame
-            </Button>
+              <Button
+                className="flex h-9 items-center border-none bg-[#5F5F68]/60 px-3 text-sm text-white backdrop-blur-lg hover:bg-[#5F5F68]/90"
+                variant="secondary"
+                icon={faDownload}
+                onClick={handleDownloadFrame}
+              />
+            </Tooltip>
+
             <Button
               className="flex items-center border-none bg-[#5F5F68]/60 px-3 text-sm text-white backdrop-blur-lg hover:bg-[#5F5F68]/90"
               variant="secondary"