@elevasis/ui 2.52.1 → 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

@@ -3,7 +3,7 @@ import { ChatInterface } from '../../chunk-E6NSKXYN.js';
 import { WS_MAX_RETRIES_BEFORE_ERROR, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY, validateTokenLimit, TOKEN_LIMITS } from '../../chunk-FVOMKZ7S.js';
 import '../../chunk-TVTSASST.js';
 import '../../chunk-I2KLQ2HA.js';
-import { Center, Loader, Paper, Stack, Group, Title, Alert, PasswordInput, Button, Text, Box, Badge, Divider } from '@mantine/core';
+import { Center, Loader, Paper, Stack, Group, Title, Alert, PasswordInput, Button, Text, List, Box, Badge, Divider } from '@mantine/core';
 import { IconLock, IconAlertCircle, IconSend, IconMessageCircle } from '@tabler/icons-react';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
@@ -200,7 +200,14 @@ function usePublicAgentChatWebSocket(sessionId, apiUrl, capabilityToken) {
 async function fetchJson(url, init) {
   const response = await fetch(url, init);
   if (!response.ok) {
-    throw new Error(`Request failed with status ${response.status}`);
+    let message = `Request failed with status ${response.status}`;
+    try {
+      const body = await response.json();
+      const apiMessage = typeof body.error === "string" && body.error.trim().length > 0 ? body.error : typeof body.message === "string" && body.message.trim().length > 0 ? body.message : null;
+      if (apiMessage) message = apiMessage;
+    } catch {
+    }
+    throw new Error(message);
   }
   return await response.json();
 }
@@ -221,6 +228,12 @@ function resolveAgentSubtitle(grant) {
   const branding = brandingRecord(grant?.branding);
   return brandingText(branding.subtitle) ?? brandingText(branding.description);
 }
+function hasIntroContent(grant) {
+  const branding = brandingRecord(grant?.branding);
+  const hasIntroText = brandingText(branding.intro) !== void 0;
+  const hasInstructions = Array.isArray(branding.instructions) && branding.instructions.length > 0;
+  return hasIntroText || hasInstructions;
+}
 function statusStyles(tone) {
   if (tone === "ready") {
     return {
@@ -373,7 +386,8 @@ function PublicAgentChat({
   className,
   style,
   onSessionReady,
-  showAgentActivity = false
+  showAgentActivity = false,
+  renderIntro
 }) {
   const [grant, setGrant] = useState(null);
   const [capabilityToken, setCapabilityToken] = useState(null);
@@ -383,6 +397,7 @@ function PublicAgentChat({
   const [accessCode, setAccessCode] = useState("");
   const [input, setInput] = useState("");
   const autoStartedRef = useRef(false);
+  const greetingTimeRef = useRef(/* @__PURE__ */ new Date());
   const displayTitle = resolveAgentTitle(title, slug, grant);
   const displaySubtitle = resolveAgentSubtitle(grant);
   const { data: historyMessages = [] } = usePublicAgentChatMessages(apiUrl, session?.sessionId ?? null, capabilityToken);
@@ -403,7 +418,13 @@ function PublicAgentChat({
     fetchJson(`${apiUrl}/api/public/agent-chat/${encodeURIComponent(slug)}`).then((payload) => {
       if (cancelled) return;
       setGrant(payload.grant);
-      setStatus(payload.grant.requiresCode ? "code-required" : "authorizing");
+      if (payload.grant.requiresCode) {
+        setStatus("code-required");
+      } else if (renderIntro || hasIntroContent(payload.grant)) {
+        setStatus("intro");
+      } else {
+        setStatus("authorizing");
+      }
     }).catch((requestError) => {
       if (cancelled) return;
       setError(requestError instanceof Error ? requestError.message : "Unable to load agent chat");
@@ -412,7 +433,7 @@ function PublicAgentChat({
     return () => {
       cancelled = true;
     };
-  }, [apiUrl, slug]);
+  }, [apiUrl, slug, renderIntro]);
   const startSession = useCallback(
     async (code) => {
       if (!grant) return;
@@ -454,23 +475,34 @@ function PublicAgentChat({
     [apiUrl, grant, metadata, onSessionReady, slug, visitorId]
   );
   useEffect(() => {
-    if (!grant || grant.requiresCode || autoStartedRef.current) {
+    if (!grant || grant.requiresCode || renderIntro || hasIntroContent(grant) || autoStartedRef.current) {
       return;
     }
     autoStartedRef.current = true;
     void startSession();
-  }, [grant, startSession]);
-  const allMessages = useMemo(
-    () => mergeSessionMessages(historyMessages, liveMessages),
-    [historyMessages, liveMessages]
-  );
+  }, [grant, startSession, renderIntro]);
+  const allMessages = useMemo(() => {
+    const merged = mergeSessionMessages(historyMessages, liveMessages);
+    const greeting = brandingText(brandingRecord(grant?.branding).greeting);
+    if (!greeting) return merged;
+    const greetingMessage = {
+      id: "greeting-bubble",
+      role: "assistant",
+      messageType: "assistant_message",
+      text: greeting,
+      turnNumber: 0,
+      messageIndex: -1,
+      createdAt: greetingTimeRef.current
+    };
+    return [greetingMessage, ...merged];
+  }, [historyMessages, liveMessages, grant]);
   const handleSend = () => {
     const trimmed = input.trim();
     if (!trimmed || state.isProcessing) return;
     sendMessage(trimmed);
     setInput("");
   };
-  if (status === "loading" || status === "authorizing") {
+  if (status === "loading" || status === "authorizing" && !renderIntro) {
     return /* @__PURE__ */ jsx(
       PublicAgentChatFrame,
       {
@@ -536,6 +568,75 @@ function PublicAgentChat({
       }
     );
   }
+  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";
+    return /* @__PURE__ */ jsx(
+      PublicAgentChatFrame,
+      {
+        className,
+        style,
+        title: displayTitle,
+        subtitle: displaySubtitle,
+        statusTone: "ready",
+        children: /* @__PURE__ */ jsx(Center, { style: { height: "100%", padding: 16 }, children: /* @__PURE__ */ jsx(
+          Paper,
+          {
+            withBorder: true,
+            p: "xl",
+            radius: 8,
+            style: {
+              width: "min(100%, 480px)",
+              background: "var(--color-surface)",
+              borderColor: "var(--color-border)",
+              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(
+                Button,
+                {
+                  onClick: () => {
+                    void startSession();
+                  },
+                  leftSection: /* @__PURE__ */ jsx(IconSend, { size: 16 }),
+                  children: ctaLabel
+                }
+              )
+            ] })
+          }
+        ) })
+      }
+    );
+  }
   if (status === "error") {
     return /* @__PURE__ */ jsx(
       PublicAgentChatFrame,

package/package.json

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