[TOOL-4280] Nebula: Send automatic after sent transaction is settled

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -370,6 +370,7 @@ export function ChatPageContent(props: {
                 client={client}
                 enableAutoScroll={enableAutoScroll}
                 setEnableAutoScroll={setEnableAutoScroll}
+                sendMessage={handleSendMessage}
               />
 
               <div className="container max-w-[800px]">

apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx

@@ -192,6 +192,7 @@ function Story() {
 
         <BadgeContainer label="Assistant response With request_id, Without request_id">
           <Chats
+            sendMessage={() => {}}
             enableAutoScroll={false}
             setEnableAutoScroll={() => {}}
             client={storybookThirdwebClient}
@@ -215,6 +216,7 @@ function Story() {
 
         <BadgeContainer label="Assistant markdown">
           <Chats
+            sendMessage={() => {}}
             enableAutoScroll={false}
             setEnableAutoScroll={() => {}}
             client={storybookThirdwebClient}
@@ -249,6 +251,7 @@ function Variant(props: {
         enableAutoScroll={false}
         setEnableAutoScroll={() => {}}
         client={storybookThirdwebClient}
+        sendMessage={() => {}}
         authToken="xxxxx"
         isChatStreaming={false}
         sessionId="xxxxx"

apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx

@@ -52,6 +52,7 @@ export function Chats(props: {
   setEnableAutoScroll: (enable: boolean) => void;
   enableAutoScroll: boolean;
   useSmallText?: boolean;
+  sendMessage: (message: string) => void;
 }) {
   const { messages, setEnableAutoScroll, enableAutoScroll } = props;
   const scrollAnchorRef = useRef<HTMLDivElement>(null);
@@ -169,6 +170,11 @@ export function Chats(props: {
                             <ExecuteTransactionCardWithFallback
                               txData={message.data}
                               client={props.client}
+                              onTxSettled={(txHash) => {
+                                props.sendMessage(
+                                  `I've sent the transaction with hash: ${txHash}.`,
+                                );
+                              }}
                             />
                           ) : (
                             <span className="leading-loose">
@@ -206,6 +212,7 @@ export function Chats(props: {
 function ExecuteTransactionCardWithFallback(props: {
   txData: NebulaTxData | null;
   client: ThirdwebClient;
+  onTxSettled: (txHash: string) => void;
 }) {
   if (!props.txData) {
     return (
@@ -216,7 +223,13 @@ function ExecuteTransactionCardWithFallback(props: {
     );
   }
 
-  return <ExecuteTransactionCard txData={props.txData} client={props.client} />;
+  return (
+    <ExecuteTransactionCard
+      txData={props.txData}
+      client={props.client}
+      onTxSettled={props.onTxSettled}
+    />
+  );
 }
 
 function MessageActions(props: {

apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer, storybookThirdwebClient } from "stories/utils";
+import {
+  BadgeContainer,
+  storybookLog,
+  storybookThirdwebClient,
+} from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import {
   ExecuteTransactionCardLayout,
@@ -61,6 +65,9 @@ function Variant(props: {
   return (
     <BadgeContainer label={props.label}>
       <ExecuteTransactionCardLayout
+        onTxSettled={(txHash) => {
+          storybookLog(`onTxSettled called with ${txHash}`);
+        }}
         setStatus={setStatus}
         status={status}
         client={storybookThirdwebClient}

apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx

@@ -49,6 +49,7 @@ export type TxStatus =
 export function ExecuteTransactionCard(props: {
   txData: NebulaTxData;
   client: ThirdwebClient;
+  onTxSettled: (txHash: string) => void;
 }) {
   const [status, setStatus] = useState<TxStatus>({ type: "idle" });
   return (
@@ -57,6 +58,7 @@ export function ExecuteTransactionCard(props: {
       client={props.client}
       status={status}
       setStatus={setStatus}
+      onTxSettled={props.onTxSettled}
     />
   );
 }
@@ -66,6 +68,7 @@ export function ExecuteTransactionCardLayout(props: {
   client: ThirdwebClient;
   status: TxStatus;
   setStatus: (status: TxStatus) => void;
+  onTxSettled: (txHash: string) => void;
 }) {
   const { theme } = useTheme();
   const { txData } = props;
@@ -275,13 +278,18 @@ export function ExecuteTransactionCardLayout(props: {
                   txHash: confirmReceipt.transactionHash,
                 });
 
+                props.onTxSettled(txHash);
+
                 trackEvent({
                   category: "nebula",
                   action: "execute_transaction",
                   label: "confirmed",
                   chainId: txData.chainId,
                 });
               } catch {
+                if (txHash) {
+                  props.onTxSettled(txHash);
+                }
                 props.setStatus({
                   type: "failed",
                   txHash: txHash,

apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx

@@ -189,6 +189,7 @@ function FloatingChatContentLoggedIn(props: {
           enableAutoScroll={enableAutoScroll}
           setEnableAutoScroll={setEnableAutoScroll}
           useSmallText
+          sendMessage={handleSendMessage}
         />
       )}
       <ChatBar