Merge dev into fix-hardCoded-colors

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -24,7 +24,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
   return (
     <div
       ref={componentRef}
-      className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-background px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+      className="z-10 flex h-[500px] w-[400px] flex-col overflow-hidden rounded-md bg-muted px-2 py-3 pb-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     >
       <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
         Notifications

src/frontend/src/components/chatComponent/index.tsx

@@ -72,7 +72,7 @@ export default function Chat({ flow }: ChatType) {
     }
 
     prevNodesRef.current = currentNodes;
-  }, [tabsState, flow.id, nodes]);
+  }, [tabsState, flow.id]);
 
   return (
     <>

src/frontend/src/components/headerComponent/index.tsx

@@ -121,7 +121,7 @@ export default function Header() {
                 <>
                   <div
                     className="absolute z-10"
-                    style={{ top: top + 34, left: left - AlertWidth }}
+                    style={{ top: top + 40, left: left - AlertWidth }}
                   >
                     <AlertDropdown />
                   </div>

src/frontend/src/components/ui/separator.tsx

@@ -17,7 +17,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border",
+        "shrink-0 bg-ring/40",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       )}

src/frontend/src/constants.tsx

@@ -551,10 +551,3 @@ export const NOUNS: string[] = [
  *
  */
 export const USER_PROJECTS_HEADER = "My Collection";
-/**
- * CSS for highlight HTML
- * @constant
- *
- */
-export const HIGHLIGHT_CSS =
-  "block pl-3 pr-14 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden max-w-[75vw]";

src/frontend/src/index.css

@@ -62,7 +62,7 @@
 
 .dark {
   --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
-  --foreground: 213 31% 85%; /* hsl(213 31% 91%) */
+  --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
 
   --muted: 223 27% 11%; /* hsl(223 27% 11%) */
   --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */
@@ -76,13 +76,13 @@
   --border: 216 24% 17%; /* hsl(216 34% 17%) */
   --input: 216 24% 17%; /* hsl(216 34% 17%) */
 
-  --primary: 210 20% 80%; /* hsl(210 40% 98%) */
+  --primary: 210 20% 80%; /* hsl(210 20% 80%) */
   --primary-foreground: 222.2 27.4% 1.2%; /* hsl(222 47% 1%) */
 
-  --secondary: 222.2 47.4% 11.2%; /* hsl(222 47% 11%) */
+  --secondary: 222.2 37.4% 7.2%; /* hsl(222 47% 11%) */
-  --secondary-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --secondary-foreground: 210 40% 80%; /* hsl(210 40% 80%) */
 
-  --accent: 216 24% 17%; /* hsl(216 34% 17%) */
+  --accent: 216 24% 20%; /* hsl(216 34% 17%) */
   --accent-foreground: 210 30% 98%; /* hsl(210 40% 98%) */
 
   --destructive: 0 63% 31%; /* hsl(0 63% 31%) */
@@ -93,7 +93,7 @@
   --radius: 0.5rem;
 
   --round-btn-shadow: #00000063;
-  
+
   --success-background: #022c22;
   --success-foreground: #ecfdf5;
 
@@ -925,13 +925,16 @@ The cursor: default; property value restores the browser's default cursor style
   }
 
   .form-modal-lock-true {
-    @apply bg-input text-black
+    @apply bg-input text-primary
   }
   .form-modal-no-input {
-    @apply bg-input text-center text-black dark:bg-gray-700 dark:text-gray-300
+    @apply bg-input text-center text-primary dark:bg-gray-700 dark:text-gray-300
   }
   .form-modal-lock-false {
-    @apply bg-white text-black
+    @apply bg-white text-primary
+  }
+  .code-highlight{
+    @apply block px-3 py-2 w-full h-full text-sm outline-0 border-0 break-all overflow-y-hidden
   }
   .form-modal-lockchat {
     @apply form-input focus:ring-ring focus:border-ring block w-full rounded-md border-border p-4 pr-16 custom-scroll sm:text-sm
@@ -1084,5 +1087,9 @@ The cursor: default; property value restores the browser's default cursor style
     @apply font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
   }
 
+  .chat-message-highlight {
+    @apply px-0.5 rounded-md bg-indigo-100 dark:bg-indigo-900
+  }
+
 
 }

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

@@ -150,8 +150,8 @@ export default function ChatMessage({
           </div>
         </div>
       ) : (
-        <div className="flex flex-col">
+        <div>
-          {template && (
+          {template ? (
             <>
               <button
                 className="form-modal-initial-prompt-btn"
@@ -167,40 +167,41 @@ export default function ChatMessage({
                 />
               </button>
               <span className="prose inline-block break-words text-primary dark:prose-invert">
-                {promptOpen &&
+                {promptOpen
-                  template?.split("\n")?.map((line, index) => {
+                  ? template?.split("\n")?.map((line, index) => {
-                    const regex = /{([^}]+)}/g;
+                      const regex = /{([^}]+)}/g;
-                    let match;
+                      let match;
-                    let parts = [];
+                      let parts = [];
-                    let lastIndex = 0;
+                      let lastIndex = 0;
-                    while ((match = regex.exec(line)) !== null) {
+                      while ((match = regex.exec(line)) !== null) {
-                      // Push text up to the match
+                        // Push text up to the match
-                      if (match.index !== lastIndex) {
+                        if (match.index !== lastIndex) {
-                        parts.push(line.substring(lastIndex, match.index));
+                          parts.push(line.substring(lastIndex, match.index));
-                      }
+                        }
-                      // Push div with matched text
+                        // Push div with matched text
-                      if (chat.message[match[1]]) {
+                        if (chat.message[match[1]]) {
-                        parts.push(
+                          parts.push(
-                          <span className="my-1 rounded-md bg-low-indigo">
+                            <span className="chat-message-highlight">
-                            {chat.message[match[1]]}
+                              {chat.message[match[1]]}
-                          </span>
+                            </span>
-                        );
+                          );
-                      }
+                        }
 
-                      // Update last index
+                        // Update last index
-                      lastIndex = regex.lastIndex;
+                        lastIndex = regex.lastIndex;
-                    }
+                      }
-                    // Push text after the last match
+                      // Push text after the last match
-                    if (lastIndex !== line.length) {
+                      if (lastIndex !== line.length) {
-                      parts.push(line.substring(lastIndex));
+                        parts.push(line.substring(lastIndex));
-                    }
+                      }
-                    return <p>{parts}</p>;
+                      return <p>{parts}</p>;
-                  })}
+                    })
+                  : chat.message[chat.chatKey]}
               </span>
             </>
+          ) : (
+            <span>{chat.message[chat.chatKey]}</span>
           )}
-          <br />
-          <span>{chat.message[chat.chatKey]}</span>
         </div>
       )}
     </div>

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

@@ -50,7 +50,7 @@ export default function FormModal({
       const handleKeys = formKeysData.handle_keys;
 
       const keyToUse = Object.keys(inputKeys).find(
-        (k) => !handleKeys.some((j) => j === k)
+        (k) => !handleKeys.some((j) => j === k) && inputKeys[k] === ""
       );
 
       return inputKeys[keyToUse];
@@ -73,7 +73,9 @@ export default function FormModal({
   const tabsStateFlowIdFormKeysData = tabsStateFlowId.formKeysData;
   const [chatKey, setChatKey] = useState(
     Object.keys(tabsState[flow.id].formKeysData.input_keys).find(
-      (k) => !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k)
+      (k) =>
+        !tabsState[flow.id].formKeysData.handle_keys.some((j) => j === k) &&
+        tabsState[flow.id].formKeysData.input_keys[k] === ""
     )
   );
 
@@ -381,6 +383,9 @@ export default function FormModal({
     if (checked === true) {
       setChatKey(i);
       setChatValue(tabsState[flow.id].formKeysData.input_keys[i]);
+    } else {
+      setChatKey(null);
+      setChatValue("");
     }
   }
   return (

src/frontend/src/modals/genericModal/index.tsx

@@ -4,21 +4,9 @@ import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
-import {
+import { DialogTitle } from "../../components/ui/dialog";
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import {
+import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
-  HIGHLIGHT_CSS,
-  PROMPT_DIALOG_SUBTITLE,
-  TEXT_DIALOG_SUBTITLE,
-} from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -32,6 +20,7 @@ import {
   regexHighlight,
   varHighlightHTML,
 } from "../../utils";
+import BaseModal from "../baseModal";
 
 export default function GenericModal({
   field_name = "",
@@ -119,7 +108,7 @@ export default function GenericModal({
   const TextAreaContentView = () => {
     return (
       <SanitizedHTMLWrapper
-        className={HIGHLIGHT_CSS}
+        className="code-highlight"
         content={coloredContent}
         onClick={() => {
           setIsEdit(true);
@@ -166,133 +155,138 @@ export default function GenericModal({
   }
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
+    <BaseModal open={true} setOpen={setModalOpen}>
-      <DialogTrigger></DialogTrigger>
+      <BaseModal.Header
-      <DialogContent className="min-w-[80vw] gap-2">
+        description={(() => {
-        <DialogHeader>
+          switch (myModalTitle) {
-          <DialogTitle className="flex items-center">
+            case "Edit Text":
-            <span className="pr-2">{myModalTitle}</span>
+              return TEXT_DIALOG_SUBTITLE;
-            <FileText
-              strokeWidth={1.5}
-              className="h-6 w-6 pl-1 text-primary "
-              aria-hidden="true"
-            />
-          </DialogTitle>
-          <DialogDescription>
-            {(() => {
-              switch (myModalTitle) {
-                case "Edit Text":
-                  return TEXT_DIALOG_SUBTITLE;
 
-                case "Edit Prompt":
+            case "Edit Prompt":
-                  return PROMPT_DIALOG_SUBTITLE;
+              return PROMPT_DIALOG_SUBTITLE;
 
-                default:
-                  return null;
-              }
-            })()}
-          </DialogDescription>
-        </DialogHeader>
 
-        <div
+            default:
-          className={classNames(
+              return null;
-            !isEdit ? "rounded-lg border" : "",
+          }
-            "flex h-[55vh] w-full"
+        })()}
-          )}
+      >
-        >
+        <DialogTitle className="flex items-center">
-          {type === TypeModal.PROMPT && isEdit ? (
+          <span className="pr-2">{myModalTitle}</span>
-            <Textarea
+          <FileText
-              ref={ref}
+            strokeWidth={1.5}
-              className="form-input h-full w-full rounded-lg border-border custom-scroll focus-visible:ring-1"
+            className="h-6 w-6 pl-1 text-primary "
-              value={inputValue}
+            aria-hidden="true"
-              onBlur={() => {
+          />
-                setIsEdit(false);
+        </DialogTitle>
-              }}
+      </BaseModal.Header>
-              autoFocus
+      <BaseModal.Content>
-              onChange={(e) => {
+        <div className="flex h-full flex-col">
-                setInputValue(e.target.value);
+          <div
-                checkVariables(e.target.value);
+            className={classNames(
-              }}
+              !isEdit ? "rounded-lg border" : "",
-              placeholder="Type message here."
+              "flex h-full w-full"
-            />
+            )}
-          ) : type === TypeModal.PROMPT && !isEdit ? (
-            <TextAreaContentView />
-          ) : type !== TypeModal.PROMPT ? (
-            <Textarea
-              ref={ref}
-              className="form-input h-full w-full rounded-lg border-border focus-visible:ring-1"
-              value={inputValue}
-              onChange={(e) => {
-                setInputValue(e.target.value);
-              }}
-              placeholder="Type message here."
-            />
-          ) : (
-            <></>
-          )}
-        </div>
-
-        {type === TypeModal.PROMPT && (
-          <>
-            <div className="sm:6/6 mr-28 mt-3 h-[60px] overflow-y-auto custom-scroll">
-              <div className="flex flex-wrap items-center">
-                <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
-                <span className="text-md font-semibold text-primary">
-                  Input Variables:
-                </span>
-
-                {wordsHighlight.map((word, index) => (
-                  <ShadTooltip
-                    key={getRandomKeyByssmm() + index}
-                    content={word.replace(/[{}]/g, "")}
-                    asChild={false}
-                  >
-                    <Badge
-                      key={index}
-                      variant="gray"
-                      size="md"
-                      className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
-                    >
-                      <div className="relative bottom-[1px]">
-                        <span>
-                          {word.replace(/[{}]/g, "").length > 59
-                            ? word.replace(/[{}]/g, "").slice(0, 56) + "..."
-                            : word.replace(/[{}]/g, "")}
-                        </span>
-                      </div>
-                    </Badge>
-                  </ShadTooltip>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        <DialogFooter>
-          <Button
-            className="mt-3"
-            onClick={() => {
-              switch (myModalType) {
-                case 1:
-                  setValue(inputValue);
-                  setModalOpen(false);
-                  break;
-                case 2:
-                  !inputValue || inputValue === ""
-                    ? setModalOpen(false)
-                    : validatePrompt(false);
-                  break;
-
-                default:
-                  break;
-              }
-            }}
-            type="submit"
           >
-            {myButtonText}
+            {type === TypeModal.PROMPT && isEdit ? (
-          </Button>
+              <Textarea
-        </DialogFooter>
+                ref={ref}
-      </DialogContent>
+                className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
-    </Dialog>
+                value={inputValue}
+                onBlur={() => {
+                  setIsEdit(false);
+                }}
+                autoFocus
+                onChange={(e) => {
+                  setInputValue(e.target.value);
+                  checkVariables(e.target.value);
+                }}
+                placeholder="Type message here."
+              />
+            ) : type === TypeModal.PROMPT && !isEdit ? (
+              <TextAreaContentView />
+            ) : type !== TypeModal.PROMPT ? (
+              <Textarea
+                ref={ref}
+                className="form-input h-full w-full rounded-lg focus-visible:ring-1"
+                value={inputValue}
+                onChange={(e) => {
+                  setInputValue(e.target.value);
+                }}
+                placeholder="Type message here."
+              />
+            ) : (
+              <></>
+            )}
+          </div>
+
+          <div className="mt-6 flex h-fit w-full items-end justify-between">
+            <div className="mb-auto flex-1">
+              {type === TypeModal.PROMPT && (
+                <div className=" mr-2">
+                  <div className="max-h-20 overflow-y-auto custom-scroll">
+                    <div className="flex flex-wrap items-center">
+                      <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                      <span className="text-md font-semibold text-primary">
+                        Prompt Variables:
+                      </span>
+
+                      {wordsHighlight.map((word, index) => (
+                        <ShadTooltip
+                          key={getRandomKeyByssmm() + index}
+                          content={word.replace(/[{}]/g, "")}
+                          asChild={false}
+                        >
+                          <Badge
+                            key={index}
+                            variant="gray"
+                            size="md"
+                            className="m-1 max-w-[40vw] cursor-default truncate p-2.5 text-sm"
+                          >
+                            <div className="relative bottom-[1px]">
+                              <span>
+                                {word.replace(/[{}]/g, "").length > 59
+                                  ? word.replace(/[{}]/g, "").slice(0, 56) +
+                                    "..."
+                                  : word.replace(/[{}]/g, "")}
+                              </span>
+                            </div>
+                          </Badge>
+                        </ShadTooltip>
+                      ))}
+                    </div>
+                  </div>
+                  <span className="mt-1 text-xs text-muted-foreground">
+                    Prompt variables can be created with any chosen name inside
+                    curly brackets, e.g. {"{variable_name}"}
+                  </span>
+                </div>
+              )}
+            </div>
+            <Button
+              onClick={() => {
+                switch (myModalType) {
+                  case 1:
+                    setValue(inputValue);
+                    setModalOpen(false);
+                    break;
+                  case 2:
+                    !inputValue || inputValue === ""
+                      ? setModalOpen(false)
+                      : validatePrompt(false);
+                    break;
+
+                  default:
+                    break;
+                }
+              }}
+              type="submit"
+            >
+              {myButtonText}
+            </Button>
+          </div>
+        </div>
+      </BaseModal.Content>
+    </BaseModal>
   );
 }

src/frontend/src/utils.ts

@@ -1038,10 +1038,6 @@ export const INVALID_CHARACTERS = [
 export const regexHighlight = /\{([^}]+)\}/g;
 
 export const varHighlightHTML = ({ name }: IVarHighlightType) => {
-  const html = `<div class="inline-flex items-center justify-center rounded-md font-medium text-primary bg-muted pb-1">
+  const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
-  <span class='opacity-60 pl-1'>{</span>
-  <span>${name}</span>
-  <span class='opacity-60 pr-1'>}</span>
-</div>`;
   return html;
 };