[NEB-123] Nebula: Allow settings context with search params

MananTank · MananTank · commit 0d478a93ffa9 · 2025-04-16T02:13:03.000+05:30
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 public-hoist-pattern[]=*import-in-the-middle*
-public-hoist-pattern[]=*require-in-the-middle*
+public-hoist-pattern[]=*require-in-the-middle*
+public-hoist-pattern[]=*pino-pretty*
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx
@@ -34,7 +34,7 @@ export default async function Page(props: {
       session={session}
       type="new-chat"
       account={account}
-      initialPrompt={undefined}
+      initialParams={undefined}
     />
   );
 }
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx
@@ -17,7 +17,7 @@ export default async function Page() {
       session={undefined}
       type="new-chat"
       account={account}
-      initialPrompt={undefined}
+      initialParams={undefined}
     />
   );
 }
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -10,8 +10,9 @@ export function ChatBar(props: {
   sendMessage: (message: string) => void;
   isChatStreaming: boolean;
   abortChatStream: () => void;
+  prefillMessage: string | undefined;
 }) {
-  const [message, setMessage] = useState("");
+  const [message, setMessage] = useState(props.prefillMessage || "");
 
   return (
     <div className="rounded-2xl border border-border bg-card p-2">
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
@@ -29,7 +29,13 @@ export function ChatPageContent(props: {
   authToken: string;
   type: "landing" | "new-chat";
   account: Account;
-  initialPrompt: string | undefined;
+  initialParams:
+    | {
+        q: string | undefined;
+        chainIds: number[];
+        wallet: string | undefined;
+      }
+    | undefined;
 }) {
   const address = useActiveAccount()?.address;
   const client = useThirdwebClient(props.authToken);
@@ -85,8 +91,12 @@ export function ChatPageContent(props: {
   >(() => {
     const contextRes = props.session?.context;
     const value: NebulaContext = {
-      chainIds: contextRes?.chain_ids || null,
-      walletAddress: contextRes?.wallet_address || null,
+      chainIds:
+        contextRes?.chain_ids ||
+        props.initialParams?.chainIds.map((x) => x.toString()) ||
+        [],
+      walletAddress:
+        contextRes?.wallet_address || props.initialParams?.wallet || null,
     };
 
     return value;
@@ -118,8 +128,9 @@ export function ChatPageContent(props: {
             walletAddress: null,
           };
 
-      // Only set wallet address from connected wallet
-      updatedContextFilters.walletAddress = address || null;
+      if (!updatedContextFilters.walletAddress && address) {
+        updatedContextFilters.walletAddress = address;
+      }
 
       // if we have last used chains in storage, continue using them
       try {
@@ -370,14 +381,14 @@ export function ChatPageContent(props: {
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
     if (
-      props.initialPrompt &&
+      props.initialParams?.q &&
       messages.length === 0 &&
       !hasDoneAutoPrompt.current
     ) {
       hasDoneAutoPrompt.current = true;
-      handleSendMessage(props.initialPrompt);
+      handleSendMessage(props.initialParams.q);
     }
-  }, [props.initialPrompt, messages.length, handleSendMessage]);
+  }, [props.initialParams?.q, messages.length, handleSendMessage]);
 
   const showEmptyState = !userHasSubmittedMessage && messages.length === 0;
 
@@ -412,7 +423,10 @@ export function ChatPageContent(props: {
         <div className="relative flex grow flex-col overflow-hidden rounded-lg pb-6">
           {showEmptyState ? (
             <div className="fade-in-0 container flex max-w-[800px] grow animate-in flex-col justify-center">
-              <EmptyStateChatPageContent sendMessage={handleSendMessage} />
+              <EmptyStateChatPageContent
+                sendMessage={handleSendMessage}
+                prefillMessage={props.initialParams?.q}
+              />
             </div>
           ) : (
             <div className="fade-in-0 relative z-[0] flex max-h-full flex-1 animate-in flex-col overflow-hidden">
@@ -430,6 +444,7 @@ export function ChatPageContent(props: {
 
               <div className="container max-w-[800px]">
                 <ChatBar
+                  prefillMessage={undefined}
                   sendMessage={handleSendMessage}
                   isChatStreaming={isChatStreaming}
                   abortChatStream={() => {
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
@@ -27,6 +27,7 @@ function Story() {
           abortChatStream={() => {}}
           isChatStreaming={false}
           sendMessage={() => {}}
+          prefillMessage={undefined}
         />
       </BadgeContainer>
 
@@ -35,6 +36,16 @@ function Story() {
           abortChatStream={() => {}}
           isChatStreaming={true}
           sendMessage={() => {}}
+          prefillMessage={undefined}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Prefilled Message">
+        <ChatBar
+          abortChatStream={() => {}}
+          isChatStreaming={false}
+          sendMessage={() => {}}
+          prefillMessage="This is a prefilled message"
         />
       </BadgeContainer>
     </div>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
@@ -15,13 +15,26 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {},
+  args: {
+    prefillMessage: undefined,
+  },
+};
+
+export const PrefilledMessage: Story = {
+  args: {
+    prefillMessage: "This is a prefilled message",
+  },
 };
 
-function Story() {
+function Story(props: {
+  prefillMessage: string | undefined;
+}) {
   return (
     <div className="container flex max-w-[800px] grow flex-col justify-center overflow-hidden">
-      <EmptyStateChatPageContent sendMessage={() => {}} />
+      <EmptyStateChatPageContent
+        sendMessage={() => {}}
+        prefillMessage={props.prefillMessage}
+      />
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
@@ -8,6 +8,7 @@ import { ChatBar } from "./ChatBar";
 
 export function EmptyStateChatPageContent(props: {
   sendMessage: (message: string) => void;
+  prefillMessage: string | undefined;
 }) {
   return (
     <div className="py-10 lg:py-16">
@@ -33,6 +34,7 @@ export function EmptyStateChatPageContent(props: {
             abortChatStream={() => {
               // the page will switch so, no need to handle abort here
             }}
+            prefillMessage={props.prefillMessage}
           />
           <div className="h-5" />
           <div className="flex flex-wrap justify-center gap-2.5">
diff --git a/apps/dashboard/src/app/nebula-app/(app)/page.tsx b/apps/dashboard/src/app/nebula-app/(app)/page.tsx
@@ -1,31 +1,74 @@
+import { unstable_cache } from "next/cache";
+import { isAddress } from "thirdweb";
+import { fetchChain } from "../../../utils/fetchChain";
 import { getValidAccount } from "../../account/settings/getAccount";
 import { getAuthToken } from "../../api/lib/getAuthToken";
 import { loginRedirect } from "../../login/loginRedirect";
 import { ChatPageContent } from "./components/ChatPageContent";
 
 export default async function Page(props: {
   searchParams: Promise<{
-    prompt?: string;
+    q?: string | string[];
+    chain?: string | string[];
+    wallet?: string | string[];
   }>;
 }) {
-  const [searchParams, authToken] = await Promise.all([
-    props.searchParams,
+  const searchParams = await props.searchParams;
+
+  const [chainIds, authToken, account] = await Promise.all([
+    getChainIds(searchParams.chain),
     getAuthToken(),
+    getValidAccount(),
   ]);
 
   if (!authToken) {
     loginRedirect();
   }
 
-  const account = await getValidAccount();
-
   return (
     <ChatPageContent
       authToken={authToken}
       session={undefined}
       type="landing"
       account={account}
-      initialPrompt={searchParams.prompt}
+      initialParams={{
+        q: typeof searchParams.q === "string" ? searchParams.q : undefined,
+        chainIds: chainIds,
+        wallet:
+          typeof searchParams.wallet === "string" &&
+          isAddress(searchParams.wallet)
+            ? searchParams.wallet
+            : undefined,
+      }}
     />
   );
 }
+
+const getChainIds = unstable_cache(
+  async (_chainNames: string[] | string | undefined) => {
+    if (!_chainNames) {
+      return [];
+    }
+
+    const chainIds: number[] = [];
+
+    const chainNames =
+      typeof _chainNames === "string" ? [_chainNames] : _chainNames;
+
+    const chainResults = await Promise.allSettled(
+      chainNames.map((x) => fetchChain(x)),
+    );
+
+    for (const chainResult of chainResults) {
+      if (chainResult.status === "fulfilled" && chainResult.value) {
+        chainIds.push(chainResult.value.chainId);
+      }
+    }
+
+    return chainIds;
+  },
+  ["nebula_getChainIds"],
+  {
+    revalidate: 60 * 60 * 24, // 24 hours
+  },
+);
diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
@@ -11,11 +11,37 @@ import { LoginAndOnboardingPageContent } from "../../login/LoginPage";
 
 export function NebulaLoginPage(props: {
   account: Account | undefined;
+  params: {
+    chain: string | string[] | undefined;
+    q: string | undefined;
+    wallet: string | undefined;
+  };
 }) {
-  const [message, setMessage] = useState<string | undefined>(undefined);
+  const [message, setMessage] = useState<string | undefined>(props.params.q);
   const [showPage, setShowPage] = useState<"connect" | "welcome">(
     props.account ? "connect" : "welcome",
   );
+
+  const redirectPathObj = {
+    chain: props.params.chain,
+    q: message, // don't use props.params.q, because message may be updated by user
+    wallet: props.params.wallet,
+  };
+
+  const redirectPathParams = Object.entries(redirectPathObj)
+    .map(([key, value]) => {
+      if (!value) {
+        return "";
+      }
+
+      if (Array.isArray(value)) {
+        return value.map((v) => `${key}=${encodeURIComponent(v)}`).join("&");
+      }
+
+      return `${key}=${encodeURIComponent(value)}`;
+    })
+    .join("&");
+
   return (
     <div className="relative flex min-h-dvh flex-col overflow-hidden bg-background">
       {/* nav */}
@@ -55,15 +81,14 @@ export function NebulaLoginPage(props: {
         <LoginAndOnboardingPageContent
           loginWithInAppWallet={false}
           account={props.account}
-          redirectPath={
-            message ? `/?prompt=${encodeURIComponent(message)}` : "/"
-          }
+          redirectPath={`/?${redirectPathParams}`}
         />
       )}
 
       {showPage === "welcome" && (
         <div className="container relative flex max-w-[800px] grow flex-col justify-center overflow-hidden rounded-lg pb-6">
           <EmptyStateChatPageContent
+            prefillMessage={message}
             sendMessage={(msg) => {
               setMessage(msg);
               setShowPage("connect");
diff --git a/apps/dashboard/src/app/nebula-app/login/page.tsx b/apps/dashboard/src/app/nebula-app/login/page.tsx
@@ -1,8 +1,27 @@
 import { getRawAccount } from "../../account/settings/getAccount";
 import { NebulaLoginPage } from "./NebulaLoginPage";
 
-export default async function NebulaLogin() {
+export default async function NebulaLogin(props: {
+  searchParams: Promise<{
+    chain?: string | string[];
+    q?: string | string[];
+    wallet?: string | string[];
+  }>;
+}) {
+  const searchParams = await props.searchParams;
   const account = await getRawAccount();
 
-  return <NebulaLoginPage account={account} />;
+  return (
+    <NebulaLoginPage
+      account={account}
+      params={{
+        chain: searchParams.chain,
+        q: typeof searchParams.q === "string" ? searchParams.q : undefined,
+        wallet:
+          typeof searchParams.wallet === "string"
+            ? searchParams.wallet
+            : undefined,
+      }}
+    />
+  );
 }
diff --git a/apps/dashboard/src/middleware.ts b/apps/dashboard/src/middleware.ts
@@ -32,14 +32,29 @@ export async function middleware(request: NextRequest) {
   const subdomain = host?.split(".")[0];
   const paths = pathname.slice(1).split("/");
 
+  const activeAccount = request.cookies.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  const authCookie = activeAccount
+    ? request.cookies.get(COOKIE_PREFIX_TOKEN + getAddress(activeAccount))
+    : null;
+
   // nebula.thirdweb.com -> render page at app/nebula-app
   // on vercel preview, the format is nebula---thirdweb-www-git-<branch-name>.thirdweb-preview.com
   if (
     subdomain &&
     (subdomain === "nebula" || subdomain.startsWith("nebula---"))
   ) {
+    // preserve search params when redirecting to /login page
+    if (!authCookie && paths[0] !== "login") {
+      return redirect(request, "/login", {
+        searchParams: request.nextUrl.searchParams.toString(),
+      });
+    }
+
     const newPaths = ["nebula-app", ...paths];
-    return rewrite(request, `/${newPaths.join("/")}`, undefined);
+
+    return rewrite(request, `/${newPaths.join("/")}`, {
+      searchParams: request.nextUrl.searchParams.toString(),
+    });
   }
 
   // requesting page at app/nebula-app on thirdweb.com -> redirect to nebula.thirdweb.com
@@ -53,10 +68,6 @@ export async function middleware(request: NextRequest) {
   }
 
   let cookiesToSet: Record<string, string> | undefined = undefined;
-  const activeAccount = request.cookies.get(COOKIE_ACTIVE_ACCOUNT)?.value;
-  const authCookie = activeAccount
-    ? request.cookies.get(COOKIE_PREFIX_TOKEN + getAddress(activeAccount))
-    : null;
 
   // utm collection
   // if user is already signed in - don't bother capturing utm params

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export default async function Page(props: {`
`34`	`34`	`session={session}`
`35`	`35`	`type="new-chat"`
`36`	`36`	`account={account}`
`37`		`- initialPrompt={undefined}`
	`37`	`+ initialParams={undefined}`
`38`	`38`	`/>`
`39`	`39`	`);`
`40`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ export default async function Page() {`
`17`	`17`	`session={undefined}`
`18`	`18`	`type="new-chat"`
`19`	`19`	`account={account}`
`20`		`- initialPrompt={undefined}`
	`20`	`+ initialParams={undefined}`
`21`	`21`	`/>`
`22`	`22`	`);`
`23`	`23`	`}`