@superatomai/application-react 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -68148,6 +68148,7 @@ var SuperAtomAuthError = class extends Error {
     super(message);
     this.name = "SuperAtomAuthError";
     this.code = code4;
+    this.reason = options.reason;
     this.status = options.status;
     this.fatal = options.fatal;
     if (options.cause !== void 0) this.cause = options.cause;
@@ -68213,8 +68214,10 @@ var SdkSession = class {
   }
   renew() {
     if (!this.inFlight) {
+      this.opts.onSigningIn?.(true);
       this.inFlight = this.exchange().finally(() => {
         this.inFlight = null;
+        this.opts.onSigningIn?.(false);
       });
     }
     return this.inFlight;
@@ -68249,7 +68252,11 @@ var SdkSession = class {
       const message = typeof body?.error === "string" ? body.error : `Sign-in failed (${res.status})`;
       const fatal = res.status >= 400 && res.status < 500 && res.status !== 429;
       throw this.fail(
-        new SuperAtomAuthError(fatal ? "exchange_rejected" : "exchange_unavailable", message, { status: res.status, fatal })
+        new SuperAtomAuthError(fatal ? "exchange_rejected" : "exchange_unavailable", message, {
+          status: res.status,
+          reason: typeof body?.code === "string" ? body.code : void 0,
+          fatal
+        })
       );
     }
     if (typeof body?.token !== "string" || !body.user?.id) {
@@ -69448,6 +69455,8 @@ function resetRegistration() {
 }
 var current = null;
 var retrying = null;
+var signingIn = false;
+var chatReady = false;
 var listeners = /* @__PURE__ */ new Set();
 function setAuthStatus(error51) {
   if (current === error51) return;
@@ -69460,6 +69469,36 @@ function setRetryingStatus(error51) {
   retrying = error51;
   listeners.forEach((l) => l());
 }
+function setSigningIn(value) {
+  if (signingIn === value) return;
+  signingIn = value;
+  listeners.forEach((l) => l());
+}
+function useSigningIn() {
+  return React6.useSyncExternalStore(
+    (l) => {
+      listeners.add(l);
+      return () => listeners.delete(l);
+    },
+    () => signingIn,
+    () => false
+  );
+}
+function setChatReady(value) {
+  if (chatReady === value) return;
+  chatReady = value;
+  listeners.forEach((l) => l());
+}
+function useStartingUp() {
+  return React6.useSyncExternalStore(
+    (l) => {
+      listeners.add(l);
+      return () => listeners.delete(l);
+    },
+    () => !chatReady,
+    () => false
+  );
+}
 function useRetryingStatus() {
   return React6.useSyncExternalStore(
     (l) => {
@@ -69480,12 +69519,34 @@ function useAuthStatus() {
     () => null
   );
 }
+var SETUP_REASONS = /* @__PURE__ */ new Set([
+  "bad_request",
+  "bad_project_id",
+  "unknown_project",
+  "bad_sub",
+  "bad_email",
+  "bad_roles",
+  "bad_access",
+  "bad_access_values",
+  "bad_access_filters",
+  "access_not_set_up",
+  "lifetime_too_long",
+  "issued_in_future",
+  "email_linked_elsewhere"
+]);
 function authStatusMessage(error51) {
   switch (error51.code) {
     case "get_token_failed":
       return "Your session has ended. Please sign in again to continue.";
     case "exchange_rejected":
-      return error51.status === 403 ? "This account cannot use the chat. Please contact your administrator." : "Your session is no longer valid. Please sign in again to continue.";
+      if (error51.reason === "inactive") return "This account has been deactivated.";
+      if (error51.reason === "sdk_not_enabled" || error51.status === 403) {
+        return "This account cannot use the chat. Please contact your administrator.";
+      }
+      if (error51.reason && SETUP_REASONS.has(error51.reason)) {
+        return `This app\u2019s Superatom sign-in is not set up correctly: ${error51.message}`;
+      }
+      return "Your session is no longer valid. Please sign in again to continue.";
     default:
       return "Could not connect to Superatom. Please try again in a moment.";
   }
@@ -69685,6 +69746,7 @@ function useSuperAtom({
   if (sdkSignIn && token) throw new Error("[SuperAtom] Pass either token or getToken, not both");
   const [user, setUser] = React6.useState(null);
   const [authError, setAuthError] = React6.useState(null);
+  const [isSigningIn, setIsSigningIn] = React6.useState(false);
   const [signInAttempt, setSignInAttempt] = React6.useState(0);
   const directUserId = (() => {
     if (sdkSignIn) return void 0;
@@ -69750,7 +69812,13 @@ function useSuperAtom({
           },
           // Superatom unreachable or down, after a couple of tries: say so in the
           // chat instead of sitting on "Connecting…".
-          onRetrying: (err) => setRetryingStatus(err)
+          onRetrying: (err) => setRetryingStatus(err),
+          // Lets the chat show "Signing in…" instead of an empty chat while a
+          // sign-in — including one after reconnect() — is in flight.
+          onSigningIn: (value) => {
+            setSigningIn(value);
+            setIsSigningIn(value);
+          }
         });
         sessionRef.current = session;
         for (let delay = 1e3; ; delay = Math.min(delay * 2, 3e4)) {
@@ -69877,6 +69945,7 @@ function useSuperAtom({
         if (!cancelled) {
           setupDoneRef.current = true;
           setBundleReady(true);
+          setChatReady(true);
         }
       } catch (err) {
         console.error("[SuperAtom] Setup failed:", err);
@@ -69896,6 +69965,7 @@ function useSuperAtom({
       setAuthStatus(null);
       setupDoneRef.current = false;
       setBundleReady(false);
+      setChatReady(false);
     };
   }, [directUserId, sdkSignIn, projectId, apiUrl, wsUrl, debug, signInAttempt]);
   const reconnect = React6.useCallback(() => {
@@ -70328,8 +70398,9 @@ function useSuperAtom({
       removed.add(msg.id);
     }
     setMessages((prev) => prev.filter((m) => !removed.has(m.id)));
+    refreshThreads();
     return { success: true };
-  }, [resolvedUserId]);
+  }, [resolvedUserId, refreshThreads]);
   React6.useEffect(() => {
     setMessageActions({ deleteMessage });
     return () => setMessageActions({});
@@ -70361,6 +70432,7 @@ function useSuperAtom({
     isNewChat: bundleReady && !isLoadingThread && messages2.length === 0,
     user,
     authError,
+    isSigningIn,
     reconnect
   };
 }
@@ -70458,6 +70530,7 @@ function ChatInput({
   onStop
 }) {
   const authError = useAuthStatus();
+  const startingUp = useStartingUp();
   const isLocked = disabled || !!authError;
   const textareaRef = React6.useRef(null);
   const historyRef = React6.useRef(null);
@@ -70490,15 +70563,35 @@ function ChatInput({
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [showStop, onStop]);
-  React6.useEffect(() => {
+  const resize = React6.useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea) return;
     textarea.style.height = "auto";
     const newHeight = Math.min(textarea.scrollHeight, 200);
     textarea.style.height = `${newHeight}px`;
-    const shouldBeMultiline = newHeight > 60;
-    if (shouldBeMultiline !== isMultiline) setIsMultiline(shouldBeMultiline);
-  }, [input, isMultiline]);
+    setIsMultiline(newHeight > 60);
+  }, []);
+  React6.useEffect(resize, [input, resize]);
+  React6.useEffect(() => {
+    const frame = requestAnimationFrame(resize);
+    document.fonts?.ready.then(resize).catch(() => {
+    });
+    const textarea = textareaRef.current;
+    if (!textarea || typeof ResizeObserver === "undefined") {
+      return () => cancelAnimationFrame(frame);
+    }
+    let width = textarea.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (textarea.clientWidth === width) return;
+      width = textarea.clientWidth;
+      resize();
+    });
+    observer.observe(textarea);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [resize]);
   const setCursorToEnd = (textarea) => {
     setTimeout(() => {
       textarea.setSelectionRange(textarea.value.length, textarea.value.length);
@@ -70520,6 +70613,7 @@ function ChatInput({
   }, [input, isLocked, onSend, getOrCreateHistory]);
   const themeColor = getThemeColor();
   const effectivePlaceholder = authError ? authStatusMessage(authError) : placeholder;
+  if (startingUp) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `sa-ui shrink-0 bg-base-100 border-t border-base-300 px-4 py-2 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `group ${isMultiline ? "rounded-3xl" : "rounded-full"} bg-base-200 transition-all duration-200 w-full max-w-2xl mx-auto`, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -70741,7 +70835,7 @@ function MessageBubble({ message, onStop }) {
     setConfirmOpen(false);
     if (!res.success) console.error("[SuperAtom] Could not delete the message:", res.error);
   };
-  const deleteButton = deleteMessage && responseComplete && !isAborted ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const deleteButton = deleteMessage && responseComplete && !isAborted ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 right-2 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       onClick: () => setConfirmOpen(true),
@@ -70837,12 +70931,12 @@ function MessageBubble({ message, onStop }) {
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-base-content/70", children: "Generating component..." })
       ] })
     ] }) }),
-    hasComponent && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `box-${message.id}`, className: "w-full px-4 lg:px-16 xl:px-24 2xl:px-32", children: [
+    hasComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { id: `box-${message.id}`, className: "w-full px-4 lg:px-16 xl:px-24 2xl:px-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl shadow-sm bg-base-100 border-2 border-base-300 min-h-[85vh] overflow-auto flex items-center justify-center p-5", children: /* @__PURE__ */ jsxRuntime.jsx(DSLRenderer, { dsl: message.schema.ui, data: message.schema.data ?? {} }) }),
       deleteButton
-    ] }),
-    !isStreaming && !hasComponent && hasText && isTextOnly && !isAborted && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full md:w-[60vw]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl shadow-sm bg-base-100 border-2 border-base-300 p-4 text-base-content", children: /* @__PURE__ */ jsxRuntime.jsx(Markdown_default, { content: fullText, isStreaming: false }) }),
+    ] }) }),
+    !isStreaming && !hasComponent && hasText && isTextOnly && !isAborted && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center w-full px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full md:w-[60vw] group relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl shadow-sm bg-base-100 border-2 border-base-300 p-4 pb-10 text-base-content", children: /* @__PURE__ */ jsxRuntime.jsx(Markdown_default, { content: fullText, isStreaming: false }) }),
       deleteButton
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -70955,8 +71049,12 @@ function MessageList({
   }, [messages2]);
   const authError = useAuthStatus();
   const retrying2 = useRetryingStatus();
+  const signingIn2 = useSigningIn();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `sa-ui flex-1 relative overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("main", { ref: containerRef, className: "h-full overflow-y-auto py-6", children: authError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-3 px-6 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("main", { ref: containerRef, className: "h-full overflow-y-auto py-6", children: signingIn2 && !bundleReady ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-3 text-base-content/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "loading loading-spinner loading-lg" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Signing in to Superatom\u2026" })
+    ] }) : authError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-3 px-6 text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "mdi:lock-alert-outline", width: 28, height: 28, className: "text-base-content/40" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-base-content/70 max-w-sm", children: authStatusMessage(authError) })
     ] }) : !bundleReady || isLoadingThread && messages2.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-3 text-base-content/50", children: [
@@ -71407,6 +71505,7 @@ function Sidebar({
       setThreadToDelete(null);
     }
   };
+  const startingUp = useStartingUp();
   const [collapsed, setCollapsed] = React6.useState(() => {
     try {
       return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) === "true";
@@ -71491,6 +71590,7 @@ function Sidebar({
       });
     }
   }
+  if (startingUp) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {