@ews-admin/global-design-system 1.35.0 → 1.36.0

package/dist/utils/env-config.d.ts

@@ -2,6 +2,7 @@ export type Environment = "local" | "dev" | "qa" | "prod";
 export interface EnvConfigOverrides {
     bffUrl?: string;
     loginBffUrl?: string;
+    assistantBffUrl?: string;
     appUrl?: string;
     loginUrl?: string;
     dashboardUrl?: string;
@@ -11,6 +12,8 @@ export interface EnvConfig {
     env: Environment;
     bffUrl: string;
     loginBffUrl: string;
+    /** MED-1783: the assistant BFF (medecine360-assistant-bff), base path included. */
+    assistantBffUrl: string;
     appUrl: string;
     loginUrl: string;
     dashboardUrl: string;

package/dist/utils/env-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"env-config.d.ts","sourceRoot":"","sources":["../../src/utils/env-config.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AA6DD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,EACX,SAAS,CAAC,EAAE,kBAAkB,GAC7B,SAAS,CAeX"}
+{"version":3,"file":"env-config.d.ts","sourceRoot":"","sources":["../../src/utils/env-config.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,mFAAmF;IACnF,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAgED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,MAAM,EACX,SAAS,CAAC,EAAE,kBAAkB,GAC7B,SAAS,CAeX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -65,6 +65,7 @@
     "storybook": "^7.5.0",
     "tailwindcss": "^3.4.0",
     "ts-jest": "29",
+    "tslib": "^2.9.1",
     "typescript": "^5.2.2",
     "vite": "^4.5.0"
   },

package/src/assistant/index.ts

@@ -0,0 +1,11 @@
+export { createAssistantTransport, parseAssistantEventStream } from "./transport";
+export type { AssistantTransportOptions } from "./transport";
+export {
+  ASSISTANT_CLIENT_ID_KEY,
+  ASSISTANT_CONVERSATIONS_KEY,
+  ASSISTANT_MAX_CONVERSATIONS,
+  getAssistantClientId,
+  listAssistantConversations,
+  saveAssistantConversation,
+} from "./store";
+export type { AssistantStorage } from "./store";

package/src/assistant/store.ts

@@ -0,0 +1,77 @@
+import type { AssistantConversationSummary } from "../components/AssistantChat/AssistantChat.types";
+
+/**
+ * Anonymous memory of the assistant, in the browser only (MED-1784, shared by
+ * every app since MED-1787): a stable client id and the conversations started
+ * here, newest first. Nothing is sent to a server to list them; signing in
+ * (phase 2) will attach them to the account.
+ */
+export const ASSISTANT_CLIENT_ID_KEY = "assistant.clientId";
+export const ASSISTANT_CONVERSATIONS_KEY = "assistant.conversations";
+export const ASSISTANT_MAX_CONVERSATIONS = 20;
+
+export type AssistantStorage = Pick<Storage, "getItem" | "setItem">;
+
+function storage(): AssistantStorage | null {
+  try {
+    return typeof window !== "undefined" ? window.localStorage : null;
+  } catch {
+    return null;
+  }
+}
+
+function randomId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `c-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
+/** The browser's client id, created on first use. A fresh id per page when storage is unavailable. */
+export function getAssistantClientId(store: AssistantStorage | null = storage()): string {
+  const existing = store?.getItem(ASSISTANT_CLIENT_ID_KEY);
+  if (existing) return existing;
+  const id = randomId();
+  try {
+    store?.setItem(ASSISTANT_CLIENT_ID_KEY, id);
+  } catch {
+    // private mode: the id lasts for this page only
+  }
+  return id;
+}
+
+export function listAssistantConversations(
+  store: AssistantStorage | null = storage()
+): AssistantConversationSummary[] {
+  try {
+    const raw = store?.getItem(ASSISTANT_CONVERSATIONS_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (entry): entry is AssistantConversationSummary =>
+        typeof entry === "object" &&
+        entry !== null &&
+        typeof (entry as { id?: unknown }).id === "string"
+    );
+  } catch {
+    return [];
+  }
+}
+
+/** Adds or refreshes a conversation at the top of the list, capped at ASSISTANT_MAX_CONVERSATIONS. */
+export function saveAssistantConversation(
+  conversation: AssistantConversationSummary,
+  store: AssistantStorage | null = storage()
+): AssistantConversationSummary[] {
+  const next = [
+    conversation,
+    ...listAssistantConversations(store).filter((entry) => entry.id !== conversation.id),
+  ].slice(0, ASSISTANT_MAX_CONVERSATIONS);
+  try {
+    store?.setItem(ASSISTANT_CONVERSATIONS_KEY, JSON.stringify(next));
+  } catch {
+    // private mode: the list lasts for this page only
+  }
+  return next;
+}

package/src/assistant/transport.ts

@@ -0,0 +1,159 @@
+import type {
+  AssistantEvent,
+  AssistantLanguage,
+  AssistantMessage,
+  AssistantTransport,
+} from "../components/AssistantChat/AssistantChat.types";
+
+/**
+ * The assistant BFF client shared by every app (MED-1787; contract in
+ * projects/medecine360-mcp/docs/assistant-api-contract.md). Fetch rather than
+ * EventSource: the message endpoint is a POST. Requests carry the platform
+ * session cookie (`credentials: "include"`) so the assistant BFF can derive
+ * the persona server-side once it supports it.
+ */
+export interface AssistantTransportOptions {
+  /** Base URL up to and including /api/v1 (createEnvConfig().assistantBffUrl). */
+  baseUrl: string;
+  /** Stable browser identifier, for rate limiting and conversation listing. */
+  clientId: string;
+  language: AssistantLanguage;
+  fetchImpl?: typeof fetch;
+}
+
+interface ErrorBody {
+  code?: string;
+  message?: string;
+  retryAfterSeconds?: number;
+}
+
+/** Turns one SSE text stream into assistant events; frames may arrive split across chunks. */
+export async function* parseAssistantEventStream(
+  body: ReadableStream<Uint8Array>
+): AsyncGenerator<AssistantEvent> {
+  const reader = body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  try {
+    while (true) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true }).replace(/\r\n/g, "\n");
+      let separator = buffer.indexOf("\n\n");
+      while (separator >= 0) {
+        const frame = buffer.slice(0, separator);
+        buffer = buffer.slice(separator + 2);
+        const event = parseFrame(frame);
+        if (event) yield event;
+        separator = buffer.indexOf("\n\n");
+      }
+    }
+    const tail = parseFrame(buffer);
+    if (tail) yield tail;
+  } finally {
+    reader.releaseLock();
+  }
+}
+
+function parseFrame(frame: string): AssistantEvent | null {
+  let type = "";
+  const dataLines: string[] = [];
+  for (const rawLine of frame.split("\n")) {
+    const line = rawLine.replace(/\r$/, "");
+    if (line.startsWith("event:")) type = line.slice(6).trim();
+    else if (line.startsWith("data:")) dataLines.push(line.slice(5).trimStart());
+  }
+  if (!type || dataLines.length === 0) return null;
+  try {
+    const data = JSON.parse(dataLines.join("\n")) as Record<string, unknown>;
+    return { type, ...data } as AssistantEvent;
+  } catch {
+    return null;
+  }
+}
+
+async function errorEvent(response: Response): Promise<AssistantEvent> {
+  let body: ErrorBody = {};
+  try {
+    body = (await response.json()) as ErrorBody;
+  } catch {
+    // no JSON body: keep the status
+  }
+  const retryAfterHeader = Number(response.headers.get("retry-after"));
+  const code =
+    body.code ??
+    (response.status === 429
+      ? "RATE_LIMITED"
+      : response.status === 404
+        ? "CONVERSATION_NOT_FOUND"
+        : "MODEL_UNAVAILABLE");
+  return {
+    type: "error",
+    code,
+    message: body.message ?? `HTTP ${response.status}`,
+    retryAfterSeconds:
+      body.retryAfterSeconds ??
+      (Number.isFinite(retryAfterHeader) && retryAfterHeader > 0 ? retryAfterHeader : undefined),
+  };
+}
+
+export function createAssistantTransport({
+  baseUrl,
+  clientId,
+  language,
+  fetchImpl,
+}: AssistantTransportOptions): AssistantTransport {
+  const base = `${baseUrl.replace(/\/+$/, "")}/assistant`;
+  const doFetch: typeof fetch = (input, init) =>
+    (fetchImpl ?? fetch)(input, { credentials: "include", ...init });
+  const headers = { "Content-Type": "application/json", "Accept-Language": language };
+
+  return {
+    async startConversation(conversationLanguage) {
+      const response = await doFetch(`${base}/conversations`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ language: conversationLanguage, persona: "visitor", clientId }),
+      });
+      if (!response.ok) {
+        const error = await errorEvent(response);
+        throw new Error(error.type === "error" ? error.message : `HTTP ${response.status}`);
+      }
+      const created = (await response.json()) as { id: string };
+      return { id: created.id };
+    },
+
+    async *sendMessage(conversationId, content, options) {
+      const response = await doFetch(
+        `${base}/conversations/${encodeURIComponent(conversationId)}/messages`,
+        {
+          method: "POST",
+          headers: { ...headers, Accept: "text/event-stream" },
+          body: JSON.stringify({ content }),
+          signal: options?.signal,
+        }
+      );
+      if (!response.ok) {
+        yield await errorEvent(response);
+        return;
+      }
+      if (!response.body) {
+        yield { type: "error", code: "NETWORK", message: "Empty response" };
+        return;
+      }
+      yield* parseAssistantEventStream(response.body);
+    },
+
+    async getConversation(conversationId) {
+      const response = await doFetch(`${base}/conversations/${encodeURIComponent(conversationId)}`, {
+        headers,
+      });
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+      const data = (await response.json()) as { id: string; messages: AssistantMessage[] };
+      return {
+        id: data.id,
+        messages: data.messages.map((message) => ({ ...message, status: "done" as const })),
+      };
+    },
+  };
+}

package/src/components/AssistantChat/AssistantChat.tsx

@@ -0,0 +1,390 @@
+import { History, SquarePen } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cn, generateId } from "../../utils";
+import type {
+  AssistantChatProps,
+  AssistantConversationSummary,
+  AssistantEvent,
+  AssistantMessage,
+} from "./AssistantChat.types";
+import { AssistantComposer } from "./AssistantComposer";
+import { AssistantConfirmationCard } from "./AssistantConfirmationCard";
+import { AssistantConversationList } from "./AssistantConversationList";
+import { AssistantMessages } from "./AssistantMessages";
+import { AssistantSuggestionCard } from "./AssistantSuggestionCard";
+
+const DIRECTION: Record<AssistantChatProps["language"], "ltr" | "rtl"> = {
+  fr: "ltr",
+  en: "ltr",
+  ar: "rtl",
+};
+
+/** A conversation title is its first message, cut like the mockup's sidebar. */
+export function conversationTitle(firstMessage: string, max = 60): string {
+  const oneLine = firstMessage.replace(/\s+/g, " ").trim();
+  return oneLine.length > max ? `${oneLine.slice(0, max - 1)}…` : oneLine;
+}
+
+/**
+ * The chat home of the Medecine360 assistant (MED-1783, mockup med1):
+ * conversation list, header with brand badge, hero with suggestion cards,
+ * streamed thread, composer with push-to-talk. UI only: the app provides the
+ * transport, the texts, the conversation memory and the links.
+ *
+ * Server-rendering safe: nothing touches `window` at render time, the
+ * speech API is detected after mount.
+ */
+export const AssistantChat: React.FC<AssistantChatProps> = ({
+  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,
+  onNavigate,
+  historyOpen = false,
+  onHistoryOpenChange,
+  className,
+}) => {
+  const [messages, setMessages] = useState<AssistantMessage[]>(initialMessages ?? []);
+  const [activity, setActivity] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const conversationIdRef = useRef<string | null>(activeConversationId);
+  const abortRef = useRef<AbortController | null>(null);
+
+  // The app switched conversation: show its messages and talk to it from now on.
+  // Not when the app merely echoes the id this component just created (send()
+  // already set the ref): the thread in progress must stay on screen.
+  useEffect(() => {
+    if (conversationIdRef.current === activeConversationId) return;
+    conversationIdRef.current = activeConversationId;
+    setMessages(initialMessages ?? []);
+    setActivity(null);
+  }, [activeConversationId, initialMessages]);
+
+  useEffect(() => () => abortRef.current?.abort(), []);
+
+  const patchMessage = useCallback((id: string, patch: (message: AssistantMessage) => AssistantMessage) => {
+    setMessages((current) => current.map((message) => (message.id === id ? patch(message) : message)));
+  }, []);
+
+  const applyEvent = useCallback(
+    (assistantId: string, event: AssistantEvent) => {
+      switch (event.type) {
+        case "message_start":
+          patchMessage(assistantId, (message) => ({ ...message, id: event.messageId || message.id }));
+          return event.messageId || assistantId;
+        case "text_delta":
+          patchMessage(assistantId, (message) => ({ ...message, content: message.content + event.text }));
+          return assistantId;
+        case "tool_call":
+          setActivity(event.status === "started" ? event.label : null);
+          return assistantId;
+        case "citation":
+          patchMessage(assistantId, (message) => ({
+            ...message,
+            citations: [...(message.citations ?? []), { title: event.title, url: event.url }],
+          }));
+          return assistantId;
+        case "message_end":
+          setActivity(null);
+          patchMessage(assistantId, (message) => ({ ...message, status: "done" }));
+          return assistantId;
+        case "error":
+          setActivity(null);
+          patchMessage(assistantId, (message) => ({
+            ...message,
+            status: "error",
+            error: {
+              message:
+                event.code === "RATE_LIMITED" && event.retryAfterSeconds
+                  ? texts.rateLimited(event.retryAfterSeconds)
+                  : event.message || texts.genericError,
+              retryAfterSeconds: event.retryAfterSeconds,
+            },
+          }));
+          return assistantId;
+        default:
+          return assistantId;
+      }
+    },
+    [patchMessage, texts]
+  );
+
+  const send = useCallback(
+    async (content: string) => {
+      if (busy) return false;
+      setBusy(true);
+      const userMessage: AssistantMessage = { id: generateId("u"), role: "user", content };
+      let assistantId = generateId("a");
+      setMessages((current) => [
+        ...current,
+        userMessage,
+        { id: assistantId, role: "assistant", content: "", status: "streaming" },
+      ]);
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        if (!conversationIdRef.current) {
+          const created = await transport.startConversation(language);
+          conversationIdRef.current = created.id;
+          const summary: AssistantConversationSummary = {
+            id: created.id,
+            title: conversationTitle(content),
+            createdAt: new Date().toISOString(),
+          };
+          onConversationCreated?.(summary);
+        }
+        for await (const event of transport.sendMessage(conversationIdRef.current, content, {
+          signal: controller.signal,
+        })) {
+          assistantId = applyEvent(assistantId, event);
+        }
+      } catch (error) {
+        setActivity(null);
+        patchMessage(assistantId, (message) => ({
+          ...message,
+          status: "error",
+          error: { message: error instanceof Error && error.message ? error.message : texts.genericError },
+        }));
+      } finally {
+        setBusy(false);
+        abortRef.current = null;
+      }
+      return true;
+    },
+    [applyEvent, busy, language, onConversationCreated, patchMessage, texts.genericError, transport]
+  );
+
+  // A prompt queued from outside (the launcher bar) is sent once, as soon as
+  // the component is free.
+  const handledPromptRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!queuedPrompt || queuedPrompt.id === handledPromptRef.current || busy) return;
+    handledPromptRef.current = queuedPrompt.id;
+    void send(queuedPrompt.content);
+  }, [busy, queuedPrompt, send]);
+
+  /** Retry re-sends the user message that preceded the failed answer. */
+  const retry = useCallback(
+    (failed: AssistantMessage) => {
+      const index = messages.findIndex((message) => message.id === failed.id);
+      const previous = index > 0 ? messages[index - 1] : undefined;
+      if (!previous || previous.role !== "user") return;
+      setMessages((current) => current.filter((message) => message.id !== failed.id && message.id !== previous.id));
+      void send(previous.content);
+    },
+    [messages, send]
+  );
+
+  const startNewConversation = useCallback(() => {
+    abortRef.current?.abort();
+    conversationIdRef.current = null;
+    setMessages([]);
+    setActivity(null);
+    onNewConversation?.();
+  }, [onNewConversation]);
+
+  const empty = messages.length === 0;
+  const dir = DIRECTION[language];
+  // panel: one compact column; wide: the slide-over expanded, list beside the thread.
+  const compact = layout === "panel";
+  const withList = layout !== "panel";
+  const historyLabel = texts.history ?? texts.recentConversations;
+
+  return (
+    <div
+      dir={dir}
+      lang={language}
+      className={cn(
+        "overflow-hidden bg-white",
+        layout === "page" && "grid min-h-[36rem] grid-cols-1 rounded-2xl border border-ews-gray-200 shadow-sm md:grid-cols-[16rem_1fr]",
+        layout === "wide" && "grid h-full min-h-0 grid-cols-1 md:grid-cols-[16rem_1fr]",
+        compact && "relative flex h-full min-h-0 flex-col",
+        className
+      )}
+      data-layout={layout}
+      data-testid="assistant-chat"
+    >
+      {withList && (
+        <AssistantConversationList
+          conversations={conversations}
+          activeConversationId={activeConversationId}
+          onSelect={onSelectConversation}
+          onNew={startNewConversation}
+          texts={texts}
+          signInHref={signInHref}
+          className="hidden border-e border-ews-gray-200 md:flex"
+        />
+      )}
+
+      {compact && historyOpen && (
+        <div className="absolute inset-0 z-10 flex" data-testid="assistant-history">
+          <AssistantConversationList
+            conversations={conversations}
+            activeConversationId={activeConversationId}
+            onSelect={(id) => {
+              onSelectConversation?.(id);
+              onHistoryOpenChange?.(false);
+            }}
+            onNew={() => {
+              startNewConversation();
+              onHistoryOpenChange?.(false);
+            }}
+            texts={texts}
+            signInHref={signInHref}
+            className="w-72 max-w-full border-e border-ews-gray-200 shadow-xl"
+          />
+          <div
+            className="flex-1 bg-black/20"
+            onClick={() => onHistoryOpenChange?.(false)}
+            data-testid="assistant-history-overlay"
+          />
+        </div>
+      )}
+
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <header className="flex items-center justify-between gap-3 border-b border-ews-gray-200 px-4 py-3">
+          <div className="flex min-w-0 items-center gap-2">
+            <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">
+              {texts.brandName.charAt(0)}
+            </span>
+            <span className="truncate font-semibold text-ews-gray-900">{texts.brandName}</span>
+            <span className="rounded-full bg-ews-gray-100 px-2 py-0.5 text-xs font-medium text-ews-gray-600">AI</span>
+            <span className="flex items-center gap-1 text-xs text-ews-gray-500">
+              <span className="h-2 w-2 rounded-full bg-ews-success" aria-hidden="true" />
+              {texts.online}
+            </span>
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            {compact && onHistoryOpenChange && (
+              <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"
+              >
+                <History className="h-4 w-4" aria-hidden="true" />
+              </button>
+            )}
+            {!withList && !empty && (
+              <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"
+              >
+                <SquarePen className="h-4 w-4" aria-hidden="true" />
+              </button>
+            )}
+            {headerAction}
+          </div>
+        </header>
+
+        <div className="flex flex-1 flex-col overflow-y-auto">
+          {empty ? (
+            <>
+              <section
+                className={cn(
+                  "relative overflow-hidden bg-ews-primary-light text-center",
+                  compact ? "px-4 py-6" : "px-6 py-10"
+                )}
+              >
+                {heroBackground && <div className="absolute inset-0" aria-hidden="true">{heroBackground}</div>}
+                <div className="relative">
+                  <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")}>
+                    {texts.heroSubtitle}
+                  </p>
+                </div>
+              </section>
+              <div
+                className={cn("grid gap-3 px-4 py-5", compact ? "grid-cols-1" : "sm:grid-cols-2 lg:grid-cols-4")}
+                data-testid="assistant-suggestions"
+              >
+                {suggestions.map((suggestion) => (
+                  <AssistantSuggestionCard
+                    key={suggestion.id}
+                    suggestion={suggestion}
+                    onSelect={(selected) => void send(selected.prompt)}
+                    exampleLabel={texts.exampleLabel}
+                    disabled={busy}
+                  />
+                ))}
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 px-4 py-5">
+              <AssistantMessages
+                messages={messages}
+                activity={activity}
+                onRetry={retry}
+                texts={texts}
+                linkOptions={
+                  onNavigate
+                    ? {
+                        onLinkClick: (href, event) => {
+                          if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey) return;
+                          if (onNavigate(href) === true) event.preventDefault();
+                        },
+                      }
+                    : undefined
+                }
+              />
+              {pendingConfirmation && onConfirm && onCancelConfirmation && (
+                <AssistantConfirmationCard
+                  confirmation={pendingConfirmation}
+                  onConfirm={onConfirm}
+                  onCancel={onCancelConfirmation}
+                  texts={texts}
+                  className="mt-4"
+                />
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-ews-gray-200 px-4 pb-3 pt-3">
+          <AssistantComposer
+            language={language}
+            onSend={(content) => void send(content)}
+            disabled={busy}
+            voice={voice}
+            texts={{
+              placeholder: texts.composerPlaceholder,
+              hint: texts.composerHint,
+              send: texts.send,
+              holdToTalk: texts.holdToTalk,
+              listening: texts.listening,
+            }}
+          />
+          {disclaimer && <div className="mt-2 px-2 text-xs text-ews-gray-500">{disclaimer}</div>}
+        </div>
+      </div>
+    </div>
+  );
+};