[TOOL-3419] Nebula: Add hardcoded reply for Nebula Capabilities (#6298)

<!--

## 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 user interface and functionality of various components in the dashboard application, particularly in handling links, chat interactions, and example prompts for a feature called Nebula.

### Detailed summary
- Updated `className` for improved styling in `markdown-renderer.tsx`.
- Changed `backgroundImage` gradient in `EmptyStateChatPageContent.tsx`.
- Added `target` attribute for external links in `Sidebar.tsx`.
- Introduced `examplePrompts` with new responses in `ChatPageContent.tsx`.
- Added `interceptedReply` to `ExamplePrompt` interface in `examplePrompts.ts`.
- Provided detailed descriptions of Nebula's capabilities in `examplePrompts.ts`.

> ✨ 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)/components/ChatPageContent.tsx

@@ -17,6 +17,7 @@ import { useActiveAccount, useActiveWalletChain } from "thirdweb/react";
 import { type NebulaContext, promptNebula } from "../api/chat";
 import { createSession, updateSession } from "../api/session";
 import type { SessionInfo } from "../api/types";
+import { examplePrompts } from "../data/examplePrompts";
 import { newChatPageUrlStore, newSessionsStore } from "../stores";
 import { ChatBar } from "./ChatBar";
 import { type ChatMessage, Chats } from "./Chats";
@@ -181,6 +182,23 @@ export function ChatPageContent(props: {
         },
       ]);
 
+      const lowerCaseMessage = message.toLowerCase();
+      // handle hardcoded replies first
+      const interceptedReply = examplePrompts.find(
+        (prompt) => prompt.message.toLowerCase() === lowerCaseMessage,
+      )?.interceptedReply;
+
+      if (interceptedReply) {
+        // slight delay to match other response times
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        setMessages((prev) => [
+          ...prev.slice(0, -1),
+          { type: "assistant", text: interceptedReply, request_id: undefined },
+        ]);
+
+        return;
+      }
+
       setIsChatStreaming(true);
       setEnableAutoScroll(true);
       const abortController = new AbortController();

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

@@ -105,7 +105,7 @@ function DashedBgDiv(props: {
     <div
       className={props.className}
       style={{
-        backgroundImage: `linear-gradient(${props.type === "horizontal" ? "90deg" : "180deg"}, hsl(var(--foreground)/20%) 0 30%, transparent 0 100%)`,
+        backgroundImage: `linear-gradient(${props.type === "horizontal" ? "90deg" : "180deg"}, hsl(var(--active-border)) 0 30%, transparent 0 100%)`,
         backgroundRepeat: "repeat",
         backgroundSize: "10px 10px",
         maskImage: `linear-gradient(${

apps/dashboard/src/app/nebula-app/(app)/data/examplePrompts.ts

@@ -1,13 +1,68 @@
 type ExamplePrompt = {
   title: string;
   message: string;
+  interceptedReply?: string;
 };
 
-// Note:
-// Keep the title as short as possible so 2 of them can fit in a single row on desktop viewport
-// title is only used for displaying the example - the `message` is sent to server when user clicks on the example - it can be as long and descriptive as needed
+const whatCanNebulaDoReply = `
+Nebula is a natural language model with improved blockchain reasoning, autonomous transaction capabilities, and real-time access to the blockchain.
+[Learn more about Nebula](https://portal.thirdweb.com/nebula)
+
+Here are some example actions you can perform with Nebula:
+
+### Bridge & Swap
+Bridge and swap native currencies
+- Swap 1 USDC to 1 USDT on the Ethereum Mainnet
+- Bridge 0.5 ETH from Ethereum Mainnet to Polygon
+
+### Transfer
+Send native and ERC-20 currencies
+- Send 0.1 ETH to vitalik.eth
+- Transfer 1 USDC to saminacodes.eth on Base
+
+### Deploy
+Deploy published contracts
+- Deploy a Token ERC20 Contract
+- Deploy a Split contract with two recipients.
+- Deploy an ERC1155 Contract named 'Hello World' with description 'Hello badges on Ethereum'
+
+### Understand
+Retrieve information about smart contracts.
+- What ERC standards are implemented by contract address 0x59325733eb952a92e069C87F0A6168b29E80627f on Ethereum?
+- What functions can I use to mint more of my contract's NFTs?
+- What is the total supply of NFTs for my contract?
+
+### Interact
+Query wallet balances, addresses, and token holdings.
+- How much ETH is in my wallet?
+- What is the wallet address of vitalik.eth?
+- Does my wallet hold USDC on Base?
+
+### Explore
+Access blockchain-specific data.
+- What is the last block on zkSync?
+- What is the current gas price on Avalanche C-Chain?
+- Can you show me transaction details for 0xdfc450bb39e44bd37c22e0bfd0e5212edbea571e4e534d87b5cbbf06f10b9e04 on Optimism?
+
+### Research
+Obtain details about tokens, their addresses, and current prices.
+- What is the address of USDC on Ethereum?
+- Is there a UNI token on Arbitrum?
+- What is the current price of ARB?
+
+### Build
+Implement features using Web3 SDKs and tools.
+- How can I add a connect wallet button to my web app? I want to support users connecting with both email/social wallets and MetaMask and use smart wallets.
+- Can you show me how to claim an NFT from an ERC721 using TypeScript?
+- I have an ERC1155 contract from thirdweb. Can you show me how to generate and mint with a signature?
+`;
 
 export const examplePrompts: ExamplePrompt[] = [
+  {
+    title: "What can Nebula do?",
+    message: "What can Nebula do?",
+    interceptedReply: whatCanNebulaDoReply,
+  },
   {
     title: "Deploy an ERC-20 Token",
     message:
@@ -25,8 +80,4 @@ export const examplePrompts: ExamplePrompt[] = [
     title: "Transfer 0.001 ETH to thirdweb.eth",
     message: "Transfer 0.001 ETH to thirdweb.eth",
   },
-  {
-    title: "Using session keys in Unity",
-    message: "How to use session key in Unity?",
-  },
 ];

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

@@ -98,7 +98,7 @@ export const MarkdownRenderer: React.FC<{
               href={props.href ?? "#"}
               target="_blank"
               {...cleanedProps(props)}
-              className="mt-4 text-link-foreground hover:text-foreground"
+              className="mt-4 underline decoration-muted-foreground/50 decoration-dotted underline-offset-[5px] hover:text-foreground hover:decoration-foreground hover:decoration-solid"
             />
           ),
 

apps/portal/src/components/others/Sidebar.tsx

@@ -110,6 +110,7 @@ function SidebarItem(props: { link: SidebarLink; onLinkClick?: () => void }) {
       <Link
         href={link.href}
         onClick={props.onLinkClick}
+        target={link.href.startsWith("http") ? "_blank" : undefined}
         className={clsx(
           "overflow-hidden text-ellipsis py-1.5 font-medium text-base transition-colors duration-300 hover:text-foreground",
           isActive ? "font-medium text-foreground" : "text-muted-foreground",
@@ -127,6 +128,7 @@ function SidebarItem(props: { link: SidebarLink; onLinkClick?: () => void }) {
   return (
     <Link
       href={link.href}
+      target={link.href.startsWith("http") ? "_blank" : undefined}
       onClick={props.onLinkClick}
       className={clsx(
         "block overflow-hidden text-ellipsis py-1.5 font-medium text-base transition-colors duration-300 hover:text-foreground",