feat: Add auto-execute transactions to Nebula context

This commit introduces the ability to specify whether transactions should be automatically executed within the Nebula context. This provides more control over the AI's interaction with the blockchain.

Co-authored-by: joaquim.verges <[email protected]>

Author: cursoragent

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

@@ -23,6 +23,7 @@ export async function promptNebula(params: {
       chain_ids: params.context.chainIds?.map(Number) || [],
       session_id: params.context.sessionId ?? undefined,
       wallet_address: params.context.walletAddress,
+      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

@@ -68,12 +68,19 @@ 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);
@@ -115,6 +122,11 @@ export function ChatPageContent(props: {
   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 handleSendMessage = useCallback(
     async (message: NebulaUserMessage) => {
       setUserHasSubmittedMessage(true);
@@ -227,6 +239,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 +299,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 +736,64 @@ 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) {