t3-oss · iam-rohid · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025
@@ -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-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
+          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 className="max-lg:sr-only">Ask AI</span>
+      </div>
+    </button>
+  );
+}
@@ -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";
@@ -103,12 +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>

@@ -47,13 +47,20 @@
     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");
     html.classList.remove(t === "dark" ? "light" : "dark");
     themeToggle!.setAttribute("title", getMessage());
     themeToggle!.setAttribute("aria-label", getMessage());
     themeToggle!.setAttribute("value", t);
+
+    window.SiteAssist?.("changeTheme", t);
   };
 
   themeToggle!.addEventListener("click", () => {

@@ -65,10 +65,36 @@ 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="siteassist-container flex min-h-screen flex-col items-center bg-default transition-colors duration-300"
   >
     <JumpToContent />
     <div

@@ -41,9 +41,35 @@ 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="siteassist-container min-h-screen bg-gradient-to-b from-gray-900 via-[#300171] to-slate-900"
   >
     <JumpToContent />
     <div

@@ -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;
+  }
+}