From d55a83888b1fcaa987184ec98460c56194fc84b4 Mon Sep 17 00:00:00 2001
From: NamH <NamNh0122@gmail.com>
Date: Wed, 13 Sep 2023 21:33:53 -0700
Subject: [PATCH] refactor: replacing mobx with jotai (#160)

* refactor: replacing mobx with jotai

Signed-off-by: James <james@jan.ai>
Co-authored-by: James <james@jan.ai>
Co-authored-by: Louis <louis@jan.ai>
---
 conf/sample.env_web-client                    |    3 +-
 web-client/README.md                          |    4 +-
 .../app/_components/AdvancedPrompt/index.tsx  |   98 +-
 .../_components/AdvancedTextArea/index.tsx    |   54 +-
 web-client/app/_components/ApiPane/index.tsx  |  156 +-
 web-client/app/_components/ApiStep/index.tsx  |   30 +-
 .../BasicPromptAccessories/index.tsx          |   40 +
 .../_components/BasicPromptButton/index.tsx   |   20 +
 .../_components/BasicPromptInput/index.tsx    |   38 +
 .../app/_components/ButtonSlider/index.tsx    |   84 +-
 .../app/_components/ChangeTheme/index.tsx     |   50 +-
 web-client/app/_components/ChatBody/index.tsx |  215 +-
 .../ChatBody/renderChatMessage.tsx            |   66 +
 .../app/_components/ChatContainer/index.tsx   |  103 +-
 web-client/app/_components/ChatItem/index.tsx |   19 +
 .../_components/CompactHistoryItem/index.tsx  |   30 +-
 .../_components/CompactHistoryList/index.tsx  |   21 +
 .../app/_components/CompactLogo/index.tsx     |   10 +-
 .../app/_components/CompactSideBar/index.tsx  |   38 +-
 .../ConfirmDeleteConversationModal/index.tsx  |   29 +-
 .../_components/ConfirmSignOutModal/index.tsx |   21 +-
 .../_components/ConversationalCard/index.tsx  |   10 +-
 .../_components/ConversationalList/index.tsx  |   12 +-
 .../app/_components/Draggable/index.tsx       |   37 -
 .../app/_components/DropdownList/index.tsx    |  128 +-
 .../_components/ExpandableHeader/index.tsx    |   24 +
 .../_components/GenerateImageCard/index.tsx   |   18 +-
 .../_components/GenerateImageList/index.tsx   |   42 +-
 .../GenerativeSampleContainer/index.tsx       |  101 +-
 .../app/_components/HamburgerButton/index.tsx |   22 +
 web-client/app/_components/Header/index.tsx   |   77 +-
 .../app/_components/HistoryEmpty/index.tsx    |   54 +-
 .../app/_components/HistoryItem/index.tsx     |  144 +-
 .../app/_components/HistoryList/index.tsx     |   99 +-
 .../app/_components/InputToolbar/index.tsx    |  153 +-
 web-client/app/_components/JanLogo/index.tsx  |   19 +
 .../app/_components/JanWelcomeTitle/index.tsx |   40 +-
 .../app/_components/LeftContainer/index.tsx   |   24 +
 .../app/_components/LeftSidebar/index.tsx     |   20 +
 .../app/_components/LoginButton/index.tsx     |   27 +
 web-client/app/_components/MainChat/index.tsx |   13 +
 .../app/_components/MainChatHeader/index.tsx  |   11 +
 .../_components/MenuAdvancedPrompt/index.tsx  |   44 +-
 .../app/_components/MenuHeader/index.tsx      |  111 +-
 .../app/_components/MobileDownload/index.tsx  |    4 +-
 .../app/_components/MobileMenuPane/index.tsx  |   94 +-
 .../_components/ModelDetailSideBar/index.tsx  |   45 +-
 .../app/_components/ModelInfo/index.tsx       |   84 +-
 .../app/_components/ModelInfoItem/index.tsx   |   30 +-
 .../app/_components/ModelMenu/index.tsx       |   90 +-
 .../_components/NewChatBlankState/index.tsx   |   54 -
 web-client/app/_components/OverviewPane.tsx   |  120 +-
 .../app/_components/PrimaryButton/index.tsx   |   25 +
 .../app/_components/ProductOverview/index.tsx |   29 +
 .../app/_components/RightContainer/index.tsx  |   14 +
 .../_components/SampleLlmContainer/index.tsx  |   90 +-
 .../app/_components/SearchBar/index.tsx       |   54 +-
 .../app/_components/SecondaryButton/index.tsx |   18 +
 .../app/_components/SendButton/index.tsx      |   20 +-
 .../app/_components/ShortcutItem/index.tsx    |   24 +-
 .../app/_components/ShortcutList/index.tsx    |   74 +-
 .../app/_components/SidebarLeft/index.tsx     |  109 -
 .../_components/SimpleImageMessage/index.tsx  |  177 +-
 .../_components/SimpleTextMessage/index.tsx   |  112 +-
 web-client/app/_components/Slide/index.tsx    |   13 +-
 web-client/app/_components/Slider/index.tsx   |   12 +-
 .../_components/StreamTextMessage/index.tsx   |  102 +-
 .../app/_components/TabModelDetail/index.tsx  |   70 +-
 web-client/app/_components/TextCode/index.tsx |   62 +-
 .../app/_components/TitleBlankState/index.tsx |   22 +-
 .../app/_components/TryItYourself/index.tsx   |   39 +
 .../app/_components/UploadFileImage/index.tsx |  204 +-
 .../_components/UserProfileDropDown/index.tsx |   10 +-
 .../app/_components/UserToolbar/index.tsx     |   52 +-
 web-client/app/_helpers/JotaiWrapper.tsx      |  215 +
 web-client/app/_helpers/MobxWrapper.tsx       |   13 -
 web-client/app/_helpers/ModalWrapper.tsx      |   19 +
 web-client/app/_helpers/ThemeWrapper.tsx      |   13 +-
 web-client/app/_helpers/withSetPropAction.ts  |   30 -
 .../app/_hooks/useChatMessageSubscription.ts  |   16 +
 web-client/app/_hooks/useChatMessages.ts      |   73 +
 .../app/_hooks/useCreateConversation.ts       |   56 +-
 .../app/_hooks/useDeleteConversation.ts       |   50 +
 web-client/app/_hooks/useGetCurrentUser.ts    |    6 +-
 web-client/app/_hooks/useGetProducts.ts       |   24 +
 .../app/_hooks/useGetUserConversations.ts     |   56 +-
 web-client/app/_hooks/useSendChatMessage.ts   |  383 ++
 web-client/app/_hooks/useSignOut.ts           |   13 +-
 web-client/app/_models/ChatMessage.ts         |   70 +-
 web-client/app/_models/Conversation.ts        |  116 +-
 web-client/app/_models/History.ts             |  604 ---
 web-client/app/_models/Input.ts               |   19 -
 web-client/app/_models/Output.ts              |   14 -
 web-client/app/_models/Product.ts             |   90 +-
 web-client/app/_models/ProductInput.ts        |   23 +
 web-client/app/_models/ProductOutput.ts       |    8 +
 web-client/app/_models/ProductV2.ts           |   81 -
 web-client/app/_models/RootStore.ts           |   36 -
 web-client/app/_models/Shortcut.ts            |    7 -
 web-client/app/_models/User.ts                |   21 +-
 web-client/app/_utils/const.ts                |    2 +-
 web-client/app/_utils/message.ts              |    9 +-
 web-client/app/layout.tsx                     |   24 +-
 web-client/app/page.tsx                       |   45 +-
 web-client/env-example                        |    3 +-
 web-client/graphql/fragments/product.graphql  |    2 +
 web-client/graphql/generated/gql.ts           |   16 +-
 web-client/graphql/generated/graphql.ts       |   42 +-
 .../queries/getConversationMessages.graphql   |    2 +-
 .../graphql/queries/getConversations.graphql  |    2 +-
 .../subscriptions/subscribeMessage.graphql    |    1 +
 web-client/package-lock.json                  | 4369 -----------------
 web-client/package.json                       |   10 +-
 web-client/tailwind.config.js                 |    3 +
 web-client/yarn.lock                          |  679 ++-
 115 files changed, 3755 insertions(+), 7722 deletions(-)
 create mode 100644 web-client/app/_components/BasicPromptAccessories/index.tsx
 create mode 100644 web-client/app/_components/BasicPromptButton/index.tsx
 create mode 100644 web-client/app/_components/BasicPromptInput/index.tsx
 create mode 100644 web-client/app/_components/ChatBody/renderChatMessage.tsx
 create mode 100644 web-client/app/_components/ChatItem/index.tsx
 create mode 100644 web-client/app/_components/CompactHistoryList/index.tsx
 delete mode 100644 web-client/app/_components/Draggable/index.tsx
 create mode 100644 web-client/app/_components/ExpandableHeader/index.tsx
 create mode 100644 web-client/app/_components/HamburgerButton/index.tsx
 create mode 100644 web-client/app/_components/JanLogo/index.tsx
 create mode 100644 web-client/app/_components/LeftContainer/index.tsx
 create mode 100644 web-client/app/_components/LeftSidebar/index.tsx
 create mode 100644 web-client/app/_components/LoginButton/index.tsx
 create mode 100644 web-client/app/_components/MainChat/index.tsx
 create mode 100644 web-client/app/_components/MainChatHeader/index.tsx
 delete mode 100644 web-client/app/_components/NewChatBlankState/index.tsx
 create mode 100644 web-client/app/_components/PrimaryButton/index.tsx
 create mode 100644 web-client/app/_components/ProductOverview/index.tsx
 create mode 100644 web-client/app/_components/RightContainer/index.tsx
 create mode 100644 web-client/app/_components/SecondaryButton/index.tsx
 delete mode 100644 web-client/app/_components/SidebarLeft/index.tsx
 create mode 100644 web-client/app/_components/TryItYourself/index.tsx
 create mode 100644 web-client/app/_helpers/JotaiWrapper.tsx
 delete mode 100644 web-client/app/_helpers/MobxWrapper.tsx
 create mode 100644 web-client/app/_helpers/ModalWrapper.tsx
 delete mode 100644 web-client/app/_helpers/withSetPropAction.ts
 create mode 100644 web-client/app/_hooks/useChatMessageSubscription.ts
 create mode 100644 web-client/app/_hooks/useChatMessages.ts
 create mode 100644 web-client/app/_hooks/useDeleteConversation.ts
 create mode 100644 web-client/app/_hooks/useGetProducts.ts
 create mode 100644 web-client/app/_hooks/useSendChatMessage.ts
 delete mode 100644 web-client/app/_models/History.ts
 delete mode 100644 web-client/app/_models/Input.ts
 delete mode 100644 web-client/app/_models/Output.ts
 create mode 100644 web-client/app/_models/ProductInput.ts
 create mode 100644 web-client/app/_models/ProductOutput.ts
 delete mode 100644 web-client/app/_models/ProductV2.ts
 delete mode 100644 web-client/app/_models/RootStore.ts
 delete mode 100644 web-client/app/_models/Shortcut.ts
 delete mode 100644 web-client/package-lock.json

diff --git a/conf/sample.env_web-client b/conf/sample.env_web-client
index 35fc6972c0..e024bb7623 100644
--- a/conf/sample.env_web-client
+++ b/conf/sample.env_web-client
@@ -5,8 +5,7 @@ NEXT_PUBLIC_DOWNLOAD_APP_IOS=#
 NEXT_PUBLIC_DOWNLOAD_APP_ANDROID=#
 NEXT_PUBLIC_GRAPHQL_ENGINE_URL=http://localhost:8080/v1/graphql 
 NEXT_PUBLIC_GRAPHQL_ENGINE_WEB_SOCKET_URL=ws://localhost:8080/v1/graphql
-OPENAPI_ENDPOINT=http://host.docker.internal:8000/v1
-OPENAPI_KEY=openapikey
+NEXT_PUBLIC_OPENAPI_ENDPOINT=http://localhost:8000/v1/chat/completions
 KEYCLOAK_CLIENT_ID=hasura
 KEYCLOAK_CLIENT_SECRET=oMtCPAV7diKpE564SBspgKj4HqlKM4Hy
 AUTH_ISSUER=http://localhost:8088/realms/$KEYCLOAK_CLIENT_ID
diff --git a/web-client/README.md b/web-client/README.md
index a356757177..ef0d70d5e1 100644
--- a/web-client/README.md
+++ b/web-client/README.md
@@ -77,9 +77,7 @@ Replace above configuration with your actual infrastructure.
 | [@tailwindcss/typography](https://tailwindcss.com/docs/typography-plugin) | UI | ^0.5.9 |
 | [embla-carousel](https://www.embla-carousel.com/) | UI | ^8.0.0-rc11 |
 | [@apollo/client](https://www.apollographql.com/docs/react/) | State management | ^3.8.1 |
-| [mobx](https://mobx.js.org/README.html) | State management | ^6.10.0 |
-| [mobx-react-lite](https://www.npmjs.com/package/mobx-react-lite) | State management | ^4.0.3 |
-| [mobx-state-tree](https://mobx-state-tree.js.org/) | State management | ^5.1.8 |
+| [jotai](https://jotai.org/) | State management | ^2.4.0 |
 
 
 ## Deploy to Netlify
diff --git a/web-client/app/_components/AdvancedPrompt/index.tsx b/web-client/app/_components/AdvancedPrompt/index.tsx
index 19270ef3f8..168e784db7 100644
--- a/web-client/app/_components/AdvancedPrompt/index.tsx
+++ b/web-client/app/_components/AdvancedPrompt/index.tsx
@@ -1,69 +1,29 @@
-"use client";
-import { useCallback } from "react";
-import Image from "next/image";
-import { useStore } from "@/_models/RootStore";
-import { observer } from "mobx-react-lite";
-import { MenuAdvancedPrompt } from "../MenuAdvancedPrompt";
-import { useForm } from "react-hook-form";
-import { useMutation } from "@apollo/client";
-import { CreateMessageDocument, CreateMessageMutation } from "@/graphql";
-
-export const AdvancedPrompt: React.FC = observer(() => {
-  const { register, handleSubmit } = useForm();
-  const { historyStore } = useStore();
-
-  const onAdvancedPrompt = useCallback(() => {
-    historyStore.toggleAdvancedPrompt();
-  }, []);
-
-  const [createMessageMutation] = useMutation<CreateMessageMutation>(
-    CreateMessageDocument
-  );
-  const onSubmit = (data: any) => {
-    historyStore.sendControlNetPrompt(
-      createMessageMutation,
-      data.prompt,
-      data.negativePrompt,
-      data.fileInput[0]
-    );
-  };
-
-  return (
-    <form
-      className={`${
-        historyStore.showAdvancedPrompt ? "w-[288px]" : "hidden"
-      } h-screen flex flex-col border-r border-gray-200`}
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <button
-        onClick={onAdvancedPrompt}
-        className="flex items-center mx-2 mt-3 mb-[10px] flex-none gap-1 text-xs leading-[18px] text-[#6B7280]"
-      >
-        <Image src={"/icons/chevron-left.svg"} width={20} height={20} alt="" />
-        <span className="font-semibold text-gray-500 text-xs">
-          BASIC PROMPT
-        </span>
-      </button>
-      <div className="flex flex-col justify-start flex-1 p-3 gap-[10px] overflow-x-hidden scroll">
-        <MenuAdvancedPrompt register={register} />
-      </div>
-      <div className="py-3 px-2 flex flex-none gap-3 items-center justify-between border-t border-gray-200">
-        <button className="w-1/2 flex items-center text-gray-900 py-2 px-3 rounded-lg gap-1 justify-center bg-gray-100 text-sm leading-5">
-          <Image
-            src={"/icons/unicorn_arrow-random.svg"}
-            width={16}
-            height={16}
-            alt=""
-          />
-          Random
-        </button>
-        <button
-          className="w-1/2 flex items-center text-gray-900 justify-center py-2 px-3 rounded-lg gap-1 bg-yellow-300 text-sm leading-5"
-          onClick={(e) => handleSubmit(onSubmit)(e)}
-        >
-          Generate
-        </button>
-      </div>
-    </form>
-  );
-});
+import { MenuAdvancedPrompt } from "../MenuAdvancedPrompt";
+import { useForm } from "react-hook-form";
+import BasicPromptButton from "../BasicPromptButton";
+import PrimaryButton from "../PrimaryButton";
+
+const AdvancedPrompt: React.FC = () => {
+  const { register, handleSubmit } = useForm();
+
+  const onSubmit = (data: any) => {};
+
+  return (
+    <form
+      className="w-[288px] h-screen flex flex-col border-r border-gray-200"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <BasicPromptButton />
+      <MenuAdvancedPrompt register={register} />
+      <div className="py-3 px-2 flex flex-none gap-3 items-center justify-between border-t border-gray-200">
+        <PrimaryButton
+          fullWidth={true}
+          title="Generate"
+          onClick={() => handleSubmit(onSubmit)}
+        />
+      </div>
+    </form>
+  );
+};
+
+export default AdvancedPrompt;
diff --git a/web-client/app/_components/AdvancedTextArea/index.tsx b/web-client/app/_components/AdvancedTextArea/index.tsx
index 980efedaca..26be021a1e 100644
--- a/web-client/app/_components/AdvancedTextArea/index.tsx
+++ b/web-client/app/_components/AdvancedTextArea/index.tsx
@@ -1,27 +1,27 @@
-import { FieldValues, UseFormRegister } from "react-hook-form";
-
-type Props = {
-  formId?: string;
-  height: number;
-  title: string;
-  placeholder: string;
-  register: UseFormRegister<FieldValues>;
-};
-
-export const AdvancedTextArea: React.FC<Props> = ({
-  formId = "",
-  height,
-  placeholder,
-  title,
-  register,
-}) => (
-  <div className="w-full flex flex-col pt-3 gap-1">
-    <label className="text-sm leading-5 text-gray-800">{title}</label>
-    <textarea
-      style={{ height: `${height}px` }}
-      className="rounded-lg py-[13px] px-5 border outline-none resize-none border-gray-300 bg-gray-50 placeholder:gray-400 text-sm font-normal"
-      placeholder={placeholder}
-      {...register(formId, { required: formId === "prompt" ? true : false })}
-    />
-  </div>
-);
+import { FieldValues, UseFormRegister } from "react-hook-form";
+
+type Props = {
+  formId?: string;
+  height: number;
+  title: string;
+  placeholder: string;
+  register: UseFormRegister<FieldValues>;
+};
+
+export const AdvancedTextArea: React.FC<Props> = ({
+  formId = "",
+  height,
+  placeholder,
+  title,
+  register,
+}) => (
+  <div className="w-full flex flex-col pt-3 gap-1">
+    <label className="text-sm leading-5 text-gray-800">{title}</label>
+    <textarea
+      style={{ height: `${height}px` }}
+      className="rounded-lg py-[13px] px-5 border outline-none resize-none border-gray-300 bg-gray-50 placeholder:gray-400 text-sm font-normal"
+      placeholder={placeholder}
+      {...register(formId, { required: formId === "prompt" ? true : false })}
+    />
+  </div>
+);
diff --git a/web-client/app/_components/ApiPane/index.tsx b/web-client/app/_components/ApiPane/index.tsx
index c5c177e2bf..dc451a4872 100644
--- a/web-client/app/_components/ApiPane/index.tsx
+++ b/web-client/app/_components/ApiPane/index.tsx
@@ -1,79 +1,79 @@
-import Image from "next/image";
-import { useState } from "react";
-import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
-import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import useGetModelApiInfo from "@/_hooks/useGetModelApiInfo";
-
-SyntaxHighlighter.registerLanguage("javascript", js);
-
-const ApiPane: React.FC = () => {
-  const [expend, setExpend] = useState(true);
-  const { data } = useGetModelApiInfo();
-  const [highlightCode, setHighlightCode] = useState(data[0]);
-
-  return (
-    <div className="h-full flex flex-col relative">
-      <div className="absolute top-0 left-0 h-full w-full overflow-x-hidden scroll">
-        <button
-          onClick={() => setExpend(!expend)}
-          className="flex items-center flex-none"
-        >
-          <Image
-            src={"/icons/unicorn_angle-down.svg"}
-            width={24}
-            height={24}
-            alt=""
-          />
-          <span>Request</span>
-        </button>
-        <div
-          className={`${
-            expend ? "block" : "hidden"
-          } bg-[#1F2A37] rounded-lg w-full flex-1`}
-        >
-          <div className="p-2 flex justify-between flex-1">
-            <div className="flex">
-              {data.map((item, index) => (
-                <button
-                  className={`py-1 text-xs text-[#9CA3AF] px-2 flex gap-[10px] rounded ${
-                    highlightCode?.type === item.type
-                      ? "bg-[#374151] text-white"
-                      : ""
-                  }`}
-                  key={index}
-                  onClick={() => setHighlightCode(item)}
-                >
-                  {item.type}
-                </button>
-              ))}
-            </div>
-            <button
-              onClick={() =>
-                navigator.clipboard.writeText(highlightCode?.stringCode)
-              }
-            >
-              <Image
-                src={"/icons/unicorn_clipboard-alt.svg"}
-                width={24}
-                height={24}
-                alt=""
-              />
-            </button>
-          </div>
-          <SyntaxHighlighter
-            className="w-full bg-transparent overflow-x-hidden scroll resize-none"
-            language="jsx"
-            style={atomOneDark}
-            customStyle={{ padding: "12px", background: "transparent" }}
-            wrapLongLines={true}
-          >
-            {highlightCode?.stringCode}
-          </SyntaxHighlighter>
-        </div>
-      </div>
-    </div>
-  );
-};
-
+import Image from "next/image";
+import { useState } from "react";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import useGetModelApiInfo from "@/_hooks/useGetModelApiInfo";
+
+SyntaxHighlighter.registerLanguage("javascript", js);
+
+const ApiPane: React.FC = () => {
+  const [expend, setExpend] = useState(true);
+  const { data } = useGetModelApiInfo();
+  const [highlightCode, setHighlightCode] = useState(data[0]);
+
+  return (
+    <div className="h-full flex flex-col relative">
+      <div className="absolute top-0 left-0 h-full w-full overflow-x-hidden scroll">
+        <button
+          onClick={() => setExpend(!expend)}
+          className="flex items-center flex-none"
+        >
+          <Image
+            src={"/icons/unicorn_angle-down.svg"}
+            width={24}
+            height={24}
+            alt=""
+          />
+          <span>Request</span>
+        </button>
+        <div
+          className={`${
+            expend ? "block" : "hidden"
+          } bg-[#1F2A37] rounded-lg w-full flex-1`}
+        >
+          <div className="p-2 flex justify-between flex-1">
+            <div className="flex">
+              {data.map((item, index) => (
+                <button
+                  className={`py-1 text-xs text-[#9CA3AF] px-2 flex gap-[10px] rounded ${
+                    highlightCode?.type === item.type
+                      ? "bg-[#374151] text-white"
+                      : ""
+                  }`}
+                  key={index}
+                  onClick={() => setHighlightCode(item)}
+                >
+                  {item.type}
+                </button>
+              ))}
+            </div>
+            <button
+              onClick={() =>
+                navigator.clipboard.writeText(highlightCode?.stringCode)
+              }
+            >
+              <Image
+                src={"/icons/unicorn_clipboard-alt.svg"}
+                width={24}
+                height={24}
+                alt=""
+              />
+            </button>
+          </div>
+          <SyntaxHighlighter
+            className="w-full bg-transparent overflow-x-hidden scroll resize-none"
+            language="jsx"
+            style={atomOneDark}
+            customStyle={{ padding: "12px", background: "transparent" }}
+            wrapLongLines={true}
+          >
+            {highlightCode?.stringCode}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export default ApiPane;
\ No newline at end of file
diff --git a/web-client/app/_components/ApiStep/index.tsx b/web-client/app/_components/ApiStep/index.tsx
index ea00464f6d..f310571fe8 100644
--- a/web-client/app/_components/ApiStep/index.tsx
+++ b/web-client/app/_components/ApiStep/index.tsx
@@ -1,15 +1,15 @@
-type Props = {
-  title: string;
-  description: string;
-};
-
-export const ApiStep: React.FC<Props> = ({ description, title }) => {
-  return (
-    <div className="gap-2 flex flex-col">
-      <span className="text-[#8A8A8A]">{title}</span>
-      <div className="flex flex-col gap-[10px] p-[18px] bg-[#F9F9F9] overflow-y-hidden">
-        <pre className="text-sm leading-5 text-black">{description}</pre>
-      </div>
-    </div>
-  );
-};
+type Props = {
+  title: string;
+  description: string;
+};
+
+export const ApiStep: React.FC<Props> = ({ description, title }) => {
+  return (
+    <div className="gap-2 flex flex-col">
+      <span className="text-[#8A8A8A]">{title}</span>
+      <div className="flex flex-col gap-[10px] p-[18px] bg-[#F9F9F9] overflow-y-hidden">
+        <pre className="text-sm leading-5 text-black">{description}</pre>
+      </div>
+    </div>
+  );
+};
diff --git a/web-client/app/_components/BasicPromptAccessories/index.tsx b/web-client/app/_components/BasicPromptAccessories/index.tsx
new file mode 100644
index 0000000000..3921e0f2b2
--- /dev/null
+++ b/web-client/app/_components/BasicPromptAccessories/index.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  currentConversationAtom,
+  showingAdvancedPromptAtom,
+} from "@/_helpers/JotaiWrapper";
+import { useAtomValue, useSetAtom } from "jotai";
+import SecondaryButton from "../SecondaryButton";
+import SendButton from "../SendButton";
+import { ProductType } from "@/_models/Product";
+
+const BasicPromptAccessories: React.FC = () => {
+  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);
+  const currentConversation = useAtomValue(currentConversationAtom);
+
+  const shouldShowAdvancedPrompt =
+    currentConversation?.product.type === ProductType.ControlNet;
+
+  return (
+    <div
+      style={{
+        backgroundColor: "#F8F8F8",
+        borderWidth: 1,
+        borderColor: "#D1D5DB",
+      }}
+      className="flex justify-between py-2 pl-3 pr-2 rounded-b-lg"
+    >
+      {shouldShowAdvancedPrompt && (
+        <SecondaryButton
+          title="Advanced"
+          onClick={() => setShowingAdvancedPrompt(true)}
+        />
+      )}
+      <div className="flex justify-end items-center space-x-1 w-full pr-3" />
+      {!shouldShowAdvancedPrompt && <SendButton />}
+    </div>
+  );
+};
+
+export default BasicPromptAccessories;
diff --git a/web-client/app/_components/BasicPromptButton/index.tsx b/web-client/app/_components/BasicPromptButton/index.tsx
new file mode 100644
index 0000000000..3a332e022d
--- /dev/null
+++ b/web-client/app/_components/BasicPromptButton/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { useSetAtom } from "jotai";
+import { ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
+
+const BasicPromptButton: React.FC = () => {
+  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);
+
+  return (
+    <button
+      onClick={() => setShowingAdvancedPrompt(false)}
+      className="flex items-center mx-2 mt-3 mb-[10px] flex-none gap-1 text-xs leading-[18px] text-[#6B7280]"
+    >
+      <ChevronLeftIcon width={20} height={20} />
+      <span className="font-semibold text-gray-500 text-xs">BASIC PROMPT</span>
+    </button>
+  );
+};
+
+export default React.memo(BasicPromptButton);
diff --git a/web-client/app/_components/BasicPromptInput/index.tsx b/web-client/app/_components/BasicPromptInput/index.tsx
new file mode 100644
index 0000000000..ad23c3f958
--- /dev/null
+++ b/web-client/app/_components/BasicPromptInput/index.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
+import useSendChatMessage from "@/_hooks/useSendChatMessage";
+import { useAtom } from "jotai";
+
+const BasicPromptInput: React.FC = () => {
+  const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom);
+  const { sendChatMessage } = useSendChatMessage();
+
+  const handleMessageChange = (event: any) => {
+    setCurrentPrompt(event.target.value);
+  };
+
+  const handleKeyDown = (event: any) => {
+    if (event.key === "Enter") {
+      if (!event.shiftKey) {
+        event.preventDefault();
+        sendChatMessage();
+      }
+    }
+  };
+
+  return (
+    <textarea
+      onKeyDown={handleKeyDown}
+      value={currentPrompt}
+      onChange={handleMessageChange}
+      rows={2}
+      name="comment"
+      id="comment"
+      className="overflow-hidden block w-full scroll resize-none border-0 bg-transparent py-1.5 text-gray-900 transition-height duration-200 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:text-white"
+      placeholder="Add your comment..."
+    />
+  );
+};
+
+export default BasicPromptInput;
diff --git a/web-client/app/_components/ButtonSlider/index.tsx b/web-client/app/_components/ButtonSlider/index.tsx
index 73de6e7850..0851b80444 100644
--- a/web-client/app/_components/ButtonSlider/index.tsx
+++ b/web-client/app/_components/ButtonSlider/index.tsx
@@ -1,45 +1,39 @@
-import Image from "next/image";
-import React, { PropsWithChildren } from "react";
-
-type PropType = PropsWithChildren<
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >
->;
-
-export const PrevButton: React.FC<PropType> = (props) => {
-  const { children, ...restProps } = props;
-
-  return (
-    <button
-      className="embla__button embla__button--prev"
-      type="button"
-      {...restProps}
-    >
-      <Image
-        className="rotate-180"
-        src={"/icons/chevron-right.svg"}
-        width={20}
-        height={20}
-        alt=""
-      />
-      {children}
-    </button>
-  );
-};
-
-export const NextButton: React.FC<PropType> = (props) => {
-  const { children, ...restProps } = props;
-
-  return (
-    <button
-      className="embla__button embla__button--next"
-      type="button"
-      {...restProps}
-    >
-      <Image src={"/icons/chevron-right.svg"} width={20} height={20} alt="" />
-      {children}
-    </button>
-  );
-};
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import React, { PropsWithChildren } from "react";
+
+type PropType = PropsWithChildren<
+  React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >
+>;
+
+export const PrevButton: React.FC<PropType> = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="embla__button embla__button--prev"
+      type="button"
+      {...restProps}
+    >
+      <ChevronLeftIcon width={20} height={20} />
+      {children}
+    </button>
+  );
+};
+
+export const NextButton: React.FC<PropType> = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="embla__button embla__button--next"
+      type="button"
+      {...restProps}
+    >
+      <ChevronRightIcon width={20} height={20} />
+      {children}
+    </button>
+  );
+};
diff --git a/web-client/app/_components/ChangeTheme/index.tsx b/web-client/app/_components/ChangeTheme/index.tsx
index 93a49f5400..74fb7f6a00 100644
--- a/web-client/app/_components/ChangeTheme/index.tsx
+++ b/web-client/app/_components/ChangeTheme/index.tsx
@@ -1,25 +1,25 @@
-import { useTheme } from "next-themes";
-import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";
-
-export const ThemeChanger: React.FC = () => {
-  const { theme, setTheme, systemTheme } = useTheme();
-  const currentTheme = theme === "system" ? systemTheme : theme;
-
-  if (currentTheme === "dark") {
-    return (
-      <SunIcon
-        className="h-6 w-6"
-        aria-hidden="true"
-        onClick={() => setTheme("light")}
-      />
-    );
-  }
-
-  return (
-    <MoonIcon
-      className="h-6 w-6"
-      aria-hidden="true"
-      onClick={() => setTheme("dark")}
-    />
-  );
-};
+import { useTheme } from "next-themes";
+import { SunIcon, MoonIcon } from "@heroicons/react/24/outline";
+
+export const ThemeChanger: React.FC = () => {
+  const { theme, setTheme, systemTheme } = useTheme();
+  const currentTheme = theme === "system" ? systemTheme : theme;
+
+  if (currentTheme === "dark") {
+    return (
+      <SunIcon
+        className="h-6 w-6"
+        aria-hidden="true"
+        onClick={() => setTheme("light")}
+      />
+    );
+  }
+
+  return (
+    <MoonIcon
+      className="h-6 w-6"
+      aria-hidden="true"
+      onClick={() => setTheme("dark")}
+    />
+  );
+};
diff --git a/web-client/app/_components/ChatBody/index.tsx b/web-client/app/_components/ChatBody/index.tsx
index 5a7928684c..26131302fd 100644
--- a/web-client/app/_components/ChatBody/index.tsx
+++ b/web-client/app/_components/ChatBody/index.tsx
@@ -1,186 +1,47 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useStore } from "@/_models/RootStore";
-import { observer } from "mobx-react-lite";
-import { ChatMessage, MessageStatus, MessageType } from "@/_models/ChatMessage";
-import SimpleImageMessage from "../SimpleImageMessage";
-import SimpleTextMessage from "../SimpleTextMessage";
-import { Instance } from "mobx-state-tree";
-import { GenerativeSampleContainer } from "../GenerativeSampleContainer";
-import { AiModelType } from "@/_models/Product";
-import SampleLlmContainer from "@/_components/SampleLlmContainer";
-import SimpleControlNetMessage from "../SimpleControlNetMessage";
-import {
-  GetConversationMessagesQuery,
-  GetConversationMessagesDocument,
-} from "@/graphql";
-import { useLazyQuery } from "@apollo/client";
-import LoadingIndicator from "../LoadingIndicator";
-import StreamTextMessage from "../StreamTextMessage";
-
-type Props = {
-  onPromptSelected: (prompt: string) => void;
-};
-
-export const ChatBody: React.FC<Props> = observer(({ onPromptSelected }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [height, setHeight] = useState(0);
-  const { historyStore } = useStore();
-  const refSmooth = useRef<HTMLDivElement>(null);
-  const [heightContent, setHeightContent] = useState(0);
-
-  const refContent = useRef<HTMLDivElement>(null);
-  const convo = historyStore.getActiveConversation();
-  const [getConversationMessages] = useLazyQuery<GetConversationMessagesQuery>(
-    GetConversationMessagesDocument
+"use client";
+
+import React, { useCallback, useRef, useState } from "react";
+import ChatItem from "../ChatItem";
+import { ChatMessage } from "@/_models/ChatMessage";
+import useChatMessages from "@/_hooks/useChatMessages";
+import { currentChatMessagesAtom } from "@/_helpers/JotaiWrapper";
+import { useAtomValue } from "jotai";
+
+const ChatBody: React.FC = () => {
+  const messages = useAtomValue(currentChatMessagesAtom);
+  const [offset, setOffset] = useState(0);
+  const { loading, hasMore } = useChatMessages(offset);
+  const intersectObs = useRef<any>(null);
+
+  const lastPostRef = useCallback(
+    (message: ChatMessage) => {
+      if (loading) return;
+
+      if (intersectObs.current) intersectObs.current.disconnect();
+
+      intersectObs.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasMore) {
+          setOffset((prevOffset) => prevOffset + 5);
+        }
+      });
+
+      if (message) intersectObs.current.observe(message);
+    },
+    [loading, hasMore]
   );
 
-  useEffect(() => {
-    refSmooth.current?.scrollIntoView({ behavior: "instant" });
-  }, [heightContent]);
-
-  useLayoutEffect(() => {
-    if (refContent.current) {
-      setHeightContent(refContent.current?.offsetHeight);
+  const content = messages.map((message, index) => {
+    if (messages.length === index + 1) {
+      return <ChatItem ref={lastPostRef} message={message} key={message.id} />;
     }
+    return <ChatItem message={message} key={message.id} />;
   });
 
-  useLayoutEffect(() => {
-    if (!ref.current) return;
-    setHeight(ref.current?.offsetHeight);
-  }, []);
-
-  const loadFunc = () => {
-    historyStore.fetchMoreMessages(getConversationMessages);
-  };
-
-  const messages = historyStore.getActiveMessages();
-
-  const shouldShowSampleContainer = messages.length === 0;
-
-  const shouldShowImageSampleContainer =
-    shouldShowSampleContainer &&
-    convo &&
-    convo.product.type === AiModelType.GenerativeArt;
-
-  const model = convo?.product;
-
-  const handleScroll = () => {
-    if (!scrollRef.current) return;
-    if (
-      scrollRef.current?.clientHeight - scrollRef.current?.scrollTop + 1 >=
-      scrollRef.current?.scrollHeight
-    ) {
-      loadFunc();
-    }
-  };
-
-  useEffect(() => {
-    loadFunc();
-    scrollRef.current?.addEventListener("scroll", handleScroll);
-    return () => {
-      scrollRef.current?.removeEventListener("scroll", handleScroll);
-    };
-  }, [scrollRef.current]);
-
   return (
-    <div className="flex-grow flex flex-col h-fit" ref={ref}>
-      {shouldShowSampleContainer && model ? (
-        shouldShowImageSampleContainer ? (
-          <GenerativeSampleContainer
-            model={convo?.product}
-            onPromptSelected={onPromptSelected}
-          />
-        ) : (
-          <SampleLlmContainer
-            model={convo?.product}
-            onPromptSelected={onPromptSelected}
-          />
-        )
-      ) : (
-        <div
-          className="flex flex-col-reverse scroll"
-          style={{
-            height: height + "px",
-            overflowX: "hidden",
-          }}
-          ref={scrollRef}
-        >
-          <div
-            className="flex flex-col justify-end gap-8 py-2"
-            ref={refContent}
-          >
-            {messages.map((message, index) => renderItem(index, message))}
-            <div ref={refSmooth}>
-              {convo?.isWaitingForModelResponse && (
-                <div className="w-[50px] h-[50px] px-2 flex flex-row items-start justify-start">
-                  <LoadingIndicator />
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
+    <div className="flex flex-col-reverse flex-1 py-4 overflow-y-auto scroll">
+      {content}
     </div>
   );
-});
-
-const renderItem = (
-  index: number,
-  {
-    id,
-    messageType,
-    senderAvatarUrl,
-    senderName,
-    createdAt,
-    imageUrls,
-    text,
-    status,
-  }: Instance<typeof ChatMessage>
-) => {
-  switch (messageType) {
-    case MessageType.ImageWithText:
-      return (
-        <SimpleControlNetMessage
-          key={index}
-          avatarUrl={senderAvatarUrl ?? "/icons/app_icon.svg"}
-          senderName={senderName}
-          createdAt={createdAt}
-          imageUrls={imageUrls ?? []}
-          text={text ?? ""}
-        />
-      );
-    case MessageType.Image:
-      return (
-        <SimpleImageMessage
-          key={index}
-          avatarUrl={senderAvatarUrl ?? "/icons/app_icon.svg"}
-          senderName={senderName}
-          createdAt={createdAt}
-          imageUrls={imageUrls ?? []}
-          text={text}
-        />
-      );
-    case MessageType.Text:
-      return status === MessageStatus.Ready ? (
-        <SimpleTextMessage
-          key={index}
-          avatarUrl={senderAvatarUrl ?? "/icons/app_icon.svg"}
-          senderName={senderName}
-          createdAt={createdAt}
-          text={text}
-        />
-      ) : (
-        <StreamTextMessage
-          key={index}
-          id={id}
-          avatarUrl={senderAvatarUrl ?? "/icons/app_icon.svg"}
-          senderName={senderName}
-          createdAt={createdAt}
-          text={text}
-        />
-      );
-    default:
-      return null;
-  }
 };
+
+export default ChatBody;
diff --git a/web-client/app/_components/ChatBody/renderChatMessage.tsx b/web-client/app/_components/ChatBody/renderChatMessage.tsx
new file mode 100644
index 0000000000..7158b43581
--- /dev/null
+++ b/web-client/app/_components/ChatBody/renderChatMessage.tsx
@@ -0,0 +1,66 @@
+import SimpleControlNetMessage from "../SimpleControlNetMessage";
+import SimpleImageMessage from "../SimpleImageMessage";
+import SimpleTextMessage from "../SimpleTextMessage";
+import { ChatMessage, MessageType } from "@/_models/ChatMessage";
+import StreamTextMessage from "../StreamTextMessage";
+import { useAtom } from "jotai";
+import { currentStreamingMessageAtom } from "@/_helpers/JotaiWrapper";
+
+export default function renderChatMessage({
+  id,
+  messageType,
+  senderAvatarUrl,
+  senderName,
+  createdAt,
+  imageUrls,
+  text,
+  status,
+}: ChatMessage): React.ReactNode {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [message, _] = useAtom(currentStreamingMessageAtom);
+  switch (messageType) {
+    case MessageType.ImageWithText:
+      return (
+        <SimpleControlNetMessage
+          key={id}
+          avatarUrl={senderAvatarUrl}
+          senderName={senderName}
+          createdAt={createdAt}
+          imageUrls={imageUrls ?? []}
+          text={text ?? ""}
+        />
+      );
+    case MessageType.Image:
+      return (
+        <SimpleImageMessage
+          key={id}
+          avatarUrl={senderAvatarUrl}
+          senderName={senderName}
+          createdAt={createdAt}
+          imageUrls={imageUrls ?? []}
+          text={text}
+        />
+      );
+    case MessageType.Text:
+      return id !== message?.id ? (
+        <SimpleTextMessage
+          key={id}
+          avatarUrl={senderAvatarUrl}
+          senderName={senderName}
+          createdAt={createdAt}
+          text={text}
+        />
+      ) : (
+        <StreamTextMessage
+          key={id}
+          id={id}
+          avatarUrl={senderAvatarUrl}
+          senderName={senderName}
+          createdAt={createdAt}
+          text={text}
+        />
+      );
+    default:
+      return null;
+  }
+}
diff --git a/web-client/app/_components/ChatContainer/index.tsx b/web-client/app/_components/ChatContainer/index.tsx
index 55f2c3586c..391ad60c27 100644
--- a/web-client/app/_components/ChatContainer/index.tsx
+++ b/web-client/app/_components/ChatContainer/index.tsx
@@ -1,91 +1,30 @@
 "use client";
-import { useState, useEffect } from "react";
-import { ChatBody } from "../ChatBody";
-import { InputToolbar } from "../InputToolbar";
-import { UserToolbar } from "../UserToolbar";
-import ModelMenu from "../ModelMenu";
-import { useStore } from "@/_models/RootStore";
-import { observer } from "mobx-react-lite";
-import ConfirmDeleteConversationModal from "../ConfirmDeleteConversationModal";
-import { ModelDetailSideBar } from "../ModelDetailSideBar";
-import NewChatBlankState from "../NewChatBlankState";
-import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
-import {
-  DeleteConversationMutation,
-  DeleteConversationDocument,
-} from "@/graphql";
-import { useMutation } from "@apollo/client";
-
-const ChatContainer: React.FC = observer(() => {
-  const [prefillPrompt, setPrefillPrompt] = useState("");
-  const { historyStore } = useStore();
-  const { user } = useGetCurrentUser();
-  const showBodyChat = historyStore.activeConversationId != null;
-  const conversation = historyStore.getActiveConversation();
-  const [deleteConversation] = useMutation<DeleteConversationMutation>(
-    DeleteConversationDocument
-  );
 
-  useEffect(() => {
-    if (!user) {
-      historyStore.clearAllConversations();
-    }
-  }, [user]);
+import ModelDetailSideBar from "../ModelDetailSideBar";
+import ProductOverview from "../ProductOverview";
+import { useAtomValue } from "jotai";
+import {
+  getActiveConvoIdAtom,
+  showingProductDetailAtom,
+} from "@/_helpers/JotaiWrapper";
+import { ReactNode } from "react";
 
-  const [open, setOpen] = useState(false);
+type Props = {
+  children: ReactNode;
+};
 
-  const onConfirmDelete = () => {
-    setPrefillPrompt("");
-    historyStore.closeModelDetail();
-    if (conversation?.id) {
-      deleteConversation({ variables: { id: conversation.id } }).then(() =>
-        historyStore.deleteConversationById(conversation.id)
-      );
-    }
-    setOpen(false);
-  };
+export default function ChatContainer({ children }: Props) {
+  const activeConvoId = useAtomValue(getActiveConvoIdAtom);
+  const showingProductDetail = useAtomValue(showingProductDetailAtom);
 
-  const onSuggestPromptClick = (prompt: string) => {
-    if (prompt !== prefillPrompt) {
-      setPrefillPrompt(prompt);
-    }
-  };
+  if (!activeConvoId) {
+    return <ProductOverview />;
+  }
 
   return (
-    <div className="flex flex-1 h-full overflow-y-hidden">
-      <ConfirmDeleteConversationModal
-        open={open}
-        setOpen={setOpen}
-        onConfirmDelete={onConfirmDelete}
-      />
-      {showBodyChat ? (
-        <div className="flex-1 flex flex-col w-full">
-          <div className="flex w-full overflow-hidden flex-shrink-0 px-3 py-1 border-b dark:bg-gray-950 border-gray-200 bg-white shadow-sm sm:px-3 lg:px-3">
-            {/* Separator */}
-            <div
-              className="h-full w-px bg-gray-200 lg:hidden"
-              aria-hidden="true"
-            />
-
-            <div className="flex justify-between self-stretch flex-1">
-              <UserToolbar />
-              <ModelMenu
-                onDeleteClick={() => setOpen(true)}
-                onCreateConvClick={() => {}}
-              />
-            </div>
-          </div>
-          <div className="flex flex-col h-full px-1 sm:px-2 lg:px-3 overflow-hidden">
-            <ChatBody onPromptSelected={onSuggestPromptClick} />
-            <InputToolbar prefillPrompt={prefillPrompt} />
-          </div>
-        </div>
-      ) : (
-        <NewChatBlankState />
-      )}
-      <ModelDetailSideBar onPromptClick={onSuggestPromptClick} />
+    <div className="flex flex-1 overflow-hidden">
+      {children}
+      {showingProductDetail ? <ModelDetailSideBar /> : null}
     </div>
   );
-});
-
-export default ChatContainer;
+}
diff --git a/web-client/app/_components/ChatItem/index.tsx b/web-client/app/_components/ChatItem/index.tsx
new file mode 100644
index 0000000000..73d7f17210
--- /dev/null
+++ b/web-client/app/_components/ChatItem/index.tsx
@@ -0,0 +1,19 @@
+import React, { forwardRef } from "react";
+import renderChatMessage from "../ChatBody/renderChatMessage";
+import { ChatMessage } from "@/_models/ChatMessage";
+
+type Props = {
+  message: ChatMessage;
+};
+
+type Ref = HTMLDivElement;
+
+const ChatItem = forwardRef<Ref, Props>(({ message }, ref) => {
+  const item = renderChatMessage(message);
+
+  const content = ref ? <div ref={ref}>{item}</div> : item;
+
+  return content;
+});
+
+export default ChatItem;
diff --git a/web-client/app/_components/CompactHistoryItem/index.tsx b/web-client/app/_components/CompactHistoryItem/index.tsx
index edbd674948..9112e1f0eb 100644
--- a/web-client/app/_components/CompactHistoryItem/index.tsx
+++ b/web-client/app/_components/CompactHistoryItem/index.tsx
@@ -1,32 +1,30 @@
-import { useStore } from "@/_models/RootStore";
+import {
+  getActiveConvoIdAtom,
+  setActiveConvoIdAtom,
+} from "@/_helpers/JotaiWrapper";
+import { useAtomValue, useSetAtom } from "jotai";
 import Image from "next/image";
-import React from "react";
 
 type Props = {
   imageUrl: string;
-  isSelected: boolean;
   conversationId: string;
 };
 
-const CompactHistoryItem: React.FC<Props> = ({
-  imageUrl,
-  isSelected,
-  conversationId,
-}) => {
-  const { historyStore } = useStore();
-  const onClick = () => {
-    historyStore.setActiveConversationId(conversationId);
-  };
+const CompactHistoryItem: React.FC<Props> = ({ imageUrl, conversationId }) => {
+  const activeConvoId = useAtomValue(getActiveConvoIdAtom);
+  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
+
+  const isSelected = activeConvoId === conversationId;
 
   return (
     <button
-      onClick={onClick}
+      onClick={() => setActiveConvoId(conversationId)}
       className={`${
         isSelected ? "bg-gray-100" : "bg-transparent"
-      } p-2 rounded-lg`}
+      } w-14 h-14 rounded-lg`}
     >
       <Image
-        className="rounded-full"
+        className="rounded-full mx-auto"
         src={imageUrl}
         width={36}
         height={36}
@@ -36,4 +34,4 @@ const CompactHistoryItem: React.FC<Props> = ({
   );
 };
 
-export default React.memo(CompactHistoryItem);
+export default CompactHistoryItem;
diff --git a/web-client/app/_components/CompactHistoryList/index.tsx b/web-client/app/_components/CompactHistoryList/index.tsx
new file mode 100644
index 0000000000..0d022d2dcb
--- /dev/null
+++ b/web-client/app/_components/CompactHistoryList/index.tsx
@@ -0,0 +1,21 @@
+import { useAtomValue } from "jotai";
+import CompactHistoryItem from "../CompactHistoryItem";
+import { userConversationsAtom } from "@/_helpers/JotaiWrapper";
+
+const CompactHistoryList: React.FC = () => {
+  const conversations = useAtomValue(userConversationsAtom);
+
+  return (
+    <div className="flex flex-col flex-1 gap-1 mt-3">
+      {conversations.map(({ id, product }) => (
+        <CompactHistoryItem
+          key={id}
+          conversationId={id}
+          imageUrl={product.avatarUrl ?? ""}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CompactHistoryList;
diff --git a/web-client/app/_components/CompactLogo/index.tsx b/web-client/app/_components/CompactLogo/index.tsx
index 86a9217cc6..bb0fb6a009 100644
--- a/web-client/app/_components/CompactLogo/index.tsx
+++ b/web-client/app/_components/CompactLogo/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import JanImage from "../JanImage";
+import { setActiveConvoIdAtom } from "@/_helpers/JotaiWrapper";
+import { useSetAtom } from "jotai";
 
-type Props = {
-  onClick: () => void;
-};
+const CompactLogo: React.FC = () => {
+  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
 
-const CompactLogo: React.FC<Props> = ({ onClick }) => {
   return (
-    <button onClick={onClick}>
+    <button onClick={() => setActiveConvoId(undefined)}>
       <JanImage imageUrl="/icons/app_icon.svg" width={28} height={28} />
     </button>
   );
diff --git a/web-client/app/_components/CompactSideBar/index.tsx b/web-client/app/_components/CompactSideBar/index.tsx
index 220dd6c9c4..520dec8c9a 100644
--- a/web-client/app/_components/CompactSideBar/index.tsx
+++ b/web-client/app/_components/CompactSideBar/index.tsx
@@ -1,33 +1,11 @@
-"use client"
-import { observer } from "mobx-react-lite";
+import CompactHistoryList from "../CompactHistoryList";
 import CompactLogo from "../CompactLogo";
-import CompactHistoryItem from "../CompactHistoryItem";
-import { useStore } from "@/_models/RootStore";
 
-export const CompactSideBar: React.FC = observer(() => {
-  const { historyStore } = useStore();
+const CompactSideBar: React.FC = () => (
+  <div className="h-screen w-16 border-r border-gray-300 flex flex-col items-center pt-3 gap-3">
+    <CompactLogo />
+    <CompactHistoryList />
+  </div>
+);
 
-  const onLogoClick = () => {
-    historyStore.clearActiveConversationId();
-  };
-
-  return (
-    <div
-      className={`${
-        !historyStore.showAdvancedPrompt ? "hidden" : "block"
-      } h-screen border-r border-gray-300 flex flex-col items-center pt-3 gap-3`}
-    >
-      <CompactLogo onClick={onLogoClick} />
-      <div className="flex flex-col gap-1 mx-1 mt-3 overflow-x-hidden">
-        {historyStore.conversations.map(({ id, product: aiModel }) => (
-          <CompactHistoryItem
-            key={id}
-            conversationId={id}
-            imageUrl={aiModel.avatarUrl ?? ""}
-            isSelected={historyStore.activeConversationId === id}
-          />
-        ))}
-      </div>
-    </div>
-  );
-});
+export default CompactSideBar;
diff --git a/web-client/app/_components/ConfirmDeleteConversationModal/index.tsx b/web-client/app/_components/ConfirmDeleteConversationModal/index.tsx
index 60f2e54488..baa7ac4714 100644
--- a/web-client/app/_components/ConfirmDeleteConversationModal/index.tsx
+++ b/web-client/app/_components/ConfirmDeleteConversationModal/index.tsx
@@ -1,27 +1,26 @@
+import { showConfirmDeleteConversationModalAtom } from "@/_helpers/JotaiWrapper";
+import useDeleteConversation from "@/_hooks/useDeleteConversation";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-import React, { Fragment, useRef, useState } from "react";
+import { useAtom } from "jotai";
+import React, { Fragment, useRef } from "react";
 
-type Props = {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  onConfirmDelete: () => void;
-};
-
-const ConfirmDeleteConversationModal: React.FC<Props> = ({
-  open,
-  setOpen,
-  onConfirmDelete,
-}) => {
+const ConfirmDeleteConversationModal: React.FC = () => {
+  const [show, setShow] = useAtom(showConfirmDeleteConversationModalAtom);
   const cancelButtonRef = useRef(null);
+  const { deleteConvo } = useDeleteConversation();
+
+  const onConfirmDelete = () => {
+    deleteConvo().then(() => setShow(false));
+  };
 
   return (
-    <Transition.Root show={open} as={Fragment}>
+    <Transition.Root show={show} as={Fragment}>
       <Dialog
         as="div"
         className="relative z-10"
         initialFocus={cancelButtonRef}
-        onClose={setOpen}
+        onClose={setShow}
       >
         <Transition.Child
           as={Fragment}
@@ -81,7 +80,7 @@ const ConfirmDeleteConversationModal: React.FC<Props> = ({
                   <button
                     type="button"
                     className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                    onClick={() => setOpen(false)}
+                    onClick={() => setShow(false)}
                     ref={cancelButtonRef}
                   >
                     Cancel
diff --git a/web-client/app/_components/ConfirmSignOutModal/index.tsx b/web-client/app/_components/ConfirmSignOutModal/index.tsx
index 349b5c963c..13a2c86876 100644
--- a/web-client/app/_components/ConfirmSignOutModal/index.tsx
+++ b/web-client/app/_components/ConfirmSignOutModal/index.tsx
@@ -1,22 +1,21 @@
 import React, { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
+import { showConfirmSignOutModalAtom } from "@/_helpers/JotaiWrapper";
+import { useAtom } from "jotai";
+import useSignOut from "@/_hooks/useSignOut";
 
-type Props = {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-  onConfirm: () => void;
-};
+const ConfirmSignOutModal: React.FC = () => {
+  const [show, setShow] = useAtom(showConfirmSignOutModalAtom);
+  const { signOut } = useSignOut();
 
-const ConfirmSignOutModal: React.FC<Props> = ({ open, setOpen, onConfirm }) => {
   const onLogOutClick = () => {
-    onConfirm();
-    setOpen(false);
+    signOut().then(() => setShow(false));
   };
 
   return (
-    <Transition.Root show={open} as={Fragment}>
-      <Dialog as="div" className="relative z-10" onClose={setOpen}>
+    <Transition.Root show={show} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={setShow}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -73,7 +72,7 @@ const ConfirmSignOutModal: React.FC<Props> = ({ open, setOpen, onConfirm }) => {
                   <button
                     type="button"
                     className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                    onClick={() => setOpen(false)}
+                    onClick={() => setShow(false)}
                   >
                     Cancel
                   </button>
diff --git a/web-client/app/_components/ConversationalCard/index.tsx b/web-client/app/_components/ConversationalCard/index.tsx
index 18de054cd1..d1c0c080f7 100644
--- a/web-client/app/_components/ConversationalCard/index.tsx
+++ b/web-client/app/_components/ConversationalCard/index.tsx
@@ -1,18 +1,16 @@
 import React from "react";
 import Image from "next/image";
-import {
-  ProductDetailFragment,
-} from "@/graphql";
 import useCreateConversation from "@/_hooks/useCreateConversation";
+import { Product } from "@/_models/Product";
 
 type Props = {
-  product: ProductDetailFragment;
+  product: Product;
 };
 
 const ConversationalCard: React.FC<Props> = ({ product }) => {
   const { requestCreateConvo } = useCreateConversation();
 
-  const { name, image_url, description } = product;
+  const { name, avatarUrl, description } = product;
 
   return (
     <button
@@ -25,7 +23,7 @@ const ConversationalCard: React.FC<Props> = ({ product }) => {
         <Image
           width={32}
           height={32}
-          src={image_url ?? ""}
+          src={avatarUrl ?? ""}
           className="rounded-full"
           alt=""
         />
diff --git a/web-client/app/_components/ConversationalList/index.tsx b/web-client/app/_components/ConversationalList/index.tsx
index 710647c167..bf9111d377 100644
--- a/web-client/app/_components/ConversationalList/index.tsx
+++ b/web-client/app/_components/ConversationalList/index.tsx
@@ -1,22 +1,22 @@
+import { Product } from "@/_models/Product";
 import ConversationalCard from "../ConversationalCard";
-import Image from "next/image";
-import { ProductDetailFragment } from "@/graphql";
+import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
 
 type Props = {
-  products: ProductDetailFragment[];
+  products: Product[];
 };
 
 const ConversationalList: React.FC<Props> = ({ products }) => (
   <>
     <div className="flex items-center gap-3 mt-8 mb-2">
-      <Image src={"/icons/messicon.svg"} width={24} height={24} alt="" />
+      <ChatBubbleBottomCenterTextIcon width={24} height={24} className="ml-6" />
       <span className="font-semibold text-gray-900 dark:text-white">
         Conversational
       </span>
     </div>
-    <div className="mt-2 flex w-full gap-2 overflow-x-scroll scroll overflow-hidden">
+    <div className="mt-2 pl-6 flex w-full gap-2 overflow-x-scroll scroll overflow-hidden">
       {products.map((item) => (
-        <ConversationalCard key={item.name} product={item} />
+        <ConversationalCard key={item.slug} product={item} />
       ))}
     </div>
   </>
diff --git a/web-client/app/_components/Draggable/index.tsx b/web-client/app/_components/Draggable/index.tsx
deleted file mode 100644
index 34ea2540f6..0000000000
--- a/web-client/app/_components/Draggable/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useState } from "react";
-import { useStore } from "@/_models/RootStore";
-
-type Props = {
-  targetRef: React.RefObject<HTMLDivElement>;
-};
-
-export const Draggable: React.FC<Props> = ({ targetRef }) => {
-  const { historyStore } = useStore();
-  const [initialPos, setInitialPos] = useState<number | null>(null);
-  const [initialSize, setInitialSize] = useState<number | null>(null);
-  const [width, setWidth] = useState<number>(0);
-
-  const initial = (e: React.DragEvent<HTMLDivElement>) => {
-    setInitialPos(e.clientX);
-    setInitialSize(targetRef.current?.offsetWidth ?? 0);
-  };
-
-  const resize = (e: React.DragEvent<HTMLDivElement>) => {
-    if (initialPos !== null && initialSize !== null) {
-      setWidth(initialSize - (e.clientX - initialPos));
-      targetRef.current!.style.width = `${width}px`;
-    }
-    if (width <= 270) {
-      historyStore.closeModelDetail();
-    }
-  };
-
-  return (
-    <div
-      className="absolute left-0 top-0 w-1 h-full cursor-ew-resize"
-      draggable={true}
-      onDrag={resize}
-      onDragStart={initial}
-    ></div>
-  );
-};
diff --git a/web-client/app/_components/DropdownList/index.tsx b/web-client/app/_components/DropdownList/index.tsx
index 51a81a4e51..f103f82f39 100644
--- a/web-client/app/_components/DropdownList/index.tsx
+++ b/web-client/app/_components/DropdownList/index.tsx
@@ -1,64 +1,64 @@
-import { Fragment, useState } from "react";
-import { Menu, Transition } from "@headlessui/react";
-import Image from "next/image";
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(" ");
-}
-
-type Props = {
-  title: string;
-  data: string[];
-};
-
-export const DropdownsList: React.FC<Props> = ({ data, title }) => {
-  const [checked, setChecked] = useState(data[0]);
-
-  return (
-    <Menu as="div" className="relative w-full text-left">
-      <div className="pt-2 gap-2 flex flex-col">
-        <h2 className="text-[#111928] text-sm">{title}</h2>
-        <Menu.Button className="inline-flex w-full items-center justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
-          {checked}
-          <Image
-            src={"/icons/unicorn_angle-down.svg"}
-            width={12}
-            height={12}
-            alt=""
-          />
-        </Menu.Button>
-      </div>
-
-      <Transition
-        as={Fragment}
-        enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
-      >
-        <Menu.Items className="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-          <div className="py-1">
-            {data.map((item, index) => (
-              <Menu.Item key={index}>
-                {({ active }) => (
-                  <a
-                    onClick={() => setChecked(item)}
-                    href="#"
-                    className={classNames(
-                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
-                      "block px-4 py-2 text-sm"
-                    )}
-                  >
-                    {item}
-                  </a>
-                )}
-              </Menu.Item>
-            ))}
-          </div>
-        </Menu.Items>
-      </Transition>
-    </Menu>
-  );
-};
+import { Fragment, useState } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import Image from "next/image";
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(" ");
+}
+
+type Props = {
+  title: string;
+  data: string[];
+};
+
+export const DropdownsList: React.FC<Props> = ({ data, title }) => {
+  const [checked, setChecked] = useState(data[0]);
+
+  return (
+    <Menu as="div" className="relative w-full text-left">
+      <div className="pt-2 gap-2 flex flex-col">
+        <h2 className="text-[#111928] text-sm">{title}</h2>
+        <Menu.Button className="inline-flex w-full items-center justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+          {checked}
+          <Image
+            src={"/icons/unicorn_angle-down.svg"}
+            width={12}
+            height={12}
+            alt=""
+          />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="py-1">
+            {data.map((item, index) => (
+              <Menu.Item key={index}>
+                {({ active }) => (
+                  <a
+                    onClick={() => setChecked(item)}
+                    href="#"
+                    className={classNames(
+                      active ? "bg-gray-100 text-gray-900" : "text-gray-700",
+                      "block px-4 py-2 text-sm"
+                    )}
+                  >
+                    {item}
+                  </a>
+                )}
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
diff --git a/web-client/app/_components/ExpandableHeader/index.tsx b/web-client/app/_components/ExpandableHeader/index.tsx
new file mode 100644
index 0000000000..347c48487f
--- /dev/null
+++ b/web-client/app/_components/ExpandableHeader/index.tsx
@@ -0,0 +1,24 @@
+import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+
+type Props = {
+  title: string;
+  expanded: boolean;
+  onClick: () => void;
+};
+
+const ExpandableHeader: React.FC<Props> = ({ title, expanded, onClick }) => (
+  <button onClick={onClick} className="flex items-center justify-between px-2">
+    <h2 className="text-gray-400 font-bold text-[12px] leading-[12px] pl-1">
+      {title}
+    </h2>
+    <div className="mr-2">
+      {expanded ? (
+        <ChevronDownIcon width={12} height={12} color="#6B7280" />
+      ) : (
+        <ChevronUpIcon width={12} height={12} color="#6B7280" />
+      )}
+    </div>
+  </button>
+);
+
+export default ExpandableHeader;
diff --git a/web-client/app/_components/GenerateImageCard/index.tsx b/web-client/app/_components/GenerateImageCard/index.tsx
index 1e274058e7..601a15d7e9 100644
--- a/web-client/app/_components/GenerateImageCard/index.tsx
+++ b/web-client/app/_components/GenerateImageCard/index.tsx
@@ -1,23 +1,21 @@
 import useCreateConversation from "@/_hooks/useCreateConversation";
-import { ProductDetailFragment } from "@/graphql";
-import { useCallback } from "react";
+import { Product } from "@/_models/Product";
 
 type Props = {
-  product: ProductDetailFragment;
+  product: Product;
 };
 
 const GenerateImageCard: React.FC<Props> = ({ product }) => {
-  const { name, image_url } = product;
+  const { name, avatarUrl } = product;
   const { requestCreateConvo } = useCreateConversation();
 
-  const onClick = useCallback(() => {
-    requestCreateConvo(product);
-  }, [product]);
-
   return (
-    <button onClick={onClick} className="relative active:opacity-50 text-left">
+    <button
+      onClick={() => requestCreateConvo(product)}
+      className="relative active:opacity-50 text-left"
+    >
       <img
-        src={image_url ?? ""}
+        src={avatarUrl}
         alt=""
         className="w-full h-full rounded-[8px] bg-gray-200 group-hover:opacity-75 object-cover object-center"
       />
diff --git a/web-client/app/_components/GenerateImageList/index.tsx b/web-client/app/_components/GenerateImageList/index.tsx
index 1e9e1cd1fa..52dfdbf96d 100644
--- a/web-client/app/_components/GenerateImageList/index.tsx
+++ b/web-client/app/_components/GenerateImageList/index.tsx
@@ -1,33 +1,27 @@
-import Image from "next/image";
+import { Product } from "@/_models/Product";
 import GenerateImageCard from "../GenerateImageCard";
-import { ProductDetailFragment } from "@/graphql";
+import { PhotoIcon } from "@heroicons/react/24/outline";
 
 type Props = {
-  products: ProductDetailFragment[];
+  products: Product[];
 };
 
-const GenerateImageList: React.FC<Props> = ({ products }) => {
-  if (products.length === 0) {
-    return <div></div>;
-  }
-
-  return (
-    <div className="pb-4">
-      <div className="flex mt-4 justify-between">
-        <div className="gap-4 flex items-center">
-          <Image src={"icons/ic_image.svg"} width={20} height={20} alt="" />
-          <h2 className="text-gray-900 font-bold dark:text-white">
-            Generate Images
-          </h2>
-        </div>
-      </div>
-      <div className="mt-2 grid grid-cols-2 gap-6 sm:gap-x-6 md:grid-cols-4 md:gap-8">
-        {products.map((item) => (
-          <GenerateImageCard key={item.name} product={item} />
-        ))}
+const GenerateImageList: React.FC<Props> = ({ products }) => (
+  <>
+    {products.length === 0 ? null : (
+      <div className="flex items-center gap-3 mt-8 mb-2">
+        <PhotoIcon width={24} height={24} className="ml-6" />
+        <span className="font-semibold text-gray-900 dark:text-white">
+          Generate Images
+        </span>
       </div>
+    )}
+    <div className="mt-2 mx-6 mb-6 grid grid-cols-2 gap-6 sm:gap-x-6 md:grid-cols-4 md:gap-8">
+      {products.map((item) => (
+        <GenerateImageCard key={item.name} product={item} />
+      ))}
     </div>
-  );
-};
+  </>
+);
 
 export default GenerateImageList;
diff --git a/web-client/app/_components/GenerativeSampleContainer/index.tsx b/web-client/app/_components/GenerativeSampleContainer/index.tsx
index f5bb93055d..f42be8be39 100644
--- a/web-client/app/_components/GenerativeSampleContainer/index.tsx
+++ b/web-client/app/_components/GenerativeSampleContainer/index.tsx
@@ -1,52 +1,49 @@
-import JanWelcomeTitle from "../JanWelcomeTitle";
-import { Product } from "@/_models/Product";
-import { Instance } from "mobx-state-tree";
-import { GetProductPromptsQuery, GetProductPromptsDocument } from "@/graphql";
-import { useQuery } from "@apollo/client";
-
-type Props = {
-  model: Instance<typeof Product>;
-  onPromptSelected: (prompt: string) => void;
-};
-
-export const GenerativeSampleContainer: React.FC<Props> = ({
-  model,
-  onPromptSelected,
-}) => {
-  const { loading, error, data } = useQuery<GetProductPromptsQuery>(
-    GetProductPromptsDocument,
-    {
-      variables: { productSlug: model.id },
-    }
-  );
-
-  return (
-    <div className="flex flex-col max-w-2xl flex-shrink-0 mx-auto mt-6">
-      <JanWelcomeTitle
-        title={model.name}
-        description={model.modelDescription ?? ""}
-      />
-      <div className="flex flex-col">
-        <h2 className="font-semibold text-xl leading-6 tracking-[-0.4px] mb-5">
-          Create now
-        </h2>
-        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
-          {data?.prompts.map((item) => (
-            <button
-              key={item.slug}
-              onClick={() => onPromptSelected(item.content ?? "")}
-              className="w-full h-full"
-            >
-              <img
-                style={{ objectFit: "cover" }}
-                className="w-full h-full rounded col-span-1 flex flex-col"
-                src={item.image_url ?? ""}
-                alt=""
-              />
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
+import JanWelcomeTitle from "../JanWelcomeTitle";
+import { GetProductPromptsQuery, GetProductPromptsDocument } from "@/graphql";
+import { useQuery } from "@apollo/client";
+import { Product } from "@/_models/Product";
+import { useSetAtom } from "jotai";
+import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
+
+type Props = {
+  product: Product;
+};
+
+const GenerativeSampleContainer: React.FC<Props> = ({ product }) => {
+  const setCurrentPrompt = useSetAtom(currentPromptAtom);
+  const { data } = useQuery<GetProductPromptsQuery>(GetProductPromptsDocument, {
+    variables: { productSlug: product.slug },
+  });
+
+  return (
+    <div className="flex flex-col max-w-2xl flex-shrink-0 mx-auto mt-6">
+      <JanWelcomeTitle
+        title={product.name}
+        description={product.longDescription}
+      />
+      <div className="flex flex-col">
+        <h2 className="font-semibold text-xl leading-6 tracking-[-0.4px] mb-5">
+          Create now
+        </h2>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+          {data?.prompts.map((item) => (
+            <button
+              key={item.slug}
+              onClick={() => setCurrentPrompt(item.content ?? "")}
+              className="w-full h-full"
+            >
+              <img
+                style={{ objectFit: "cover" }}
+                className="w-full h-full rounded col-span-1 flex flex-col"
+                src={item.image_url ?? ""}
+                alt=""
+              />
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GenerativeSampleContainer;
diff --git a/web-client/app/_components/HamburgerButton/index.tsx b/web-client/app/_components/HamburgerButton/index.tsx
new file mode 100644
index 0000000000..2efd41bf8d
--- /dev/null
+++ b/web-client/app/_components/HamburgerButton/index.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { showingMobilePaneAtom } from "@/_helpers/JotaiWrapper";
+import { Bars3Icon } from "@heroicons/react/24/outline";
+import { useSetAtom } from "jotai";
+import React from "react";
+
+const HamburgerButton: React.FC = () => {
+  const setShowingMobilePane = useSetAtom(showingMobilePaneAtom);
+  return (
+    <button
+      type="button"
+      className="self-end inline-flex items-center justify-center rounded-md p-1 text-gray-700 lg:hidden"
+      onClick={() => setShowingMobilePane(true)}
+    >
+      <span className="sr-only">Open main menu</span>
+      <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+    </button>
+  );
+};
+
+export default React.memo(HamburgerButton);
diff --git a/web-client/app/_components/Header/index.tsx b/web-client/app/_components/Header/index.tsx
index 0e7ecc9547..98a3a125d6 100644
--- a/web-client/app/_components/Header/index.tsx
+++ b/web-client/app/_components/Header/index.tsx
@@ -1,61 +1,16 @@
-"use client";
-import React, { useState } from "react";
-import { Bars3Icon } from "@heroicons/react/24/outline";
-import MobileMenuPane from "../MobileMenuPane";
-import ConfirmSignOutModal from "../ConfirmSignOutModal";
-import useSignOut from "@/_hooks/useSignOut";
-import { ThemeChanger } from "../ChangeTheme";
-import UserProfileDropDown from "../UserProfileDropDown";
-import useSignIn from "@/_hooks/useSignIn";
-import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
-
-const Header: React.FC = () => {
-  const { signInWithKeyCloak } = useSignIn();
-  const { user, loading } = useGetCurrentUser();
-  const { signOut } = useSignOut();
-
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [showLogOutModal, setShowLogOutModal] = useState(false);
-
-  return (
-    <header
-      id="header"
-      className="text-sm bg-white border-b-[1px] border-gray-200 relative w-full py-3 px-6 dark:bg-gray-800"
-    >
-      <nav className="mx-auto flex items-center" aria-label="Global">
-        <div className="flex items-center flex-1 justify-center" />
-
-        <div className="hidden md:flex items-center gap-2">
-          <ThemeChanger />
-          {loading ? (
-            <div></div>
-          ) : user ? (
-            <UserProfileDropDown
-              onLogOutClick={() => setShowLogOutModal(true)}
-            />
-          ) : (
-            <button onClick={signInWithKeyCloak}>Login</button>
-          )}
-        </div>
-        <div className="flex lg:hidden">
-          <button
-            type="button"
-            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
-            onClick={() => setMobileMenuOpen(true)}
-          >
-            <span className="sr-only">Open main menu</span>
-            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-          </button>
-        </div>
-      </nav>
-      <ConfirmSignOutModal
-        open={showLogOutModal}
-        setOpen={setShowLogOutModal}
-        onConfirm={signOut}
-      />
-      <MobileMenuPane open={mobileMenuOpen} setOpen={setMobileMenuOpen} />
-    </header>
-  );
-};
-
-export default Header;
+import React from "react";
+import UserProfileDropDown from "../UserProfileDropDown";
+import LoginButton from "../LoginButton";
+import HamburgerButton from "../HamburgerButton";
+
+const Header: React.FC = () => (
+  <header className="flex border-b-[1px] border-gray-200 p-3 dark:bg-gray-800">
+    <nav className="flex-1 justify-center">
+      <HamburgerButton />
+    </nav>
+    <LoginButton />
+    <UserProfileDropDown />
+  </header>
+);
+
+export default Header;
diff --git a/web-client/app/_components/HistoryEmpty/index.tsx b/web-client/app/_components/HistoryEmpty/index.tsx
index 6e2f593925..ed4f07f2c9 100644
--- a/web-client/app/_components/HistoryEmpty/index.tsx
+++ b/web-client/app/_components/HistoryEmpty/index.tsx
@@ -1,27 +1,27 @@
-import Image from "next/image";
-import Link from "next/link";
-import React from "react";
-
-const HistoryEmpty: React.FC = () => {
-  return (
-    <div className="flex flex-col w-full h-full items-center justify-center gap-4">
-      <Image
-        src={"/icons/chats-circle-light.svg"}
-        width={50}
-        height={50}
-        alt=""
-      />
-      <p className="text-sm leading-5 text-center text-[#9CA3AF]">
-        Jan allows you to use 100s of AIs on your mobile phone
-      </p>
-      <Link
-        href="/ai"
-        className="bg-[#1F2A37] py-[10px] px-5 gap-2 rounded-[8px] text-[14px] font-medium leading-[21px] text-white"
-      >
-        Explore AIs
-      </Link>
-    </div>
-  );
-};
-
-export default React.memo(HistoryEmpty);
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const HistoryEmpty: React.FC = () => {
+  return (
+    <div className="flex flex-col w-full h-full items-center justify-center gap-4">
+      <Image
+        src={"/icons/chats-circle-light.svg"}
+        width={50}
+        height={50}
+        alt=""
+      />
+      <p className="text-sm leading-5 text-center text-[#9CA3AF]">
+        Jan allows you to use 100s of AIs on your mobile phone
+      </p>
+      <Link
+        href="/ai"
+        className="bg-[#1F2A37] py-[10px] px-5 gap-2 rounded-[8px] text-[14px] font-medium leading-[21px] text-white"
+      >
+        Explore AIs
+      </Link>
+    </div>
+  );
+};
+
+export default React.memo(HistoryEmpty);
diff --git a/web-client/app/_components/HistoryItem/index.tsx b/web-client/app/_components/HistoryItem/index.tsx
index 0f5e575789..66ad887823 100644
--- a/web-client/app/_components/HistoryItem/index.tsx
+++ b/web-client/app/_components/HistoryItem/index.tsx
@@ -1,87 +1,95 @@
-import { AiModelType } from "@/_models/Product";
-import { useStore } from "@/_models/RootStore";
-import { observer } from "mobx-react-lite";
 import React from "react";
 import JanImage from "../JanImage";
 import { displayDate } from "@/_utils/datetime";
+import {
+  conversationStatesAtom,
+  getActiveConvoIdAtom,
+  setActiveConvoIdAtom,
+} from "@/_helpers/JotaiWrapper";
+import { useAtomValue, useSetAtom } from "jotai";
+import { ProductType } from "@/_models/Product";
 import Image from "next/image";
+import { Conversation } from "@/_models/Conversation";
 
 type Props = {
-  conversationId: string;
+  conversation: Conversation;
   avatarUrl: string;
   name: string;
   updatedAt?: number;
 };
 
-const HistoryItem: React.FC<Props> = observer(
-  ({ conversationId, avatarUrl, name, updatedAt }) => {
-    const { historyStore } = useStore();
-    const send = true; // TODO store this in mobx
-    const onClick = () => {
-      historyStore.setActiveConversationId(conversationId);
-    };
+const HistoryItem: React.FC<Props> = ({
+  conversation,
+  avatarUrl,
+  name,
+  updatedAt,
+}) => {
+  const conversationStates = useAtomValue(conversationStatesAtom);
+  const activeConvoId = useAtomValue(getActiveConvoIdAtom);
+  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
+  const isSelected = activeConvoId === conversation.id;
 
-    const conversation = historyStore.getConversationById(conversationId);
-    const isSelected = historyStore.activeConversationId === conversationId;
-    const backgroundColor = isSelected
-      ? "bg-gray-100 dark:bg-gray-700"
-      : "bg-white dark:bg-gray-500";
-
-    let rightImageUrl: string | undefined;
-    if (conversation && conversation.isWaitingForModelResponse) {
-      rightImageUrl = "/icons/loading.svg";
-    } else if (
-      conversation &&
-      conversation.product.type === AiModelType.GenerativeArt &&
-      conversation.lastImageUrl &&
-      conversation.lastImageUrl.trim().startsWith("https://")
-    ) {
-      rightImageUrl = conversation.lastImageUrl;
+  const onClick = () => {
+    if (activeConvoId !== conversation.id) {
+      setActiveConvoId(conversation.id);
     }
+  };
+
+  const backgroundColor = isSelected
+    ? "bg-gray-100 dark:bg-gray-700"
+    : "bg-white dark:bg-gray-500";
+
+  let rightImageUrl: string | undefined;
+  if (conversationStates[conversation.id]?.waitingForResponse === true) {
+    rightImageUrl = "/icons/loading.svg";
+  } else if (
+    conversation &&
+    conversation.product.type === ProductType.GenerativeArt &&
+    conversation.lastImageUrl &&
+    conversation.lastImageUrl.trim().startsWith("https://")
+  ) {
+    rightImageUrl = conversation.lastImageUrl;
+  }
 
-    return (
-      <button
-        className={`flex flex-row items-center gap-[10px] rounded-lg p-2 ${backgroundColor}`}
-        onClick={onClick}
-      >
-        <img
-          className="rounded-full aspect-square object-cover"
-          src={avatarUrl}
-          width={36}
-          alt=""
-        />
-        <div className="flex flex-col justify-between text-sm leading-[20px] w-full">
-          <div className="flex flex-row items-center justify-between">
-            <span className="text-gray-900 text-left">{name}</span>
-            <span className="text-[11px] leading-[13px] tracking-[-0.4px] text-gray-400">
-              {updatedAt && displayDate(updatedAt)}
+  return (
+    <button
+      className={`flex flex-row mx-1 items-center gap-[10px] rounded-lg p-2 ${backgroundColor} hover:bg-hover-light`}
+      onClick={onClick}
+    >
+      <Image
+        width={36}
+        height={36}
+        src={avatarUrl}
+        className="w-9 aspect-square rounded-full"
+        alt=""
+      />
+      <div className="flex flex-col justify-between text-sm leading-[20px] w-full">
+        <div className="flex flex-row items-center justify-between">
+          <span className="text-gray-900 text-left">{name}</span>
+          <span className="text-[11px] leading-[13px] tracking-[-0.4px] text-gray-400">
+            {updatedAt && displayDate(updatedAt)}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-1">
+          <div className="flex-1">
+            <span className="text-gray-400 hidden-text text-left">
+              {conversation?.lastTextMessage || <br className="h-5 block" />}
             </span>
           </div>
-          <div className="flex items-center justify-between gap-1">
-            <div className="flex-1">
-              <span className="text-gray-400 hidden-text text-left">
-                {conversation?.lastTextMessage || <br className="h-5 block" />}
-              </span>
-            </div>
-            {send ? (
-              <>
-                {rightImageUrl != null ? (
-                  <JanImage
-                    imageUrl={rightImageUrl ?? ""}
-                    className="rounded"
-                    width={24}
-                    height={24}
-                  />
-                ) : undefined}
-              </>
-            ) : (
-              <div className="w-3 h-3 rounded-full bg-blue-500"></div>
-            )}
-          </div>
+          <>
+            {rightImageUrl != null ? (
+              <JanImage
+                imageUrl={rightImageUrl ?? ""}
+                className="rounded"
+                width={24}
+                height={24}
+              />
+            ) : undefined}
+          </>
         </div>
-      </button>
-    );
-  }
-);
+      </div>
+    </button>
+  );
+};
 
 export default HistoryItem;
diff --git a/web-client/app/_components/HistoryList/index.tsx b/web-client/app/_components/HistoryList/index.tsx
index c6018b2b1b..da3b7b60c4 100644
--- a/web-client/app/_components/HistoryList/index.tsx
+++ b/web-client/app/_components/HistoryList/index.tsx
@@ -1,58 +1,41 @@
-import HistoryItem from "../HistoryItem";
-import { observer } from "mobx-react-lite";
-import { useStore } from "@/_models/RootStore";
-import Image from "next/image";
-import { useState } from "react";
-
-interface IHistoryListProps {
-  searchText: string;
-}
-const HistoryList: React.FC<IHistoryListProps> = observer((props) => {
-  const { historyStore } = useStore();
-  const [showHistory, setShowHistory] = useState(true);
-
-  return (
-    <div className="flex flex-col w-full pl-1 pt-3">
-      <button
-        onClick={() => setShowHistory(!showHistory)}
-        className="flex items-center justify-between px-2"
-      >
-        <h2 className="text-[#9CA3AF] font-bold text-[12px] leading-[12px]">
-          HISTORY
-        </h2>
-        <Image
-          className={`${showHistory ? "" : "rotate-180"}`}
-          src={"/icons/unicorn_angle-up.svg"}
-          width={24}
-          height={24}
-          alt=""
-        />
-      </button>
-      <div className={`flex-col gap-1 ${showHistory ? "flex" : "hidden"}`}>
-        {historyStore.conversations
-          .filter(
-            (e) =>
-              props.searchText === "" ||
-              e.product.name
-                .toLowerCase()
-                .includes(props.searchText.toLowerCase()) ||
-              e.product.description
-                ?.toLowerCase()
-                .includes(props.searchText.toLowerCase())
-          )
-          .sort((n1, n2) => (n2.updatedAt || 0) - (n1.updatedAt || 0))
-          .map(({ id, product: aiModel, updatedAt }) => (
-            <HistoryItem
-              key={id}
-              conversationId={id}
-              avatarUrl={aiModel.avatarUrl ?? ""}
-              name={aiModel.name}
-              updatedAt={updatedAt}
-            />
-          ))}
-      </div>
-    </div>
-  );
-});
-
-export default HistoryList;
+import HistoryItem from "../HistoryItem";
+import { useEffect, useState } from "react";
+import ExpandableHeader from "../ExpandableHeader";
+import { useAtomValue } from "jotai";
+import { userConversationsAtom } from "@/_helpers/JotaiWrapper";
+import useGetUserConversations from "@/_hooks/useGetUserConversations";
+
+const HistoryList: React.FC = () => {
+  const conversations = useAtomValue(userConversationsAtom);
+  const [expand, setExpand] = useState<boolean>(true);
+  const { getUserConversations } = useGetUserConversations();
+
+  useEffect(() => {
+    getUserConversations();
+  }, []);
+
+  return (
+    <div className="flex flex-col flex-grow pt-3 gap-2">
+      <ExpandableHeader
+        title="CHAT HISTORY"
+        expanded={expand}
+        onClick={() => setExpand(!expand)}
+      />
+      <div
+        className={`flex flex-col gap-1 mt-1 ${!expand ? "hidden " : "block"}`}
+      >
+        {conversations.map((convo) => (
+          <HistoryItem
+            key={convo.id}
+            conversation={convo}
+            avatarUrl={convo.product.avatarUrl}
+            name={convo.product.name}
+            updatedAt={convo.updatedAt}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HistoryList;
diff --git a/web-client/app/_components/InputToolbar/index.tsx b/web-client/app/_components/InputToolbar/index.tsx
index 986ee79a11..8fbafff0d9 100644
--- a/web-client/app/_components/InputToolbar/index.tsx
+++ b/web-client/app/_components/InputToolbar/index.tsx
@@ -1,146 +1,23 @@
-import SendButton from "../SendButton";
-import { ChangeEvent, useEffect, useState } from "react";
-import { useStore } from "@/_models/RootStore";
-import { AiModelType } from "@/_models/Product";
-import Image from "next/image";
-import { observer } from "mobx-react-lite";
-import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
-import useSignIn from "@/_hooks/useSignIn";
-import { useMutation } from "@apollo/client";
-import {
-  CreateMessageDocument,
-  CreateMessageMutation,
-  GenerateImageMutation,
-  GenerateImageDocument,
-} from "@/graphql";
+"use client";
 
-type Props = {
-  prefillPrompt: string;
-};
-
-export const InputToolbar: React.FC<Props> = observer(({ prefillPrompt }) => {
-  const { historyStore } = useStore();
-  const [text, setText] = useState(prefillPrompt);
-  const { user } = useGetCurrentUser();
-  const { signInWithKeyCloak } = useSignIn();
-
-  const [createMessageMutation] = useMutation<CreateMessageMutation>(
-    CreateMessageDocument
-  );
-
-  const [imageGenerationMutation] = useMutation<GenerateImageMutation>(
-    GenerateImageDocument
-  );
-
-  useEffect(() => {
-    setText(prefillPrompt);
-  }, [prefillPrompt]);
-
-  const handleMessageChange = (event: any) => {
-    setText(event.target.value);
-  };
+import BasicPromptInput from "../BasicPromptInput";
+import BasicPromptAccessories from "../BasicPromptAccessories";
+import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
+import { useAtomValue } from "jotai";
 
-  const onSubmitClick = () => {
-    if (!user) {
-      signInWithKeyCloak();
-      return;
-    }
+const InputToolbar: React.FC = () => {
+  const showingAdvancedPrompt = useAtomValue(showingAdvancedPromptAtom);
 
-    if (text.trim().length === 0) return;
-    historyStore.sendMessage(
-      createMessageMutation,
-      imageGenerationMutation,
-      text,
-      user.id,
-      user.displayName,
-      user.avatarUrl
-    );
-    setText("");
-  };
-
-  const handleKeyDown = (event: any) => {
-    if (event.key === "Enter") {
-      if (!event.shiftKey) {
-        event.preventDefault();
-        onSubmitClick();
-      }
-    }
-  };
-
-  let shouldDisableSubmitButton = false;
-  if (historyStore.getActiveConversation()?.isWaitingForModelResponse) {
-    shouldDisableSubmitButton = true;
+  if (showingAdvancedPrompt) {
+    return <div />;
   }
-  if (text.length === 0) {
-    shouldDisableSubmitButton = true;
-  }
-  const onAdvancedPrompt = () => {
-    historyStore.toggleAdvancedPrompt();
-  };
-
-  const handleResize = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    event.target.style.height = "auto";
-    event.target.style.height = event.target.scrollHeight + "px";
-  };
-
-  const shouldShowAdvancedPrompt =
-    historyStore.getActiveConversation()?.product?.type ===
-      AiModelType.ControlNet ?? false;
 
   return (
-    <div
-      className={`${
-        historyStore.showAdvancedPrompt ? "hidden" : "block"
-      } mb-3 flex-none overflow-hidden w-full shadow-sm ring-1 ring-inset ring-gray-300 rounded-lg dark:bg-gray-800`}
-    >
-      <div className="overflow-hidden">
-        <label htmlFor="comment" className="sr-only">
-          Add your comment
-        </label>
-        <textarea
-          onKeyDown={handleKeyDown}
-          value={text}
-          onChange={handleMessageChange}
-          onInput={handleResize}
-          rows={2}
-          name="comment"
-          id="comment"
-          className="block w-full scroll resize-none border-0 bg-transparent py-1.5 text-gray-900 transition-height duration-200 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:text-white"
-          placeholder="Add your comment..."
-        />
-      </div>
-      <div
-        style={{
-          backgroundColor: "#F8F8F8",
-          borderWidth: 1,
-          borderColor: "#D1D5DB",
-        }}
-        className="flex justify-between py-2 pl-3 pr-2 rounded-b-lg"
-      >
-        {shouldShowAdvancedPrompt && (
-          <button
-            onClick={onAdvancedPrompt}
-            className="flex items-center gap-1 py-[1px]"
-          >
-            <Image
-              src={"/icons/ic_setting.svg"}
-              width={20}
-              height={20}
-              alt=""
-            />
-            <span className="text-sm leading-5 text-gray-600">Advanced</span>
-          </button>
-        )}
-        <div className="flex justify-end items-center space-x-1 w-full pr-3" />
-        <div className="flex-shrink-0">
-          {!shouldShowAdvancedPrompt && (
-            <SendButton
-              onClick={onSubmitClick}
-              disabled={shouldDisableSubmitButton}
-            />
-          )}
-        </div>
-      </div>
+    <div className="mx-3 mb-3 flex-none overflow-hidden shadow-sm ring-1 ring-inset ring-gray-300 rounded-lg dark:bg-gray-800">
+      <BasicPromptInput />
+      <BasicPromptAccessories />
     </div>
   );
-});
+};
+
+export default InputToolbar;
diff --git a/web-client/app/_components/JanLogo/index.tsx b/web-client/app/_components/JanLogo/index.tsx
new file mode 100644
index 0000000000..a52543d823
--- /dev/null
+++ b/web-client/app/_components/JanLogo/index.tsx
@@ -0,0 +1,19 @@
+import { setActiveConvoIdAtom } from "@/_helpers/JotaiWrapper";
+import { useSetAtom } from "jotai";
+import Image from "next/image";
+import React from "react";
+
+const JanLogo: React.FC = () => {
+  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
+  return (
+    <button
+      className="p-3 flex gap-[2px] items-center"
+      onClick={() => setActiveConvoId(undefined)}
+    >
+      <Image src={"/icons/app_icon.svg"} width={28} height={28} alt="" />
+      <Image src={"/icons/Jan.svg"} width={27} height={12} alt="" />
+    </button>
+  );
+};
+
+export default React.memo(JanLogo);
diff --git a/web-client/app/_components/JanWelcomeTitle/index.tsx b/web-client/app/_components/JanWelcomeTitle/index.tsx
index 0f6ce2490c..1d634fe476 100644
--- a/web-client/app/_components/JanWelcomeTitle/index.tsx
+++ b/web-client/app/_components/JanWelcomeTitle/index.tsx
@@ -1,20 +1,20 @@
-import React from "react";
-import Image from "next/image";
-
-type Props = {
-  title: string;
-  description: string;
-};
-
-const JanWelcomeTitle: React.FC<Props> = ({ title, description }) => (
-  <div className="flex items-center flex-col gap-3">
-    <h2 className="text-[22px] leading-7 font-bold">{title}</h2>
-    <span className="flex items-center text-xs leading-[18px]">
-      Operated by
-      <Image src={"/icons/ico_logo.svg"} width={42} height={22} alt="" />
-    </span>
-    <span className="text-sm text-center font-normal">{description}</span>
-  </div>
-);
-
-export default React.memo(JanWelcomeTitle);
+import React from "react";
+import Image from "next/image";
+
+type Props = {
+  title: string;
+  description: string;
+};
+
+const JanWelcomeTitle: React.FC<Props> = ({ title, description }) => (
+  <div className="flex items-center flex-col gap-3">
+    <h2 className="text-[22px] leading-7 font-bold">{title}</h2>
+    <span className="flex items-center text-xs leading-[18px]">
+      Operated by
+      <Image src={"/icons/ico_logo.svg"} width={42} height={22} alt="" />
+    </span>
+    <span className="text-sm text-center font-normal">{description}</span>
+  </div>
+);
+
+export default React.memo(JanWelcomeTitle);
diff --git a/web-client/app/_components/LeftContainer/index.tsx b/web-client/app/_components/LeftContainer/index.tsx
new file mode 100644
index 0000000000..69f4c6aab4
--- /dev/null
+++ b/web-client/app/_components/LeftContainer/index.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { useAtomValue } from "jotai";
+import AdvancedPrompt from "../AdvancedPrompt";
+import CompactSideBar from "../CompactSideBar";
+import LeftSidebar from "../LeftSidebar";
+import { showingAdvancedPromptAtom } from "@/_helpers/JotaiWrapper";
+
+const LeftContainer: React.FC = () => {
+  const isShowingAdvPrompt = useAtomValue(showingAdvancedPromptAtom);
+
+  if (isShowingAdvPrompt) {
+    return (
+      <div className="flex h-screen">
+        <CompactSideBar />
+        <AdvancedPrompt />
+      </div>
+    );
+  }
+
+  return <LeftSidebar />;
+};
+
+export default LeftContainer;
diff --git a/web-client/app/_components/LeftSidebar/index.tsx b/web-client/app/_components/LeftSidebar/index.tsx
new file mode 100644
index 0000000000..b54c8260fd
--- /dev/null
+++ b/web-client/app/_components/LeftSidebar/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import SearchBar from "../SearchBar";
+import ShortcutList from "../ShortcutList";
+import HistoryList from "../HistoryList";
+import DiscordContainer from "../DiscordContainer";
+import JanLogo from "../JanLogo";
+
+const LeftSidebar: React.FC = () => (
+  <div className="hidden h-screen lg:flex flex-col lg:inset-y-0 lg:w-72 lg:flex-col flex-shrink-0 overflow-hidden border-r border-gray-200 dark:bg-gray-800">
+    <JanLogo />
+    <div className="flex flex-col flex-1 gap-3 overflow-x-hidden">
+      <SearchBar />
+      <ShortcutList />
+      <HistoryList />
+    </div>
+    <DiscordContainer />
+  </div>
+);
+
+export default LeftSidebar;
diff --git a/web-client/app/_components/LoginButton/index.tsx b/web-client/app/_components/LoginButton/index.tsx
new file mode 100644
index 0000000000..f2712eeafe
--- /dev/null
+++ b/web-client/app/_components/LoginButton/index.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
+import useSignIn from "@/_hooks/useSignIn";
+
+const LoginButton: React.FC = () => {
+  const { signInWithKeyCloak } = useSignIn();
+  const { user, loading } = useGetCurrentUser();
+
+  if (loading || user) {
+    return <div />;
+  }
+
+  return (
+    <div className="hidden lg:block">
+      <button
+        onClick={signInWithKeyCloak}
+        type="button"
+        className="rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      >
+        Login
+      </button>
+    </div>
+  );
+};
+
+export default LoginButton;
diff --git a/web-client/app/_components/MainChat/index.tsx b/web-client/app/_components/MainChat/index.tsx
new file mode 100644
index 0000000000..4f820dd1d5
--- /dev/null
+++ b/web-client/app/_components/MainChat/index.tsx
@@ -0,0 +1,13 @@
+import ChatBody from "../ChatBody";
+import InputToolbar from "../InputToolbar";
+import MainChatHeader from "../MainChatHeader";
+
+const MainChat: React.FC = () => (
+  <div className="flex flex-col h-full w-full">
+    <MainChatHeader />
+    <ChatBody />
+    <InputToolbar />
+  </div>
+);
+
+export default MainChat;
diff --git a/web-client/app/_components/MainChatHeader/index.tsx b/web-client/app/_components/MainChatHeader/index.tsx
new file mode 100644
index 0000000000..253f04e22e
--- /dev/null
+++ b/web-client/app/_components/MainChatHeader/index.tsx
@@ -0,0 +1,11 @@
+import ModelMenu from "../ModelMenu";
+import UserToolbar from "../UserToolbar";
+
+const MainChatHeader: React.FC = () => (
+  <div className="flex w-full px-3 justify-between py-1 border-b border-gray-200 shadow-sm dark:bg-gray-950">
+    <UserToolbar />
+    <ModelMenu />
+  </div>
+);
+
+export default MainChatHeader;
diff --git a/web-client/app/_components/MenuAdvancedPrompt/index.tsx b/web-client/app/_components/MenuAdvancedPrompt/index.tsx
index 002ffd7da1..cac2f37c3c 100644
--- a/web-client/app/_components/MenuAdvancedPrompt/index.tsx
+++ b/web-client/app/_components/MenuAdvancedPrompt/index.tsx
@@ -1,23 +1,21 @@
-import AdvancedPromptText from "../AdvancedPromptText";
-import AdvancedPromptImageUpload from "../AdvancedPromptImageUpload";
-import AdvancedPromptResolution from "../AdvancedPromptResolution";
-import AdvancedPromptGenerationParams from "../AdvancedPromptGenerationParams";
-import { FieldValues, UseFormRegister } from "react-hook-form";
-
-type Props = {
-  register: UseFormRegister<FieldValues>;
-};
-
-export const MenuAdvancedPrompt: React.FC<Props> = ({ register }) => {
-  return (
-    <div className="flex flex-col">
-      <AdvancedPromptText register={register} />
-      <hr className="my-5" />
-      <AdvancedPromptImageUpload register={register} />
-      <hr className="my-5" />
-      <AdvancedPromptResolution />
-      <hr className="my-5" />
-      <AdvancedPromptGenerationParams />
-    </div>
-  );
-};
+import AdvancedPromptText from "../AdvancedPromptText";
+import AdvancedPromptImageUpload from "../AdvancedPromptImageUpload";
+import AdvancedPromptResolution from "../AdvancedPromptResolution";
+import AdvancedPromptGenerationParams from "../AdvancedPromptGenerationParams";
+import { FieldValues, UseFormRegister } from "react-hook-form";
+
+type Props = {
+  register: UseFormRegister<FieldValues>;
+};
+
+export const MenuAdvancedPrompt: React.FC<Props> = ({ register }) => (
+  <div className="flex flex-col flex-1 p-3 gap-[10px] overflow-x-hidden scroll">
+    <AdvancedPromptText register={register} />
+    <hr className="my-5" />
+    <AdvancedPromptImageUpload register={register} />
+    <hr className="my-5" />
+    <AdvancedPromptResolution />
+    <hr className="my-5" />
+    <AdvancedPromptGenerationParams />
+  </div>
+);
diff --git a/web-client/app/_components/MenuHeader/index.tsx b/web-client/app/_components/MenuHeader/index.tsx
index 03e9ef87ec..f04f5d1b48 100644
--- a/web-client/app/_components/MenuHeader/index.tsx
+++ b/web-client/app/_components/MenuHeader/index.tsx
@@ -1,56 +1,55 @@
-import Link from "next/link";
-import { Popover, Transition } from "@headlessui/react";
-import { Fragment } from "react";
-import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
-
-type Props = {
-  onLogOutClick: () => void;
-};
-
-export const MenuHeader: React.FC<Props> = ({ onLogOutClick }) => {
-  const { user } = useGetCurrentUser();
-
-  if (!user) {
-    return <div></div>;
-  }
-
-  return (
-    <Transition
-      as={Fragment}
-      enter="transition ease-out duration-200"
-      enterFrom="opacity-0 translate-y-1"
-      enterTo="opacity-100 translate-y-0"
-      leave="transition ease-in duration-150"
-      leaveFrom="opacity-100 translate-y-0"
-      leaveTo="opacity-0 translate-y-1"
-    >
-      <Popover.Panel className="absolute  shadow-profile -right-2 top-full z-10 mt-3 w-[224px] overflow-hidden rounded-[6px] bg-white shadow-lg ring-1 ring-gray-200">
-        <div className="py-3 px-4 gap-2 flex flex-col">
-          <h2 className="text-[20px] leading-[25px] tracking-[-0.4px] font-bold text-[#111928]">
-            {user.displayName}
-          </h2>
-          <span className="text-[#6B7280] leading-[17.5px] text-sm">
-            {user.email}
-          </span>
-        </div>
-        <hr />
-        <button
-          onClick={onLogOutClick}
-          className="px-4 py-3 text-sm w-full text-left text-gray-700"
-        >
-          Sign Out
-        </button>
-        <hr />
-        <div className="flex gap-2 px-4 py-2 justify-center items-center">
-          <Link href="/privacy">
-            <span className="text-[#6B7280] text-xs">Privacy</span>
-          </Link>
-          <div className="w-1 h-1 bg-[#D9D9D9] rounded-lg" />
-          <Link href="/support">
-            <span className="text-[#6B7280] text-xs">Support</span>
-          </Link>
-        </div>
-      </Popover.Panel>
-    </Transition>
-  );
-};
+import Link from "next/link";
+import { Popover, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
+import { useSetAtom } from "jotai";
+import { showConfirmSignOutModalAtom } from "@/_helpers/JotaiWrapper";
+
+export const MenuHeader: React.FC = () => {
+  const setShowConfirmSignOutModal = useSetAtom(showConfirmSignOutModalAtom);
+  const { user } = useGetCurrentUser();
+
+  if (!user) {
+    return <div></div>;
+  }
+
+  return (
+    <Transition
+      as={Fragment}
+      enter="transition ease-out duration-200"
+      enterFrom="opacity-0 translate-y-1"
+      enterTo="opacity-100 translate-y-0"
+      leave="transition ease-in duration-150"
+      leaveFrom="opacity-100 translate-y-0"
+      leaveTo="opacity-0 translate-y-1"
+    >
+      <Popover.Panel className="absolute shadow-profile -right-2 top-full z-10 mt-3 w-[224px] overflow-hidden rounded-[6px] bg-white shadow-lg ring-1 ring-gray-200">
+        <div className="py-3 px-4 gap-2 flex flex-col">
+          <h2 className="text-[20px] leading-[25px] tracking-[-0.4px] font-bold text-[#111928]">
+            {user.displayName}
+          </h2>
+          <span className="text-[#6B7280] leading-[17.5px] text-sm">
+            {user.email}
+          </span>
+        </div>
+        <hr />
+        <button
+          onClick={() => setShowConfirmSignOutModal(true)}
+          className="px-4 py-3 text-sm w-full text-left text-gray-700"
+        >
+          Sign Out
+        </button>
+        <hr />
+        <div className="flex gap-2 px-4 py-2 justify-center items-center">
+          <Link href="/privacy">
+            <span className="text-[#6B7280] text-xs">Privacy</span>
+          </Link>
+          <div className="w-1 h-1 bg-[#D9D9D9] rounded-lg" />
+          <Link href="/support">
+            <span className="text-[#6B7280] text-xs">Support</span>
+          </Link>
+        </div>
+      </Popover.Panel>
+    </Transition>
+  );
+};
diff --git a/web-client/app/_components/MobileDownload/index.tsx b/web-client/app/_components/MobileDownload/index.tsx
index 9625a3c259..9219389b61 100644
--- a/web-client/app/_components/MobileDownload/index.tsx
+++ b/web-client/app/_components/MobileDownload/index.tsx
@@ -21,7 +21,7 @@ const MobileDownload = () => {
       {/** Buttons */}
       <div className="flex w-full mt-4 justify-between">
         <a
-          href={process.env.NEXT_PUBLIC_DOWNLOAD_APP_IOS || "#"}
+          href={process.env.NEXT_PUBLIC_DOWNLOAD_APP_IOS || ""}
           target="_blank"
           rel="noopener noreferrer"
           className="w-[48%]"
@@ -42,7 +42,7 @@ const MobileDownload = () => {
         </a>
 
         <a
-          href={process.env.NEXT_PUBLIC_DOWNLOAD_APP_ANDROID || "#"}
+          href={process.env.NEXT_PUBLIC_DOWNLOAD_APP_ANDROID || ""}
           target="_blank"
           rel="noopener noreferrer"
           className="w-[48%]"
diff --git a/web-client/app/_components/MobileMenuPane/index.tsx b/web-client/app/_components/MobileMenuPane/index.tsx
index d0fe468fd1..8ee94d2831 100644
--- a/web-client/app/_components/MobileMenuPane/index.tsx
+++ b/web-client/app/_components/MobileMenuPane/index.tsx
@@ -1,52 +1,60 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Dialog } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
+import { showingMobilePaneAtom } from "@/_helpers/JotaiWrapper";
+import { useAtom } from "jotai";
 
-type Props = {
-  open: boolean;
-  setOpen: (open: boolean) => void;
-};
+const MobileMenuPane: React.FC = () => {
+  const [show, setShow] = useAtom(showingMobilePaneAtom);
+  let loginRef = useRef(null);
 
-const MobileMenuPane: React.FC<Props> = ({ open, setOpen }) => (
-  <Dialog as="div" className="md:hidden" open={open} onClose={setOpen}>
-    <div className="fixed inset-0 z-10" />
-    <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
-      <div className="flex items-center justify-between">
-        <a href="#" className="-m-1.5 p-1.5">
-          <span className="sr-only">Your Company</span>
-          <Image
-            className="h-8 w-auto"
-            width={32}
-            height={32}
-            src="/icons/app_icon.svg"
-            alt=""
-          />
-        </a>
-        <button
-          type="button"
-          className="-m-2.5 rounded-md p-2.5 text-gray-700"
-          onClick={() => setOpen(false)}
-        >
-          <span className="sr-only">Close menu</span>
-          <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-        </button>
-      </div>
-      <div className="mt-6 flow-root">
-        <div className="-my-6 divide-y divide-gray-500/10">
-          <div className="space-y-2 py-6"/>
-          <div className="py-6">
-            <a
-              href="#"
-              className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
-            >
-              Log in
-            </a>
+  return (
+    <Dialog
+      as="div"
+      open={show}
+      initialFocus={loginRef}
+      onClose={() => setShow(false)}
+    >
+      <div className="fixed inset-0 z-10" />
+      <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+        <div className="flex items-center justify-between">
+          <a href="#" className="-m-1.5 p-1.5">
+            <span className="sr-only">Your Company</span>
+            <Image
+              className="h-8 w-auto"
+              width={32}
+              height={32}
+              src="/icons/app_icon.svg"
+              alt=""
+            />
+          </a>
+          <button
+            type="button"
+            className="-m-2.5 rounded-md p-2.5 text-gray-700"
+            onClick={() => setShow(false)}
+          >
+            <span className="sr-only">Close menu</span>
+            <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+        <div className="mt-6 flow-root">
+          <div className="-my-6 divide-y divide-gray-500/10">
+            <div className="space-y-2 py-6" />
+            <div className="py-6">
+              <a
+                ref={loginRef}
+                href="#"
+                className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+              >
+                Log in
+              </a>
+            </div>
           </div>
         </div>
-      </div>
-    </Dialog.Panel>
-  </Dialog>
-);
+      </Dialog.Panel>
+    </Dialog>
+  );
+};
 
 export default MobileMenuPane;
diff --git a/web-client/app/_components/ModelDetailSideBar/index.tsx b/web-client/app/_components/ModelDetailSideBar/index.tsx
index 9ee9ab6675..8300c7dce7 100644
--- a/web-client/app/_components/ModelDetailSideBar/index.tsx
+++ b/web-client/app/_components/ModelDetailSideBar/index.tsx
@@ -1,36 +1,9 @@
-import { FC, useRef } from "react";
-import OverviewPane from "../OverviewPane";
-import { observer } from "mobx-react-lite";
-import { useStore } from "@/_models/RootStore";
-import { Draggable } from "../Draggable";
-
-type Props = {
-  onPromptClick?: (prompt: string) => void;
-};
-
-export const ModelDetailSideBar: FC<Props> = observer(({ onPromptClick }) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const { historyStore } = useStore();
-  const conversation = useStore().historyStore.getActiveConversation();
-
-  return (
-    <div
-      style={historyStore.showModelDetail ? { width: "473px" } : {}}
-      ref={ref}
-      className={`${
-        historyStore.showModelDetail ? "w-[473px]" : "hidden"
-      } flex flex-col gap-3 h-full p-3 relative pb-3 border-l-[1px] border-[#E5E7EB]`}
-    >
-      <Draggable targetRef={ref} />
-      <div className="flex-col h-full gap-3 flex flex-1">
-        <OverviewPane
-          slug={conversation?.product.id ?? ""}
-          onPromptClick={onPromptClick}
-          description={conversation?.product.description}
-          technicalURL={conversation?.product.modelUrl}
-          technicalVersion={conversation?.product.modelVersion}
-        />
-      </div>
-    </div>
-  );
-});
+import OverviewPane from "../OverviewPane";
+
+const ModelDetailSideBar: React.FC = () => (
+  <div className="flex w-[473px] h-full border-l-[1px] border-[#E5E7EB]">
+    <OverviewPane />
+  </div>
+);
+
+export default ModelDetailSideBar;
diff --git a/web-client/app/_components/ModelInfo/index.tsx b/web-client/app/_components/ModelInfo/index.tsx
index c11109bd77..3c9130e1fc 100644
--- a/web-client/app/_components/ModelInfo/index.tsx
+++ b/web-client/app/_components/ModelInfo/index.tsx
@@ -1,42 +1,42 @@
-import Image from "next/image";
-import ModelInfoItem from "../ModelInfoItem";
-import React from "react";
-
-type Props = {
-  modelName: string;
-  inferenceTime: string;
-  hardware: string;
-  pricing: string;
-};
-
-const ModelInfo: React.FC<Props> = ({
-  modelName,
-  inferenceTime,
-  hardware,
-  pricing,
-}) => (
-  <div className="flex flex-col rounded-lg border border-gray-200 p-3 gap-3">
-    <h2 className="font-semibold text-sm text-gray-900 dark:text-white">
-      {modelName} is available via Jan API
-    </h2>
-    <div className="flex items-start gap-4">
-      <ModelInfoItem description={inferenceTime} name="Inference Time" />
-      <ModelInfoItem description={hardware} name="Hardware" />
-    </div>
-    <hr />
-    <div className="flex justify-between items-center ">
-      <div className="flex flex-col">
-        <h2 className="text-xl tracking-[-0.4px] font-semibold">{pricing}</h2>
-        <span className="text-xs leading-[18px] text-[#6B7280]">
-          Average Cost / Call
-        </span>
-      </div>
-      <button className="px-3 py-2 bg-[#1F2A37] flex gap-2 items-center rounded-lg">
-        <Image src={"/icons/code.svg"} width={16} height={17} alt="" />
-        <span className="text-white text-sm font-medium">Get API Key</span>
-      </button>
-    </div>
-  </div>
-);
-
-export default React.memo(ModelInfo);
+import Image from "next/image";
+import ModelInfoItem from "../ModelInfoItem";
+import React from "react";
+
+type Props = {
+  modelName: string;
+  inferenceTime: string;
+  hardware: string;
+  pricing: string;
+};
+
+const ModelInfo: React.FC<Props> = ({
+  modelName,
+  inferenceTime,
+  hardware,
+  pricing,
+}) => (
+  <div className="flex flex-col rounded-lg border border-gray-200 p-3 gap-3">
+    <h2 className="font-semibold text-sm text-gray-900 dark:text-white">
+      {modelName} is available via Jan API
+    </h2>
+    <div className="flex items-start gap-4">
+      <ModelInfoItem description={inferenceTime} name="Inference Time" />
+      <ModelInfoItem description={hardware} name="Hardware" />
+    </div>
+    <hr />
+    <div className="flex justify-between items-center ">
+      <div className="flex flex-col">
+        <h2 className="text-xl tracking-[-0.4px] font-semibold">{pricing}</h2>
+        <span className="text-xs leading-[18px] text-[#6B7280]">
+          Average Cost / Call
+        </span>
+      </div>
+      <button className="px-3 py-2 bg-[#1F2A37] flex gap-2 items-center rounded-lg">
+        <Image src={"/icons/code.svg"} width={16} height={17} alt="" />
+        <span className="text-white text-sm font-medium">Get API Key</span>
+      </button>
+    </div>
+  </div>
+);
+
+export default React.memo(ModelInfo);
diff --git a/web-client/app/_components/ModelInfoItem/index.tsx b/web-client/app/_components/ModelInfoItem/index.tsx
index 0987647bdd..4068936315 100644
--- a/web-client/app/_components/ModelInfoItem/index.tsx
+++ b/web-client/app/_components/ModelInfoItem/index.tsx
@@ -1,15 +1,15 @@
-import React from "react";
-
-type Props = {
-  name: string;
-  description: string;
-};
-
-const ModelInfoItem: React.FC<Props> = ({ description, name }) => (
-  <div className="flex flex-col flex-1">
-    <span className="text-gray-500 font-normal text-sm">{name}</span>
-    <span className="font-normal text-sm">{description}</span>
-  </div>
-);
-
-export default React.memo(ModelInfoItem);
+import React from "react";
+
+type Props = {
+  name: string;
+  description: string;
+};
+
+const ModelInfoItem: React.FC<Props> = ({ description, name }) => (
+  <div className="flex flex-col flex-1">
+    <span className="text-gray-500 font-normal text-sm">{name}</span>
+    <span className="font-normal text-sm">{description}</span>
+  </div>
+);
+
+export default React.memo(ModelInfoItem);
diff --git a/web-client/app/_components/ModelMenu/index.tsx b/web-client/app/_components/ModelMenu/index.tsx
index bb4dab9888..0737affbcf 100644
--- a/web-client/app/_components/ModelMenu/index.tsx
+++ b/web-client/app/_components/ModelMenu/index.tsx
@@ -1,44 +1,46 @@
-import Image from "next/image";
-import { useStore } from "@/_models/RootStore";
-import { useCallback } from "react";
-import { observer } from "mobx-react-lite";
-
-type Props = {
-  onDeleteClick: () => void;
-  onCreateConvClick: () => void;
-};
-
-const ModelMenu: React.FC<Props> = observer(
-  ({ onDeleteClick, onCreateConvClick }) => {
-    const { historyStore } = useStore();
-
-    const onModelInfoClick = useCallback(() => {
-      historyStore.toggleModelDetail();
-    }, []);
-
-    return (
-      <div className="flex items-center gap-3">
-        <button onClick={onCreateConvClick}>
-          <Image src="/icons/unicorn_plus.svg" width={24} height={24} alt="" />
-        </button>
-        <button onClick={onDeleteClick}>
-          <Image src="/icons/unicorn_trash.svg" width={24} height={24} alt="" />
-        </button>
-        <button onClick={onModelInfoClick}>
-          <Image
-            src={
-              historyStore.showModelDetail
-                ? "/icons/ic_sidebar_fill.svg"
-                : "/icons/ic_sidebar.svg"
-            }
-            width={24}
-            height={24}
-            alt=""
-          />
-        </button>
-      </div>
-    );
-  }
-);
-
-export default ModelMenu;
+"use client";
+
+import Image from "next/image";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import {
+  currentProductAtom,
+  showConfirmDeleteConversationModalAtom,
+  showingProductDetailAtom,
+} from "@/_helpers/JotaiWrapper";
+import { PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
+import useCreateConversation from "@/_hooks/useCreateConversation";
+
+const ModelMenu: React.FC = () => {
+  const currentProduct = useAtomValue(currentProductAtom);
+  const [active, setActive] = useAtom(showingProductDetailAtom);
+  const { requestCreateConvo } = useCreateConversation();
+  const setShowConfirmDeleteConversationModal = useSetAtom(
+    showConfirmDeleteConversationModalAtom
+  );
+
+  const onCreateConvoClick = () => {
+    if (!currentProduct) return;
+    requestCreateConvo(currentProduct, true);
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <button onClick={() => onCreateConvoClick()}>
+        <PlusIcon width={24} height={24} color="#9CA3AF" />
+      </button>
+      <button onClick={() => setShowConfirmDeleteConversationModal(true)}>
+        <TrashIcon width={24} height={24} color="#9CA3AF" />
+      </button>
+      <button onClick={() => setActive(!active)}>
+        <Image
+          src={active ? "/icons/ic_sidebar_fill.svg" : "/icons/ic_sidebar.svg"}
+          width={24}
+          height={24}
+          alt=""
+        />
+      </button>
+    </div>
+  );
+};
+
+export default ModelMenu;
diff --git a/web-client/app/_components/NewChatBlankState/index.tsx b/web-client/app/_components/NewChatBlankState/index.tsx
deleted file mode 100644
index 7f6c4c86ef..0000000000
--- a/web-client/app/_components/NewChatBlankState/index.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import Slider from "../Slider";
-import ConversationalList from "../ConversationalList";
-import GenerateImageList from "../GenerateImageList";
-import { GetProductsQuery, GetProductsDocument } from "@/graphql";
-import { useQuery } from "@apollo/client";
-import Image from "next/image";
-
-const NewChatBlankState: React.FC = () => {
-  // This can be achieved by separating queries using GetProductsByCollectionSlugQuery
-  const { loading, data } = useQuery<GetProductsQuery>(GetProductsDocument, {
-    variables: { slug: "conversational" },
-  });
-
-  const featured = [...(data?.products ?? [])]
-    .sort(() => 0.5 - Math.random())
-    .slice(0, 3);
-
-  const conversational =
-    data?.products.filter((e) =>
-      e.product_collections.some((c) =>
-        c.collections.some((s) => s.slug == "conversational")
-      )
-    ) ?? [];
-
-  const generativeArts =
-    data?.products.filter((e) =>
-      e.product_collections.some((c) =>
-        c.collections.some((s) => s.slug == "text-to-image")
-      )
-    ) ?? [];
-
-  if (loading) {
-    return (
-      <div className="w-full flex flex-row justify-center items-center">
-        <Image src="/icons/loading.svg" width={32} height={32} alt="loading" />
-      </div>
-    );
-  }
-
-  if (!data || data.products.length === 0) {
-    return <div></div>;
-  }
-
-  return (
-    <div className="bg-gray-100 px-6 pt-8 w-full h-full overflow-y-scroll scroll">
-      <Slider products={featured} />
-      <ConversationalList products={conversational} />
-      <GenerateImageList products={generativeArts} />
-    </div>
-  );
-};
-
-export default NewChatBlankState;
diff --git a/web-client/app/_components/OverviewPane.tsx b/web-client/app/_components/OverviewPane.tsx
index fae0566ec7..ec6c555a86 100644
--- a/web-client/app/_components/OverviewPane.tsx
+++ b/web-client/app/_components/OverviewPane.tsx
@@ -1,94 +1,58 @@
-import { GetProductPromptsDocument, GetProductPromptsQuery } from "@/graphql";
-import { useQuery } from "@apollo/client";
-import { useLayoutEffect, useRef, useState } from "react";
+"use client";
 
-type Props = {
-  slug: string;
-  description?: string | null;
-  technicalVersion?: string | null;
-  technicalURL?: string | null;
-  onPromptClick?: (prompt: string) => void;
-  inAIModel?: number;
-};
+import { useAtomValue } from "jotai";
+import TryItYourself from "./TryItYourself";
+import React from "react";
+import { currentProductAtom } from "@/_helpers/JotaiWrapper";
 
-const OverviewPane: React.FC<Props> = ({
-  slug,
-  description,
-  technicalVersion,
-  technicalURL,
-  onPromptClick,
-  inAIModel,
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [read, setRead] = useState<boolean>(true);
-  const [height, setHeight] = useState<number>(0);
-  const { loading, error, data } = useQuery<GetProductPromptsQuery>(
-    GetProductPromptsDocument,
-    {
-      variables: { productSlug: slug },
-    }
-  );
-
-  useLayoutEffect(() => {
-    if (!ref.current) return;
-    setHeight(ref.current?.offsetHeight);
-  }, [read]);
+const OverviewPane: React.FC = () => {
+  const product = useAtomValue(currentProductAtom);
 
   return (
-    <div
-      className="w-full flex flex-auto flex-col gap-6 overflow-x-hidden scroll"
-      ref={ref}
-      style={!inAIModel ? { height: `${height}px` } : { height: "100%" }}
-    >
-      <div className="flex flex-col gap-2 items-start">
-        <h2 className="text-black font-bold">About this AI</h2>
-        <p className={`text-[#6B7280] ${read ? "hidden-text-model" : ""}`}>
-          {description}
-        </p>
-        <button
-          onClick={() => setRead(!read)}
-          className="text-[#1F2A37] font-bold"
-        >
-          {read ? "read more" : "read less"}
-        </button>
-      </div>
-      <div className="flex flex-col gap-4 tracking-[-0.4px] leading-[22px] text-base">
-        <div className="flex flex-col gap-1">
-          <span className="text-[#6B7280] ">Model Version</span>
-          <span className="font-semibold">{technicalVersion}</span>
-        </div>
-        <div className="flex flex-col gap-1">
+    <div className="scroll overflow-y-auto">
+      <div className="flex flex-col flex-grow gap-6 m-3">
+        <AboutProductItem
+          title={"About this AI"}
+          value={product?.description ?? ""}
+        />
+        <SmallItem title={"Model Version"} value={product?.version ?? ""} />
+        <div className="flex flex-col">
           <span className="text-[#6B7280]">Model URL</span>
           <a
-            className="text-[#1C64F2] break-all pr-10"
-            href={technicalURL || "#"}
+            className="text-[#1C64F2]"
+            href={product?.modelUrl ?? "#"}
             target="_blank_"
           >
-            {technicalURL}
+            {product?.modelUrl}
           </a>
         </div>
-      </div>
-      <div className="flex flex-col gap-4 tracking-[-0.4px] leading-[22px] text-base">
-        <h2 className="font-bold">Try it yourself</h2>
-        <ul className="border-[1px] border-[#D1D5DB] rounded-[12px]">
-          {data?.prompts.map((prompt, index) => {
-            const showBorder = index !== data?.prompts.length - 1;
-            return (
-              <button
-                onClick={() => onPromptClick?.(prompt.content ?? "")}
-                key={prompt.slug}
-                className={`text-sm text-gray-500 leading-[20px] flex gap-[10px] border-b-[${
-                  showBorder ? "1" : "0"
-                }px] border-[#E5E7EB] hover:text-blue-400 text-left p-3 w-full`}
-              >
-                {prompt.content}
-              </button>
-            );
-          })}
-        </ul>
+        <TryItYourself />
       </div>
     </div>
   );
 };
 
 export default OverviewPane;
+
+type Props = {
+  title: string;
+  value: string;
+};
+
+const AboutProductItem: React.FC<Props> = ({ title, value }) => {
+  return (
+    <div className="flex flex-col items-start">
+      <h2 className="text-black font-bold">{title}</h2>
+      <p className="text-[#6B7280]">{value}</p>
+    </div>
+  );
+};
+
+const SmallItem: React.FC<Props> = ({ title, value }) => {
+  return (
+    <div className="flex flex-col">
+      <span className="text-[#6B7280] ">{title}</span>
+      <span className="font-semibold">{value}</span>
+    </div>
+  );
+};
diff --git a/web-client/app/_components/PrimaryButton/index.tsx b/web-client/app/_components/PrimaryButton/index.tsx
new file mode 100644
index 0000000000..d87249b445
--- /dev/null
+++ b/web-client/app/_components/PrimaryButton/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+type Props = {
+  title: string;
+  onClick: () => void;
+  fullWidth?: boolean;
+};
+
+const PrimaryButton: React.FC<Props> = ({
+  title,
+  onClick,
+  fullWidth = false,
+}) => (
+  <button
+    onClick={onClick}
+    type="button"
+    className={`rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-50 ${
+      fullWidth ? "flex-1 " : ""
+    }}`}
+  >
+    {title}
+  </button>
+);
+
+export default PrimaryButton;
diff --git a/web-client/app/_components/ProductOverview/index.tsx b/web-client/app/_components/ProductOverview/index.tsx
new file mode 100644
index 0000000000..2ab0634563
--- /dev/null
+++ b/web-client/app/_components/ProductOverview/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import Slider from "../Slider";
+import ConversationalList from "../ConversationalList";
+import GenerateImageList from "../GenerateImageList";
+import Image from "next/image";
+import useGetProducts from "@/_hooks/useGetProducts";
+
+const ProductOverview: React.FC = () => {
+  const { loading, featured, conversational, generativeArts } =
+    useGetProducts();
+
+  if (loading) {
+    return (
+      <div className="w-full flex flex-grow flex-row justify-center items-center">
+        <Image src="/icons/loading.svg" width={32} height={32} alt="loading" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-gray-100 overflow-y-auto flex-grow scroll">
+      <Slider products={featured} />
+      <ConversationalList products={conversational} />
+      <GenerateImageList products={generativeArts} />
+    </div>
+  );
+};
+
+export default ProductOverview;
diff --git a/web-client/app/_components/RightContainer/index.tsx b/web-client/app/_components/RightContainer/index.tsx
new file mode 100644
index 0000000000..a7b65ea1d0
--- /dev/null
+++ b/web-client/app/_components/RightContainer/index.tsx
@@ -0,0 +1,14 @@
+import ChatContainer from "../ChatContainer";
+import Header from "../Header";
+import MainChat from "../MainChat";
+
+const RightContainer = () => (
+  <div className="flex flex-col flex-1 h-screen">
+    <Header />
+    <ChatContainer>
+      <MainChat />
+    </ChatContainer>
+  </div>
+);
+
+export default RightContainer;
diff --git a/web-client/app/_components/SampleLlmContainer/index.tsx b/web-client/app/_components/SampleLlmContainer/index.tsx
index 8a5b6db8bc..66d0c198be 100644
--- a/web-client/app/_components/SampleLlmContainer/index.tsx
+++ b/web-client/app/_components/SampleLlmContainer/index.tsx
@@ -1,46 +1,44 @@
-import { Instance } from "mobx-state-tree";
-import { Product } from "@/_models/Product";
-import JanWelcomeTitle from "../JanWelcomeTitle";
-import { useQuery } from "@apollo/client";
-import { GetProductPromptsDocument, GetProductPromptsQuery } from "@/graphql";
-
-type Props = {
-  model: Instance<typeof Product>;
-  onPromptSelected: (prompt: string) => void;
-};
-
-const SampleLlmContainer: React.FC<Props> = ({ model, onPromptSelected }) => {
-  const { loading, error, data } = useQuery<GetProductPromptsQuery>(
-    GetProductPromptsDocument,
-    {
-      variables: { productSlug: model.id },
-    }
-  );
-
-  return (
-    <div className="flex flex-col max-w-sm flex-shrink-0 gap-9 items-center pt-6 mx-auto">
-      <JanWelcomeTitle
-        title={model.name}
-        description={model.description ?? ""}
-      />
-      <div className="flex flex-col">
-        <h2 className="font-semibold text-xl leading-6 tracking-[-0.4px] mb-5">
-          Try now
-        </h2>
-        <div className="flex flex-col">
-          {data?.prompts.map((item) => (
-            <button
-              onClick={() => onPromptSelected(item.content ?? "")}
-              key={item.slug}
-              className="rounded p-2 hover:bg-[#0000000F] text-xs leading-[18px] text-gray-500 text-left"
-            >
-              <span className="line-clamp-3">{item.content}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SampleLlmContainer;
+import JanWelcomeTitle from "../JanWelcomeTitle";
+import { useQuery } from "@apollo/client";
+import { GetProductPromptsDocument, GetProductPromptsQuery } from "@/graphql";
+import { Product } from "@/_models/Product";
+import { useSetAtom } from "jotai";
+import { currentPromptAtom } from "@/_helpers/JotaiWrapper";
+
+type Props = {
+  product: Product;
+};
+
+const SampleLlmContainer: React.FC<Props> = ({ product }) => {
+  const setCurrentPrompt = useSetAtom(currentPromptAtom);
+  const { data } = useQuery<GetProductPromptsQuery>(GetProductPromptsDocument, {
+    variables: { productSlug: product.slug },
+  });
+
+  return (
+    <div className="flex flex-col max-w-sm flex-shrink-0 gap-9 items-center pt-6 mx-auto">
+      <JanWelcomeTitle
+        title={product.name}
+        description={product.description ?? ""}
+      />
+      <div className="flex flex-col">
+        <h2 className="font-semibold text-xl leading-6 tracking-[-0.4px] mb-5">
+          Try now
+        </h2>
+        <div className="flex flex-col">
+          {data?.prompts.map((item) => (
+            <button
+              onClick={() => setCurrentPrompt(item.content ?? "")}
+              key={item.slug}
+              className="rounded p-2 hover:bg-[#0000000F] text-xs leading-[18px] text-gray-500 text-left"
+            >
+              <span className="line-clamp-3">{item.content}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SampleLlmContainer;
diff --git a/web-client/app/_components/SearchBar/index.tsx b/web-client/app/_components/SearchBar/index.tsx
index 8039ef8635..6932ec1ca4 100644
--- a/web-client/app/_components/SearchBar/index.tsx
+++ b/web-client/app/_components/SearchBar/index.tsx
@@ -1,24 +1,30 @@
-import Image from "next/image";
-
-interface ISearchBarProps {
-  onTextChanged: (text: string) => void;
-}
-const SearchBar: React.FC<ISearchBarProps> = (props) => {
-  return (
-    <div className="relative mt-3 flex items-center w-full">
-      <div className="absolute top-0 left-2 h-full flex items-center">
-        <Image src={"/icons/search.svg"} width={16} height={16} alt="" />
-      </div>
-      <input
-        type="text"
-        name="search"
-        id="search"
-        placeholder="Search (⌘K)"
-        onChange={(e) => props.onTextChanged(e.target.value)}
-        className="block w-full rounded-md border-0 py-1.5 pl-8 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-      />
-    </div>
-  );
-};
-
-export default SearchBar;
+import { searchAtom } from "@/_helpers/JotaiWrapper";
+import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useSetAtom } from "jotai";
+
+const SearchBar: React.FC = () => {
+  const setText = useSetAtom(searchAtom);
+
+  return (
+    <div className="relative mx-3 mt-3 flex items-center">
+      <div className="absolute top-0 left-2 h-full flex items-center">
+        <MagnifyingGlassIcon
+          width={16}
+          height={16}
+          color="#3C3C43"
+          opacity={0.6}
+        />
+      </div>
+      <input
+        type="text"
+        name="search"
+        id="search"
+        placeholder="Search (⌘K)"
+        onChange={(e) => setText(e.target.value)}
+        className="block w-full rounded-md border-0 py-1.5 pl-8 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+      />
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/web-client/app/_components/SecondaryButton/index.tsx b/web-client/app/_components/SecondaryButton/index.tsx
new file mode 100644
index 0000000000..8de14302d1
--- /dev/null
+++ b/web-client/app/_components/SecondaryButton/index.tsx
@@ -0,0 +1,18 @@
+type Props = {
+  title: string;
+  onClick: () => void;
+  disabled?: boolean;
+};
+
+const SecondaryButton: React.FC<Props> = ({ title, onClick, disabled }) => (
+  <button
+    disabled={disabled}
+    type="button"
+    onClick={onClick}
+    className="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+  >
+    {title}
+  </button>
+);
+
+export default SecondaryButton;
diff --git a/web-client/app/_components/SendButton/index.tsx b/web-client/app/_components/SendButton/index.tsx
index 4d6c660e90..f95e4d08dd 100644
--- a/web-client/app/_components/SendButton/index.tsx
+++ b/web-client/app/_components/SendButton/index.tsx
@@ -1,11 +1,19 @@
+import {
+  currentConvoStateAtom,
+  currentPromptAtom,
+} from "@/_helpers/JotaiWrapper";
+import useSendChatMessage from "@/_hooks/useSendChatMessage";
+import { useAtomValue } from "jotai";
 import Image from "next/image";
 
-type Props = {
-  onClick: () => void;
-  disabled?: boolean;
-};
+const SendButton: React.FC = () => {
+  const currentPrompt = useAtomValue(currentPromptAtom);
+  const currentConvoState = useAtomValue(currentConvoStateAtom);
+  const { sendChatMessage } = useSendChatMessage();
+
+  const isWaitingForResponse = currentConvoState?.waitingForResponse ?? false;
+  const disabled = currentPrompt.trim().length === 0 || isWaitingForResponse;
 
-const SendButton: React.FC<Props> = ({ onClick, disabled = false }) => {
   const enabledStyle = {
     backgroundColor: "#FACA15",
   };
@@ -16,7 +24,7 @@ const SendButton: React.FC<Props> = ({ onClick, disabled = false }) => {
 
   return (
     <button
-      onClick={onClick}
+      onClick={sendChatMessage}
       style={disabled ? disabledStyle : enabledStyle}
       type="submit"
       className="p-2 gap-[10px] inline-flex items-center rounded-[12px] text-sm font-semibold shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
diff --git a/web-client/app/_components/ShortcutItem/index.tsx b/web-client/app/_components/ShortcutItem/index.tsx
index 523c37086c..5fdbf07971 100644
--- a/web-client/app/_components/ShortcutItem/index.tsx
+++ b/web-client/app/_components/ShortcutItem/index.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 import useCreateConversation from "@/_hooks/useCreateConversation";
-import { ProductDetailFragment } from "@/graphql";
+import Image from "next/image";
+import { Product } from "@/_models/Product";
 
 type Props = {
-  product: ProductDetailFragment;
+  product: Product;
 };
 
 const ShortcutItem: React.FC<Props> = ({ product }) => {
@@ -14,17 +15,22 @@ const ShortcutItem: React.FC<Props> = ({ product }) => {
   };
 
   return (
-    <button className="flex items-center gap-2" onClick={onClickHandler}>
-      {product.image_url && (
-        <img
-          src={product.image_url}
+    <button
+      className="flex items-center gap-2 mx-1 p-2"
+      onClick={onClickHandler}
+    >
+      {product.avatarUrl && (
+        <Image
+          width={36}
+          height={36}
+          src={product.avatarUrl}
           className="w-9 aspect-square rounded-full"
           alt=""
         />
       )}
-      <div className="flex flex-col text-sm leading-[20px]">
-        <span className="text-[#111928] dark:text-white">{product.name}</span>
-      </div>
+      <span className="text-gray-900 dark:text-white font-normal text-sm">
+        {product.name}
+      </span>
     </button>
   );
 };
diff --git a/web-client/app/_components/ShortcutList/index.tsx b/web-client/app/_components/ShortcutList/index.tsx
index 3d72e96ad2..2c2e9930ff 100644
--- a/web-client/app/_components/ShortcutList/index.tsx
+++ b/web-client/app/_components/ShortcutList/index.tsx
@@ -1,42 +1,52 @@
-import Image from "next/image";
-import React from "react";
+"use client";
+
+import React, { useEffect, useState } from "react";
 import ShortcutItem from "../ShortcutItem";
-import { observer } from "mobx-react-lite";
-import { ProductDetailFragment } from "@/graphql";
+import { GetProductsDocument, GetProductsQuery } from "@/graphql";
+import ExpandableHeader from "../ExpandableHeader";
+import { useQuery } from "@apollo/client";
+import { useAtomValue } from "jotai";
+import { searchAtom } from "@/_helpers/JotaiWrapper";
+import { Product, toProduct } from "@/_models/Product";
 
-type Props = {
-  products: ProductDetailFragment[];
-};
+const ShortcutList: React.FC = () => {
+  const searchText = useAtomValue(searchAtom);
+  const { data } = useQuery<GetProductsQuery>(GetProductsDocument);
+  const [expand, setExpand] = useState<boolean>(true);
+  const [featuredProducts, setFeaturedProducts] = useState<Product[]>([]);
 
-const ShortcutList: React.FC<Props> = observer(({ products }) => {
-  const [expand, setExpand] = React.useState<boolean>(true);
+  useEffect(() => {
+    if (data?.products) {
+      const products: Product[] = data.products.map((p) => toProduct(p));
+      setFeaturedProducts(
+        [...(products || [])]
+          .sort(() => 0.5 - Math.random())
+          .slice(0, 3)
+          .filter(
+            (e) =>
+              searchText === "" ||
+              e.name.toLowerCase().includes(searchText.toLowerCase())
+          ) || []
+      );
+    }
+  }, [data?.products, searchText]);
 
   return (
-    <div className="flex flex-col w-full px-3 pt-3">
-      <button
+    <div className="flex flex-col mt-6 gap-2">
+      <ExpandableHeader
+        title="START A NEW CHAT"
+        expanded={expand}
         onClick={() => setExpand(!expand)}
-        className="flex justify-between items-center"
-      >
-        <h2 className="text-[#9CA3AF] font-bold text-xs leading-[12px]">
-          SHORTCUTS
-        </h2>
-        <Image
-          className={`${expand ? "" : "rotate-180"}`}
-          src={"/icons/unicorn_angle-up.svg"}
-          width={24}
-          height={24}
-          alt=""
-        />
-      </button>
-      <div
-        className={`flex flex-col gap-3 py-2 ${!expand ? "hidden " : "block"}`}
-      >
-        {products.map((product) => (
-          <ShortcutItem key={product.slug} product={product} />
-        ))}
-      </div>
+      />
+      {expand ? (
+        <div className="flex flex-row mx-1 items-center rounded-lg hover:bg-hover-light">
+          {featuredProducts.map((product) => (
+            <ShortcutItem key={product.slug} product={product} />
+          ))}
+        </div>
+      ) : null}
     </div>
   );
-});
+};
 
 export default ShortcutList;
diff --git a/web-client/app/_components/SidebarLeft/index.tsx b/web-client/app/_components/SidebarLeft/index.tsx
deleted file mode 100644
index 6e8f6f30ed..0000000000
--- a/web-client/app/_components/SidebarLeft/index.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-"use client";
-import React, { useEffect, useState } from "react";
-import SearchBar from "../SearchBar";
-import ShortcutList from "../ShortcutList";
-import HistoryList from "../HistoryList";
-import { observer } from "mobx-react-lite";
-import { useStore } from "@/_models/RootStore";
-import Image from "next/image";
-import { usePathname } from "next/navigation";
-import useGetUserConversations from "@/_hooks/useGetUserConversations";
-import DiscordContainer from "../DiscordContainer";
-import { useQuery } from "@apollo/client";
-import {
-  GetProductsQuery,
-  GetProductsDocument,
-  ProductDetailFragment,
-} from "@/graphql";
-import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
-
-export const SidebarLeft: React.FC = observer(() => {
-  const router = usePathname();
-  const [searchText, setSearchText] = useState("");
-  const { user } = useGetCurrentUser();
-  const { getUserConversations } = useGetUserConversations();
-  const [featuredProducts, setFeaturedProducts] = useState<
-    ProductDetailFragment[]
-  >([]);
-
-  const { historyStore } = useStore();
-  const navigation = ["pricing", "docs", "about"];
-
-  const { loading, error, data } =
-    useQuery<GetProductsQuery>(GetProductsDocument);
-
-  const checkRouter = () =>
-    navigation.map((item) => router?.includes(item)).includes(true);
-
-  useEffect(() => {
-    if (user) {
-      const createConversationAndActive = async () => {
-        await getUserConversations(user);
-      };
-      createConversationAndActive();
-    }
-  }, [user]);
-
-  useEffect(() => {
-    if (data?.products) {
-      setFeaturedProducts(
-        [...(data.products || [])]
-          .sort(() => 0.5 - Math.random())
-          .slice(0, 3)
-          .filter(
-            (e) =>
-              searchText === "" ||
-              e.name.toLowerCase().includes(searchText.toLowerCase())
-          ) || []
-      );
-    }
-  }, [data?.products, searchText]);
-
-  const onLogoClick = () => {
-    historyStore.clearActiveConversationId();
-  };
-  const onSearching = (text: string) => {
-    setSearchText(text);
-  };
-
-  return (
-    <div
-      className={`${
-        historyStore.showAdvancedPrompt ? "lg:hidden" : "lg:flex"
-      } ${
-        checkRouter() ? "lg:hidden" : "lg:block"
-      } hidden lg:inset-y-0 lg:w-72 lg:flex-col flex-shrink-0 overflow-hidden border-r border-gray-200 dark:bg-gray-800`}
-    >
-      <div className="h-full flex grow flex-col overflow-hidden">
-        <button className="p-3 flex gap-3" onClick={onLogoClick}>
-          <div className="flex gap-[2px] items-center">
-            <Image src={"/icons/app_icon.svg"} width={28} height={28} alt="" />
-            <Image src={"/icons/Jan.svg"} width={27} height={12} alt="" />
-          </div>
-        </button>
-        <div className="flex flex-col gap-3 overflow-x-hidden h-full">
-          <div className="flex items-center px-3">
-            <SearchBar onTextChanged={onSearching} />
-          </div>
-          <div className="flex flex-col h-full overflow-x-hidden scroll gap-3">
-            {data && <ShortcutList products={featuredProducts} />}
-            {loading && (
-              <div className="w-full flex flex-row justify-center items-center">
-                <Image
-                  src="/icons/loading.svg"
-                  width={32}
-                  height={32}
-                  alt="loading"
-                />
-              </div>
-            )}
-            <HistoryList searchText={searchText} />
-          </div>
-        </div>
-      </div>
-      <div className="flex-grow">
-        <DiscordContainer />
-      </div>
-    </div>
-  );
-});
diff --git a/web-client/app/_components/SimpleImageMessage/index.tsx b/web-client/app/_components/SimpleImageMessage/index.tsx
index d7596ecbb9..bb9500a9bd 100644
--- a/web-client/app/_components/SimpleImageMessage/index.tsx
+++ b/web-client/app/_components/SimpleImageMessage/index.tsx
@@ -1,105 +1,72 @@
-import Image from "next/image";
-import JanImage from "../JanImage";
-import { displayDate } from "@/_utils/datetime";
-import Link from "next/link";
-import { useStore } from "@/_models/RootStore";
-import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
-import {
-  CreateMessageMutation,
-  CreateMessageDocument,
-  GenerateImageMutation,
-  GenerateImageDocument,
-} from "@/graphql";
-import { useMutation } from "@apollo/client";
-
-type Props = {
-  avatarUrl?: string;
-  senderName: string;
-  text?: string;
-  createdAt: number;
-  imageUrls: string[];
-};
-
-const SimpleImageMessage: React.FC<Props> = ({
-  avatarUrl = "",
-  senderName,
-  imageUrls,
-  text,
-  createdAt,
-}) => {
-  const { historyStore } = useStore();
-  const { user } = useGetCurrentUser();
-  const [createMessageMutation] = useMutation<CreateMessageMutation>(
-    CreateMessageDocument
-  );
-  const [imageGenerationMutation] = useMutation<GenerateImageMutation>(
-    GenerateImageDocument
-  );
-
-  const onRegenerate = () => {
-    if (!user) {
-      // TODO: we should show an error here
-      return;
-    }
-
-    historyStore.sendMessage(
-      createMessageMutation,
-      imageGenerationMutation,
-      text ?? "",
-      user.id,
-      senderName,
-      avatarUrl
-    );
-  };
-
-  return (
-    <div className="flex items-start gap-2">
-      <img
-        className="rounded-full"
-        src={avatarUrl}
-        width={32}
-        height={32}
-        alt=""
-      />
-      <div className="flex flex-col gap-1">
-        <div className="flex gap-1 justify-start items-baseline">
-          <div className="text-[#1B1B1B] text-[13px] font-extrabold leading-[15.2px]">
-            {senderName}
-          </div>
-          <div className="text-[11px] leading-[13.2px] font-medium text-gray-400 ml-2">
-            {displayDate(createdAt)}
-          </div>
-        </div>
-        <div className="flex items-center gap-3 flex-col">
-          <JanImage
-            imageUrl={imageUrls[0]}
-            className="w-72 aspect-square rounded-lg"
-          />
-          <div className="flex flex-row justify-start items-start w-full gap-2">
-            <Link
-              href={imageUrls[0] || "#"}
-              target="_blank_"
-              className="flex gap-1 items-center px-2 py-1 bg-[#F3F4F6] rounded-[12px]"
-            >
-              <Image src="/icons/download.svg" width={16} height={16} alt="" />
-              <span className="leading-[20px] text-[14px] text-[#111928]">
-                Download
-              </span>
-            </Link>
-            <button
-              className="flex gap-1 items-center px-2 py-1 bg-[#F3F4F6] rounded-[12px]"
-              onClick={onRegenerate}
-            >
-              <Image src="/icons/refresh.svg" width={16} height={16} alt="" />
-              <span className="leading-[20px] text-[14px] text-[#111928]">
-                Re-generate
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SimpleImageMessage;
+import Image from "next/image";
+import JanImage from "../JanImage";
+import { displayDate } from "@/_utils/datetime";
+import Link from "next/link";
+
+type Props = {
+  avatarUrl?: string;
+  senderName: string;
+  text?: string;
+  createdAt: number;
+  imageUrls: string[];
+};
+
+const SimpleImageMessage: React.FC<Props> = ({
+  avatarUrl = "",
+  senderName,
+  imageUrls,
+  text,
+  createdAt,
+}) => {
+  // TODO handle regenerate image case
+  return (
+    <div className="flex items-start gap-2">
+      <img
+        className="rounded-full"
+        src={avatarUrl}
+        width={32}
+        height={32}
+        alt=""
+      />
+      <div className="flex flex-col gap-1">
+        <div className="flex gap-1 justify-start items-baseline">
+          <div className="text-[#1B1B1B] text-[13px] font-extrabold leading-[15.2px]">
+            {senderName}
+          </div>
+          <div className="text-[11px] leading-[13.2px] font-medium text-gray-400 ml-2">
+            {displayDate(createdAt)}
+          </div>
+        </div>
+        <div className="flex items-center gap-3 flex-col">
+          <JanImage
+            imageUrl={imageUrls[0]}
+            className="w-72 aspect-square rounded-lg"
+          />
+          <div className="flex flex-row justify-start items-start w-full gap-2">
+            <Link
+              href={imageUrls[0] || "#"}
+              target="_blank_"
+              className="flex gap-1 items-center px-2 py-1 bg-[#F3F4F6] rounded-[12px]"
+            >
+              <Image src="/icons/download.svg" width={16} height={16} alt="" />
+              <span className="leading-[20px] text-[14px] text-[#111928]">
+                Download
+              </span>
+            </Link>
+            <button
+              className="flex gap-1 items-center px-2 py-1 bg-[#F3F4F6] rounded-[12px]"
+              // onClick={() => sendChatMessage()}
+            >
+              <Image src="/icons/refresh.svg" width={16} height={16} alt="" />
+              <span className="leading-[20px] text-[14px] text-[#111928]">
+                Re-generate
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SimpleImageMessage;
diff --git a/web-client/app/_components/SimpleTextMessage/index.tsx b/web-client/app/_components/SimpleTextMessage/index.tsx
index c1e6de80f5..fe7364bedc 100644
--- a/web-client/app/_components/SimpleTextMessage/index.tsx
+++ b/web-client/app/_components/SimpleTextMessage/index.tsx
@@ -1,56 +1,56 @@
-import React from "react";
-import { displayDate } from "@/_utils/datetime";
-import { TextCode } from "../TextCode";
-import { getMessageCode } from "@/_utils/message";
-
-type Props = {
-  avatarUrl?: string;
-  senderName: string;
-  createdAt: number;
-  text?: string;
-};
-
-const SimpleTextMessage: React.FC<Props> = ({
-  senderName,
-  createdAt,
-  avatarUrl = "",
-  text = "",
-}) => {
-  return (
-    <div className="flex items-start gap-2">
-      <img
-        className="rounded-full"
-        src={avatarUrl}
-        width={32}
-        height={32}
-        alt=""
-      />
-      <div className="flex flex-col gap-1 w-full">
-        <div className="flex gap-1 justify-start items-baseline">
-          <div className="text-[#1B1B1B] text-[13px] font-extrabold leading-[15.2px] dark:text-[#d1d5db]">
-            {senderName}
-          </div>
-          <div className="text-[11px] leading-[13.2px] font-medium text-gray-400">
-            {displayDate(createdAt)}
-          </div>
-        </div>
-        {text.includes("```") ? (
-          getMessageCode(text).map((item, i) => (
-            <div className="flex gap-1 flex-col" key={i}>
-              <p className="leading-[20px] whitespace-break-spaces text-[14px] font-normal dark:text-[#d1d5db]">
-                {item.text}
-              </p>
-              {item.code.trim().length > 0 && <TextCode text={item.code} />}
-            </div>
-          ))
-        ) : (
-          <p className="leading-[20px] whitespace-break-spaces text-[14px] font-normal dark:text-[#d1d5db]">
-            {text}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default React.memo(SimpleTextMessage);
+import React from "react";
+import { displayDate } from "@/_utils/datetime";
+import { TextCode } from "../TextCode";
+import { getMessageCode } from "@/_utils/message";
+import Image from "next/image";
+
+type Props = {
+  avatarUrl: string;
+  senderName: string;
+  createdAt: number;
+  text?: string;
+};
+
+const SimpleTextMessage: React.FC<Props> = ({
+  senderName,
+  createdAt,
+  avatarUrl = "",
+  text = "",
+}) => (
+  <div className="flex items-start gap-2 ml-3">
+    <Image
+      className="rounded-full"
+      src={avatarUrl}
+      width={32}
+      height={32}
+      alt=""
+    />
+    <div className="flex flex-col gap-1 w-full">
+      <div className="flex gap-1 justify-start items-baseline">
+        <div className="text-[#1B1B1B] text-[13px] font-extrabold leading-[15.2px] dark:text-[#d1d5db]">
+          {senderName}
+        </div>
+        <div className="text-[11px] leading-[13.2px] font-medium text-gray-400">
+          {displayDate(createdAt)}
+        </div>
+      </div>
+      {text.includes("```") ? (
+        getMessageCode(text).map((item, i) => (
+          <div className="flex gap-1 flex-col" key={i}>
+            <p className="leading-[20px] whitespace-break-spaces text-[14px] font-normal dark:text-[#d1d5db]">
+              {item.text}
+            </p>
+            {item.code.trim().length > 0 && <TextCode text={item.code} />}
+          </div>
+        ))
+      ) : (
+        <p
+          className="leading-[20px] whitespace-break-spaces text-[14px] font-normal dark:text-[#d1d5db]"
+          dangerouslySetInnerHTML={{ __html: text }}
+        />
+      )}
+    </div>
+  </div>
+);
+
+export default React.memo(SimpleTextMessage);
diff --git a/web-client/app/_components/Slide/index.tsx b/web-client/app/_components/Slide/index.tsx
index a6b2631877..9ecc3fdf31 100644
--- a/web-client/app/_components/Slide/index.tsx
+++ b/web-client/app/_components/Slide/index.tsx
@@ -1,13 +1,13 @@
 import useCreateConversation from "@/_hooks/useCreateConversation";
-import { ProductDetailFragment } from "@/graphql";
+import { Product } from "@/_models/Product";
 import Image from "next/image";
 
 type Props = {
-  product: ProductDetailFragment;
+  product: Product;
 };
 
 const Slide: React.FC<Props> = ({ product }) => {
-  const { name, image_url, description } = product;
+  const { name, avatarUrl, description } = product;
   const { requestCreateConvo } = useCreateConversation();
 
   const onClick = () => {
@@ -17,9 +17,10 @@ const Slide: React.FC<Props> = ({ product }) => {
   return (
     <div className="w-full embla__slide h-[435px] relative">
       <Image
-        className="object-cover w-full h-full embla__slide__img"
-        src={image_url ?? ""}
-        layout="fill"
+        className="w-full h-auto embla__slide__img"
+        src={avatarUrl}
+        fill
+        priority
         alt=""
       />
       <div className="absolute bg-[rgba(0,0,0,0.7)] w-full text-white bottom-0 right-0">
diff --git a/web-client/app/_components/Slider/index.tsx b/web-client/app/_components/Slider/index.tsx
index 4011f0e69a..07c8bc31da 100644
--- a/web-client/app/_components/Slider/index.tsx
+++ b/web-client/app/_components/Slider/index.tsx
@@ -2,10 +2,10 @@ import { FC, useCallback, useEffect, useState } from "react";
 import Slide from "../Slide";
 import useEmblaCarousel, { EmblaCarouselType } from "embla-carousel-react";
 import { NextButton, PrevButton } from "../ButtonSlider";
-import { ProductDetailFragment } from "@/graphql";
+import { Product } from "@/_models/Product";
 
 type Props = {
-  products: ProductDetailFragment[];
+  products: Product[];
 };
 
 const Slider: FC<Props> = ({ products }) => {
@@ -35,12 +35,12 @@ const Slider: FC<Props> = ({ products }) => {
   }, [emblaApi, onSelect]);
 
   return (
-    <div className="embla rounded-lg overflow-hidden relative">
+    <div className="embla rounded-lg overflow-hidden relative mt-6 mx-6">
       <div className="embla__viewport" ref={emblaRef}>
         <div className="embla__container">
-          {products.map((product) => {
-            return <Slide key={product.slug} product={product} />;
-          })}
+          {products.map((product) => (
+            <Slide key={product.slug} product={product} />
+          ))}
         </div>
       </div>
       <div className="embla__buttons">
diff --git a/web-client/app/_components/StreamTextMessage/index.tsx b/web-client/app/_components/StreamTextMessage/index.tsx
index f39b060525..6a6fc9fb83 100644
--- a/web-client/app/_components/StreamTextMessage/index.tsx
+++ b/web-client/app/_components/StreamTextMessage/index.tsx
@@ -1,19 +1,13 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { displayDate } from "@/_utils/datetime";
-import { useStore } from "@/_models/RootStore";
-import { StreamingText, useTextBuffer } from "nextjs-openai";
-import { MessageSenderType, MessageStatus } from "@/_models/ChatMessage";
-import { Role } from "@/_models/History";
-import { useMutation } from "@apollo/client";
-import { OpenAI } from "openai-streams";
-import {
-  UpdateMessageDocument,
-  UpdateMessageMutation,
-  UpdateMessageMutationVariables,
-} from "@/graphql";
+import { TextCode } from "../TextCode";
+import { getMessageCode } from "@/_utils/message";
+import Image from "next/image";
+import { useAtom } from "jotai";
+import { currentStreamingMessageAtom } from "@/_helpers/JotaiWrapper";
 
 type Props = {
-  id?: string;
+  id: string;
   avatarUrl?: string;
   senderName: string;
   createdAt: number;
@@ -25,67 +19,13 @@ const StreamTextMessage: React.FC<Props> = ({
   senderName,
   createdAt,
   avatarUrl = "",
+  text = "",
 }) => {
-  const [data, setData] = React.useState<any | undefined>();
-  const { historyStore } = useStore();
-  const conversation = historyStore?.getActiveConversation();
-  const [updateMessage] = useMutation<UpdateMessageMutation>(
-    UpdateMessageDocument
-  );
-
-  React.useEffect(() => {
-    if (
-      !conversation ||
-      conversation.chatMessages.findIndex((e) => e.id === id) !==
-        conversation.chatMessages.length - 1
-    ) {
-      return;
-    }
-    const messages = conversation?.chatMessages
-      .slice(-10)
-      .filter((e) => e.id !== id)
-      .map((e) => ({
-        role:
-          e.messageSenderType === MessageSenderType.User
-            ? Role.User
-            : Role.Assistant,
-        content: e.text,
-      }));
-    setData({
-      messages,
-    });
-  }, [conversation]);
-
-  const { buffer, done } = useTextBuffer({
-    url: `api/openai`,
-    data,
-  });
+  const [message, _] = useAtom(currentStreamingMessageAtom);
 
-  useEffect(() => {
-    if (done) {
-      // mutate result
-      const variables: UpdateMessageMutationVariables = {
-        id: id,
-        data: {
-          content: buffer.join(""),
-          status: MessageStatus.Ready,
-        },
-      };
-      updateMessage({
-        variables,
-      });
-    }
-  }, [done]);
-
-  useEffect(() => {
-    if (buffer.length > 0 && conversation?.isWaitingForModelResponse) {
-      historyStore.finishActiveConversationWaiting();
-    }
-  }, [buffer]);
-
-  return data ? (
-    <div className="flex items-start gap-2">
-      <img
+  return message?.text && message?.text?.length > 0 ? (
+    <div className="flex items-start gap-2 ml-3">
+      <Image
         className="rounded-full"
         src={avatarUrl}
         width={32}
@@ -101,9 +41,21 @@ const StreamTextMessage: React.FC<Props> = ({
             {displayDate(createdAt)}
           </div>
         </div>
-        <div className="leading-[20px] whitespace-break-spaces text-[14px] font-normal dark:text-[#d1d5db]">
-          <StreamingText buffer={buffer} fade={100} />
-        </div>
+        {message.text.includes("```") ? (
+          getMessageCode(message.text).map((item, i) => (
+            <div className="flex gap-1 flex-col" key={i}>
+              <p className="leading-[20px] whitespace-break-spaces text-[14px] font-normal dark:text-[#d1d5db]">
+                {item.text}
+              </p>
+              {item.code.trim().length > 0 && <TextCode text={item.code} />}
+            </div>
+          ))
+        ) : (
+          <p
+            className="leading-[20px] whitespace-break-spaces text-[14px] font-normal dark:text-[#d1d5db]"
+            dangerouslySetInnerHTML={{ __html: message.text }}
+          />
+        )}
       </div>
     </div>
   ) : (
diff --git a/web-client/app/_components/TabModelDetail/index.tsx b/web-client/app/_components/TabModelDetail/index.tsx
index 7a0588e5ec..557e3c885a 100644
--- a/web-client/app/_components/TabModelDetail/index.tsx
+++ b/web-client/app/_components/TabModelDetail/index.tsx
@@ -1,35 +1,35 @@
-import Image from "next/image";
-type Props = {
-  onTabClick: (clickedTab: "description" | "api") => void;
-  tab: string;
-};
-
-export const TabModelDetail: React.FC<Props> = ({ onTabClick, tab }) => {
-  const btns = [
-    {
-      name: "api",
-      icon: "/icons/unicorn_arrow.svg",
-    },
-    {
-      name: "description",
-      icon: "/icons/unicorn_exclamation-circle.svg",
-    },
-  ];
-
-  return (
-    <div className="flex gap-[2px] rounded p-1 w-full bg-gray-200">
-      {btns.map((item, index) => (
-        <button
-          key={index}
-          onClick={() => onTabClick(item.name as "description" | "api")}
-          className={`w-1/2 capitalize flex items-center justify-center py-[6px] px-3 gap-2 relative text-sm leading-5 ${
-            tab !== item.name ? "" : "bg-white rounded shadow-sm"
-          }`}
-        >
-          <Image src={item.icon} width={20} height={20} alt="" />
-          {item.name}
-        </button>
-      ))}
-    </div>
-  );
-};
+import Image from "next/image";
+type Props = {
+  onTabClick: (clickedTab: "description" | "api") => void;
+  tab: string;
+};
+
+export const TabModelDetail: React.FC<Props> = ({ onTabClick, tab }) => {
+  const btns = [
+    {
+      name: "api",
+      icon: "/icons/unicorn_arrow.svg",
+    },
+    {
+      name: "description",
+      icon: "/icons/unicorn_exclamation-circle.svg",
+    },
+  ];
+
+  return (
+    <div className="flex gap-[2px] rounded p-1 w-full bg-gray-200">
+      {btns.map((item, index) => (
+        <button
+          key={index}
+          onClick={() => onTabClick(item.name as "description" | "api")}
+          className={`w-1/2 capitalize flex items-center justify-center py-[6px] px-3 gap-2 relative text-sm leading-5 ${
+            tab !== item.name ? "" : "bg-white rounded shadow-sm"
+          }`}
+        >
+          <Image src={item.icon} width={20} height={20} alt="" />
+          {item.name}
+        </button>
+      ))}
+    </div>
+  );
+};
diff --git a/web-client/app/_components/TextCode/index.tsx b/web-client/app/_components/TextCode/index.tsx
index 5865acbddb..9add028618 100644
--- a/web-client/app/_components/TextCode/index.tsx
+++ b/web-client/app/_components/TextCode/index.tsx
@@ -1,31 +1,31 @@
-import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import Image from "next/image";
-
-type Props = {
-  text: string;
-};
-
-export const TextCode: React.FC<Props> = ({ text }) => (
-  <div className="w-full rounded-lg overflow-hidden bg-[#1F2A37] mr-3">
-    <div className="text-gray-200 bg-gray-800 flex items-center justify-between px-4 py-2 text-xs capitalize">
-      <button onClick={() => navigator.clipboard.writeText(text)}>
-        <Image
-          src={"/icons/unicorn_clipboard-alt.svg"}
-          width={24}
-          height={24}
-          alt=""
-        />
-      </button>
-    </div>
-    <SyntaxHighlighter
-      className="w-full overflow-x-hidden resize-none"
-      language="jsx"
-      style={atomOneDark}
-      customStyle={{ padding: "12px", background: "transparent" }}
-      wrapLongLines={true}
-    >
-      {text}
-    </SyntaxHighlighter>
-  </div>
-);
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import Image from "next/image";
+
+type Props = {
+  text: string;
+};
+
+export const TextCode: React.FC<Props> = ({ text }) => (
+  <div className="w-full rounded-lg overflow-hidden bg-[#1F2A37] mr-3">
+    <div className="text-gray-200 bg-gray-800 flex items-center justify-between px-4 py-2 text-xs capitalize">
+      <button onClick={() => navigator.clipboard.writeText(text)}>
+        <Image
+          src={"/icons/unicorn_clipboard-alt.svg"}
+          width={24}
+          height={24}
+          alt=""
+        />
+      </button>
+    </div>
+    <SyntaxHighlighter
+      className="w-full overflow-x-hidden resize-none"
+      language="jsx"
+      style={atomOneDark}
+      customStyle={{ padding: "12px", background: "transparent" }}
+      wrapLongLines={true}
+    >
+      {text}
+    </SyntaxHighlighter>
+  </div>
+);
diff --git a/web-client/app/_components/TitleBlankState/index.tsx b/web-client/app/_components/TitleBlankState/index.tsx
index 2b69d2aede..d05b4656c3 100644
--- a/web-client/app/_components/TitleBlankState/index.tsx
+++ b/web-client/app/_components/TitleBlankState/index.tsx
@@ -1,11 +1,11 @@
-type Props = {
-  title: string;
-};
-
-export const TitleBlankState: React.FC<Props> = ({ title }) => {
-  return (
-    <h2 className="text-[#6B7280] text-[20px] leading-[25px] tracking-[-0.4px] font-semibold">
-      {title}
-    </h2>
-  );
-};
+type Props = {
+  title: string;
+};
+
+export const TitleBlankState: React.FC<Props> = ({ title }) => {
+  return (
+    <h2 className="text-[#6B7280] text-[20px] leading-[25px] tracking-[-0.4px] font-semibold">
+      {title}
+    </h2>
+  );
+};
diff --git a/web-client/app/_components/TryItYourself/index.tsx b/web-client/app/_components/TryItYourself/index.tsx
new file mode 100644
index 0000000000..707569a51f
--- /dev/null
+++ b/web-client/app/_components/TryItYourself/index.tsx
@@ -0,0 +1,39 @@
+import { currentProductAtom, currentPromptAtom } from "@/_helpers/JotaiWrapper";
+import { GetProductPromptsQuery, GetProductPromptsDocument } from "@/graphql";
+import { useQuery } from "@apollo/client";
+import { useAtomValue, useSetAtom } from "jotai";
+
+const TryItYourself = () => {
+  const setCurrentPrompt = useSetAtom(currentPromptAtom);
+  const product = useAtomValue(currentProductAtom);
+  const { data } = useQuery<GetProductPromptsQuery>(GetProductPromptsDocument, {
+    variables: { productSlug: product?.slug ?? "" },
+  });
+
+  if (!data || data.prompts.length === 0) {
+    return <div />;
+  }
+
+  const promps = data.prompts;
+
+  return (
+    <div className="flex flex-col gap-4 tracking-[-0.4px] leading-[22px] text-base">
+      <h2 className="font-bold">Try it yourself</h2>
+      <ul className="border-[1px] border-[#D1D5DB] rounded-[12px]">
+        {promps.map((prompt, index) => (
+          <button
+            onClick={() => setCurrentPrompt(prompt.content ?? "")}
+            key={prompt.slug}
+            className={`text-sm text-gray-500 leading-[20px] flex gap-[10px] border-b-[${
+              index !== promps.length - 1 ? "1" : "0"
+            }px] border-[#E5E7EB] hover:text-blue-400 text-left p-3 w-full`}
+          >
+            {prompt.content}
+          </button>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default TryItYourself;
diff --git a/web-client/app/_components/UploadFileImage/index.tsx b/web-client/app/_components/UploadFileImage/index.tsx
index 2ed66e85b4..a7b74663ee 100644
--- a/web-client/app/_components/UploadFileImage/index.tsx
+++ b/web-client/app/_components/UploadFileImage/index.tsx
@@ -1,102 +1,102 @@
-import React, { useRef, useState } from "react";
-import Image from "next/image";
-import { FieldValues, UseFormRegister } from "react-hook-form";
-
-type Props = {
-  register: UseFormRegister<FieldValues>;
-};
-
-export const UploadFileImage: React.FC<Props> = ({ register }) => {
-  const ref = useRef<HTMLInputElement>(null);
-  const [image, setImage] = useState<string | null>(null);
-  const [checked, setChecked] = useState<boolean>(true);
-  const [fileName, setFileName] = useState<string>("No selected file");
-
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-
-    const file = event.dataTransfer.files[0];
-    if (!file || file.type.split("/")[0] !== "image") return;
-
-    setImage(URL.createObjectURL(file));
-    setFileName(file.name);
-  };
-
-  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-  };
-
-  const handleClick = () => {
-    ref.current?.click();
-  };
-
-  const onSelectedFile = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-    if (!files || files.length === 0) return;
-
-    const file = files[0];
-    if (file.type.split("/")[0] !== "image") return;
-
-    setImage(URL.createObjectURL(file));
-    setFileName(file.name);
-  };
-
-  const handleDelete = () => {
-    setImage(null);
-    setFileName("No file selected");
-  };
-
-  return (
-    <div
-      className={`flex flex-col gap-[10px] py-3`}
-      onDrop={handleDrop}
-      onDragOver={handleDragOver}
-    >
-      {/* {image ? (
-        <div className="relative group">
-          <Image
-            style={{ width: "100%", height: "107px", objectFit: "cover" }}
-            src={image}
-            width={246}
-            height={104}
-            alt={fileName}
-          />
-          <div className="hidden justify-center items-center absolute top-0 left-0 w-full h-full group-hover:flex group-hover:bg-[rgba(255, 255, 255, 0.2)]">
-            <button onClick={handleDelete}>Delete</button>
-          </div>
-        </div>
-      ) : ( */}
-      <div
-        onClick={handleClick}
-        className="flex flex-col justify-center items-center py-5 px-2 gap-2 round-[2px] border border-dashed border-[#C8D0E0] rounded-sm"
-      >
-        {/* <Image src={"/icons/ic_plus.svg"} width={14} height={14} alt="" />
-          <span className="text-gray-700 font-normal text-sm">
-            Drag an image here, or click to select
-          </span> */}
-        <input
-          {...register("fileInput", { required: true })}
-          // ref={ref}
-          type="file"
-          onChange={onSelectedFile}
-          accept="image/*"
-        />
-      </div>
-      ){/* } */}
-      <div
-        className="flex gap-2 items-center cursor-pointer"
-        onClick={() => setChecked(!checked)}
-      >
-        <input
-          checked={checked}
-          className="rounded"
-          type="checkbox"
-          onChange={() => setChecked(!checked)}
-        />
-        <span className="text-sm leading-5 text-[#111928] pointer-events-none">
-          Crop center to fit output resolution
-        </span>
-      </div>
-    </div>
-  );
-};
+import React, { useRef, useState } from "react";
+import Image from "next/image";
+import { FieldValues, UseFormRegister } from "react-hook-form";
+
+type Props = {
+  register: UseFormRegister<FieldValues>;
+};
+
+export const UploadFileImage: React.FC<Props> = ({ register }) => {
+  const ref = useRef<HTMLInputElement>(null);
+  const [image, setImage] = useState<string | null>(null);
+  const [checked, setChecked] = useState<boolean>(true);
+  const [fileName, setFileName] = useState<string>("No selected file");
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+
+    const file = event.dataTransfer.files[0];
+    if (!file || file.type.split("/")[0] !== "image") return;
+
+    setImage(URL.createObjectURL(file));
+    setFileName(file.name);
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+  };
+
+  const handleClick = () => {
+    ref.current?.click();
+  };
+
+  const onSelectedFile = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (!files || files.length === 0) return;
+
+    const file = files[0];
+    if (file.type.split("/")[0] !== "image") return;
+
+    setImage(URL.createObjectURL(file));
+    setFileName(file.name);
+  };
+
+  const handleDelete = () => {
+    setImage(null);
+    setFileName("No file selected");
+  };
+
+  return (
+    <div
+      className={`flex flex-col gap-[10px] py-3`}
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+    >
+      {/* {image ? (
+        <div className="relative group">
+          <Image
+            style={{ width: "100%", height: "107px", objectFit: "cover" }}
+            src={image}
+            width={246}
+            height={104}
+            alt={fileName}
+          />
+          <div className="hidden justify-center items-center absolute top-0 left-0 w-full h-full group-hover:flex group-hover:bg-[rgba(255, 255, 255, 0.2)]">
+            <button onClick={handleDelete}>Delete</button>
+          </div>
+        </div>
+      ) : ( */}
+      <div
+        onClick={handleClick}
+        className="flex flex-col justify-center items-center py-5 px-2 gap-2 round-[2px] border border-dashed border-[#C8D0E0] rounded-sm"
+      >
+        {/* <Image src={"/icons/ic_plus.svg"} width={14} height={14} alt="" />
+          <span className="text-gray-700 font-normal text-sm">
+            Drag an image here, or click to select
+          </span> */}
+        <input
+          {...register("fileInput", { required: true })}
+          // ref={ref}
+          type="file"
+          onChange={onSelectedFile}
+          accept="image/*"
+        />
+      </div>
+      ){/* } */}
+      <div
+        className="flex gap-2 items-center cursor-pointer"
+        onClick={() => setChecked(!checked)}
+      >
+        <input
+          checked={checked}
+          className="rounded"
+          type="checkbox"
+          onChange={() => setChecked(!checked)}
+        />
+        <span className="text-sm leading-5 text-[#111928] pointer-events-none">
+          Crop center to fit output resolution
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/web-client/app/_components/UserProfileDropDown/index.tsx b/web-client/app/_components/UserProfileDropDown/index.tsx
index cf334662d5..3b2f10ca5c 100644
--- a/web-client/app/_components/UserProfileDropDown/index.tsx
+++ b/web-client/app/_components/UserProfileDropDown/index.tsx
@@ -1,13 +1,11 @@
+"use client";
+
 import React from "react";
 import { Popover } from "@headlessui/react";
 import { MenuHeader } from "../MenuHeader";
 import useGetCurrentUser from "@/_hooks/useGetCurrentUser";
 
-type Props = {
-  onLogOutClick: () => void;
-};
-
-const UserProfileDropDown: React.FC<Props> = ({ onLogOutClick }) => {
+const UserProfileDropDown: React.FC = () => {
   const { loading, user } = useGetCurrentUser();
 
   if (loading || !user) {
@@ -29,7 +27,7 @@ const UserProfileDropDown: React.FC<Props> = ({ onLogOutClick }) => {
             </h2>
           </div>
         </Popover.Button>
-        <MenuHeader onLogOutClick={onLogOutClick} />
+        <MenuHeader />
       </Popover>
     </Popover.Group>
   );
diff --git a/web-client/app/_components/UserToolbar/index.tsx b/web-client/app/_components/UserToolbar/index.tsx
index 8c19649d67..6f2598a2b4 100644
--- a/web-client/app/_components/UserToolbar/index.tsx
+++ b/web-client/app/_components/UserToolbar/index.tsx
@@ -1,23 +1,29 @@
-import { observer } from "mobx-react-lite";
-import { useStore } from "@/_models/RootStore";
-
-export const UserToolbar: React.FC = observer(() => {
-  const { historyStore } = useStore();
-  const conversation = historyStore.getActiveConversation();
-
-  const avatarUrl = conversation?.product.avatarUrl ?? "";
-  const title = conversation?.product.name ?? "";
-
-  return (
-    <div className="flex items-center gap-3 p-1">
-      <img
-        className="rounded-full aspect-square w-8 h-8"
-        src={avatarUrl}
-        alt=""
-      />
-      <span className="flex gap-[2px] leading-6 text-base font-semibold">
-        {title}
-      </span>
-    </div>
-  );
-});
+"use client";
+
+import { currentConversationAtom } from "@/_helpers/JotaiWrapper";
+import { useAtomValue } from "jotai";
+import Image from "next/image";
+
+const UserToolbar: React.FC = () => {
+  const currentConvo = useAtomValue(currentConversationAtom);
+
+  const avatarUrl = currentConvo?.product.avatarUrl ?? "";
+  const title = currentConvo?.product.name ?? "";
+
+  return (
+    <div className="flex items-center gap-3 p-1">
+      <Image
+        className="rounded-full aspect-square w-8 h-8"
+        src={avatarUrl}
+        alt=""
+        width={36}
+        height={36}
+      />
+      <span className="flex gap-[2px] leading-6 text-base font-semibold">
+        {title}
+      </span>
+    </div>
+  );
+};
+
+export default UserToolbar;
diff --git a/web-client/app/_helpers/JotaiWrapper.tsx b/web-client/app/_helpers/JotaiWrapper.tsx
new file mode 100644
index 0000000000..76b603c969
--- /dev/null
+++ b/web-client/app/_helpers/JotaiWrapper.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import { ChatMessage, MessageStatus } from "@/_models/ChatMessage";
+import { Conversation, ConversationState } from "@/_models/Conversation";
+import { Product } from "@/_models/Product";
+import { Provider, atom } from "jotai";
+import { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function JotaiWrapper({ children }: Props) {
+  return <Provider>{children}</Provider>;
+}
+
+const activeConversationIdAtom = atom<string | undefined>(undefined);
+export const getActiveConvoIdAtom = atom((get) =>
+  get(activeConversationIdAtom)
+);
+export const setActiveConvoIdAtom = atom(
+  null,
+  (_get, set, convoId: string | undefined) => {
+    set(activeConversationIdAtom, convoId);
+  }
+);
+
+export const currentPromptAtom = atom<string>("");
+
+export const showingAdvancedPromptAtom = atom<boolean>(false);
+export const showingProductDetailAtom = atom<boolean>(false);
+export const showingMobilePaneAtom = atom<boolean>(false);
+
+/**
+ * Stores all conversations for the current user
+ */
+export const userConversationsAtom = atom<Conversation[]>([]);
+export const currentConversationAtom = atom<Conversation | undefined>((get) =>
+  get(userConversationsAtom).find((c) => c.id === get(activeConversationIdAtom))
+);
+export const setConvoUpdatedAtAtom = atom(null, (get, set, convoId: string) => {
+  const convo = get(userConversationsAtom).find((c) => c.id === convoId);
+  if (!convo) return;
+  const newConvo: Conversation = { ...convo, updatedAt: Date.now() };
+  const newConversations: Conversation[] = get(userConversationsAtom).map((c) =>
+    c.id === convoId ? newConvo : c
+  );
+
+  set(userConversationsAtom, newConversations);
+});
+
+export const currentStreamingMessageAtom = atom<ChatMessage | undefined>(undefined);
+
+export const setConvoLastImageAtom = atom(
+  null,
+  (get, set, convoId: string, lastImageUrl: string) => {
+    const convo = get(userConversationsAtom).find((c) => c.id === convoId);
+    if (!convo) return;
+    const newConvo: Conversation = { ...convo, lastImageUrl };
+    const newConversations: Conversation[] = get(userConversationsAtom).map(
+      (c) => (c.id === convoId ? newConvo : c)
+    );
+
+    set(userConversationsAtom, newConversations);
+  }
+);
+
+/**
+ * Stores all conversation states for the current user
+ */
+export const conversationStatesAtom = atom<Record<string, ConversationState>>(
+  {}
+);
+export const currentConvoStateAtom = atom<ConversationState | undefined>(
+  (get) => {
+    const activeConvoId = get(activeConversationIdAtom);
+    if (!activeConvoId) {
+      console.log("active convo id is undefined");
+      return undefined;
+    }
+
+    return get(conversationStatesAtom)[activeConvoId];
+  }
+);
+export const addNewConversationStateAtom = atom(
+  null,
+  (get, set, conversationId: string, state: ConversationState) => {
+    const currentState = { ...get(conversationStatesAtom) };
+    currentState[conversationId] = state;
+    set(conversationStatesAtom, currentState);
+  }
+);
+export const updateConversationWaitingForResponseAtom = atom(
+  null,
+  (get, set, conversationId: string, waitingForResponse: boolean) => {
+    const currentState = { ...get(conversationStatesAtom) };
+    currentState[conversationId] = {
+      ...currentState[conversationId],
+      waitingForResponse,
+    };
+    set(conversationStatesAtom, currentState);
+  }
+);
+export const updateConversationHasMoreAtom = atom(
+  null,
+  (get, set, conversationId: string, hasMore: boolean) => {
+    const currentState = { ...get(conversationStatesAtom) };
+    currentState[conversationId] = { ...currentState[conversationId], hasMore };
+    set(conversationStatesAtom, currentState);
+  }
+);
+
+/**
+ * Stores all chat messages for all conversations
+ */
+export const chatMessages = atom<Record<string, ChatMessage[]>>({});
+export const currentChatMessagesAtom = atom<ChatMessage[]>((get) => {
+  const activeConversationId = get(activeConversationIdAtom);
+  if (!activeConversationId) return [];
+  return get(chatMessages)[activeConversationId] ?? [];
+});
+
+export const addOldMessagesAtom = atom(
+  null,
+  (get, set, newMessages: ChatMessage[]) => {
+    const currentConvoId = get(activeConversationIdAtom);
+    if (!currentConvoId) return;
+
+    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
+    const updatedMessages = [...currentMessages, ...newMessages];
+
+    const newData: Record<string, ChatMessage[]> = {
+      ...get(chatMessages),
+    };
+    newData[currentConvoId] = updatedMessages;
+    set(chatMessages, newData);
+  }
+);
+export const addNewMessageAtom = atom(
+  null,
+  (get, set, newMessage: ChatMessage) => {
+    const currentConvoId = get(activeConversationIdAtom);
+    if (!currentConvoId) return;
+
+    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
+    const updatedMessages = [newMessage, ...currentMessages];
+
+    const newData: Record<string, ChatMessage[]> = {
+      ...get(chatMessages),
+    };
+    newData[currentConvoId] = updatedMessages;
+    set(chatMessages, newData);
+  }
+);
+
+export const updateMessageAtom = atom(
+  null,
+  (get, set, id: string, conversationId: string, text: string) => {
+    const messages = get(chatMessages)[conversationId] ?? [];
+    const message = messages.find((e) => e.id === id);
+    if (message) {
+      message.text = text;
+      const updatedMessages = [...messages];
+
+      const newData: Record<string, ChatMessage[]> = {
+        ...get(chatMessages),
+      };
+      newData[conversationId] = updatedMessages;
+      set(chatMessages, newData);
+    }
+  }
+);
+/**
+ * For updating the status of the last AI message that is pending
+ */
+export const updateLastMessageAsReadyAtom = atom(
+  null,
+  (get, set, id, text: string) => {
+    const currentConvoId = get(activeConversationIdAtom);
+    if (!currentConvoId) return;
+
+    const currentMessages = get(chatMessages)[currentConvoId] ?? [];
+    const messageToUpdate = currentMessages.find((e) => e.id === id);
+
+    // if message is not found, do nothing
+    if (!messageToUpdate) return;
+
+    const index = currentMessages.indexOf(messageToUpdate);
+    const updatedMsg: ChatMessage = {
+      ...messageToUpdate,
+      status: MessageStatus.Ready,
+      text: text,
+    };
+
+    currentMessages[index] = updatedMsg;
+    const newData: Record<string, ChatMessage[]> = {
+      ...get(chatMessages),
+    };
+    newData[currentConvoId] = currentMessages;
+    set(chatMessages, newData);
+  }
+);
+
+export const currentProductAtom = atom<Product | undefined>(
+  (get) =>
+    get(userConversationsAtom).find(
+      (c) => c.id === get(activeConversationIdAtom)
+    )?.product
+);
+
+export const searchAtom = atom<string>("");
+
+// modal atoms
+export const showConfirmDeleteConversationModalAtom = atom(false);
+export const showConfirmSignOutModalAtom = atom(false);
diff --git a/web-client/app/_helpers/MobxWrapper.tsx b/web-client/app/_helpers/MobxWrapper.tsx
deleted file mode 100644
index 305073caa8..0000000000
--- a/web-client/app/_helpers/MobxWrapper.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client";
-
-import { Provider, initializeStore } from "@/_models/RootStore";
-import { ReactNode } from "react";
-
-type Props = {
-  children: ReactNode;
-};
-
-export const MobxWrapper: React.FC<Props> = ({ children }) => {
-  const store = initializeStore();
-  return <Provider value={store}>{children}</Provider>;
-};
diff --git a/web-client/app/_helpers/ModalWrapper.tsx b/web-client/app/_helpers/ModalWrapper.tsx
new file mode 100644
index 0000000000..c5633b6fe7
--- /dev/null
+++ b/web-client/app/_helpers/ModalWrapper.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import ConfirmDeleteConversationModal from "@/_components/ConfirmDeleteConversationModal";
+import ConfirmSignOutModal from "@/_components/ConfirmSignOutModal";
+import MobileMenuPane from "@/_components/MobileMenuPane";
+import { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const ModalWrapper: React.FC<Props> = ({ children }) => (
+  <>
+    <MobileMenuPane />
+    <ConfirmDeleteConversationModal />
+    <ConfirmSignOutModal />
+    {children}
+  </>
+);
diff --git a/web-client/app/_helpers/ThemeWrapper.tsx b/web-client/app/_helpers/ThemeWrapper.tsx
index d6ee42e12b..a125712b99 100644
--- a/web-client/app/_helpers/ThemeWrapper.tsx
+++ b/web-client/app/_helpers/ThemeWrapper.tsx
@@ -7,10 +7,9 @@ type Props = {
   children: ReactNode;
 };
 
-export const ThemeWrapper: React.FC<Props> = ({ children }) => {
-  return (
-    <ThemeProvider enableSystem={false} attribute="class">
-      {children}
-    </ThemeProvider>
-  );
-};
+// consider to use next-themes or not. This caused the error Warning: Extra attributes from the server: class,style at html after hydration
+export const ThemeWrapper: React.FC<Props> = ({ children }) => (
+  <ThemeProvider enableSystem={false} attribute="class">
+    {children}
+  </ThemeProvider>
+);
diff --git a/web-client/app/_helpers/withSetPropAction.ts b/web-client/app/_helpers/withSetPropAction.ts
deleted file mode 100644
index d832b5c4b9..0000000000
--- a/web-client/app/_helpers/withSetPropAction.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { IStateTreeNode, SnapshotIn } from "mobx-state-tree"
-
-/**
- * If you include this in your model in an action() block just under your props,
- * it'll allow you to set property values directly while retaining type safety
- * and also is executed in an action. This is useful because often you find yourself
- * making a lot of repetitive setter actions that only update one prop.
- *
- * E.g.:
- *
- *  const UserModel = types.model("User")
- *    .props({
- *      name: types.string,
- *      age: types.number
- *    })
- *    .actions(withSetPropAction)
- *
- *   const user = UserModel.create({ name: "Jamon", age: 40 })
- *
- *   user.setProp("name", "John") // no type error
- *   user.setProp("age", 30)      // no type error
- *   user.setProp("age", "30")    // type error -- must be number
- */
-export const withSetPropAction = <T extends IStateTreeNode>(mstInstance: T) => ({
-  // generic setter for all properties
-  setProp<K extends keyof SnapshotIn<T>, V extends SnapshotIn<T>[K]>(field: K, newValue: V) {
-    // @ts-ignore - for some reason TS complains about this, but it still works fine
-    mstInstance[field] = newValue
-  },
-})
diff --git a/web-client/app/_hooks/useChatMessageSubscription.ts b/web-client/app/_hooks/useChatMessageSubscription.ts
new file mode 100644
index 0000000000..0cbb54bdef
--- /dev/null
+++ b/web-client/app/_hooks/useChatMessageSubscription.ts
@@ -0,0 +1,16 @@
+import {
+  SubscribeMessageSubscription,
+  SubscribeMessageDocument,
+} from "@/graphql";
+import { useSubscription } from "@apollo/client";
+
+const useChatMessageSubscription = (messageId: string) => {
+  const { data, loading, error } =
+    useSubscription<SubscribeMessageSubscription>(SubscribeMessageDocument, {
+      variables: { id: messageId },
+    });
+
+  return { data, loading, error };
+};
+
+export default useChatMessageSubscription;
diff --git a/web-client/app/_hooks/useChatMessages.ts b/web-client/app/_hooks/useChatMessages.ts
new file mode 100644
index 0000000000..47914edc05
--- /dev/null
+++ b/web-client/app/_hooks/useChatMessages.ts
@@ -0,0 +1,73 @@
+import {
+  addOldMessagesAtom,
+  conversationStatesAtom,
+  currentConversationAtom,
+  updateConversationHasMoreAtom,
+} from "@/_helpers/JotaiWrapper";
+import { ChatMessage, toChatMessage } from "@/_models/ChatMessage";
+import { MESSAGE_PER_PAGE } from "@/_utils/const";
+import {
+  GetConversationMessagesQuery,
+  GetConversationMessagesDocument,
+  GetConversationMessagesQueryVariables,
+  MessageDetailFragment,
+} from "@/graphql";
+import { useLazyQuery } from "@apollo/client";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useEffect } from "react";
+
+/**
+ * Custom hooks to get chat messages for current(active) conversation
+ *
+ * @param offset for pagination purpose
+ * @returns
+ */
+const useChatMessages = (offset = 0) => {
+  const addOldChatMessages = useSetAtom(addOldMessagesAtom);
+  const currentConvo = useAtomValue(currentConversationAtom);
+  if (!currentConvo) {
+    throw new Error("activeConversation is null");
+  }
+  const convoStates = useAtomValue(conversationStatesAtom);
+  const updateConvoHasMore = useSetAtom(updateConversationHasMoreAtom);
+  const [getConversationMessages, { loading, error }] =
+    useLazyQuery<GetConversationMessagesQuery>(GetConversationMessagesDocument);
+
+  useEffect(() => {
+    const hasMore = convoStates[currentConvo.id]?.hasMore ?? true;
+    if (!hasMore) return;
+
+    const variables: GetConversationMessagesQueryVariables = {
+      conversation_id: currentConvo.id,
+      limit: MESSAGE_PER_PAGE,
+      offset: offset,
+    };
+
+    getConversationMessages({ variables }).then((data) => {
+      parseMessages(data.data?.messages ?? []).then((newMessages) => {
+        const isHasMore = newMessages.length === MESSAGE_PER_PAGE;
+        addOldChatMessages(newMessages);
+        updateConvoHasMore(currentConvo.id, isHasMore);
+      });
+    });
+  }, [offset, currentConvo.id]);
+
+  return {
+    loading,
+    error,
+    hasMore: convoStates[currentConvo.id]?.hasMore ?? true,
+  };
+};
+
+async function parseMessages(
+  messages: MessageDetailFragment[]
+): Promise<ChatMessage[]> {
+  const newMessages: ChatMessage[] = [];
+  for (const m of messages) {
+    const chatMessage = await toChatMessage(m);
+    newMessages.push(chatMessage);
+  }
+  return newMessages;
+}
+
+export default useChatMessages;
diff --git a/web-client/app/_hooks/useCreateConversation.ts b/web-client/app/_hooks/useCreateConversation.ts
index f2f259b4a7..badf3ff4ce 100644
--- a/web-client/app/_hooks/useCreateConversation.ts
+++ b/web-client/app/_hooks/useCreateConversation.ts
@@ -1,17 +1,27 @@
 import {
-  ProductDetailFragment,
   CreateConversationMutation,
   CreateConversationDocument,
   CreateConversationMutationVariables,
 } from "@/graphql";
-import { useStore } from "../_models/RootStore";
 import useGetCurrentUser from "./useGetCurrentUser";
 import { useMutation } from "@apollo/client";
-import { MessageSenderType, MessageType } from "@/_models/ChatMessage";
 import useSignIn from "./useSignIn";
+import { useAtom, useSetAtom } from "jotai";
+import {
+  addNewConversationStateAtom,
+  setActiveConvoIdAtom,
+  userConversationsAtom,
+} from "@/_helpers/JotaiWrapper";
+import { Conversation } from "@/_models/Conversation";
+import { Product } from "@/_models/Product";
+import { MessageSenderType, MessageType } from "@/_models/ChatMessage";
 
 const useCreateConversation = () => {
-  const { historyStore } = useStore();
+  const [userConversations, setUserConversations] = useAtom(
+    userConversationsAtom
+  );
+  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
+  const addNewConvoState = useSetAtom(addNewConversationStateAtom);
   const { user } = useGetCurrentUser();
   const { signInWithKeyCloak } = useSignIn();
   const [createConversation] = useMutation<CreateConversationMutation>(
@@ -19,7 +29,7 @@ const useCreateConversation = () => {
   );
 
   const requestCreateConvo = async (
-    product: ProductDetailFragment,
+    product: Product,
     forceCreate: boolean = false
   ) => {
     if (!user) {
@@ -28,15 +38,15 @@ const useCreateConversation = () => {
     }
 
     // search if any fresh convo with particular product id
-    const convo = historyStore.conversations.find(
-      (convo) =>
-        convo.product.id === product.slug && convo.chatMessages.length <= 1
+    const convo = userConversations.find(
+      (convo) => convo.product.slug === product.slug
     );
 
     if (convo && !forceCreate) {
-      historyStore.setActiveConversationId(convo.id);
+      setActiveConvoId(convo.id);
       return;
     }
+
     const variables: CreateConversationMutationVariables = {
       data: {
         product_id: product.id,
@@ -49,7 +59,7 @@ const useCreateConversation = () => {
               content: product.greeting || "Hello there 👋",
               sender: MessageSenderType.Ai,
               sender_name: product.name,
-              sender_avatar_url: product.image_url ?? "",
+              sender_avatar_url: product.avatarUrl,
               message_type: MessageType.Text,
               message_sender_type: MessageSenderType.Ai,
             },
@@ -60,14 +70,26 @@ const useCreateConversation = () => {
     const result = await createConversation({
       variables,
     });
+    const newConvo = result.data?.insert_conversations_one;
 
-    if (result.data?.insert_conversations_one) {
-      historyStore.createConversation(
-        result.data.insert_conversations_one,
-        product,
-        user.id,
-        user.displayName
-      );
+    if (newConvo) {
+      const mappedConvo: Conversation = {
+        id: newConvo.id,
+        product: product,
+        user: {
+          id: user.id,
+          displayName: user.displayName,
+        },
+        lastTextMessage: newConvo.last_text_message ?? "",
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+      };
+      addNewConvoState(newConvo.id, {
+        hasMore: true,
+        waitingForResponse: false,
+      });
+      setUserConversations([...userConversations, mappedConvo]);
+      setActiveConvoId(newConvo.id);
     }
     // if not found, create new convo and set it as current
   };
diff --git a/web-client/app/_hooks/useDeleteConversation.ts b/web-client/app/_hooks/useDeleteConversation.ts
new file mode 100644
index 0000000000..04f5400402
--- /dev/null
+++ b/web-client/app/_hooks/useDeleteConversation.ts
@@ -0,0 +1,50 @@
+import {
+  currentPromptAtom,
+  getActiveConvoIdAtom,
+  setActiveConvoIdAtom,
+  showingAdvancedPromptAtom,
+  showingProductDetailAtom,
+  userConversationsAtom,
+} from "@/_helpers/JotaiWrapper";
+import {
+  DeleteConversationDocument,
+  DeleteConversationMutation,
+} from "@/graphql";
+import { useMutation } from "@apollo/client";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+
+export default function useDeleteConversation() {
+  const [userConversations, setUserConversations] = useAtom(
+    userConversationsAtom
+  );
+  const setCurrentPrompt = useSetAtom(currentPromptAtom);
+  const setShowingProductDetail = useSetAtom(showingProductDetailAtom);
+  const setShowingAdvancedPrompt = useSetAtom(showingAdvancedPromptAtom);
+  const activeConvoId = useAtomValue(getActiveConvoIdAtom);
+  const setActiveConvoId = useSetAtom(setActiveConvoIdAtom);
+
+  const [deleteConversation] = useMutation<DeleteConversationMutation>(
+    DeleteConversationDocument
+  );
+
+  const deleteConvo = async () => {
+    if (activeConvoId) {
+      try {
+        await deleteConversation({ variables: { id: activeConvoId } });
+        setUserConversations(
+          userConversations.filter((c) => c.id !== activeConvoId)
+        );
+        setActiveConvoId(undefined);
+        setCurrentPrompt("");
+        setShowingProductDetail(false);
+        setShowingAdvancedPrompt(false);
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  };
+
+  return {
+    deleteConvo,
+  };
+}
diff --git a/web-client/app/_hooks/useGetCurrentUser.ts b/web-client/app/_hooks/useGetCurrentUser.ts
index 634384a944..ad06e3afdc 100644
--- a/web-client/app/_hooks/useGetCurrentUser.ts
+++ b/web-client/app/_hooks/useGetCurrentUser.ts
@@ -1,15 +1,15 @@
 // @ts-nocheck
-import { DefaultUser, User } from "@/_models/User";
-import { Instance } from "mobx-state-tree";
 import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import useSignOut from "./useSignOut";
+import { DefaultUser, User } from "@/_models/User";
 
 export default function useGetCurrentUser() {
   const { data: session, status } = useSession();
   const { signOut } = useSignOut();
   const [loading, setLoading] = useState(status === "loading");
-  const [user, setUser] = useState<Instance<typeof User>>();
+  const [user, setUser] = useState<User>();
+
   useEffect(() => {
     if (
       status !== "loading" &&
diff --git a/web-client/app/_hooks/useGetProducts.ts b/web-client/app/_hooks/useGetProducts.ts
new file mode 100644
index 0000000000..a87c6537e0
--- /dev/null
+++ b/web-client/app/_hooks/useGetProducts.ts
@@ -0,0 +1,24 @@
+import { ProductType, toProduct } from "@/_models/Product";
+import { GetProductsDocument, GetProductsQuery } from "@/graphql";
+import { useQuery } from "@apollo/client";
+
+export default function useGetProducts() {
+  const { loading, data } = useQuery<GetProductsQuery>(GetProductsDocument, {
+    variables: { slug: "conversational" },
+  });
+
+  const allProducts = (data?.products ?? []).map((e) => toProduct(e));
+
+  const featured = allProducts.sort(() => 0.5 - Math.random()).slice(0, 3);
+  const conversational = allProducts.filter((e) => e.type === ProductType.LLM);
+  const generativeArts = allProducts.filter(
+    (e) => e.type === ProductType.GenerativeArt
+  );
+
+  return {
+    loading,
+    featured,
+    conversational,
+    generativeArts,
+  };
+}
diff --git a/web-client/app/_hooks/useGetUserConversations.ts b/web-client/app/_hooks/useGetUserConversations.ts
index 166ace672d..883518d9b0 100644
--- a/web-client/app/_hooks/useGetUserConversations.ts
+++ b/web-client/app/_hooks/useGetUserConversations.ts
@@ -1,57 +1,35 @@
-import { Instance } from "mobx-state-tree";
-import { useStore } from "../_models/RootStore";
-import { AiModelType } from "../_models/Product";
-import { Conversation } from "../_models/Conversation";
-import { User } from "../_models/User";
 import { GetConversationsQuery, GetConversationsDocument } from "@/graphql";
 import { useLazyQuery } from "@apollo/client";
+import { ConversationState, toConversation } from "@/_models/Conversation";
+import { useSetAtom } from "jotai";
+import {
+  conversationStatesAtom,
+  userConversationsAtom,
+} from "@/_helpers/JotaiWrapper";
 
 const useGetUserConversations = () => {
-  const { historyStore } = useStore();
+  const setConversationStates = useSetAtom(conversationStatesAtom);
+  const setConversations = useSetAtom(userConversationsAtom);
   const [getConvos] = useLazyQuery<GetConversationsQuery>(
     GetConversationsDocument
   );
 
-  const getUserConversations = async (user: Instance<typeof User>) => {
+  const getUserConversations = async () => {
     const results = await getConvos();
     if (!results || !results.data || results.data.conversations.length === 0) {
       return;
     }
 
-    const convos = results.data.conversations;
-
-    const finalConvo: Instance<typeof Conversation>[] = [];
-    // mapping
+    const convos = results.data.conversations.map((e) => toConversation(e));
+    const convoStates: Record<string, ConversationState> = {};
     convos.forEach((convo) => {
-      const conversation = Conversation.create({
-        id: convo.id!!,
-        product: {
-          id: convo.conversation_product?.slug || convo.conversation_product?.id,
-          name: convo.conversation_product?.name ?? "",
-          type:
-            convo.conversation_product?.inputs.slug === "llm"
-              ? AiModelType.LLM
-              : convo.conversation_product?.inputs.slug === "sd"
-              ? AiModelType.GenerativeArt
-              : AiModelType.ControlNet,
-          avatarUrl: convo.conversation_product?.image_url,
-          description: convo.conversation_product?.description,
-          modelDescription: convo.conversation_product?.description,
-          modelUrl: convo.conversation_product?.source_url,
-          modelVersion: convo.conversation_product?.version,
-        },
-        chatMessages: [],
-        user: user,
-        createdAt: new Date(convo.created_at).getTime(),
-        updatedAt: new Date(convo.updated_at).getTime(),
-        lastImageUrl: convo.last_image_url ?? "",
-        lastTextMessage: convo.last_text_message ?? "",
-      });
-
-      finalConvo.push(conversation);
+      convoStates[convo.id] = {
+        hasMore: true,
+        waitingForResponse: false,
+      };
     });
-
-    historyStore.setConversations(finalConvo);
+    setConversationStates(convoStates);
+    setConversations(convos);
   };
 
   return {
diff --git a/web-client/app/_hooks/useSendChatMessage.ts b/web-client/app/_hooks/useSendChatMessage.ts
new file mode 100644
index 0000000000..c67f7c6685
--- /dev/null
+++ b/web-client/app/_hooks/useSendChatMessage.ts
@@ -0,0 +1,383 @@
+import {
+  addNewMessageAtom,
+  currentChatMessagesAtom,
+  currentConversationAtom,
+  currentPromptAtom,
+  currentStreamingMessageAtom,
+  setConvoLastImageAtom,
+  setConvoUpdatedAtAtom,
+  updateConversationWaitingForResponseAtom,
+  updateMessageAtom,
+  userConversationsAtom,
+} from "@/_helpers/JotaiWrapper";
+import {
+  ChatMessage,
+  MessageSenderType,
+  MessageStatus,
+  MessageType,
+} from "@/_models/ChatMessage";
+import { Conversation } from "@/_models/Conversation";
+import { ProductType } from "@/_models/Product";
+import {
+  CreateMessageDocument,
+  CreateMessageMutation,
+  CreateMessageMutationVariables,
+  GenerateImageDocument,
+  GenerateImageMutation,
+  GenerateImageMutationVariables,
+  UpdateMessageMutation,
+  UpdateMessageDocument,
+  UpdateMessageMutationVariables,
+  UpdateConversationMutation,
+  UpdateConversationDocument,
+  UpdateConversationMutationVariables,
+} from "@/graphql";
+import { useMutation } from "@apollo/client";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import useSignIn from "./useSignIn";
+import useGetCurrentUser from "./useGetCurrentUser";
+import { Role } from "@/_models/User";
+
+export default function useSendChatMessage() {
+  const { user } = useGetCurrentUser();
+  const { signInWithKeyCloak } = useSignIn();
+  const [currentPrompt, setCurrentPrompt] = useAtom(currentPromptAtom);
+  const [userConversations, setUserConversations] = useAtom(
+    userConversationsAtom
+  );
+  const addNewMessage = useSetAtom(addNewMessageAtom);
+  const activeConversation = useAtomValue(currentConversationAtom);
+  const currentMessages = useAtomValue(currentChatMessagesAtom);
+  const [createMessageMutation] = useMutation<CreateMessageMutation>(
+    CreateMessageDocument
+  );
+  const [updateMessageMutation] = useMutation<UpdateMessageMutation>(
+    UpdateMessageDocument
+  );
+  const [updateConversationMutation] = useMutation<UpdateConversationMutation>(
+    UpdateConversationDocument
+  );
+  const [imageGenerationMutation] = useMutation<GenerateImageMutation>(
+    GenerateImageDocument
+  );
+  const updateConvoWaitingState = useSetAtom(
+    updateConversationWaitingForResponseAtom
+  );
+  const updateMessageText = useSetAtom(updateMessageAtom);
+  const [, setTextMessage] = useAtom(currentStreamingMessageAtom);
+  const setConvoLastImageUrl = useSetAtom(setConvoLastImageAtom);
+  const setConvoUpdateAt = useSetAtom(setConvoUpdatedAtAtom);
+
+  const sendTextToTextMessage = async (
+    conversation: Conversation,
+    latestUserMessage: ChatMessage
+  ) => {
+    // TODO: handle case timeout using higher order function
+    const messageToSend = [
+      latestUserMessage,
+      ...currentMessages.slice(0, 4),
+    ].reverse();
+    const latestMessages = messageToSend.map((e) => ({
+      role:
+        e.messageSenderType === MessageSenderType.User
+          ? Role.User
+          : Role.Assistant,
+      content: e.text,
+    }));
+
+    const variables: CreateMessageMutationVariables = {
+      data: {
+        conversation_id: conversation.id,
+        sender: MessageSenderType.Ai,
+        message_sender_type: MessageSenderType.Ai,
+        message_type: MessageType.Text,
+        sender_avatar_url: conversation.product.avatarUrl,
+        sender_name: conversation.product.name,
+        prompt_cache: latestMessages,
+        status: MessageStatus.Pending,
+      },
+    };
+    const result = await createMessageMutation({
+      variables,
+    });
+
+    if (!result.data?.insert_messages_one?.id) {
+      console.error(
+        "Error creating user message",
+        JSON.stringify(result.errors)
+      );
+      updateConvoWaitingState(conversation.id, false);
+      return;
+    }
+
+    const aiResponseMessage: ChatMessage = {
+      id: result.data.insert_messages_one.id,
+      conversationId: conversation.id,
+      messageType: MessageType.Text,
+      messageSenderType: MessageSenderType.Ai,
+      senderUid: conversation.product.slug,
+      senderName: conversation.product.name,
+      senderAvatarUrl: conversation.product.avatarUrl ?? "/icons/app_icon.svg",
+      text: "",
+      status: MessageStatus.Pending,
+      createdAt: Date.now(),
+    };
+
+    setTextMessage(aiResponseMessage);
+    addNewMessage(aiResponseMessage);
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_OPENAPI_ENDPOINT}`,
+        {
+          method: "POST",
+          cache: "no-cache",
+          keepalive: true,
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "text/event-stream",
+          },
+          body: JSON.stringify({
+            messages: latestMessages,
+            model: "gpt-3.5-turbo",
+            stream: true,
+            max_tokens: 500,
+          }),
+        }
+      );
+      if (!response.ok) {
+        updateMessageText(
+          aiResponseMessage.id,
+          conversation.id,
+          "There is an error while retrieving the result. Please try again later."
+        );
+      } else {
+        const data = response.body;
+        if (!data) {
+          return;
+        }
+        const reader = data.getReader();
+        const decoder = new TextDecoder();
+        let done = false;
+
+        let currentResponse: string = "";
+        updateConvoWaitingState(conversation.id, false);
+        while (!done) {
+          const { value, done: doneReading } = await reader.read();
+          done = doneReading;
+          const chunkValue = decoder.decode(value);
+          chunkValue.split("\n").forEach((chunk) => {
+            console.log("chunk", chunk);
+            const text = parsedBuffer(chunk) ?? "";
+            currentResponse += text;
+            updateMessageText(
+              aiResponseMessage.id,
+              conversation.id,
+              currentResponse
+            );
+          });
+        }
+        mutateMessageText(
+          aiResponseMessage.id,
+          conversation.id,
+          currentResponse
+        );
+      }
+    } catch (err) {
+      const errorText =
+        "There is an error while retrieving the result. Please try again later.";
+      updateMessageText(aiResponseMessage.id, conversation.id, errorText);
+      mutateMessageText(aiResponseMessage.id, conversation.id, errorText);
+    }
+    updateConvoWaitingState(conversation.id, false);
+  };
+
+  const sendTextToImageMessage = async (conversation: Conversation) => {
+    // TODO: handle case timeout using higher order function
+    const variables: GenerateImageMutationVariables = {
+      model: conversation.product.slug,
+      prompt: currentPrompt,
+      neg_prompt: "",
+      seed: Math.floor(Math.random() * 429496729),
+      steps: 30,
+      width: 512,
+      height: 512,
+    };
+
+    const data = await imageGenerationMutation({
+      variables,
+    });
+
+    if (!data.data?.imageGeneration?.url) {
+      // TODO: display error
+      console.error("Error creating user message", JSON.stringify(data.errors));
+      updateConvoWaitingState(conversation.id, false);
+      return;
+    }
+
+    const imageUrl: string = data.data.imageGeneration.url;
+
+    const createMessageVariables: CreateMessageMutationVariables = {
+      data: {
+        conversation_id: conversation.id,
+        content: currentPrompt,
+        sender: MessageSenderType.Ai,
+        message_sender_type: MessageSenderType.Ai,
+        message_type: MessageType.Image,
+        sender_avatar_url: conversation.product.avatarUrl,
+        sender_name: conversation.product.name,
+        status: MessageStatus.Ready,
+        message_medias: {
+          data: [
+            {
+              media_url: imageUrl,
+              mime_type: "image/jpeg",
+            },
+          ],
+        },
+      },
+    };
+    const result = await createMessageMutation({
+      variables: createMessageVariables,
+    });
+
+    if (!result.data?.insert_messages_one?.id) {
+      // TODO: display error
+      console.error(
+        "Error creating user message",
+        JSON.stringify(result.errors)
+      );
+      updateConvoWaitingState(conversation.id, false);
+      return;
+    }
+
+    const imageResponseMessage: ChatMessage = {
+      id: result.data.insert_messages_one.id,
+      conversationId: conversation.id,
+      messageType: MessageType.Image,
+      messageSenderType: MessageSenderType.Ai,
+      senderUid: conversation.product.slug,
+      senderName: conversation.product.name,
+      senderAvatarUrl: conversation.product.avatarUrl,
+      text: currentPrompt,
+      imageUrls: [imageUrl],
+      createdAt: Date.now(),
+      status: MessageStatus.Ready,
+    };
+
+    addNewMessage(imageResponseMessage);
+    setConvoUpdateAt(conversation.id);
+    setConvoLastImageUrl(conversation.id, imageUrl);
+    updateConvoWaitingState(conversation.id, false);
+  };
+
+  const sendChatMessage = async () => {
+    if (!user) {
+      signInWithKeyCloak();
+      return;
+    }
+    if (currentPrompt.trim().length === 0) return;
+
+    if (!activeConversation) {
+      console.error("No active conversation");
+      return;
+    }
+
+    updateConvoWaitingState(activeConversation.id, true);
+    const variables: CreateMessageMutationVariables = {
+      data: {
+        conversation_id: activeConversation.id,
+        content: currentPrompt,
+        sender: user.id,
+        message_sender_type: MessageSenderType.User,
+        message_type: MessageType.Text,
+        sender_avatar_url: user.avatarUrl,
+        sender_name: user.displayName,
+      },
+    };
+    const result = await createMessageMutation({ variables });
+
+    if (!result.data?.insert_messages_one?.id) {
+      // TODO: display error
+      console.error(
+        "Error creating user message",
+        JSON.stringify(result.errors)
+      );
+      updateConvoWaitingState(activeConversation.id, false);
+      return;
+    }
+
+    const userMesssage: ChatMessage = {
+      id: result.data.insert_messages_one.id,
+      conversationId: activeConversation.id,
+      messageType: MessageType.Text,
+      messageSenderType: MessageSenderType.User,
+      senderUid: user.id,
+      senderName: user.displayName,
+      senderAvatarUrl: user.avatarUrl ?? "/icons/app_icon.svg",
+      text: currentPrompt,
+      createdAt: Date.now(),
+      status: MessageStatus.Ready,
+    };
+
+    addNewMessage(userMesssage);
+    const newUserConversations = userConversations.map((e) => {
+      if (e.id === activeConversation.id) {
+        e.lastTextMessage = userMesssage.text;
+      }
+      return e;
+    });
+
+    setUserConversations(newUserConversations);
+
+    if (activeConversation.product.type === ProductType.LLM) {
+      await sendTextToTextMessage(activeConversation, userMesssage);
+      setCurrentPrompt("");
+    } else if (activeConversation.product.type === ProductType.GenerativeArt) {
+      await sendTextToImageMessage(activeConversation);
+      setCurrentPrompt("");
+    } else {
+      console.error(
+        "We do not support this model type yet:",
+        activeConversation.product.type
+      );
+    }
+  };
+
+  const parsedBuffer = (buffer: string) => {
+    try {
+      const json = buffer.replace("data: ", "");
+      return JSON.parse(json).choices[0].delta.content;
+    } catch (e) {
+      return "";
+    }
+  };
+
+  const mutateMessageText = (
+    messageId: string,
+    convId: string,
+    text: string
+  ) => {
+    const variables: UpdateMessageMutationVariables = {
+      data: {
+        content: text,
+        status: MessageStatus.Ready,
+      },
+      id: messageId,
+    };
+    updateMessageMutation({
+      variables,
+    });
+
+    updateConversationMutation({
+      variables: {
+        id: convId,
+        lastMessageText: text,
+      },
+    });
+  };
+
+  return {
+    sendChatMessage,
+  };
+}
diff --git a/web-client/app/_hooks/useSignOut.ts b/web-client/app/_hooks/useSignOut.ts
index 01c3bfa404..de6440d49e 100644
--- a/web-client/app/_hooks/useSignOut.ts
+++ b/web-client/app/_hooks/useSignOut.ts
@@ -1,12 +1,13 @@
 import { signOut as signOutNextAuth } from "next-auth/react";
 
 export default function useSignOut() {
-  const signOut = () => {
-    fetch(`api/auth/logout`, { method: "GET" })
-      .then(() => signOutNextAuth({ callbackUrl: "/" }))
-      .catch((e) => {
-        console.error(e);
-      });
+  const signOut = async () => {
+    try {
+      await fetch(`api/auth/logout`, { method: "GET" });
+      await signOutNextAuth({ callbackUrl: "/" });
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   return { signOut };
diff --git a/web-client/app/_models/ChatMessage.ts b/web-client/app/_models/ChatMessage.ts
index b4c10a9935..083fa1d2ce 100644
--- a/web-client/app/_models/ChatMessage.ts
+++ b/web-client/app/_models/ChatMessage.ts
@@ -1,5 +1,6 @@
-import { types } from "mobx-state-tree";
-import { withSetPropAction } from "../_helpers/withSetPropAction";
+import { MessageDetailFragment } from "@/graphql";
+import { remark } from "remark";
+import html from "remark-html";
 
 export enum MessageType {
   Text = "Text",
@@ -18,18 +19,53 @@ export enum MessageStatus {
   Pending = "pending",
 }
 
-export const ChatMessage = types
-  .model("ChatMessage", {
-    id: types.string,
-    conversationId: types.string,
-    messageType: types.enumeration(Object.values(MessageType)),
-    messageSenderType: types.enumeration(Object.values(MessageSenderType)),
-    senderUid: types.string,
-    senderName: types.string,
-    senderAvatarUrl: types.maybeNull(types.string),
-    text: types.maybe(types.string),
-    imageUrls: types.maybe(types.array(types.string)),
-    createdAt: types.number,
-    status: types.enumeration(Object.values(MessageStatus)),
-  })
-  .actions(withSetPropAction);
+export interface ChatMessage {
+  id: string;
+  conversationId: string;
+  messageType: MessageType;
+  messageSenderType: MessageSenderType;
+  senderUid: string;
+  senderName: string;
+  senderAvatarUrl: string;
+  text: string | undefined;
+  imageUrls?: string[] | undefined;
+  createdAt: number;
+  status: MessageStatus;
+}
+
+export const toChatMessage = async (
+  m: MessageDetailFragment
+): Promise<ChatMessage> => {
+  const createdAt = new Date(m.created_at).getTime();
+  const imageUrls: string[] = [];
+  const imageUrl =
+    m.message_medias.length > 0 ? m.message_medias[0].media_url : null;
+  if (imageUrl) {
+    imageUrls.push(imageUrl);
+  }
+
+  const messageType = m.message_type
+    ? MessageType[m.message_type as keyof typeof MessageType]
+    : MessageType.Text;
+  const messageSenderType = m.message_sender_type
+    ? MessageSenderType[m.message_sender_type as keyof typeof MessageSenderType]
+    : MessageSenderType.Ai;
+
+  const content = m.content ?? "";
+  const processedContent = await remark().use(html).process(content);
+  const contentHtml = processedContent.toString();
+
+  return {
+    id: m.id,
+    conversationId: m.conversation_id,
+    messageType: messageType,
+    messageSenderType: messageSenderType,
+    senderUid: m.sender,
+    senderName: m.sender_name ?? "",
+    senderAvatarUrl: m.sender_avatar_url ?? "/icons/app_icon.svg",
+    text: contentHtml,
+    imageUrls: imageUrls,
+    createdAt: createdAt,
+    status: m.status as MessageStatus,
+  };
+};
diff --git a/web-client/app/_models/Conversation.ts b/web-client/app/_models/Conversation.ts
index 84fdde3049..890c1c9e69 100644
--- a/web-client/app/_models/Conversation.ts
+++ b/web-client/app/_models/Conversation.ts
@@ -1,78 +1,38 @@
-import { Instance, castToSnapshot, types } from "mobx-state-tree";
-import { Product } from "./Product";
-import { ChatMessage } from "./ChatMessage";
-import { User } from "../_models/User";
-import { withSetPropAction } from "../_helpers/withSetPropAction";
-import { mergeAndRemoveDuplicates } from "../_utils/message";
-
-export const Conversation = types
-  .model("Conversation", {
-    /**
-     * Unique identifier for the conversation
-     */
-    id: types.string,
-
-    /**
-     * AI model that the conversation is using
-     */
-    product: Product,
-
-    /**
-     * Conversation's messages, should ordered by time (createdAt)
-     */
-    chatMessages: types.optional(types.array(ChatMessage), []),
-
-    /**
-     * User who initiate the chat with the above AI model
-     */
-    user: User,
-
-    /**
-     * Indicates whether the conversation is created by the user
-     */
-    createdAt: types.number,
-
-    /**
-     * Time the last message is sent
-     */
-    updatedAt: types.maybe(types.number),
-
-    /**
-     * Last image url sent by the model if any
-     */
-    lastImageUrl: types.maybe(types.string),
-
-    /**
-     * Last text sent by the user if any
-     */
-    lastTextMessage: types.maybe(types.string),
-  })
-  .volatile(() => ({
-    isFetching: false,
-    offset: 0,
-    hasMore: true,
-    isWaitingForModelResponse: false,
-  }))
-  .actions(withSetPropAction)
-  .actions((self) => ({
-    addMessage(message: Instance<typeof ChatMessage>) {
-      self.chatMessages.push(message);
-    },
-
-    pushMessages(messages: Instance<typeof ChatMessage>[]) {
-      const mergedMessages = mergeAndRemoveDuplicates(
-        self.chatMessages,
-        messages
-      );
-
-      self.chatMessages = castToSnapshot(mergedMessages);
-    },
-
-    setHasMore(hasMore: boolean) {
-      self.hasMore = hasMore;
-    },
-
-    setWaitingForModelResponse(isWaitingForModelResponse: boolean) {
-      self.isWaitingForModelResponse = isWaitingForModelResponse;
-    },
-  }));
+import { ConversationDetailFragment } from "@/graphql";
+import { Product, toProduct } from "./Product";
+
+export interface Conversation {
+  id: string;
+  product: Product;
+  createdAt: number;
+  updatedAt?: number;
+  lastImageUrl?: string;
+  lastTextMessage?: string;
+}
+
+/**
+ * Store the state of conversation like fetching, waiting for response, etc.
+ */
+export type ConversationState = {
+  hasMore: boolean;
+  waitingForResponse: boolean;
+};
+
+export const toConversation = (
+  convo: ConversationDetailFragment
+): Conversation => {
+  const product = convo.conversation_product;
+  if (!product) {
+    throw new Error("Product is not defined");
+  }
+  return {
+    id: convo.id,
+    product: toProduct(product),
+    lastImageUrl: convo.last_image_url ?? undefined,
+    lastTextMessage: convo.last_text_message ?? undefined,
+    createdAt: new Date(convo.created_at).getTime(),
+    updatedAt: convo.updated_at
+      ? new Date(convo.updated_at).getTime()
+      : undefined,
+  };
+};
diff --git a/web-client/app/_models/History.ts b/web-client/app/_models/History.ts
deleted file mode 100644
index cf208e23e0..0000000000
--- a/web-client/app/_models/History.ts
+++ /dev/null
@@ -1,604 +0,0 @@
-import { Instance, castToSnapshot, flow, types } from "mobx-state-tree";
-import { Conversation } from "./Conversation";
-import { Product, AiModelType } from "./Product";
-import { User } from "../_models/User";
-import {
-  ChatMessage,
-  MessageSenderType,
-  MessageStatus,
-  MessageType,
-} from "./ChatMessage";
-import { MESSAGE_PER_PAGE } from "../_utils/const";
-import { controlNetRequest } from "@/_services/controlnet";
-
-import {
-  ApolloCache,
-  DefaultContext,
-  FetchResult,
-  LazyQueryExecFunction,
-  MutationFunctionOptions,
-  OperationVariables,
-  QueryResult,
-} from "@apollo/client";
-import {
-  ConversationDetailFragment,
-  CreateMessageMutation,
-  CreateMessageMutationVariables,
-  GenerateImageMutation,
-  GenerateImageMutationVariables,
-  GetConversationMessagesQuery,
-  GetConversationMessagesQueryVariables,
-  MessageDetailFragment,
-  ProductDetailFragment,
-} from "@/graphql";
-
-export enum Role {
-  User = "user",
-  Assistant = "assistant",
-}
-
-type CreateMessageMutationFunc = (
-  options?:
-    | MutationFunctionOptions<
-        CreateMessageMutation,
-        OperationVariables,
-        DefaultContext,
-        ApolloCache<any>
-      >
-    | undefined
-) => Promise<FetchResult<CreateMessageMutation>>;
-
-type ImageGenerationMutationFunc = (
-  options?:
-    | MutationFunctionOptions<
-        GenerateImageMutation,
-        OperationVariables,
-        DefaultContext,
-        ApolloCache<any>
-      >
-    | undefined
-) => Promise<FetchResult<GenerateImageMutation>>;
-
-export const History = types
-  .model("History", {
-    conversations: types.optional(types.array(Conversation), []),
-    activeConversationId: types.maybe(types.string),
-  })
-  .volatile(() => ({
-    showModelDetail: false,
-    showAdvancedPrompt: false,
-  }))
-  .views((self) => ({
-    getActiveConversation() {
-      if (self.activeConversationId) {
-        return self.conversations.find(
-          (c) => c.id === self.activeConversationId
-        );
-      }
-    },
-
-    getActiveMessages() {
-      if (self.activeConversationId) {
-        const conversation = self.conversations.find(
-          (c) => c.id === self.activeConversationId
-        );
-
-        if (conversation) {
-          return conversation.chatMessages;
-        }
-      }
-      return [];
-    },
-
-    getConversationById(conversationId: string) {
-      return self.conversations.find((c) => c.id === conversationId);
-    },
-  }))
-  .actions((self) => ({
-    // Model detail
-    toggleModelDetail() {
-      self.showModelDetail = !self.showModelDetail;
-    },
-
-    toggleAdvancedPrompt() {
-      self.showAdvancedPrompt = !self.showAdvancedPrompt;
-    },
-
-    closeModelDetail() {
-      if (self.showModelDetail) {
-        self.showModelDetail = false;
-      }
-    },
-
-    finishActiveConversationWaiting() {
-      self.getActiveConversation()?.setWaitingForModelResponse(false);
-    },
-  }))
-  .actions((self) => {
-    const fetchMoreMessages = flow(function* (
-      func: LazyQueryExecFunction<
-        GetConversationMessagesQuery,
-        OperationVariables
-      >
-    ) {
-      const convoId = self.activeConversationId;
-      if (!convoId) {
-        console.error("No active conversation found");
-        return;
-      }
-
-      const convo = self.getConversationById(convoId);
-      if (!convo) {
-        console.error("Could not get convo", convoId);
-        return;
-      }
-      if (convo?.isFetching) {
-        return;
-      }
-
-      if (!convo.hasMore) {
-        console.info("Already load all messages of convo", convoId);
-        return;
-      }
-      convo.isFetching = true;
-      const variables: GetConversationMessagesQueryVariables = {
-        conversation_id: convoId,
-        limit: MESSAGE_PER_PAGE,
-        offset: convo.offset,
-      };
-      const result: QueryResult<
-        GetConversationMessagesQuery,
-        OperationVariables
-      > = yield func({ variables });
-
-      if (!result.data?.messages) {
-        return;
-      }
-
-      if (result.data?.messages.length < MESSAGE_PER_PAGE) {
-        convo.setHasMore(false);
-      }
-
-      convo.offset += result.data.messages.length;
-
-      const messages: Instance<typeof ChatMessage>[] = [];
-      result.data.messages.forEach((m: MessageDetailFragment) => {
-        const createdAt = new Date(m.created_at).getTime();
-        const imageUrls: string[] = [];
-        const imageUrl =
-          m.message_medias.length > 0 ? m.message_medias[0].media_url : null;
-        if (imageUrl) {
-          imageUrls.push(imageUrl);
-        }
-
-        const messageType = m.message_type
-          ? MessageType[m.message_type as keyof typeof MessageType]
-          : MessageType.Text;
-        const messageSenderType = m.message_sender_type
-          ? MessageSenderType[
-              m.message_sender_type as keyof typeof MessageSenderType
-            ]
-          : MessageSenderType.Ai;
-        messages.push(
-          ChatMessage.create({
-            id: m.id,
-            conversationId: m.conversation_id,
-            messageType: messageType,
-            messageSenderType: messageSenderType,
-            senderUid: m.sender,
-            senderName: m.sender_name ?? "",
-            senderAvatarUrl: m.sender_avatar_url,
-            text: m.content ?? "",
-            status: m.status as MessageStatus,
-            imageUrls: imageUrls,
-            createdAt: createdAt,
-          })
-        );
-      });
-      convo.setProp(
-        "chatMessages",
-        messages.reverse().concat(convo.chatMessages)
-      );
-      convo.isFetching = false;
-    });
-
-    const deleteConversationById = flow(function* (convoId: string) {
-      const updateConversations = self.conversations.filter(
-        (c) => c.id !== convoId
-      );
-      self.conversations = castToSnapshot([...updateConversations]);
-      self.activeConversationId = undefined;
-    });
-
-    return {
-      fetchMoreMessages,
-      deleteConversationById,
-    };
-  })
-  .actions((self) => {
-    const setActiveConversationId = flow(function* (
-      convoId: string | undefined
-    ) {
-      self.activeConversationId = convoId;
-    });
-
-    return { setActiveConversationId };
-  })
-  .actions((self) => ({
-    clearActiveConversationId() {
-      self.activeConversationId = undefined;
-      self.showModelDetail = false;
-      self.showAdvancedPrompt = false;
-    },
-
-    setConversations(conversations: Instance<typeof Conversation>[]) {
-      self.conversations = castToSnapshot(conversations);
-    },
-
-    clearAllConversations() {
-      self.conversations = castToSnapshot([]);
-    },
-  }))
-  .actions((self) => {
-    const sendTextToTextMessage = flow(function* (
-      create: CreateMessageMutationFunc,
-      conversation: Instance<typeof Conversation>
-    ) {
-      // TODO: handle case timeout using higher order function
-      const latestMessages = conversation.chatMessages.slice(-5).map((e) => ({
-        role:
-          e.messageSenderType === MessageSenderType.User
-            ? Role.User
-            : Role.Assistant,
-        content: e.text,
-      }));
-
-      const variables: CreateMessageMutationVariables = {
-        data: {
-          conversation_id: conversation.id,
-          content: "",
-          sender: MessageSenderType.Ai,
-          message_sender_type: MessageSenderType.Ai,
-          message_type: MessageType.Text,
-          sender_avatar_url: conversation.product.avatarUrl,
-          sender_name: conversation.product.name,
-          prompt_cache: latestMessages,
-          status: MessageStatus.Pending,
-        },
-      };
-      const result: FetchResult<CreateMessageMutation> = yield create({
-        variables,
-      });
-
-      if (!result.data?.insert_messages_one?.id) {
-        console.error(
-          "Error creating user message",
-          JSON.stringify(result.errors)
-        );
-        conversation.setWaitingForModelResponse(false);
-        return;
-      }
-
-      const aiResponseMessage = ChatMessage.create({
-        id: result.data.insert_messages_one.id,
-        conversationId: conversation.id,
-        messageType: MessageType.Text,
-        messageSenderType: MessageSenderType.Ai,
-        senderUid: conversation.product.id,
-        senderName: conversation.product.name,
-        senderAvatarUrl: conversation.product.avatarUrl ?? "",
-        text: "",
-        status: MessageStatus.Pending,
-        createdAt: Date.now(),
-      });
-      conversation.addMessage(aiResponseMessage);
-    });
-
-    const sendTextToImageMessage = flow(function* (
-      create: CreateMessageMutationFunc,
-      generateImage: ImageGenerationMutationFunc,
-      message: string,
-      conversation: Instance<typeof Conversation>
-    ) {
-      // TODO: handle case timeout using higher order function
-      // const data = yield api.textToImage(conversation.product.id, message);
-      const variables: GenerateImageMutationVariables = {
-        model: conversation.product.id,
-        prompt: message,
-        neg_prompt: "",
-        seed: Math.floor(Math.random() * 429496729),
-        steps: 30,
-        width: 512,
-        height: 512,
-      };
-      const data: FetchResult<GenerateImageMutation> = yield generateImage({
-        variables,
-      });
-
-      if (!data.data?.imageGeneration?.url) {
-        // TODO: display error
-        console.error(
-          "Error creating user message",
-          JSON.stringify(data.errors)
-        );
-        conversation.setWaitingForModelResponse(false);
-        return;
-      }
-
-      const imageUrl: string = data.data.imageGeneration.url;
-
-      const createMessageVariables: CreateMessageMutationVariables = {
-        data: {
-          conversation_id: conversation.id,
-          content: message,
-          sender: MessageSenderType.Ai,
-          message_sender_type: MessageSenderType.Ai,
-          message_type: MessageType.Image,
-          sender_avatar_url: conversation.product.avatarUrl,
-          sender_name: conversation.product.name,
-          status: MessageStatus.Ready,
-          message_medias: {
-            data: [
-              {
-                media_url: imageUrl,
-                mime_type: "image/jpeg",
-              },
-            ],
-          },
-        },
-      };
-      const result: FetchResult<CreateMessageMutation> = yield create({
-        variables: createMessageVariables,
-      });
-
-      if (!result.data?.insert_messages_one?.id) {
-        // TODO: display error
-        console.error(
-          "Error creating user message",
-          JSON.stringify(result.errors)
-        );
-        conversation.setWaitingForModelResponse(false);
-        return;
-      }
-
-      const imageResponseMessage = ChatMessage.create({
-        id: result.data.insert_messages_one.id,
-        conversationId: conversation.id,
-        messageType: MessageType.Image,
-        messageSenderType: MessageSenderType.Ai,
-        senderUid: conversation.product.id,
-        senderName: conversation.product.name,
-        senderAvatarUrl: conversation.product.avatarUrl,
-        text: message,
-        imageUrls: [imageUrl],
-        createdAt: Date.now(),
-        status: MessageStatus.Ready,
-      });
-
-      conversation.addMessage(imageResponseMessage);
-      conversation.setProp("updatedAt", Date.now());
-      conversation.setProp("lastImageUrl", imageUrl);
-
-      conversation.setWaitingForModelResponse(false);
-    });
-
-    return {
-      sendTextToTextMessage,
-      sendTextToImageMessage,
-    };
-  })
-  .actions((self) => {
-    const sendControlNetPrompt = flow(function* (
-      create: CreateMessageMutationFunc,
-      prompt: string,
-      negPrompt: string,
-      file: any // TODO: file type, for now I don't know what is that
-    ) {
-      if (!self.activeConversationId) {
-        console.error("No active conversation found");
-        return;
-      }
-
-      const conversation = self.getActiveConversation();
-      if (!conversation) {
-        console.error(
-          "No active conversation found with id",
-          self.activeConversationId
-        );
-        return;
-      }
-
-      conversation.setWaitingForModelResponse(true);
-
-      const imageUrl = yield controlNetRequest("", prompt, negPrompt, file);
-      if (!imageUrl || !imageUrl.startsWith("https://")) {
-        console.error(
-          "Failed to invoking control net",
-          self.activeConversationId
-        );
-        return;
-      }
-      const message = `${prompt}. Negative: ${negPrompt}`;
-
-      const variables: CreateMessageMutationVariables = {
-        data: {
-          conversation_id: conversation.id,
-          content: message,
-          sender: MessageSenderType.Ai,
-          message_sender_type: MessageSenderType.Ai,
-          message_type: MessageType.ImageWithText,
-          sender_avatar_url: conversation.product.avatarUrl,
-          sender_name: conversation.product.name,
-          message_medias: {
-            data: [
-              {
-                media_url: imageUrl,
-              },
-            ],
-          },
-        },
-      };
-      const result: FetchResult<CreateMessageMutation> = yield create({
-        variables,
-      });
-
-      if (!result.data?.insert_messages_one?.id) {
-        // TODO: display error
-        console.error(
-          "Error creating user message",
-          JSON.stringify(result.errors)
-        );
-        conversation.setWaitingForModelResponse(false);
-        return;
-      }
-
-      const chatMessage = ChatMessage.create({
-        id: result.data.insert_messages_one.id,
-        conversationId: self.activeConversationId,
-        messageType: MessageType.ImageWithText,
-        messageSenderType: MessageSenderType.Ai,
-        senderUid: conversation.product.id,
-        senderName: conversation.product.name,
-        senderAvatarUrl: conversation.product.avatarUrl,
-        text: message,
-        imageUrls: [imageUrl],
-        createdAt: Date.now(),
-        status: MessageStatus.Ready,
-      });
-      conversation.addMessage(chatMessage);
-      conversation.setProp("lastTextMessage", message);
-      conversation.setProp("lastImageUrl", imageUrl);
-      conversation.setWaitingForModelResponse(false);
-    });
-
-    const createConversation = flow(function* (
-      conversation: ConversationDetailFragment,
-      product: ProductDetailFragment,
-      userId: string,
-      displayName: string,
-      avatarUrl?: string
-    ) {
-      let modelType: AiModelType | undefined = undefined;
-      if (product.inputs.slug === "llm") {
-        modelType = AiModelType.LLM;
-      } else if (product.inputs.slug === "sd") {
-        modelType = AiModelType.GenerativeArt;
-      } else if (product.inputs.slug === "controlnet") {
-        modelType = AiModelType.ControlNet;
-      } else {
-        console.error("Model type not supported");
-        return;
-      }
-
-      const productModel = Product.create({
-        name: product.name,
-        id: product.slug,
-        type: modelType,
-        description: product.description,
-        modelUrl: product.source_url,
-        modelVersion: product.version,
-        avatarUrl: product.image_url,
-      });
-
-      const newConvo = Conversation.create({
-        id: conversation.id,
-        product: productModel,
-        lastTextMessage: conversation.last_text_message ?? "",
-        user: User.create({
-          id: userId,
-          displayName,
-          avatarUrl,
-        }),
-        createdAt: Date.now(),
-        updatedAt: Date.now(),
-      });
-
-      self.conversations.push(newConvo);
-      self.activeConversationId = newConvo.id;
-    });
-
-    const sendMessage = flow(function* (
-      create: CreateMessageMutationFunc,
-      generateImage: ImageGenerationMutationFunc,
-      message: string,
-      userId: string,
-      displayName: string,
-      avatarUrl?: string
-    ) {
-      if (!self.activeConversationId) {
-        console.error("No active conversation found");
-        return;
-      }
-
-      const conversation = self.getActiveConversation();
-      if (!conversation) {
-        console.error(
-          "No active conversation found with id",
-          self.activeConversationId
-        );
-        return;
-      }
-      conversation.setWaitingForModelResponse(true);
-      const variables: CreateMessageMutationVariables = {
-        data: {
-          conversation_id: conversation.id,
-          content: message,
-          sender: userId,
-          message_sender_type: MessageSenderType.User,
-          message_type: MessageType.Text,
-          sender_avatar_url: avatarUrl,
-          sender_name: displayName,
-        },
-      };
-      const result: FetchResult<CreateMessageMutation> = yield create({
-        variables,
-      });
-
-      if (!result.data?.insert_messages_one?.id) {
-        // TODO: display error
-        console.error(
-          "Error creating user message",
-          JSON.stringify(result.errors)
-        );
-        conversation.setWaitingForModelResponse(false);
-        return;
-      }
-
-      const userMesssage = ChatMessage.create({
-        id: result.data.insert_messages_one.id,
-        conversationId: self.activeConversationId,
-        messageType: MessageType.Text,
-        messageSenderType: MessageSenderType.User,
-        senderUid: userId,
-        senderName: displayName,
-        senderAvatarUrl: avatarUrl,
-        text: message,
-        createdAt: Date.now(),
-        status: MessageStatus.Ready,
-      });
-      conversation.addMessage(userMesssage);
-      conversation.setProp("lastTextMessage", message);
-
-      if (conversation.product.type === AiModelType.LLM) {
-        yield self.sendTextToTextMessage(create, conversation);
-      } else if (conversation.product.type === AiModelType.GenerativeArt) {
-        yield self.sendTextToImageMessage(
-          create,
-          generateImage,
-          message,
-          conversation
-        );
-      } else {
-        console.error(
-          "We do not support this model type yet:",
-          conversation.product.type
-        );
-      }
-    });
-
-    return {
-      sendMessage,
-      sendControlNetPrompt,
-      createConversation,
-    };
-  });
diff --git a/web-client/app/_models/Input.ts b/web-client/app/_models/Input.ts
deleted file mode 100644
index 568070a449..0000000000
--- a/web-client/app/_models/Input.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { types } from "mobx-state-tree";
-
-export const InputHeaderModel = types.model("InputHeader", {
-  accept: types.maybeNull(types.string),
-  contentType: types.maybeNull(types.string),
-});
-
-export const InputBodyModel = types.model("InputBody", {
-  name: types.string,
-  type: types.string,
-  example: types.maybeNull(types.string),
-  description: types.string,
-});
-
-export const InputModel = types.model("Input", {
-  slug: types.string,
-  header: InputHeaderModel,
-  body: types.array(InputBodyModel),
-});
diff --git a/web-client/app/_models/Output.ts b/web-client/app/_models/Output.ts
deleted file mode 100644
index 8014b593bc..0000000000
--- a/web-client/app/_models/Output.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { types } from "mobx-state-tree";
-
-export const OutputPropertyModel = types.model("OutputProperty", {
-  name: types.string,
-  type: types.string,
-  description: types.string,
-});
-
-export const OutputModel = types.model("Output", {
-  slug: types.string,
-  type: types.string,
-  properties: types.maybeNull(types.array(OutputPropertyModel)),
-  description: types.string,
-});
diff --git a/web-client/app/_models/Product.ts b/web-client/app/_models/Product.ts
index d36e9aa89e..570e0b3e35 100644
--- a/web-client/app/_models/Product.ts
+++ b/web-client/app/_models/Product.ts
@@ -1,22 +1,80 @@
-import { types } from "mobx-state-tree";
-import { InputModel } from "./Input";
-import { OutputModel } from "./Output";
+import { ProductDetailFragment } from "@/graphql";
+import { ProductInput } from "./ProductInput";
+import { ProductOutput } from "./ProductOutput";
 
-export enum AiModelType {
+export enum ProductType {
   LLM = "LLM",
   GenerativeArt = "GenerativeArt",
   ControlNet = "ControlNet",
 }
 
-export const Product = types.model("Product", {
-  id: types.string, // TODO change to slug
-  name: types.string,
-  type: types.enumeration(Object.values(AiModelType)),
-  description: types.maybeNull(types.string),
-  avatarUrl: types.maybeNull(types.string),
-  modelVersion: types.maybeNull(types.string),
-  modelUrl: types.maybeNull(types.string),
-  modelDescription: types.maybeNull(types.string),
-  input: types.maybeNull(InputModel),
-  output: types.maybeNull(OutputModel),
-});
+export interface Product {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+  avatarUrl: string;
+  longDescription: string;
+  technicalDescription: string;
+  author: string;
+  version: string;
+  modelUrl: string;
+  nsfw: boolean;
+  greeting: string;
+  type: ProductType;
+  inputs?: ProductInput;
+  outputs?: ProductOutput;
+  createdAt: number;
+  updatedAt?: number;
+}
+
+export function toProduct(
+  productDetailFragment: ProductDetailFragment
+): Product {
+  const {
+    id,
+    slug,
+    name,
+    description,
+    image_url,
+    long_description,
+    technical_description,
+    author,
+    version,
+    source_url,
+    nsfw,
+    greeting,
+    created_at,
+    updated_at,
+  } = productDetailFragment;
+  let modelType: ProductType | undefined = undefined;
+  if (productDetailFragment.inputs.slug === "llm") {
+    modelType = ProductType.LLM;
+  } else if (productDetailFragment.inputs.slug === "sd") {
+    modelType = ProductType.GenerativeArt;
+  } else if (productDetailFragment.inputs.slug === "controlnet") {
+    modelType = ProductType.ControlNet;
+  } else {
+    throw new Error("Model type not supported");
+  }
+
+  const product: Product = {
+    id,
+    slug,
+    name,
+    description: description ?? "",
+    avatarUrl: image_url ?? "/icons/app_icon.svg",
+    longDescription: long_description ?? "",
+    technicalDescription: technical_description ?? "",
+    author: author ?? "",
+    version: version ?? "",
+    modelUrl: source_url ?? "",
+    nsfw: nsfw ?? false,
+    greeting: greeting ?? "",
+    type: modelType,
+    createdAt: new Date(created_at).getTime(),
+    updatedAt: new Date(updated_at).getTime(),
+  };
+
+  return product;
+}
diff --git a/web-client/app/_models/ProductInput.ts b/web-client/app/_models/ProductInput.ts
new file mode 100644
index 0000000000..343429b239
--- /dev/null
+++ b/web-client/app/_models/ProductInput.ts
@@ -0,0 +1,23 @@
+export interface ProductInput {
+  body: ItemProperties[];
+  slug: string;
+  headers: ProductHeader;
+}
+
+export type ProductHeader = {
+  accept: string;
+  contentType: string;
+};
+
+export type ItemProperties = {
+  name: string;
+  type: string;
+  items?: ProductBodyItem[];
+  example?: unknown;
+  description?: string;
+};
+
+export type ProductBodyItem = {
+  type: string;
+  properties: ItemProperties[];
+};
diff --git a/web-client/app/_models/ProductOutput.ts b/web-client/app/_models/ProductOutput.ts
new file mode 100644
index 0000000000..6042dcac66
--- /dev/null
+++ b/web-client/app/_models/ProductOutput.ts
@@ -0,0 +1,8 @@
+import { ItemProperties } from "./ProductInput";
+
+export interface ProductOutput {
+  slug: string;
+  type: string;
+  properties: ItemProperties[];
+  description: string;
+}
diff --git a/web-client/app/_models/ProductV2.ts b/web-client/app/_models/ProductV2.ts
deleted file mode 100644
index cf45b7a866..0000000000
--- a/web-client/app/_models/ProductV2.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-// Should change name to Product after we remove the old one
-import { AiModelType } from "../_models/Product";
-
-export interface Collection {
-  id: number;
-  created_at: string;
-  updated_at: string | undefined;
-  deleted_at: string | undefined;
-  slug: CollectionType;
-  name: string;
-  description: string;
-  products: ProductV2[];
-}
-
-export interface ProductV2 {
-  id: number;
-  created_at: string;
-  updated_at: string | undefined;
-  deleted_at: string | undefined;
-  slug: string;
-
-  name: string;
-  nsfw: boolean;
-  image_url: string;
-  description: string;
-  long_description: string;
-
-  technical_description: string;
-  author: string;
-  version: string;
-  source_url: string;
-  collections: Collection[];
-
-  prompts: Prompt[] | undefined;
-  inputs: InputResponse;
-  outputs: Record<string, unknown>;
-  greeting: string;
-  modelType: AiModelType;
-}
-
-export interface OutputResponse {}
-
-export interface InputProperty {
-  name: string;
-  type: string;
-  example: string;
-  description: string;
-}
-
-export interface InputBody {
-  name: string;
-  type: string; // TODO make enum for this
-  items: InputArrayItem[] | undefined;
-  example: unknown;
-  description: string;
-}
-
-export interface InputArrayItem {
-  type: string;
-  properties: InputProperty[];
-}
-
-export interface InputResponse {
-  body: InputBody[];
-  slug: string;
-  headers: Record<string, string>;
-}
-
-export interface Prompt {
-  id: number;
-  created_at: string;
-  updated_at: string | undefined;
-  deleted_at: string | undefined;
-  slug: string;
-
-  content: string;
-  image_url: string | undefined;
-  products: ProductV2[] | undefined;
-}
-
-export type CollectionType = "conversational" | "text-to-image";
diff --git a/web-client/app/_models/RootStore.ts b/web-client/app/_models/RootStore.ts
deleted file mode 100644
index 929e4394d3..0000000000
--- a/web-client/app/_models/RootStore.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { createContext, useContext } from "react";
-import { Instance, types } from "mobx-state-tree";
-import { History } from "./History";
-import { values } from "mobx";
-
-export const RootStore = types
-  .model("RootStore", {
-    historyStore: types.optional(History, {}),
-  })
-  .views((self) => ({
-    get activeConversationId() {
-      return values(self.historyStore.activeConversationId);
-    },
-
-    get conversations() {
-      return values(self.historyStore.conversations);
-    },
-  }));
-
-export function initializeStore(): RootInstance {
-  const _store: RootInstance = RootStore.create({});
-
-  return _store;
-}
-
-export type RootInstance = Instance<typeof RootStore>;
-const RootStoreContext = createContext<null | RootInstance>(null);
-export const Provider = RootStoreContext.Provider;
-
-export function useStore(): Instance<typeof RootStore> {
-  const store = useContext(RootStoreContext);
-  if (store === null) {
-    throw new Error("Store cannot be null, please add a context provider");
-  }
-  return store;
-}
diff --git a/web-client/app/_models/Shortcut.ts b/web-client/app/_models/Shortcut.ts
deleted file mode 100644
index 38bf2119ee..0000000000
--- a/web-client/app/_models/Shortcut.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { types } from "mobx-state-tree";
-
-export const Shortcut = types.model("Shortcut", {
-  name: types.string,
-  title: types.string,
-  avatarUrl: types.string,
-});
diff --git a/web-client/app/_models/User.ts b/web-client/app/_models/User.ts
index 7f6efa43ed..9f7d0ffd47 100644
--- a/web-client/app/_models/User.ts
+++ b/web-client/app/_models/User.ts
@@ -1,15 +1,18 @@
-import { types } from "mobx-state-tree";
-
-export const User = types.model("User", {
-  id: types.string,
-  displayName: types.optional(types.string, "Anonymous"),
-  avatarUrl: types.maybe(types.string),
-  email: types.maybe(types.string),
-});
+export interface User {
+  id: string;
+  displayName: string;
+  avatarUrl: string;
+  email?: string;
+}
 
 export const DefaultUser = {
   id: "0",
   displayName: "Anonymous",
-  avatarUrl: undefined,
+  avatarUrl: "/icons/app_icon.svg",
   email: "",
 };
+
+export enum Role {
+  User = "user",
+  Assistant = "assistant",
+}
\ No newline at end of file
diff --git a/web-client/app/_utils/const.ts b/web-client/app/_utils/const.ts
index 30e4d96e4f..ac509c951d 100644
--- a/web-client/app/_utils/const.ts
+++ b/web-client/app/_utils/const.ts
@@ -1 +1 @@
-export const MESSAGE_PER_PAGE = 100;
+export const MESSAGE_PER_PAGE = 10;
diff --git a/web-client/app/_utils/message.ts b/web-client/app/_utils/message.ts
index 57fac4879e..3576a364a0 100644
--- a/web-client/app/_utils/message.ts
+++ b/web-client/app/_utils/message.ts
@@ -1,4 +1,3 @@
-import { Instance } from "mobx-state-tree";
 import { ChatMessage } from "../_models/ChatMessage";
 
 /**
@@ -10,12 +9,12 @@ import { ChatMessage } from "../_models/ChatMessage";
  * @returns Merged array of messages
  */
 export function mergeAndRemoveDuplicates(
-  arr1: Instance<typeof ChatMessage>[],
-  arr2: Instance<typeof ChatMessage>[]
-): Instance<typeof ChatMessage>[] {
+  arr1: ChatMessage[],
+  arr2: ChatMessage[]
+): ChatMessage[] {
   const mergedArray = arr1.concat(arr2);
   const uniqueIdMap = new Map<string, boolean>();
-  const result: Instance<typeof ChatMessage>[] = [];
+  const result: ChatMessage[] = [];
 
   for (const message of mergedArray) {
     if (!uniqueIdMap.has(message.id)) {
diff --git a/web-client/app/layout.tsx b/web-client/app/layout.tsx
index 554f4abb63..1ebe5f4d01 100644
--- a/web-client/app/layout.tsx
+++ b/web-client/app/layout.tsx
@@ -1,7 +1,6 @@
 import "./globals.css";
 import { Inter } from "next/font/google";
 import classNames from "classnames";
-import MobileShowcase from "@/_components/MobileShowcase";
 import { Metadata } from "next";
 import SessionProviderWrapper from "@/_components/SessionProviderWrapper";
 
@@ -19,25 +18,16 @@ export const metadata: Metadata = {
   },
 };
 
-export default function RootLayout({
-  children,
-}: {
+type Props = {
   children: React.ReactNode;
-}) {
+};
+
+export default function RootLayout({ children }: Props) {
   return (
     <SessionProviderWrapper>
-      <html lang="en">
-        <body
-          className={classNames(
-            inter.className,
-            "flex flex-col w-full h-screen"
-          )}
-        >
-          <div className="hidden md:flex flex-col w-full h-screen">
-            {children}
-          </div>
-          <MobileShowcase />
-        </body>
+      {/* suppressHydrationWarning is for next-themes */}
+      <html lang="en" suppressHydrationWarning> 
+        <body className={classNames(inter.className)}>{children}</body>
       </html>
     </SessionProviderWrapper>
   );
diff --git a/web-client/app/page.tsx b/web-client/app/page.tsx
index b40e0d6dd6..8112809d10 100644
--- a/web-client/app/page.tsx
+++ b/web-client/app/page.tsx
@@ -1,34 +1,23 @@
-import Header from "@/_components/Header";
-import { AdvancedPrompt } from "@/_components/AdvancedPrompt";
-import ChatContainer from "@/_components/ChatContainer";
-import { CompactSideBar } from "@/_components/CompactSideBar";
-import { SidebarLeft } from "@/_components/SidebarLeft";
 import { ApolloWrapper } from "./_helpers/ApolloWrapper";
-import { MobxWrapper } from "./_helpers/MobxWrapper";
 import { ThemeWrapper } from "./_helpers/ThemeWrapper";
+import JotaiWrapper from "./_helpers/JotaiWrapper";
+import LeftContainer from "./_components/LeftContainer";
+import RightContainer from "./_components/RightContainer";
+import { ModalWrapper } from "./_helpers/ModalWrapper";
 
-const Page: React.FC = () => {
-  return (
-    <ApolloWrapper>
-      <MobxWrapper>
-        <ThemeWrapper>
-          <div className="flex w-full h-screen">
-            <div className="flex h-screen z-100">
-              <SidebarLeft />
-              <CompactSideBar />
-              <AdvancedPrompt />
-            </div>
-            <div className="w-full max-h-screen flex-1 flex flex-col">
-              <div className="flex-shrink-0 flex-0">
-                <Header />
-              </div>
-              <ChatContainer />
-            </div>
+const Page: React.FC = () => (
+  <ApolloWrapper>
+    <JotaiWrapper>
+      <ThemeWrapper>
+        <ModalWrapper>
+          <div className="flex">
+            <LeftContainer />
+            <RightContainer />
           </div>
-        </ThemeWrapper>
-      </MobxWrapper>
-    </ApolloWrapper>
-  );
-};
+        </ModalWrapper>
+      </ThemeWrapper>
+    </JotaiWrapper>
+  </ApolloWrapper>
+);
 
 export default Page;
diff --git a/web-client/env-example b/web-client/env-example
index e4a7832434..8bd196ed7b 100644
--- a/web-client/env-example
+++ b/web-client/env-example
@@ -13,4 +13,5 @@ NEXTAUTH_SECRET=
 END_SESSION_URL=
 REFRESH_TOKEN_URL=
 // For codegen only
-HASURA_ADMIN_TOKEN=
\ No newline at end of file
+HASURA_ADMIN_TOKEN=
+NEXT_PUBLIC_OPENAPI_ENDPOINT=
\ No newline at end of file
diff --git a/web-client/graphql/fragments/product.graphql b/web-client/graphql/fragments/product.graphql
index 63d4ac6010..9717b63f5e 100644
--- a/web-client/graphql/fragments/product.graphql
+++ b/web-client/graphql/fragments/product.graphql
@@ -13,4 +13,6 @@ fragment ProductDetail on products {
   inputs
   outputs
   nsfw
+  created_at
+  updated_at
 }
\ No newline at end of file
diff --git a/web-client/graphql/generated/gql.ts b/web-client/graphql/generated/gql.ts
index f1744607fb..425e7cc214 100644
--- a/web-client/graphql/generated/gql.ts
+++ b/web-client/graphql/generated/gql.ts
@@ -17,7 +17,7 @@ const documents = {
     "fragment ConversationDetail on conversations {\n  id\n  product_id\n  user_id\n  last_image_url\n  last_text_message\n  created_at\n  updated_at\n  conversation_product {\n    ...ProductDetail\n  }\n}": types.ConversationDetailFragmentDoc,
     "fragment MessageMedia on message_medias {\n  id\n  message_id\n  media_url\n  mime_type\n  updated_at\n}": types.MessageMediaFragmentDoc,
     "fragment MessageDetail on messages {\n  id\n  conversation_id\n  sender\n  sender_name\n  sender_avatar_url\n  content\n  message_type\n  message_sender_type\n  created_at\n  updated_at\n  status\n  message_medias {\n    ...MessageMedia\n  }\n}": types.MessageDetailFragmentDoc,
-    "fragment ProductDetail on products {\n  id\n  name\n  slug\n  description\n  long_description\n  technical_description\n  image_url\n  author\n  greeting\n  source_url\n  version\n  inputs\n  outputs\n  nsfw\n}": types.ProductDetailFragmentDoc,
+    "fragment ProductDetail on products {\n  id\n  name\n  slug\n  description\n  long_description\n  technical_description\n  image_url\n  author\n  greeting\n  source_url\n  version\n  inputs\n  outputs\n  nsfw\n  created_at\n  updated_at\n}": types.ProductDetailFragmentDoc,
     "fragment PromptDetail on prompts {\n  slug\n  content\n  image_url\n}": types.PromptDetailFragmentDoc,
     "mutation createConversation($data: conversations_insert_input!) {\n  insert_conversations_one(object: $data) {\n    ...ConversationDetail\n  }\n}": types.CreateConversationDocument,
     "mutation createMessage($data: messages_insert_input!) {\n  insert_messages_one(object: $data) {\n    ...MessageDetail\n  }\n}": types.CreateMessageDocument,
@@ -26,13 +26,13 @@ const documents = {
     "mutation updateConversation($id: uuid!, $lastMessageText: String, $lastMessageUrl: String) {\n  update_conversations_by_pk(\n    pk_columns: {id: $id}\n    _set: {last_text_message: $lastMessageText, last_image_url: $lastMessageUrl}\n  ) {\n    ...ConversationDetail\n  }\n}": types.UpdateConversationDocument,
     "mutation updateMessage($id: uuid = \"\", $data: messages_set_input!) {\n  update_messages_by_pk(pk_columns: {id: $id}, _set: $data) {\n    ...MessageDetail\n  }\n}": types.UpdateMessageDocument,
     "query getCollections {\n  collections {\n    ...CollectionDetail\n    collection_products {\n      products {\n        ...ProductDetail\n        product_prompts {\n          prompts {\n            ...PromptDetail\n          }\n        }\n      }\n    }\n  }\n}": types.GetCollectionsDocument,
-    "query getConversationMessages($conversation_id: uuid = \"\", $limit: Int = 100, $offset: Int = 100) {\n  messages(\n    offset: $offset\n    limit: $limit\n    where: {conversation_id: {_eq: $conversation_id}}\n    order_by: {updated_at: desc}\n  ) {\n    ...MessageDetail\n  }\n}": types.GetConversationMessagesDocument,
-    "query getConversations {\n  conversations {\n    ...ConversationDetail\n    conversation_messages {\n      ...MessageDetail\n      message_medias {\n        ...MessageMedia\n      }\n    }\n  }\n}": types.GetConversationsDocument,
+    "query getConversationMessages($conversation_id: uuid = \"\", $limit: Int = 100, $offset: Int = 100) {\n  messages(\n    offset: $offset\n    limit: $limit\n    where: {conversation_id: {_eq: $conversation_id}}\n    order_by: {created_at: desc}\n  ) {\n    ...MessageDetail\n  }\n}": types.GetConversationMessagesDocument,
+    "query getConversations {\n  conversations(order_by: {updated_at: desc}) {\n    ...ConversationDetail\n    conversation_messages {\n      ...MessageDetail\n      message_medias {\n        ...MessageMedia\n      }\n    }\n  }\n}": types.GetConversationsDocument,
     "query getProductsByCollectionSlug($slug: String = \"\") {\n  products(where: {product_collections: {collections: {slug: {_eq: $slug}}}}) {\n    ...ProductDetail\n    product_prompts {\n      prompts {\n        ...PromptDetail\n      }\n    }\n    product_collections {\n      collections {\n        ...CollectionDetail\n      }\n    }\n  }\n}": types.GetProductsByCollectionSlugDocument,
     "query getProductPrompts($productSlug: String = \"\") {\n  prompts(where: {prompt_products: {products: {slug: {_eq: $productSlug}}}}) {\n    ...PromptDetail\n  }\n}": types.GetProductPromptsDocument,
     "query getProducts {\n  products {\n    ...ProductDetail\n    product_prompts {\n      prompts {\n        ...PromptDetail\n      }\n    }\n    product_collections {\n      collections {\n        ...CollectionDetail\n      }\n    }\n  }\n}": types.GetProductsDocument,
     "query getProductsIn($_in: [String!] = \"\") {\n  products(where: {slug: {_in: $_in}}) {\n    ...ProductDetail\n  }\n}": types.GetProductsInDocument,
-    "subscription subscribeMessage($id: uuid = \"\") {\n  messages_by_pk(id: $id) {\n    content\n    status\n  }\n}": types.SubscribeMessageDocument,
+    "subscription subscribeMessage($id: uuid = \"\") {\n  messages_by_pk(id: $id) {\n    id\n    content\n    status\n  }\n}": types.SubscribeMessageDocument,
 };
 
 /**
@@ -68,7 +68,7 @@ export function gql(source: "fragment MessageDetail on messages {\n  id\n  conve
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "fragment ProductDetail on products {\n  id\n  name\n  slug\n  description\n  long_description\n  technical_description\n  image_url\n  author\n  greeting\n  source_url\n  version\n  inputs\n  outputs\n  nsfw\n}"): (typeof documents)["fragment ProductDetail on products {\n  id\n  name\n  slug\n  description\n  long_description\n  technical_description\n  image_url\n  author\n  greeting\n  source_url\n  version\n  inputs\n  outputs\n  nsfw\n}"];
+export function gql(source: "fragment ProductDetail on products {\n  id\n  name\n  slug\n  description\n  long_description\n  technical_description\n  image_url\n  author\n  greeting\n  source_url\n  version\n  inputs\n  outputs\n  nsfw\n  created_at\n  updated_at\n}"): (typeof documents)["fragment ProductDetail on products {\n  id\n  name\n  slug\n  description\n  long_description\n  technical_description\n  image_url\n  author\n  greeting\n  source_url\n  version\n  inputs\n  outputs\n  nsfw\n  created_at\n  updated_at\n}"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -104,11 +104,11 @@ export function gql(source: "query getCollections {\n  collections {\n    ...Col
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "query getConversationMessages($conversation_id: uuid = \"\", $limit: Int = 100, $offset: Int = 100) {\n  messages(\n    offset: $offset\n    limit: $limit\n    where: {conversation_id: {_eq: $conversation_id}}\n    order_by: {updated_at: desc}\n  ) {\n    ...MessageDetail\n  }\n}"): (typeof documents)["query getConversationMessages($conversation_id: uuid = \"\", $limit: Int = 100, $offset: Int = 100) {\n  messages(\n    offset: $offset\n    limit: $limit\n    where: {conversation_id: {_eq: $conversation_id}}\n    order_by: {updated_at: desc}\n  ) {\n    ...MessageDetail\n  }\n}"];
+export function gql(source: "query getConversationMessages($conversation_id: uuid = \"\", $limit: Int = 100, $offset: Int = 100) {\n  messages(\n    offset: $offset\n    limit: $limit\n    where: {conversation_id: {_eq: $conversation_id}}\n    order_by: {created_at: desc}\n  ) {\n    ...MessageDetail\n  }\n}"): (typeof documents)["query getConversationMessages($conversation_id: uuid = \"\", $limit: Int = 100, $offset: Int = 100) {\n  messages(\n    offset: $offset\n    limit: $limit\n    where: {conversation_id: {_eq: $conversation_id}}\n    order_by: {created_at: desc}\n  ) {\n    ...MessageDetail\n  }\n}"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "query getConversations {\n  conversations {\n    ...ConversationDetail\n    conversation_messages {\n      ...MessageDetail\n      message_medias {\n        ...MessageMedia\n      }\n    }\n  }\n}"): (typeof documents)["query getConversations {\n  conversations {\n    ...ConversationDetail\n    conversation_messages {\n      ...MessageDetail\n      message_medias {\n        ...MessageMedia\n      }\n    }\n  }\n}"];
+export function gql(source: "query getConversations {\n  conversations(order_by: {updated_at: desc}) {\n    ...ConversationDetail\n    conversation_messages {\n      ...MessageDetail\n      message_medias {\n        ...MessageMedia\n      }\n    }\n  }\n}"): (typeof documents)["query getConversations {\n  conversations(order_by: {updated_at: desc}) {\n    ...ConversationDetail\n    conversation_messages {\n      ...MessageDetail\n      message_medias {\n        ...MessageMedia\n      }\n    }\n  }\n}"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -128,7 +128,7 @@ export function gql(source: "query getProductsIn($_in: [String!] = \"\") {\n  pr
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "subscription subscribeMessage($id: uuid = \"\") {\n  messages_by_pk(id: $id) {\n    content\n    status\n  }\n}"): (typeof documents)["subscription subscribeMessage($id: uuid = \"\") {\n  messages_by_pk(id: $id) {\n    content\n    status\n  }\n}"];
+export function gql(source: "subscription subscribeMessage($id: uuid = \"\") {\n  messages_by_pk(id: $id) {\n    id\n    content\n    status\n  }\n}"): (typeof documents)["subscription subscribeMessage($id: uuid = \"\") {\n  messages_by_pk(id: $id) {\n    id\n    content\n    status\n  }\n}"];
 
 export function gql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/web-client/graphql/generated/graphql.ts b/web-client/graphql/generated/graphql.ts
index 524b84bd9b..1734c7b91e 100644
--- a/web-client/graphql/generated/graphql.ts
+++ b/web-client/graphql/generated/graphql.ts
@@ -3639,13 +3639,13 @@ export type Uuid_Comparison_Exp = {
 
 export type CollectionDetailFragment = { __typename?: 'collections', slug: string, name: string };
 
-export type ConversationDetailFragment = { __typename?: 'conversations', id: any, product_id: any, user_id: string, last_image_url?: string | null, last_text_message?: string | null, created_at: any, updated_at: any, conversation_product?: { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean } | null };
+export type ConversationDetailFragment = { __typename?: 'conversations', id: any, product_id: any, user_id: string, last_image_url?: string | null, last_text_message?: string | null, created_at: any, updated_at: any, conversation_product?: { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any } | null };
 
 export type MessageMediaFragment = { __typename?: 'message_medias', id: any, message_id: any, media_url?: string | null, mime_type?: string | null, updated_at: any };
 
 export type MessageDetailFragment = { __typename?: 'messages', id: any, conversation_id: any, sender: string, sender_name?: string | null, sender_avatar_url?: string | null, content?: string | null, message_type?: string | null, message_sender_type?: string | null, created_at: any, updated_at: any, status?: string | null, message_medias: Array<{ __typename?: 'message_medias', id: any, message_id: any, media_url?: string | null, mime_type?: string | null, updated_at: any }> };
 
-export type ProductDetailFragment = { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean };
+export type ProductDetailFragment = { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any };
 
 export type PromptDetailFragment = { __typename?: 'prompts', slug: string, content?: string | null, image_url?: string | null };
 
@@ -3654,7 +3654,7 @@ export type CreateConversationMutationVariables = Exact<{
 }>;
 
 
-export type CreateConversationMutation = { __typename?: 'mutation_root', insert_conversations_one?: { __typename?: 'conversations', id: any, product_id: any, user_id: string, last_image_url?: string | null, last_text_message?: string | null, created_at: any, updated_at: any, conversation_product?: { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean } | null } | null };
+export type CreateConversationMutation = { __typename?: 'mutation_root', insert_conversations_one?: { __typename?: 'conversations', id: any, product_id: any, user_id: string, last_image_url?: string | null, last_text_message?: string | null, created_at: any, updated_at: any, conversation_product?: { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any } | null } | null };
 
 export type CreateMessageMutationVariables = Exact<{
   data: Messages_Insert_Input;
@@ -3690,7 +3690,7 @@ export type UpdateConversationMutationVariables = Exact<{
 }>;
 
 
-export type UpdateConversationMutation = { __typename?: 'mutation_root', update_conversations_by_pk?: { __typename?: 'conversations', id: any, product_id: any, user_id: string, last_image_url?: string | null, last_text_message?: string | null, created_at: any, updated_at: any, conversation_product?: { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean } | null } | null };
+export type UpdateConversationMutation = { __typename?: 'mutation_root', update_conversations_by_pk?: { __typename?: 'conversations', id: any, product_id: any, user_id: string, last_image_url?: string | null, last_text_message?: string | null, created_at: any, updated_at: any, conversation_product?: { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any } | null } | null };
 
 export type UpdateMessageMutationVariables = Exact<{
   id?: InputMaybe<Scalars['uuid']['input']>;
@@ -3703,7 +3703,7 @@ export type UpdateMessageMutation = { __typename?: 'mutation_root', update_messa
 export type GetCollectionsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetCollectionsQuery = { __typename?: 'query_root', collections: Array<{ __typename?: 'collections', slug: string, name: string, collection_products: Array<{ __typename?: 'collection_products', products: Array<{ __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, product_prompts: Array<{ __typename?: 'product_prompts', prompts: Array<{ __typename?: 'prompts', slug: string, content?: string | null, image_url?: string | null }> }> }> }> }> };
+export type GetCollectionsQuery = { __typename?: 'query_root', collections: Array<{ __typename?: 'collections', slug: string, name: string, collection_products: Array<{ __typename?: 'collection_products', products: Array<{ __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any, product_prompts: Array<{ __typename?: 'product_prompts', prompts: Array<{ __typename?: 'prompts', slug: string, content?: string | null, image_url?: string | null }> }> }> }> }> };
 
 export type GetConversationMessagesQueryVariables = Exact<{
   conversation_id?: InputMaybe<Scalars['uuid']['input']>;
@@ -3717,14 +3717,14 @@ export type GetConversationMessagesQuery = { __typename?: 'query_root', messages
 export type GetConversationsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetConversationsQuery = { __typename?: 'query_root', conversations: Array<{ __typename?: 'conversations', id: any, product_id: any, user_id: string, last_image_url?: string | null, last_text_message?: string | null, created_at: any, updated_at: any, conversation_messages: Array<{ __typename?: 'messages', id: any, conversation_id: any, sender: string, sender_name?: string | null, sender_avatar_url?: string | null, content?: string | null, message_type?: string | null, message_sender_type?: string | null, created_at: any, updated_at: any, status?: string | null, message_medias: Array<{ __typename?: 'message_medias', id: any, message_id: any, media_url?: string | null, mime_type?: string | null, updated_at: any }> }>, conversation_product?: { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean } | null }> };
+export type GetConversationsQuery = { __typename?: 'query_root', conversations: Array<{ __typename?: 'conversations', id: any, product_id: any, user_id: string, last_image_url?: string | null, last_text_message?: string | null, created_at: any, updated_at: any, conversation_messages: Array<{ __typename?: 'messages', id: any, conversation_id: any, sender: string, sender_name?: string | null, sender_avatar_url?: string | null, content?: string | null, message_type?: string | null, message_sender_type?: string | null, created_at: any, updated_at: any, status?: string | null, message_medias: Array<{ __typename?: 'message_medias', id: any, message_id: any, media_url?: string | null, mime_type?: string | null, updated_at: any }> }>, conversation_product?: { __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any } | null }> };
 
 export type GetProductsByCollectionSlugQueryVariables = Exact<{
   slug?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type GetProductsByCollectionSlugQuery = { __typename?: 'query_root', products: Array<{ __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, product_prompts: Array<{ __typename?: 'product_prompts', prompts: Array<{ __typename?: 'prompts', slug: string, content?: string | null, image_url?: string | null }> }>, product_collections: Array<{ __typename?: 'collection_products', collections: Array<{ __typename?: 'collections', slug: string, name: string }> }> }> };
+export type GetProductsByCollectionSlugQuery = { __typename?: 'query_root', products: Array<{ __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any, product_prompts: Array<{ __typename?: 'product_prompts', prompts: Array<{ __typename?: 'prompts', slug: string, content?: string | null, image_url?: string | null }> }>, product_collections: Array<{ __typename?: 'collection_products', collections: Array<{ __typename?: 'collections', slug: string, name: string }> }> }> };
 
 export type GetProductPromptsQueryVariables = Exact<{
   productSlug?: InputMaybe<Scalars['String']['input']>;
@@ -3736,39 +3736,39 @@ export type GetProductPromptsQuery = { __typename?: 'query_root', prompts: Array
 export type GetProductsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetProductsQuery = { __typename?: 'query_root', products: Array<{ __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, product_prompts: Array<{ __typename?: 'product_prompts', prompts: Array<{ __typename?: 'prompts', slug: string, content?: string | null, image_url?: string | null }> }>, product_collections: Array<{ __typename?: 'collection_products', collections: Array<{ __typename?: 'collections', slug: string, name: string }> }> }> };
+export type GetProductsQuery = { __typename?: 'query_root', products: Array<{ __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any, product_prompts: Array<{ __typename?: 'product_prompts', prompts: Array<{ __typename?: 'prompts', slug: string, content?: string | null, image_url?: string | null }> }>, product_collections: Array<{ __typename?: 'collection_products', collections: Array<{ __typename?: 'collections', slug: string, name: string }> }> }> };
 
 export type GetProductsInQueryVariables = Exact<{
   _in?: InputMaybe<Array<Scalars['String']['input']> | Scalars['String']['input']>;
 }>;
 
 
-export type GetProductsInQuery = { __typename?: 'query_root', products: Array<{ __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean }> };
+export type GetProductsInQuery = { __typename?: 'query_root', products: Array<{ __typename?: 'products', id: any, name: string, slug: string, description?: string | null, long_description?: string | null, technical_description?: string | null, image_url?: string | null, author?: string | null, greeting?: string | null, source_url?: string | null, version?: string | null, inputs?: any | null, outputs?: any | null, nsfw: boolean, created_at: any, updated_at: any }> };
 
 export type SubscribeMessageSubscriptionVariables = Exact<{
   id?: InputMaybe<Scalars['uuid']['input']>;
 }>;
 
 
-export type SubscribeMessageSubscription = { __typename?: 'subscription_root', messages_by_pk?: { __typename?: 'messages', content?: string | null, status?: string | null } | null };
+export type SubscribeMessageSubscription = { __typename?: 'subscription_root', messages_by_pk?: { __typename?: 'messages', id: any, content?: string | null, status?: string | null } | null };
 
 export const CollectionDetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CollectionDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"collections"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<CollectionDetailFragment, unknown>;
-export const ProductDetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}}]} as unknown as DocumentNode<ProductDetailFragment, unknown>;
-export const ConversationDetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ConversationDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"conversations"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"product_id"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_image_url"}},{"kind":"Field","name":{"kind":"Name","value":"last_text_message"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}}]} as unknown as DocumentNode<ConversationDetailFragment, unknown>;
+export const ProductDetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}}]} as unknown as DocumentNode<ProductDetailFragment, unknown>;
+export const ConversationDetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ConversationDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"conversations"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"product_id"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_image_url"}},{"kind":"Field","name":{"kind":"Name","value":"last_text_message"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}}]} as unknown as DocumentNode<ConversationDetailFragment, unknown>;
 export const MessageMediaFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageMedia"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"message_medias"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message_id"}},{"kind":"Field","name":{"kind":"Name","value":"media_url"}},{"kind":"Field","name":{"kind":"Name","value":"mime_type"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}}]} as unknown as DocumentNode<MessageMediaFragment, unknown>;
 export const MessageDetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"messages"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_id"}},{"kind":"Field","name":{"kind":"Name","value":"sender"}},{"kind":"Field","name":{"kind":"Name","value":"sender_name"}},{"kind":"Field","name":{"kind":"Name","value":"sender_avatar_url"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"message_type"}},{"kind":"Field","name":{"kind":"Name","value":"message_sender_type"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageMedia"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"message_medias"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message_id"}},{"kind":"Field","name":{"kind":"Name","value":"media_url"}},{"kind":"Field","name":{"kind":"Name","value":"mime_type"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}}]} as unknown as DocumentNode<MessageDetailFragment, unknown>;
 export const PromptDetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PromptDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"prompts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}}]}}]} as unknown as DocumentNode<PromptDetailFragment, unknown>;
-export const CreateConversationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createConversation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"conversations_insert_input"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"insert_conversations_one"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"object"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ConversationDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ConversationDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"conversations"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"product_id"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_image_url"}},{"kind":"Field","name":{"kind":"Name","value":"last_text_message"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}}]} as unknown as DocumentNode<CreateConversationMutation, CreateConversationMutationVariables>;
+export const CreateConversationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createConversation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"conversations_insert_input"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"insert_conversations_one"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"object"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ConversationDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ConversationDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"conversations"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"product_id"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_image_url"}},{"kind":"Field","name":{"kind":"Name","value":"last_text_message"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}}]} as unknown as DocumentNode<CreateConversationMutation, CreateConversationMutationVariables>;
 export const CreateMessageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createMessage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"messages_insert_input"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"insert_messages_one"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"object"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageMedia"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"message_medias"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message_id"}},{"kind":"Field","name":{"kind":"Name","value":"media_url"}},{"kind":"Field","name":{"kind":"Name","value":"mime_type"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"messages"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_id"}},{"kind":"Field","name":{"kind":"Name","value":"sender"}},{"kind":"Field","name":{"kind":"Name","value":"sender_name"}},{"kind":"Field","name":{"kind":"Name","value":"sender_avatar_url"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"message_type"}},{"kind":"Field","name":{"kind":"Name","value":"message_sender_type"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}}]} as unknown as DocumentNode<CreateMessageMutation, CreateMessageMutationVariables>;
 export const DeleteConversationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"deleteConversation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"delete_conversations_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<DeleteConversationMutation, DeleteConversationMutationVariables>;
 export const GenerateImageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"generateImage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"model"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"neg_prompt"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"prompt"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"seed"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"10"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"steps"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"10"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"width"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"512"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"height"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"512"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"imageGeneration"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"model"},"value":{"kind":"Variable","name":{"kind":"Name","value":"model"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"neg_prompt"},"value":{"kind":"Variable","name":{"kind":"Name","value":"neg_prompt"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"prompt"},"value":{"kind":"Variable","name":{"kind":"Name","value":"prompt"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"seed"},"value":{"kind":"Variable","name":{"kind":"Name","value":"seed"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"steps"},"value":{"kind":"Variable","name":{"kind":"Name","value":"steps"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"width"},"value":{"kind":"Variable","name":{"kind":"Name","value":"width"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"height"},"value":{"kind":"Variable","name":{"kind":"Name","value":"height"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]} as unknown as DocumentNode<GenerateImageMutation, GenerateImageMutationVariables>;
-export const UpdateConversationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"updateConversation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lastMessageText"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lastMessageUrl"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update_conversations_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pk_columns"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}},{"kind":"Argument","name":{"kind":"Name","value":"_set"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"last_text_message"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastMessageText"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"last_image_url"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastMessageUrl"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ConversationDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ConversationDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"conversations"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"product_id"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_image_url"}},{"kind":"Field","name":{"kind":"Name","value":"last_text_message"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}}]} as unknown as DocumentNode<UpdateConversationMutation, UpdateConversationMutationVariables>;
+export const UpdateConversationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"updateConversation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lastMessageText"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lastMessageUrl"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update_conversations_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pk_columns"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}},{"kind":"Argument","name":{"kind":"Name","value":"_set"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"last_text_message"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastMessageText"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"last_image_url"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastMessageUrl"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ConversationDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ConversationDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"conversations"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"product_id"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_image_url"}},{"kind":"Field","name":{"kind":"Name","value":"last_text_message"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}}]} as unknown as DocumentNode<UpdateConversationMutation, UpdateConversationMutationVariables>;
 export const UpdateMessageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"updateMessage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"messages_set_input"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update_messages_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pk_columns"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}},{"kind":"Argument","name":{"kind":"Name","value":"_set"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageMedia"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"message_medias"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message_id"}},{"kind":"Field","name":{"kind":"Name","value":"media_url"}},{"kind":"Field","name":{"kind":"Name","value":"mime_type"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"messages"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_id"}},{"kind":"Field","name":{"kind":"Name","value":"sender"}},{"kind":"Field","name":{"kind":"Name","value":"sender_name"}},{"kind":"Field","name":{"kind":"Name","value":"sender_avatar_url"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"message_type"}},{"kind":"Field","name":{"kind":"Name","value":"message_sender_type"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}}]} as unknown as DocumentNode<UpdateMessageMutation, UpdateMessageMutationVariables>;
-export const GetCollectionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getCollections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"CollectionDetail"}},{"kind":"Field","name":{"kind":"Name","value":"collection_products"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}},{"kind":"Field","name":{"kind":"Name","value":"product_prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PromptDetail"}}]}}]}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CollectionDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"collections"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PromptDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"prompts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}}]}}]} as unknown as DocumentNode<GetCollectionsQuery, GetCollectionsQueryVariables>;
-export const GetConversationMessagesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getConversationMessages"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"conversation_id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"100"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"offset"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"100"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"messages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"offset"},"value":{"kind":"Variable","name":{"kind":"Name","value":"offset"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"conversation_id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"conversation_id"}}}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"order_by"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"updated_at"},"value":{"kind":"EnumValue","value":"desc"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageMedia"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"message_medias"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message_id"}},{"kind":"Field","name":{"kind":"Name","value":"media_url"}},{"kind":"Field","name":{"kind":"Name","value":"mime_type"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"messages"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_id"}},{"kind":"Field","name":{"kind":"Name","value":"sender"}},{"kind":"Field","name":{"kind":"Name","value":"sender_name"}},{"kind":"Field","name":{"kind":"Name","value":"sender_avatar_url"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"message_type"}},{"kind":"Field","name":{"kind":"Name","value":"message_sender_type"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}}]} as unknown as DocumentNode<GetConversationMessagesQuery, GetConversationMessagesQueryVariables>;
-export const GetConversationsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getConversations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"conversations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ConversationDetail"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_messages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageDetail"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageMedia"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"message_medias"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message_id"}},{"kind":"Field","name":{"kind":"Name","value":"media_url"}},{"kind":"Field","name":{"kind":"Name","value":"mime_type"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ConversationDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"conversations"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"product_id"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_image_url"}},{"kind":"Field","name":{"kind":"Name","value":"last_text_message"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"messages"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_id"}},{"kind":"Field","name":{"kind":"Name","value":"sender"}},{"kind":"Field","name":{"kind":"Name","value":"sender_name"}},{"kind":"Field","name":{"kind":"Name","value":"sender_avatar_url"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"message_type"}},{"kind":"Field","name":{"kind":"Name","value":"message_sender_type"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}}]} as unknown as DocumentNode<GetConversationsQuery, GetConversationsQueryVariables>;
-export const GetProductsByCollectionSlugDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getProductsByCollectionSlug"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"product_collections"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"collections"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"slug"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}]}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}},{"kind":"Field","name":{"kind":"Name","value":"product_prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PromptDetail"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"product_collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"CollectionDetail"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PromptDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"prompts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CollectionDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"collections"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<GetProductsByCollectionSlugQuery, GetProductsByCollectionSlugQueryVariables>;
+export const GetCollectionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getCollections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"CollectionDetail"}},{"kind":"Field","name":{"kind":"Name","value":"collection_products"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}},{"kind":"Field","name":{"kind":"Name","value":"product_prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PromptDetail"}}]}}]}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CollectionDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"collections"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PromptDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"prompts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}}]}}]} as unknown as DocumentNode<GetCollectionsQuery, GetCollectionsQueryVariables>;
+export const GetConversationMessagesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getConversationMessages"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"conversation_id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"100"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"offset"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}},"defaultValue":{"kind":"IntValue","value":"100"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"messages"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"offset"},"value":{"kind":"Variable","name":{"kind":"Name","value":"offset"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"conversation_id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"conversation_id"}}}]}}]}},{"kind":"Argument","name":{"kind":"Name","value":"order_by"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"created_at"},"value":{"kind":"EnumValue","value":"desc"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageMedia"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"message_medias"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message_id"}},{"kind":"Field","name":{"kind":"Name","value":"media_url"}},{"kind":"Field","name":{"kind":"Name","value":"mime_type"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"messages"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_id"}},{"kind":"Field","name":{"kind":"Name","value":"sender"}},{"kind":"Field","name":{"kind":"Name","value":"sender_name"}},{"kind":"Field","name":{"kind":"Name","value":"sender_avatar_url"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"message_type"}},{"kind":"Field","name":{"kind":"Name","value":"message_sender_type"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}}]} as unknown as DocumentNode<GetConversationMessagesQuery, GetConversationMessagesQueryVariables>;
+export const GetConversationsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getConversations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"conversations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"order_by"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"updated_at"},"value":{"kind":"EnumValue","value":"desc"}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ConversationDetail"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_messages"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageDetail"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageMedia"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"message_medias"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"message_id"}},{"kind":"Field","name":{"kind":"Name","value":"media_url"}},{"kind":"Field","name":{"kind":"Name","value":"mime_type"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ConversationDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"conversations"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"product_id"}},{"kind":"Field","name":{"kind":"Name","value":"user_id"}},{"kind":"Field","name":{"kind":"Name","value":"last_image_url"}},{"kind":"Field","name":{"kind":"Name","value":"last_text_message"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_product"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"MessageDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"messages"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"conversation_id"}},{"kind":"Field","name":{"kind":"Name","value":"sender"}},{"kind":"Field","name":{"kind":"Name","value":"sender_name"}},{"kind":"Field","name":{"kind":"Name","value":"sender_avatar_url"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"message_type"}},{"kind":"Field","name":{"kind":"Name","value":"message_sender_type"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"message_medias"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"MessageMedia"}}]}}]}}]} as unknown as DocumentNode<GetConversationsQuery, GetConversationsQueryVariables>;
+export const GetProductsByCollectionSlugDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getProductsByCollectionSlug"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"slug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"product_collections"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"collections"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"slug"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"slug"}}}]}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}},{"kind":"Field","name":{"kind":"Name","value":"product_prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PromptDetail"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"product_collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"CollectionDetail"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PromptDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"prompts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CollectionDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"collections"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<GetProductsByCollectionSlugQuery, GetProductsByCollectionSlugQueryVariables>;
 export const GetProductPromptsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getProductPrompts"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"productSlug"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"prompts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"prompt_products"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"products"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"slug"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"productSlug"}}}]}}]}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PromptDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PromptDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"prompts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}}]}}]} as unknown as DocumentNode<GetProductPromptsQuery, GetProductPromptsQueryVariables>;
-export const GetProductsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getProducts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}},{"kind":"Field","name":{"kind":"Name","value":"product_prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PromptDetail"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"product_collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"CollectionDetail"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PromptDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"prompts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CollectionDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"collections"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<GetProductsQuery, GetProductsQueryVariables>;
-export const GetProductsInDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getProductsIn"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"_in"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"slug"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"_in"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}}]}}]} as unknown as DocumentNode<GetProductsInQuery, GetProductsInQueryVariables>;
-export const SubscribeMessageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"subscribeMessage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"messages_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]}}]} as unknown as DocumentNode<SubscribeMessageSubscription, SubscribeMessageSubscriptionVariables>;
\ No newline at end of file
+export const GetProductsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getProducts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}},{"kind":"Field","name":{"kind":"Name","value":"product_prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"prompts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"PromptDetail"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"product_collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collections"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"CollectionDetail"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PromptDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"prompts"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"CollectionDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"collections"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<GetProductsQuery, GetProductsQueryVariables>;
+export const GetProductsInDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getProductsIn"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"_in"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"products"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"where"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"slug"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"_in"},"value":{"kind":"Variable","name":{"kind":"Name","value":"_in"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProductDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProductDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"products"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"long_description"}},{"kind":"Field","name":{"kind":"Name","value":"technical_description"}},{"kind":"Field","name":{"kind":"Name","value":"image_url"}},{"kind":"Field","name":{"kind":"Name","value":"author"}},{"kind":"Field","name":{"kind":"Name","value":"greeting"}},{"kind":"Field","name":{"kind":"Name","value":"source_url"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"inputs"}},{"kind":"Field","name":{"kind":"Name","value":"outputs"}},{"kind":"Field","name":{"kind":"Name","value":"nsfw"}},{"kind":"Field","name":{"kind":"Name","value":"created_at"}},{"kind":"Field","name":{"kind":"Name","value":"updated_at"}}]}}]} as unknown as DocumentNode<GetProductsInQuery, GetProductsInQueryVariables>;
+export const SubscribeMessageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"subscribeMessage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"uuid"}},"defaultValue":{"kind":"StringValue","value":"","block":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"messages_by_pk"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"content"}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]}}]} as unknown as DocumentNode<SubscribeMessageSubscription, SubscribeMessageSubscriptionVariables>;
\ No newline at end of file
diff --git a/web-client/graphql/queries/getConversationMessages.graphql b/web-client/graphql/queries/getConversationMessages.graphql
index f19a5a01c5..43f5c585e3 100644
--- a/web-client/graphql/queries/getConversationMessages.graphql
+++ b/web-client/graphql/queries/getConversationMessages.graphql
@@ -7,7 +7,7 @@ query getConversationMessages(
     offset: $offset,
     limit: $limit,
     where: { conversation_id: { _eq: $conversation_id } },
-    order_by: {updated_at: desc}
+    order_by: {created_at: desc}
   ) {
     ...MessageDetail
   }
diff --git a/web-client/graphql/queries/getConversations.graphql b/web-client/graphql/queries/getConversations.graphql
index 11128f1c98..bbadccd08d 100644
--- a/web-client/graphql/queries/getConversations.graphql
+++ b/web-client/graphql/queries/getConversations.graphql
@@ -1,5 +1,5 @@
 query getConversations {
-  conversations {
+  conversations(order_by: {updated_at: desc}) {
     ...ConversationDetail
     conversation_messages {
       ...MessageDetail
diff --git a/web-client/graphql/subscriptions/subscribeMessage.graphql b/web-client/graphql/subscriptions/subscribeMessage.graphql
index d27a5d7981..8cdf9d2f42 100644
--- a/web-client/graphql/subscriptions/subscribeMessage.graphql
+++ b/web-client/graphql/subscriptions/subscribeMessage.graphql
@@ -1,5 +1,6 @@
 subscription subscribeMessage($id: uuid = "") {
   messages_by_pk(id: $id) {
+    id
     content
     status
   }
diff --git a/web-client/package-lock.json b/web-client/package-lock.json
deleted file mode 100644
index 5462092815..0000000000
--- a/web-client/package-lock.json
+++ /dev/null
@@ -1,4369 +0,0 @@
-{
-  "name": "jan-web",
-  "version": "0.1.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "jan-web",
-      "version": "0.1.0",
-      "dependencies": {
-        "@headlessui/react": "^1.7.15",
-        "@heroicons/react": "^2.0.18",
-        "@types/node": "20.4.2",
-        "@types/react": "18.2.15",
-        "@types/react-dom": "18.2.7",
-        "autoprefixer": "10.4.14",
-        "classnames": "^2.3.2",
-        "eslint": "8.45.0",
-        "eslint-config-next": "13.4.10",
-        "mobx": "^6.10.0",
-        "mobx-react-lite": "^4.0.3",
-        "mobx-state-tree": "^5.1.8",
-        "next": "13.4.10",
-        "postcss": "8.4.26",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
-        "tailwindcss": "3.3.3",
-        "typescript": "5.1.6",
-        "uuid": "^9.0.0"
-      },
-      "devDependencies": {
-        "@tailwindcss/forms": "^0.5.4"
-      }
-    },
-    "node_modules/@aashutoshrathi/word-wrap": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
-      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.11"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
-      "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
-      }
-    },
-    "node_modules/@eslint-community/regexpp": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
-      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
-      "engines": {
-        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@eslint/eslintrc": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.0.tgz",
-      "integrity": "sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==",
-      "dependencies": {
-        "ajv": "^6.12.4",
-        "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
-        "ignore": "^5.2.0",
-        "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
-        "strip-json-comments": "^3.1.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint/js": {
-      "version": "8.44.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
-      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      }
-    },
-    "node_modules/@headlessui/react": {
-      "version": "1.7.15",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.15.tgz",
-      "integrity": "sha512-OTO0XtoRQ6JPB1cKNFYBZv2Q0JMqMGNhYP1CjPvcJvjz8YGokz8oAj89HIYZGN0gZzn/4kk9iUpmMF4Q21Gsqw==",
-      "dependencies": {
-        "client-only": "^0.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": "^16 || ^17 || ^18",
-        "react-dom": "^16 || ^17 || ^18"
-      }
-    },
-    "node_modules/@heroicons/react": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
-      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
-      "peerDependencies": {
-        "react": ">= 16"
-      }
-    },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
-      "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
-      "dependencies": {
-        "@humanwhocodes/object-schema": "^1.2.1",
-        "debug": "^4.1.1",
-        "minimatch": "^3.0.5"
-      },
-      "engines": {
-        "node": ">=10.10.0"
-      }
-    },
-    "node_modules/@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "engines": {
-        "node": ">=12.22"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/nzakas"
-      }
-    },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
-      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-      "dependencies": {
-        "@jridgewell/set-array": "^1.0.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.9"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
-      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
-      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
-      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
-      "dependencies": {
-        "@jridgewell/resolve-uri": "3.1.0",
-        "@jridgewell/sourcemap-codec": "1.4.14"
-      }
-    },
-    "node_modules/@jridgewell/trace-mapping/node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
-    },
-    "node_modules/@next/env": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.10.tgz",
-      "integrity": "sha512-3G1yD/XKTSLdihyDSa8JEsaWOELY+OWe08o0LUYzfuHp1zHDA8SObQlzKt+v+wrkkPcnPweoLH1ImZeUa0A1NQ=="
-    },
-    "node_modules/@next/eslint-plugin-next": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.10.tgz",
-      "integrity": "sha512-YJqyq6vk39JQfvaNtN83t/p5Jy45+bazRL+V4QI8FPd3FBqFYMEsULiwRLgSJMgFqkk4t4JbeZurz+gILEAFpA==",
-      "dependencies": {
-        "glob": "7.1.7"
-      }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.10.tgz",
-      "integrity": "sha512-4bsdfKmmg7mgFGph0UorD1xWfZ5jZEw4kKRHYEeTK9bT1QnMbPVPlVXQRIiFPrhoDQnZUoa6duuPUJIEGLV1Jg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.10.tgz",
-      "integrity": "sha512-ngXhUBbcZIWZWqNbQSNxQrB9T1V+wgfCzAor2olYuo/YpaL6mUYNUEgeBMhr8qwV0ARSgKaOp35lRvB7EmCRBg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.10.tgz",
-      "integrity": "sha512-SjCZZCOmHD4uyM75MVArSAmF5Y+IJSGroPRj2v9/jnBT36SYFTORN8Ag/lhw81W9EeexKY/CUg2e9mdebZOwsg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.10.tgz",
-      "integrity": "sha512-F+VlcWijX5qteoYIOxNiBbNE8ruaWuRlcYyIRK10CugqI/BIeCDzEDyrHIHY8AWwbkTwe6GRHabMdE688Rqq4Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.10.tgz",
-      "integrity": "sha512-WDv1YtAV07nhfy3i1visr5p/tjiH6CeXp4wX78lzP1jI07t4PnHHG1WEDFOduXh3WT4hG6yN82EQBQHDi7hBrQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.10.tgz",
-      "integrity": "sha512-zFkzqc737xr6qoBgDa3AwC7jPQzGLjDlkNmt/ljvQJ/Veri5ECdHjZCUuiTUfVjshNIIpki6FuP0RaQYK9iCRg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.10.tgz",
-      "integrity": "sha512-IboRS8IWz5mWfnjAdCekkl8s0B7ijpWeDwK2O8CdgZkoCDY0ZQHBSGiJ2KViAG6+BJVfLvcP+a2fh6cdyBr9QQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.10.tgz",
-      "integrity": "sha512-bSA+4j8jY4EEiwD/M2bol4uVEu1lBlgsGdvM+mmBm/BbqofNBfaZ2qwSbwE2OwbAmzNdVJRFRXQZ0dkjopTRaQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.10.tgz",
-      "integrity": "sha512-g2+tU63yTWmcVQKDGY0MV1PjjqgZtwM4rB1oVVi/v0brdZAcrcTV+04agKzWtvWroyFz6IqtT0MoZJA7PNyLVw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@pkgr/utils": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.2.tgz",
-      "integrity": "sha512-POgTXhjrTfbTV63DiFXav4lBHiICLKKwDeaKn9Nphwj7WH6m0hMMCaJkMyRWjgtPFyRKRVoMXXjczsTQRDEhYw==",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "fast-glob": "^3.3.0",
-        "is-glob": "^4.0.3",
-        "open": "^9.1.0",
-        "picocolors": "^1.0.0",
-        "tslib": "^2.6.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
-      }
-    },
-    "node_modules/@rushstack/eslint-patch": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.2.tgz",
-      "integrity": "sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw=="
-    },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
-      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@tailwindcss/forms": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.4.tgz",
-      "integrity": "sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q==",
-      "dev": true,
-      "dependencies": {
-        "mini-svg-data-uri": "^1.2.3"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
-      }
-    },
-    "node_modules/@types/json5": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
-      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
-    },
-    "node_modules/@types/node": {
-      "version": "20.4.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz",
-      "integrity": "sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw=="
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.5",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
-      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
-    },
-    "node_modules/@types/react": {
-      "version": "18.2.15",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.15.tgz",
-      "integrity": "sha512-oEjE7TQt1fFTFSbf8kkNuc798ahTUzn3Le67/PWjE8MAfYAD/qB7O8hSTcromLFqHCt9bcdOg5GXMokzTjJ5SA==",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@types/react-dom": {
-      "version": "18.2.7",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
-      "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
-      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
-    },
-    "node_modules/@typescript-eslint/parser": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
-      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
-      "dependencies": {
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
-      "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/types": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
-      "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
-      "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/visitor-keys": "5.62.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.62.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
-      "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
-      "dependencies": {
-        "@typescript-eslint/types": "5.62.0",
-        "eslint-visitor-keys": "^3.3.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/acorn": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
-      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "peerDependencies": {
-        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
-    },
-    "node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-    },
-    "node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
-    "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array-includes": {
-      "version": "3.1.6",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
-      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "get-intrinsic": "^1.1.3",
-        "is-string": "^1.0.7"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/array.prototype.flat": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz",
-      "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "es-shim-unscopables": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array.prototype.flatmap": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
-      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "es-shim-unscopables": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/array.prototype.tosorted": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz",
-      "integrity": "sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "es-shim-unscopables": "^1.0.0",
-        "get-intrinsic": "^1.1.3"
-      }
-    },
-    "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.1.tgz",
-      "integrity": "sha512-09x0ZWFEjj4WD8PDbykUwo3t9arLn8NIzmmYEJFpYekOAQjpkGSyrQhNoRTcwwcFRu+ycWF78QZ63oWTqSjBcw==",
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
-        "is-shared-array-buffer": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/ast-types-flow": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
-    },
-    "node_modules/autoprefixer": {
-      "version": "10.4.14",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        }
-      ],
-      "dependencies": {
-        "browserslist": "^4.21.5",
-        "caniuse-lite": "^1.0.30001464",
-        "fraction.js": "^4.2.0",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/axe-core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz",
-      "integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/axobject-query": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
-      "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
-    },
-    "node_modules/big-integer": {
-      "version": "1.6.51",
-      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
-      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/bplist-parser": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/bplist-parser/-/bplist-parser-0.2.0.tgz",
-      "integrity": "sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==",
-      "dependencies": {
-        "big-integer": "^1.6.44"
-      },
-      "engines": {
-        "node": ">= 5.10.0"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.21.9",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz",
-      "integrity": "sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001503",
-        "electron-to-chromium": "^1.4.431",
-        "node-releases": "^2.0.12",
-        "update-browserslist-db": "^1.0.11"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/bundle-name": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
-      "integrity": "sha512-PKA4BeSvBpQKQ8iPOGCSiell+N8P+Tf1DlwqmYhpe2gAhKPHn8EYOxVT+ShuGmhg8lN8XiSlS80yiExKXrURlw==",
-      "dependencies": {
-        "run-applescript": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/busboy": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
-      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
-      "dependencies": {
-        "streamsearch": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=10.16.0"
-      }
-    },
-    "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001516",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001516.tgz",
-      "integrity": "sha512-Wmec9pCBY8CWbmI4HsjBeQLqDTqV91nFVR83DnZpYyRnPI1wePDsTg0bGLPC5VU/3OIZV1fmxEea1b+tFKe86g==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ]
-    },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
-      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ],
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
-    },
-    "node_modules/client-only": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
-      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-    },
-    "node_modules/damerau-levenshtein": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
-      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
-    },
-    "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/deep-is": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
-    },
-    "node_modules/default-browser": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz",
-      "integrity": "sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==",
-      "dependencies": {
-        "bundle-name": "^3.0.0",
-        "default-browser-id": "^3.0.0",
-        "execa": "^7.1.1",
-        "titleize": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/default-browser-id": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-3.0.0.tgz",
-      "integrity": "sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==",
-      "dependencies": {
-        "bplist-parser": "^0.2.0",
-        "untildify": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/define-lazy-prop": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
-      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/define-properties": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
-      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "dependencies": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/dequal": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
-    },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dependencies": {
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
-    },
-    "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.4.463",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.463.tgz",
-      "integrity": "sha512-fT3hvdUWLjDbaTGzyOjng/CQhQJSQP8ThO3XZAoaxHvHo2kUXiRQVMj9M235l8uDFiNPsPa6KHT1p3RaR6ugRw=="
-    },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-    },
-    "node_modules/enhanced-resolve": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/es-abstract": {
-      "version": "1.22.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.1.tgz",
-      "integrity": "sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==",
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.1",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-set-tostringtag": "^2.0.1",
-        "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.2.1",
-        "get-symbol-description": "^1.0.0",
-        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
-        "has": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
-        "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
-        "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.10",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.0",
-        "safe-array-concat": "^1.0.0",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.7",
-        "string.prototype.trimend": "^1.0.6",
-        "string.prototype.trimstart": "^1.0.6",
-        "typed-array-buffer": "^1.0.0",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.10"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
-      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3",
-        "has": "^1.0.3",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-shim-unscopables": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
-      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
-      "dependencies": {
-        "has": "^1.0.3"
-      }
-    },
-    "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint": {
-      "version": "8.45.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz",
-      "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==",
-      "dependencies": {
-        "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.1.0",
-        "@eslint/js": "8.44.0",
-        "@humanwhocodes/config-array": "^0.11.10",
-        "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.10.0",
-        "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
-        "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
-        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.0",
-        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.6.0",
-        "esquery": "^1.4.2",
-        "esutils": "^2.0.2",
-        "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
-        "find-up": "^5.0.0",
-        "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "imurmurhash": "^0.1.4",
-        "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
-        "lodash.merge": "^4.6.2",
-        "minimatch": "^3.1.2",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
-        "text-table": "^0.2.0"
-      },
-      "bin": {
-        "eslint": "bin/eslint.js"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-config-next": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.10.tgz",
-      "integrity": "sha512-+JjcM6lQmFR5Mw0ORm9o1CR29+z/uajgSfYAPEGIBxOhTHBgCMs7ysuwi72o7LkMmA8E3N7/h09pSGZxs0s85g==",
-      "dependencies": {
-        "@next/eslint-plugin-next": "13.4.10",
-        "@rushstack/eslint-patch": "^1.1.3",
-        "@typescript-eslint/parser": "^5.42.0",
-        "eslint-import-resolver-node": "^0.3.6",
-        "eslint-import-resolver-typescript": "^3.5.2",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-react": "^7.31.7",
-        "eslint-plugin-react-hooks": "5.0.0-canary-7118f5dd7-20230705"
-      },
-      "peerDependencies": {
-        "eslint": "^7.23.0 || ^8.0.0",
-        "typescript": ">=3.3.1"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
-      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
-      "dependencies": {
-        "debug": "^3.2.7",
-        "is-core-module": "^2.11.0",
-        "resolve": "^1.22.1"
-      }
-    },
-    "node_modules/eslint-import-resolver-node/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-import-resolver-typescript": {
-      "version": "3.5.5",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.5.tgz",
-      "integrity": "sha512-TdJqPHs2lW5J9Zpe17DZNQuDnox4xo2o+0tE7Pggain9Rbc19ik8kFtXdxZ250FVx2kF4vlt2RSf4qlUpG7bhw==",
-      "dependencies": {
-        "debug": "^4.3.4",
-        "enhanced-resolve": "^5.12.0",
-        "eslint-module-utils": "^2.7.4",
-        "get-tsconfig": "^4.5.0",
-        "globby": "^13.1.3",
-        "is-core-module": "^2.11.0",
-        "is-glob": "^4.0.3",
-        "synckit": "^0.8.5"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts/projects/eslint-import-resolver-ts"
-      },
-      "peerDependencies": {
-        "eslint": "*",
-        "eslint-plugin-import": "*"
-      }
-    },
-    "node_modules/eslint-import-resolver-typescript/node_modules/globby": {
-      "version": "13.2.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
-      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
-      "dependencies": {
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.3.0",
-        "ignore": "^5.2.4",
-        "merge2": "^1.4.1",
-        "slash": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-import-resolver-typescript/node_modules/slash": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
-      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-module-utils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
-      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
-      "dependencies": {
-        "debug": "^3.2.7"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependenciesMeta": {
-        "eslint": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/eslint-module-utils/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-plugin-import": {
-      "version": "2.27.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
-      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
-      "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flat": "^1.3.1",
-        "array.prototype.flatmap": "^1.3.1",
-        "debug": "^3.2.7",
-        "doctrine": "^2.1.0",
-        "eslint-import-resolver-node": "^0.3.7",
-        "eslint-module-utils": "^2.7.4",
-        "has": "^1.0.3",
-        "is-core-module": "^2.11.0",
-        "is-glob": "^4.0.3",
-        "minimatch": "^3.1.2",
-        "object.values": "^1.1.6",
-        "resolve": "^1.22.1",
-        "semver": "^6.3.0",
-        "tsconfig-paths": "^3.14.1"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependencies": {
-        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/eslint-plugin-import/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
-      "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "aria-query": "^5.1.3",
-        "array-includes": "^3.1.6",
-        "array.prototype.flatmap": "^1.3.1",
-        "ast-types-flow": "^0.0.7",
-        "axe-core": "^4.6.2",
-        "axobject-query": "^3.1.1",
-        "damerau-levenshtein": "^1.0.8",
-        "emoji-regex": "^9.2.2",
-        "has": "^1.0.3",
-        "jsx-ast-utils": "^3.3.3",
-        "language-tags": "=1.0.5",
-        "minimatch": "^3.1.2",
-        "object.entries": "^1.1.6",
-        "object.fromentries": "^2.0.6",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
-      }
-    },
-    "node_modules/eslint-plugin-jsx-a11y/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/eslint-plugin-react": {
-      "version": "7.32.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
-      "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
-      "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flatmap": "^1.3.1",
-        "array.prototype.tosorted": "^1.1.1",
-        "doctrine": "^2.1.0",
-        "estraverse": "^5.3.0",
-        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
-        "minimatch": "^3.1.2",
-        "object.entries": "^1.1.6",
-        "object.fromentries": "^2.0.6",
-        "object.hasown": "^1.1.2",
-        "object.values": "^1.1.6",
-        "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.4",
-        "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependencies": {
-        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
-      }
-    },
-    "node_modules/eslint-plugin-react-hooks": {
-      "version": "5.0.0-canary-7118f5dd7-20230705",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz",
-      "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
-      }
-    },
-    "node_modules/eslint-plugin-react/node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/eslint-plugin-react/node_modules/resolve": {
-      "version": "2.0.0-next.4",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz",
-      "integrity": "sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==",
-      "dependencies": {
-        "is-core-module": "^2.9.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/eslint-scope": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.1.tgz",
-      "integrity": "sha512-CvefSOsDdaYYvxChovdrPo/ZGt8d5lrJWleAc1diXRKhHGiTYEI26cvo8Kle/wGnsizoCJjK73FMg1/IkIwiNA==",
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-      "dependencies": {
-        "acorn": "^8.9.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
-      },
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/esquery": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
-      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
-      "dependencies": {
-        "estraverse": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dependencies": {
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/execa": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-7.1.1.tgz",
-      "integrity": "sha512-wH0eMf/UXckdUYnO21+HDztteVv05rq2GXksxT4fCGeHkBhw1DROXh40wcjMcRqDOWE7iPJ4n3M7e2+YFP+76Q==",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.1",
-        "human-signals": "^4.3.0",
-        "is-stream": "^3.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^5.1.0",
-        "onetime": "^6.0.0",
-        "signal-exit": "^3.0.7",
-        "strip-final-newline": "^3.0.0"
-      },
-      "engines": {
-        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
-      "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
-    },
-    "node_modules/fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
-    },
-    "node_modules/fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
-      "dependencies": {
-        "flat-cache": "^3.0.4"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/flat-cache": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
-      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
-      "dependencies": {
-        "flatted": "^3.1.0",
-        "rimraf": "^3.0.2"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      }
-    },
-    "node_modules/flatted": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
-      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
-    },
-    "node_modules/for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dependencies": {
-        "is-callable": "^1.1.3"
-      }
-    },
-    "node_modules/fraction.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://www.patreon.com/infusion"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-    },
-    "node_modules/function.prototype.name": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
-      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.19.0",
-        "functions-have-names": "^1.2.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/functions-have-names": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
-      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/get-tsconfig": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.6.2.tgz",
-      "integrity": "sha512-E5XrT4CbbXcXWy+1jChlZmrmCwd5KGx502kDCXJJ7y898TtWW9FwoG5HfOLVRKmlmDGkWN2HM9Ho+/Y8F0sJDg==",
-      "dependencies": {
-        "resolve-pkg-maps": "^1.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
-      }
-    },
-    "node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
-    },
-    "node_modules/globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/globalthis": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
-      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
-      "dependencies": {
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/globby": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.9",
-        "ignore": "^5.2.0",
-        "merge2": "^1.4.1",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/graceful-fs": {
-      "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=="
-    },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
-    },
-    "node_modules/has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dependencies": {
-        "function-bind": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/has-bigints": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.1.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dependencies": {
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/human-signals": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
-      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
-      "engines": {
-        "node": ">=14.18.0"
-      }
-    },
-    "node_modules/ignore": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
-      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "engines": {
-        "node": ">=0.8.19"
-      }
-    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-    },
-    "node_modules/internal-slot": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
-      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.0",
-        "has": "^1.0.3",
-        "side-channel": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-      "dependencies": {
-        "has-bigints": "^1.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-callable": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
-      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
-      "dependencies": {
-        "has": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-date-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
-      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-docker": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
-      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-inside-container": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
-      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
-      "dependencies": {
-        "is-docker": "^3.0.0"
-      },
-      "bin": {
-        "is-inside-container": "cli.js"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-      "dependencies": {
-        "call-bind": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
-      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-symbol": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
-      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-      "dependencies": {
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
-      "dependencies": {
-        "which-typed-array": "^1.1.11"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-weakref": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-wsl/node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/isarray": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
-      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
-    },
-    "node_modules/jiti": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
-      "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==",
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
-    },
-    "node_modules/json-stable-stringify-without-jsonify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
-    },
-    "node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      }
-    },
-    "node_modules/jsx-ast-utils": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.4.tgz",
-      "integrity": "sha512-fX2TVdCViod6HwKEtSWGHs57oFhVfCMwieb9PuRDgjDPh5XeqJiHFFFJCHxU5cnTc3Bu/GRL+kPiFmw8XWOfKw==",
-      "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flat": "^1.3.1",
-        "object.assign": "^4.1.4",
-        "object.values": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/language-subtag-registry": {
-      "version": "0.3.22",
-      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz",
-      "integrity": "sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w=="
-    },
-    "node_modules/language-tags": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
-      "integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
-      "dependencies": {
-        "language-subtag-registry": "~0.3.2"
-      }
-    },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
-    },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dependencies": {
-        "braces": "^3.0.2",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/mimic-fn": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
-      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/mini-svg-data-uri": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
-      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
-      "dev": true,
-      "bin": {
-        "mini-svg-data-uri": "cli.js"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/mobx": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.10.0.tgz",
-      "integrity": "sha512-WMbVpCMFtolbB8swQ5E2YRrU+Yu8iLozCVx3CdGjbBKlP7dFiCSuiG06uea3JCFN5DnvtAX7+G5Bp82e2xu0ww==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mobx"
-      }
-    },
-    "node_modules/mobx-react-lite": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-4.0.3.tgz",
-      "integrity": "sha512-wEE1oT5zvDdvplG4HnRrFgPwg5GFVVrEtl42Er85k23zeu3om8H8wbDPgdbQP88zAihVsik6xJfw6VnzUl8fQw==",
-      "dependencies": {
-        "use-sync-external-store": "^1.2.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mobx"
-      },
-      "peerDependencies": {
-        "mobx": "^6.9.0",
-        "react": "^16.8.0 || ^17 || ^18"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/mobx-state-tree": {
-      "version": "5.1.8",
-      "resolved": "https://registry.npmjs.org/mobx-state-tree/-/mobx-state-tree-5.1.8.tgz",
-      "integrity": "sha512-oe82BNgMr408e6DxMDNat8msXQTuyuqzJ97DPupbhchEfjjHyjsmPSwtXHl+nXiW3tybpb/cr5siUClBqKqv+Q==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mobx"
-      },
-      "peerDependencies": {
-        "mobx": "^6.3.0"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
-    },
-    "node_modules/next": {
-      "version": "13.4.10",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.4.10.tgz",
-      "integrity": "sha512-4ep6aKxVTQ7rkUW2fBLhpBr/5oceCuf4KmlUpvG/aXuDTIf9mexNSpabUD6RWPspu6wiJJvozZREhXhueYO36A==",
-      "dependencies": {
-        "@next/env": "13.4.10",
-        "@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"
-      },
-      "bin": {
-        "next": "dist/bin/next"
-      },
-      "engines": {
-        "node": ">=16.8.0"
-      },
-      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.4.10",
-        "@next/swc-darwin-x64": "13.4.10",
-        "@next/swc-linux-arm64-gnu": "13.4.10",
-        "@next/swc-linux-arm64-musl": "13.4.10",
-        "@next/swc-linux-x64-gnu": "13.4.10",
-        "@next/swc-linux-x64-musl": "13.4.10",
-        "@next/swc-win32-arm64-msvc": "13.4.10",
-        "@next/swc-win32-ia32-msvc": "13.4.10",
-        "@next/swc-win32-x64-msvc": "13.4.10"
-      },
-      "peerDependencies": {
-        "@opentelemetry/api": "^1.1.0",
-        "fibers": ">= 3.1.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "sass": "^1.3.0"
-      },
-      "peerDependenciesMeta": {
-        "@opentelemetry/api": {
-          "optional": true
-        },
-        "fibers": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/next/node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.13",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
-      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ=="
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/npm-run-path": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
-      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
-      "dependencies": {
-        "path-key": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/npm-run-path/node_modules/path-key": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
-      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.assign": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "has-symbols": "^1.0.3",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object.entries": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz",
-      "integrity": "sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.fromentries": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz",
-      "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object.hasown": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz",
-      "integrity": "sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==",
-      "dependencies": {
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/object.values": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz",
-      "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/onetime": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
-      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-      "dependencies": {
-        "mimic-fn": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/open": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-9.1.0.tgz",
-      "integrity": "sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==",
-      "dependencies": {
-        "default-browser": "^4.0.0",
-        "define-lazy-prop": "^3.0.0",
-        "is-inside-container": "^1.0.0",
-        "is-wsl": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/optionator": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
-      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
-      "dependencies": {
-        "@aashutoshrathi/word-wrap": "^1.2.3",
-        "deep-is": "^0.1.3",
-        "fast-levenshtein": "^2.0.6",
-        "levn": "^0.4.1",
-        "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.4.26",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
-      "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.6",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
-      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
-      "dependencies": {
-        "lilconfig": "^2.0.5",
-        "yaml": "^2.1.1"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
-      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.11"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
-    },
-    "node_modules/prelude-ls": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/punycode": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-    },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz",
-      "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "functions-have-names": "^1.2.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
-      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
-      "dependencies": {
-        "is-core-module": "^2.11.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/resolve-pkg-maps": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
-      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
-      "funding": {
-        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/run-applescript": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-5.0.0.tgz",
-      "integrity": "sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==",
-      "dependencies": {
-        "execa": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/run-applescript/node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "engines": {
-        "node": ">=10.17.0"
-      }
-    },
-    "node_modules/run-applescript/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/run-applescript/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/run-applescript/node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/run-applescript/node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/safe-array-concat": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz",
-      "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "has-symbols": "^1.0.3",
-        "isarray": "^2.0.5"
-      },
-      "engines": {
-        "node": ">=0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/safe-regex-test": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
-      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
-        "is-regex": "^1.1.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
-    },
-    "node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/streamsearch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
-      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/string.prototype.matchall": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
-      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4",
-        "get-intrinsic": "^1.1.3",
-        "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "regexp.prototype.flags": "^1.4.3",
-        "side-channel": "^1.0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/string.prototype.trim": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
-      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/string.prototype.trimend": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
-      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/string.prototype.trimstart": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
-      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
-        "es-abstract": "^1.20.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-bom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/strip-final-newline": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/styled-jsx": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
-      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
-      "dependencies": {
-        "client-only": "0.0.1"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
-      },
-      "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
-        "babel-plugin-macros": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/sucrase": {
-      "version": "3.33.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.33.0.tgz",
-      "integrity": "sha512-ARGC7vbufOHfpvyGcZZXFaXCMZ9A4fffOGC5ucOW7+WHDGlAe8LJdf3Jts1sWhDeiI1RSWrKy5Hodl+JWGdW2A==",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "7.1.6",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/synckit": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",
-      "integrity": "sha512-L1dapNV6vu2s/4Sputv8xGsCdAVlb5nRDMFU/E27D44l5U6cw1g0dGd45uLc+OXjNMmF4ntiMdCimzcjFKQI8Q==",
-      "dependencies": {
-        "@pkgr/utils": "^2.3.1",
-        "tslib": "^2.5.0"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
-      }
-    },
-    "node_modules/tailwindcss": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
-      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.2.12",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.18.2",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
-    },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/titleize": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
-      "integrity": "sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
-    },
-    "node_modules/tsconfig-paths": {
-      "version": "3.14.2",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
-      "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==",
-      "dependencies": {
-        "@types/json5": "^0.0.29",
-        "json5": "^1.0.2",
-        "minimist": "^1.2.6",
-        "strip-bom": "^3.0.0"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
-      "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
-    },
-    "node_modules/tsutils": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-      "dependencies": {
-        "tslib": "^1.8.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
-      }
-    },
-    "node_modules/tsutils/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
-    "node_modules/type-check": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
-      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-      "dependencies": {
-        "prelude-ls": "^1.2.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
-      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=14.17"
-      }
-    },
-    "node_modules/unbox-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-bigints": "^1.0.2",
-        "has-symbols": "^1.0.3",
-        "which-boxed-primitive": "^1.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/untildify": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
-      "integrity": "sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/update-browserslist-db": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
-      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/use-sync-external-store": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
-    },
-    "node_modules/uuid": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
-      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/watchpack": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/which-typed-array": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
-      "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
-    },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
-    "node_modules/yaml": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
-      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/zod": {
-      "version": "3.21.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
-      "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    }
-  }
-}
diff --git a/web-client/package.json b/web-client/package.json
index 225ca53cc7..ff93efa00b 100644
--- a/web-client/package.json
+++ b/web-client/package.json
@@ -28,20 +28,20 @@
     "eslint-config-next": "13.4.10",
     "graphql": "^16.8.0",
     "graphql-ws": "^5.14.0",
+    "jotai": "^2.4.0",
+    "jotai-optics": "^0.3.1",
     "jwt-decode": "^3.1.2",
-    "mobx": "^6.10.0",
-    "mobx-react-lite": "^4.0.3",
-    "mobx-state-tree": "^5.1.8",
     "next": "13.4.10",
     "next-auth": "^4.23.1",
     "next-themes": "^0.2.1",
-    "nextjs-openai": "^7.2.0",
-    "openai-streams": "^6.2.0",
+    "optics-ts": "^2.4.1",
     "postcss": "8.4.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
     "react-syntax-highlighter": "^15.5.0",
+    "remark": "^14.0.3",
+    "remark-html": "^15.0.2",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6"
   },
diff --git a/web-client/tailwind.config.js b/web-client/tailwind.config.js
index 4cf5c1e311..384ea3b321 100644
--- a/web-client/tailwind.config.js
+++ b/web-client/tailwind.config.js
@@ -13,6 +13,9 @@ module.exports = {
         bounce200: "bounce 1s infinite 200ms",
         bounce400: "bounce 1s infinite 400ms",
       },
+      colors: {
+        "hover-light": { DEFAULT: "#F9FAFB" },
+      },
     },
   },
   plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
diff --git a/web-client/yarn.lock b/web-client/yarn.lock
index 17c477bfe9..a76cde32c1 100644
--- a/web-client/yarn.lock
+++ b/web-client/yarn.lock
@@ -1247,6 +1247,13 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
+"@types/debug@^4.0.0":
+  version "4.1.8"
+  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
+  integrity sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==
+  dependencies:
+    "@types/ms" "*"
+
 "@types/hast@^2.0.0":
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.5.tgz#08caac88b44d0fdd04dc17a19142355f43bd8a7a"
@@ -1269,6 +1276,18 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/mdast@^3.0.0":
+  version "3.0.12"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
+  integrity sha512-DT+iNIRNX884cx0/Q1ja7NyUPpZuv0KPyL5rGNxm1WC1OtHstl7n4Jb7nk+xacNShQMbczJjt8uFzznpp6kYBg==
+  dependencies:
+    "@types/unist" "^2"
+
+"@types/ms@*":
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
+  integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
+
 "@types/node@*":
   version "20.5.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.3.tgz#fa52c147f405d56b2f1dd8780d840aa87ddff629"
@@ -1279,6 +1298,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-20.4.2.tgz"
   integrity sha512-Dd0BYtWgnWJKwO1jkmTrzofjK2QXXcai0dmtzvIBhcA+RsG5h8R3xlyta0kGOZRNfL9GuRtb1knmPEhQrePCEw==
 
+"@types/parse5@^6.0.0":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
+  integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
@@ -1317,6 +1341,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
   integrity sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==
 
+"@types/unist@^2.0.0":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.8.tgz#bb197b9639aa1a04cf464a617fe800cccd92ad5c"
+  integrity sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==
+
 "@types/ws@^8.0.0":
   version "8.5.5"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.5.tgz#af587964aa06682702ee6dcbc7be41a80e4b28eb"
@@ -1694,6 +1723,11 @@ babel-preset-fbjs@^3.4.0:
     "@babel/plugin-transform-template-literals" "^7.0.0"
     babel-plugin-syntax-trailing-function-commas "^7.0.0-beta.0"
 
+bail@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+  integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
@@ -1844,6 +1878,11 @@ capital-case@^1.0.4:
     tslib "^2.0.3"
     upper-case-first "^2.0.2"
 
+ccount@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
+  integrity sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==
+
 chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1895,16 +1934,31 @@ change-case@^4.1.2:
     snake-case "^3.0.4"
     tslib "^2.0.3"
 
+character-entities-html4@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
+  integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
+
 character-entities-legacy@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
   integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
 
+character-entities-legacy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
+  integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
+
 character-entities@^1.0.0:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
   integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
 
+character-entities@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
+
 character-reference-invalid@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
@@ -2027,6 +2081,11 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
   integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
 
+comma-separated-tokens@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
+  integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
+
 commander@^4.0.0:
   version "4.1.1"
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
@@ -2112,7 +2171,7 @@ debounce@^1.2.0:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
   integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -2131,6 +2190,13 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
+decode-named-character-reference@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
+  dependencies:
+    character-entities "^2.0.0"
+
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
@@ -2179,7 +2245,7 @@ dependency-graph@^0.11.0:
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
   integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
 
-dequal@^2.0.3:
+dequal@^2.0.0, dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
@@ -2194,6 +2260,11 @@ didyoumean@^1.2.2:
   resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
+diff@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.1.0.tgz#bc52d298c5ea8df9194800224445ed43ffc87e40"
+  integrity sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@@ -2616,6 +2687,11 @@ execa@^7.1.1:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -3053,11 +3129,89 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hast-util-from-parse5@^7.0.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-7.1.2.tgz#aecfef73e3ceafdfa4550716443e4eb7b02e22b0"
+  integrity sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.0"
+    hastscript "^7.0.0"
+    property-information "^6.0.0"
+    vfile "^5.0.0"
+    vfile-location "^4.0.0"
+    web-namespaces "^2.0.0"
+
 hast-util-parse-selector@^2.0.0:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
   integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
 
+hast-util-parse-selector@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz#25ab00ae9e75cbc62cf7a901f68a247eade659e2"
+  integrity sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+
+hast-util-raw@^7.0.0:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-7.2.3.tgz#dcb5b22a22073436dbdc4aa09660a644f4991d99"
+  integrity sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/parse5" "^6.0.0"
+    hast-util-from-parse5 "^7.0.0"
+    hast-util-to-parse5 "^7.0.0"
+    html-void-elements "^2.0.0"
+    parse5 "^6.0.0"
+    unist-util-position "^4.0.0"
+    unist-util-visit "^4.0.0"
+    vfile "^5.0.0"
+    web-namespaces "^2.0.0"
+    zwitch "^2.0.0"
+
+hast-util-sanitize@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-sanitize/-/hast-util-sanitize-4.1.0.tgz#d90f8521f5083547095c5c63a7e03150303e0286"
+  integrity sha512-Hd9tU0ltknMGRDv+d6Ro/4XKzBqQnP/EZrpiTbpFYfXv/uOhWeKc+2uajcbEvAEH98VZd7eII2PiXm13RihnLw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+
+hast-util-to-html@^8.0.0:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-8.0.4.tgz#0269ef33fa3f6599b260a8dc94f733b8e39e41fc"
+  integrity sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/unist" "^2.0.0"
+    ccount "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-raw "^7.0.0"
+    hast-util-whitespace "^2.0.0"
+    html-void-elements "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    stringify-entities "^4.0.0"
+    zwitch "^2.0.4"
+
+hast-util-to-parse5@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-7.1.0.tgz#c49391bf8f151973e0c9adcd116b561e8daf29f3"
+  integrity sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+    web-namespaces "^2.0.0"
+    zwitch "^2.0.0"
+
+hast-util-whitespace@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
+  integrity sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==
+
 hastscript@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
@@ -3069,6 +3223,17 @@ hastscript@^6.0.0:
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
 
+hastscript@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-7.2.0.tgz#0eafb7afb153d047077fa2a833dc9b7ec604d10b"
+  integrity sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^2.0.0"
+    hast-util-parse-selector "^3.0.0"
+    property-information "^6.0.0"
+    space-separated-tokens "^2.0.0"
+
 header-case@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
@@ -3089,6 +3254,11 @@ hoist-non-react-statics@^3.3.2:
   dependencies:
     react-is "^16.7.0"
 
+html-void-elements@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-2.0.1.tgz#29459b8b05c200b6c5ee98743c41b979d577549f"
+  integrity sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==
+
 http-proxy-agent@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz#e9096c5afd071a3fce56e6252bb321583c124673"
@@ -3274,6 +3444,11 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-buffer@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
 is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
@@ -3371,6 +3546,11 @@ is-path-inside@^3.0.3:
   resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
+is-plain-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
+  integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
+
 is-regex@^1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
@@ -3492,6 +3672,16 @@ jose@^4.11.4, jose@^4.14.4:
   resolved "https://registry.yarnpkg.com/jose/-/jose-4.14.4.tgz#59e09204e2670c3164ee24cbfe7115c6f8bff9ca"
   integrity sha512-j8GhLiKmUAh+dsFXlX1aJCbt5KMibuKb+d7j1JaOJG6s2UjX1PQlW+OKB/sD4a/5ZYF4RcmYmLSndOoU3Lt/3g==
 
+jotai-optics@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/jotai-optics/-/jotai-optics-0.3.1.tgz#7ff38470551429460cc41d9cd1320193665354e0"
+  integrity sha512-KibUx9IneM2hGWGIYGs/v0KCxU985lg7W2c6dt5RodJCB2XPbmok8rkkLmdVk9+fKsn2shkPMi+AG8XzHgB3+w==
+
+jotai@^2.4.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-2.4.2.tgz#85610d82d247a7b19de7cce82e8d3ddf007f8d4d"
+  integrity sha512-90jXVOd9h6gi5JXk558M+wnJfaaVN2WegcNOCfiFbWboNaDl6DkRgiY/K1oeqTfYJmq8yM7XPsL99LAvcOPqhw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -3571,6 +3761,11 @@ jwt-decode@^3.1.2:
   resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
   integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
 
+kleur@^4.0.3:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
 language-subtag-registry@~0.3.2:
   version "0.3.22"
   resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz"
@@ -3672,6 +3867,11 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
+longest-streak@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
+  integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@@ -3720,6 +3920,76 @@ map-cache@^0.2.0:
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
   integrity sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==
 
+mdast-util-definitions@^5.0.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz#9910abb60ac5d7115d6819b57ae0bcef07a3f7a7"
+  integrity sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-from-markdown@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0"
+  integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    decode-named-character-reference "^1.0.0"
+    mdast-util-to-string "^3.1.0"
+    micromark "^3.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-decode-string "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    unist-util-stringify-position "^3.0.0"
+    uvu "^0.5.0"
+
+mdast-util-phrasing@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz#c7c21d0d435d7fb90956038f02e8702781f95463"
+  integrity sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    unist-util-is "^5.0.0"
+
+mdast-util-to-hast@^12.0.0:
+  version "12.3.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz#045d2825fb04374e59970f5b3f279b5700f6fb49"
+  integrity sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    "@types/mdast" "^3.0.0"
+    mdast-util-definitions "^5.0.0"
+    micromark-util-sanitize-uri "^1.1.0"
+    trim-lines "^3.0.0"
+    unist-util-generated "^2.0.0"
+    unist-util-position "^4.0.0"
+    unist-util-visit "^4.0.0"
+
+mdast-util-to-markdown@^1.0.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz#c13343cb3fc98621911d33b5cd42e7d0731171c6"
+  integrity sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    "@types/unist" "^2.0.0"
+    longest-streak "^3.0.0"
+    mdast-util-phrasing "^3.0.0"
+    mdast-util-to-string "^3.0.0"
+    micromark-util-decode-string "^1.0.0"
+    unist-util-visit "^4.0.0"
+    zwitch "^2.0.0"
+
+mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz#66f7bb6324756741c5f47a53557f0cbf16b6f789"
+  integrity sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
@@ -3735,6 +4005,200 @@ meros@^1.2.1:
   resolved "https://registry.yarnpkg.com/meros/-/meros-1.3.0.tgz#c617d2092739d55286bf618129280f362e6242f2"
   integrity sha512-2BNGOimxEz5hmjUG2FwoxCt5HN7BXdaWyFqEwxPTrJzVdABtrL4TiHTcsWSFAxPQ/tOnEaQEJh3qWq71QRMY+w==
 
+micromark-core-commonmark@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8"
+  integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-factory-destination "^1.0.0"
+    micromark-factory-label "^1.0.0"
+    micromark-factory-space "^1.0.0"
+    micromark-factory-title "^1.0.0"
+    micromark-factory-whitespace "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-classify-character "^1.0.0"
+    micromark-util-html-tag-name "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
+micromark-factory-destination@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz#eb815957d83e6d44479b3df640f010edad667b9f"
+  integrity sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-label@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz#cc95d5478269085cfa2a7282b3de26eb2e2dec68"
+  integrity sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-factory-space@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz#c8f40b0640a0150751d3345ed885a080b0d15faf"
+  integrity sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-title@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz#dd0fe951d7a0ac71bdc5ee13e5d1465ad7f50ea1"
+  integrity sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-factory-whitespace@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz#798fb7489f4c8abafa7ca77eed6b5745853c9705"
+  integrity sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-character@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.2.0.tgz#4fedaa3646db249bc58caeb000eb3549a8ca5dcc"
+  integrity sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-chunked@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz#37a24d33333c8c69a74ba12a14651fd9ea8a368b"
+  integrity sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-classify-character@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz#6a7f8c8838e8a120c8e3c4f2ae97a2bff9190e9d"
+  integrity sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-combine-extensions@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz#192e2b3d6567660a85f735e54d8ea6e3952dbe84"
+  integrity sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-types "^1.0.0"
+
+micromark-util-decode-numeric-character-reference@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz#b1e6e17009b1f20bc652a521309c5f22c85eb1c6"
+  integrity sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-decode-string@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz#dc12b078cba7a3ff690d0203f95b5d5537f2809c"
+  integrity sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==
+  dependencies:
+    decode-named-character-reference "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-encode@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz#92e4f565fd4ccb19e0dcae1afab9a173bbeb19a5"
+  integrity sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==
+
+micromark-util-html-tag-name@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz#48fd7a25826f29d2f71479d3b4e83e94829b3588"
+  integrity sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==
+
+micromark-util-normalize-identifier@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz#7a73f824eb9f10d442b4d7f120fecb9b38ebf8b7"
+  integrity sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==
+  dependencies:
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-resolve-all@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz#4652a591ee8c8fa06714c9b54cd6c8e693671188"
+  integrity sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==
+  dependencies:
+    micromark-util-types "^1.0.0"
+
+micromark-util-sanitize-uri@^1.0.0, micromark-util-sanitize-uri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz#613f738e4400c6eedbc53590c67b197e30d7f90d"
+  integrity sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==
+  dependencies:
+    micromark-util-character "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
+micromark-util-subtokenize@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz#941c74f93a93eaf687b9054aeb94642b0e92edb1"
+  integrity sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==
+  dependencies:
+    micromark-util-chunked "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    uvu "^0.5.0"
+
+micromark-util-symbol@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz#813cd17837bdb912d069a12ebe3a44b6f7063142"
+  integrity sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==
+
+micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.1.0.tgz#e6676a8cae0bb86a2171c498167971886cb7e283"
+  integrity sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==
+
+micromark@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.2.0.tgz#1af9fef3f995ea1ea4ac9c7e2f19c48fd5c006e9"
+  integrity sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==
+  dependencies:
+    "@types/debug" "^4.0.0"
+    debug "^4.0.0"
+    decode-named-character-reference "^1.0.0"
+    micromark-core-commonmark "^1.0.1"
+    micromark-factory-space "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-chunked "^1.0.0"
+    micromark-util-combine-extensions "^1.0.0"
+    micromark-util-decode-numeric-character-reference "^1.0.0"
+    micromark-util-encode "^1.0.0"
+    micromark-util-normalize-identifier "^1.0.0"
+    micromark-util-resolve-all "^1.0.0"
+    micromark-util-sanitize-uri "^1.0.0"
+    micromark-util-subtokenize "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.1"
+    uvu "^0.5.0"
+
 micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
@@ -3777,22 +4241,10 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-mobx-react-lite@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-4.0.3.tgz"
-  integrity sha512-wEE1oT5zvDdvplG4HnRrFgPwg5GFVVrEtl42Er85k23zeu3om8H8wbDPgdbQP88zAihVsik6xJfw6VnzUl8fQw==
-  dependencies:
-    use-sync-external-store "^1.2.0"
-
-mobx-state-tree@^5.1.8:
-  version "5.1.8"
-  resolved "https://registry.npmjs.org/mobx-state-tree/-/mobx-state-tree-5.1.8.tgz"
-  integrity sha512-oe82BNgMr408e6DxMDNat8msXQTuyuqzJ97DPupbhchEfjjHyjsmPSwtXHl+nXiW3tybpb/cr5siUClBqKqv+Q==
-
-mobx@^6.10.0:
-  version "6.10.0"
-  resolved "https://registry.npmjs.org/mobx/-/mobx-6.10.0.tgz"
-  integrity sha512-WMbVpCMFtolbB8swQ5E2YRrU+Yu8iLozCVx3CdGjbBKlP7dFiCSuiG06uea3JCFN5DnvtAX7+G5Bp82e2xu0ww==
+mri@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
 ms@2.1.2, ms@^2.1.1:
   version "2.1.2"
@@ -4049,6 +4501,11 @@ openid-client@^5.4.0:
     object-hash "^2.2.0"
     oidc-token-hash "^5.0.3"
 
+optics-ts@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/optics-ts/-/optics-ts-2.4.1.tgz#de94bda2b0ed7fde5b7631283031b9699459d40d"
+  integrity sha512-HaYzMHvC80r7U/LqAd4hQyopDezC60PO2qF5GuIwALut2cl5rK1VWHsqTp0oqoJJWjiv6uXKqsO+Q2OO0C3MmQ==
+
 optimism@^0.17.5:
   version "0.17.5"
   resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.17.5.tgz#a4c78b3ad12c58623abedbebb4f2f2c19b8e8816"
@@ -4176,6 +4633,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse5@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
+
 pascal-case@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
@@ -4379,6 +4841,11 @@ property-information@^5.0.0:
   dependencies:
     xtend "^4.0.0"
 
+property-information@^6.0.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.3.0.tgz#ba4a06ec6b4e1e90577df9931286953cdf4282c3"
+  integrity sha512-gVNZ74nqhRMiIUYWGQdosYetaKc83x8oT41a0LlV3AAFCAZwCpg4vmGkq8t34+cUhp3cnM4XDiU/7xlgK7HGrg==
+
 punycode@^1.3.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
@@ -4502,6 +4969,45 @@ relay-runtime@12.0.0:
     fbjs "^3.0.0"
     invariant "^2.2.4"
 
+remark-html@^15.0.2:
+  version "15.0.2"
+  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-15.0.2.tgz#44ff77c876f037658b406662b5ce15e26ed34d80"
+  integrity sha512-/CIOI7wzHJzsh48AiuIyIe1clxVkUtreul73zcCXLub0FmnevQE0UMFDQm7NUx8/3rl/4zCshlMfqBdWScQthw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    hast-util-sanitize "^4.0.0"
+    hast-util-to-html "^8.0.0"
+    mdast-util-to-hast "^12.0.0"
+    unified "^10.0.0"
+
+remark-parse@^10.0.0:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.2.tgz#ca241fde8751c2158933f031a4e3efbaeb8bc262"
+  integrity sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-from-markdown "^1.0.0"
+    unified "^10.0.0"
+
+remark-stringify@^10.0.0:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-10.0.3.tgz#83b43f2445c4ffbb35b606f967d121b2b6d69717"
+  integrity sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.0.0"
+    unified "^10.0.0"
+
+remark@^14.0.3:
+  version "14.0.3"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-14.0.3.tgz#e477886a7579df612908f387c7753dc93cdaa3fc"
+  integrity sha512-bfmJW1dmR2LvaMJuAnE88pZP9DktIFYXazkTfOIKZzi3Knk9lT0roItIA24ydOucI3bV/g/tXBA6hzqq3FV9Ew==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    remark-parse "^10.0.0"
+    remark-stringify "^10.0.0"
+    unified "^10.0.0"
+
 remedial@^1.0.7:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/remedial/-/remedial-1.0.8.tgz#a5e4fd52a0e4956adbaf62da63a5a46a78c578a0"
@@ -4616,6 +5122,13 @@ rxjs@^7.5.5:
   dependencies:
     tslib "^2.1.0"
 
+sade@^1.7.3:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
+  dependencies:
+    mri "^1.1.0"
+
 safe-array-concat@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz"
@@ -4770,6 +5283,11 @@ space-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
+space-separated-tokens@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
+  integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
+
 sponge-case@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sponge-case/-/sponge-case-1.0.1.tgz#260833b86453883d974f84854cdb63aecc5aef4c"
@@ -4844,6 +5362,14 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+stringify-entities@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-4.0.3.tgz#cfabd7039d22ad30f3cc435b0ca2c1574fc88ef8"
+  integrity sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==
+  dependencies:
+    character-entities-html4 "^2.0.0"
+    character-entities-legacy "^3.0.0"
+
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
@@ -5023,6 +5549,16 @@ tr46@~0.0.3:
   resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+trim-lines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
+  integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
+
+trough@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-2.1.0.tgz#0f7b511a4fde65a46f18477ab38849b22c554876"
+  integrity sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==
+
 ts-interface-checker@^0.1.9:
   version "0.1.13"
   resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
@@ -5158,6 +5694,62 @@ unc-path-regex@^0.1.2:
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
   integrity sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==
 
+unified@^10.0.0:
+  version "10.1.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
+  integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    bail "^2.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^4.0.0"
+    trough "^2.0.0"
+    vfile "^5.0.0"
+
+unist-util-generated@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.1.tgz#e37c50af35d3ed185ac6ceacb6ca0afb28a85cae"
+  integrity sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==
+
+unist-util-is@^5.0.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
+  integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-position@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-4.0.4.tgz#93f6d8c7d6b373d9b825844645877c127455f037"
+  integrity sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-stringify-position@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz#03ad3348210c2d930772d64b489580c13a7db39d"
+  integrity sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+
+unist-util-visit-parents@^5.1.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
+  integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
+unist-util-visit@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
+  integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.1.1"
+
 unixify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unixify/-/unixify-1.0.0.tgz#3a641c8c2ffbce4da683a5c70f03a462940c2090"
@@ -5209,11 +5801,6 @@ urlpattern-polyfill@^9.0.0:
   resolved "https://registry.yarnpkg.com/urlpattern-polyfill/-/urlpattern-polyfill-9.0.0.tgz#bc7e386bb12fd7898b58d1509df21d3c29ab3460"
   integrity sha512-WHN8KDQblxd32odxeIgo83rdVDE2bvdkb86it7bMhYZwWKJz0+O0RK/eZiHYnM+zgt/U7hAHOlCQGfjjvSkw2g==
 
-use-sync-external-store@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -5224,11 +5811,47 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uvu@^0.5.0:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
+  dependencies:
+    dequal "^2.0.0"
+    diff "^5.0.0"
+    kleur "^4.0.3"
+    sade "^1.7.3"
+
 value-or-promise@^1.0.11, value-or-promise@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/value-or-promise/-/value-or-promise-1.0.12.tgz#0e5abfeec70148c78460a849f6b003ea7986f15c"
   integrity sha512-Z6Uz+TYwEqE7ZN50gwn+1LCVo9ZVrpxRPOhOLnncYkY1ZzOYtrX8Fwf/rFktZ8R5mJms6EZf5TqNOMeZmnPq9Q==
 
+vfile-location@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-4.1.0.tgz#69df82fb9ef0a38d0d02b90dd84620e120050dd0"
+  integrity sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    vfile "^5.0.0"
+
+vfile-message@^3.0.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"
+  integrity sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+
+vfile@^5.0.0:
+  version "5.3.7"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.7.tgz#de0677e6683e3380fafc46544cfe603118826ab7"
+  integrity sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^3.0.0"
+    vfile-message "^3.0.0"
+
 watchpack@2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz"
@@ -5244,6 +5867,11 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-namespaces@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
+  integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
+
 web-streams-polyfill@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
@@ -5434,3 +6062,8 @@ zod@3.21.4:
   version "3.21.4"
   resolved "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz"
   integrity sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==
+
+zwitch@^2.0.0, zwitch@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"
+  integrity sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==