From 6549381c50e2abebc0a8aadda85585c971cdedfd Mon Sep 17 00:00:00 2001 From: MananTank Date: Thu, 24 Apr 2025 04:00:49 +0000 Subject: [PATCH] [NEB-189] Nebula: Minor UI tweaks (#6831) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on updating the `Chatbar`, `ChatSidebar`, `FloatingChatContent`, and `ChatPageContent` components to enhance wallet management and user interface elements, including wallet identifiers and visual adjustments. ### Detailed summary - Updated `connectedWallets` to include `walletId` instead of `type`. - Changed `NebulaIcon` size in `ChatSidebar` from `size-8` to `size-6`. - Updated `Badge` text from "Beta" to "Alpha" in `ChatSidebar`. - Modified `Button` class in `ChatSidebar` to include a background. - Added `useActiveWallet` hook in `FloatingChatContent`. - Adjusted wallet handling in `FloatingChatContent` to utilize `activeWallet`. - Enhanced error messaging in `handleNebulaPrompt` for no response scenarios. - Updated `WalletMeta` type to use `walletId` instead of `type`. - Refined `WalletSelector` to include `AccountProvider` and `WalletProvider` components. - Improved loading and fallback components for account avatars and names. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../nebula-app/(app)/components/ChatBar.tsx | 107 +++++++++++------- .../(app)/components/ChatPageContent.tsx | 29 ++++- .../(app)/components/ChatSidebar.tsx | 10 +- .../(app)/components/Chatbar.stories.tsx | 6 +- .../FloatingChat/FloatingChatContent.tsx | 10 +- 5 files changed, 112 insertions(+), 50 deletions(-) diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx index 00ac654dca6..87883f2459a 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx @@ -29,12 +29,15 @@ import { AccountBlobbie, AccountName, AccountProvider, + WalletName, + WalletProvider, } from "thirdweb/react"; import { shortenAddress } from "thirdweb/utils"; +import type { Wallet } from "thirdweb/wallets"; import type { NebulaContext } from "../api/chat"; export type WalletMeta = { - type: "user" | "smart"; + walletId: Wallet["id"]; address: string; }; @@ -95,7 +98,7 @@ export function ChatBar(props: { hideTestnets disableChainId selectedChainIds={selectedChainIds} - popoverContentClassName="!w-[calc(100vw-80px)] lg:!w-[360px]" + popoverContentClassName="!w-[calc(100vw-80px)] lg:!w-[320px]" align="start" side="top" showSelectedValuesInModal={true} @@ -257,8 +260,22 @@ function WalletSelector(props: { aria-expanded={open} className="flex h-auto items-center gap-1 rounded-full px-2 py-1.5 text-xs" > - {shortenAddress(props.activeAccountAddress)} - + + + } + fallbackComponent={ + + } + /> + {shortenAddress(props.activeAccountAddress)} + + @@ -288,48 +305,58 @@ function WalletSelector(props: { >
-
- - } - fallbackComponent={ - - } - /> + +
+ + } + fallbackComponent={ + + } + /> -
-
- - {shortenAddress(wallet.address)} - - } - fallbackComponent={ - - {shortenAddress(wallet.address)} - - } - /> +
+
+ + {shortenAddress(wallet.address)} + + } + fallbackComponent={ + + {shortenAddress(wallet.address)} + + } + /> - + - {wallet.type === "smart" && ( - - Gasless - - )} -
+ {wallet.walletId === "smart" && ( + + Gasless + + )} +
-
- {wallet.type === "user" && "Your Account"} - {wallet.type === "smart" && "Smart Account"} +
+ {wallet.walletId === "smart" ? ( + "Smart Account" + ) : ( + Your Account } + loadingComponent={ + + } + /> + )} +
-
+
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 b70a7a3a8dd..5be28387b09 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx @@ -312,7 +312,7 @@ export function ChatPageContent(props: { const connectedWalletsMeta: WalletMeta[] = connectedWallets.map((x) => ({ address: x.getAccount()?.address || "", - type: x.id === "smart" ? "smart" : "user", + walletId: x.id, })); const handleUpdateContextFilters = async ( @@ -491,6 +491,8 @@ export async function handleNebulaPrompt(params: { } = params; let requestIdForMessage = ""; + let hasReceivedResponse = false; + await promptNebula({ abortController, message, @@ -506,6 +508,12 @@ export async function handleNebulaPrompt(params: { } if (res.event === "delta") { + // ignore empty string delta + if (!res.data.v) { + return; + } + + hasReceivedResponse = true; setMessages((prev) => { const lastMessage = prev[prev.length - 1]; // if last message is presence, overwrite it @@ -561,6 +569,7 @@ export async function handleNebulaPrompt(params: { if (res.event === "action") { if (res.type === "sign_transaction") { + hasReceivedResponse = true; setMessages((prev) => { let prevMessages = prev; // if last message is presence, remove it @@ -588,6 +597,24 @@ export async function handleNebulaPrompt(params: { }, context: contextFilters, }); + + // if the stream ends without any delta or tx events - we have nothing to show + // show an error message in that case + if (!hasReceivedResponse) { + setMessages((prev) => { + const newMessages = prev.slice( + 0, + prev[prev.length - 1]?.type === "presence" ? -1 : undefined, + ); + + newMessages.push({ + text: "No response received, please try again", + type: "error", + }); + + return newMessages; + }); + } } export function handleNebulaPromptError(params: { diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx index 06f63edb7b5..52542732ab8 100644 --- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx +++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx @@ -40,19 +40,23 @@ export function ChatSidebar(props: {
- + Nebula - Beta + Alpha
-