@elevasis/ui 2.51.0 → 2.52.0

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

@@ -1,10 +1,10 @@
-import { WebSocketSessionTurnSchema } from '../../chunk-EJL4U7OZ.js';
-import { ChatInterface } from '../../chunk-GUKY77FJ.js';
+import { getWebSocketBaseUrl, createLiveTempMessageIdentity, formatMessageEvent, WebSocketSessionTurnSchema, mergeSessionMessages } from '../../chunk-M7WWRZ5Z.js';
+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 } from '@mantine/core';
-import { IconLock, IconAlertCircle, IconSend } from '@tabler/icons-react';
+import { Center, Loader, Paper, Stack, Group, Title, Alert, PasswordInput, Button, Text, 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';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -42,35 +42,6 @@ function usePublicAgentChatMessages(apiUrl, sessionId, capabilityToken) {
     staleTime: 0
   });
 }
-
-// src/hooks/sessions/sessionWebSocketUtils.ts
-function formatMessageEvent(event) {
-  switch (event.type) {
-    case "user_message":
-      return event.text;
-    case "assistant_message":
-      return event.text;
-    case "agent:started":
-      return "Agent started reasoning";
-    case "agent:reasoning":
-      return `Reasoning (Iteration ${event.iteration})`;
-    case "agent:tool_call":
-      return `Tool: ${event.toolName}`;
-    case "agent:tool_result":
-      return event.success ? "Tool Result" : "Tool Result (Failed)";
-    case "agent:completed":
-      return "Agent completed";
-    case "agent:error":
-      return `Agent error: ${event.error}`;
-  }
-}
-function getWebSocketBaseUrl(apiUrl) {
-  const url = new URL(apiUrl);
-  const protocol = url.protocol === "https:" ? "wss:" : "ws:";
-  return `${protocol}//${url.host}`;
-}
-
-// src/features/public-agent-chat/usePublicAgentChatWebSocket.ts
 function usePublicAgentChatWebSocket(sessionId, apiUrl, capabilityToken) {
   const [messages, setMessages] = useState([]);
   const [state, setState] = useState({
@@ -111,15 +82,16 @@ function usePublicAgentChatWebSocket(sessionId, apiUrl, capabilityToken) {
       try {
         const data = JSON.parse(event.data);
         if (data.type && data.type !== "turn:complete" && data.type !== "error") {
+          const liveIdentity = createLiveTempMessageIdentity();
           const tempMessage = {
-            id: `temp-${Date.now()}`,
+            id: liveIdentity.id,
             role: data.type === "user_message" ? "user" : "assistant",
             messageType: data.type,
             text: formatMessageEvent(data),
             metadata: data.type.startsWith("agent:") ? data : void 0,
             turnNumber: 999999,
-            messageIndex: Date.now(),
-            createdAt: /* @__PURE__ */ new Date()
+            messageIndex: liveIdentity.messageIndex,
+            createdAt: liveIdentity.createdAt
           };
           setMessages((prev) => [...prev, tempMessage]);
         } else if (data.type === "turn:complete") {
@@ -194,14 +166,15 @@ function usePublicAgentChatWebSocket(sessionId, apiUrl, capabilityToken) {
         setState((prev) => ({ ...prev, error: "Input too large" }));
         return;
       }
+      const liveIdentity = createLiveTempMessageIdentity();
       const userMessage = {
-        id: `temp-${Date.now()}`,
+        id: liveIdentity.id,
         role: "user",
         messageType: "user_message",
         text: trimmed,
         turnNumber: 999999,
-        messageIndex: Date.now(),
-        createdAt: /* @__PURE__ */ new Date()
+        messageIndex: liveIdentity.messageIndex,
+        createdAt: liveIdentity.createdAt
       };
       setMessages((prev) => [...prev, userMessage]);
       const message = WebSocketSessionTurnSchema.parse({
@@ -231,32 +204,165 @@ async function fetchJson(url, init) {
   }
   return await response.json();
 }
-function mergeMessages(historyMessages, liveMessages) {
-  const messageMap = /* @__PURE__ */ new Map();
-  for (const message of historyMessages) {
-    messageMap.set(message.id, message);
+function brandingRecord(value) {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+function brandingText(value) {
+  return typeof value === "string" && value.trim().length > 0 ? value.trim() : void 0;
+}
+function humanizeSlug(slug) {
+  return slug.split(/[-_\s]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function resolveAgentTitle(title, slug, grant) {
+  const branding = brandingRecord(grant?.branding);
+  return title ?? brandingText(branding.title) ?? brandingText(branding.displayName) ?? brandingText(branding.agentName) ?? brandingText(branding.name) ?? humanizeSlug(slug);
+}
+function resolveAgentSubtitle(grant) {
+  const branding = brandingRecord(grant?.branding);
+  return brandingText(branding.subtitle) ?? brandingText(branding.description);
+}
+function statusStyles(tone) {
+  if (tone === "ready") {
+    return {
+      label: "Online",
+      background: "color-mix(in srgb, var(--color-success) 14%, transparent)",
+      color: "var(--color-success)",
+      border: "1px solid color-mix(in srgb, var(--color-success) 26%, var(--color-border))"
+    };
   }
-  for (const message of liveMessages) {
-    if (!message.id.startsWith("temp-")) {
-      messageMap.set(message.id, message);
-      continue;
-    }
-    const exists = Array.from(messageMap.values()).some((existing) => {
-      if (existing.role !== message.role) return false;
-      if (existing.text !== message.text) return false;
-      if (message.metadata && existing.metadata) {
-        return JSON.stringify(existing.metadata) === JSON.stringify(message.metadata);
-      }
-      return true;
-    });
-    if (!exists) {
-      messageMap.set(message.id, message);
-    }
+  if (tone === "locked") {
+    return {
+      label: "Access required",
+      background: "color-mix(in srgb, var(--color-warning) 14%, transparent)",
+      color: "var(--color-warning)",
+      border: "1px solid color-mix(in srgb, var(--color-warning) 26%, var(--color-border))"
+    };
   }
-  return Array.from(messageMap.values()).sort((a, b) => {
-    if (a.turnNumber !== b.turnNumber) return a.turnNumber - b.turnNumber;
-    return (a.messageIndex ?? 0) - (b.messageIndex ?? 0);
-  });
+  if (tone === "error") {
+    return {
+      label: "Unavailable",
+      background: "color-mix(in srgb, var(--color-error) 14%, transparent)",
+      color: "var(--color-error)",
+      border: "1px solid color-mix(in srgb, var(--color-error) 28%, var(--color-border))"
+    };
+  }
+  return {
+    label: "Connecting",
+    background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+    color: "var(--color-primary)",
+    border: "1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border))"
+  };
+}
+function PublicAgentChatFrame({
+  className,
+  style,
+  title,
+  subtitle,
+  statusTone,
+  children
+}) {
+  const status = statusStyles(statusTone);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      style: {
+        height: "100%",
+        minHeight: 560,
+        display: "flex",
+        flexDirection: "column",
+        border: "1px solid var(--color-border)",
+        borderRadius: 8,
+        overflow: "hidden",
+        background: "var(--glass-background)",
+        backdropFilter: "var(--glass-blur)",
+        WebkitBackdropFilter: "var(--glass-blur)",
+        boxShadow: "var(--standard-box-shadow)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              flexShrink: 0,
+              padding: "16px clamp(16px, 2.6vw, 24px)",
+              background: "color-mix(in srgb, var(--color-surface) 82%, transparent)"
+            },
+            children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "center", gap: "md", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "sm", align: "center", style: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx(
+                  Center,
+                  {
+                    style: {
+                      width: 40,
+                      height: 40,
+                      flexShrink: 0,
+                      borderRadius: 8,
+                      color: "var(--color-primary)",
+                      background: "color-mix(in srgb, var(--color-primary) 14%, transparent)",
+                      border: "1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border))"
+                    },
+                    children: /* @__PURE__ */ jsx(IconMessageCircle, { size: 21 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Box, { style: { minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx(
+                    Title,
+                    {
+                      order: 1,
+                      style: {
+                        fontSize: "clamp(18px, 2vw, 24px)",
+                        lineHeight: 1.15,
+                        color: "var(--color-text)",
+                        fontFamily: "var(--mantine-headings-font-family)",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: title
+                    }
+                  ),
+                  subtitle && /* @__PURE__ */ jsx(Text, { size: "sm", style: { color: "var(--color-text-dimmed)" }, lineClamp: 1, children: subtitle })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: "outline",
+                  size: "md",
+                  style: {
+                    flexShrink: 0,
+                    background: status.background,
+                    color: status.color,
+                    border: status.border,
+                    textTransform: "none",
+                    letterSpacing: 0
+                  },
+                  children: status.label
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { color: "var(--color-border)" }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              flex: "1 1 auto",
+              minHeight: 0,
+              padding: "12px",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
 }
 function PublicAgentChat({
   apiUrl,
@@ -266,7 +372,8 @@ function PublicAgentChat({
   title,
   className,
   style,
-  onSessionReady
+  onSessionReady,
+  showAgentActivity = false
 }) {
   const [grant, setGrant] = useState(null);
   const [capabilityToken, setCapabilityToken] = useState(null);
@@ -276,12 +383,15 @@ function PublicAgentChat({
   const [accessCode, setAccessCode] = useState("");
   const [input, setInput] = useState("");
   const autoStartedRef = useRef(false);
+  const displayTitle = resolveAgentTitle(title, slug, grant);
+  const displaySubtitle = resolveAgentSubtitle(grant);
   const { data: historyMessages = [] } = usePublicAgentChatMessages(apiUrl, session?.sessionId ?? null, capabilityToken);
-  const { messages: liveMessages, state, sendMessage, clearError } = usePublicAgentChatWebSocket(
-    session?.sessionId ?? null,
-    apiUrl,
-    capabilityToken
-  );
+  const {
+    messages: liveMessages,
+    state,
+    sendMessage,
+    clearError
+  } = usePublicAgentChatWebSocket(session?.sessionId ?? null, apiUrl, capabilityToken);
   useEffect(() => {
     let cancelled = false;
     autoStartedRef.current = false;
@@ -333,6 +443,7 @@ function PublicAgentChat({
           }
         );
         setSession(createdSession);
+        setCapabilityToken(createdSession.capabilityToken ?? authorization.capabilityToken);
         setStatus("ready");
         onSessionReady?.(createdSession);
       } catch (requestError) {
@@ -349,7 +460,10 @@ function PublicAgentChat({
     autoStartedRef.current = true;
     void startSession();
   }, [grant, startSession]);
-  const allMessages = useMemo(() => mergeMessages(historyMessages, liveMessages), [historyMessages, liveMessages]);
+  const allMessages = useMemo(
+    () => mergeSessionMessages(historyMessages, liveMessages),
+    [historyMessages, liveMessages]
+  );
   const handleSend = () => {
     const trimmed = input.trim();
     if (!trimmed || state.isProcessing) return;
@@ -357,57 +471,143 @@ function PublicAgentChat({
     setInput("");
   };
   if (status === "loading" || status === "authorizing") {
-    return /* @__PURE__ */ jsx(Center, { className, style: { minHeight: 360, ...style }, children: /* @__PURE__ */ jsx(Loader, { size: "md" }) });
+    return /* @__PURE__ */ jsx(
+      PublicAgentChatFrame,
+      {
+        className,
+        style,
+        title: displayTitle,
+        subtitle: displaySubtitle,
+        statusTone: "loading",
+        children: /* @__PURE__ */ jsx(Center, { style: { height: "100%" }, children: /* @__PURE__ */ jsx(Loader, { size: "md" }) })
+      }
+    );
   }
   if (status === "code-required") {
-    return /* @__PURE__ */ jsx(Center, { className, style: { minHeight: 360, padding: 16, ...style }, children: /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "lg", radius: "md", style: { width: "min(100%, 420px)" }, children: /* @__PURE__ */ jsx(
-      "form",
+    return /* @__PURE__ */ jsx(
+      PublicAgentChatFrame,
       {
-        onSubmit: (event) => {
-          event.preventDefault();
-          void startSession(accessCode);
-        },
-        children: /* @__PURE__ */ jsxs(Stack, { children: [
-          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-            /* @__PURE__ */ jsx(IconLock, { size: 18 }),
-            /* @__PURE__ */ jsx(Title, { order: 2, size: "h4", children: title ?? "Agent Chat" })
-          ] }),
-          error && /* @__PURE__ */ jsx(Alert, { color: "red", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), children: error }),
-          /* @__PURE__ */ jsx(
-            PasswordInput,
-            {
-              label: "Access code",
-              value: accessCode,
-              onChange: (event) => setAccessCode(event.currentTarget.value),
-              autoComplete: "one-time-code",
-              required: true
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { type: "submit", leftSection: /* @__PURE__ */ jsx(IconSend, { size: 16 }), disabled: !accessCode.trim(), children: "Continue" })
-        ] })
+        className,
+        style,
+        title: displayTitle,
+        subtitle: displaySubtitle,
+        statusTone: "locked",
+        children: /* @__PURE__ */ jsx(Center, { style: { height: "100%", padding: 16 }, children: /* @__PURE__ */ jsx(
+          Paper,
+          {
+            withBorder: true,
+            p: "lg",
+            radius: 8,
+            style: {
+              width: "min(100%, 420px)",
+              background: "var(--color-surface)",
+              borderColor: "var(--color-border)",
+              boxShadow: "var(--card-shadow)"
+            },
+            children: /* @__PURE__ */ jsx(
+              "form",
+              {
+                onSubmit: (event) => {
+                  event.preventDefault();
+                  void startSession(accessCode);
+                },
+                children: /* @__PURE__ */ jsxs(Stack, { children: [
+                  /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                    /* @__PURE__ */ jsx(IconLock, { size: 18 }),
+                    /* @__PURE__ */ jsx(Title, { order: 2, size: "h4", children: "Access code" })
+                  ] }),
+                  error && /* @__PURE__ */ jsx(Alert, { color: "red", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), children: error }),
+                  /* @__PURE__ */ jsx(
+                    PasswordInput,
+                    {
+                      label: "Code",
+                      value: accessCode,
+                      onChange: (event) => setAccessCode(event.currentTarget.value),
+                      autoComplete: "one-time-code",
+                      required: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Button, { type: "submit", leftSection: /* @__PURE__ */ jsx(IconSend, { size: 16 }), disabled: !accessCode.trim(), children: "Continue" })
+                ] })
+              }
+            )
+          }
+        ) })
       }
-    ) }) });
+    );
   }
   if (status === "error") {
-    return /* @__PURE__ */ jsx(Center, { className, style: { minHeight: 360, padding: 16, ...style }, children: /* @__PURE__ */ jsx(Alert, { color: "red", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: title ?? "Agent Chat", children: /* @__PURE__ */ jsx(Text, { size: "sm", children: error ?? "Unable to load agent chat" }) }) });
+    return /* @__PURE__ */ jsx(
+      PublicAgentChatFrame,
+      {
+        className,
+        style,
+        title: displayTitle,
+        subtitle: displaySubtitle,
+        statusTone: "error",
+        children: /* @__PURE__ */ jsx(Center, { style: { height: "100%", padding: 16 }, children: /* @__PURE__ */ jsx(Alert, { color: "red", icon: /* @__PURE__ */ jsx(IconAlertCircle, { size: 16 }), title: displayTitle, children: /* @__PURE__ */ jsx(Text, { size: "sm", children: error ?? "Unable to load agent chat" }) }) })
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("div", { className, style: { height: "100%", minHeight: 480, display: "flex", flexDirection: "column", ...style }, children: /* @__PURE__ */ jsx(
-    ChatInterface,
+  return /* @__PURE__ */ jsx(
+    PublicAgentChatFrame,
+    {
+      className,
+      style,
+      title: displayTitle,
+      subtitle: displaySubtitle,
+      statusTone: state.isConnected ? "ready" : "loading",
+      children: /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(
+        ChatInterface,
+        {
+          messages: allMessages,
+          input,
+          onInputChange: setInput,
+          onSendMessage: handleSend,
+          style: { flex: "1 1 auto", minHeight: 0, height: "100%" },
+          isProcessing: state.isProcessing,
+          isConnected: state.isConnected,
+          error: state.error,
+          onClearError: clearError,
+          emptyStateText: "No messages yet",
+          emptyStateSubtext: "Send a message to start the conversation",
+          placeholder: "Message the agent...",
+          messageAreaVariant: "grid",
+          showAgentActivity
+        }
+      ) })
+    }
+  );
+}
+function PublicAgentChatRoutePage({ pageStyle, style, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Box,
     {
-      messages: allMessages,
-      input,
-      onInputChange: setInput,
-      onSendMessage: handleSend,
-      isProcessing: state.isProcessing,
-      isConnected: state.isConnected,
-      error: state.error,
-      onClearError: clearError,
-      emptyStateText: "No messages yet",
-      emptyStateSubtext: "Send a message to start the conversation",
-      placeholder: "Message the agent...",
-      messageAreaVariant: "plain"
+      style: {
+        minHeight: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "stretch",
+        padding: "clamp(16px, 3vw, 32px)",
+        background: "var(--color-background)",
+        color: "var(--color-text)",
+        ...pageStyle
+      },
+      children: /* @__PURE__ */ jsx(
+        PublicAgentChat,
+        {
+          ...props,
+          style: {
+            width: "min(100%, 980px)",
+            height: "calc(100vh - clamp(32px, 6vw, 64px))",
+            minHeight: 560,
+            maxHeight: "920px",
+            ...style
+          }
+        }
+      )
     }
-  ) });
+  );
 }
 
-export { PublicAgentChat, publicAgentChatKeys, usePublicAgentChatMessages, usePublicAgentChatWebSocket };
+export { PublicAgentChat, PublicAgentChatRoutePage, publicAgentChatKeys, usePublicAgentChatMessages, usePublicAgentChatWebSocket };