Merge branch 'main' into DOC-2571

Author: AyushBherwani1998

package-lock.json

@@ -28,6 +28,9 @@
     "**/*.{md,mdx,ts,js,tsx,jsx,json}": "npm run format"
   },
   "dependencies": {
+    "@docsearch/css": "4.4.0",
+    "@docsearch/react": "4.4.0",
+    "@docsearch/sidepanel": "4.4.0",
     "@apidevtools/json-schema-ref-parser": "^14.2.0",
     "@docusaurus/core": "3.9.2",
     "@docusaurus/plugin-content-docs": "3.9.2",
@@ -38,7 +41,6 @@
     "@docusaurus/remark-plugin-npm2yarn": "3.9.2",
     "@docusaurus/theme-common": "3.9.2",
     "@docusaurus/theme-mermaid": "3.9.2",
-    "@intercom/messenger-js-sdk": "^0.0.14",
     "@lottiefiles/react-lottie-player": "^3.6.0",
     "@mdx-js/react": "^3.1.0",
     "@mermaid-js/layout-elk": "^0.1.9",

package.json

@@ -326,3 +326,176 @@
     }
   }
 }
+
+// -----------------------------------------------------------------------------
+// Ask AI Sidepanel typography
+//
+// DocSearch renders AI answers into `.DocSearch-Markdown-Content`, which ships with
+// its own font-size/line-height that doesn't match our docs content. Override it
+// to use our Docusaurus/Infima typography tokens so the sidepanel reads like the
+// rest of the site.
+// -----------------------------------------------------------------------------
+
+.DocSearch-Sidepanel {
+  // Align base typography with the site
+  font-family: var(--ifm-font-family-base) !important;
+  color: var(--ifm-font-color-base);
+
+  // Header title ("Ask AI") is too small by default (0.875rem in DocSearch CSS).
+  // Make it 1.5x bigger => 1.3125rem.
+  .DocSearch-Sidepanel-Title {
+    font-size: 1.3125rem !important;
+    line-height: 1.25 !important;
+  }
+
+  // Prompt disclaimer ("Answers are generated with AI..."):
+  // set to 25% smaller than the previously increased size (1.5rem -> 1.125rem).
+  .DocSearch-Sidepanel-Prompt--disclaimer {
+    font-size: 1.125rem !important;
+    line-height: 1.35 !important;
+  }
+
+  .DocSearch-Sidepanel-Screen--introduction {
+    font-size: 1.125rem !important;
+    line-height: 1.35 !important;
+  }
+
+  // Prompt input UI is too small by default (textarea is 1rem + compact padding).
+  // Make it 1.5x larger: bump padding, textarea font-size, and action button size.
+  .DocSearch-Sidepanel-Prompt--form {
+    --prompt-form-padding: 1.125rem; // 0.75rem * 1.5
+    border-radius: 0.375rem; // 0.25rem * 1.5
+  }
+
+  .DocSearch-Sidepanel-Prompt--textarea {
+    font-family: var(--ifm-font-family-base) !important;
+    font-size: 1.5rem !important;
+    line-height: 1.5 !important;
+    min-height: 2.25rem !important; // 1.5rem * 1.5
+    padding-right: 2.625rem !important; // 1.75rem * 1.5
+  }
+
+  .DocSearch-Sidepanel-Prompt--actions {
+    height: 2.25rem !important;
+  }
+
+  .DocSearch-Sidepanel-Prompt--submit,
+  .DocSearch-Sidepanel-Prompt--stop {
+    width: 2.25rem !important;
+    height: 2.25rem !important;
+    border-radius: 0.375rem !important;
+  }
+
+  .DocSearch-AskAiScreen-Query {
+    font-family: var(--ifm-heading-font-family, var(--ifm-font-family-base)) !important;
+    font-size: 1em !important;
+    font-weight: 600 !important;
+    line-height: 1.3 !important;
+  }
+
+  .DocSearch-AskAiScreen-Response,
+  .DocSearch-Markdown-Content {
+    font-family: var(--ifm-font-family-base) !important;
+    font-size: var(--ifm-font-size-base, 1.6rem) !important;
+    line-height: var(--ifm-line-height-base, 1.6) !important;
+  }
+
+  .DocSearch-Markdown-Content {
+    p {
+      margin: 0 0 1em;
+    }
+
+    :is(ul, ol) {
+      margin: 0 0 1em;
+      padding-left: 1.5em;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      font-family: var(--ifm-heading-font-family, var(--ifm-font-family-base)) !important;
+      font-weight: 600 !important;
+      line-height: 1.25 !important;
+    }
+
+    :is(code, pre, kbd, samp) {
+      font-family: var(--ifm-font-family-monospace) !important;
+    }
+  }
+
+  // Ask AI tool-call status line ("Searched for ... found N results")
+  // Make it slightly smaller than body markdown + use MetaMask purple
+  // (also tints the search icon since it uses `currentColor`).
+  .DocSearch-AskAiScreen-MessageContent-Tool.Tool--Result {
+    font-size: 0.9em !important;
+    color: var(--ifm-color-primary) !important;
+  }
+
+  .DocSearch-AskAiScreen-MessageContent-Tool.Tool--Result .DocSearch-AskAiScreen-MessageContent-Tool-Query {
+    color: inherit !important;
+  }
+
+  // Ask AI inline code snippets should match our Prism/Docusaurus code blocks.
+  .DocSearch-CodeSnippet {
+    position: relative;
+    margin: 1.4rem 0;
+    border-radius: 0;
+    overflow: hidden;
+  }
+
+  .DocSearch-CodeSnippet pre {
+    margin: 0;
+    background-color: var(--general-black-light);
+  }
+
+  .DocSearch-CodeSnippet code {
+    display: block;
+    padding: 1.6rem;
+    font-family: var(--ifm-font-family-monospace) !important;
+    font-size: 1.2rem;
+    line-height: 1.5;
+    color: var(--general-gray) !important;
+    background: none;
+    white-space: pre;
+  }
+
+  .DocSearch-CodeSnippet pre code {
+    padding: 0 !important;
+  }
+
+  .DocSearch-CodeSnippet-CopyButton {
+    position: absolute;
+    top: 0.8rem;
+    right: 0.8rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.4rem 0.6rem;
+    border: 1px solid transparent;
+    border-radius: 0 !important;
+    background: transparent;
+    color: var(--general-gray) !important;
+    cursor: pointer;
+  }
+
+  .DocSearch-CodeSnippet-CopyButton:hover {
+    color: var(--ifm-color-primary) !important;
+    border-color: var(--ifm-color-primary);
+  }
+
+  .DocSearch-CodeSnippet-CopyButton-Label {
+    display: none;
+  }
+
+  // Sidepanel "Powered by Algolia" footer: reduce overall visual size ~50%
+  .DocSearch-Sidepanel--powered-by {
+    transform-origin: right bottom;
+  }
+
+  .DocSearch-Sidepanel--powered-by .DocSearch-Label {
+    font-size: 0.5em !important;
+  }
+
+  .DocSearch-Sidepanel--powered-by svg[aria-label='Algolia'] {
+    width: 40px !important; // default is 80px
+    height: auto !important;
+  }
+}

src/scss/theme/_doc-search.scss

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import Footer from '@theme-original/Footer'
-import { Intercom } from '@intercom/messenger-js-sdk'
 import useIsBrowser from '@docusaurus/useIsBrowser'
 
 export default function FooterWrapper(props) {
@@ -29,13 +28,9 @@ export default function FooterWrapper(props) {
     }
   }, [])
 
-  const isBrowser = useIsBrowser()
-  const isProd = process.env.NODE_ENV === 'production'
-  if (isBrowser && isProd) {
-    Intercom({
-      app_id: 'txttgas6',
-    })
-  }
+  // Intercom is intentionally disabled (it injected a floating chatbot in production).
+  // Keep `useIsBrowser()` for future client-only behavior here.
+  useIsBrowser()
 
   if (!canShowFooter) return null