ui: add 'open in Claude/Chatgpt' to page options (#23110)

Author: ArthurFlag

assets/css/utilities.css

@@ -234,7 +234,11 @@
 }
 
 @utility sub-button {
-  @apply flex w-full items-start gap-2 rounded-sm px-2 py-2 text-left text-gray-700 transition-colors hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800;
+  @apply flex w-full items-center gap-2 rounded-sm px-2 py-2 text-left text-gray-600 transition-colors hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-800;
+}
+
+@utility dropdown-base {
+  @apply rounded-sm border border-gray-300 bg-white text-gray-600 dark:border-gray-300 dark:bg-gray-900 dark:text-gray-100;
 }
 
 @utility toc {

assets/icons/claude.svg

@@ -97,6 +97,8 @@
       "Okta",
       "Okta-SAML",
       "Old-Dockerfile",
+      "On-Unix-environments",
+      "On-Windows",
       "Other-providers",
       "PHP",
       "PowerShell",
@@ -193,7 +195,6 @@
       "border-gray-200",
       "border-gray-300",
       "border-gray-400",
-      "border-gray-600",
       "border-green-400",
       "border-l-2",
       "border-l-magenta-light",
@@ -279,6 +280,7 @@
       "download-links",
       "download-links-subcontainer",
       "drop-shadow",
+      "dropdown-base",
       "duration-300",
       "fill-blue",
       "fixed",
@@ -578,6 +580,7 @@
       "w-2",
       "w-5",
       "w-56",
+      "w-65",
       "w-8",
       "w-[1200px]",
       "w-fit",

assets/icons/openai.svg

@@ -1,7 +1,6 @@
 <details id="markdownDropdown" class="ml-3 group relative z-10 inline-block" data-heap-id="markdown-dropdown">
     <summary
-      class="inline-flex cursor-pointer items-center gap-0 rounded-sm border border-gray-600 bg-white  py-1 pl-2
-      text-base font-semibold text-gray-600 transition-colors hover:bg-gray-50 dark:border-gray-50 dark:bg-gray-950 dark:text-gray-100 dark:hover:bg-gray-900"
+      class="dropdown-base hover:bg-gray-50 dark:hover:bg-gray-900 inline-flex cursor-pointer items-center gap-0 py-1 pl-2 text-sm font-semibold transition-colors"
       data-heap-id="markdown-dropdown-toggle"
     >
       <span class="font-normal">Page options</span>
@@ -14,7 +13,7 @@
 
     <!-- Dropdown menu -->
     <div
-      class="absolute right-0 z-50 mt-1 w-56 origin-top-right rounded-sm border border-gray-300 bg-white p-2 text-sm text-black shadow-md [display:none] group-open:[display:block] dark:border-gray-100 dark:text-gray-100 dark:bg-gray-950"
+      class="dropdown-base absolute right-0 z-50 mt-1 w-65 origin-top-right p-2 text-sm shadow-md [display:none] group-open:[display:block]"
       data-heap-id="markdown-dropdown-menu"
     >
       <button
@@ -58,6 +57,32 @@
           <div class="text-base">Ask questions with Docs AI</div>
         </div>
       </button>
+       <button
+        onclick="openInChatGPT()"
+        data-heap-id="search-docs-ai-button"
+        class="sub-button"
+      >
+        <span class="icon-svg mt-[2px] text-base leading-none">
+          {{ partial "icon" "/icons/openai.svg" }}
+        </span>
+        <div class="leading-tight">
+          <div class="text-base">Open in ChatGPT</div>
+        </div>
+      </button>
+
+       <button
+        onclick="openInClaude()"
+        data-heap-id="search-docs-ai-button"
+        class="sub-button"
+      >
+        <span class="icon-svg mt-[2px] text-base leading-none">
+          {{ partial "icon" "/icons/claude.svg" }}
+        </span>
+        <div class="leading-tight">
+          <div class="text-base">Open in Claude</div>
+        </div>
+      </button>
+
     </div>
   </details>
 
@@ -106,6 +131,32 @@
       }
     }
 
+    function openInChatGPT() {
+      fetch(getCurrentPlaintextUrl())
+        .then((response) => response.text())
+        .then((text) => {
+          const encodedText = encodeURIComponent(text);
+          const chatGPTUrl = `https://chat.openai.com/?q=${encodedText}`;
+          window.open(chatGPTUrl, "_blank");
+        })
+        .catch((err) => {
+          console.error("Error opening in ChatGPT:", err);
+        });
+    }
+
+    function openInClaude() {
+      fetch(getCurrentPlaintextUrl())
+        .then((response) => response.text())
+        .then((text) => {
+          const encodedText = encodeURIComponent(text);
+        const claudeUrl = `https://claude.ai/new?q=${encodedText}`;https://claude.ai/new?q=%22hey%22
+        window.open(claudeUrl, '_blank');
+        })
+        .catch((err) => {
+          console.error("Error opening in Claude:", err);
+        });
+    }
+
     document.addEventListener("click", function (event) {
       const dropdown = document.getElementById("markdownDropdown");