Add Nebula Chat UI

Author: MananTank

apps/dashboard/.env.example

@@ -94,4 +94,7 @@ NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
 TURNSTILE_SECRET_KEY=""
 REDIS_URL=""
 
-ANALYTICS_SERVICE_URL=""
+ANALYTICS_SERVICE_URL=""
+
+# Required for Nebula Chat
+NEXT_PUBLIC_NEBULA_URL=""

apps/dashboard/package.json

@@ -60,6 +60,7 @@
     "color": "^4.2.3",
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
+    "fetch-event-stream": "^0.1.5",
     "flat": "^6.0.1",
     "framer-motion": "11.11.17",
     "fuse.js": "7.0.0",

apps/dashboard/src/@/constants/env.ts

@@ -46,3 +46,5 @@ export function getAbsoluteUrlFromPath(path: string) {
   url.pathname = path;
   return url;
 }
+
+export const NEXT_PUBLIC_NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL;

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

@@ -0,0 +1,104 @@
+// TODO - copy the source of this library to dashboard
+import { stream } from "fetch-event-stream";
+import { NEXT_PUBLIC_NEBULA_URL } from "../../../@/constants/env";
+import type { ExecuteConfig } from "./types";
+
+// TODO - ready response as stream
+
+type ChatStreamedResponse =
+  | {
+      event: "presence";
+      data: {
+        session_id: string;
+        request_id: string;
+        source: "user" | "reviewer" | (string & {});
+        data: string;
+      };
+    }
+  | {
+      event: "delta";
+      data: {
+        v: string;
+      };
+    }
+  | {
+      event: "action";
+      type: "sign_transaction";
+      data: string;
+    }
+  | {
+      event: "action";
+      // other types of actions
+      type: string & {};
+    };
+
+type HandleStreamCallback = (res: ChatStreamedResponse) => void;
+
+export async function promptNebula(params: {
+  message: string;
+  sessionId: string;
+  config: ExecuteConfig;
+  authToken: string;
+  handleStream: HandleStreamCallback;
+  onStreamEnd: () => void;
+}) {
+  // TODO: properly type the body
+  const body: Record<string, string | boolean | object> = {
+    message: params.message,
+    user_id: "default-user",
+    session_id: params.sessionId,
+    stream: true,
+    Authorization: `Bearer ${params.authToken}`,
+  };
+
+  if (params.config.mode === "client") {
+    body.execute = {
+      type: "client",
+      signer_wallet_address: params.config.signer_wallet_address,
+    };
+  }
+
+  const events = await stream(`${NEXT_PUBLIC_NEBULA_URL}/chat`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${params.authToken}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  });
+
+  for await (const event of events) {
+    if (!event.data) {
+      continue;
+    }
+
+    // delta
+    if (event.event === "delta") {
+      params.handleStream({
+        event: "delta",
+        data: {
+          v: JSON.parse(event.data).v,
+        },
+      });
+    }
+
+    // presence
+    if (event.event === "presence") {
+      params.handleStream({
+        event: "presence",
+        data: JSON.parse(event.data),
+      });
+    }
+
+    // action
+    if (event.event === "action") {
+      params.handleStream({
+        event: "action",
+        type: JSON.parse(event.data).type,
+        data: JSON.parse(event.data).data,
+      });
+    }
+  }
+
+  params.onStreamEnd();
+}

apps/dashboard/src/app/nebula-app/api/fetchWithAuthToken.ts

@@ -0,0 +1,50 @@
+type FetchWithKeyOptions = {
+  endpoint: string;
+  authToken: string;
+  timeout?: number;
+} & (
+  | {
+      method: "POST" | "PUT" | "DELETE";
+      body: Record<string, unknown>;
+    }
+  | {
+      method: "GET";
+    }
+);
+
+export async function fetchWithAuthToken(options: FetchWithKeyOptions) {
+  const timeout = options.timeout || 30000;
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    const response = await fetch(options.endpoint, {
+      method: options.method,
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${options.authToken}`,
+      },
+      body: options.method !== "GET" ? JSON.stringify(options.body) : undefined,
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      if (response.status === 504) {
+        throw new Error("Request timed out. Please try again.");
+      }
+
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response;
+  } catch (error: unknown) {
+    if (error instanceof Error && error.name === "AbortError") {
+      throw new Error("Request timed out. Please try again.");
+    }
+    throw error;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}

apps/dashboard/src/app/nebula-app/api/session.ts

@@ -0,0 +1,58 @@
+import { NEXT_PUBLIC_NEBULA_URL } from "../../../@/constants/env";
+import { fetchWithAuthToken } from "./fetchWithAuthToken";
+import type { ExecuteConfig } from "./types";
+
+// TODO - get the spec for return types on /session POST and PUT
+
+export async function createSession(params: {
+  authToken: string;
+  config: ExecuteConfig | null;
+}) {
+  const res = await fetchWithAuthToken({
+    method: "POST",
+    endpoint: `${NEXT_PUBLIC_NEBULA_URL}/session`,
+    body: {
+      can_execute: !!params.config,
+      config: params.config,
+    },
+    authToken: params.authToken,
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to create session");
+  }
+  const data = await res.json();
+
+  // TODO - need better type
+  return data.result as {
+    id: string;
+  };
+}
+
+export async function updateSession(params: {
+  authToken: string;
+  config: ExecuteConfig | null;
+  sessionId: string;
+}) {
+  const res = await fetchWithAuthToken({
+    method: "PUT",
+    endpoint: `${NEXT_PUBLIC_NEBULA_URL}/session/${params.sessionId}`,
+    body: {
+      can_execute: !!params.config,
+      config: params.config,
+    },
+    authToken: params.authToken,
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to update session");
+  }
+  const data = await res.json();
+
+  // TODO - need proper types
+  return data.result as
+    | {
+        session_id: string | undefined;
+      }
+    | undefined;
+}

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

@@ -0,0 +1,35 @@
+interface BaseExecuteConfig {
+  mode: "engine" | "session_key" | "webhook" | "client";
+}
+
+export interface EngineConfig extends BaseExecuteConfig {
+  mode: "engine";
+  engine_url: string;
+  engine_authorization_token: string;
+  engine_backend_wallet_address: string;
+}
+
+export interface SessionKeyConfig extends BaseExecuteConfig {
+  mode: "session_key";
+  smart_account_address: string;
+  smart_account_factory_address: string;
+  smart_account_session_key: string;
+}
+
+export interface WebhookConfig extends BaseExecuteConfig {
+  mode: "webhook";
+  webhook_signing_url: string;
+  webhook_metadata?: Record<string, unknown>;
+  webhook_shared_secret?: string;
+}
+
+interface ClientConfig extends BaseExecuteConfig {
+  mode: "client";
+  signer_wallet_address: string;
+}
+
+export type ExecuteConfig =
+  | EngineConfig
+  | SessionKeyConfig
+  | WebhookConfig
+  | ClientConfig;

apps/dashboard/src/app/nebula-app/chat-page.client.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import { useState } from "react";
+import ExecuteTab from "./components/ExecuteTab";
+import { useExecuteConfig } from "./hooks/useExecuteConfig";
+
+export function ChatPage(props: {
+  authToken: string;
+  accountAddress: string;
+}) {
+  const [executeMessages, setExecuteMessages] = useState<
+    Array<{ text: string; sender: "user" | "chat" | "error" | "presence" }>
+  >([]);
+
+  const [executeInputValue, setExecuteInputValue] = useState("");
+  const [executeIsLoading, setExecuteIsLoading] = useState(false);
+  const [executeSessionId, setExecuteSessionId] = useState<string | null>(null);
+  const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
+  const [executeConfig, setExecuteConfig] = useExecuteConfig();
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      {/* Left  */}
+      <aside className="hidden w-[260px] border-border border-r bg-muted/50 md:block">
+        <div className="p-4">
+          <div className="flex flex-col gap-3">
+            <CustomConnectWallet />
+          </div>
+        </div>
+      </aside>
+
+      {/* Right */}
+      <ExecuteTab
+        messages={executeMessages}
+        setMessages={setExecuteMessages}
+        inputValue={executeInputValue}
+        setInputValue={setExecuteInputValue}
+        isLoading={executeIsLoading}
+        setIsLoading={setExecuteIsLoading}
+        sessionId={executeSessionId}
+        setSessionId={setExecuteSessionId}
+        config={
+          executeConfig || {
+            mode: "client",
+            signer_wallet_address: props.accountAddress,
+          }
+        }
+        setConfig={setExecuteConfig}
+        isConfigModalOpen={isConfigModalOpen}
+        setIsConfigModalOpen={setIsConfigModalOpen}
+        authToken={props.authToken}
+        accountAddress={props.accountAddress}
+      />
+    </div>
+  );
+}