From 68b287da7d8e43a6ae740b813b64b735500389ad Mon Sep 17 00:00:00 2001
From: Rohid <rohidul209@gmail.com>
Date: Mon, 18 Aug 2025 12:33:54 +0600
Subject: [PATCH 1/3] feat: Integrate SiteAssist

---
 www/src/components/navigation/AskAIButton.tsx | 33 ++++++++
 www/src/components/navigation/navbar.astro    |  2 +
 .../navigation/themeToggleButton.astro        |  4 +
 www/src/layouts/docs.astro                    | 17 +++-
 www/src/layouts/landingPage.astro             | 17 +++-
 www/src/siteassist.d.ts                       | 78 +++++++++++++++++++
 6 files changed, 149 insertions(+), 2 deletions(-)
 create mode 100644 www/src/components/navigation/AskAIButton.tsx
 create mode 100644 www/src/siteassist.d.ts

diff --git a/www/src/components/navigation/AskAIButton.tsx b/www/src/components/navigation/AskAIButton.tsx
new file mode 100644
index 0000000000..fa858a6ec3
--- /dev/null
+++ b/www/src/components/navigation/AskAIButton.tsx
@@ -0,0 +1,33 @@
+export default function AskAIButton() {
+  const handleClick = () => {
+    window.SiteAssist?.("toggle");
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="relative flex cursor-pointer items-center justify-center rounded-lg border bg-t3-purple-200/50 px-4 py-2 text-left focus:outline-none hover:bg-t3-purple-200/75 sm:text-sm dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50"
+    >
+      <div className="flex items-center justify-center gap-1 lg:gap-3">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          className="size-6"
+        >
+          <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
+          <path d="M20 2v4" />
+          <path d="M22 4h-4" />
+          <circle cx="4" cy="20" r="2" />
+        </svg>
+        <span>Ask AI</span>
+      </div>
+    </button>
+  );
+}
diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
index f0644e0b09..0e8b4b31b6 100644
--- a/www/src/components/navigation/navbar.astro
+++ b/www/src/components/navigation/navbar.astro
@@ -1,5 +1,6 @@
 ---
 import { getIsRtlFromUrl, getLanguageFromURL } from "../../languages";
+import AskAIButton from "./AskAIButton";
 import GithubIcon from "./githubIcon.astro";
 import LanguageSelect from "./LanguageSelect";
 import Search from "./Search";
@@ -109,6 +110,7 @@ const navbarLinks: Array<{ href: string; label: string }> = [
       <div class="hidden w-full max-w-xs rounded-lg md:block">
         <Search isLanding={isLanding} client:load />
       </div>
+      <AskAIButton client:load/>
     </div>
   </div>
 </nav>
diff --git a/www/src/components/navigation/themeToggleButton.astro b/www/src/components/navigation/themeToggleButton.astro
index cfa2898d66..ca70b0c87d 100644
--- a/www/src/components/navigation/themeToggleButton.astro
+++ b/www/src/components/navigation/themeToggleButton.astro
@@ -47,6 +47,8 @@
     html.classList.contains("dark") ? "dark" : "light",
   );
 
+  window.SiteAssist?.("changeTheme", html.classList.contains("dark") ? "dark" : "light")
+
   const toggleTheme = (t: "light" | "dark") => {
     localStorage.setItem("theme", t);
     html.classList.add(t === "dark" ? "dark" : "light");
@@ -54,6 +56,8 @@
     themeToggle!.setAttribute("title", getMessage());
     themeToggle!.setAttribute("aria-label", getMessage());
     themeToggle!.setAttribute("value", t);
+
+    window.SiteAssist?.("changeTheme", t)
   };
 
   themeToggle!.addEventListener("click", () => {
diff --git a/www/src/layouts/docs.astro b/www/src/layouts/docs.astro
index e1974083d8..ed98787ceb 100644
--- a/www/src/layouts/docs.astro
+++ b/www/src/layouts/docs.astro
@@ -65,10 +65,25 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
         html.classList.remove("light");
       }
     </script>
+
+
+    <!-- SiteAssist chat widget script -->
+    <script type="text/javascript">
+      !function(t,e,c,n,s){if(t[s])return;const i=t[s]=function(){i._q.push(arguments)};i._q=[];const o=e.createElement("script");o.async=!0,o.src="https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js",e.head.appendChild(o)}(window,document,0,0,"SiteAssist");
+    </script>
+
+    <script type="text/javascript">
+      // Initialize the SiteAssist widget with the API Key
+      SiteAssist("init", {
+        apiKey: "pk_fVPIhyv2zqrRQaroMvYDizbpVHdcgEQlenWBxyYNk5YryeVvjHNwx9v6qZQBO",
+        theme: "auto",
+        type: 'sidepanel'
+      });
+    </script>
   </head>
 
   <body
-    class="flex min-h-screen flex-col items-center bg-default transition-colors duration-300"
+    class="flex min-h-screen flex-col items-center bg-default transition-colors duration-300 siteassist-container"
   >
     <JumpToContent />
     <div
diff --git a/www/src/layouts/landingPage.astro b/www/src/layouts/landingPage.astro
index 28ab3dedc3..1ccc32c5cb 100644
--- a/www/src/layouts/landingPage.astro
+++ b/www/src/layouts/landingPage.astro
@@ -41,9 +41,24 @@ const { isNotFound } = Astro.props;
         html.classList.add("dark");
       }
     </script>
+
+
+    <!-- SiteAssist chat widget script -->
+    <script type="text/javascript">
+      !function(t,e,c,n,s){if(t[s])return;const i=t[s]=function(){i._q.push(arguments)};i._q=[];const o=e.createElement("script");o.async=!0,o.src="https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js",e.head.appendChild(o)}(window,document,0,0,"SiteAssist");
+    </script>
+
+    <script type="text/javascript">
+      // Initialize the SiteAssist widget with the API Key
+      SiteAssist("init", {
+        apiKey: "pk_fVPIhyv2zqrRQaroMvYDizbpVHdcgEQlenWBxyYNk5YryeVvjHNwx9v6qZQBO",
+        theme: "auto",
+        type: 'sidepanel'
+      });
+    </script>
   </head>
   <body
-    class="min-h-screen bg-gradient-to-b from-gray-900 via-[#300171] to-slate-900"
+    class="min-h-screen bg-gradient-to-b from-gray-900 via-[#300171] to-slate-900 siteassist-container"
   >
     <JumpToContent />
     <div
diff --git a/www/src/siteassist.d.ts b/www/src/siteassist.d.ts
new file mode 100644
index 0000000000..b067b5bac1
--- /dev/null
+++ b/www/src/siteassist.d.ts
@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export interface ChatWidgetConfig {
+  welcomeMessages: string[];
+  inputPlaceholder: string;
+  position: "bottom-left" | "bottom-right";
+  brandColor: string;
+  brandColorDark: string | null;
+  userMessageBubbleColor: string;
+  userMessageBubbleColorDark: string | null;
+  headerTitle: string | null;
+  width: number;
+  maxHeight: number;
+  offset: { x: number; y: number };
+  baseFontSize: number;
+  openDelay: number;
+  headerUsesBrandColor: boolean;
+  chatButtonIcon: string | null;
+  assistantAvatar: string | null;
+  chatButtonColor: string | null;
+}
+
+export interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  chatWidgetConfig: ChatWidgetConfig;
+}
+
+export type Theme = "light" | "dark" | "auto";
+export type WidgetType = "floating-bubble" | "sidepanel";
+
+export interface InitOptions {
+  apiKey: string;
+  type?: WidgetType;
+  widgetUrl?: string;
+  apiUrl?: string;
+  theme?: Theme;
+  appUserId?: string | null;
+  appContainerSelector?: string | null;
+  [key: string]: any;
+}
+
+export interface IdentifyPayload {
+  appUserId?: string;
+  email?: string | null;
+  name?: string | null;
+  attributes?: Record<string, string | null>;
+}
+
+export type CommandQueueItem =
+  | ["init", InitOptions]
+  | ["identify", IdentifyPayload]
+  | ["changeTheme", Theme]
+  | ["open"]
+  | ["close"]
+  | ["toggle"]
+  | ["track", string, any?];
+
+export type CommandKey = CommandQueueItem[0];
+
+export interface SiteAssistAPI {
+  (cmd: "init", opts: InitOptions): void;
+  (cmd: "identify", user: IdentifyPayload): void;
+  (cmd: "changeTheme", theme: Theme): void;
+  (cmd: "track", event: string, data?: any): void;
+  (cmd: "open"): void;
+  (cmd: "close"): void;
+  (cmd: "toggle"): void;
+  /** Temp queue set by the stub; cleared once the real API takes over. */
+  _q?: CommandQueueItem[];
+}
+
+declare global {
+  interface Window {
+    SiteAssist?: SiteAssistAPI;
+  }
+}

From 1e2600fcee1ea6d9962671343b9f32833ab2dbc6 Mon Sep 17 00:00:00 2001
From: Rohid <rohidul209@gmail.com>
Date: Mon, 18 Aug 2025 12:46:42 +0600
Subject: [PATCH 2/3] fix: run format

---
 www/src/components/navigation/navbar.astro    |  2 +-
 .../navigation/themeToggleButton.astro        |  7 +++++--
 www/src/layouts/docs.astro                    | 21 ++++++++++++++-----
 www/src/layouts/landingPage.astro             | 21 ++++++++++++++-----
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
index 0e8b4b31b6..3848b96e2b 100644
--- a/www/src/components/navigation/navbar.astro
+++ b/www/src/components/navigation/navbar.astro
@@ -110,7 +110,7 @@ const navbarLinks: Array<{ href: string; label: string }> = [
       <div class="hidden w-full max-w-xs rounded-lg md:block">
         <Search isLanding={isLanding} client:load />
       </div>
-      <AskAIButton client:load/>
+      <AskAIButton client:load />
     </div>
   </div>
 </nav>
diff --git a/www/src/components/navigation/themeToggleButton.astro b/www/src/components/navigation/themeToggleButton.astro
index ca70b0c87d..51f7232e10 100644
--- a/www/src/components/navigation/themeToggleButton.astro
+++ b/www/src/components/navigation/themeToggleButton.astro
@@ -47,7 +47,10 @@
     html.classList.contains("dark") ? "dark" : "light",
   );
 
-  window.SiteAssist?.("changeTheme", html.classList.contains("dark") ? "dark" : "light")
+  window.SiteAssist?.(
+    "changeTheme",
+    html.classList.contains("dark") ? "dark" : "light",
+  );
 
   const toggleTheme = (t: "light" | "dark") => {
     localStorage.setItem("theme", t);
@@ -57,7 +60,7 @@
     themeToggle!.setAttribute("aria-label", getMessage());
     themeToggle!.setAttribute("value", t);
 
-    window.SiteAssist?.("changeTheme", t)
+    window.SiteAssist?.("changeTheme", t);
   };
 
   themeToggle!.addEventListener("click", () => {
diff --git a/www/src/layouts/docs.astro b/www/src/layouts/docs.astro
index ed98787ceb..0e00aa76fe 100644
--- a/www/src/layouts/docs.astro
+++ b/www/src/layouts/docs.astro
@@ -66,24 +66,35 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
       }
     </script>
 
-
     <!-- SiteAssist chat widget script -->
     <script type="text/javascript">
-      !function(t,e,c,n,s){if(t[s])return;const i=t[s]=function(){i._q.push(arguments)};i._q=[];const o=e.createElement("script");o.async=!0,o.src="https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js",e.head.appendChild(o)}(window,document,0,0,"SiteAssist");
+      !(function (t, e, c, n, s) {
+        if (t[s]) return;
+        const i = (t[s] = function () {
+          i._q.push(arguments);
+        });
+        i._q = [];
+        const o = e.createElement("script");
+        (o.async = !0),
+          (o.src =
+            "https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js"),
+          e.head.appendChild(o);
+      })(window, document, 0, 0, "SiteAssist");
     </script>
 
     <script type="text/javascript">
       // Initialize the SiteAssist widget with the API Key
       SiteAssist("init", {
-        apiKey: "pk_fVPIhyv2zqrRQaroMvYDizbpVHdcgEQlenWBxyYNk5YryeVvjHNwx9v6qZQBO",
+        apiKey:
+          "pk_fVPIhyv2zqrRQaroMvYDizbpVHdcgEQlenWBxyYNk5YryeVvjHNwx9v6qZQBO",
         theme: "auto",
-        type: 'sidepanel'
+        type: "sidepanel",
       });
     </script>
   </head>
 
   <body
-    class="flex min-h-screen flex-col items-center bg-default transition-colors duration-300 siteassist-container"
+    class="siteassist-container flex min-h-screen flex-col items-center bg-default transition-colors duration-300"
   >
     <JumpToContent />
     <div
diff --git a/www/src/layouts/landingPage.astro b/www/src/layouts/landingPage.astro
index 1ccc32c5cb..1127e8ded8 100644
--- a/www/src/layouts/landingPage.astro
+++ b/www/src/layouts/landingPage.astro
@@ -42,23 +42,34 @@ const { isNotFound } = Astro.props;
       }
     </script>
 
-
     <!-- SiteAssist chat widget script -->
     <script type="text/javascript">
-      !function(t,e,c,n,s){if(t[s])return;const i=t[s]=function(){i._q.push(arguments)};i._q=[];const o=e.createElement("script");o.async=!0,o.src="https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js",e.head.appendChild(o)}(window,document,0,0,"SiteAssist");
+      !(function (t, e, c, n, s) {
+        if (t[s]) return;
+        const i = (t[s] = function () {
+          i._q.push(arguments);
+        });
+        i._q = [];
+        const o = e.createElement("script");
+        (o.async = !0),
+          (o.src =
+            "https://cnrib24ur3hk4b49.public.blob.vercel-storage.com/widget/latest/widget.js"),
+          e.head.appendChild(o);
+      })(window, document, 0, 0, "SiteAssist");
     </script>
 
     <script type="text/javascript">
       // Initialize the SiteAssist widget with the API Key
       SiteAssist("init", {
-        apiKey: "pk_fVPIhyv2zqrRQaroMvYDizbpVHdcgEQlenWBxyYNk5YryeVvjHNwx9v6qZQBO",
+        apiKey:
+          "pk_fVPIhyv2zqrRQaroMvYDizbpVHdcgEQlenWBxyYNk5YryeVvjHNwx9v6qZQBO",
         theme: "auto",
-        type: 'sidepanel'
+        type: "sidepanel",
       });
     </script>
   </head>
   <body
-    class="min-h-screen bg-gradient-to-b from-gray-900 via-[#300171] to-slate-900 siteassist-container"
+    class="siteassist-container min-h-screen bg-gradient-to-b from-gray-900 via-[#300171] to-slate-900"
   >
     <JumpToContent />
     <div

From 7254ffc70645820cf8ed05353cfb1b081cdd6ec3 Mon Sep 17 00:00:00 2001
From: Rohid <rohidul209@gmail.com>
Date: Mon, 18 Aug 2025 14:35:41 +0600
Subject: [PATCH 3/3] fix: make ask ai button an icon button when on mobile
 view

---
 www/src/components/navigation/AskAIButton.tsx | 4 ++--
 www/src/components/navigation/navbar.astro    | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/www/src/components/navigation/AskAIButton.tsx b/www/src/components/navigation/AskAIButton.tsx
index fa858a6ec3..b86ed97b98 100644
--- a/www/src/components/navigation/AskAIButton.tsx
+++ b/www/src/components/navigation/AskAIButton.tsx
@@ -6,7 +6,7 @@ export default function AskAIButton() {
   return (
     <button
       onClick={handleClick}
-      className="relative flex cursor-pointer items-center justify-center rounded-lg border bg-t3-purple-200/50 px-4 py-2 text-left focus:outline-none hover:bg-t3-purple-200/75 sm:text-sm dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50"
+      className="relative flex cursor-pointer items-center justify-center rounded-lg border bg-t3-purple-200/50 px-2 py-2 text-left focus:outline-none hover:bg-t3-purple-200/75 sm:text-sm lg:px-4 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50"
     >
       <div className="flex items-center justify-center gap-1 lg:gap-3">
         <svg
@@ -26,7 +26,7 @@ export default function AskAIButton() {
           <path d="M22 4h-4" />
           <circle cx="4" cy="20" r="2" />
         </svg>
-        <span>Ask AI</span>
+        <span className="max-lg:sr-only">Ask AI</span>
       </div>
     </button>
   );
diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
index 3848b96e2b..a907c566e4 100644
--- a/www/src/components/navigation/navbar.astro
+++ b/www/src/components/navigation/navbar.astro
@@ -104,13 +104,13 @@ const navbarLinks: Array<{ href: string; label: string }> = [
       >
         <ThemeToggleButton />
       </div>
-      <div class="block md:hidden">
-        <SidebarToggle isLanding={isLanding} />
-      </div>
       <div class="hidden w-full max-w-xs rounded-lg md:block">
         <Search isLanding={isLanding} client:load />
       </div>
       <AskAIButton client:load />
+      <div class="block md:hidden">
+        <SidebarToggle isLanding={isLanding} />
+      </div>
     </div>
   </div>
 </nav>