[Portal] Add AI chat functionality with markdown support

Author: joaquim-verges

apps/portal/package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.8",
+    "@radix-ui/react-tooltip": "1.2.3",
     "@tanstack/react-query": "5.74.4",
     "@tryghost/content-api": "^1.11.22",
     "class-variance-authority": "^0.7.1",
@@ -45,8 +46,10 @@
     "posthog-js": "1.67.1",
     "prettier": "3.5.3",
     "react": "19.1.0",
+    "react-children-utilities": "^2.10.0",
     "react-dom": "19.1.0",
     "react-html-parser": "2.0.2",
+    "react-markdown": "^9.0.1",
     "remark-gfm": "3.0.1",
     "server-only": "^0.0.1",
     "shiki": "1.27.0",

apps/portal/src/app/Header.tsx

@@ -9,9 +9,14 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import clsx from "clsx";
-import { ChevronDownIcon, MenuIcon, TableOfContentsIcon } from "lucide-react";
+import {
+  BotIcon,
+  ChevronDownIcon,
+  MenuIcon,
+  TableOfContentsIcon,
+} from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
 import { GithubIcon } from "../components/Document/GithubButtonLink";
 import { CustomAccordion } from "../components/others/CustomAccordion";
@@ -29,7 +34,6 @@ const links = [
   {
     name: "Connect",
     href: "/connect",
-    icon: TableOfContentsIcon,
   },
   {
     name: "Bridge",
@@ -191,6 +195,7 @@ const supportLinks = [
 
 export function Header() {
   const [showBurgerMenu, setShowBurgerMenu] = useState(false);
+  const router = useRouter();
 
   return (
     <header className="flex w-full flex-col gap-2 border-b bg-background p-2 lg:px-4">
@@ -211,24 +216,46 @@ export function Header() {
         </div>
 
         <div className="flex items-center gap-3">
-          <div className="hidden xl:flex">
-            <ThemeSwitcher />
+          <div className="hidden xl:block">
+            <DocSearch variant="search" />
           </div>
 
           <div className="hidden xl:block">
-            <DocSearch variant="search" />
+            <Button
+              variant="primary"
+              onClick={() => {
+                router.push("/chat");
+              }}
+            >
+              <BotIcon className="mr-2 size-4" />
+              Ask AI
+            </Button>
           </div>
 
-          <div className="flex items-center gap-1 xl:hidden">
+          <div className="hidden xl:block">
             <ThemeSwitcher className="border-none bg-transparent" />
-            <DocSearch variant="icon" />
+          </div>
+
+          <div className="hidden xl:block">
             <Link
               href="https://github.com/thirdweb-dev"
               target="_blank"
               className="text-foreground"
             >
               <GithubIcon className="mx-3 size-6" />
             </Link>
+          </div>
+
+          <div className="flex items-center gap-1 xl:hidden">
+            <ThemeSwitcher className="border-none bg-transparent" />
+            <DocSearch variant="icon" />
+            <Button
+              variant="ghost"
+              className="p-2"
+              onClick={() => router.push("/chat")}
+            >
+              <BotIcon className="size-7" />
+            </Button>
             <Button
               variant="ghost"
               className="p-2"
@@ -260,12 +287,6 @@ export function Header() {
                 </li>
               );
             })}
-
-            <DropdownLinks
-              links={toolLinks}
-              onLinkClick={() => setShowBurgerMenu(false)}
-              category="Tools"
-            />
           </ul>
         </nav>
 
@@ -285,6 +306,14 @@ export function Header() {
             />
           </div>
 
+          <div className="px-1">
+            <DropdownLinks
+              links={toolLinks}
+              onLinkClick={() => setShowBurgerMenu(false)}
+              category="Tools"
+            />
+          </div>
+
           <div className="px-1">
             <DropdownLinks
               links={supportLinks}
@@ -300,14 +329,6 @@ export function Header() {
               setShowBurgerMenu(false);
             }}
           />
-
-          <Link
-            href="https://github.com/thirdweb-dev"
-            target="_blank"
-            className="text-muted-foreground transition-colors hover:text-foreground"
-          >
-            <GithubIcon className="mx-2 size-6" />
-          </Link>
         </div>
       </div>
 

apps/portal/src/app/chat/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Chat } from "@/components/AI/chat";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useSearchParams } from "next/navigation";
+
+const queryClient = new QueryClient();
+
+export default function ChatPage() {
+  const searchParams = useSearchParams();
+  const query = searchParams.get("query");
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <div className="m-auto flex h-[calc(100vh-4rem)] w-full flex-col overflow-hidden lg:size-[calc(100vh-8rem)]">
+        <Chat prefilledMessage={query || undefined} />
+      </div>
+    </QueryClientProvider>
+  );
+}

apps/portal/src/app/globals.css

@@ -2,23 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-  /* scroll-behavior: smooth; */
-  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-  font-feature-settings: "rlig" 1, "calt" 0;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  font-variation-settings: normal;
-  -webkit-text-size-adjust: 100%;
-  -webkit-tap-highlight-color: transparent;
-}
-
 @layer base {
-  :root {
-    --radius: 0.5rem;
-    --sticky-top-height: 70px;
-  }
-
   :root {
     /* bg - neutral  */
     --background: 0 0% 98%;
@@ -27,7 +11,7 @@ html {
     --secondary: 0 0% 90%;
     --muted: 0 0% 93%;
     --accent: 0 0% 93%;
-    --inverted: 0 0 0%;
+    --inverted: 0 0% 4%;
 
     /* bg - colorful */
     --primary: 221 83% 54%;
@@ -46,13 +30,26 @@ html {
     --link-foreground: 221.21deg 83.19% 53.33%;
     --success-text: 142.09 70.56% 35.29%;
     --warning-text: 38 92% 40%;
-    --destructive-text: 357.15deg 100% 68.72%;
+    --destructive-text: 360 72% 60%;
 
     /* Borders */
     --border: 0 0% 85%;
     --active-border: 0 0% 70%;
     --input: 0 0% 85%;
     --ring: 0 0% 80%;
+
+    /* Others */
+    --radius: 0.5rem;
+
+    /* Sidebar */
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 0 0% 4%;
+    --sidebar-primary: 221 83% 54%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 93%;
+    --sidebar-accent-foreground: 0 0% 9%;
+    --sidebar-border: 0 0% 85%;
+    --sidebar-ring: 0 0% 80%;
   }
 
   .dark {
@@ -89,23 +86,17 @@ html {
     --active-border: 0 0% 22%;
     --ring: 0 0% 30%;
     --input: 0 0% 15%;
-  }
-}
-
-.dark .light-only {
-  display: none;
-}
-
-html:not(.dark) .dark-only {
-  display: none;
-}
 
-code span {
-  color: var(--code-light-color);
-}
-
-.dark code span {
-  color: var(--code-dark-color);
+    /* sidebar */
+    --sidebar-background: 0 0% 0%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 221 83% 54%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 0 0% 11%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 15%;
+    --sidebar-ring: 0 0% 30%;
+  }
 }
 
 @layer base {
@@ -117,45 +108,60 @@ code span {
   }
 }
 
-.styled-scrollbar::-webkit-scrollbar {
-  width: 0.5rem;
-  height: 0.5rem;
+.dark .shiki,
+.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
 }
 
-@media (max-width: 640px) {
-  .styled-scrollbar::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
+.shiki,
+.shiki span {
+  background-color: transparent !important;
 }
 
-.styled-scrollbar::-webkit-scrollbar-thumb {
-  border-radius: 0.5rem;
-  transition: color 200ms ease;
-  background: var(--border);
-}
+/* Fix colors on auto-filled inputs  */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  /* Revert text color */
+  -webkit-text-fill-color: hsl(var(--foreground)) !important;
+  color: hsl(var(--foreground)) !important;
+  caret-color: hsl(var(--foreground)) !important;
 
-.styled-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--foreground));
+  /* Revert background color */
+  transition: background-color 5000s ease-in-out 0s;
 }
 
-.styled-scrollbar::-webkit-scrollbar-track {
-  background-color: transparent;
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar,
+  .no-scrollbar *::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar,
+  .no-scrollbar * {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }
 
-button {
-  -webkit-tap-highlight-color: transparent;
+.dark .light-only {
+  display: none;
 }
 
-::selection {
-  background: hsl(var(--foreground));
-  color: hsl(var(--background));
+html:not(.dark) .dark-only {
+  display: none;
 }
 
-.hide-scrollbar {
-  scrollbar-width: none; /* Firefox */
+code span {
+  color: var(--code-light-color);
 }
 
-.hide-scrollbar::-webkit-scrollbar {
-  display: none; /* Safari and Chrome */
+.dark code span {
+  color: var(--code-dark-color);
 }

apps/portal/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import "./globals.css";
 import { createMetadata } from "@/components/Document";
 import { PosthogHeadSetup } from "@/lib/posthog/PosthogHeadSetup";
+import {} from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
 import { Fira_Code, Inter } from "next/font/google";
 import Script from "next/script";

apps/portal/src/components/AI/api.ts

@@ -0,0 +1,40 @@
+"use server";
+
+const serviceKey = process.env.SIWA_SERVICE_KEY as string;
+const apiUrl = process.env.SIWA_URL;
+
+export const getChatResponse = async (
+  userMessage: string,
+  sessionId: string | undefined,
+) => {
+  try {
+    const payload = {
+      message: userMessage,
+      conversationId: sessionId,
+    };
+    const response = await fetch(`${apiUrl}/v1/chat`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-service-api-key": serviceKey,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(
+        `Failed to get chat response: ${response.status} - ${error}`,
+      );
+    }
+
+    const data = (await response.json()) as {
+      data: string;
+      conversationId: string;
+    };
+    return data;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};