[Playground] Refactor AI types and move definitions to types.ts

apps/playground-web/src/app/ai/api/chat.ts

@@ -1,45 +1,11 @@
 import { stream } from "fetch-event-stream";
-import type { NebulaTxData, NebulaUserMessage } from "./types";
-
-const API_URL = `https://${process.env.NEXT_PUBLIC_API_URL || "api.thirdweb.com"}`;
-
-export type NebulaContext = {
-  chainIds: string[] | null;
-  walletAddress: string | null;
-  sessionId: string | null;
-};
-
-type NebulaSwapData = {
-  action: string;
-  transaction: {
-    chainId: number;
-    to: `0x${string}`;
-    data: `0x${string}`;
-  };
-  to: {
-    address: `0x${string}`;
-    amount: string;
-    chain_id: number;
-    decimals: number;
-    symbol: string;
-  };
-  from: {
-    address: `0x${string}`;
-    amount: string;
-    chain_id: number;
-    decimals: number;
-    symbol: string;
-  };
-  intent: {
-    amount: string;
-    destinationChainId: number;
-    destinationTokenAddress: `0x${string}`;
-    originChainId: number;
-    originTokenAddress: `0x${string}`;
-    receiver: `0x${string}`;
-    sender: `0x${string}`;
-  };
-};
+import {
+  API_URL,
+  type NebulaContext,
+  type NebulaSwapData,
+  type NebulaTxData,
+  type NebulaUserMessage,
+} from "./types";
 
 export async function promptNebula(params: {
   message: NebulaUserMessage;

apps/playground-web/src/app/ai/api/types.ts

@@ -1,3 +1,5 @@
+export const API_URL = `https://${process.env.NEXT_PUBLIC_API_URL || "api.thirdweb.com"}`;
+
 type NebulaUserMessageContentItem =
   | {
       type: "image";
@@ -27,3 +29,75 @@ export type NebulaTxData = {
   to: string;
   value: string;
 };
+
+export type NebulaContext = {
+  chainIds: string[] | null;
+  walletAddress: string | null;
+  sessionId: string | null;
+};
+
+export type NebulaSwapData = {
+  action: string;
+  transaction: {
+    chain_id: number;
+    to: `0x${string}`;
+    data: `0x${string}`;
+    value: string;
+  };
+  intent: {
+    amount: string;
+    destinationChainId: number;
+    destinationTokenAddress: `0x${string}`;
+    originChainId: number;
+    originTokenAddress: `0x${string}`;
+    receiver: `0x${string}`;
+    sender: `0x${string}`;
+  };
+};
+
+// Simplified types for the playground version
+export type WalletMeta = {
+  walletId: string;
+  address: string;
+};
+
+export type ChatMessage =
+  | {
+      type: "user";
+      content: NebulaUserMessageContent;
+    }
+  | {
+      text: string;
+      type: "error";
+    }
+  | {
+      texts: string[];
+      type: "presence";
+    }
+  | {
+      // assistant type message loaded from history doesn't have request_id
+      request_id: string | undefined;
+      text: string;
+      type: "assistant";
+    }
+  | {
+      type: "action";
+      subtype: "sign_transaction";
+      request_id: string;
+      data: NebulaTxData;
+    }
+  | {
+      type: "action";
+      subtype: "sign_swap";
+      request_id: string;
+      data: NebulaSwapData;
+    }
+  | {
+      type: "image";
+      request_id: string;
+      data: {
+        width: number;
+        height: number;
+        url: string;
+      };
+    };

apps/playground-web/src/app/ai/components/ChatPageContent.tsx

@@ -31,116 +31,16 @@ import { MarkdownRenderer } from "@/components/ui/markdown-renderer";
 import { Img } from "../../../components/ui/Img";
 import { Spinner } from "../../../components/ui/Spinner";
 import { THIRDWEB_CLIENT } from "../../../lib/client";
-import { type NebulaContext, promptNebula } from "../api/chat";
-import type { NebulaUserMessage } from "../api/types";
+import { promptNebula } from "../api/chat";
+import type {
+  ChatMessage,
+  NebulaContext,
+  NebulaUserMessage,
+  WalletMeta,
+} from "../api/types";
 import { examplePrompts } from "../data/examplePrompts";
 import { resolveSchemeWithErrorHandler } from "./resolveSchemeWithErrorHandler";
 
-// Simplified types for the playground version
-type WalletMeta = {
-  walletId: string;
-  address: string;
-};
-
-type NebulaUserMessageContentItem =
-  | {
-      type: "image";
-      image_url: string | null;
-      b64: string | null;
-    }
-  | {
-      type: "text";
-      text: string;
-    }
-  | {
-      type: "transaction";
-      transaction_hash: string;
-      chain_id: number;
-    };
-
-type NebulaUserMessageContent = NebulaUserMessageContentItem[];
-
-type ChatMessage =
-  | {
-      type: "user";
-      content: NebulaUserMessageContent;
-    }
-  | {
-      text: string;
-      type: "error";
-    }
-  | {
-      texts: string[];
-      type: "presence";
-    }
-  | {
-      // assistant type message loaded from history doesn't have request_id
-      request_id: string | undefined;
-      text: string;
-      type: "assistant";
-    }
-  | {
-      type: "action";
-      subtype: "sign_transaction";
-      request_id: string;
-      data: NebulaTxData;
-    }
-  | {
-      type: "action";
-      subtype: "sign_swap";
-      request_id: string;
-      data: NebulaSwapData;
-    }
-  | {
-      type: "image";
-      request_id: string;
-      data: {
-        width: number;
-        height: number;
-        url: string;
-      };
-    };
-
-type NebulaTxData = {
-  chain_id: number;
-  data: `0x${string}`;
-  to: string;
-  value?: string;
-};
-
-type NebulaSwapData = {
-  action: string;
-  transaction: {
-    chainId: number;
-    to: `0x${string}`;
-    data: `0x${string}`;
-    value?: string;
-  };
-  to: {
-    address: `0x${string}`;
-    amount: string;
-    chain_id: number;
-    decimals: number;
-    symbol: string;
-  };
-  from: {
-    address: `0x${string}`;
-    amount: string;
-    chain_id: number;
-    decimals: number;
-    symbol: string;
-  };
-  intent: {
-    amount: string;
-    destinationChainId: number;
-    destinationTokenAddress: `0x${string}`;
-    originChainId: number;
-    originTokenAddress: `0x${string}`;
-    receiver: `0x${string}`;
-    sender: `0x${string}`;
-  };
-};
-
 export function ChatPageContent(props: {
   client: ThirdwebClient;
   type: "landing" | "new-chat";
@@ -752,7 +652,7 @@ function RenderMessage(props: {
                     transaction={() =>
                       prepareTransaction({
                         client: THIRDWEB_CLIENT,
-                        chain: defineChain(message.data.transaction.chainId),
+                        chain: defineChain(message.data.transaction.chain_id),
                         data: message.data.transaction.data,
                         to: message.data.transaction.to,
                         value: message.data.transaction.value
@@ -768,7 +668,7 @@ function RenderMessage(props: {
                       props.sendMessage({
                         content: [
                           {
-                            chain_id: message.data.transaction.chainId,
+                            chain_id: message.data.transaction.chain_id,
                             transaction_hash: tx.transactionHash,
                             type: "transaction",
                           },
@@ -785,7 +685,7 @@ function RenderMessage(props: {
               ) : (
                 <ConnectButton
                   client={THIRDWEB_CLIENT}
-                  chain={defineChain(message.data.transaction.chainId)}
+                  chain={defineChain(message.data.transaction.chain_id)}
                 />
               )}
             </div>