Add chat context controls to playground

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

@@ -22,7 +22,9 @@ export async function promptNebula(params: {
     body.context = {
       chain_ids: params.context.chainIds?.map(Number) || [],
       session_id: params.context.sessionId ?? undefined,
-      wallet_address: params.context.walletAddress,
+      from: params.context.walletAddress ?? undefined,
+      auto_execute_transactions:
+        params.context.autoExecuteTransactions || false,
     };
   }
 

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

@@ -34,6 +34,7 @@ export type NebulaContext = {
   chainIds: string[] | null;
   walletAddress: string | null;
   sessionId: string | null;
+  autoExecuteTransactions?: boolean;
 };
 
 export type NebulaSwapData = {

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

@@ -49,6 +49,18 @@ export function ChatPageContent(props: {
   const connectionStatus = useActiveWalletConnectionStatus();
   const connectedWallets = useConnectedWallets();
   const setActiveWallet = useSetActiveWallet();
+  const [chatAbortController, setChatAbortController] = useState<
+    AbortController | undefined
+  >();
+
+  const [isChatStreaming, setIsChatStreaming] = useState(false);
+  const [enableAutoScroll, setEnableAutoScroll] = useState(false);
+  const [showConnectModal, setShowConnectModal] = useState(false);
+
+  // User-configurable context options
+  const [userWalletAddress, setUserWalletAddress] = useState("");
+  const [userChainIds, setUserChainIds] = useState("");
+  const [userAutoExecute, setUserAutoExecute] = useState(false);
 
   const [userHasSubmittedMessage, setUserHasSubmittedMessage] = useState(false);
   const [messages, setMessages] = useState<Array<ChatMessage>>(() => {
@@ -68,12 +80,32 @@ export function ChatPageContent(props: {
   });
 
   const contextFilters = useMemo(() => {
+    // Parse user-entered chain IDs
+    const userChainIdArray = userChainIds
+      .split(",")
+      .map((id) => id.trim())
+      .filter((id) => id !== "" && !isNaN(Number(id)));
+
     return {
-      chainIds: _contextFilters?.chainIds || [],
+      chainIds:
+        userChainIdArray.length > 0
+          ? userChainIdArray
+          : _contextFilters?.chainIds || [],
       sessionId: _contextFilters?.sessionId || null,
-      walletAddress: address || _contextFilters?.walletAddress || null,
+      walletAddress:
+        userWalletAddress.trim() ||
+        address ||
+        _contextFilters?.walletAddress ||
+        null,
+      autoExecuteTransactions: userAutoExecute,
     } satisfies NebulaContext;
-  }, [_contextFilters, address]);
+  }, [
+    _contextFilters,
+    address,
+    userWalletAddress,
+    userChainIds,
+    userAutoExecute,
+  ]);
 
   const setContextFilters = useCallback((v: NebulaContext | undefined) => {
     _setContextFilters(v);
@@ -107,14 +139,6 @@ export function ChatPageContent(props: {
     });
   }, []);
 
-  const [chatAbortController, setChatAbortController] = useState<
-    AbortController | undefined
-  >();
-
-  const [isChatStreaming, setIsChatStreaming] = useState(false);
-  const [enableAutoScroll, setEnableAutoScroll] = useState(false);
-  const [showConnectModal, setShowConnectModal] = useState(false);
-
   const handleSendMessage = useCallback(
     async (message: NebulaUserMessage) => {
       setUserHasSubmittedMessage(true);
@@ -227,6 +251,14 @@ export function ChatPageContent(props: {
           {/* Chat input - anchored at bottom (same as chat state) */}
           <div className="flex-shrink-0 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
             <div className="container max-w-[800px] py-4">
+              <ContextOptionsBar
+                walletAddress={userWalletAddress}
+                chainIds={userChainIds}
+                autoExecute={userAutoExecute}
+                onWalletAddressChange={setUserWalletAddress}
+                onChainIdsChange={setUserChainIds}
+                onAutoExecuteChange={setUserAutoExecute}
+              />
               <SimpleChatBar
                 abortChatStream={() => {
                   chatAbortController?.abort();
@@ -279,6 +311,14 @@ export function ChatPageContent(props: {
           {/* Chat input - anchored at bottom */}
           <div className="flex-shrink-0 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
             <div className="container max-w-[800px] py-4">
+              <ContextOptionsBar
+                walletAddress={userWalletAddress}
+                chainIds={userChainIds}
+                autoExecute={userAutoExecute}
+                onWalletAddressChange={setUserWalletAddress}
+                onChainIdsChange={setUserChainIds}
+                onAutoExecuteChange={setUserAutoExecute}
+              />
               <SimpleChatBar
                 abortChatStream={() => {
                   chatAbortController?.abort();
@@ -708,6 +748,73 @@ function RenderMessage(props: {
   );
 }
 
+function ContextOptionsBar(props: {
+  walletAddress: string;
+  chainIds: string;
+  autoExecute: boolean;
+  onWalletAddressChange: (value: string) => void;
+  onChainIdsChange: (value: string) => void;
+  onAutoExecuteChange: (value: boolean) => void;
+}) {
+  return (
+    <div className="mb-4 rounded-lg border bg-card p-3">
+      <div className="flex flex-wrap items-center gap-4">
+        <div className="flex items-center gap-2">
+          <label
+            htmlFor="wallet-address"
+            className="text-sm font-medium text-muted-foreground"
+          >
+            Wallet Address:
+          </label>
+          <input
+            id="wallet-address"
+            type="text"
+            value={props.walletAddress}
+            onChange={(e) => props.onWalletAddressChange(e.target.value)}
+            placeholder="0x..."
+            className="px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring bg-background"
+            style={{ width: "200px" }}
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <label
+            htmlFor="chain-ids"
+            className="text-sm font-medium text-muted-foreground"
+          >
+            Chain IDs:
+          </label>
+          <input
+            id="chain-ids"
+            type="text"
+            value={props.chainIds}
+            onChange={(e) => props.onChainIdsChange(e.target.value)}
+            placeholder="1, 8453"
+            className="px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring bg-background"
+            style={{ width: "100px" }}
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <input
+            id="auto-execute"
+            type="checkbox"
+            checked={props.autoExecute}
+            onChange={(e) => props.onAutoExecuteChange(e.target.checked)}
+            className="w-4 h-4 text-primary border-border rounded focus:ring-ring"
+          />
+          <label
+            htmlFor="auto-execute"
+            className="text-sm font-medium text-muted-foreground"
+          >
+            Auto Execute Transactions
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 const NEBULA_LAST_USED_CHAIN_IDS_KEY = "nebula-last-used-chain-ids";
 
 function saveLastUsedChainIds(chainIds: string[] | undefined) {