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

@@ -12,6 +12,7 @@ export type CodeProps = {
   scrollableClassName?: string;
   keepPreviousDataOnCodeChange?: boolean;
   copyButtonClassName?: string;
+  ignoreFormattingErrors?: boolean;
 };
 
 export const CodeClient: React.FC<CodeProps> = ({
@@ -21,10 +22,14 @@ export const CodeClient: React.FC<CodeProps> = ({
   scrollableClassName,
   keepPreviousDataOnCodeChange = false,
   copyButtonClassName,
+  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/@/components/ui/textarea.tsx

@@ -22,3 +22,27 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 Textarea.displayName = "Textarea";
 
 export { Textarea };
+
+export function AutoResizeTextarea(props: TextareaProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value is needed in deps array
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [props.value]);
+
+  return (
+    <Textarea
+      ref={textareaRef}
+      {...props}
+      style={{
+        ...props.style,
+        overflowY: "hidden",
+      }}
+    />
+  );
+}

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

@@ -39,3 +39,5 @@ export const BASE_URL = isProd
   : (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
       ? `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
       : "http://localhost:3000") || "https://thirdweb-dev.com";
+
+export const NEXT_PUBLIC_NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL;

apps/dashboard/src/app/account/settings/getAccount.ts

@@ -36,7 +36,7 @@ export async function getRawAccount() {
  * If there's no account or account onboarding not complete, redirect to login page
  * @param pagePath - the path of the current page to redirect back to after login/onboarding
  */
-export async function getValidAccount(pagePath: string) {
+export async function getValidAccount(pagePath?: string) {
   const account = await getRawAccount();
 
   // enforce login & onboarding

apps/dashboard/src/app/login/LoginPage.tsx

@@ -44,7 +44,7 @@ const wallets = [
 
 export function LoginAndOnboardingPage(props: {
   account: Account | undefined;
-  nextPath: string | undefined;
+  redirectPath: string;
 }) {
   return (
     <div className="relative flex min-h-screen flex-col overflow-hidden bg-background">
@@ -81,7 +81,10 @@ export function LoginAndOnboardingPage(props: {
 
       <main className="container z-10 flex grow flex-col items-center justify-center gap-6 py-12">
         <ClientOnly ssr={<LoadingCard />}>
-          <PageContent nextPath={props.nextPath} account={props.account} />
+          <PageContent
+            redirectPath={props.redirectPath}
+            account={props.account}
+          />
         </ClientOnly>
       </main>
 
@@ -110,7 +113,7 @@ function LoadingCard() {
 }
 
 function PageContent(props: {
-  nextPath: string | undefined;
+  redirectPath: string;
   account: Account | undefined;
 }) {
   const [screen, setScreen] = useState<
@@ -133,11 +136,7 @@ function PageContent(props: {
 
   function onComplete() {
     setScreen({ id: "complete" });
-    if (props.nextPath && isValidRedirectPath(props.nextPath)) {
-      router.replace(props.nextPath);
-    } else {
-      router.replace("/team");
-    }
+    router.replace(props.redirectPath);
   }
 
   if (connectionStatus === "connecting") {
@@ -154,7 +153,7 @@ function PageContent(props: {
         <LazyOnboardingUI
           account={screen.account}
           onComplete={onComplete}
-          redirectPath={props.nextPath || "/team"}
+          redirectPath={props.redirectPath}
         />
       </Suspense>
     );
@@ -220,19 +219,6 @@ function CustomConnectEmbed(props: {
   );
 }
 
-function isValidRedirectPath(encodedPath: string): boolean {
-  try {
-    // Decode the URI component
-    const decodedPath = decodeURIComponent(encodedPath);
-    // ensure the path always starts with a _single_ slash
-    // double slash could be interpreted as `//example.com` which is not allowed
-    return decodedPath.startsWith("/") && !decodedPath.startsWith("//");
-  } catch {
-    // If decoding fails, return false
-    return false;
-  }
-}
-
 type AuroraProps = {
   size: { width: string; height: string };
   pos: { top: string; left: string };

apps/dashboard/src/app/login/auth-actions.ts

@@ -1,5 +1,4 @@
 "use server";
-import "server-only";
 
 import { COOKIE_ACTIVE_ACCOUNT, COOKIE_PREFIX_TOKEN } from "@/constants/cookie";
 import { API_SERVER_URL } from "@/constants/env";

apps/dashboard/src/app/login/isValidEncodedRedirectPath.ts

@@ -0,0 +1,12 @@
+export function isValidEncodedRedirectPath(encodedPath: string): boolean {
+  try {
+    // Decode the URI component
+    const decodedPath = decodeURIComponent(encodedPath);
+    // ensure the path always starts with a _single_ slash
+    // double slash could be interpreted as `//example.com` which is not allowed
+    return decodedPath.startsWith("/") && !decodedPath.startsWith("//");
+  } catch {
+    // If decoding fails, return false
+    return false;
+  }
+}