Add support dropdown menu to right-hand sidebar of pages

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.7.0",

src/components/Support/AssistantModal.tsx

@@ -0,0 +1,72 @@
+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;
+
+  // 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}>
+        {/* Close the button. */}
+        <span className="close" onClick={onClose} style={styles.closeButton}>
+          &times;
+        </span>
+
+        {/* Conditionally render the Typebot based on language. */}
+        <Standard
+          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.
+          }}
+        />
+      </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;

src/components/Support/SupportDropdownMenu.tsx

@@ -0,0 +1,165 @@
+import React, { useState, useEffect, useRef, lazy, Suspense, MouseEvent } from 'react';
+import { useDoc } from '@docusaurus/plugin-content-docs/client';
+import { useLocation } from "@docusaurus/router";
+
+// Lazy-load AssistantModal.
+const AssistantModal = lazy(() => import('./AssistantModal'));
+
+const SupportDropdownMenu: React.FC = () => {
+  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: string = metadata?.title || "Issue with documentation page";
+
+  // Detect the language based on the URL path.
+  const isJapanese: boolean = location.pathname.startsWith("/ja-jp");
+
+  useEffect(() => {
+    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]);
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const openModal = (event: MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    setIsModalOpen(true);
+    setIsOpen(false);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleSupportClick = () => {
+    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)}`;
+
+      window.open(reportUrl, "_blank");
+    }
+  };
+
+  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(/#.*$/, '')}
+
+## 期待される動作
+
+どのような動作を期待しましたか？
+
+## 問題の説明
+
+問題の内容をわかりやすく説明してください。
+
+### 再現手順 (該当する場合)
+
+問題を再現できる場合、手順を記載してください。
+
+### スクリーンショット (該当する場合)
+
+該当する場合は、スクリーンショットを添付してください。
+`
+    : `**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.
+`
+    );
+
+    const issueUrl = `${repoUrl}?title=${issueTitle}&body=${issueBody}&labels=documentation`;
+
+    console.log("GitHub Issue URL: ", issueUrl);  // Debugging line
+
+    return issueUrl;
+  })() : "#";
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent | Event) {
+      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="supportDropdown" ref={dropdownRef}>
+      <button className="supportDropBtn" onMouseOver={toggleDropdown}>
+        {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">
+          <div>
+            <a href="#" onClick={handleSupportClick} rel="noopener noreferrer">
+              <b>{isJapanese ? "テクニカルサポートに問い合わせ" : "Contact technical support"}</b><br />
+              {isJapanese ? "商用ライセンスをご契約のお客様のみご利用いただけます。" : "Available only to customers with a commercial license."}
+            </a>
+          </div>
+          <hr />
+          {/* <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>
+          <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."}
+          </a>
+          <hr />
+          <a href={githubIssueUrl} target="_blank" rel="noopener noreferrer">
+            <b>{isJapanese ? "ドキュメントの問題を報告" : "Report doc issue"}</b><br />
+            {isJapanese ? "このページについて何かお気づきの点がありましたら、こちらから報告いただけます。" : "If you have any feedback about this page, please submit an issue."}
+          </a>
+        </div>
+
+      {isModalOpen && (
+        <Suspense fallback={<div>Loading...</div>}>
+          <AssistantModal isOpen={isModalOpen} onClose={closeModal} />
+        </Suspense>
+      )}
+    </div>
+  );
+};
+
+export default SupportDropdownMenu;

src/css/custom.css

@@ -251,3 +251,108 @@ html[data-theme="dark"] .tooltip-glossary {
     width: 333px !important;
   }
 }
+
+/* Support button and dropdown */
+.supportDropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.supportDropdownContent {
+  background-color: #f9f9f9;
+  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);
+  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.supportDropdown:hover .supportDropdownContent {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.supportDropdownContent {
+  transition-delay: 0.1s;
+}
+
+.supportDropBtn {
+  align-items: center;
+  background-color: inherit;
+  border: 0;
+  border-radius: var(--ifm-badge-border-radius);
+  color: var(--ifm-navbar-link-color);
+  cursor: pointer;
+  display: flex;
+  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;
+  padding: 6px 0;
+  text-align: left;
+  z-index: 1;
+}
+
+.supportDropBtn svg { /* Keep dropdown open when moving the mouse between text and icon. */
+  pointer-events: none;
+}
+
+.supportDropdown:hover .supportDropBtn {
+  color: var(--ifm-color-primary);
+}
+
+@media (max-width: 996px) {
+  .supportDropBtn {
+    font-size: 15px;
+  }
+  .supportDropdownContent {
+    font-size: 15px;
+    left: 0;
+    min-width: 320px;
+  }
+}
+
+.supportDropdownContent a {
+  color: var(--ifm-dropdown-link-color);
+  display: block;
+  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 {
+  background-color: inherit;
+  border: 0;
+  color: #f9f9f9;
+}
+
+html[data-theme="dark"] .supportDropdownContent {
+  background-color: var(--ifm-dropdown-background-color);
+
+  a {
+    color: #f9f9f9;
+  }
+}
+
+hr {
+  text-align: center;
+  margin: auto;
+  max-width: 91%;
+}