From 9f8fdf92e7e42acf84506df223d376fe046e23c1 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Mon, 17 Feb 2025 20:44:37 +0900
Subject: [PATCH 01/56] Swizzle component to add support dropdown menu

This component has been swizzled so that we can add a support dropdown menu.
---
 src/theme/DocItem/Layout/index.tsx         | 64 ++++++++++++++++++++++
 src/theme/DocItem/Layout/styles.module.css | 10 ++++
 2 files changed, 74 insertions(+)
 create mode 100644 src/theme/DocItem/Layout/index.tsx
 create mode 100644 src/theme/DocItem/Layout/styles.module.css

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
new file mode 100644
index 00000000..626e997c
--- /dev/null
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useWindowSize} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import ContentVisibility from '@theme/ContentVisibility';
+import type {Props} from '@theme/DocItem/Layout';
+
+import styles from './styles.module.css';
+
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const {frontMatter, toc} = useDoc();
+  const windowSize = useWindowSize();
+
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+
+export default function DocItemLayout({children}: Props): JSX.Element {
+  const docTOC = useDocTOC();
+  const {metadata} = useDoc();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        <ContentVisibility metadata={metadata} />
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  );
+}
diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
new file mode 100644
index 00000000..d5aaec13
--- /dev/null
+++ b/src/theme/DocItem/Layout/styles.module.css
@@ -0,0 +1,10 @@
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}

From b9e476ea763d9228dea1b60431699eafe3588dc3 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Fri, 21 Feb 2025 22:21:59 +0900
Subject: [PATCH 02/56] Add `@typebot.io/react`

---
 package-lock.json | 21 +++++++++++++++++++++
 package.json      |  3 ++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 65817f08..5406d177 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@fortawesome/react-fontawesome": "0.2.2",
         "@mdx-js/react": "^3.0.0",
         "@microsoft/clarity": "1.0.0",
+        "@typebot.io/react": "0.3.47",
         "clsx": "^2.0.0",
         "docusaurus-lunr-search": "^3.3.2",
         "docusaurus-plugin-image-zoom": "^2.0.0",
@@ -4065,6 +4066,26 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@typebot.io/js": {
+      "version": "0.3.46",
+      "resolved": "https://registry.npmjs.org/@typebot.io/js/-/js-0.3.46.tgz",
+      "integrity": "sha512-CMTLNyQCtVnJEeod+AB4Xp7X4tKOxxtk11hnPkWbV70KoVgGEPDIu+sN4vAOUw1ZmebXIbWVGC+0F3vOAX1/lA==",
+      "license": "FSL-1.1-ALv2"
+    },
+    "node_modules/@typebot.io/react": {
+      "version": "0.3.47",
+      "resolved": "https://registry.npmjs.org/@typebot.io/react/-/react-0.3.47.tgz",
+      "integrity": "sha512-JcOSWlpF96m3H3NWquDXz8ks8DvqB7iTGNuiWWRBPbxsQbRsrIZevO69MLCDfE8EuRDogCQhgKxCtDYuxjxceQ==",
+      "license": "FSL-1.1-ALv2",
+      "dependencies": {
+        "@typebot.io/js": "0.3.46",
+        "react": "18.2.0"
+      },
+      "peerDependencies": {
+        "@typebot.io/js": "0.3.22",
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
diff --git a/package.json b/package.json
index 23dcbe71..27182f00 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,8 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-cookie-consent": "9.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "@typebot.io/react": "0.3.47"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.2.0",

From 8dfeaa20523ff5fe173593e42b6e4c180d52f644 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Fri, 21 Feb 2025 22:22:55 +0900
Subject: [PATCH 03/56] Create AssistantModal.tsx

This is called when the user clicks the AI Assistant button in the Support dropdown menu.
---
 src/components/Support/AssistantModal.tsx | 58 +++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/Support/AssistantModal.tsx

diff --git a/src/components/Support/AssistantModal.tsx b/src/components/Support/AssistantModal.tsx
new file mode 100644
index 00000000..e988791d
--- /dev/null
+++ b/src/components/Support/AssistantModal.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { Standard } from "@typebot.io/react";
+
+function AssistantModal({ isOpen, onClose }) {
+  if (!isOpen) return null; // Prevent modal from rendering when isOpen is false.
+
+  return (
+    <div className="modal" style={styles.modal}>
+      <div className="modal-content" style={styles.modalContent}>
+        {/* Close the button. */}
+        <span className="close" onClick={onClose} style={styles.closeButton}>
+          &times;
+        </span>
+        <Standard
+          typebot="test-authentication-scalar-db-scalar-dl-ai-chatbot-i98jxsg"
+          style={{ width: "100%", height: "600px" }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  modal: {
+    display: "block",
+    position: "fixed",
+    zIndex: 1000,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+  modalContent: {
+    backgroundColor: "#fff",
+    margin: "10% auto",
+    padding: "20px",
+    borderRadius: "10px",
+    width: "90%",
+    maxWidth: "900px",
+    position: "relative", // Allow absolute positioning of the close button.
+  },
+  closeButton: {
+    position: "absolute",
+    top: "10px",
+    right: "20px",
+    fontSize: "30px",
+    fontWeight: "bold",
+    cursor: "pointer",
+    color: "#333",
+    backgroundColor: "transparent",
+    border: "none",
+    padding: "0",
+    zIndex: 1100, // Ensure the close button is above the modal content.
+  },
+};
+
+export default AssistantModal;

From 5cb81ae4544ca330c4b9e034f2a6ded4e3b48412 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Fri, 21 Feb 2025 22:23:14 +0900
Subject: [PATCH 04/56] Create ContactSupportLink.tsx

This is called when the user clicks the Contact Technical Support button in the Support dropdown menu.
---
 src/components/Support/ContactSupportLink.tsx | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/Support/ContactSupportLink.tsx

diff --git a/src/components/Support/ContactSupportLink.tsx b/src/components/Support/ContactSupportLink.tsx
new file mode 100644
index 00000000..617448e9
--- /dev/null
+++ b/src/components/Support/ContactSupportLink.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+import { useLocation } from "@docusaurus/router";
+
+const ContactSupportLink: React.FC = () => {
+  const location = useLocation();
+  const [storedUrl, setStoredUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Store the current URL in localStorage when the component first mounts.
+    const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
+    localStorage.setItem("currentUrl", currentUrl);
+
+    // Check if there's a stored URL (in case the user logs in later).
+    const savedUrl = localStorage.getItem("currentUrl");
+    if (savedUrl) {
+      setStoredUrl(savedUrl);
+    }
+  }, [location]);
+
+  const handleSupportClick = () => {
+    // Retrieve the stored URL (if it exists) or fall back to the current URL.
+    const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
+    const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
+
+    // Open the support link in a new tab.
+    window.open(reportUrl, "_blank");
+  };
+
+  return (
+    <div>
+      <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
+        <b>Contact technical support</b><br />For Enterprise customers
+      </a>
+    </div>
+  );
+};
+
+export default ContactSupportLink;

From c4412c8cc57c944b7897e1a55e3754982d08a07b Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Fri, 21 Feb 2025 22:23:20 +0900
Subject: [PATCH 05/56] Create SupportDropdownMenu.tsx

---
 .../Support/SupportDropdownMenu.tsx           | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/components/Support/SupportDropdownMenu.tsx

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
new file mode 100644
index 00000000..be175cad
--- /dev/null
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -0,0 +1,68 @@
+import React, { useState, useEffect, useRef } from 'react';
+import styles from '@site/src/css/SupportDropdownMenu.module.css';
+import AssistantModal from './AssistantModal'; // Import the AssistantModal component for the chatbot.
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; // Import the icon.
+import ContactSupportLink from "./ContactSupportLink"; // Import the Enterprise support link.
+
+const DropdownMenu: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false); // For dropdown visibility
+  const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const openModal = (event: React.MouseEvent) => {
+    event.preventDefault(); // Prevent the default anchor behavior (page navigation).
+    setIsModalOpen(true); // Open the modal when the link is clicked.
+    setIsOpen(false); // Optionally close the dropdown when modal opens.
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  // Close dropdown if clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  return (
+    <div className={styles.supportDropdown} ref={dropdownRef}>
+      <button className={styles.supportDropBtn} onClick={toggleDropdown}>
+        Support <FontAwesomeIcon icon={faChevronDown} fontSize={12} />
+      </button>
+
+      {isOpen && (
+        <div className={styles.supportDropdownContent}>
+          <ContactSupportLink />
+          <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
+            <b>Stack Overflow</b><br />For Community users
+          </a>
+          <a href="#" onClick={openModal}>
+            <b>AI assistant (experimental)</b><br />For Scalar Membership Program members
+          </a>
+        </div>
+      )}
+
+      {/* Pass isModalOpen to AssistantModal to control visibility. */}
+      {isModalOpen && <AssistantModal isOpen={isModalOpen} onClose={closeModal} />}
+    </div>
+  );
+};
+
+export default DropdownMenu;

From b26e1e713949e4b5f92f8e87e3f2844fd78e8efb Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Fri, 21 Feb 2025 22:23:24 +0900
Subject: [PATCH 06/56] Create SupportDropdownMenu.module.css

---
 src/css/SupportDropdownMenu.module.css | 45 ++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/css/SupportDropdownMenu.module.css

diff --git a/src/css/SupportDropdownMenu.module.css b/src/css/SupportDropdownMenu.module.css
new file mode 100644
index 00000000..73cd67a5
--- /dev/null
+++ b/src/css/SupportDropdownMenu.module.css
@@ -0,0 +1,45 @@
+.supportDropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.supportDropBtn {
+  background-color: var(--ifm-color-secondary);
+  border: #afafaf 1px solid;
+  border-radius: var(--ifm-badge-border-radius);
+  color: #505050;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+  min-width: 140px;
+  padding: 6px 12px;
+  text-align: center;
+  z-index: 1;
+}
+
+.supportDropdown:hover .supportDropBtn {
+  border-radius: var(--ifm-badge-border-radius);
+}
+
+.supportDropdownContent {
+  background-color: #f9f9f9;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  color: var(--ifm-color-emphasis-700);
+  display: block;
+  font-size: 14px;
+  min-width: 215px;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+
+.supportDropdownContent a {
+  color: black;
+  display: block;
+  padding: 6px 12px;
+  text-decoration: none;
+}
+
+.supportDropdownContent a:hover {
+  background-color: var(--ifm-dropdown-hover-background-color);
+}

From 67411c752b1bdfbc6d0a9c935676ba7589b07fe2 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Fri, 21 Feb 2025 22:23:47 +0900
Subject: [PATCH 07/56] Add Support dropdown menu above TOC

---
 src/theme/DocItem/Layout/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 626e997c..be1100a9 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -12,6 +12,7 @@ import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import ContentVisibility from '@theme/ContentVisibility';
 import type {Props} from '@theme/DocItem/Layout';
+import SupportDropdownMenu from '@site/src/components/Support/SupportDropdownMenu'; // Import the support dropdown component.
 
 import styles from './styles.module.css';
 
@@ -58,7 +59,13 @@ export default function DocItemLayout({children}: Props): JSX.Element {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+      {docTOC.desktop && <div className="col col--3">
+        <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}> {/* Add the support dropdown above the TOC on desktop. */}
+          <SupportDropdownMenu />
+        </div>
+        {docTOC.desktop}
+        </div>
+      }
     </div>
   );
 }

From 3879190ea8d82908c4781d7096f2a24999189106 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:07:43 +0900
Subject: [PATCH 08/56] Make Support button appear with or without ToC

Before this change, the Support button would only appear if the page had a ToC.
---
 src/theme/DocItem/Layout/index.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index be1100a9..280fe7f1 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -59,13 +59,16 @@ export default function DocItemLayout({children}: Props): JSX.Element {
           <DocItemPaginator />
         </div>
       </div>
-      {docTOC.desktop && <div className="col col--3">
-        <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}> {/* Add the support dropdown above the TOC on desktop. */}
+
+      {/* Ensure the right column always exists, even if there is no TOC */}
+      <div className="col col--3">
+        {/* Add the support dropdown above the TOC on desktop. */}
+        <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
           <SupportDropdownMenu />
         </div>
+        {/* Render TOC if available */}
         {docTOC.desktop}
-        </div>
-      }
+      </div>
     </div>
   );
 }

From 588f8f60adb1faa2b39a835f1dec1f25808f8c2b Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:08:08 +0900
Subject: [PATCH 09/56] Pass URL as parameter to Typebot

---
 src/components/Support/AssistantModal.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Support/AssistantModal.tsx b/src/components/Support/AssistantModal.tsx
index e988791d..0d987c01 100644
--- a/src/components/Support/AssistantModal.tsx
+++ b/src/components/Support/AssistantModal.tsx
@@ -4,6 +4,9 @@ import { Standard } from "@typebot.io/react";
 function AssistantModal({ isOpen, onClose }) {
   if (!isOpen) return null; // Prevent modal from rendering when isOpen is false.
 
+  // Get the current page URL.
+  const currentUrl = window.location.href;
+
   return (
     <div className="modal" style={styles.modal}>
       <div className="modal-content" style={styles.modalContent}>
@@ -14,6 +17,9 @@ function AssistantModal({ isOpen, onClose }) {
         <Standard
           typebot="test-authentication-scalar-db-scalar-dl-ai-chatbot-i98jxsg"
           style={{ width: "100%", height: "600px" }}
+          prefilledVariables={{
+            "Current page URL": `${currentUrl}`, // Pass page URL as a query parameter.
+          }}
         />
       </div>
     </div>

From e6d8d08db57ee6536c653f903ceb3e8184284333 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:08:33 +0900
Subject: [PATCH 10/56] Show Japanese text on Japanese version of site

---
 src/components/Support/ContactSupportLink.tsx  |  6 +++++-
 src/components/Support/SupportDropdownMenu.tsx | 10 +++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Support/ContactSupportLink.tsx b/src/components/Support/ContactSupportLink.tsx
index 617448e9..29520922 100644
--- a/src/components/Support/ContactSupportLink.tsx
+++ b/src/components/Support/ContactSupportLink.tsx
@@ -5,6 +5,9 @@ const ContactSupportLink: React.FC = () => {
   const location = useLocation();
   const [storedUrl, setStoredUrl] = useState<string | null>(null);
 
+  // Detect the language based on the URL path
+  const isJapanese = location.pathname.startsWith("/ja-jp");
+
   useEffect(() => {
     // Store the current URL in localStorage when the component first mounts.
     const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
@@ -29,7 +32,8 @@ const ContactSupportLink: React.FC = () => {
   return (
     <div>
       <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
-        <b>Contact technical support</b><br />For Enterprise customers
+        <b>{isJapanese ? "テクニカルサポートに問い合わせる" : "Contact technical support"}</b><br />
+        {isJapanese ? "エンタープライズのお客様向け" : "For Enterprise customers"}
       </a>
     </div>
   );
diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index be175cad..24561805 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -10,6 +10,9 @@ const DropdownMenu: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  // Detect the language based on the URL path
+  const isJapanese = window.location.pathname.startsWith("/ja-jp");
+
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
   };
@@ -44,17 +47,18 @@ const DropdownMenu: React.FC = () => {
   return (
     <div className={styles.supportDropdown} ref={dropdownRef}>
       <button className={styles.supportDropBtn} onClick={toggleDropdown}>
-        Support <FontAwesomeIcon icon={faChevronDown} fontSize={12} />
+        {isJapanese ? "サポート" : "Support"} <FontAwesomeIcon icon={faChevronDown} fontSize={12} />
       </button>
 
       {isOpen && (
         <div className={styles.supportDropdownContent}>
           <ContactSupportLink />
           <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
-            <b>Stack Overflow</b><br />For Community users
+            <b>Stack Overflow</b><br />{isJapanese ? "コミュニティ向けの質問" : "For questions to the community"}
           </a>
           <a href="#" onClick={openModal}>
-            <b>AI assistant (experimental)</b><br />For Scalar Membership Program members
+            <b>{isJapanese ? "AI アシスタント（実験的）" : "AI assistant (experimental)"}</b><br />
+            {isJapanese ? "Scalar メンバーシッププログラム向け" : "For Scalar Membership Program members"}
           </a>
         </div>
       )}

From cdd537fc5b464525f450c9f7ab61574c4150d2bb Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:09:39 +0900
Subject: [PATCH 11/56] Justify alignment for Support button text and arrow
 icon

---
 src/css/SupportDropdownMenu.module.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/css/SupportDropdownMenu.module.css b/src/css/SupportDropdownMenu.module.css
index 73cd67a5..1343c52f 100644
--- a/src/css/SupportDropdownMenu.module.css
+++ b/src/css/SupportDropdownMenu.module.css
@@ -13,8 +13,13 @@
   font-weight: 700;
   min-width: 140px;
   padding: 6px 12px;
-  text-align: center;
+  text-align: left;
   z-index: 1;
+
+  /* Add flexbox properties */
+  display: flex;
+  justify-content: space-between; /* Pushes text to the left and icon to the right */
+  align-items: center;
 }
 
 .supportDropdown:hover .supportDropBtn {
@@ -27,7 +32,7 @@
   color: var(--ifm-color-emphasis-700);
   display: block;
   font-size: 14px;
-  min-width: 215px;
+  min-width: 230px;
   position: absolute;
   right: 0;
   z-index: 1;

From 0e42e0fb0d3841c3fa49c3505248b41c59c22f41 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:32:16 +0900
Subject: [PATCH 12/56] Make Support button appear static above ToC

By making the Support button static above the ToC, visitors can access the button without having to scroll to the top of the page.
---
 src/theme/DocItem/Layout/index.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 280fe7f1..10b3322a 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -61,13 +61,16 @@ export default function DocItemLayout({children}: Props): JSX.Element {
       </div>
 
       {/* Ensure the right column always exists, even if there is no TOC */}
-      <div className="col col--3">
+      <div className="col col--3" style={{ position: "relative" }}>
+        {/* Add a wrapper div to make the support dropdown and TOC sticky */}
+        <div style={{ position: "sticky", top: "80px", zIndex: 1000 }}>
         {/* Add the support dropdown above the TOC on desktop. */}
-        <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
-          <SupportDropdownMenu />
-        </div>
+          <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0', }}>
+            <SupportDropdownMenu />
+          </div>
         {/* Render TOC if available */}
         {docTOC.desktop}
+        </div>
       </div>
     </div>
   );

From 9d4d0d38bfe90bd4414e210b0929bdb17c1561a1 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:34:59 +0900
Subject: [PATCH 13/56] Hide Support button when hiding ToC on page

Some pages purposely hide the ToC by using `hide_table_of_contents: true`. We don't want the Support button to appear on those pages since the contents of the page are wider (taking up the space where the ToC would be).
---
 src/theme/DocItem/Layout/index.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 10b3322a..ece16708 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -42,7 +42,9 @@ function useDocTOC() {
 
 export default function DocItemLayout({children}: Props): JSX.Element {
   const docTOC = useDocTOC();
-  const {metadata} = useDoc();
+  const {metadata, frontMatter} = useDoc(); // Get frontMatter to check for hide_table_of_contents
+  const hideTOC = frontMatter.hide_table_of_contents; // Check if TOC is hidden
+
   return (
     <div className="row">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
@@ -61,17 +63,19 @@ export default function DocItemLayout({children}: Props): JSX.Element {
       </div>
 
       {/* Ensure the right column always exists, even if there is no TOC */}
-      <div className="col col--3" style={{ position: "relative" }}>
-        {/* Add a wrapper div to make the support dropdown and TOC sticky */}
-        <div style={{ position: "sticky", top: "80px", zIndex: 1000 }}>
-        {/* Add the support dropdown above the TOC on desktop. */}
-          <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0', }}>
-            <SupportDropdownMenu />
+      {!hideTOC && (
+        <div className="col col--3" style={{ position: "relative" }}>
+          {/* Add a wrapper div to make the support dropdown and TOC sticky */}
+          <div style={{ position: "sticky", top: "80px", zIndex: 1000 }}>
+            {/* Add the support dropdown above the TOC on desktop */}
+            <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
+              <SupportDropdownMenu />
+            </div>
+            {/* Render TOC if available */}
+            {docTOC.desktop}
           </div>
-        {/* Render TOC if available */}
-        {docTOC.desktop}
         </div>
-      </div>
+      )}
     </div>
   );
 }

From 1cef73587d5e2770181e99b9be63c4b91da611ed Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:56:21 +0900
Subject: [PATCH 14/56] Re-order styles

---
 src/css/SupportDropdownMenu.module.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/css/SupportDropdownMenu.module.css b/src/css/SupportDropdownMenu.module.css
index 1343c52f..21ea860a 100644
--- a/src/css/SupportDropdownMenu.module.css
+++ b/src/css/SupportDropdownMenu.module.css
@@ -4,22 +4,20 @@
 }
 
 .supportDropBtn {
+  align-items: center;
   background-color: var(--ifm-color-secondary);
   border: #afafaf 1px solid;
   border-radius: var(--ifm-badge-border-radius);
   color: #505050;
   cursor: pointer;
+  display: flex;
   font-size: 14px;
   font-weight: 700;
+  justify-content: space-between; /* Pushes text to the left and icon to the right. */
   min-width: 140px;
   padding: 6px 12px;
   text-align: left;
   z-index: 1;
-
-  /* Add flexbox properties */
-  display: flex;
-  justify-content: space-between; /* Pushes text to the left and icon to the right */
-  align-items: center;
 }
 
 .supportDropdown:hover .supportDropBtn {

From af5eb6efc5213811deb08bab5cde83f3d42ab432 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 17:56:41 +0900
Subject: [PATCH 15/56] Show Support button on mobile

---
 src/css/SupportDropdownMenu.module.css | 11 +++++++++++
 src/theme/DocItem/Layout/index.tsx     |  9 ++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/css/SupportDropdownMenu.module.css b/src/css/SupportDropdownMenu.module.css
index 21ea860a..ed0455ba 100644
--- a/src/css/SupportDropdownMenu.module.css
+++ b/src/css/SupportDropdownMenu.module.css
@@ -36,6 +36,17 @@
   z-index: 1;
 }
 
+/* Change position to left on mobile screens. */
+@media (max-width: 996px) { /* Adjust breakpoint if needed. */
+  .supportDropBtn {
+    font-size: 15px;
+  }
+  .supportDropdownContent {
+    font-size: 15px;
+    left: 0;
+  }
+}
+
 .supportDropdownContent a {
   color: black;
   display: block;
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index ece16708..9d421984 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -44,6 +44,7 @@ export default function DocItemLayout({children}: Props): JSX.Element {
   const docTOC = useDocTOC();
   const {metadata, frontMatter} = useDoc(); // Get frontMatter to check for hide_table_of_contents
   const hideTOC = frontMatter.hide_table_of_contents; // Check if TOC is hidden
+  const windowSize = useWindowSize(); // Get current window size
 
   return (
     <div className="row">
@@ -54,6 +55,12 @@ export default function DocItemLayout({children}: Props): JSX.Element {
           <article>
             <DocBreadcrumbs />
             <DocVersionBadge />
+            {/* Show Support button on mobile */}
+            {windowSize === 'mobile' && (
+              <div style={{ display: 'flex', justifyContent: 'left', marginBottom: '1rem' }}>
+                <SupportDropdownMenu />
+              </div>
+            )}
             {docTOC.mobile}
             <DocItemContent>{children}</DocItemContent>
             <DocItemFooter />
@@ -63,7 +70,7 @@ export default function DocItemLayout({children}: Props): JSX.Element {
       </div>
 
       {/* Ensure the right column always exists, even if there is no TOC */}
-      {!hideTOC && (
+      {!hideTOC && windowSize !== 'mobile' && (
         <div className="col col--3" style={{ position: "relative" }}>
           {/* Add a wrapper div to make the support dropdown and TOC sticky */}
           <div style={{ position: "sticky", top: "80px", zIndex: 1000 }}>

From 77a23071606f04a2a660b5fdfc0fc9578754dd45 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 18:32:42 +0900
Subject: [PATCH 16/56] Make Support button and ToC appear behind language
 dropdown

When the `zIndex` is too high, the Support button and ToC appear on top of the language dropdown menu. reducing the `zIndex` makes the language dropdown menu appear over the Support button and ToC.
---
 src/theme/DocItem/Layout/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 9d421984..ece3462a 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -73,7 +73,7 @@ export default function DocItemLayout({children}: Props): JSX.Element {
       {!hideTOC && windowSize !== 'mobile' && (
         <div className="col col--3" style={{ position: "relative" }}>
           {/* Add a wrapper div to make the support dropdown and TOC sticky */}
-          <div style={{ position: "sticky", top: "80px", zIndex: 1000 }}>
+          <div style={{ position: "sticky", top: "80px", zIndex: 1 }}>
             {/* Add the support dropdown above the TOC on desktop */}
             <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
               <SupportDropdownMenu />

From 1bbdd0502f4e6a7560c67241aed9dc9dbda0930d Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 25 Feb 2025 18:39:49 +0900
Subject: [PATCH 17/56] Revise code comments for clarity

---
 src/components/Support/ContactSupportLink.tsx  |  2 +-
 src/components/Support/SupportDropdownMenu.tsx |  4 ++--
 src/css/SupportDropdownMenu.module.css         |  5 +++--
 src/theme/DocItem/Layout/index.tsx             | 18 +++++++++---------
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/Support/ContactSupportLink.tsx b/src/components/Support/ContactSupportLink.tsx
index 29520922..c3bf0771 100644
--- a/src/components/Support/ContactSupportLink.tsx
+++ b/src/components/Support/ContactSupportLink.tsx
@@ -5,7 +5,7 @@ const ContactSupportLink: React.FC = () => {
   const location = useLocation();
   const [storedUrl, setStoredUrl] = useState<string | null>(null);
 
-  // Detect the language based on the URL path
+  // Detect the language based on the URL path.
   const isJapanese = location.pathname.startsWith("/ja-jp");
 
   useEffect(() => {
diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index 24561805..76e17968 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -10,7 +10,7 @@ const DropdownMenu: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Detect the language based on the URL path
+  // Detect the language based on the URL path.
   const isJapanese = window.location.pathname.startsWith("/ja-jp");
 
   const toggleDropdown = () => {
@@ -27,7 +27,7 @@ const DropdownMenu: React.FC = () => {
     setIsModalOpen(false);
   };
 
-  // Close dropdown if clicking outside
+  // Close the dropdown when clicking outside of the content container.
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
diff --git a/src/css/SupportDropdownMenu.module.css b/src/css/SupportDropdownMenu.module.css
index ed0455ba..577019d5 100644
--- a/src/css/SupportDropdownMenu.module.css
+++ b/src/css/SupportDropdownMenu.module.css
@@ -13,7 +13,7 @@
   display: flex;
   font-size: 14px;
   font-weight: 700;
-  justify-content: space-between; /* Pushes text to the left and icon to the right. */
+  justify-content: space-between;
   min-width: 140px;
   padding: 6px 12px;
   text-align: left;
@@ -36,7 +36,7 @@
   z-index: 1;
 }
 
-/* Change position to left on mobile screens. */
+/* Support dropdown button for mobile screens. */
 @media (max-width: 996px) { /* Adjust breakpoint if needed. */
   .supportDropBtn {
     font-size: 15px;
@@ -44,6 +44,7 @@
   .supportDropdownContent {
     font-size: 15px;
     left: 0;
+    min-width: 320px;
   }
 }
 
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index ece3462a..28c6667c 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -17,7 +17,7 @@ import SupportDropdownMenu from '@site/src/components/Support/SupportDropdownMen
 import styles from './styles.module.css';
 
 /**
- * Decide if the toc should be rendered, on mobile or desktop viewports
+ * Decide if the ToC should be rendered, on mobile or desktop viewports.
  */
 function useDocTOC() {
   const {frontMatter, toc} = useDoc();
@@ -42,9 +42,9 @@ function useDocTOC() {
 
 export default function DocItemLayout({children}: Props): JSX.Element {
   const docTOC = useDocTOC();
-  const {metadata, frontMatter} = useDoc(); // Get frontMatter to check for hide_table_of_contents
-  const hideTOC = frontMatter.hide_table_of_contents; // Check if TOC is hidden
-  const windowSize = useWindowSize(); // Get current window size
+  const {metadata, frontMatter} = useDoc(); // Get the front-matter metadata to check for the `hide_table_of_contents` configuration.
+  const hideTOC = frontMatter.hide_table_of_contents; // Check if the ToC is hidden.
+  const windowSize = useWindowSize(); // Get the current window size.
 
   return (
     <div className="row">
@@ -55,7 +55,7 @@ export default function DocItemLayout({children}: Props): JSX.Element {
           <article>
             <DocBreadcrumbs />
             <DocVersionBadge />
-            {/* Show Support button on mobile */}
+            {/* Show the Support button on mobile. */}
             {windowSize === 'mobile' && (
               <div style={{ display: 'flex', justifyContent: 'left', marginBottom: '1rem' }}>
                 <SupportDropdownMenu />
@@ -69,16 +69,16 @@ export default function DocItemLayout({children}: Props): JSX.Element {
         </div>
       </div>
 
-      {/* Ensure the right column always exists, even if there is no TOC */}
+      {/* Ensure the right column always exists, even if there is no ToC. */}
       {!hideTOC && windowSize !== 'mobile' && (
         <div className="col col--3" style={{ position: "relative" }}>
-          {/* Add a wrapper div to make the support dropdown and TOC sticky */}
+          {/* Add a wrapper div to make the support dropdown and ToC sticky. */}
           <div style={{ position: "sticky", top: "80px", zIndex: 1 }}>
-            {/* Add the support dropdown above the TOC on desktop */}
+            {/* Add the support dropdown above the ToC on desktop. */}
             <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
               <SupportDropdownMenu />
             </div>
-            {/* Render TOC if available */}
+            {/* Render the ToC if one is available. */}
             {docTOC.desktop}
           </div>
         </div>

From 3435a6febc71d47ba02ac170e1c4d0777060e62c Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Mon, 3 Mar 2025 15:44:31 +0900
Subject: [PATCH 18/56] Fix spelling

---
 src/components/Support/ContactSupportLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Support/ContactSupportLink.tsx b/src/components/Support/ContactSupportLink.tsx
index c3bf0771..693c4f1e 100644
--- a/src/components/Support/ContactSupportLink.tsx
+++ b/src/components/Support/ContactSupportLink.tsx
@@ -32,7 +32,7 @@ const ContactSupportLink: React.FC = () => {
   return (
     <div>
       <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
-        <b>{isJapanese ? "テクニカルサポートに問い合わせる" : "Contact technical support"}</b><br />
+        <b>{isJapanese ? "テクニカルサポートに問い合わせ" : "Contact technical support"}</b><br />
         {isJapanese ? "エンタープライズのお客様向け" : "For Enterprise customers"}
       </a>
     </div>

From 626625bed5198a39d54de7d3bf51ab0d38ad8c0f Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Mon, 3 Mar 2025 15:44:42 +0900
Subject: [PATCH 19/56] Add support for dark mode

---
 src/css/SupportDropdownMenu.module.css | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/css/SupportDropdownMenu.module.css b/src/css/SupportDropdownMenu.module.css
index 577019d5..e393febb 100644
--- a/src/css/SupportDropdownMenu.module.css
+++ b/src/css/SupportDropdownMenu.module.css
@@ -14,7 +14,7 @@
   font-size: 14px;
   font-weight: 700;
   justify-content: space-between;
-  min-width: 140px;
+  min-width: 150px;
   padding: 6px 12px;
   text-align: left;
   z-index: 1;
@@ -30,7 +30,7 @@
   color: var(--ifm-color-emphasis-700);
   display: block;
   font-size: 14px;
-  min-width: 230px;
+  min-width: 265px;
   position: absolute;
   right: 0;
   z-index: 1;
@@ -58,3 +58,17 @@
 .supportDropdownContent a:hover {
   background-color: var(--ifm-dropdown-hover-background-color);
 }
+
+html[data-theme="dark"] .supportDropBtn {
+  background-color: #505050;
+  border: #6B7280 1px solid;
+  color: #f9f9f9;
+}
+
+html[data-theme="dark"] .supportDropdownContent {
+  background-color: #505050;
+
+  a {
+    color: #f9f9f9;
+  }
+}

From b79274203ac9323052fdd9cba5adbfc27cdb5503 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 17:04:44 +0900
Subject: [PATCH 20/56] Delete SupportDropdownMenu.module.css

No longer needed since I added styles to custom.css.
---
 src/css/SupportDropdownMenu.module.css | 74 --------------------------
 1 file changed, 74 deletions(-)
 delete mode 100644 src/css/SupportDropdownMenu.module.css

diff --git a/src/css/SupportDropdownMenu.module.css b/src/css/SupportDropdownMenu.module.css
deleted file mode 100644
index e393febb..00000000
--- a/src/css/SupportDropdownMenu.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.supportDropdown {
-  display: inline-block;
-  position: relative;
-}
-
-.supportDropBtn {
-  align-items: center;
-  background-color: var(--ifm-color-secondary);
-  border: #afafaf 1px solid;
-  border-radius: var(--ifm-badge-border-radius);
-  color: #505050;
-  cursor: pointer;
-  display: flex;
-  font-size: 14px;
-  font-weight: 700;
-  justify-content: space-between;
-  min-width: 150px;
-  padding: 6px 12px;
-  text-align: left;
-  z-index: 1;
-}
-
-.supportDropdown:hover .supportDropBtn {
-  border-radius: var(--ifm-badge-border-radius);
-}
-
-.supportDropdownContent {
-  background-color: #f9f9f9;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
-  color: var(--ifm-color-emphasis-700);
-  display: block;
-  font-size: 14px;
-  min-width: 265px;
-  position: absolute;
-  right: 0;
-  z-index: 1;
-}
-
-/* Support dropdown button for mobile screens. */
-@media (max-width: 996px) { /* Adjust breakpoint if needed. */
-  .supportDropBtn {
-    font-size: 15px;
-  }
-  .supportDropdownContent {
-    font-size: 15px;
-    left: 0;
-    min-width: 320px;
-  }
-}
-
-.supportDropdownContent a {
-  color: black;
-  display: block;
-  padding: 6px 12px;
-  text-decoration: none;
-}
-
-.supportDropdownContent a:hover {
-  background-color: var(--ifm-dropdown-hover-background-color);
-}
-
-html[data-theme="dark"] .supportDropBtn {
-  background-color: #505050;
-  border: #6B7280 1px solid;
-  color: #f9f9f9;
-}
-
-html[data-theme="dark"] .supportDropdownContent {
-  background-color: #505050;
-
-  a {
-    color: #f9f9f9;
-  }
-}

From 8e26d21402a941a19c98cf6b12ffc78cc18ba6e5 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 17:05:35 +0900
Subject: [PATCH 21/56] Add Support button styles

These styles were originally in src/css/SupportDropdownMenu.module.css.
---
 src/css/custom.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/src/css/custom.css b/src/css/custom.css
index 5139db01..0b40be86 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -251,3 +251,85 @@ html[data-theme="dark"] .tooltip-glossary {
     width: 333px !important;
   }
 }
+
+/* Support button and dropdown */
+.supportDropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.supportDropBtn {
+  align-items: center;
+  background-color: var(--ifm-color-secondary);
+  border: #afafaf 1px solid;
+  border-radius: var(--ifm-badge-border-radius);
+  color: #505050;
+  cursor: pointer;
+  display: flex;
+  font-size: 14px;
+  font-weight: 700;
+  justify-content: space-between;
+  min-width: 150px;
+  padding: 6px 12px;
+  text-align: left;
+  z-index: 1;
+}
+
+.supportDropdown:hover .supportDropBtn {
+  border-radius: var(--ifm-badge-border-radius);
+}
+
+.supportDropdownContent {
+  background-color: #f9f9f9;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  color: var(--ifm-color-emphasis-700);
+  display: block;
+  font-size: 14px;
+  min-width: 265px;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+
+/* Support dropdown button for mobile screens. */
+@media (max-width: 996px) { /* Adjust breakpoint if needed. */
+  .supportDropBtn {
+    font-size: 15px;
+  }
+  .supportDropdownContent {
+    font-size: 15px;
+    left: 0;
+    min-width: 320px;
+  }
+}
+
+.supportDropdownContent a {
+  color: black;
+  display: block;
+  padding: 6px 12px;
+  text-decoration: none;
+}
+
+.supportDropdownContent a:hover {
+  background-color: var(--ifm-dropdown-hover-background-color);
+}
+
+html[data-theme="dark"] .supportDropBtn {
+  background-color: #505050;
+  border: #6B7280 1px solid;
+  color: #f9f9f9;
+}
+
+html[data-theme="dark"] .supportDropdownContent {
+  background-color: #505050;
+
+  a {
+    color: #f9f9f9;
+  }
+}
+
+hr {
+  text-align: center;
+  margin: auto;
+  max-width: 91%;
+}

From b053e705ab636174945d86f3e1c9e6af6ec84424 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 17:08:51 +0900
Subject: [PATCH 22/56] Change from using `JSX.Element` to `ReactNode`

`ReactNode` should be used since it's what Docusaurus is based on.
---
 src/theme/DocItem/Layout/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 28c6667c..0ee3907c 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {useWindowSize} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
@@ -40,7 +40,7 @@ function useDocTOC() {
   };
 }
 
-export default function DocItemLayout({children}: Props): JSX.Element {
+export default function DocItemLayout({children}: Props): ReactNode {
   const docTOC = useDocTOC();
   const {metadata, frontMatter} = useDoc(); // Get the front-matter metadata to check for the `hide_table_of_contents` configuration.
   const hideTOC = frontMatter.hide_table_of_contents; // Check if the ToC is hidden.

From 5058ba387426f474128dc8bcbcc1d5c2151461b7 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 17:11:25 +0900
Subject: [PATCH 23/56] Add GitHub issue link and template

---
 .../Support/SupportDropdownMenu.tsx           | 71 +++++++++++++++++--
 1 file changed, 65 insertions(+), 6 deletions(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index 76e17968..ef60fb18 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -1,17 +1,21 @@
 import React, { useState, useEffect, useRef } from 'react';
-import styles from '@site/src/css/SupportDropdownMenu.module.css';
 import AssistantModal from './AssistantModal'; // Import the AssistantModal component for the chatbot.
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; // Import the icon.
 import ContactSupportLink from "./ContactSupportLink"; // Import the Enterprise support link.
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
 
 const DropdownMenu: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false); // For dropdown visibility
   const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  // Get document metadata from Docusaurus.
+  const { metadata } = useDoc();
+  const docTitle = metadata?.title || "Issue with documentation page"; // Use document title or fallback.
+
   // Detect the language based on the URL path.
-  const isJapanese = window.location.pathname.startsWith("/ja-jp");
+  const isJapanese = typeof window !== "undefined" && window.location.pathname.startsWith("/ja-jp");
 
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
@@ -27,6 +31,58 @@ const DropdownMenu: React.FC = () => {
     setIsModalOpen(false);
   };
 
+  // Generate GitHub issue URL dynamically.
+  const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
+
+  // Define issue title dynamically based on language.
+  const issueTitle = encodeURIComponent(
+    isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
+  );
+
+  // Define issue body dynamically based on language.
+  const issueBody = encodeURIComponent(
+    isJapanese
+      ? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
+
+## 期待される動作
+
+どのような動作を期待しましたか？
+
+## 問題の説明
+
+問題の内容をわかりやすく説明してください。
+
+### 再現手順 (該当する場合)
+
+問題を再現できる場合、手順を記載してください。
+
+### スクリーンショット (該当する場合)
+
+該当する場合は、スクリーンショットを添付してください。
+`
+    : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
+
+## Expected behavior
+
+What did you expect to happen?
+
+## Describe the problem
+
+Please provide a clear and concise description of what the issue is.
+
+### Steps to reproduce (if applicable)
+
+If the issue is reproducible, please list the steps to reproduce it.
+
+### Screenshots (if applicable)
+
+If applicable, add screenshots to help explain your problem.
+`
+);
+
+  // Construct the GitHub issue URL.
+  const githubIssueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+
   // Close the dropdown when clicking outside of the content container.
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -45,21 +101,24 @@ const DropdownMenu: React.FC = () => {
   }, [isOpen]);
 
   return (
-    <div className={styles.supportDropdown} ref={dropdownRef}>
       <button className={styles.supportDropBtn} onClick={toggleDropdown}>
         {isJapanese ? "サポート" : "Support"} <FontAwesomeIcon icon={faChevronDown} fontSize={12} />
       </button>
 
       {isOpen && (
-        <div className={styles.supportDropdownContent}>
           <ContactSupportLink />
+          <hr />
           <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
-            <b>Stack Overflow</b><br />{isJapanese ? "コミュニティ向けの質問" : "For questions to the community"}
           </a>
+          <hr />
           <a href="#" onClick={openModal}>
-            <b>{isJapanese ? "AI アシスタント（実験的）" : "AI assistant (experimental)"}</b><br />
             {isJapanese ? "Scalar メンバーシッププログラム向け" : "For Scalar Membership Program members"}
           </a>
+          <hr />
+          <a href={githubIssueUrl} target="_blank" rel="noopener noreferrer">
+            <b>{isJapanese ? "ドキュメントの問題を報告" : "Report doc issue"}</b><br />
+            {isJapanese ? "このページに関する問題を報告" : "For reporting an issue on this page"}
+          </a>
         </div>
       )}
 

From 117be32ac36c9afb0254a59464ba754893467c5c Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 17:12:02 +0900
Subject: [PATCH 24/56] Fix styles

Styles exist in the custom.css file now rather than a separate CSS file
---
 src/components/Support/SupportDropdownMenu.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index ef60fb18..d4c5d655 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -101,11 +101,12 @@ If applicable, add screenshots to help explain your problem.
   }, [isOpen]);
 
   return (
-      <button className={styles.supportDropBtn} onClick={toggleDropdown}>
-        {isJapanese ? "サポート" : "Support"} <FontAwesomeIcon icon={faChevronDown} fontSize={12} />
+    <div className="supportDropdown" ref={dropdownRef}>
+      <button className="supportDropBtn" onClick={toggleDropdown}>
       </button>
 
       {isOpen && (
+        <div className="supportDropdownContent">
           <ContactSupportLink />
           <hr />
           <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">

From 7a9d194374dc1e4dae5930049fbc66e9687d835a Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 17:12:16 +0900
Subject: [PATCH 25/56] Revise wording on links

---
 src/components/Support/SupportDropdownMenu.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index d4c5d655..a83deeae 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -103,6 +103,7 @@ If applicable, add screenshots to help explain your problem.
   return (
     <div className="supportDropdown" ref={dropdownRef}>
       <button className="supportDropBtn" onClick={toggleDropdown}>
+        {isJapanese ? "何かお困りですか?" : "Need help?"} <FontAwesomeIcon icon={faChevronDown} fontSize={12} />
       </button>
 
       {isOpen && (
@@ -110,9 +111,12 @@ If applicable, add screenshots to help explain your problem.
           <ContactSupportLink />
           <hr />
           <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
+            <b>{isJapanese ? "Stack Overflow をチェック" : "Check Stack Overflow"}</b><br />
+            {isJapanese ? "コミュニティ向けの質問" : "For questions to the community"}
           </a>
           <hr />
           <a href="#" onClick={openModal}>
+            <b>{isJapanese ? "AI に聞く (実験的)" : "Ask AI (experimental)"}</b><br />
             {isJapanese ? "Scalar メンバーシッププログラム向け" : "For Scalar Membership Program members"}
           </a>
           <hr />

From b255accd6023843a6006e3f82952514095a89c72 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 20:27:33 +0900
Subject: [PATCH 26/56] Delete ContactSupportLink.tsx

Combined the contents into "src/components/Support/SupportDropdownMenu.tsx" for easier manageability.
---
 src/components/Support/ContactSupportLink.tsx | 42 -------------------
 1 file changed, 42 deletions(-)
 delete mode 100644 src/components/Support/ContactSupportLink.tsx

diff --git a/src/components/Support/ContactSupportLink.tsx b/src/components/Support/ContactSupportLink.tsx
deleted file mode 100644
index 693c4f1e..00000000
--- a/src/components/Support/ContactSupportLink.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useLocation } from "@docusaurus/router";
-
-const ContactSupportLink: React.FC = () => {
-  const location = useLocation();
-  const [storedUrl, setStoredUrl] = useState<string | null>(null);
-
-  // Detect the language based on the URL path.
-  const isJapanese = location.pathname.startsWith("/ja-jp");
-
-  useEffect(() => {
-    // Store the current URL in localStorage when the component first mounts.
-    const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
-    localStorage.setItem("currentUrl", currentUrl);
-
-    // Check if there's a stored URL (in case the user logs in later).
-    const savedUrl = localStorage.getItem("currentUrl");
-    if (savedUrl) {
-      setStoredUrl(savedUrl);
-    }
-  }, [location]);
-
-  const handleSupportClick = () => {
-    // Retrieve the stored URL (if it exists) or fall back to the current URL.
-    const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
-    const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
-
-    // Open the support link in a new tab.
-    window.open(reportUrl, "_blank");
-  };
-
-  return (
-    <div>
-      <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
-        <b>{isJapanese ? "テクニカルサポートに問い合わせ" : "Contact technical support"}</b><br />
-        {isJapanese ? "エンタープライズのお客様向け" : "For Enterprise customers"}
-      </a>
-    </div>
-  );
-};
-
-export default ContactSupportLink;

From 58a8d0902c4f54f9749924537bc2c5a02a828f0c Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 20:28:04 +0900
Subject: [PATCH 27/56] Update SupportDropdownMenu.tsx

Added the contents from "src/components/Support/ContactSupportLink.tsx" for easier manageability.
---
 .../Support/SupportDropdownMenu.tsx           | 55 +++++++++++++------
 1 file changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index a83deeae..2e7373f3 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -2,44 +2,64 @@ import React, { useState, useEffect, useRef } from 'react';
 import AssistantModal from './AssistantModal'; // Import the AssistantModal component for the chatbot.
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; // Import the icon.
-import ContactSupportLink from "./ContactSupportLink"; // Import the Enterprise support link.
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import { useLocation } from "@docusaurus/router"; // Import for location detection.
 
-const DropdownMenu: React.FC = () => {
+const SupportDropdownMenu: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false); // For dropdown visibility
   const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
+  const [storedUrl, setStoredUrl] = useState<string | null>(null); // For storing the URL
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const location = useLocation();
 
   // Get document metadata from Docusaurus.
   const { metadata } = useDoc();
   const docTitle = metadata?.title || "Issue with documentation page"; // Use document title or fallback.
 
   // Detect the language based on the URL path.
-  const isJapanese = typeof window !== "undefined" && window.location.pathname.startsWith("/ja-jp");
+  const isJapanese = location.pathname.startsWith("/ja-jp");
+
+  useEffect(() => {
+    // Store the current URL in localStorage when the component first mounts.
+    const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
+    localStorage.setItem("currentUrl", currentUrl);
+
+    // Retrieve stored URL (if available).
+    const savedUrl = localStorage.getItem("currentUrl");
+    if (savedUrl) {
+      setStoredUrl(savedUrl);
+    }
+  }, [location]);
 
   const toggleDropdown = () => {
     setIsOpen((prev) => !prev);
   };
 
   const openModal = (event: React.MouseEvent) => {
-    event.preventDefault(); // Prevent the default anchor behavior (page navigation).
-    setIsModalOpen(true); // Open the modal when the link is clicked.
-    setIsOpen(false); // Optionally close the dropdown when modal opens.
+    event.preventDefault(); // Prevent default anchor behavior.
+    setIsModalOpen(true);
+    setIsOpen(false);
   };
 
   const closeModal = () => {
     setIsModalOpen(false);
   };
 
+  const handleSupportClick = () => {
+    // Get the stored URL or fall back to the current URL.
+    const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
+    const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
+
+    // Open the support link in a new tab.
+    window.open(reportUrl, "_blank");
+  };
+
   // Generate GitHub issue URL dynamically.
   const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
-
-  // Define issue title dynamically based on language.
   const issueTitle = encodeURIComponent(
     isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
   );
 
-  // Define issue body dynamically based on language.
   const issueBody = encodeURIComponent(
     isJapanese
       ? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
@@ -60,7 +80,7 @@ const DropdownMenu: React.FC = () => {
 
 該当する場合は、スクリーンショットを添付してください。
 `
-    : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
+      : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
 
 ## Expected behavior
 
@@ -78,12 +98,11 @@ If the issue is reproducible, please list the steps to reproduce it.
 
 If applicable, add screenshots to help explain your problem.
 `
-);
+  );
 
-  // Construct the GitHub issue URL.
   const githubIssueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
 
-  // Close the dropdown when clicking outside of the content container.
+  // Close dropdown when clicking outside of it.
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -108,7 +127,12 @@ If applicable, add screenshots to help explain your problem.
 
       {isOpen && (
         <div className="supportDropdownContent">
-          <ContactSupportLink />
+          <div>
+            <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
+              <b>{isJapanese ? "テクニカルサポートに問い合わせ" : "Contact technical support"}</b><br />
+              {isJapanese ? "エンタープライズのお客様向け" : "For Enterprise customers"}
+            </a>
+          </div>
           <hr />
           <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
             <b>{isJapanese ? "Stack Overflow をチェック" : "Check Stack Overflow"}</b><br />
@@ -127,10 +151,9 @@ If applicable, add screenshots to help explain your problem.
         </div>
       )}
 
-      {/* Pass isModalOpen to AssistantModal to control visibility. */}
       {isModalOpen && <AssistantModal isOpen={isModalOpen} onClose={closeModal} />}
     </div>
   );
 };
 
-export default DropdownMenu;
+export default SupportDropdownMenu;

From ddd1bd1724b3a3baa23030490435d72b1675fe3c Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 4 Mar 2025 20:42:49 +0900
Subject: [PATCH 28/56] Change component link from absolute to relative

Using an absolute link shows as an error for some reason. Changing the absolute link to a relative link doesn't show an error and still imports the component.
---
 src/theme/DocItem/Layout/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 0ee3907c..59e17ad7 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -12,7 +12,7 @@ import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import ContentVisibility from '@theme/ContentVisibility';
 import type {Props} from '@theme/DocItem/Layout';
-import SupportDropdownMenu from '@site/src/components/Support/SupportDropdownMenu'; // Import the support dropdown component.
+import SupportDropdownMenu from '../../../components/Support/SupportDropdownMenu'; // Import the support dropdown component.
 
 import styles from './styles.module.css';
 

From 357e82c2cfc7d7865120ecf34786691041a704ac Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Wed, 5 Mar 2025 18:45:25 +0900
Subject: [PATCH 29/56] Adjust width and padding for Support button

Need to adjust the width and padding to accommodate changes to the wording.
---
 src/css/custom.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 0b40be86..a2abf3e1 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -266,11 +266,11 @@ html[data-theme="dark"] .tooltip-glossary {
   color: #505050;
   cursor: pointer;
   display: flex;
-  font-size: 14px;
-  font-weight: 700;
+  font-size: 13.5px;
+  font-weight: 600;
   justify-content: space-between;
-  min-width: 150px;
-  padding: 6px 12px;
+  min-width: 155px;
+  padding: 6px 10px;
   text-align: left;
   z-index: 1;
 }
@@ -285,7 +285,7 @@ html[data-theme="dark"] .tooltip-glossary {
   color: var(--ifm-color-emphasis-700);
   display: block;
   font-size: 14px;
-  min-width: 265px;
+  min-width: 290px;
   position: absolute;
   right: 0;
   z-index: 1;

From de95352f5a6859d8f6ac1ce0ff82333dcd2bd6b7 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Wed, 5 Mar 2025 18:47:25 +0900
Subject: [PATCH 30/56] Specify Support dropdown arrow size

The dropdown arrow size should be specified here since doing so in the component causes a flash of unstyled content.
---
 src/css/custom.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/css/custom.css b/src/css/custom.css
index a2abf3e1..6afb79a1 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -275,6 +275,11 @@ html[data-theme="dark"] .tooltip-glossary {
   z-index: 1;
 }
 
+.supportDropBtn svg { /* Arrow icon */
+  width: 12px;
+  height: 12px;
+}
+
 .supportDropdown:hover .supportDropBtn {
   border-radius: var(--ifm-badge-border-radius);
 }

From e4b51ad4e52eacf1bbafb7d7fa77747ce52edd7c Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Wed, 5 Mar 2025 20:43:42 +0900
Subject: [PATCH 31/56] Revised wording in dropdown

---
 src/components/Support/SupportDropdownMenu.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index 2e7373f3..98a972f4 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -130,23 +130,23 @@ If applicable, add screenshots to help explain your problem.
           <div>
             <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
               <b>{isJapanese ? "テクニカルサポートに問い合わせ" : "Contact technical support"}</b><br />
-              {isJapanese ? "エンタープライズのお客様向け" : "For Enterprise customers"}
+              {isJapanese ? "商用ライセンスをご契約のお客様のみご利用いただけます。" : "Available only to customers with a commercial license."}
             </a>
           </div>
           <hr />
           <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
             <b>{isJapanese ? "Stack Overflow をチェック" : "Check Stack Overflow"}</b><br />
-            {isJapanese ? "コミュニティ向けの質問" : "For questions to the community"}
+            {isJapanese ? "すべてのユーザーがご利用いただけます。" : "Available to all users."}
           </a>
           <hr />
           <a href="#" onClick={openModal}>
-            <b>{isJapanese ? "AI に聞く (実験的)" : "Ask AI (experimental)"}</b><br />
-            {isJapanese ? "Scalar メンバーシッププログラム向け" : "For Scalar Membership Program members"}
+            <b>{isJapanese ? "AI に聞く (試験運用中)" : "Ask AI (experimental)"}</b><br />
+            {isJapanese ? "Scalar Membership Programにご参加の方のみご利用いただけます。" : "Available only to members of the Scalar Membership Program."}
           </a>
           <hr />
           <a href={githubIssueUrl} target="_blank" rel="noopener noreferrer">
             <b>{isJapanese ? "ドキュメントの問題を報告" : "Report doc issue"}</b><br />
-            {isJapanese ? "このページに関する問題を報告" : "For reporting an issue on this page"}
+            {isJapanese ? "このページについて何かお気づきの点がありましたら、こちらから報告いただけます。" : "If you have any feedback about this page, please submit an issue."}
           </a>
         </div>
       )}

From b49c1e658aaa44d3804ee3e95d8d8ba70796baa6 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Wed, 5 Mar 2025 20:44:30 +0900
Subject: [PATCH 32/56] Update font style and link behavior

---
 src/components/Support/SupportDropdownMenu.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index 98a972f4..2bffe2e7 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -122,7 +122,7 @@ If applicable, add screenshots to help explain your problem.
   return (
     <div className="supportDropdown" ref={dropdownRef}>
       <button className="supportDropBtn" onClick={toggleDropdown}>
-        {isJapanese ? "何かお困りですか?" : "Need help?"} <FontAwesomeIcon icon={faChevronDown} fontSize={12} />
+        {isJapanese ? "何かお困りですか?" : "Need help?"} <FontAwesomeIcon icon={faChevronDown} />
       </button>
 
       {isOpen && (
@@ -134,7 +134,7 @@ If applicable, add screenshots to help explain your problem.
             </a>
           </div>
           <hr />
-          <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank">
+          <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank" rel="noopener noreferrer">
             <b>{isJapanese ? "Stack Overflow をチェック" : "Check Stack Overflow"}</b><br />
             {isJapanese ? "すべてのユーザーがご利用いただけます。" : "Available to all users."}
           </a>

From a2baebdfc44e49969de8174fffa1915182d09185 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 17:05:03 +0900
Subject: [PATCH 33/56] Refactor support dropdown to fix errors on build

This refactor is necessary because the error `[cause]: TypeError: Layout_styles_module_default is not a function` occurred. After trying to fix this issue by changing the import for **styles.module.css** to the global **custom.css** file instead, the error `[cause]: ReferenceError: Cannot access 'SupportDropdownMenu' before initialization` occurred. This refactor resolves those issues by ensuring that the support dropdown menu component is initialized first before the Layout component is built.
---
 .../Support/SupportDropdownMenu.tsx           | 86 ++++++++++---------
 src/theme/DocItem/Layout/index.tsx            | 59 +++++++------
 2 files changed, 75 insertions(+), 70 deletions(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index 2bffe2e7..6af50869 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -1,33 +1,35 @@
-import React, { useState, useEffect, useRef } from 'react';
-import AssistantModal from './AssistantModal'; // Import the AssistantModal component for the chatbot.
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // Import the FontAwesomeIcon component.
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons'; // Import the icon.
+import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
-import { useLocation } from "@docusaurus/router"; // Import for location detection.
+import { useLocation } from "@docusaurus/router";
+
+// Lazy-load AssistantModal
+const AssistantModal = lazy(() => import('./AssistantModal'));
 
 const SupportDropdownMenu: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false); // For dropdown visibility
-  const [isModalOpen, setIsModalOpen] = useState(false); // For modal visibility
-  const [storedUrl, setStoredUrl] = useState<string | null>(null); // For storing the URL
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [storedUrl, setStoredUrl] = useState<string | null>(null);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
   const location = useLocation();
 
   // Get document metadata from Docusaurus.
   const { metadata } = useDoc();
-  const docTitle = metadata?.title || "Issue with documentation page"; // Use document title or fallback.
+  const docTitle: string = metadata?.title || "Issue with documentation page";
 
   // Detect the language based on the URL path.
-  const isJapanese = location.pathname.startsWith("/ja-jp");
+  const isJapanese: boolean = location.pathname.startsWith("/ja-jp");
 
   useEffect(() => {
-    // Store the current URL in localStorage when the component first mounts.
-    const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
-    localStorage.setItem("currentUrl", currentUrl);
-
-    // Retrieve stored URL (if available).
-    const savedUrl = localStorage.getItem("currentUrl");
-    if (savedUrl) {
-      setStoredUrl(savedUrl);
+    if (typeof window !== "undefined") {
+      const currentUrl = `https://scalardb.scalar-labs.com${location.pathname}`;
+      localStorage.setItem("currentUrl", currentUrl);
+
+      const savedUrl = localStorage.getItem("currentUrl");
+      if (savedUrl) {
+        setStoredUrl(savedUrl);
+      }
     }
   }, [location]);
 
@@ -35,8 +37,8 @@ const SupportDropdownMenu: React.FC = () => {
     setIsOpen((prev) => !prev);
   };
 
-  const openModal = (event: React.MouseEvent) => {
-    event.preventDefault(); // Prevent default anchor behavior.
+  const openModal = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
     setIsModalOpen(true);
     setIsOpen(false);
   };
@@ -46,23 +48,23 @@ const SupportDropdownMenu: React.FC = () => {
   };
 
   const handleSupportClick = () => {
-    // Get the stored URL or fall back to the current URL.
-    const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
-    const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
+    if (typeof window !== "undefined") {
+      const finalUrl = storedUrl || `https://scalardb.scalar-labs.com${location.pathname}`;
+      const reportUrl = `https://support.scalar-labs.com/hc/ja/requests/new?ticket_form_id=8641483507983&tf_11847415366927=${encodeURIComponent(finalUrl)}`;
 
-    // Open the support link in a new tab.
-    window.open(reportUrl, "_blank");
+      window.open(reportUrl, "_blank");
+    }
   };
 
-  // Generate GitHub issue URL dynamically.
-  const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
-  const issueTitle = encodeURIComponent(
-    isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
-  );
+  const githubIssueUrl: string = typeof window !== "undefined" ? (() => {
+    const repoUrl = "https://github.com/scalar-labs/docs-scalardb/issues/new";
+    const issueTitle = encodeURIComponent(
+      isJapanese ? `フィードバック: \`${docTitle}\` ページ` : `Feedback: \`${docTitle}\` page`
+    );
 
-  const issueBody = encodeURIComponent(
-    isJapanese
-      ? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
+    const issueBody = encodeURIComponent(
+      isJapanese
+        ? `**ドキュメントページの URL:** ${window.location.href.replace(/#.*$/, '')}
 
 ## 期待される動作
 
@@ -80,7 +82,7 @@ const SupportDropdownMenu: React.FC = () => {
 
 該当する場合は、スクリーンショットを添付してください。
 `
-      : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
+        : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
 
 ## Expected behavior
 
@@ -98,13 +100,13 @@ If the issue is reproducible, please list the steps to reproduce it.
 
 If applicable, add screenshots to help explain your problem.
 `
-  );
+    );
 
-  const githubIssueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+    return `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+  })() : "#";
 
-  // Close dropdown when clicking outside of it.
   useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
+    function handleClickOutside(event: MouseEvent | Event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setIsOpen(false);
       }
@@ -151,7 +153,11 @@ If applicable, add screenshots to help explain your problem.
         </div>
       )}
 
-      {isModalOpen && <AssistantModal isOpen={isModalOpen} onClose={closeModal} />}
+      {isModalOpen && (
+        <Suspense fallback={<div>Loading...</div>}>
+          <AssistantModal isOpen={isModalOpen} onClose={closeModal} />
+        </Suspense>
+      )}
     </div>
   );
 };
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 59e17ad7..976f8b6a 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -1,7 +1,8 @@
-import React, {type ReactNode} from 'react';
+import SupportDropdownMenu from '../../../components/Support/SupportDropdownMenu';
+import React from 'react';
 import clsx from 'clsx';
-import {useWindowSize} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import { useWindowSize } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
 import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -11,40 +12,41 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemContent from '@theme/DocItem/Content';
 import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import ContentVisibility from '@theme/ContentVisibility';
-import type {Props} from '@theme/DocItem/Layout';
-import SupportDropdownMenu from '../../../components/Support/SupportDropdownMenu'; // Import the support dropdown component.
 
 import styles from './styles.module.css';
 
-/**
- * Decide if the ToC should be rendered, on mobile or desktop viewports.
- */
-function useDocTOC() {
-  const {frontMatter, toc} = useDoc();
-  const windowSize = useWindowSize();
+// Define the type for the useDocTOC return value.
+interface DocTOC {
+  hidden: boolean;
+  mobile?: JSX.Element;
+  desktop?: JSX.Element;
+}
 
+// Type for the DocItemLayout props
+interface DocItemLayoutProps {
+  children: React.ReactNode;
+}
+
+// Hook to handle the Table of Contents visibility and rendering
+function useDocTOC(): DocTOC {
+  const { frontMatter, toc } = useDoc();
+  const windowSize = useWindowSize();
   const hidden = frontMatter.hide_table_of_contents;
   const canRender = !hidden && toc.length > 0;
 
-  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
-
-  const desktop =
-    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
-      <DocItemTOCDesktop />
-    ) : undefined;
-
   return {
     hidden,
-    mobile,
-    desktop,
+    mobile: canRender ? <DocItemTOCMobile /> : undefined,
+    desktop: canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? <DocItemTOCDesktop /> : undefined,
   };
 }
 
-export default function DocItemLayout({children}: Props): ReactNode {
+// DocItemLayout component
+const DocItemLayout: React.FC<DocItemLayoutProps> = ({ children }) => {
   const docTOC = useDocTOC();
-  const {metadata, frontMatter} = useDoc(); // Get the front-matter metadata to check for the `hide_table_of_contents` configuration.
-  const hideTOC = frontMatter.hide_table_of_contents; // Check if the ToC is hidden.
-  const windowSize = useWindowSize(); // Get the current window size.
+  const { metadata, frontMatter } = useDoc();
+  const hideTOC = frontMatter.hide_table_of_contents;
+  const windowSize = useWindowSize();
 
   return (
     <div className="row">
@@ -55,7 +57,6 @@ export default function DocItemLayout({children}: Props): ReactNode {
           <article>
             <DocBreadcrumbs />
             <DocVersionBadge />
-            {/* Show the Support button on mobile. */}
             {windowSize === 'mobile' && (
               <div style={{ display: 'flex', justifyContent: 'left', marginBottom: '1rem' }}>
                 <SupportDropdownMenu />
@@ -69,20 +70,18 @@ export default function DocItemLayout({children}: Props): ReactNode {
         </div>
       </div>
 
-      {/* Ensure the right column always exists, even if there is no ToC. */}
       {!hideTOC && windowSize !== 'mobile' && (
         <div className="col col--3" style={{ position: "relative" }}>
-          {/* Add a wrapper div to make the support dropdown and ToC sticky. */}
           <div style={{ position: "sticky", top: "80px", zIndex: 1 }}>
-            {/* Add the support dropdown above the ToC on desktop. */}
             <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
               <SupportDropdownMenu />
             </div>
-            {/* Render the ToC if one is available. */}
             {docTOC.desktop}
           </div>
         </div>
       )}
     </div>
   );
-}
+};
+
+export default DocItemLayout;

From 35cb4be3a61b061b115e1c510b1da213c3923fac Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 18:32:56 +0900
Subject: [PATCH 34/56] Hide Stack Overflow link

We've decided to not show the Stack Overflow link for now. Commented it out so that we can easily show it later.
---
 src/components/Support/SupportDropdownMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index 6af50869..abf3f800 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -136,7 +136,7 @@ If applicable, add screenshots to help explain your problem.
             </a>
           </div>
           <hr />
-          <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank" rel="noopener noreferrer">
+          {/* <a href="https://stackoverflow.com/questions/tagged/scalardb" target="_blank" rel="noopener noreferrer">
             <b>{isJapanese ? "Stack Overflow をチェック" : "Check Stack Overflow"}</b><br />
             {isJapanese ? "すべてのユーザーがご利用いただけます。" : "Available to all users."}
           </a>

From 65e685f1b94de8dff60af660bbb89f5b122920cb Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 18:34:43 +0900
Subject: [PATCH 35/56] Make dropdown menu appear on hover (instead of on
 click)

Making the dropdown menu appear on hover instead of on click matches the natural behavior of other dropdown menus in Docusaurus.
---
 src/components/Support/SupportDropdownMenu.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index abf3f800..988b364c 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -123,11 +123,10 @@ If applicable, add screenshots to help explain your problem.
 
   return (
     <div className="supportDropdown" ref={dropdownRef}>
-      <button className="supportDropBtn" onClick={toggleDropdown}>
         {isJapanese ? "何かお困りですか?" : "Need help?"} <FontAwesomeIcon icon={faChevronDown} />
+      <button className="supportDropBtn" onMouseOver={toggleDropdown}>
       </button>
 
-      {isOpen && (
         <div className="supportDropdownContent">
           <div>
             <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
@@ -140,7 +139,7 @@ If applicable, add screenshots to help explain your problem.
             <b>{isJapanese ? "Stack Overflow をチェック" : "Check Stack Overflow"}</b><br />
             {isJapanese ? "すべてのユーザーがご利用いただけます。" : "Available to all users."}
           </a>
-          <hr />
+          <hr /> */}
           <a href="#" onClick={openModal}>
             <b>{isJapanese ? "AI に聞く (試験運用中)" : "Ask AI (experimental)"}</b><br />
             {isJapanese ? "Scalar Membership Programにご参加の方のみご利用いただけます。" : "Available only to members of the Scalar Membership Program."}
@@ -151,7 +150,6 @@ If applicable, add screenshots to help explain your problem.
             {isJapanese ? "このページについて何かお気づきの点がありましたら、こちらから報告いただけます。" : "If you have any feedback about this page, please submit an issue."}
           </a>
         </div>
-      )}
 
       {isModalOpen && (
         <Suspense fallback={<div>Loading...</div>}>

From 30ae69ea3590ed637f72364cac0508fca39e1bcf Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 18:36:22 +0900
Subject: [PATCH 36/56] Modify support dropdown menu styles

Styles modified to support on-hover behavior instead of on-click behavior and to make the dropdown transitions match the transitions of other dropdown menus in Docusaurus.
---
 src/css/custom.css | 64 ++++++++++++++++++++++++++++------------------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 6afb79a1..871afbcc 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -258,19 +258,46 @@ html[data-theme="dark"] .tooltip-glossary {
   position: relative;
 }
 
+.supportDropdownContent {
+  visibility: hidden; /* Prevents accidental hover issues */
+  opacity: 0;
+  transform: translateY(-10px); /* Moves up initially */
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+  position: absolute;
+  right: 0;
+  background-color: #f9f9f9;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  color: var(--ifm-color-emphasis-700);
+  font-size: 14px;
+  min-width: 303px;
+  z-index: 1;
+}
+
+/* When hovering, show the dropdown with fade-in & slide down */
+.supportDropdown:hover .supportDropdownContent {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Add a delay before showing the dropdown */
+.supportDropdownContent {
+  transition-delay: 0.1s;
+}
+
 .supportDropBtn {
   align-items: center;
-  background-color: var(--ifm-color-secondary);
-  border: #afafaf 1px solid;
+  background-color: inherit;
+  border: 0;
   border-radius: var(--ifm-badge-border-radius);
-  color: #505050;
+  color: var(--ifm-navbar-link-color);
   cursor: pointer;
   display: flex;
-  font-size: 13.5px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: var(--ifm-font-weight-semibold);
   justify-content: space-between;
-  min-width: 155px;
-  padding: 6px 10px;
+  min-width: 145px;
+  padding: 6px 0;
   text-align: left;
   z-index: 1;
 }
@@ -281,23 +308,10 @@ html[data-theme="dark"] .tooltip-glossary {
 }
 
 .supportDropdown:hover .supportDropBtn {
-  border-radius: var(--ifm-badge-border-radius);
+  color: var(--ifm-color-primary);
 }
 
-.supportDropdownContent {
-  background-color: #f9f9f9;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
-  color: var(--ifm-color-emphasis-700);
-  display: block;
-  font-size: 14px;
-  min-width: 290px;
-  position: absolute;
-  right: 0;
-  z-index: 1;
-}
-
-/* Support dropdown button for mobile screens. */
-@media (max-width: 996px) { /* Adjust breakpoint if needed. */
+@media (max-width: 996px) {
   .supportDropBtn {
     font-size: 15px;
   }
@@ -320,13 +334,13 @@ html[data-theme="dark"] .tooltip-glossary {
 }
 
 html[data-theme="dark"] .supportDropBtn {
-  background-color: #505050;
-  border: #6B7280 1px solid;
+  background-color: inherit;
+  border: 0;
   color: #f9f9f9;
 }
 
 html[data-theme="dark"] .supportDropdownContent {
-  background-color: #505050;
+  background-color: var(--ifm-dropdown-background-color);
 
   a {
     color: #f9f9f9;

From 660416ebe7b0404b0a794991adc51b6db7e28c01 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 18:37:53 +0900
Subject: [PATCH 37/56] Change dropdown arrow icon

Changed the arrow icon to match the same icon used in other dropdown menus in Docusaurus.
---
 src/components/Support/SupportDropdownMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index 988b364c..523522e2 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -123,8 +123,8 @@ If applicable, add screenshots to help explain your problem.
 
   return (
     <div className="supportDropdown" ref={dropdownRef}>
-        {isJapanese ? "何かお困りですか?" : "Need help?"} <FontAwesomeIcon icon={faChevronDown} />
       <button className="supportDropBtn" onMouseOver={toggleDropdown}>
+        {isJapanese ? "何かお困りですか?" : "Need help?"}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-6-6h12z"/></svg>
       </button>
 
         <div className="supportDropdownContent">

From ea8143581ee8edfc043a095fad7fc67483e0295b Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 18:55:46 +0900
Subject: [PATCH 38/56] Fix support dropdown from disappearing

This style keeps the support button dropdown menu open when moving the mouse between the button text and icon.
---
 src/css/custom.css | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 871afbcc..8c6ecb3b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -302,9 +302,8 @@ html[data-theme="dark"] .tooltip-glossary {
   z-index: 1;
 }
 
-.supportDropBtn svg { /* Arrow icon */
-  width: 12px;
-  height: 12px;
+.supportDropBtn svg { /* Keep dropdown open when moving the mouse between text and icon. */
+  pointer-events: none;
 }
 
 .supportDropdown:hover .supportDropBtn {

From ba6018c2fba528d81025d480d30abfb3761f9c0f Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 18:56:01 +0900
Subject: [PATCH 39/56] Put support button styles in alphabetical order

---
 src/css/custom.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 8c6ecb3b..266355cb 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -259,17 +259,17 @@ html[data-theme="dark"] .tooltip-glossary {
 }
 
 .supportDropdownContent {
-  visibility: hidden; /* Prevents accidental hover issues */
-  opacity: 0;
-  transform: translateY(-10px); /* Moves up initially */
-  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
-  position: absolute;
-  right: 0;
   background-color: #f9f9f9;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
   color: var(--ifm-color-emphasis-700);
   font-size: 14px;
   min-width: 303px;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  transform: translateY(-10px); /* Moves up initially */
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+  visibility: hidden; /* Prevents accidental hover issues */
   z-index: 1;
 }
 

From b69c214e1f2a29778262eeea46cead4dee24bfaa Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 18:56:55 +0900
Subject: [PATCH 40/56] Make support button font consistent with other buttons

---
 src/css/custom.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 266355cb..5dabd38c 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -293,7 +293,8 @@ html[data-theme="dark"] .tooltip-glossary {
   color: var(--ifm-navbar-link-color);
   cursor: pointer;
   display: flex;
-  font-size: 14px;
+  font-family: var(--ifm-font-family-base);
+  font-size: 14.5px;
   font-weight: var(--ifm-font-weight-semibold);
   justify-content: space-between;
   min-width: 145px;

From 43fcb00dab0cffb041d148d1c1cad69d2d9beb57 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 18:57:50 +0900
Subject: [PATCH 41/56] Add `some` to English button

Simply `Need help?` results in the arrow being a little too far away from the text. Being a little casual here fixes that.
---
 src/components/Support/SupportDropdownMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index 523522e2..fd3d129f 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -124,7 +124,7 @@ If applicable, add screenshots to help explain your problem.
   return (
     <div className="supportDropdown" ref={dropdownRef}>
       <button className="supportDropBtn" onMouseOver={toggleDropdown}>
-        {isJapanese ? "何かお困りですか?" : "Need help?"}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-6-6h12z"/></svg>
+        {isJapanese ? "何かお困りですか?" : "Need some help?"}<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16l-6-6h12z"/></svg>
       </button>
 
         <div className="supportDropdownContent">

From 8eb3b4262e3700c894a4f6e8776203526f0a08c7 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 19:00:03 +0900
Subject: [PATCH 42/56] Remove comments that were for quick, personal reference

---
 src/css/custom.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 5dabd38c..97c7b898 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -267,20 +267,18 @@ html[data-theme="dark"] .tooltip-glossary {
   opacity: 0;
   position: absolute;
   right: 0;
-  transform: translateY(-10px); /* Moves up initially */
+  transform: translateY(-10px);
   transition: opacity 0.3s ease-out, transform 0.3s ease-out;
-  visibility: hidden; /* Prevents accidental hover issues */
+  visibility: hidden;
   z-index: 1;
 }
 
-/* When hovering, show the dropdown with fade-in & slide down */
 .supportDropdown:hover .supportDropdownContent {
   visibility: visible;
   opacity: 1;
   transform: translateY(0);
 }
 
-/* Add a delay before showing the dropdown */
 .supportDropdownContent {
   transition-delay: 0.1s;
 }

From b889d43989a817380e6a34b957bd72e325ed0985 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Thu, 6 Mar 2025 19:07:41 +0900
Subject: [PATCH 43/56] Add rounded corners to dropdown and on link hover

---
 src/css/custom.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 97c7b898..1d638bda 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -260,11 +260,14 @@ html[data-theme="dark"] .tooltip-glossary {
 
 .supportDropdownContent {
   background-color: #f9f9f9;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  box-shadow: var(--ifm-global-shadow-md);
   color: var(--ifm-color-emphasis-700);
   font-size: 14px;
   min-width: 303px;
   opacity: 0;
+  overflow: hidden;
+  padding: 8px 0px;
   position: absolute;
   right: 0;
   transform: translateY(-10px);
@@ -323,12 +326,15 @@ html[data-theme="dark"] .tooltip-glossary {
 .supportDropdownContent a {
   color: black;
   display: block;
-  padding: 6px 12px;
+  margin: 4px 10px;
+  padding: 4px 10px;
   text-decoration: none;
 }
 
 .supportDropdownContent a:hover {
   background-color: var(--ifm-dropdown-hover-background-color);
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 html[data-theme="dark"] .supportDropBtn {

From 18027a54a7c19e1c9cf25d29d5bc470173a5c1dc Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 18:58:09 +0900
Subject: [PATCH 44/56] Move file

---
 src/components/{Support => ja-jp}/AssistantModal.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{Support => ja-jp}/AssistantModal.tsx (100%)

diff --git a/src/components/Support/AssistantModal.tsx b/src/components/ja-jp/AssistantModal.tsx
similarity index 100%
rename from src/components/Support/AssistantModal.tsx
rename to src/components/ja-jp/AssistantModal.tsx

From d15ad04546a85d5be81bd3acdb8519105ff32805 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 18:58:15 +0900
Subject: [PATCH 45/56] Move file

---
 src/components/{Support => }/SupportDropdownMenu.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{Support => }/SupportDropdownMenu.tsx (100%)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/SupportDropdownMenu.tsx
similarity index 100%
rename from src/components/Support/SupportDropdownMenu.tsx
rename to src/components/SupportDropdownMenu.tsx

From b530b678827cc6e0c3a98595311216e9058824e4 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 18:59:17 +0900
Subject: [PATCH 46/56] Update import

The component was move in 18027a54a7c19e1c9cf25d29d5bc470173a5c1dc, so this import needs to be updated to reflect that.
---
 src/theme/DocItem/Layout/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 976f8b6a..8ba73fe1 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -1,4 +1,4 @@
-import SupportDropdownMenu from '../../../components/Support/SupportDropdownMenu';
+import SupportDropdownMenu from '../../../components/SupportDropdownMenu';
 import React from 'react';
 import clsx from 'clsx';
 import { useWindowSize } from '@docusaurus/theme-common';

From 9122b267479ed64e349fc1048beef095ac995b32 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 19:12:41 +0900
Subject: [PATCH 47/56] Create AssistantModal.tsx

---
 src/components/en-us/AssistantModal.tsx | 64 +++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/components/en-us/AssistantModal.tsx

diff --git a/src/components/en-us/AssistantModal.tsx b/src/components/en-us/AssistantModal.tsx
new file mode 100644
index 00000000..8467c75f
--- /dev/null
+++ b/src/components/en-us/AssistantModal.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Standard } from "@typebot.io/react";
+
+function AssistantModal({ isOpen, onClose }) {
+  if (!isOpen) return null; // Prevent modal from rendering when isOpen is false.
+
+  // Get the current page URL.
+  const currentUrl = window.location.href;
+
+  return (
+    <div className="modal" style={styles.modal}>
+      <div className="modal-content" style={styles.modalContent}>
+        {/* Close the button. */}
+        <span className="close" onClick={onClose} style={styles.closeButton}>
+          &times;
+        </span>
+        <Standard
+          typebot="en-us-scalar-docs-ai-assistant-for-scalar-membership-program-members-201712"
+          style={{ width: "100%", height: "600px" }}
+          prefilledVariables={{
+            "Current page URL": `${currentUrl}`, // Pass page URL as a query parameter.
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const styles = {
+  modal: {
+    display: "block",
+    position: "fixed",
+    zIndex: 1000,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+  modalContent: {
+    backgroundColor: "#fff",
+    margin: "10% auto",
+    padding: "20px",
+    borderRadius: "10px",
+    width: "90%",
+    maxWidth: "900px",
+    position: "relative", // Allow absolute positioning of the close button.
+  },
+  closeButton: {
+    position: "absolute",
+    top: "10px",
+    right: "20px",
+    fontSize: "30px",
+    fontWeight: "bold",
+    cursor: "pointer",
+    color: "#333",
+    backgroundColor: "transparent",
+    border: "none",
+    padding: "0",
+    zIndex: 1100, // Ensure the close button is above the modal content.
+  },
+};
+
+export default AssistantModal;

From 84f2b1190610e6a52a1ff929f976450f90c27676 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 19:12:55 +0900
Subject: [PATCH 48/56] Update link to chatbot

---
 src/components/ja-jp/AssistantModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ja-jp/AssistantModal.tsx b/src/components/ja-jp/AssistantModal.tsx
index 0d987c01..7da4d191 100644
--- a/src/components/ja-jp/AssistantModal.tsx
+++ b/src/components/ja-jp/AssistantModal.tsx
@@ -15,7 +15,7 @@ function AssistantModal({ isOpen, onClose }) {
           &times;
         </span>
         <Standard
-          typebot="test-authentication-scalar-db-scalar-dl-ai-chatbot-i98jxsg"
+          typebot="ja-jp-scalar-docs-ai-assistant-for-scalar-membership-program-members-201712"
           style={{ width: "100%", height: "600px" }}
           prefilledVariables={{
             "Current page URL": `${currentUrl}`, // Pass page URL as a query parameter.

From 94432d153f8421d3dbece6a4c1b0cd6f4845fb72 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 20:03:56 +0900
Subject: [PATCH 49/56] Remove Font Awesome plugin

We decided not to use Font Awesome icons in this component, so we don't need to refer to this plugin here.
---
 src/components/SupportDropdownMenu.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/SupportDropdownMenu.tsx b/src/components/SupportDropdownMenu.tsx
index fd3d129f..3b713077 100644
--- a/src/components/SupportDropdownMenu.tsx
+++ b/src/components/SupportDropdownMenu.tsx
@@ -1,6 +1,4 @@
 import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
 import { useLocation } from "@docusaurus/router";
 

From b160ea86cc9b194732c20da24715a1b371f3043b Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 20:11:59 +0900
Subject: [PATCH 50/56] Show AI assistant based on language

---
 src/components/ja-jp/AssistantModal.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ja-jp/AssistantModal.tsx b/src/components/ja-jp/AssistantModal.tsx
index 7da4d191..a8fd63f2 100644
--- a/src/components/ja-jp/AssistantModal.tsx
+++ b/src/components/ja-jp/AssistantModal.tsx
@@ -7,6 +7,9 @@ function AssistantModal({ isOpen, onClose }) {
   // Get the current page URL.
   const currentUrl = window.location.href;
 
+  // Check if the user is on the Japanese documentation page.
+  const isJapanese = currentUrl.includes("/ja-jp");
+
   return (
     <div className="modal" style={styles.modal}>
       <div className="modal-content" style={styles.modalContent}>
@@ -14,8 +17,13 @@ function AssistantModal({ isOpen, onClose }) {
         <span className="close" onClick={onClose} style={styles.closeButton}>
           &times;
         </span>
+
+        {/* Conditionally render the Typebot based on language. */}
         <Standard
-          typebot="ja-jp-scalar-docs-ai-assistant-for-scalar-membership-program-members-201712"
+          typebot={isJapanese
+            ? "ja-jp-scalar-docs-ai-assistant-for-scalar-membership-program-members-201712"
+            : "en-us-scalar-docs-ai-assistant-for-scalar-membership-program-members-201712"
+          }
           style={{ width: "100%", height: "600px" }}
           prefilledVariables={{
             "Current page URL": `${currentUrl}`, // Pass page URL as a query parameter.

From 5b45f3adc7425ff911750ed20f99934c75c58d14 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 20:17:53 +0900
Subject: [PATCH 51/56] Move back to `Support` folder

---
 src/components/{ja-jp => Support}/AssistantModal.tsx | 0
 src/components/{ => Support}/SupportDropdownMenu.tsx | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/{ja-jp => Support}/AssistantModal.tsx (100%)
 rename src/components/{ => Support}/SupportDropdownMenu.tsx (99%)

diff --git a/src/components/ja-jp/AssistantModal.tsx b/src/components/Support/AssistantModal.tsx
similarity index 100%
rename from src/components/ja-jp/AssistantModal.tsx
rename to src/components/Support/AssistantModal.tsx
diff --git a/src/components/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
similarity index 99%
rename from src/components/SupportDropdownMenu.tsx
rename to src/components/Support/SupportDropdownMenu.tsx
index 3b713077..cf9a5c86 100644
--- a/src/components/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from '
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
 import { useLocation } from "@docusaurus/router";
 
-// Lazy-load AssistantModal
+// Lazy-load AssistantModal.
 const AssistantModal = lazy(() => import('./AssistantModal'));
 
 const SupportDropdownMenu: React.FC = () => {

From 260cd35d6566d00588c8b856238370933e75db64 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 20:20:02 +0900
Subject: [PATCH 52/56] Delete AssistantModal.tsx

This file isn't needed since we can manage the AI assistants in a single file: b160ea86cc9b194732c20da24715a1b371f3043b
---
 src/components/en-us/AssistantModal.tsx | 64 -------------------------
 1 file changed, 64 deletions(-)
 delete mode 100644 src/components/en-us/AssistantModal.tsx

diff --git a/src/components/en-us/AssistantModal.tsx b/src/components/en-us/AssistantModal.tsx
deleted file mode 100644
index 8467c75f..00000000
--- a/src/components/en-us/AssistantModal.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import { Standard } from "@typebot.io/react";
-
-function AssistantModal({ isOpen, onClose }) {
-  if (!isOpen) return null; // Prevent modal from rendering when isOpen is false.
-
-  // Get the current page URL.
-  const currentUrl = window.location.href;
-
-  return (
-    <div className="modal" style={styles.modal}>
-      <div className="modal-content" style={styles.modalContent}>
-        {/* Close the button. */}
-        <span className="close" onClick={onClose} style={styles.closeButton}>
-          &times;
-        </span>
-        <Standard
-          typebot="en-us-scalar-docs-ai-assistant-for-scalar-membership-program-members-201712"
-          style={{ width: "100%", height: "600px" }}
-          prefilledVariables={{
-            "Current page URL": `${currentUrl}`, // Pass page URL as a query parameter.
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-const styles = {
-  modal: {
-    display: "block",
-    position: "fixed",
-    zIndex: 1000,
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(0, 0, 0, 0.7)",
-  },
-  modalContent: {
-    backgroundColor: "#fff",
-    margin: "10% auto",
-    padding: "20px",
-    borderRadius: "10px",
-    width: "90%",
-    maxWidth: "900px",
-    position: "relative", // Allow absolute positioning of the close button.
-  },
-  closeButton: {
-    position: "absolute",
-    top: "10px",
-    right: "20px",
-    fontSize: "30px",
-    fontWeight: "bold",
-    cursor: "pointer",
-    color: "#333",
-    backgroundColor: "transparent",
-    border: "none",
-    padding: "0",
-    zIndex: 1100, // Ensure the close button is above the modal content.
-  },
-};
-
-export default AssistantModal;

From e391b916443b84dd6e0d74565d032b0ac68a3895 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Tue, 11 Mar 2025 20:20:52 +0900
Subject: [PATCH 53/56] Revert "Update import"

This reverts commit b530b678827cc6e0c3a98595311216e9058824e4.
---
 src/theme/DocItem/Layout/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 8ba73fe1..976f8b6a 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -1,4 +1,4 @@
-import SupportDropdownMenu from '../../../components/SupportDropdownMenu';
+import SupportDropdownMenu from '../../../components/Support/SupportDropdownMenu';
 import React from 'react';
 import clsx from 'clsx';
 import { useWindowSize } from '@docusaurus/theme-common';

From a44b781cc4f62d4b56394a0de245fcd737384a44 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Wed, 12 Mar 2025 15:47:15 +0900
Subject: [PATCH 54/56] Fix GitHub issue link

The GitHub issue link was opening a new tab with the same page that the visitor was on.
---
 src/components/Support/SupportDropdownMenu.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Support/SupportDropdownMenu.tsx b/src/components/Support/SupportDropdownMenu.tsx
index cf9a5c86..f66c35d4 100644
--- a/src/components/Support/SupportDropdownMenu.tsx
+++ b/src/components/Support/SupportDropdownMenu.tsx
@@ -80,7 +80,7 @@ const SupportDropdownMenu: React.FC = () => {
 
 該当する場合は、スクリーンショットを添付してください。
 `
-        : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
+    : `**Documentation page URL:** ${window.location.href.replace(/#.*$/, '')}
 
 ## Expected behavior
 
@@ -100,7 +100,11 @@ If applicable, add screenshots to help explain your problem.
 `
     );
 
-    return `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+    const issueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+
+    console.log("GitHub Issue URL: ", issueUrl);  // Debugging line
+
+    return issueUrl;
   })() : "#";
 
   useEffect(() => {

From 664d5d823390abd69f29b6473775cab0113dcf32 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Wed, 12 Mar 2025 19:57:53 +0900
Subject: [PATCH 55/56] Change dropdown item font color

Change dropdown item font color to match the default color of other fonts in Docusaurus.
---
 src/css/custom.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/custom.css b/src/css/custom.css
index 1d638bda..4822ed61 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -324,7 +324,7 @@ html[data-theme="dark"] .tooltip-glossary {
 }
 
 .supportDropdownContent a {
-  color: black;
+  color: var(--ifm-dropdown-link-color);
   display: block;
   margin: 4px 10px;
   padding: 4px 10px;

From 9377f6ce9e76e4aaca536f83877fce875a038ae9 Mon Sep 17 00:00:00 2001
From: Josh Wong <23216828+josh-wong@users.noreply.github.com>
Date: Fri, 14 Mar 2025 21:30:23 +0900
Subject: [PATCH 56/56] Hide support dropdown menu from home page

---
 src/theme/DocItem/Layout/index.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
index 976f8b6a..b191b0d6 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -48,6 +48,12 @@ const DocItemLayout: React.FC<DocItemLayoutProps> = ({ children }) => {
   const hideTOC = frontMatter.hide_table_of_contents;
   const windowSize = useWindowSize();
 
+  // Check if the current page is the home page or a version homepage.
+  const isHomePage = metadata.permalink === '/docs/latest/' || 
+                     /^\/docs\/\d+\.\d+\/$/.test(metadata.permalink) || 
+                     metadata.permalink === '/ja-jp/docs/latest/' || 
+                     /^\/ja-jp\/docs\/\d+\.\d+\/$/.test(metadata.permalink);
+
   return (
     <div className="row">
       <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
@@ -57,7 +63,7 @@ const DocItemLayout: React.FC<DocItemLayoutProps> = ({ children }) => {
           <article>
             <DocBreadcrumbs />
             <DocVersionBadge />
-            {windowSize === 'mobile' && (
+            {windowSize === 'mobile' && !isHomePage && (
               <div style={{ display: 'flex', justifyContent: 'left', marginBottom: '1rem' }}>
                 <SupportDropdownMenu />
               </div>
@@ -73,9 +79,11 @@ const DocItemLayout: React.FC<DocItemLayoutProps> = ({ children }) => {
       {!hideTOC && windowSize !== 'mobile' && (
         <div className="col col--3" style={{ position: "relative" }}>
           <div style={{ position: "sticky", top: "80px", zIndex: 1 }}>
-            <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
-              <SupportDropdownMenu />
-            </div>
+            {!isHomePage && (
+              <div style={{ display: 'flex', justifyContent: 'flex-start', padding: '0px 17px', right: '0' }}>
+                <SupportDropdownMenu />
+              </div>
+            )}
             {docTOC.desktop}
           </div>
         </div>