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/@/components/ui/code/code.client.tsx

@@ -14,6 +14,7 @@ export type CodeProps = {
   scrollableClassName?: string;
   loadingClassName?: string;
   keepPreviousDataOnCodeChange?: boolean;
+  ignoreFormattingErrors?: boolean;
 };
 
 export const CodeClient: React.FC<CodeProps> = ({
@@ -23,10 +24,14 @@ export const CodeClient: React.FC<CodeProps> = ({
   scrollableClassName,
   loadingClassName,
   keepPreviousDataOnCodeChange = false,
+  ignoreFormattingErrors,
 }) => {
   const codeQuery = useQuery({
     queryKey: ["html", code],
-    queryFn: () => getCodeHtml(code, lang),
+    queryFn: () =>
+      getCodeHtml(code, lang, {
+        ignoreFormattingErrors: ignoreFormattingErrors,
+      }),
     placeholderData: keepPreviousDataOnCodeChange
       ? keepPreviousData
       : undefined,

apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx

@@ -16,19 +16,28 @@ function isPrettierSupportedLang(lang: BundledLanguage) {
   );
 }
 
-export async function getCodeHtml(code: string, lang: BundledLanguage) {
+export async function getCodeHtml(
+  code: string,
+  lang: BundledLanguage,
+  options?: {
+    ignoreFormattingErrors?: boolean;
+  },
+) {
   const formattedCode = isPrettierSupportedLang(lang)
     ? await format(code, {
         parser: "babel-ts",
         plugins: [parserBabel, estree],
         printWidth: 60,
       }).catch((e) => {
-        console.error(e);
-        console.error("Failed to format code");
-        console.log({
-          code,
-          lang,
-        });
+        if (!options?.ignoreFormattingErrors) {
+          console.error(e);
+          console.error("Failed to format code");
+          console.log({
+            code,
+            lang,
+          });
+        }
+
         return code;
       })
     : code;

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,101 @@
+// 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;
+}) {
+  // 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,
+      });
+    }
+  }
+}

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,44 @@
+"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 [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}
+        config={
+          executeConfig || {
+            mode: "client",
+            signer_wallet_address: props.accountAddress,
+          }
+        }
+        setConfig={setExecuteConfig}
+        authToken={props.authToken}
+        accountAddress={props.accountAddress}
+      />
+    </div>
+  );
+}