negative prompt under dropdown (#426)

- negative prompt now inside a dropdown under positive prompt

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/StylizeTab/Prompts.tsx

@@ -2,14 +2,16 @@ import { ChangeEvent, useContext, useEffect } from "react";
 import { Textarea } from "~/components";
 import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faRandom } from "@fortawesome/pro-solid-svg-icons";
 import {
-  RandomTextsPositive,
-  RandomTextsNegative,
-} from "~/pages/PageEnigma/constants/RandomTexts";
+  faChevronDown,
+  faChevronUp,
+  faRandom,
+} from "@fortawesome/pro-solid-svg-icons";
+import { RandomTextsPositive } from "~/pages/PageEnigma/constants/RandomTexts";
 import { ArtStyle } from "~/pages/PageEnigma/Editor/api_manager";
 import { promptsStore } from "~/pages/PageEnigma/signals";
 import { useSignals } from "@preact/signals-react/runtime";
+import { Transition } from "@headlessui/react";
 
 interface Props {
   selection: ArtStyle;
@@ -33,16 +35,6 @@ export const Prompts = ({ selection }: Props) => {
       editorEngine.positive_prompt = randomTextPositive;
       promptsStore.textBufferPositive.value = randomTextPositive;
     }
-
-    if (!promptsStore.isUserInputNegative.value) {
-      const randomIndexNegative = Math.floor(
-        Math.random() * RandomTextsNegative[selection].length,
-      );
-      const randomTextNegative =
-        RandomTextsNegative[selection][randomIndexNegative];
-      editorEngine.negative_prompt = randomTextNegative;
-      promptsStore.textBufferNegative.value = randomTextNegative;
-    }
   }, [selection, editorEngine]);
 
   const onChangeHandlerNegative = (event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -77,18 +69,6 @@ export const Prompts = ({ selection }: Props) => {
     promptsStore.textBufferPositive.value = randomText;
   };
 
-  const generateRandomTextNegative = () => {
-    const randomIndex = Math.floor(
-      Math.random() * RandomTextsNegative[selection].length,
-    );
-    const randomText = RandomTextsNegative[selection][randomIndex];
-    if (editorEngine !== null) {
-      editorEngine.negative_prompt = randomText;
-    }
-    promptsStore.isUserInputNegative.value = false;
-    promptsStore.textBufferNegative.value = randomText;
-  };
-
   return (
     <div className="flex flex-col gap-3 rounded-t-lg bg-ui-panel">
       <div className="relative w-full">
@@ -104,34 +84,54 @@ export const Prompts = ({ selection }: Props) => {
         />
         <div className="absolute right-0 top-[2px]">
           <button
-            className="flex items-center text-xs font-medium text-[#FC6B68] transition-colors duration-100 hover:text-[#FC6B68]/85 "
+            className="flex items-center text-xs font-medium text-brand-primary transition-colors duration-100 hover:text-brand-primary-400"
             onClick={generateRandomTextPositive}
           >
-            <FontAwesomeIcon icon={faRandom} className="me-2" />
+            <FontAwesomeIcon icon={faRandom} className="me-1.5" />
             Randomize
           </button>
         </div>
       </div>
-
-      <div className="relative w-full">
-        <Textarea
-          label="Negative Prompt"
-          className="w-full"
-          rows={1}
-          name="negative-prompt"
-          placeholder="Type here to filter out the things you don't want in the scene"
-          onChange={onChangeHandlerNegative}
-          value={promptsStore.textBufferNegative.value}
-        />
-        <div className="absolute right-0 top-[2px]">
-          <button
-            className="flex items-center text-xs font-medium text-[#FC6B68] transition-colors duration-100 hover:text-[#FC6B68]/85"
-            onClick={generateRandomTextNegative}
-          >
-            <FontAwesomeIcon icon={faRandom} className="me-2" />
-            Randomize
-          </button>
+      <Transition
+        show={promptsStore.showNegativePrompt.value === true}
+        enter="transition-all duration-200 ease-in-out"
+        enterFrom="opacity-0 max-h-0"
+        enterTo="opacity-100 max-h-36"
+        leave="transition-all duration-200 ease-in-out"
+        leaveFrom="opacity-100 max-h-36"
+        leaveTo="opacity-0 max-h-0"
+      >
+        <div className="relative w-full">
+          <Textarea
+            label="Negative Prompt"
+            className="w-full"
+            rows={2}
+            name="negative-prompt"
+            placeholder="Type here to filter out the things you don't want in the scene"
+            onChange={onChangeHandlerNegative}
+            value={promptsStore.textBufferNegative.value}
+          />
         </div>
+      </Transition>
+      <div>
+        <button
+          className="flex items-center text-xs font-medium text-brand-primary transition-colors duration-100 hover:text-brand-primary-400"
+          onClick={() =>
+            (promptsStore.showNegativePrompt.value =
+              !promptsStore.showNegativePrompt.value)
+          }
+        >
+          {promptsStore.showNegativePrompt.value === true ? "Hide" : "Show"}{" "}
+          Negative Prompt
+          <FontAwesomeIcon
+            icon={
+              promptsStore.showNegativePrompt.value === true
+                ? faChevronUp
+                : faChevronDown
+            }
+            className="ms-1.5"
+          />
+        </button>
       </div>
     </div>
   );

app/pages/PageEnigma/signals/stylizeTab.ts

@@ -5,10 +5,9 @@ export const promptsStore = {
   textBufferNegative: signal(""),
   isUserInputPositive: signal(false),
   isUserInputNegative: signal(false),
+  showNegativePrompt: signal(false),
 };
 
-export const showAdvancedOptions = signal(false);
-
 export const upscale = signal(false);
 export const faceDetail = signal(false);
 export const styleStrength = signal(1.0);