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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/AssistantChat/AssistantChat.tsx

@@ -50,6 +50,7 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
   headerAction,
   disclaimer,
   heroBackground,
+  heroLogo,
   voice = true,
   pendingConfirmation = null,
   onConfirm,
@@ -322,15 +323,20 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
                 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"
+                  compact ? "px-4 pb-20 pt-10" : "px-6 pb-24 pt-14"
                 )}
               >
                 {heroBackground && <div className="absolute inset-0" aria-hidden="true">{heroBackground}</div>}
                 <div className="relative">
+                  {heroLogo && (
+                    <div className="mb-4 flex justify-center" data-testid="assistant-hero-logo">
+                      {heroLogo}
+                    </div>
+                  )}
                   <h2 className={cn("font-bold text-ews-gray-900", compact ? "text-xl" : "text-2xl sm:text-3xl")}>
                     {texts.heroTitle}
                   </h2>
-                  <p className={cn("mx-auto mt-2 max-w-xl text-ews-gray-700", compact && "text-sm")}>
+                  <p className={cn("mx-auto mt-4 max-w-xl text-ews-gray-700", compact && "text-sm")}>
                     {texts.heroSubtitle}
                   </p>
                 </div>

package/src/components/AssistantChat/AssistantChat.types.ts

@@ -157,6 +157,8 @@ export interface AssistantChatProps {
   disclaimer?: ReactNode;
   /** Decorative image or gradient behind the hero. */
   heroBackground?: ReactNode;
+  /** A small logo (e.g. the app favicon) above the hero title. */
+  heroLogo?: ReactNode;
   /** Push-to-talk through the browser speech API. Default true; hidden anyway where unsupported. */
   voice?: boolean;
   /** Phase 2: a confirmation the assistant asks before a write. */

package/src/components/AssistantLauncher/AssistantLauncher.tsx

@@ -1,4 +1,4 @@
-import { ArrowUp, AudioLines, Maximize2, Mic, Minimize2, X } from "lucide-react";
+import { ArrowLeft, ArrowUp, AudioLines, Maximize2, Mic, Minimize2, X } from "lucide-react";
 import React, { useCallback, useEffect, useId, useRef, useState } from "react";
 import { listAssistantConversations, saveAssistantConversation } from "../../assistant/store";
 import { useSpeechSupported } from "../../hooks/useSpeechRecognition";
@@ -25,6 +25,15 @@ export interface AssistantLauncherTexts {
   collapse?: string;
   /** The history button of the panel; falls back to `texts.recentConversations`. */
   history?: string;
+  /** The back button of an embedded page (`embed`); falls back to `close`. */
+  backToConversation?: string;
+}
+
+/** A page shown in the panel in place of the conversation, e.g. a booking calendar. */
+export interface AssistantEmbeddedPage {
+  url: string;
+  /** Header title and accessible name of the frame. */
+  title: string;
 }
 
 export interface AssistantLauncherProps
@@ -49,6 +58,13 @@ export interface AssistantLauncherProps
   className?: string;
   /** Extra classes on the panel (e.g. a wider max width). */
   panelClassName?: string;
+  /**
+   * A page (iframe) shown in the panel over the conversation, which stays
+   * mounted underneath; the back button calls `onEmbedClose`. Null or absent
+   * shows the conversation.
+   */
+  embed?: AssistantEmbeddedPage | null;
+  onEmbedClose?: () => void;
 }
 
 const DIRECTION: Record<AssistantChatProps["language"], "ltr" | "rtl"> = {
@@ -88,6 +104,8 @@ export const AssistantLauncher: React.FC<AssistantLauncherProps> = ({
   hidden = false,
   className,
   panelClassName,
+  embed,
+  onEmbedClose,
   headerAction,
   voice = true,
   conversations: hostConversations,
@@ -371,17 +389,47 @@ export const AssistantLauncher: React.FC<AssistantLauncherProps> = ({
           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",
+            "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)]",
+            // 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",
+            isExpanded ? "sm:w-[32rem] md:w-[max(50vw,40rem)]" : "sm:w-[32rem]",
             panelClassName
           )}
         >
+          {embed && (
+            <div className="absolute inset-0 z-20 flex flex-col bg-white" data-testid="assistant-launcher-embed">
+              <div className="flex items-center gap-2 border-b border-ews-gray-100 px-3 py-2">
+                <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"
+                >
+                  <ArrowLeft className="h-5 w-5 rtl:rotate-180" aria-hidden="true" />
+                </button>
+                <h2 className="min-w-0 flex-1 truncate text-base font-semibold text-ews-gray-900">{embed.title}</h2>
+                <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"
+                >
+                  <X className="h-5 w-5" aria-hidden="true" />
+                </button>
+              </div>
+              <iframe title={embed.title} src={embed.url} className="block w-full flex-1 border-0" />
+            </div>
+          )}
           <AssistantChat
             {...chatProps}
             texts={texts}

package/src/components/AssistantLauncher/index.ts

@@ -1,2 +1,2 @@
 export { AssistantLauncher } from "./AssistantLauncher";
-export type { AssistantLauncherProps, AssistantLauncherTexts } from "./AssistantLauncher";
+export type { AssistantEmbeddedPage, AssistantLauncherProps, AssistantLauncherTexts } from "./AssistantLauncher";

package/src/index.ts

@@ -102,7 +102,7 @@ export type {
 
 // MED-1787: in-app launcher (bottom bar + slide-over) and the shared assistant client
 export { AssistantLauncher } from "./components/AssistantLauncher";
-export type { AssistantLauncherProps, AssistantLauncherTexts } from "./components/AssistantLauncher";
+export type { AssistantEmbeddedPage, AssistantLauncherProps, AssistantLauncherTexts } from "./components/AssistantLauncher";
 export {
   ASSISTANT_CLIENT_ID_KEY,
   ASSISTANT_CONVERSATIONS_KEY,