From 270e53ccaf2e2daba84e0191b5bef915bdafa57c Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 24 Apr 2025 19:41:15 +0000
Subject: [PATCH] [TOOL-4280] Nebula: Send automatic msg after sent transaction
 is settled (#6843)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on enhancing the chat and transaction components by adding a `sendMessage` prop and handling transaction settlement events. It improves the interaction between components and provides better logging for transaction settlements.

### Detailed summary
- Added `sendMessage` prop to `FloatingChatContent` and `ChatPageContent`.
- Introduced `onTxSettled` callback in `ExecuteTransactionCard` and `ExecuteTransactionCardLayout`.
- Enhanced `Chats` component to utilize `sendMessage` for transaction confirmations.
- Implemented logging for transaction settlements in `ExecuteTransactionCard`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../(app)/components/ChatPageContent.tsx          |  1 +
 .../nebula-app/(app)/components/Chats.stories.tsx |  3 +++
 .../src/app/nebula-app/(app)/components/Chats.tsx | 15 ++++++++++++++-
 .../components/ExecuteTransactionCard.stories.tsx |  9 ++++++++-
 .../(app)/components/ExecuteTransactionCard.tsx   |  8 ++++++++
 .../FloatingChat/FloatingChatContent.tsx          |  1 +
 6 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
index 5be28387b09..723a33f2916 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/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]">
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
index 81b56830a10..ad34b3f0e24 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
+++ b/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"
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
index df1d1cddac7..61e0e9c8285 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
+++ b/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: {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx
index 8975bc95495..a9429cfe1d8 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx
+++ b/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}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
index a8d64c5c1f9..b817948efb9 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.tsx
+++ b/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,6 +278,8 @@ export function ExecuteTransactionCardLayout(props: {
                   txHash: confirmReceipt.transactionHash,
                 });
 
+                props.onTxSettled(txHash);
+
                 trackEvent({
                   category: "nebula",
                   action: "execute_transaction",
@@ -282,6 +287,9 @@ export function ExecuteTransactionCardLayout(props: {
                   chainId: txData.chainId,
                 });
               } catch {
+                if (txHash) {
+                  props.onTxSettled(txHash);
+                }
                 props.setStatus({
                   type: "failed",
                   txHash: txHash,
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
index 1629c9d5b39..57b06358ecb 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
+++ b/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