[NEB-179] Nebula: Update context UI when context event type is received (#6770)

<!--

## 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 focuses on enhancing the `ChatSidebar`, `ChatPageContent`, and `FloatingChatContent` components by adding new properties and functionality related to context management and event handling within the chat application.

### Detailed summary
- Updated `<NebulaConnectWallet />` to accept `detailsButtonClassName` prop.
- Improved `code` component to handle class names and text length conditions.
- Added new event handling for "context" in the chat API.
- Extended `ChatStreamedResponse` and `ChatStreamedEvent` types to include "context" data.
- Integrated `setContextFilters` functionality in `ChatPageContent` and `FloatingChatContent` components.
- Refactored `contextFilters` state management in `FloatingChatContent`.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/api/chat.ts

@@ -105,6 +105,29 @@ export async function promptNebula(params: {
         });
         break;
       }
+
+      case "context": {
+        const data = JSON.parse(event.data) as {
+          data: string;
+          request_id: string;
+          session_id: string;
+        };
+
+        const contextData = JSON.parse(data.data) as {
+          wallet_address: string;
+          chain_ids: number[];
+        };
+
+        params.handleStream({
+          event: "context",
+          data: contextData,
+        });
+        break;
+      }
+
+      default: {
+        console.warn("unhandled event", event);
+      }
     }
   }
 }
@@ -136,6 +159,13 @@ type ChatStreamedResponse =
       event: "action";
       type: "sign_transaction" & (string & {});
       data: NebulaTxData;
+    }
+  | {
+      event: "context";
+      data: {
+        wallet_address: string;
+        chain_ids: number[];
+      };
     };
 
 type ChatStreamedEvent =
@@ -155,4 +185,8 @@ type ChatStreamedEvent =
       event: "action";
       type: "sign_transaction" & (string & {});
       data: string;
+    }
+  | {
+      event: "context";
+      data: string;
     };

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

@@ -251,6 +251,7 @@ export function ChatPageContent(props: {
           authToken: props.authToken,
           setMessages,
           contextFilters: contextFilters,
+          setContextFilters,
         });
       } catch (error) {
         if (abortController.signal.aborted) {
@@ -266,7 +267,14 @@ export function ChatPageContent(props: {
         setEnableAutoScroll(false);
       }
     },
-    [sessionId, contextFilters, props.authToken, messages.length, initSession],
+    [
+      sessionId,
+      contextFilters,
+      props.authToken,
+      messages.length,
+      initSession,
+      setContextFilters,
+    ],
   );
 
   const hasDoneAutoPrompt = useRef(false);
@@ -450,6 +458,7 @@ export async function handleNebulaPrompt(params: {
   authToken: string;
   setMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>>;
   contextFilters: NebulaContext | undefined;
+  setContextFilters: (v: NebulaContext | undefined) => void;
 }) {
   const {
     abortController,
@@ -458,6 +467,7 @@ export async function handleNebulaPrompt(params: {
     authToken,
     setMessages,
     contextFilters,
+    setContextFilters,
   } = params;
   let requestIdForMessage = "";
 
@@ -548,6 +558,13 @@ export async function handleNebulaPrompt(params: {
           });
         }
       }
+
+      if (res.event === "context") {
+        setContextFilters({
+          chainIds: res.data.chain_ids.map((x) => x.toString()),
+          walletAddress: res.data.wallet_address,
+        });
+      }
     },
     context: contextFilters,
   });

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

@@ -123,7 +123,7 @@ export function ChatSidebar(props: {
       </div>
 
       <div className="[&>*]:!w-full p-4">
-        <NebulaConnectWallet />
+        <NebulaConnectWallet detailsButtonClassName="!bg-background hover:!border-active-border" />
       </div>
     </div>
   );

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

@@ -1,7 +1,7 @@
 import { ArrowRightIcon, ArrowUpRightIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { Button } from "../../../../../@/components/ui/button";
 import type { NebulaContext } from "../../api/chat";
@@ -63,14 +63,16 @@ function FloatingChatContentLoggedIn(props: {
   const [isChatStreaming, setIsChatStreaming] = useState(false);
   const [enableAutoScroll, setEnableAutoScroll] = useState(false);
 
-  const contextFilters: NebulaContext = useMemo(() => {
+  const [contextFilters, setContextFilters] = useState<
+    NebulaContext | undefined
+  >(() => {
     return {
       chainIds:
         props.nebulaParams?.chainIds.map((chainId) => chainId.toString()) ||
         null,
       walletAddress: props.nebulaParams?.wallet || null,
     };
-  }, [props.nebulaParams]);
+  });
 
   const initSession = useCallback(async () => {
     const session = await createSession({
@@ -120,6 +122,7 @@ function FloatingChatContentLoggedIn(props: {
           authToken: props.authToken,
           setMessages,
           contextFilters: contextFilters,
+          setContextFilters: setContextFilters,
         });
       } catch (error) {
         if (abortController.signal.aborted) {

apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx

@@ -106,8 +106,10 @@ export const MarkdownRenderer: React.FC<{
           ),
 
           code: ({ ...props }) => {
-            if (props?.className) {
-              if (code?.disableCodeHighlight) {
+            const codeStr = onlyText(props.children);
+
+            if (props?.className || codeStr.length > 100) {
+              if (code?.disableCodeHighlight || !props.className) {
                 return (
                   <div className="my-4">
                     {/* @ts-expect-error - TODO: fix this */}