[Portal] Add AI chat functionality with markdown support (#7139)

Author: joaquim-verges

apps/dashboard/package.json

@@ -89,7 +89,7 @@
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "^5.0.0",
     "react-hook-form": "7.55.0",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "10.1.0",
     "react-table": "^7.8.0",
     "recharts": "2.15.3",
     "remark-gfm": "4.0.1",

apps/portal/package.json

@@ -20,14 +20,15 @@
   },
   "dependencies": {
     "@dirtycajunrice/klee": "^1.0.6",
-    "@mdx-js/loader": "^2.3.0",
-    "@mdx-js/react": "^2.3.0",
+    "@mdx-js/loader": "3.1.0",
+    "@mdx-js/react": "3.1.0",
     "@next/mdx": "15.3.2",
     "@radix-ui/react-dialog": "1.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.11",
     "@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,9 +46,11 @@
     "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",
-    "remark-gfm": "3.0.1",
+    "react-markdown": "10.1.0",
+    "remark-gfm": "4.0.1",
     "server-only": "^0.0.1",
     "shiki": "1.27.0",
     "tailwind-merge": "^2.6.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>
 
@@ -322,7 +343,6 @@ export function Header() {
                   key={link.name}
                   name={link.name}
                   href={link.href}
-                  icon={link.icon}
                   onClick={() => setShowBurgerMenu(false)}
                 />
               ))}

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

@@ -0,0 +1,16 @@
+"use client";
+
+import { Chat } from "@/components/AI/chat";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export default function ChatPage() {
+  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 />
+      </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,73 +86,117 @@ html {
     --active-border: 0 0% 22%;
     --ring: 0 0% 30%;
     --input: 0 0% 15%;
+
+    /* 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%;
   }
 }
 
-.dark .light-only {
-  display: none;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
-html:not(.dark) .dark-only {
-  display: none;
+.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;
 }
 
-code span {
-  color: var(--code-light-color);
+.shiki,
+.shiki span {
+  background-color: transparent !important;
 }
 
-.dark code span {
-  color: var(--code-dark-color);
+/* 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;
+
+  /* Revert background color */
+  transition: background-color 5000s ease-in-out 0s;
 }
 
-@layer base {
-  * {
-    @apply border-border;
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar,
+  .no-scrollbar *::-webkit-scrollbar {
+    display: none;
   }
-  body {
-    @apply bg-background text-foreground;
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar,
+  .no-scrollbar * {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
   }
 }
 
 .styled-scrollbar::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
 }
-
 @media (max-width: 640px) {
   .styled-scrollbar::-webkit-scrollbar {
     width: 0;
     height: 0;
   }
 }
-
 .styled-scrollbar::-webkit-scrollbar-thumb {
   border-radius: 0.5rem;
   transition: color 200ms ease;
   background: var(--border);
 }
-
 .styled-scrollbar::-webkit-scrollbar-thumb:hover {
   background: hsl(var(--foreground));
 }
-
 .styled-scrollbar::-webkit-scrollbar-track {
   background-color: transparent;
 }
-
 button {
   -webkit-tap-highlight-color: transparent;
 }
-
 ::selection {
   background: hsl(var(--foreground));
   color: hsl(var(--background));
 }
-
 .hide-scrollbar {
   scrollbar-width: none; /* Firefox */
 }
-
 .hide-scrollbar::-webkit-scrollbar {
   display: none; /* Safari and Chrome */
 }
+
+.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);
+}