[NEB-231] Show Image response in Nebula, minor refactor (#6964)

<!--

## 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 chat functionality in the `nebula-app` by introducing support for image messages and refactoring the message history structure. It also adds new components for image handling and feedback actions.

### Detailed summary
- Added `request_id` to action messages in `Chats.stories.tsx`.
- Introduced `NebulaSessionHistoryMessage` type in `types.ts`.
- Updated `history` in `SessionInfo` to use `NebulaSessionHistoryMessage`.
- Implemented image message handling in `chat.ts`.
- Refactored `promptNebula` to include `request_id`.
- Created `NebulaImage` component for rendering images.
- Added `MessageActions` component for user feedback.
- Refactored `ChatPageContent` to utilize new message parsing logic.
- Updated message rendering in `Chats` to support image types.
- Removed redundant code for message handling in `ChatPageContent`.

> ✨ 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

@@ -99,6 +99,24 @@ export async function promptNebula(params: {
         break;
       }
 
+      case "image": {
+        const data = JSON.parse(event.data) as {
+          data: {
+            width: number;
+            height: number;
+            url: string;
+          };
+          request_id: string;
+        };
+
+        params.handleStream({
+          event: "image",
+          data: data.data,
+          request_id: data.request_id,
+        });
+        break;
+      }
+
       case "action": {
         const data = JSON.parse(event.data);
 
@@ -109,6 +127,7 @@ export async function promptNebula(params: {
               event: "action",
               type: "sign_transaction",
               data: parsedTxData,
+              request_id: data.request_id,
             });
           } catch (e) {
             console.error("failed to parse action data", e, { event });
@@ -122,6 +141,7 @@ export async function promptNebula(params: {
               event: "action",
               type: "sign_swap",
               data: swapData,
+              request_id: data.request_id,
             });
           } catch (e) {
             console.error("failed to parse action data", e, { event });
@@ -197,11 +217,22 @@ type ChatStreamedResponse =
       event: "action";
       type: "sign_transaction";
       data: NebulaTxData;
+      request_id: string;
     }
   | {
       event: "action";
       type: "sign_swap";
       data: NebulaSwapData;
+      request_id: string;
+    }
+  | {
+      event: "image";
+      data: {
+        width: number;
+        height: number;
+        url: string;
+      };
+      request_id: string;
     }
   | {
       event: "context";
@@ -225,6 +256,10 @@ type ChatStreamedEvent =
       event: "delta";
       data: string;
     }
+  | {
+      event: "image";
+      data: string;
+    }
   | {
       event: "action";
       type: "sign_transaction" | "sign_swap";

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

@@ -3,6 +3,12 @@ type SessionContextFilter = {
   wallet_address: string | null;
 };
 
+export type NebulaSessionHistoryMessage = {
+  role: "user" | "assistant" | "action" | "image";
+  content: string;
+  timestamp: number;
+};
+
 export type SessionInfo = {
   id: string;
   account_id: string;
@@ -11,11 +17,7 @@ export type SessionInfo = {
   can_execute: boolean;
   created_at: string;
   deleted_at: string | null;
-  history: Array<{
-    role: "user" | "assistant" | "action";
-    content: string;
-    timestamp: number;
-  }> | null;
+  history: Array<NebulaSessionHistoryMessage> | null;
   updated_at: string;
   archived_at: string | null;
   title: string | null;