thirdweb AI inside dashboard (#8003)

Author: joaquim-verges

apps/dashboard/package.json

@@ -35,6 +35,7 @@
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
     "fast-xml-parser": "^5.2.5",
+    "fetch-event-stream": "0.1.5",
     "fuse.js": "7.1.0",
     "input-otp": "^1.4.1",
     "ioredis": "^5.6.1",

apps/dashboard/src/@/actions/proxies.ts

@@ -14,6 +14,7 @@ type ProxyActionParams = {
   body?: string;
   headers?: Record<string, string>;
   parseAsText?: boolean;
+  signal?: AbortSignal;
 };
 
 type ProxyActionResult<T> =

apps/dashboard/src/@/components/blocks/full-width-sidebar-layout.tsx

@@ -3,7 +3,6 @@
 import { ChevronDownIcon, ChevronRightIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useMemo } from "react";
-import { AppFooter } from "@/components/footers/app-footer";
 import {
   Collapsible,
   CollapsibleContent,
@@ -91,7 +90,6 @@ export function FullWidthSidebarLayout(props: {
         <main className="flex min-w-0 grow flex-col max-sm:w-full">
           {children}
         </main>
-        <AppFooter />
       </div>
     </div>
   );

apps/dashboard/src/@/components/chat/ChatBar.tsx

@@ -87,7 +87,7 @@ export function ChatBar(props: {
                   <PopoverContent className="w-72">
                     <div>
                       <p className="mb-3 text-muted-foreground text-sm">
-                        Get access to image uploads by signing in to Nebula
+                        Get access to image uploads by signing in to thirdweb
                       </p>
                       <Button
                         className="w-full"

apps/dashboard/src/@/components/chat/CustomChatButton.tsx

@@ -28,7 +28,10 @@ export function CustomChatButton(props: {
   const closeModal = useCallback(() => setIsOpen(false), []);
   const ref = useRef<HTMLDivElement>(null);
 
-  if (layoutSegments[0] === "~" && layoutSegments[1] === "support") {
+  if (
+    (layoutSegments[0] === "~" && layoutSegments[1] === "support") ||
+    layoutSegments.includes("ai")
+  ) {
     return null;
   }
 

apps/dashboard/src/@/components/ui/image-upload-button.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type React from "react";
+import { useRef } from "react";
+import { Button } from "@/components/ui/button";
+
+interface ImageUploadProps {
+  value: File | undefined;
+  onChange?: (files: File[]) => void;
+  children?: React.ReactNode;
+  variant?: React.ComponentProps<typeof Button>["variant"];
+  className?: string;
+  multiple?: boolean;
+  accept: string;
+}
+
+export function ImageUploadButton(props: ImageUploadProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    props.onChange?.(files);
+  };
+
+  return (
+    <div>
+      <Button
+        className={props.className}
+        onClick={() => fileInputRef.current?.click()}
+        variant={props.variant}
+      >
+        {props.children}
+      </Button>
+      <input
+        accept={props.accept}
+        aria-label="Upload image"
+        className="hidden"
+        multiple={props.multiple}
+        onChange={handleFileChange}
+        ref={fileInputRef}
+        type="file"
+      />
+    </div>
+  );
+}

apps/dashboard/src/@/constants/public-envs.ts

@@ -29,3 +29,6 @@ export const NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET =
 
 export const NEXT_PUBLIC_DEMO_ENGINE_URL =
   process.env.NEXT_PUBLIC_DEMO_ENGINE_URL || "";
+
+export const NEXT_PUBLIC_THIRDWEB_AI_HOST =
+  process.env.NEXT_PUBLIC_THIRDWEB_AI_HOST || "https://nebula-api.thirdweb.com";

apps/dashboard/src/@/storybook/stubs.ts

@@ -279,3 +279,32 @@ export function newAccountStub(overrides?: Partial<Account>): Account {
     ...overrides,
   };
 }
+
+export function randomLorem(length: number) {
+  const loremWords = [
+    "lorem",
+    "ipsum",
+    "dolor",
+    "sit",
+    "amet",
+    "consectetur",
+    "adipiscing",
+    "elit",
+    "sed",
+    "do",
+    "eiusmod",
+    "tempor",
+    "incididunt",
+    "ut",
+    "labore",
+    "et",
+    "dolore",
+    "magna",
+    "aliqua",
+  ];
+
+  return Array.from({ length }, () => {
+    const randomIndex = Math.floor(Math.random() * loremWords.length);
+    return loremWords[randomIndex];
+  }).join(" ");
+}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/components/server/products.ts

@@ -62,8 +62,8 @@ export const products = [
     description: "The most powerful AI for interacting with the blockchain",
     icon: NebulaIcon,
     id: "nebula",
-    link: "https://thirdweb.com/nebula",
-    name: "Nebula",
+    link: "https://thirdweb.com/ai",
+    name: "thirdweb AI",
   },
 ] satisfies Array<{
   name: string;

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/ai/analytics/page.tsx

@@ -0,0 +1,102 @@
+import { redirect } from "next/navigation";
+import { ResponsiveSearchParamsProvider } from "responsive-rsc";
+import { getAuthToken } from "@/api/auth-token";
+import { getProject } from "@/api/project/projects";
+import type { DurationId } from "@/components/analytics/date-range-selector";
+import { ResponsiveTimeFilters } from "@/components/analytics/responsive-time-filters";
+import { ProjectPage } from "@/components/blocks/project-page/project-page";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { NebulaIcon } from "@/icons/NebulaIcon";
+import { getFiltersFromSearchParams } from "@/lib/time";
+import { loginRedirect } from "@/utils/redirects";
+import { AiAnalytics } from "./chart";
+import { AiSummary } from "./chart/Summary";
+
+export default async function Page(props: {
+  params: Promise<{ team_slug: string; project_slug: string }>;
+  searchParams: Promise<{
+    from?: string;
+    to?: string;
+    type?: string;
+    interval?: string;
+  }>;
+}) {
+  const [searchParams, params] = await Promise.all([
+    props.searchParams,
+    props.params,
+  ]);
+
+  const { team_slug, project_slug } = params;
+
+  const [project, authToken] = await Promise.all([
+    getProject(team_slug, project_slug),
+    getAuthToken(),
+  ]);
+
+  if (!authToken) {
+    loginRedirect(`/team/${team_slug}/${project_slug}/ai`);
+  }
+
+  if (!project) {
+    redirect(`/team/${team_slug}`);
+  }
+
+  const client = getClientThirdwebClient({
+    jwt: authToken,
+    teamId: project.teamId,
+  });
+
+  const defaultRange = "last-30" as DurationId;
+  const { range, interval } = getFiltersFromSearchParams({
+    defaultRange,
+    from: searchParams.from,
+    interval: searchParams.interval,
+    to: searchParams.to,
+  });
+
+  return (
+    <ResponsiveSearchParamsProvider value={searchParams}>
+      <ProjectPage
+        header={{
+          icon: NebulaIcon,
+          client,
+          title: "AI Analytics",
+          description: "Track your AI app usage and performance",
+          actions: null,
+          links: [
+            {
+              href: "https://portal.thirdweb.com/ai/chat",
+              type: "docs",
+            },
+            {
+              href: "https://api.thirdweb.com/reference#tag/ai/post/ai/chat",
+              type: "api",
+            },
+            {
+              href: "https://playground.thirdweb.com/ai/chat",
+              type: "playground",
+            },
+          ],
+        }}
+      >
+        <div className="flex flex-col gap-4 md:gap-6">
+          <ResponsiveTimeFilters defaultRange={defaultRange} />
+          <AiSummary
+            projectId={project.id}
+            teamId={project.teamId}
+            authToken={authToken}
+            range={range}
+          />
+
+          <AiAnalytics
+            interval={interval}
+            projectId={project.id}
+            range={range}
+            teamId={project.teamId}
+            authToken={authToken}
+          />
+        </div>
+      </ProjectPage>
+    </ResponsiveSearchParamsProvider>
+  );
+}