feat(docs): Update markprompt (#8079)

Co-authored-by: Harshal Sheth <hsheth2@gmail.com>
2025-12-30 03:18:24 +00:00 · 2023-05-19 22:12:43 -05:00 · 2023-05-19 22:12:43 -05:00 · 55ec223bad
commit 55ec223bad
parent e6371c8e94
4 changed files with 1247 additions and 205 deletions
--- a/docs-website/package.json
+++ b/docs-website/package.json
@ -26,19 +26,19 @@
    "@docusaurus/plugin-content-docs": "^2.1.0",
    "@docusaurus/plugin-ideal-image": "^2.1.0",
    "@docusaurus/preset-classic": "^2.1.0",
+    "@markprompt/react": "^0.3.5",
    "@octokit/plugin-retry": "^3.0.9",
    "@octokit/plugin-throttling": "^3.5.1",
    "@octokit/rest": "^18.6.2",
+    "@radix-ui/react-visually-hidden": "^1.0.2",
    "antd": "^5.0.7",
    "clsx": "^1.1.1",
    "docusaurus-graphql-plugin": "0.5.0",
    "docusaurus-plugin-sass": "^0.2.1",
    "dotenv": "^16.0.1",
    "markprompt": "^0.1.7",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-modal": "^3.16.1",
-    "react-modal-hook": "^3.0.2",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0",
    "sass": "^1.43.2"
  },
  "browserslist": {
--- a/docs-website/src/components/MarkpromptHelp/index.jsx
+++ b/docs-website/src/components/MarkpromptHelp/index.jsx
@ -1,10 +1,212 @@
-import React from "react";
+import React, { useContext, useEffect, useState } from "react";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { Markprompt } from "markprompt";
-import clsx from "clsx";
+import { usePluginData } from "@docusaurus/useGlobalData";
 import styles from "./markprompthelp.module.scss";
-import { ModalProvider, useModal } from "react-modal-hook";
-import Modal from "react-modal";
+import * as Markprompt from "@markprompt/react";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+
+import { LikeOutlined, DislikeOutlined } from "@ant-design/icons";
+
+const MarkpromptHelp = () => {
+  const context = useDocusaurusContext();
+  const { siteConfig = {} } = context;
+
+  return (
+    <Markprompt.Root projectKey={siteConfig.customFields.markpromptProjectKey} model="gpt-4">
+      <Markprompt.Trigger aria-label="Open Markprompt" className={styles.MarkpromptButton}>
+        <BotIcon /> Ask our AI
+      </Markprompt.Trigger>
+      <Markprompt.Portal>
+        <Markprompt.Overlay className={styles.MarkpromptOverlay} />
+        <Markprompt.Content className={styles.MarkpromptContent}>
+          <Markprompt.Close className={styles.MarkpromptClose}>
+            <CloseIcon />
+          </Markprompt.Close>
+          {/* Markprompt.Title is required for accessibility reasons. It can be hidden using an accessible content hiding technique. */}
+          <VisuallyHidden asChild>
+            <Markprompt.Title>Ask me anything about DataHub!</Markprompt.Title>
+          </VisuallyHidden>
+          <Markprompt.Form>
+            <SearchIcon className={styles.MarkpromptSearchIcon} />
+            <Markprompt.Prompt placeholder="Ask me anything about DataHub!" className={styles.MarkpromptPrompt} />
+          </Markprompt.Form>
+          <Markprompt.AutoScroller className={styles.MarkpromptAnswer}>
+            <Caret />
+            <Markprompt.Answer />
+          </Markprompt.AutoScroller>
+          <References />
+          <div className={styles.MarkpromptDescription}>
+            This is an experimental AI-powered chat bot. We can't be sure what it will say but hope it can be helpful. If it's not, there are always{" "}
+            <a href="https://slack.datahubproject.io/" target="_blank">
+              humans available in our Slack channel.
+            </a>
+          </div>
+          <Feedback />
+        </Markprompt.Content>
+      </Markprompt.Portal>
+    </Markprompt.Root>
+  );
+};
+
+async function sendFeedback(data = {}) {
+  const response = await fetch("https://hlmqfkovdugtwoddrtkt.supabase.co/rest/v1/queries", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Prefer: "return=minimal",
+      apikey:
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhsbXFma292ZHVndHdvZGRydGt0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODI5NzQwMjQsImV4cCI6MTk5ODU1MDAyNH0.wNggN7IK43j6KhJmFlELo8HmkTBIQwWt-Rx8vOYXBI8",
+    },
+    redirect: "follow",
+    referrerPolicy: "no-referrer",
+    body: JSON.stringify(data),
+  });
+  return response;
+}
+
+const Feedback = () => {
+  const { state, prompt } = useContext(Markprompt.Context);
+  const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);
+
+  useEffect(() => {
+    setFeedbackSubmitted(false);
+    if (state === "preload") {
+      sendFeedback({
+        query: prompt,
+      }).then((response) => {
+        console.log(response.ok ? "Logged query" : "Error logging query");
+      });
+    }
+  }, [state]);
+
+  const handleClick = (rating) => {
+    sendFeedback({
+      query: prompt,
+      result_rating: rating,
+    }).then((response) => {
+      setFeedbackSubmitted(true);
+      console.log(response.ok ? "Logged feedback" : "Error logging feedback");
+    });
+  };
+
+  return (
+    <div className={styles.feedback} data-loading-state={state}>
+      {feedbackSubmitted ? (
+        <>Thanks for your feedback!</>
+      ) : (
+        <>
+          Was this answer helpful?{" "}
+          <div className={styles.feedbackButtons}>
+            <button onClick={() => handleClick("positive")}>
+              <LikeOutlined />
+            </button>
+            <button>
+              <DislikeOutlined onClick={() => handleClick("negative")} />
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+const Caret = () => {
+  const { answer } = useContext(Markprompt.Context);
+
+  if (answer) {
+    return null;
+  }
+
+  return <span className={styles.caret} />;
+};
+
+const getReferenceInfo = (referenceId) => {
+  const contentDocsData = usePluginData("docusaurus-plugin-content-docs");
+  const docs = contentDocsData.versions?.[0]?.docs;
+
+  const lastDotIndex = referenceId.lastIndexOf(".");
+  if (lastDotIndex !== -1) {
+    referenceId = referenceId.substring(0, lastDotIndex);
+  }
+  const docItem = docs?.find((doc) => doc.id === referenceId);
+
+  const url = docItem?.path;
+  const title = url?.replace("/docs/generated/", "")?.replace("/docs/", "");
+
+  return { url, title };
+};
+
+const Reference = ({ referenceId, index }) => {
+  const { title, url } = getReferenceInfo(referenceId);
+
+  if (!url) return null;
+
+  return (
+    <li
+      key={referenceId}
+      className={styles.reference}
+      style={{
+        animationDelay: `${100 * index}ms`,
+      }}
+    >
+      <a href={url} target="_blank">
+        {title || url}
+      </a>
+    </li>
+  );
+};
+
+const References = () => {
+  const { state, references } = useContext(Markprompt.Context);
+
+  if (state === "indeterminate") return null;
+
+  let adjustedState = state;
+  if (state === "done" && references.length === 0) {
+    adjustedState = "indeterminate";
+  }
+
+  return (
+    <div data-loading-state={adjustedState} className={styles.references}>
+      <div className={styles.progress} />
+      <p>Fetching relevant pages…</p>
+      <p>Answer generated from the following sources:</p>
+      <Markprompt.References RootElement="ul" ReferenceElement={Reference} />
+    </div>
+  );
+};
+
+const SearchIcon = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="11" cy="11" r="8"></circle>
+    <line x1="21" x2="16.65" y1="21" y2="16.65"></line>
+  </svg>
+);
+
+const CloseIcon = ({ className }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="18" x2="6" y1="6" y2="18"></line>
+    <line x1="6" x2="18" y1="6" y2="18"></line>
+  </svg>
+);

 const BotIcon = ({ ...props }) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 79.164" {...props}>
@ -12,42 +214,4 @@ const BotIcon = ({ ...props }) => (
  </svg>
 );

-const MarkpromptModal = () => {
-  const context = useDocusaurusContext();
-  const { siteConfig = {} } = context;
-
-  const [showModal, hideModal] = useModal(() => (
-    <Modal isOpen onRequestClose={hideModal} className={clsx(styles.markpromptModal, "shadow--tl")} ariaHideApp={false}>
-      <>
-        <div className={clsx(styles.markprompt)}>
-          <BotIcon />
-          <Markprompt placeholder="Ask me anything about DataHub!" projectKey={siteConfig.customFields.markpromptProjectKey} />
-        </div>
-        <hr />
-        <p>
-          This is an experimental AI-powered chat bot. We can't be sure what it will say but hope it can be helpful. If it's not, there are always{" "}
-          <a href="https://slack.datahubproject.io/" target="_blank">
-            humans available in our Slack channel
-          </a>
-          .
-        </p>
-      </>
-    </Modal>
-  ));
-
-  return (
-    <div>
-      <button className={clsx(styles.markpromptButton, "button button--primary shadow--tl")} onClick={showModal}>
-        <BotIcon />
-      </button>
-    </div>
-  );
-};
-
-const MarkpromptHelp = () => (
-  <ModalProvider>
-    <MarkpromptModal />
-  </ModalProvider>
-);
-
 export default MarkpromptHelp;
--- a/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss
+++ b/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss
@ -1,141 +1,805 @@
-.markpromptButton {
+/* style.css */
+
+:root {
+  --markprompt-background: #ffffff;
+  --markprompt-foreground: #171717;
+  --markprompt-muted: var(--ifm-background-surface-color);
+  --markprompt-mutedForeground: #737373;
+  --markprompt-border: #e5e5e5;
+  --markprompt-input: #ffffff;
+  --markprompt-primary: var(--ifm-color-primary);
+  --markprompt-primaryForeground: #ffffff;
+  --markprompt-secondary: #fafafa;
+  --markprompt-secondaryForeground: #171717;
+  --markprompt-primaryHighlight: var(--ifm-color-primary);
+  --markprompt-secondaryHighlight: var(--ifm-color-primary);
+  --markprompt-overlay: #00000010;
+  --markprompt-ring: var(--ifm-color-primary);
+  --markprompt-radius: 10px;
+  --markprompt-text-size: 1rem;
+  --markprompt-button-icon-size: 1rem;
+}
+
+html[data-theme="dark"] {
+  --markprompt-background: #050505;
+  --markprompt-foreground: #d4d4d4;
+  --markprompt-muted: #171717;
+  --markprompt-mutedForeground: #737373;
+  --markprompt-border: #262626;
+  --markprompt-input: #ffffff;
+  --markprompt-primaryForeground: #ffffff;
+  --markprompt-secondary: #0e0e0e;
+  --markprompt-secondaryForeground: #ffffff;
+  --markprompt-overlay: #00000040;
+  --markprompt-ring: #ffffff;
+}
+
+button {
+  all: unset;
+}
+
+.MarkpromptButton {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 99999px;
+  color: var(--markprompt-primaryForeground);
+  background-color: var(--markprompt-primary);
+  padding: 0.75rem 1.5rem 0.75rem 1rem;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
-  z-index: 1001;
-  width: 60px;
-  height: 60px;
-  padding: 0.75rem;
+  height: 30px;
+
+  transition-property: opacity;
+  transition-duration: 200ms;
  svg {
-    width: 100%;
+    width: 2rem;
    height: auto;
+    margin-right: 0.5rem;
    fill: currentColor;
  }
 }

-.markpromptModal {
-  border-radius: 6px;
+.MarkpromptButton:hover {
+  opacity: 0.8;
+}
+
+.MarkpromptIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.MarkpromptOverlay {
  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  background-color: var(--markprompt-overlay);
+}
+
+.MarkpromptContent {
+  background-color: var(--markprompt-muted);
+  border-radius: var(--markprompt-radius);
+  border: 1px solid var(--markprompt-border);
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
  left: 50%;
-  top: 0;
-  transform: translate(-50%, 0%);
-  background: var(--ifm-background-color);
-  z-index: 1003;
-  margin: 60px auto auto;
-  padding: 0;
-
-  width: 100%;
-  @media (min-width: 768px) {
-    max-width: 560px;
-  }
-  > p {
-    font-size: smaller;
-    padding: 1rem 1rem 0;
-  }
-
-  hr {
-    margin: 0;
-  }
+  transform: translate(-50%, -50%);
+  width: 80vw;
+  max-width: 600px;
+  height: calc(100vh - 200px);
+  max-height: 600px;
+  animation-name: contentShow;
+  animation-duration: 300ms;
+  animation-fill-mode: both;
+  transition-timing-function: cubic-bezier(0.25, 0.4, 0.55, 1.4);
+  color: var(--markprompt-foreground);
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto 1fr;
 }

-.markprompt {
-  padding: 1rem 1rem 0;
+.MarkpromptDescription {
+  padding: 1rem 2rem;
+  background: var(--markprompt-muted);
+  font-size: 0.875rem;
+}
+
+.feedback {
+  margin: 0 2rem;
+  font-size: 0.875rem;
  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  svg {
-    width: 4rem;
-    margin: 1rem auto;
-    height: auto;
-    fill: var(--ifm-color-primary);
-  }
-  input {
-    height: var(--docsearch-searchbox-height);
-    margin: 0;
-    padding: 0 var(--docsearch-spacing);
-    position: relative;
-    width: 100%;
-    border: none;
-    background: var(--docsearch-searchbox-focus-background);
-    border-radius: 4px;
-    box-shadow: var(--docsearch-searchbox-shadow);
-    color: var(--docsearch-text-color);
-    font-size: 1.2em;
-    outline: none;
-  }
+  align-items: center;
+  justify-content: space-between;
+  font-weight: bold;
+  overflow: hidden;
+  height: 0;
+  opacity: 0;
+  padding: 0;
+  transition: all 0.2s ease-in-out;
 }

-:global {
-  .ReactModal__Overlay {
-    z-index: 1002;
-    background: rgba(111, 111, 111, 0.7) !important;
+.feedback[data-loading-state="done"] {
+  padding: 1rem 0;
+  border-top: 1px solid var(--markprompt-border);
+  height: 70px;
+  opacity: 1;
+}

-    [data-theme="dark"] & {
-      background: rgba(71, 71, 71, 0.7) !important;
+.feedbackButtons {
+  display: flex;
+  gap: 1rem;
+  button {
+    width: 2rem;
+    height: 2rem;
+    text-align: center;
+    font-size: 1.25rem;
+    padding: 0.25rem;
+    border-radius: 1000em;
+    background: var(--markprompt-background);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    svg {
+      fill: var(--markprompt-primary);
    }
-  }
-  .caret {
-    & :local {
-      animation: caret 0.75s infinite;
-    }
-    display: inline-block;
-    width: 8px;
-    height: 16px;
-    background: var(--ifm-color-primary);
-    margin-top: 1rem;
-  }

-  .overflow-y-auto {
-    overflow-y: auto;
-    max-height: calc(100vh - 350px);
-  }
-  .prompt-answer {
-    padding: 0.5rem 0;
-
-    .caret {
-      margin-top: 0;
-    }
-    &.prompt-answer-done {
-      .caret {
-        display: none;
-      }
-    }
-    &.prompt-answer-loading {
-      padding: 0.5rem 0;
-      .caret:not(:last-child),
-      code .caret {
-        display: none !important;
-      }
-      :last-child.caret {
-        display: inline-block;
-      }
-    }
-    + div > div {
-      font-size: 12px;
-      font-weight: bold;
-      &:not(empty) {
-        border-top: 1px solid var(--ifm-hr-background-color);
-        padding: 1rem 0;
-      }
-
-      > div > div {
-        font-weight: normal;
-        display: inline-block;
-        padding: 0.25em 0.5em;
-        margin: 0.5em 0.5em 0 0;
-        border: 1px solid var(--ifm-hr-background-color);
-        border-radius: 4px;
+    &:hover {
+      background: var(--markprompt-primary);
+      svg {
+        fill: var(--markprompt-background);
      }
    }
  }
 }

-@keyframes caret {
+.MarkpromptBotIcon {
+  width: 4rem;
+  margin: 1rem auto;
+  height: auto;
+  fill: var(--ifm-color-primary);
+}
+
+.MarkpromptClose {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  color: var(--markprompt-foreground);
+  width: var(--markprompt-button-icon-size);
+  height: var(--markprompt-button-icon-size);
+  padding: 0.25rem;
+  border-radius: 4px;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.MarkpromptClose:hover {
+  opacity: 0.8;
+}
+
+.MarkpromptClose:focus {
+  box-shadow: inset 0 0 0 2px var(--markprompt-primary);
+}
+
+.MarkpromptSearchIcon {
+  position: absolute;
+  top: 1rem;
+  left: 1.25rem;
+  color: var(--markprompt-foreground);
+  width: var(--markprompt-button-icon-size);
+  height: var(--markprompt-button-icon-size);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+}
+
+.MarkpromptTitle {
+  margin-block-start: 0;
+}
+
+.MarkpromptPrompt {
+  border-left: none !important;
+  border-right: none !important;
+  border-top: none !important;
+  outline: none !important;
+  border-bottom: 1px solid var(--markprompt-border);
+  box-shadow: none;
+  width: 100%;
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  font-size: var(--markprompt-text-size);
+  background-color: var(--markprompt-background);
+  color: var(--markprompt-foreground);
+  caret-color: var(--markprompt-primary);
+}
+
+.MarkpromptPrompt:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.MarkpromptPrompt::placeholder {
+  color: var(--markprompt-mutedForeground);
+}
+
+.MarkpromptPrompt:focus {
+  outline: 2px solid var(--markprompt-mutedForeground);
+}
+
+.MarkpromptReferences {
+  background-color: var(--markprompt-muted);
+  color: var(--markprompt-mutedForeground);
+  border-top: 1px solid var(--markprompt-border);
+}
+
+.MarkpromptAnswer {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  padding: 1rem 2rem;
+  scroll-behavior: smooth;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  font-size: var(--markprompt-text-size);
+  background-color: var(--markprompt-background);
+}
+.MarkpromptAnswer::-webkit-scrollbar {
+  display: none;
+}
+.MarkpromptAnswer :not(:last-child) .caret {
+  display: none;
+}
+.MarkpromptAnswer {
+  color: var(--markprompt-foreground);
+  font-size: 0.875rem;
+  line-height: 1.7142857;
+}
+.MarkpromptAnswer p {
+  margin-top: 1.1428571em;
+  margin-bottom: 1.1428571em;
+}
+.MarkpromptAnswer a {
+  color: var(--markprompt-primary);
+  text-decoration: underline;
+  font-weight: 500;
+}
+.MarkpromptAnswer strong {
+  font-weight: 600;
+}
+.MarkpromptAnswer a strong {
+  color: inherit;
+}
+.MarkpromptAnswer blockquote strong {
+  color: inherit;
+}
+.MarkpromptAnswer thead th strong {
+  color: inherit;
+}
+.MarkpromptAnswer ol {
+  list-style-type: decimal;
+  margin-top: 1.1428571em;
+  margin-bottom: 1.1428571em;
+  padding-left: 1.5714286em;
+}
+.MarkpromptAnswer ol[type="A"] {
+  list-style-type: upper-alpha;
+}
+.MarkpromptAnswer ol[type="a"] {
+  list-style-type: lower-alpha;
+}
+.MarkpromptAnswer ol[type="A" s] {
+  list-style-type: upper-alpha;
+}
+.MarkpromptAnswer ol[type="a" s] {
+  list-style-type: lower-alpha;
+}
+.MarkpromptAnswer ol[type="I"] {
+  list-style-type: upper-roman;
+}
+.MarkpromptAnswer ol[type="i"] {
+  list-style-type: lower-roman;
+}
+.MarkpromptAnswer ol[type="I" s] {
+  list-style-type: upper-roman;
+}
+.MarkpromptAnswer ol[type="i" s] {
+  list-style-type: lower-roman;
+}
+.MarkpromptAnswer ol[type="1"] {
+  list-style-type: decimal;
+}
+.MarkpromptAnswer ul {
+  list-style-type: disc;
+  margin-top: 1.1428571em;
+  margin-bottom: 1.1428571em;
+  padding-left: 1.5714286em;
+}
+.MarkpromptAnswer ol > li::marker {
+  font-weight: 400;
+  color: var(--markprompt-foreground);
+}
+.MarkpromptAnswer ul > li::marker {
+  color: var(--markprompt-mutedForeground);
+}
+.MarkpromptAnswer hr {
+  border-color: var(--markprompt-border);
+  border-top-width: 1;
+  margin-top: 2.8571429em;
+  margin-bottom: 2.8571429em;
+}
+.MarkpromptAnswer blockquote {
+  font-weight: 500;
+  font-style: italic;
+  color: var(--markprompt-foreground);
+  border-left-width: 0.25rem;
+  border-left-color: var(--markprompt-border);
+  quotes: "\201C""\201D""\2018""\2019";
+  margin-top: 1.3333333em;
+  margin-bottom: 1.3333333em;
+  padding-left: 1.1111111em;
+}
+.MarkpromptAnswer blockquote p:first-of-type::before {
+  content: open-quote;
+}
+.MarkpromptAnswer blockquote p:last-of-type::after {
+  content: close-quote;
+}
+.MarkpromptAnswer h1 {
+  color: var(--markprompt-foreground);
+  font-weight: 800;
+  font-size: 2.1428571em;
+  margin-top: 0;
+  margin-bottom: 0.8em;
+  line-height: 1.2;
+}
+.MarkpromptAnswer h1 strong {
+  font-weight: 900;
+  color: inherit;
+}
+.MarkpromptAnswer h2 {
+  color: var(--markprompt-foreground);
+  font-weight: 700;
+  font-size: 1.4285714em;
+  margin-top: 1.6em;
+  margin-bottom: 0.8em;
+  line-height: 1.4;
+}
+.MarkpromptAnswer h2 strong {
+  font-weight: 800;
+  color: inherit;
+}
+.MarkpromptAnswer h3 {
+  color: var(--markprompt-foreground);
+  font-weight: 600;
+  font-size: 1.2857143em;
+  margin-top: 1.5555556em;
+  margin-bottom: 0.4444444em;
+  line-height: 1.5555556;
+}
+.MarkpromptAnswer h3 strong {
+  font-weight: 700;
+  color: inherit;
+}
+.MarkpromptAnswer h4 {
+  color: var(--markprompt-foreground);
+  font-weight: 600;
+  margin-top: 1.4285714em;
+  margin-bottom: 0.5714286em;
+  line-height: 1.4285714;
+}
+.MarkpromptAnswer h4 strong {
+  font-weight: 700;
+  color: inherit;
+}
+.MarkpromptAnswer img {
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+}
+.MarkpromptAnswer figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.MarkpromptAnswer figcaption {
+  color: var(--markprompt-mutedForeground);
+  font-size: 0.8571429em;
+  line-height: 1.3333333;
+  margin-top: 0.6666667em;
+}
+.MarkpromptAnswer code {
+  color: var(--markprompt-foreground);
+  font-weight: 600;
+  font-size: 0.8571429em;
+}
+.MarkpromptAnswer code::before {
+  content: "`";
+}
+.MarkpromptAnswer code::after {
+  content: "`";
+}
+.MarkpromptAnswer a code {
+  color: inherit;
+}
+.MarkpromptAnswer h1 code {
+  color: inherit;
+}
+.MarkpromptAnswer h2 code {
+  color: inherit;
+  font-size: 0.9em;
+}
+.MarkpromptAnswer h3 code {
+  color: inherit;
+  font-size: 0.8888889em;
+}
+.MarkpromptAnswer h4 code {
+  color: inherit;
+}
+.MarkpromptAnswer blockquote code {
+  color: inherit;
+}
+.MarkpromptAnswer thead th code {
+  color: inherit;
+}
+.MarkpromptAnswer pre {
+  color: var(--markprompt-foreground);
+  background-color: var(--markprompt-muted);
+  border: 1px solid var(--markprompt-border);
+  overflow-x: auto;
+  font-weight: 400;
+  font-size: 0.8571429em;
+  line-height: 1.6666667;
+  margin-top: 1.6666667em;
+  margin-bottom: 1.6666667em;
+  border-radius: 0.25rem;
+  padding-top: 0.6666667em;
+  padding-right: 1em;
+  padding-bottom: 0.6666667em;
+  padding-left: 1em;
+}
+.MarkpromptAnswer pre code {
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+.MarkpromptAnswer pre code::before {
+  content: none;
+}
+.MarkpromptAnswer pre code::after {
+  content: none;
+}
+.MarkpromptAnswer table {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.8571429em;
+  line-height: 1.5;
+}
+.MarkpromptAnswer thead {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--markprompt-border);
+}
+.MarkpromptAnswer thead th {
+  color: var(--markprompt-foreground);
+  font-weight: 600;
+  vertical-align: bottom;
+  padding-right: 1em;
+  padding-bottom: 0.6666667em;
+  padding-left: 1em;
+}
+.MarkpromptAnswer tbody tr {
+  border-bottom-width: 1px;
+  border-bottom-color: var(--markprompt-border);
+}
+.MarkpromptAnswer tbody tr:last-child {
+  border-bottom-width: 0;
+}
+.MarkpromptAnswer tbody td {
+  vertical-align: baseline;
+}
+.MarkpromptAnswer tfoot {
+  border-top-width: 1px;
+  border-top-color: var(--markprompt-border);
+}
+.MarkpromptAnswer tfoot td {
+  vertical-align: top;
+}
+.MarkpromptAnswer video {
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+}
+.MarkpromptAnswer figure {
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+}
+.MarkpromptAnswer li {
+  margin-top: 0.2857143em;
+  margin-bottom: 0.2857143em;
+}
+.MarkpromptAnswer ol > li {
+  padding-left: 0.4285714em;
+}
+.MarkpromptAnswer ul > li {
+  padding-left: 0.4285714em;
+}
+.MarkpromptAnswer > ul > li p {
+  margin-top: 0.5714286em;
+  margin-bottom: 0.5714286em;
+}
+.MarkpromptAnswer > ul > li > *:first-child {
+  margin-top: 1.1428571em;
+}
+.MarkpromptAnswer > ul > li > *:last-child {
+  margin-bottom: 1.1428571em;
+}
+.MarkpromptAnswer > ol > li > *:first-child {
+  margin-top: 1.1428571em;
+}
+.MarkpromptAnswer > ol > li > *:last-child {
+  margin-bottom: 1.1428571em;
+}
+.MarkpromptAnswer ul ul,
+.MarkpromptAnswer ul ol,
+.MarkpromptAnswer ol ul,
+.MarkpromptAnswer ol ol {
+  margin-top: 0.5714286em;
+  margin-bottom: 0.5714286em;
+}
+.MarkpromptAnswer hr + * {
+  margin-top: 0;
+}
+.MarkpromptAnswer h2 + * {
+  margin-top: 0;
+}
+.MarkpromptAnswer h3 + * {
+  margin-top: 0;
+}
+.MarkpromptAnswer h4 + * {
+  margin-top: 0;
+}
+.MarkpromptAnswer thead th:first-child {
+  padding-left: 0;
+}
+.MarkpromptAnswer thead th:last-child {
+  padding-right: 0;
+}
+.MarkpromptAnswer tbody td,
+.MarkpromptAnswer tfoot td {
+  padding-top: 0.6666667em;
+  padding-right: 1em;
+  padding-bottom: 0.6666667em;
+  padding-left: 1em;
+}
+.MarkpromptAnswer tbody td:first-child,
+.MarkpromptAnswer tfoot td:first-child {
+  padding-left: 0;
+}
+.MarkpromptAnswer tbody td:last-child,
+.MarkpromptAnswer tfoot td:last-child {
+  padding-right: 0;
+}
+
+.caret {
+  display: none;
+  height: 1rem;
+  width: 0.5rem;
+  margin-left: 0.2rem;
+  transform: translate(2px, 2px);
+  border-radius: 1px;
+  background-color: var(--markprompt-primary);
+  box-shadow: 0 0 3px 0 var(--markprompt-primary);
+  animation-name: blink;
+  animation-duration: 1000ms;
+  animation-fill-mode: both;
+  animation-iteration-count: infinite;
+  transition-timing-function: cubic-bezier(0.14, 0, 0.16, 1);
+}
+
+[data-loading-state="preload"] .caret {
+  display: inline-block;
+}
+
+[data-loading-state]:not([data-loading-state="done"]) .caret {
+  display: none;
+}
+
+[data-loading-state="preload"] .progress {
+  position: absolute;
+  top: -2px;
+  left: 0;
+  height: 2px;
+  background-image: linear-gradient(to right, var(--markprompt-primaryHighlight), var(--markprompt-secondaryHighlight));
+  animation-name: progress;
+  animation-duration: 2s;
+  animation-fill-mode: none;
+  animation-iteration-count: infinite;
+  transition-timing-function: cubic-bezier(0.14, 0, 0.16, 1);
+  transition: opacity 200ms ease;
+}
+[data-loading-state="preload"] .progress {
+  opacity: 1;
+}
+[data-loading-state]:not([data-loading-state="preload"]) .progress {
+  opacity: 0;
+}
+
+.references {
+  position: "relative";
+  padding-top: 1rem;
+  padding-bottom: 0.5rem;
+  background-color: var(--markprompt-muted);
+  border-top: 1px solid var(--markprompt-border);
+  font-size: 0.75rem;
+  transition: height 500ms ease;
+  transform: translateY(100%);
+  opacity: 0;
+  animation: popup 200ms ease-out forwards;
+  width: 100%;
+  box-sizing: border-box;
+}
+.references[data-loading-state="preload"] {
+  height: 50px;
+}
+.references[data-loading-state="streaming-answer"],
+.references[data-loading-state="done"] {
+  height: 95px;
+}
+.references[data-loading-state="indeterminate"] {
+  display: none;
+  height: 0;
+}
+
+.references p {
+  transition: opacity 500ms ease;
+  position: absolute;
+  top: 1rem;
+  left: 2rem;
+  right: 2rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.references[data-loading-state="preload"] > p:first-of-type {
+  opacity: 1;
+}
+.references[data-loading-state="preload"] > p:last-of-type {
+  opacity: 0;
+}
+[data-loading-state]:not([data-loading-state="preload"]) > p:first-of-type {
+  opacity: 0 !important;
+}
+[data-loading-state]:not([data-loading-state="preload"]) > p:last-of-type {
+  opacity: 1;
+}
+
+.references ul {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.5rem;
+  list-style-type: none;
+  margin-top: 2.25rem;
+  padding-left: 2rem;
+  padding-bottom: 2rem;
+  overflow-x: auto;
+  min-width: 100%;
+  width: 0;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.references ul::-webkit-scrollbar {
+  display: none;
+}
+
+.reference {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  animation-name: slide-up;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  transition-timing-function: ease-in-out;
+}
+
+.reference a {
+  display: inline-block;
+  text-decoration: none;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--markprompt-border);
+  border-radius: 0.375rem;
+  color: var(--markprompt-primary);
+  font-weight: 500;
+  transition-property: opacity;
+  transition-duration: 200ms;
+  white-space: nowrap;
+}
+
+.reference a:hover {
+  opacity: 0.8;
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -46%) scale(0.98);
+  }
+  50% {
+    transform: translate(-50%, -51%) scale(1.02);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
  0% {
    opacity: 1;
  }
-
-  to {
+  100% {
    opacity: 0;
  }
 }
+
+@keyframes popup {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes progress {
+  0% {
+    width: 0;
+    transform: translateX(0);
+  }
+  50% {
+    width: 100%;
+    transform: translateX(0);
+  }
+  100% {
+    width: 100%;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
--- a/docs-website/yarn.lock
+++ b/docs-website/yarn.lock
@ -1227,6 +1227,13 @@
  dependencies:
    regenerator-runtime "^0.13.11"

+"@babel/runtime@^7.13.10":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
+  integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.12.7", "@babel/template@^7.18.10", "@babel/template@^7.20.7":
  version "7.20.7"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@ -2165,6 +2172,21 @@
  resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
  integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==

+"@markprompt/core@^0.4.5":
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/@markprompt/core/-/core-0.4.5.tgz#356b7ad57a893b52076efe073db182a2d94e7fa9"
+  integrity sha512-HIHzD63KoisI5W7EYlz3b5uukjDBaxV9kIiqCXgPSw5aJnjLOazT2iFAI+bF2UX4xWFu2sE3RSg/JOjKdv15Dw==
+
+"@markprompt/react@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@markprompt/react/-/react-0.3.5.tgz#0437d7b0cf2c152cfdbe81d95cfbba14f3bd6d1e"
+  integrity sha512-aGSi30jcje7+5UzZ2sceUE66+AjHQDtDA3eY13A7b/2PL9yqKtcNe3nYS1cusM0qHoGMUUKNzMjEx/mRYp1AGw==
+  dependencies:
+    "@markprompt/core" "^0.4.5"
+    "@radix-ui/react-dialog" "^1.0.3"
+    react-markdown "^8.0.7"
+    remark-gfm "^3.0.1"
+
 "@mdx-js/mdx@^1.6.22":
  version "1.6.22"
  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@ -2348,6 +2370,156 @@
  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==

+"@radix-ui/primitive@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dialog@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.3.tgz#a715bf30f35fcd80476c0a07fcc073c1968e6d3e"
+  integrity sha512-owNhq36kNPqC2/a+zJRioPg6HHnTn5B/sh/NjTY8r4W9g1L5VJlrzZIVcBr7R9Mg8iLjVmh6MGgMlfoVf/WO/A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-dismissable-layer" "1.0.3"
+    "@radix-ui/react-focus-guards" "1.0.0"
+    "@radix-ui/react-focus-scope" "1.0.2"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-portal" "1.0.2"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-slot" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-dismissable-layer@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.3.tgz#63844d8e6bbcd010a513e7176d051c3c4044e09e"
+  integrity sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-escape-keydown" "1.0.2"
+
+"@radix-ui/react-focus-guards@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
+  integrity sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.2.tgz#5fe129cbdb5986d0a3ae16d14c473c243fe3bc79"
+  integrity sha512-spwXlNTfeIprt+kaEWE/qYuYT3ZAqJiAGjN/JgdvgVDTu8yc+HuX+WOWXrKliKnLnwck0F6JDkqIERncnih+4A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-id@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
+  integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
+"@radix-ui/react-portal@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.2.tgz#102370b1027a767a371cab0243be4bc664f72330"
+  integrity sha512-swu32idoCW7KA2VEiUZGBSu9nB6qwGdV6k6HYhUoOo3M1FFpD+VgLzUqtt3mwL1ssz7r2x8MggpLSQach2Xy/Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.2"
+
+"@radix-ui/react-presence@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
+  integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
+"@radix-ui/react-primitive@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz#54e22f49ca59ba88d8143090276d50b93f8a7053"
+  integrity sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
+"@radix-ui/react-slot@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
+  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-use-escape-keydown@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz#09ab6455ab240b4f0a61faf06d4e5132c4d639f6"
+  integrity sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-visually-hidden@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.2.tgz#29b117a59ef09a984bdad12cb98d81e8350be450"
+  integrity sha512-qirnJxtYn73HEk1rXL12/mXnu2rwsNHDID10th2JGtdK25T9wX+mxRmGt7iPSahw512GbZOc0syZX1nLQGoEOg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.2"
+
 "@rc-component/mini-decimal@^1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@rc-component/mini-decimal/-/mini-decimal-1.0.1.tgz#e5dbc20a6a5b0e234d279bc71ce730ab865d3910"
@ -3138,6 +3310,13 @@ argparse@^2.0.1:
  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==

+aria-hidden@^1.1.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 array-flatten@1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@ -4253,6 +4432,11 @@ detect-libc@^2.0.0, detect-libc@^2.0.1:
  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.1.tgz#e1897aa88fa6ad197862937fbc0441ef352ee0cd"
  integrity sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==

+detect-node-es@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
+
 detect-node@^2.0.4:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
@ -4623,11 +4807,6 @@ execa@^5.0.0:
    signal-exit "^3.0.3"
    strip-final-newline "^2.0.0"

-exenv@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
-  integrity sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==
-
 expand-template@^2.0.3:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
@ -4940,6 +5119,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
    has "^1.0.3"
    has-symbols "^1.0.1"

+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-own-enumerable-property-symbols@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@ -7415,7 +7599,7 @@ prompts@^2.4.2:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

-prop-types@^15.0.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@ -7424,6 +7608,15 @@ prop-types@^15.0.0, prop-types@^15.6.2, prop-types@^15.7.2:
    object-assign "^4.1.1"
    react-is "^16.8.1"

+prop-types@^15.6.2:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 property-information@^5.0.0, property-information@^5.3.0:
  version "5.6.0"
  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@ -7950,15 +8143,13 @@ react-dev-utils@^12.0.1:
    strip-ansi "^6.0.1"
    text-table "^0.2.0"

-react-dom@^16.12.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
  dependencies:
    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.0"

 react-error-overlay@^6.0.11:
  version "6.0.11"
@ -7981,7 +8172,7 @@ react-helmet-async@*, react-helmet-async@^1.3.0:
    react-fast-compare "^3.2.0"
    shallowequal "^1.1.0"

-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -8001,7 +8192,7 @@ react-json-view@^1.21.3:
    react-lifecycles-compat "^3.0.4"
    react-textarea-autosize "^8.3.2"

-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@ -8013,7 +8204,7 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
  dependencies:
    "@babel/runtime" "^7.10.3"

-react-markdown@^8.0.6:
+react-markdown@^8.0.6, react-markdown@^8.0.7:
  version "8.0.7"
  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
  integrity sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==
@ -8034,20 +8225,24 @@ react-markdown@^8.0.6:
    unist-util-visit "^4.0.0"
    vfile "^5.0.0"

-react-modal-hook@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/react-modal-hook/-/react-modal-hook-3.0.2.tgz#e52986da4fa3a678f26e51c7073f5be93de458e8"
-  integrity sha512-S28rdZzIbP940CtUAuVOKcOwscGi2/nQtcQlyudqB/bCkAGIUeDR0eRSKFcZzkYIwa/ux24wU7H77V5ngMgXtg==
-
-react-modal@^3.16.1:
-  version "3.16.1"
-  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.16.1.tgz#34018528fc206561b1a5467fc3beeaddafb39b2b"
-  integrity sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
  dependencies:
-    exenv "^1.2.0"
-    prop-types "^15.7.2"
-    react-lifecycles-compat "^3.0.0"
-    warning "^4.0.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"

 react-router-config@^5.1.1:
  version "5.1.1"
@ -8085,6 +8280,15 @@ react-router@5.3.3, react-router@^5.3.3:
    tiny-invariant "^1.0.2"
    tiny-warning "^1.0.0"

+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react-textarea-autosize@^8.3.2:
  version "8.4.0"
  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz#4d0244d6a50caa897806b8c44abc0540a69bfc8c"
@ -8104,14 +8308,12 @@ react-waypoint@^10.3.0:
    prop-types "^15.0.0"
    react-is "^17.0.1 || ^18.0.0"

-react@^16.12.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
  dependencies:
    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"

 readable-stream@^2.0.1:
  version "2.3.7"
@ -8481,13 +8683,12 @@ sax@^1.2.4:
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==

-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
  dependencies:
    loose-envify "^1.1.0"
-    object-assign "^4.1.1"

 schema-utils@2.7.0:
  version "2.7.0"
@ -9192,6 +9393,11 @@ ts-node@^9.1.1:
    source-map-support "^0.5.17"
    yn "3.1.1"

+tslib@^2.0.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.1.tgz#f2ad78c367857d54e49a0ef9def68737e1a67b21"
+  integrity sha512-KaI6gPil5m9vF7DKaoXxx1ia9fxS4qG5YveErRRVknPDXXriu5M8h48YRjB6h5ZUOKuAKlSJYb0GaDe8I39fRw==
+
 tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
@ -9513,6 +9719,13 @@ url-parse-lax@^3.0.0:
  dependencies:
    prepend-http "^2.0.0"

+use-callback-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
+  dependencies:
+    tslib "^2.0.0"
+
 use-composed-ref@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
@ -9530,6 +9743,14 @@ use-latest@^1.2.1:
  dependencies:
    use-isomorphic-layout-effect "^1.1.1"

+use-sidecar@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
+  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+  dependencies:
+    detect-node-es "^1.1.0"
+    tslib "^2.0.0"
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@ -9642,13 +9863,6 @@ wait-on@^6.0.1:
    minimist "^1.2.5"
    rxjs "^7.5.4"

-warning@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack@^2.4.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"