@ews-admin/global-design-system 1.38.0 → 1.39.0

package/dist/index.js

@@ -3988,7 +3988,7 @@ function conversationTitle(firstMessage, max = 60) {
  * Server-rendering safe: nothing touches `window` at render time, the
  * speech API is detected after mount.
  */
-const AssistantChat = ({ transport, language, texts, suggestions, conversations = [], activeConversationId = null, initialMessages, onConversationCreated, onSelectConversation, onNewConversation, signInHref, headerAction, disclaimer, heroBackground, voice = true, pendingConfirmation = null, onConfirm, onCancelConfirmation, layout = "page", queuedPrompt = null, voiceRequest = null, composerDraft = null, onNavigate, historyOpen = false, onHistoryOpenChange, className, }) => {
+const AssistantChat = ({ transport, language, texts, suggestions, conversations = [], activeConversationId = null, initialMessages, onConversationCreated, onSelectConversation, onNewConversation, signInHref, headerAction, disclaimer, heroBackground, heroLogo, voice = true, pendingConfirmation = null, onConfirm, onCancelConfirmation, layout = "page", queuedPrompt = null, voiceRequest = null, composerDraft = null, onNavigate, historyOpen = false, onHistoryOpenChange, className, }) => {
     const [messages, setMessages] = React.useState(initialMessages ?? []);
     const [activity, setActivity] = React.useState(null);
     const [busy, setBusy] = React.useState(false);
@@ -4138,7 +4138,7 @@ const AssistantChat = ({ transport, language, texts, suggestions, conversations
                             onHistoryOpenChange?.(false);
                         }, texts: texts, signInHref: signInHref, className: "w-72 max-w-full border-e border-ews-gray-200 shadow-xl" }), jsxRuntime.jsx("div", { className: "flex-1 bg-black/20", onClick: () => onHistoryOpenChange?.(false), "data-testid": "assistant-history-overlay" })] })), jsxRuntime.jsxs("div", { className: "relative flex min-h-0 min-w-0 flex-1 flex-col", children: [jsxRuntime.jsxs("header", { className: "flex items-center justify-between gap-3 border-b border-ews-gray-200 px-4 py-3", children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsxRuntime.jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-ews-primary text-sm font-bold text-white", "aria-hidden": "true", children: texts.brandName.charAt(0) }), jsxRuntime.jsx("span", { className: "truncate font-semibold text-ews-gray-900", children: texts.brandName }), jsxRuntime.jsx("span", { className: "rounded-full bg-ews-gray-100 px-2 py-0.5 text-xs font-medium text-ews-gray-600", children: "AI" }), jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-xs text-ews-gray-500", children: [jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-ews-success", "aria-hidden": "true" }), texts.online] })] }), jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [compact && onHistoryOpenChange && (jsxRuntime.jsx("button", { type: "button", onClick: () => onHistoryOpenChange(!historyOpen), "aria-label": historyLabel, "aria-pressed": historyOpen, title: historyLabel, className: cn("rounded-full p-2 hover:bg-ews-gray-100 hover:text-ews-primary focus:outline-none focus:ring-2 focus:ring-ews-primary", historyOpen ? "bg-ews-gray-100 text-ews-primary" : "text-ews-gray-500"), "data-testid": "assistant-history-toggle", children: jsxRuntime.jsx(lucideReact.History, { className: "h-4 w-4", "aria-hidden": "true" }) })), !withList && !empty && (jsxRuntime.jsx("button", { type: "button", onClick: startNewConversation, "aria-label": texts.newConversation, title: texts.newConversation, className: "rounded-full p-2 text-ews-gray-500 hover:bg-ews-gray-100 hover:text-ews-primary focus:outline-none focus:ring-2 focus:ring-ews-primary", "data-testid": "assistant-new-conversation", children: jsxRuntime.jsx(lucideReact.SquarePen, { className: "h-4 w-4", "aria-hidden": "true" }) })), headerAction] })] }), jsxRuntime.jsx("div", { className: "flex flex-1 flex-col overflow-y-auto", children: empty ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("section", { className: cn("relative overflow-hidden bg-ews-primary-light text-center", 
                                     // Extra bottom room: the white sheet of cards overlaps the hero (mockup tools).
-                                    compact ? "px-4 pb-12 pt-8" : "px-6 pb-16 pt-12"), children: [heroBackground && jsxRuntime.jsx("div", { className: "absolute inset-0", "aria-hidden": "true", children: heroBackground }), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("h2", { className: cn("font-bold text-ews-gray-900", compact ? "text-xl" : "text-2xl sm:text-3xl"), children: texts.heroTitle }), jsxRuntime.jsx("p", { className: cn("mx-auto mt-2 max-w-xl text-ews-gray-700", compact && "text-sm"), children: texts.heroSubtitle })] })] }), jsxRuntime.jsx("div", { 
+                                    compact ? "px-4 pb-20 pt-10" : "px-6 pb-24 pt-14"), children: [heroBackground && jsxRuntime.jsx("div", { className: "absolute inset-0", "aria-hidden": "true", children: heroBackground }), jsxRuntime.jsxs("div", { className: "relative", children: [heroLogo && (jsxRuntime.jsx("div", { className: "mb-4 flex justify-center", "data-testid": "assistant-hero-logo", children: heroLogo })), jsxRuntime.jsx("h2", { className: cn("font-bold text-ews-gray-900", compact ? "text-xl" : "text-2xl sm:text-3xl"), children: texts.heroTitle }), jsxRuntime.jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-ews-gray-700", compact && "text-sm"), children: texts.heroSubtitle })] })] }), jsxRuntime.jsx("div", { 
                                     // A white sheet rounded on top, slid over the bottom of the hero, holding the cards.
                                     className: cn("relative -mt-6 grid flex-1 content-start gap-3 rounded-t-3xl bg-white px-4 py-5", compact ? "grid-cols-2" : "grid-cols-2 lg:grid-cols-4"), "data-testid": "assistant-suggestions", children: suggestions.map((suggestion) => (jsxRuntime.jsx(AssistantSuggestionCard, { suggestion: suggestion, onSelect: (selected) => void send(selected.prompt), exampleLabel: texts.exampleLabel, disabled: busy }, suggestion.id))) })] })) : (jsxRuntime.jsxs("div", { className: "flex-1 px-4 py-5", children: [jsxRuntime.jsx(AssistantMessages, { messages: messages, activity: activity, onRetry: retry, texts: texts, linkOptions: onNavigate
                                         ? {
@@ -4252,7 +4252,7 @@ const DIRECTION = {
  * goes to the composer on open and back to the bar on close. In Arabic the
  * panel slides from the left (`end-0` follows `dir`).
  */
-const AssistantLauncher = ({ launcherTexts, open, defaultOpen = false, onOpenChange, expanded, defaultExpanded = false, onExpandedChange, bottomOffset = 16, hidden = false, className, panelClassName, headerAction, voice = true, conversations: hostConversations, activeConversationId: hostActiveId, initialMessages: hostInitialMessages, onConversationCreated, onSelectConversation, onNewConversation, ...chatProps }) => {
+const AssistantLauncher = ({ launcherTexts, open, defaultOpen = false, onOpenChange, expanded, defaultExpanded = false, onExpandedChange, bottomOffset = 16, hidden = false, className, panelClassName, embed, onEmbedClose, headerAction, voice = true, conversations: hostConversations, activeConversationId: hostActiveId, initialMessages: hostInitialMessages, onConversationCreated, onSelectConversation, onNewConversation, ...chatProps }) => {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
     const isOpen = open ?? uncontrolledOpen;
     const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultExpanded);
@@ -4388,12 +4388,15 @@ const AssistantLauncher = ({ launcherTexts, open, defaultOpen = false, onOpenCha
                                     }, placeholder: launcherTexts.open, "aria-label": launcherTexts.open, "aria-haspopup": "dialog", "aria-controls": panelId, className: "min-w-0 flex-1 cursor-text bg-transparent py-2 text-lg text-ews-gray-800 placeholder:text-ews-gray-400 focus:outline-none", "data-testid": "assistant-launcher-input" }), showMic && (jsxRuntime.jsx(ActionTooltip, { label: chatProps.texts.holdToTalk, children: (describedBy) => (jsxRuntime.jsx("button", { type: "button", "aria-label": chatProps.texts.holdToTalk, "aria-describedby": describedBy, onClick: openVoice, className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-ews-gray-600 transition-colors hover:bg-ews-gray-100 hover:text-ews-primary focus:outline-none focus:ring-2 focus:ring-ews-primary", "data-testid": "assistant-launcher-mic", children: jsxRuntime.jsx(lucideReact.Mic, { className: "h-5 w-5", "aria-hidden": "true" }) })) })), jsxRuntime.jsx(ActionTooltip, { label: dictateLabel, children: (describedBy) => (jsxRuntime.jsx("button", { type: "button", onClick: speechSupported ? () => setDictating(true) : () => setOpen(true), "aria-label": dictateLabel, "aria-describedby": describedBy, className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-ews-gray-100 text-ews-gray-700 transition-colors hover:bg-ews-gray-200 focus:outline-none focus:ring-2 focus:ring-ews-primary", "data-testid": "assistant-launcher-voice", children: jsxRuntime.jsx(lucideReact.AudioLines, { className: "h-5 w-5", "aria-hidden": "true" }) })) }), jsxRuntime.jsx("button", { type: "button", onClick: () => submitFromBar(draft), "aria-label": chatProps.texts.send, title: chatProps.texts.send, className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-ews-primary text-white shadow-sm transition-colors hover:bg-ews-primary-hover focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-1", "data-testid": "assistant-launcher-send", children: jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-5 w-5", "aria-hidden": "true" }) })] }))] }) })), jsxRuntime.jsxs("div", { dir: dir, className: cn("fixed inset-0 z-[90]", !isOpen && "hidden"), "aria-hidden": !isOpen, "data-testid": "assistant-launcher-panel", children: [jsxRuntime.jsx("div", { 
                         // Mobile: a dimmed page under a full-screen panel. From tablets up the panel floats over the
                         // page, which stays visible (no dimming); a click outside still closes it.
-                        className: "absolute inset-0 bg-black/40 sm:bg-transparent", onClick: () => setOpen(false), "data-testid": "assistant-launcher-overlay" }), jsxRuntime.jsx("section", { ref: panelRef, id: panelId, role: "dialog", "aria-modal": "true", "aria-label": launcherTexts.open, "data-expanded": isExpanded, className: cn("absolute inset-y-0 end-0 flex w-full flex-col bg-white shadow-2xl transition-[width,max-width,height] duration-200", 
+                        className: "absolute inset-0 bg-black/40 sm:bg-transparent", onClick: () => setOpen(false), "data-testid": "assistant-launcher-overlay" }), jsxRuntime.jsxs("section", { ref: panelRef, id: panelId, role: "dialog", "aria-modal": "true", "aria-label": launcherTexts.open, "data-expanded": isExpanded, className: cn("absolute inset-y-0 end-0 flex w-full flex-col bg-white shadow-2xl", 
                         // From tablets up: a floating card (MED-1801, like the Notiwa widget), clear of the top,
                         // the bottom and the side of the screen, rounded, with a soft border and shadow.
-                        "sm:inset-y-auto sm:bottom-6 sm:end-6 sm:overflow-hidden sm:rounded-3xl sm:border sm:border-ews-gray-100", "sm:shadow-[0_24px_60px_rgba(15,23,42,0.22)]", isExpanded ? "sm:h-[calc(100vh-3rem)]" : "sm:h-[calc(100vh-6rem)]", 
+                        "sm:inset-y-auto sm:bottom-6 sm:end-6 sm:overflow-hidden sm:rounded-3xl sm:border sm:border-ews-gray-100", "sm:shadow-[0_24px_60px_rgba(15,23,42,0.22)]", 
+                        // Only fixed widths and heights, so expanding animates from one size to the other (a
+                        // max-width switching to none jumped to full width first).
+                        "sm:max-w-[calc(100vw-3rem)] sm:transition-[width,height] sm:duration-300 sm:ease-out", isExpanded ? "sm:h-[calc(100vh-3rem)]" : "sm:h-[calc(100vh-6rem)]", 
                         // Expanded: a dashboard reaching the middle of the screen (never full width), tablets and up.
-                        isExpanded ? "sm:max-w-md md:w-[max(50vw,40rem)] md:max-w-none" : "sm:max-w-md", panelClassName), children: jsxRuntime.jsx(AssistantChat, { ...chatProps, texts: texts, voice: voice, layout: isExpanded ? "wide" : "panel", queuedPrompt: queuedPrompt, voiceRequest: voiceRequest, composerDraft: composerDraft, conversations: hostManaged ? hostConversations : storedConversations, activeConversationId: hostManaged ? hostActiveId : managedActiveId, initialMessages: hostManaged ? hostInitialMessages : managedMessages, onConversationCreated: handleConversationCreated, onSelectConversation: handleSelectConversation, onNewConversation: handleNewConversation, historyOpen: historyOpen, onHistoryOpenChange: setHistoryOpen, className: "flex-1", headerAction: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [headerAction, jsxRuntime.jsx("button", { type: "button", onClick: () => setExpanded(!isExpanded), "aria-label": isExpanded ? collapseLabel : expandLabel, "aria-pressed": isExpanded, title: isExpanded ? collapseLabel : expandLabel, className: "hidden rounded-full p-2 text-ews-gray-500 hover:bg-ews-gray-100 hover:text-ews-gray-900 focus:outline-none focus:ring-2 focus:ring-ews-primary md:inline-flex", "data-testid": "assistant-launcher-expand", children: isExpanded ? (jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-5 w-5", "aria-hidden": "true" })) : (jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-5 w-5", "aria-hidden": "true" })) }), jsxRuntime.jsx("button", { type: "button", onClick: () => setOpen(false), "aria-label": launcherTexts.close, title: launcherTexts.close, className: "rounded-full p-2 text-ews-gray-500 hover:bg-ews-gray-100 hover:text-ews-gray-900 focus:outline-none focus:ring-2 focus:ring-ews-primary", "data-testid": "assistant-launcher-close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5", "aria-hidden": "true" }) })] }) }) })] })] }));
+                        isExpanded ? "sm:w-[32rem] md:w-[max(50vw,40rem)]" : "sm:w-[32rem]", panelClassName), children: [embed && (jsxRuntime.jsxs("div", { className: "absolute inset-0 z-20 flex flex-col bg-white", "data-testid": "assistant-launcher-embed", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-ews-gray-100 px-3 py-2", children: [jsxRuntime.jsx("button", { type: "button", onClick: onEmbedClose, "aria-label": launcherTexts.backToConversation ?? launcherTexts.close, title: launcherTexts.backToConversation ?? launcherTexts.close, className: "rounded-full p-2 text-ews-gray-500 hover:bg-ews-gray-100 hover:text-ews-gray-900 focus:outline-none focus:ring-2 focus:ring-ews-primary", "data-testid": "assistant-launcher-embed-back", children: jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-5 w-5 rtl:rotate-180", "aria-hidden": "true" }) }), jsxRuntime.jsx("h2", { className: "min-w-0 flex-1 truncate text-base font-semibold text-ews-gray-900", children: embed.title }), jsxRuntime.jsx("button", { type: "button", onClick: () => setOpen(false), "aria-label": launcherTexts.close, title: launcherTexts.close, className: "rounded-full p-2 text-ews-gray-500 hover:bg-ews-gray-100 hover:text-ews-gray-900 focus:outline-none focus:ring-2 focus:ring-ews-primary", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5", "aria-hidden": "true" }) })] }), jsxRuntime.jsx("iframe", { title: embed.title, src: embed.url, className: "block w-full flex-1 border-0" })] })), jsxRuntime.jsx(AssistantChat, { ...chatProps, texts: texts, voice: voice, layout: isExpanded ? "wide" : "panel", queuedPrompt: queuedPrompt, voiceRequest: voiceRequest, composerDraft: composerDraft, conversations: hostManaged ? hostConversations : storedConversations, activeConversationId: hostManaged ? hostActiveId : managedActiveId, initialMessages: hostManaged ? hostInitialMessages : managedMessages, onConversationCreated: handleConversationCreated, onSelectConversation: handleSelectConversation, onNewConversation: handleNewConversation, historyOpen: historyOpen, onHistoryOpenChange: setHistoryOpen, className: "flex-1", headerAction: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [headerAction, jsxRuntime.jsx("button", { type: "button", onClick: () => setExpanded(!isExpanded), "aria-label": isExpanded ? collapseLabel : expandLabel, "aria-pressed": isExpanded, title: isExpanded ? collapseLabel : expandLabel, className: "hidden rounded-full p-2 text-ews-gray-500 hover:bg-ews-gray-100 hover:text-ews-gray-900 focus:outline-none focus:ring-2 focus:ring-ews-primary md:inline-flex", "data-testid": "assistant-launcher-expand", children: isExpanded ? (jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-5 w-5", "aria-hidden": "true" })) : (jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-5 w-5", "aria-hidden": "true" })) }), jsxRuntime.jsx("button", { type: "button", onClick: () => setOpen(false), "aria-label": launcherTexts.close, title: launcherTexts.close, className: "rounded-full p-2 text-ews-gray-500 hover:bg-ews-gray-100 hover:text-ews-gray-900 focus:outline-none focus:ring-2 focus:ring-ews-primary", "data-testid": "assistant-launcher-close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5", "aria-hidden": "true" }) })] }) })] })] })] }));
 };
 
 /** Turns one SSE text stream into assistant events; frames may arrive split across chunks. */