@elevasis/ui 2.53.0 → 2.54.0

package/dist/features/public-agent-chat/index.d.ts

@@ -126,6 +126,22 @@ interface PublicAgentChatConnectionState {
     error: string | null;
 }
 
+/**
+ * Context passed to the `renderIntro` render-prop. Provides the start action,
+ * loading state, resolved display strings, raw branding, and the agent slug.
+ */
+interface PublicAgentIntroRenderContext {
+    /** Begins the authorize → session flow (the same action the default CTA runs). */
+    start: () => void;
+    /** True while a session is being created — disable the button / show a spinner. */
+    starting: boolean;
+    /** Resolved display strings (prop/branding-derived), provided for convenience. */
+    title: string;
+    subtitle?: string;
+    /** Raw grant branding record, so a custom intro can still read intro/instructions/etc. if it wants. */
+    branding: Record<string, unknown>;
+    slug: string;
+}
 interface PublicAgentChatProps {
     apiUrl: string;
     slug: string;
@@ -142,8 +158,16 @@ interface PublicAgentChatProps {
      * a specific public agent.
      */
     showAgentActivity?: boolean;
+    /**
+     * Render the entire pre-session intro screen yourself. When provided, this fully
+     * replaces the default branding-driven intro panel (paragraph + instructions + CTA).
+     * Compose any header/headline, body, styled callouts (e.g. a yellow Alert), and one or
+     * more buttons; wire your button(s) to `ctx.start()`. When omitted, the default
+     * branding-driven intro renders unchanged.
+     */
+    renderIntro?: (ctx: PublicAgentIntroRenderContext) => React.ReactNode;
 }
-declare function PublicAgentChat({ apiUrl, slug, visitorId, metadata, title, className, style, onSessionReady, showAgentActivity }: PublicAgentChatProps): react_jsx_runtime.JSX.Element;
+declare function PublicAgentChat({ apiUrl, slug, visitorId, metadata, title, className, style, onSessionReady, showAgentActivity, renderIntro }: PublicAgentChatProps): react_jsx_runtime.JSX.Element;
 
 interface PublicAgentChatRoutePageProps extends PublicAgentChatProps {
     pageStyle?: React.CSSProperties;
@@ -172,4 +196,4 @@ declare const publicAgentChatKeys: {
 };
 
 export { PublicAgentChat, PublicAgentChatRoutePage, publicAgentChatKeys, usePublicAgentChatMessages, usePublicAgentChatWebSocket };
-export type { PublicAgentChatAuthorizeResponse, PublicAgentChatConnectionState, PublicAgentChatGrant, PublicAgentChatMessagesResponse, PublicAgentChatMetadataResponse, PublicAgentChatProps, PublicAgentChatRoutePageProps, PublicAgentChatSessionResponse };
+export type { PublicAgentChatAuthorizeResponse, PublicAgentChatConnectionState, PublicAgentChatGrant, PublicAgentChatMessagesResponse, PublicAgentChatMetadataResponse, PublicAgentChatProps, PublicAgentChatRoutePageProps, PublicAgentChatSessionResponse, PublicAgentIntroRenderContext };

package/dist/features/public-agent-chat/index.js

@@ -386,7 +386,8 @@ function PublicAgentChat({
   className,
   style,
   onSessionReady,
-  showAgentActivity = false
+  showAgentActivity = false,
+  renderIntro
 }) {
   const [grant, setGrant] = useState(null);
   const [capabilityToken, setCapabilityToken] = useState(null);
@@ -419,7 +420,7 @@ function PublicAgentChat({
       setGrant(payload.grant);
       if (payload.grant.requiresCode) {
         setStatus("code-required");
-      } else if (hasIntroContent(payload.grant)) {
+      } else if (renderIntro || hasIntroContent(payload.grant)) {
         setStatus("intro");
       } else {
         setStatus("authorizing");
@@ -432,7 +433,7 @@ function PublicAgentChat({
     return () => {
       cancelled = true;
     };
-  }, [apiUrl, slug]);
+  }, [apiUrl, slug, renderIntro]);
   const startSession = useCallback(
     async (code) => {
       if (!grant) return;
@@ -474,12 +475,12 @@ function PublicAgentChat({
     [apiUrl, grant, metadata, onSessionReady, slug, visitorId]
   );
   useEffect(() => {
-    if (!grant || grant.requiresCode || hasIntroContent(grant) || autoStartedRef.current) {
+    if (!grant || grant.requiresCode || renderIntro || hasIntroContent(grant) || autoStartedRef.current) {
       return;
     }
     autoStartedRef.current = true;
     void startSession();
-  }, [grant, startSession]);
+  }, [grant, startSession, renderIntro]);
   const allMessages = useMemo(() => {
     const merged = mergeSessionMessages(historyMessages, liveMessages);
     const greeting = brandingText(brandingRecord(grant?.branding).greeting);
@@ -501,7 +502,7 @@ function PublicAgentChat({
     sendMessage(trimmed);
     setInput("");
   };
-  if (status === "loading" || status === "authorizing") {
+  if (status === "loading" || status === "authorizing" && !renderIntro) {
     return /* @__PURE__ */ jsx(
       PublicAgentChatFrame,
       {
@@ -567,8 +568,32 @@ function PublicAgentChat({
       }
     );
   }
-  if (status === "intro" && grant) {
+  if ((status === "intro" || renderIntro && status === "authorizing") && grant) {
     const branding = brandingRecord(grant.branding);
+    if (renderIntro) {
+      const ctx = {
+        start: () => {
+          void startSession();
+        },
+        starting: status === "authorizing",
+        title: displayTitle,
+        subtitle: displaySubtitle,
+        branding,
+        slug
+      };
+      return /* @__PURE__ */ jsx(
+        PublicAgentChatFrame,
+        {
+          className,
+          style,
+          title: displayTitle,
+          subtitle: displaySubtitle,
+          statusTone: "ready",
+          children: renderIntro(ctx)
+        }
+      );
+    }
+    const headlineText = brandingText(branding.headline);
     const introText = brandingText(branding.intro);
     const instructions = Array.isArray(branding.instructions) ? branding.instructions.filter((item) => typeof item === "string") : [];
     const ctaLabel = brandingText(branding.ctaLabel) ?? "Start the conversation";
@@ -593,6 +618,7 @@ function PublicAgentChat({
               boxShadow: "var(--card-shadow)"
             },
             children: /* @__PURE__ */ jsxs(Stack, { gap: "lg", children: [
+              headlineText && /* @__PURE__ */ jsx(Title, { order: 2, children: headlineText }),
               introText && /* @__PURE__ */ jsx(Text, { size: "sm", style: { color: "var(--color-text)", lineHeight: 1.6 }, children: introText }),
               instructions.length > 0 && /* @__PURE__ */ jsx(List, { size: "sm", style: { color: "var(--color-text-dimmed)" }, children: instructions.map((item, index) => /* @__PURE__ */ jsx(List.Item, { children: item }, index)) }),
               /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elevasis/ui",
-  "version": "2.53.0",
+  "version": "2.54.0",
   "description": "UI components and platform-aware hooks for building custom frontends on the Elevasis platform",
   "type": "module",
   "license": "MIT",
@@ -274,10 +274,10 @@
     "typescript": "5.9.2",
     "vite": "^7.0.0",
     "vitest": "^3.2.4",
-    "@elevasis/sdk": "1.36.3",
-    "@repo/elevasis-core": "1.0.0",
+    "@elevasis/sdk": "1.36.4",
+    "@repo/core": "0.51.0",
     "@repo/typescript-config": "0.0.0",
-    "@repo/core": "0.50.0",
+    "@repo/elevasis-core": "1.0.0",
     "@repo/eslint-config": "0.0.0"
   },
   "dependencies": {