fixes

Author: joaquim-verges

apps/dashboard/src/@/api/analytics.ts

@@ -236,10 +236,7 @@ const cached_getAiUsage = unstable_cache(
   },
 );
 
-export function getAiUsage(
-  params: AnalyticsQueryParams,
-  authToken: string,
-) {
+export function getAiUsage(params: AnalyticsQueryParams, authToken: string) {
   return cached_getAiUsage(normalizedParams(params), authToken);
 }
 

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

@@ -5,11 +5,10 @@ import { ThirdwebBarChart } from "@/components/blocks/charts/bar-chart";
 import { DocLink } from "@/components/blocks/DocLink";
 import { ExportToCSVButton } from "@/components/blocks/ExportToCSVButton";
 import type { ChartConfig } from "@/components/ui/chart";
-import { ReactIcon } from "@/icons/brand-icons/ReactIcon";
-import { TypeScriptIcon } from "@/icons/brand-icons/TypeScriptIcon";
+import { NebulaIcon } from "@/icons/NebulaIcon";
 import type { AIUsageStats } from "@/types/analytics";
 
-type ChartData = {
+type ChartData = Record<string, number> & {
   time: string; // human readable date
   tokens: number;
 };
@@ -30,10 +29,15 @@ export function AiTokenUsageChartCardUI(props: {
       },
     };
 
-    const _chartData: ChartData[] = aiUsageStats.map((stat) => ({
-      time: stat.date,
-      tokens: stat.totalPromptTokens + stat.totalCompletionTokens,
-    }));
+    const _chartData: ChartData[] = aiUsageStats
+      .filter((stat) => stat.totalPromptTokens + stat.totalCompletionTokens > 0)
+      .map(
+        (stat) =>
+          ({
+            time: stat.date,
+            tokens: stat.totalPromptTokens + stat.totalCompletionTokens,
+          }) as ChartData,
+      );
 
     return {
       chartConfig: _chartConfig,
@@ -88,7 +92,7 @@ export function AiTokenUsageChartCardUI(props: {
         }
         return undefined;
       }}
-      variant="default"
+      variant="stacked"
     />
   );
 }
@@ -97,20 +101,16 @@ function AiTokenUsageEmptyChartState() {
   return (
     <div className="flex flex-col items-center justify-center px-4">
       <span className="mb-6 text-center text-lg">
-        Start using AI to interact with any EVM chain
+        Integrate thirdweb AI to interact with any EVM chain using natural
+        language
       </span>
       <div className="flex max-w-md flex-wrap items-center justify-center gap-x-6 gap-y-4">
         <DocLink
-          icon={TypeScriptIcon}
-          label="TypeScript"
-          link="https://portal.thirdweb.com/ai/chat"
-        />
-        <DocLink
-          icon={ReactIcon}
-          label="React"
+          icon={NebulaIcon}
+          label="Get Started"
           link="https://portal.thirdweb.com/ai/chat"
         />
       </div>
     </div>
   );
-}
+}

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

@@ -1,4 +1,4 @@
-import { ActivityIcon, MessageSquareIcon, CoinsIcon } from "lucide-react";
+import { ActivityIcon, MessageSquareIcon } from "lucide-react";
 import { Suspense } from "react";
 import { getAiUsage } from "@/api/analytics";
 import type { Range } from "@/components/analytics/date-range-selector";
@@ -9,10 +9,6 @@ function AiSummaryInner(props: {
   stats: AIUsageStats[] | undefined;
   isPending: boolean;
 }) {
-  const totalRequests = props.stats?.reduce((acc, curr) => {
-    return acc + curr.totalRequests;
-  }, 0);
-
   const totalSessions = props.stats?.reduce((acc, curr) => {
     return acc + curr.totalSessions;
   }, 0);
@@ -22,21 +18,15 @@ function AiSummaryInner(props: {
   }, 0);
 
   return (
-    <div className="grid grid-cols-3 gap-4">
+    <div className="grid grid-cols-2 gap-4">
       <StatCard
         icon={ActivityIcon}
         isPending={props.isPending}
-        label="Requests"
-        value={totalRequests || 0}
-      />
-      <StatCard
-        icon={MessageSquareIcon}
-        isPending={props.isPending}
         label="Sessions"
         value={totalSessions || 0}
       />
       <StatCard
-        icon={CoinsIcon}
+        icon={MessageSquareIcon}
         isPending={props.isPending}
         label="Tokens"
         value={totalTokens || 0}
@@ -66,10 +56,7 @@ async function AsyncAiSummary(props: {
   const aggregatedStats = await aggregatedStatsPromise.catch(() => null);
 
   return (
-    <AiSummaryInner
-      stats={aggregatedStats || undefined}
-      isPending={false}
-    />
+    <AiSummaryInner stats={aggregatedStats || undefined} isPending={false} />
   );
 }
 
@@ -80,9 +67,7 @@ export function AiSummary(props: {
   range: Range;
 }) {
   return (
-    <Suspense
-      fallback={<AiSummaryInner stats={undefined} isPending={true} />}
-    >
+    <Suspense fallback={<AiSummaryInner stats={undefined} isPending={true} />}>
       <AsyncAiSummary
         projectId={props.projectId}
         teamId={props.teamId}
@@ -91,4 +76,4 @@ export function AiSummary(props: {
       />
     </Suspense>
   );
-}
+}

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

@@ -14,10 +14,7 @@ type AiAnalyticsProps = {
   isPending: boolean;
 };
 
-function AiAnalyticsUI({
-  stats,
-  isPending,
-}: AiAnalyticsProps) {
+function AiAnalyticsUI({ stats, isPending }: AiAnalyticsProps) {
   return (
     <AiTokenUsageChartCardUI
       title="Token Usage"
@@ -28,18 +25,13 @@ function AiAnalyticsUI({
   );
 }
 
-type AsyncAiAnalyticsProps = Omit<
-  AiAnalyticsProps,
-  "stats" | "isPending"
-> & {
+type AsyncAiAnalyticsProps = Omit<AiAnalyticsProps, "stats" | "isPending"> & {
   teamId: string;
   projectId: string;
   authToken: string;
 };
 
-async function AsyncAiAnalytics(
-  props: AsyncAiAnalyticsProps,
-) {
+async function AsyncAiAnalytics(props: AsyncAiAnalyticsProps) {
   const range = props.range ?? getLastNDaysRange("last-30");
 
   const stats = await getAiUsage(
@@ -57,24 +49,17 @@ async function AsyncAiAnalytics(
   });
 
   return (
-    <AiAnalyticsUI
-      {...props}
-      isPending={false}
-      range={range}
-      stats={stats}
-    />
+    <AiAnalyticsUI {...props} isPending={false} range={range} stats={stats} />
   );
 }
 
 export function AiAnalytics(props: AsyncAiAnalyticsProps) {
   return (
     <ResponsiveSuspense
       searchParamsUsed={["from", "to", "interval"]}
-      fallback={
-        <AiAnalyticsUI {...props} isPending={true} stats={[]} />
-      }
+      fallback={<AiAnalyticsUI {...props} isPending={true} stats={[]} />}
     >
       <AsyncAiAnalytics {...props} />
     </ResponsiveSuspense>
   );
-}
+}

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

@@ -45,30 +45,45 @@ export default async function Page(props: {
     teamId: project.teamId,
   });
 
-  const { range, interval, defaultRange } = getFiltersFromSearchParams({
-    defaultRange: "last-30" as DurationId,
+  const defaultRange = "last-30" as DurationId;
+  const { range, interval } = getFiltersFromSearchParams({
+    defaultRange,
     from: searchParams.from,
     interval: searchParams.interval,
     to: searchParams.to,
   });
 
   return (
-    <ResponsiveSearchParamsProvider>
+    <ResponsiveSearchParamsProvider value={searchParams}>
       <ProjectPage
-        project={project}
         header={{
+          client,
           title: "AI",
-          description:
-            "Interact with any EVM chain with natural language",
-          docsLink: "https://portal.thirdweb.com/ai/chat",
+          description: "Interact with any EVM chain with natural language",
+          actions: {
+            primary: {
+              label: "Documentation",
+              href: "https://portal.thirdweb.com/ai/chat",
+              external: true,
+            },
+            secondary: {
+              label: "API Reference",
+              href: "https://api.thirdweb.com/reference#tag/ai/post/ai/chat",
+              external: true,
+            },
+          },
           links: [
+            {
+              href: "https://portal.thirdweb.com/ai/chat",
+              type: "docs",
+            },
             {
               href: "https://api.thirdweb.com/reference#tag/ai/post/ai/chat",
-              label: "API Reference",
+              type: "api",
             },
             {
               href: "https://playground.thirdweb.com/ai/chat",
-              label: "Playground",
+              type: "playground",
             },
           ],
         }}
@@ -93,4 +108,4 @@ export default async function Page(props: {
       </ProjectPage>
     </ResponsiveSearchParamsProvider>
   );
-}
+}