Merge dev into fix-hardCoded-colors

2023-07-12 15:53:02 -03:00 · 2023-07-12 15:53:02 -03:00 · d6da84a623
commit d6da84a623
parent db2a746df7 3b41e189d3
10 changed files with 194 additions and 198 deletions
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/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
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/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 (
    <>
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/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>
--- a/src/frontend/src/components/ui/separator.tsx
+++ b/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
      )}
--- a/src/frontend/src/constants.tsx
+++ b/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]";
--- a/src/frontend/src/index.css
+++ b/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-foreground: 210 40% 98%; /* hsl(210 40% 98%) */
+  --secondary: 222.2 37.4% 7.2%; /* hsl(222 47% 11%) */
+  --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
+  }
+

 }
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@ -150,8 +150,8 @@ export default function ChatMessage({
          </div>
        </div>
      ) : (
-        <div className="flex flex-col">
-          {template && (
+        <div>
+          {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 &&
-                  template?.split("\n")?.map((line, index) => {
-                    const regex = /{([^}]+)}/g;
-                    let match;
-                    let parts = [];
-                    let lastIndex = 0;
-                    while ((match = regex.exec(line)) !== null) {
-                      // Push text up to the match
-                      if (match.index !== lastIndex) {
-                        parts.push(line.substring(lastIndex, match.index));
-                      }
-                      // Push div with matched text
-                      if (chat.message[match[1]]) {
-                        parts.push(
-                          <span className="my-1 rounded-md bg-low-indigo">
-                            {chat.message[match[1]]}
-                          </span>
-                        );
-                      }
+                {promptOpen
+                  ? template?.split("\n")?.map((line, index) => {
+                      const regex = /{([^}]+)}/g;
+                      let match;
+                      let parts = [];
+                      let lastIndex = 0;
+                      while ((match = regex.exec(line)) !== null) {
+                        // Push text up to the match
+                        if (match.index !== lastIndex) {
+                          parts.push(line.substring(lastIndex, match.index));
+                        }
+                        // Push div with matched text
+                        if (chat.message[match[1]]) {
+                          parts.push(
+                            <span className="chat-message-highlight">
+                              {chat.message[match[1]]}
+                            </span>
+                          );
+                        }

-                      // Update last index
-                      lastIndex = regex.lastIndex;
-                    }
-                    // Push text after the last match
-                    if (lastIndex !== line.length) {
-                      parts.push(line.substring(lastIndex));
-                    }
-                    return <p>{parts}</p>;
-                  })}
+                        // Update last index
+                        lastIndex = regex.lastIndex;
+                      }
+                      // Push text after the last match
+                      if (lastIndex !== line.length) {
+                        parts.push(line.substring(lastIndex));
+                      }
+                      return <p>{parts}</p>;
+                    })
+                  : chat.message[chat.chatKey]}
              </span>
            </>
+          ) : (
+            <span>{chat.message[chat.chatKey]}</span>
          )}
-          <br />
-          <span>{chat.message[chat.chatKey]}</span>
        </div>
      )}
    </div>
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/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 (
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/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 {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
+import { DialogTitle } from "../../components/ui/dialog";
 import { Textarea } from "../../components/ui/textarea";
-import {
-  HIGHLIGHT_CSS,
-  PROMPT_DIALOG_SUBTITLE,
-  TEXT_DIALOG_SUBTITLE,
-} from "../../constants";
+import { 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}>
-      <DialogTrigger></DialogTrigger>
-      <DialogContent className="min-w-[80vw] gap-2">
-        <DialogHeader>
-          <DialogTitle className="flex items-center">
-            <span className="pr-2">{myModalTitle}</span>
-            <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;
+    <BaseModal open={true} setOpen={setModalOpen}>
+      <BaseModal.Header
+        description={(() => {
+          switch (myModalTitle) {
+            case "Edit Text":
+              return TEXT_DIALOG_SUBTITLE;

-                case "Edit Prompt":
-                  return PROMPT_DIALOG_SUBTITLE;
+            case "Edit Prompt":
+              return PROMPT_DIALOG_SUBTITLE;

-                default:
-                  return null;
-              }
-            })()}
-          </DialogDescription>
-        </DialogHeader>

-        <div
-          className={classNames(
-            !isEdit ? "rounded-lg border" : "",
-            "flex h-[55vh] w-full"
-          )}
-        >
-          {type === TypeModal.PROMPT && isEdit ? (
-            <Textarea
-              ref={ref}
-              className="form-input h-full w-full rounded-lg border-border custom-scroll focus-visible:ring-1"
-              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 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"
+            default:
+              return null;
+          }
+        })()}
+      >
+        <DialogTitle className="flex items-center">
+          <span className="pr-2">{myModalTitle}</span>
+          <FileText
+            strokeWidth={1.5}
+            className="h-6 w-6 pl-1 text-primary "
+            aria-hidden="true"
+          />
+        </DialogTitle>
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full flex-col">
+          <div
+            className={classNames(
+              !isEdit ? "rounded-lg border" : "",
+              "flex h-full w-full"
+            )}
          >
-            {myButtonText}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+            {type === TypeModal.PROMPT && isEdit ? (
+              <Textarea
+                ref={ref}
+                className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
+                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>
  );
 }
--- a/src/frontend/src/utils.ts
+++ b/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">
-  <span class='opacity-60 pl-1'>{</span>
-  <span>${name}</span>
-  <span class='opacity-60 pr-1'>}</span>
-</div>`;
+  const html = `<span class="font-semibold chat-message-highlight">{${name}}</span>`;
  return html;
 };