feat(frontend): responsiveness (#1174)

* feat: 🎸 responsiveness chat * feat: 🎸 responsive added responsive menu * feat: 🎸 responsive brain management * fix: 🐛 docker prod
2024-12-14 17:03:29 +03:00 · 2023-09-15 01:09:26 +02:00 · 2023-09-15 01:09:26 +02:00 · 223d3d9102
commit 223d3d9102
parent a80ca8d5f6
14 changed files with 164 additions and 185 deletions
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@ -7,6 +7,10 @@ services:
    build:
      context: frontend
      dockerfile: Dockerfile.dev
+    volumes:
+      - ./frontend/:/app
+      - /app/node_modules
+      - /app/.next
    container_name: web
    restart: always
    ports:
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -6,7 +6,7 @@ services:
      - ./frontend/.env
    build:
      context: frontend
-      dockerfile: Dockerfile.dev
+      dockerfile: Dockerfile
    container_name: web
    restart: always
    ports:
--- a/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx
+++ b/frontend/app/brains-management/[brainId]/components/BrainManagementTabs/BrainManagementTabs.tsx
@ -25,11 +25,11 @@ export const BrainManagementTabs = (): JSX.Element => {

  return (
    <Root
-      className="shadow-md min-h-[50%] dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 pt-10"
+      className="flex flex-col w-full h-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 md:p-10"
      value={selectedTab}
    >
      <List
-        className="flex justify-between"
+        className="flex flex-col md:flex-row justify-between space-y-2 md:space-y-0 mb-4"
        aria-label={t("subtitle", { ns: "config" })}
      >
        <BrainTabTrigger
@ -52,7 +52,7 @@ export const BrainManagementTabs = (): JSX.Element => {
        />
      </List>

-      <div className="p-20 pt-5">
+      <div className="flex-1 p-4 md:p-20">
        <Content value="settings">
          <SettingsTab brainId={brainId} />
        </Content>
@ -63,14 +63,16 @@ export const BrainManagementTabs = (): JSX.Element => {
          <KnowledgeTab brainId={brainId} />
        </Content>
      </div>
-      <div className="flex justify-center">
+
+      <div className="flex justify-center mt-4">
        <Button
-          className="px-20 py-2 bg-red-500 text-white rounded-md"
+          className="px-8 md:px-20 py-2 bg-red-500 text-white rounded-md"
          onClick={() => setIsDeleteModalOpen(true)}
        >
          {t("deleteButton", { ns: "delete_brain" })}
        </Button>
      </div>
+
      <ConfirmationDeleteModal
        isOpen={isDeleteModalOpen}
        setOpen={setIsDeleteModalOpen}
@ -79,3 +81,5 @@ export const BrainManagementTabs = (): JSX.Element => {
    </Root>
  );
 };
+
+export default BrainManagementTabs;
--- a/frontend/app/brains-management/[brainId]/page.tsx
+++ b/frontend/app/brains-management/[brainId]/page.tsx
@ -23,7 +23,7 @@ const BrainsManagement = (): JSX.Element => {
  }

  return (
-    <main className="flex flex-col w-full pt-20 px-20 mb-10">
+    <main className="flex flex-col w-full lg:pt-20 lg:px-20 lg:mb-10 sm:pt-4 sm:px-4 sm=mb-2">
      <BrainManagementTabs />
    </main>
  );
--- a/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx
@ -12,32 +12,28 @@ export const ActionsBar = (): JSX.Element => {
    hasPendingRequests,
    setHasPendingRequests,
  } = useActionBar();
-  const { addContent, contents, feedBrain, removeContent } =
-    useKnowledgeUploader({
-      setHasPendingRequests,
-      setShouldDisplayUploadCard,
-    });
+  
+  const { addContent, contents, feedBrain, removeContent } = useKnowledgeUploader({
+    setHasPendingRequests,
+    setShouldDisplayUploadCard,
+  });

  const { t } = useTranslation(["chat"]);

  return (
    <>
      {hasPendingRequests && (
-        <div className="flex mt-1 flex-row w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-2 pl-6">
-          <div className="flex flex-1 items-center">
-            <span className="text-1xl">{t("filesUploading")}</span>
+        <div className="flex mt-1 flex-col md:flex-row w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-2 md:p-6 pl-6">
+          <div className="flex flex-1 items-center mb-2 md:mb-0">
+            <span className="text-sm md:text-1xl">{t("filesUploading")}</span>
          </div>
-          <AiOutlineLoading3Quarters className="animate-spin text-3xl" />
+          <AiOutlineLoading3Quarters className="animate-spin text-2xl md:text-3xl self-center" />
        </div>
      )}

-      <div
-        className={
-          shouldDisplayUploadCard ? "h-full flex flex-col flex-auto" : ""
-        }
-      >
+      <div className={shouldDisplayUploadCard ? "h-full flex flex-col flex-auto" : ""}>
        {shouldDisplayUploadCard && (
-          <div className="flex flex-1 overflow-y-scroll shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-6">
+          <div className="flex flex-1 overflow-y-scroll shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 md:p-6">
            <KnowledgeToFeed
              onClose={() => setShouldDisplayUploadCard(false)}
              contents={contents}
@ -46,7 +42,7 @@ export const ActionsBar = (): JSX.Element => {
            />
          </div>
        )}
-        <div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-6">
+        <div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-4 md:p-6">
          <ChatInput
            shouldDisplayUploadCard={shouldDisplayUploadCard}
            setShouldDisplayUploadCard={setShouldDisplayUploadCard}
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/ChatBar.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/ChatBar.tsx
@ -20,7 +20,7 @@ export const ChatBar = ({
    useBrainContext();

  return (
-    <div className="flex flex-row flex-1 w-full item-start">
+    <div className="flex flex-row flex-1 w-full item-start overflow-y-auto max-h-[10em] whitespace-pre-wrap">
      {currentBrain !== undefined && (
        <MentionItem
          text={currentBrain.name}
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionItem.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionItem.tsx
@ -18,7 +18,7 @@ export const MentionItem = ({
      <div className="flex items-center bg-gray-300 mr-2 text-gray-600 rounded-2xl py-1 px-2">
        <span className="flex-grow">{`${trigger ?? ""}${text}`}</span>
        <MdRemoveCircleOutline
-          className="cursor-pointer absolute top-[-10px] right-[5px]"
+          className="cursor-pointer absolute top-0 right-0 mt-0 mr-0"
          onClick={onRemove}
        />
      </div>
--- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
+++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx
@ -1,4 +1,4 @@
-/* eslint-disable max-lines */
+/* eslint-disable */
 "use client";
 import { useTranslation } from "react-i18next";
 import { MdAddCircle, MdSend } from "react-icons/md";
@ -24,11 +24,12 @@ export const ChatInput = ({
  setShouldDisplayUploadCard,
  hasContentToFeedBrain,
 }: ChatInputProps): JSX.Element => {
-  const { setMessage, submitQuestion, chatId, generatingAnswer, message } =
-    useChatInput();
+  const { setMessage, submitQuestion, chatId, generatingAnswer, message } = useChatInput();
  const { t } = useTranslation(["chat"]);
  const { currentBrainId } = useBrainContext();

+  const isEmptyMessage = !message || message.trim() === '';
+
  return (
    <form
      data-testid="chat-input-form"
@ -36,20 +37,18 @@ export const ChatInput = ({
        e.preventDefault();
        submitQuestion();
      }}
-      className="sticky flex items-star bottom-0 bg-white dark:bg-black w-full flex justify-center gap-2 z-20"
+      className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
    >
      {!shouldDisplayUploadCard && (
-        <div className="flex items-start">
-          <Button
-            className="p-0"
-            variant={"tertiary"}
-            data-testid="upload-button"
-            type="button"
-            onClick={() => setShouldDisplayUploadCard(true)}
-          >
-            <MdAddCircle className="text-3xl" />
-          </Button>
-        </div>
+        <Button
+          className="p-0"
+          variant={"tertiary"}
+          data-testid="upload-button"
+          type="button"
+          onClick={() => setShouldDisplayUploadCard(true)}
+        >
+          <MdAddCircle className="text-3xl" />
+        </Button>
      )}

      <div className="flex flex-1 flex-col items-center">
@ -66,29 +65,33 @@ export const ChatInput = ({

      <div className="flex flex-row items-end">
        {shouldDisplayUploadCard ? (
-          <div className="flex items-center">
-            <Button
-              disabled={currentBrainId === null || !hasContentToFeedBrain}
-              variant="tertiary"
-              onClick={feedBrain}
-              type="button"
-            >
-              <MdSend className="text-3xl transform -rotate-90" />
-            </Button>
-          </div>
+          <Button
+            disabled={currentBrainId === null || !hasContentToFeedBrain}
+            variant="tertiary"
+            onClick={feedBrain}
+            type="button"
+          >
+            <MdSend className="text-3xl transform -rotate-90" />
+          </Button>
        ) : (
          <>
-            <Button
-              className="px-3 py-2 sm:px-4 sm:py-2"
-              type="submit"
-              isLoading={generatingAnswer}
-              data-testid="submit-button"
-            >
-              {generatingAnswer
-                ? t("thinking", { ns: "chat" })
-                : t("chat", { ns: "chat" })}
-            </Button>
-            <div className="flex items-center">
+            {isEmptyMessage ? (
+              <div className="md:hidden flex items-center">
+                <ConfigModal chatId={chatId} />
+              </div>
+            ) : (
+              <Button
+                className="px-3 py-2 sm:px-4 sm:py-2"
+                type="submit"
+                isLoading={generatingAnswer}
+                data-testid="submit-button"
+              >
+                {generatingAnswer
+                  ? t("thinking", { ns: "chat" })
+                  : t("chat", { ns: "chat" })}
+              </Button>
+            )}
+            <div className="hidden md:flex items-center">
              <ConfigModal chatId={chatId} />
            </div>
          </>
@ -96,4 +99,4 @@ export const ChatInput = ({
      </div>
    </form>
  );
-};
+};
--- a/frontend/app/chat/[chatId]/components/ChatHeader.tsx
+++ b/frontend/app/chat/[chatId]/components/ChatHeader.tsx
@ -8,16 +8,17 @@ export const ChatHeader = (): JSX.Element => {

  if (messages.length !== 0) {
    return (
-      <h1 className="text-3xl font-bold text-center">
+      <h1 className="hidden lg:block text-3xl font-bold text-center">
        {t("chat_title_intro")}{" "}
        <span className="text-purple-500">{t("brains")}</span>
      </h1>
    );
  }
-
+    
  return (
-    <h1 className="text-3xl font-bold text-center">
+    <h1 className="hidden lg:block text-3xl font-bold text-center">
      {t("chat_title_intro")}{" "}
+      
      <span className="text-purple-500">{t("brains")}</span>
      {" !! "}
      <br />
--- a/frontend/app/chat/[chatId]/page.tsx
+++ b/frontend/app/chat/[chatId]/page.tsx
@ -6,17 +6,17 @@ import { ChatHeader } from "./components/ChatHeader";

 const SelectedChatPage = (): JSX.Element => {
  return (
-    <main className="flex flex-col w-full pt-10" data-testid="chat-page">
-      <section className="flex flex-col flex-1 items-center w-full h-full min-h-[70vh]">
-        <ChatHeader />
-        <div className="flex-1 flex flex-col mt-8 w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 p-12 pt-10 max-h-[80vh]">
-          <div className="flex flex-1 flex-col overflow-hidden">
-            <ChatDialogueArea />
-          </div>
-          <ActionsBar />
+    <main className="flex flex-col w-full h-[calc(100vh-61px)] overflow-hidden" data-testid="chat-page">
+    <section className="flex flex-col flex-1 items-center w-full h-full overflow-y-auto">
+        <ChatHeader /> {/* Added margin-bottom */}
+        <div className="flex-1 flex flex-col mt-4 md:mt-8 w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl overflow-hidden bg-white dark:bg-black border border-black/10 dark:border-white/25 p-2 md:p-12 pt-4 md:pt-10">
+            <div className="flex flex-1 flex-col overflow-y-auto">
+                <ChatDialogueArea />
+            </div>
+            <ActionsBar/> {/* Added margin-top */}
        </div>
-      </section>
-    </main>
+    </section>
+  </main>
  );
 };

--- a/frontend/lib/components/NavBar/components/MobileMenu.tsx
+++ b/frontend/lib/components/NavBar/components/MobileMenu.tsx
@ -1,60 +1,17 @@
-import * as Dialog from "@radix-ui/react-dialog";
-import { AnimatePresence, motion } from "framer-motion";
+/* eslint-disable */
 import { useState } from "react";
-import { MdClose, MdMenu } from "react-icons/md";

 import { NavItems } from "./NavItems";

 export const MobileMenu = (): JSX.Element => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false); 

  return (
-    <Dialog.Root onOpenChange={setOpen} open={open}>
-      <Dialog.Trigger asChild>
-        <button className="block sm:hidden" aria-label="open menu">
-          <MdMenu className="text-4xl" />
-        </button>
-      </Dialog.Trigger>
-      <AnimatePresence>
-        {open ? (
-          <Dialog.Portal forceMount>
-            <Dialog.Overlay asChild forceMount>
-              <motion.div
-                className="fixed inset-0 flex overflow-auto cursor-pointer z-50 shadow-xl dark:shadow-primary/25"
-                initial={{ opacity: 1, y: "-100%" }}
-                animate={{ opacity: 1, y: "0%" }}
-                exit={{ opacity: 1, y: "-100%" }}
-                transition={{ duration: 0.4, ease: "circOut" }}
-              >
-                <Dialog.Content asChild forceMount>
-                  <div className="flex flex-col items-center justify-between py-24 flex-1 w-full bg-white dark:bg-black border border-black/10 dark:border-white/25 p-10 shadow-xl dark:shadow-primary/50 focus:outline-none cursor-auto z-50">
-                    <NavItems
-                      setOpen={setOpen}
-                      className="text-3xl h-fit text-center flex-col items-center justify-center gap-10"
-                    />
-
-                    <p className="">
-                      Get a Second Brain with{" "}
-                      <span className="text-primary dark:bg-white rounded-sm">
-                        Quivr
-                      </span>
-                    </p>
-
-                    <Dialog.Close asChild>
-                      <button
-                        className="absolute top-0 p-3 right-0 flex items-center justify-center gap-2 appearance-none rounded-full focus:shadow-sm focus:outline-none"
-                        aria-label="close menu"
-                      >
-                        <MdClose className="text-4xl" />
-                      </button>
-                    </Dialog.Close>
-                  </div>
-                </Dialog.Content>
-              </motion.div>
-            </Dialog.Overlay>
-          </Dialog.Portal>
-        ) : null}
-      </AnimatePresence>
-    </Dialog.Root>
-  );
+    <div className="md:hidden flex flex-row items-center justify-between  px-6 sm:hidden">
+        <NavItems
+            setOpen={setOpen}
+            className="text-3xl gap-10"
+        />
+    </div>
+);
 };
--- a/frontend/lib/components/NavBar/components/NavItems/index.tsx
+++ b/frontend/lib/components/NavBar/components/NavItems/index.tsx
@ -42,7 +42,7 @@ export const NavItems = ({
          </NavLink>
        </>
      )}
-      <div className="flex sm:flex-1 sm:justify-end flex-col items-center justify-center sm:flex-row gap-5 sm:gap-2">
+      <div className="flex sm:flex-1 sm:justify-end flex-row items-center justify-center sm:flex-row gap-5 sm:gap-2">
        {isUserLoggedIn && (
          <>
            <BrainManagementButton />
--- a/frontend/package.json
+++ b/frontend/package.json
@ -58,7 +58,7 @@
    "i18next": "^23.4.1",
    "i18next-http-backend": "^2.2.1",
    "lodash": "^4.17.21",
-    "next": "13.4.2",
+    "next": "13.4.19",
    "nock": "^13.3.1",
    "postcss": "8.4.23",
    "prettier": "^2.8.8",
@ -87,4 +87,4 @@
    "react-icons": "^4.8.0",
    "vitest": "^0.32.2"
  }
-}
+}
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@ -641,10 +641,10 @@
  dependencies:
    "@lukeed/csprng" "^1.1.0"

-"@next/env@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.npmjs.org/@next/env/-/env-13.4.2.tgz"
-  integrity sha512-Wqvo7lDeS0KGwtwg9TT9wKQ8raelmUxt+TQKWvG/xKfcmDXNOtCuaszcfCF8JzlBG1q0VhpI6CKaRMbVPMDWgw==
+"@next/env@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.19.tgz#46905b4e6f62da825b040343cbc233144e9578d3"
+  integrity sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==

 "@next/eslint-plugin-next@13.4.2":
  version "13.4.2"
@ -653,50 +653,50 @@
  dependencies:
    glob "7.1.7"

-"@next/swc-darwin-arm64@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.2.tgz"
-  integrity sha512-6BBlqGu3ewgJflv9iLCwO1v1hqlecaIH2AotpKfVUEzUxuuDNJQZ2a4KLb4MBl8T9/vca1YuWhSqtbF6ZuUJJw==
+"@next/swc-darwin-arm64@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.19.tgz#77ad462b5ced4efdc26cb5a0053968d2c7dac1b6"
+  integrity sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==

-"@next/swc-darwin-x64@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.2.tgz#09a800bed8dfe4beec4cbf14092f9c22db24470b"
-  integrity sha512-iZuYr7ZvGLPjPmfhhMl0ISm+z8EiyLBC1bLyFwGBxkWmPXqdJ60mzuTaDSr5WezDwv0fz32HB7JHmRC6JVHSZg==
+"@next/swc-darwin-x64@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.19.tgz#aebe38713a4ce536ee5f2a291673e14b715e633a"
+  integrity sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==

-"@next/swc-linux-arm64-gnu@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.2.tgz#b7ade28834564120b0b25ffa0b79d75982d290bc"
-  integrity sha512-2xVabFtIge6BJTcJrW8YuUnYTuQjh4jEuRuS2mscyNVOj6zUZkom3CQg+egKOoS+zh2rrro66ffSKIS+ztFJTg==
+"@next/swc-linux-arm64-gnu@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.19.tgz#ec54db65b587939c7b94f9a84800f003a380f5a6"
+  integrity sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==

-"@next/swc-linux-arm64-musl@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.2.tgz#f5420548234d35251630ddaa2e9a7dc32337a887"
-  integrity sha512-wKRCQ27xCUJx5d6IivfjYGq8oVngqIhlhSAJntgXLt7Uo9sRT/3EppMHqUZRfyuNBTbykEre1s5166z+pvRB5A==
+"@next/swc-linux-arm64-musl@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.19.tgz#1f5e2c1ea6941e7d530d9f185d5d64be04279d86"
+  integrity sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==

-"@next/swc-linux-x64-gnu@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.2.tgz#0241dc011d73f08df9d9998cffdfcf08d1971520"
-  integrity sha512-NpCa+UVhhuNeaFVUP1Bftm0uqtvLWq2JTm7+Ta48+2Uqj2mNXrDIvyn1DY/ZEfmW/1yvGBRaUAv9zkMkMRixQA==
+"@next/swc-linux-x64-gnu@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.19.tgz#96b0882492a2f7ffcce747846d3680730f69f4d1"
+  integrity sha512-htwOEagMa/CXNykFFeAHHvMJeqZfNQEoQvHfsA4wgg5QqGNqD5soeCer4oGlCol6NGUxknrQO6VEustcv+Md+g==

-"@next/swc-linux-x64-musl@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.2.tgz#fd35919e2b64b1c739583145799fefd594ef5d63"
-  integrity sha512-ZWVC72x0lW4aj44e3khvBrj2oSYj1bD0jESmyah3zG/3DplEy/FOtYkMzbMjHTdDSheso7zH8GIlW6CDQnKhmQ==
+"@next/swc-linux-x64-musl@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.19.tgz#f276b618afa321d2f7b17c81fc83f429fb0fd9d8"
+  integrity sha512-4Gj4vvtbK1JH8ApWTT214b3GwUh9EKKQjY41hH/t+u55Knxi/0wesMzwQRhppK6Ddalhu0TEttbiJ+wRcoEj5Q==

-"@next/swc-win32-arm64-msvc@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.2.tgz#fa95d2dbb97707c130a868a1bd7e83e64bedf4c6"
-  integrity sha512-pLT+OWYpzJig5K4VKhLttlIfBcVZfr2+Xbjra0Tjs83NQSkFS+y7xx+YhCwvpEmXYLIvaggj2ONPyjbiigOvHQ==
+"@next/swc-win32-arm64-msvc@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.19.tgz#1599ae0d401da5ffca0947823dac577697cce577"
+  integrity sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==

-"@next/swc-win32-ia32-msvc@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.2.tgz#31a98e61d3cda92ec2293c50df7cb5280fc63697"
-  integrity sha512-dhpiksQCyGca4WY0fJyzK3FxMDFoqMb0Cn+uDB+9GYjpU2K5//UGPQlCwiK4JHxuhg8oLMag5Nf3/IPSJNG8jw==
+"@next/swc-win32-ia32-msvc@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.19.tgz#55cdd7da90818f03e4da16d976f0cb22045d16fd"
+  integrity sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==

-"@next/swc-win32-x64-msvc@13.4.2":
-  version "13.4.2"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.2.tgz#8435ab6087046355f5de07122d3097949e8fab10"
-  integrity sha512-O7bort1Vld00cu8g0jHZq3cbSTUNMohOEvYqsqE10+yfohhdPHzvzO+ziJRz4Dyyr/fYKREwS7gR4JC0soSOMw==
+"@next/swc-win32-x64-msvc@13.4.19":
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.19.tgz#648f79c4e09279212ac90d871646ae12d80cdfce"
+  integrity sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==

 "@nodelib/fs.scandir@2.1.5":
  version "2.1.5"
@ -4355,6 +4355,11 @@ glob-parent@^6.0.2:
  dependencies:
    is-glob "^4.0.3"

+glob-to-regexp@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
+  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
+
 glob@7.1.6:
  version "7.1.6"
  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
@ -4451,7 +4456,7 @@ gopd@^1.0.1:
  dependencies:
    get-intrinsic "^1.1.3"

-graceful-fs@^4.2.4:
+graceful-fs@^4.1.2, graceful-fs@^4.2.4:
  version "4.2.11"
  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@ -5606,28 +5611,29 @@ next-tick@^1.1.0:
  resolved "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz"
  integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==

-next@13.4.2:
-  version "13.4.2"
-  resolved "https://registry.npmjs.org/next/-/next-13.4.2.tgz"
-  integrity sha512-aNFqLs3a3nTGvLWlO9SUhCuMUHVPSFQC0+tDNGAsDXqx+WJDFSbvc233gOJ5H19SBc7nw36A9LwQepOJ2u/8Kg==
+next@13.4.19:
+  version "13.4.19"
+  resolved "https://registry.yarnpkg.com/next/-/next-13.4.19.tgz#2326e02aeedee2c693d4f37b90e4f0ed6882b35f"
+  integrity sha512-HuPSzzAbJ1T4BD8e0bs6B9C1kWQ6gv8ykZoRWs5AQoiIuqbGHHdQO7Ljuvg05Q0Z24E2ABozHe6FxDvI6HfyAw==
  dependencies:
-    "@next/env" "13.4.2"
+    "@next/env" "13.4.19"
    "@swc/helpers" "0.5.1"
    busboy "1.6.0"
    caniuse-lite "^1.0.30001406"
    postcss "8.4.14"
    styled-jsx "5.1.1"
+    watchpack "2.4.0"
    zod "3.21.4"
  optionalDependencies:
-    "@next/swc-darwin-arm64" "13.4.2"
-    "@next/swc-darwin-x64" "13.4.2"
-    "@next/swc-linux-arm64-gnu" "13.4.2"
-    "@next/swc-linux-arm64-musl" "13.4.2"
-    "@next/swc-linux-x64-gnu" "13.4.2"
-    "@next/swc-linux-x64-musl" "13.4.2"
-    "@next/swc-win32-arm64-msvc" "13.4.2"
-    "@next/swc-win32-ia32-msvc" "13.4.2"
-    "@next/swc-win32-x64-msvc" "13.4.2"
+    "@next/swc-darwin-arm64" "13.4.19"
+    "@next/swc-darwin-x64" "13.4.19"
+    "@next/swc-linux-arm64-gnu" "13.4.19"
+    "@next/swc-linux-arm64-musl" "13.4.19"
+    "@next/swc-linux-x64-gnu" "13.4.19"
+    "@next/swc-linux-x64-musl" "13.4.19"
+    "@next/swc-win32-arm64-msvc" "13.4.19"
+    "@next/swc-win32-ia32-msvc" "13.4.19"
+    "@next/swc-win32-x64-msvc" "13.4.19"

 nock@^13.3.1:
  version "13.3.2"
@ -7760,6 +7766,14 @@ warning@^4.0.2:
  dependencies:
    loose-envify "^1.0.0"

+watchpack@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
+  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
+  dependencies:
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.1.2"
+
 webidl-conversions@^3.0.0:
  version "3.0.1"
  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"