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

package/package.json

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

package/src/components/AssistantChat/ActionTooltip.tsx

@@ -0,0 +1,31 @@
+import React, { useId } from "react";
+import { cn } from "../../utils";
+
+/**
+ * A visible tooltip for an icon button (hover and keyboard focus), so users
+ * know what the mic and the dictation buttons do. The button keeps its own
+ * aria-label; the tooltip is tied to it with aria-describedby.
+ */
+export const ActionTooltip: React.FC<{
+  label: string;
+  children: (describedBy: string) => React.ReactNode;
+  className?: string;
+}> = ({ label, children, className }) => {
+  const id = useId();
+  return (
+    <span className={cn("group relative inline-flex", className)}>
+      {children(id)}
+      <span
+        id={id}
+        role="tooltip"
+        className={cn(
+          "pointer-events-none absolute bottom-full start-1/2 z-50 mb-2 -translate-x-1/2 whitespace-nowrap rounded-md",
+          "bg-ews-gray-900 px-2 py-1 text-xs font-medium text-white opacity-0 shadow transition-opacity duration-150",
+          "group-hover:opacity-100 group-focus-within:opacity-100 rtl:translate-x-1/2"
+        )}
+      >
+        {label}
+      </span>
+    </span>
+  );
+};

package/src/components/AssistantChat/AssistantChat.tsx

@@ -12,6 +12,7 @@ import { AssistantConfirmationCard } from "./AssistantConfirmationCard";
 import { AssistantConversationList } from "./AssistantConversationList";
 import { AssistantMessages } from "./AssistantMessages";
 import { AssistantSuggestionCard } from "./AssistantSuggestionCard";
+import { AssistantVoiceMode } from "./AssistantVoiceMode";
 
 const DIRECTION: Record<AssistantChatProps["language"], "ltr" | "rtl"> = {
   fr: "ltr",
@@ -55,6 +56,8 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
   onCancelConfirmation,
   layout = "page",
   queuedPrompt = null,
+  voiceRequest = null,
+  composerDraft = null,
   onNavigate,
   historyOpen = false,
   onHistoryOpenChange,
@@ -179,6 +182,15 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
     void send(queuedPrompt.content);
   }, [busy, queuedPrompt, send]);
 
+  // Voice conversation screen, opened by the mic (here or in the launcher bar).
+  const [voiceOpen, setVoiceOpen] = useState(false);
+  const handledVoiceRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!voiceRequest || voiceRequest.id === handledVoiceRef.current) return;
+    handledVoiceRef.current = voiceRequest.id;
+    setVoiceOpen(true);
+  }, [voiceRequest]);
+
   /** Retry re-sends the user message that preceded the failed answer. */
   const retry = useCallback(
     (failed: AssistantMessage) => {
@@ -211,7 +223,7 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
       dir={dir}
       lang={language}
       className={cn(
-        "overflow-hidden bg-white",
+        "relative 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",
@@ -257,7 +269,7 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
         </div>
       )}
 
-      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+      <div className="relative 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">
@@ -309,7 +321,8 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
               <section
                 className={cn(
                   "relative overflow-hidden bg-ews-primary-light text-center",
-                  compact ? "px-4 py-6" : "px-6 py-10"
+                  // 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"
                 )}
               >
                 {heroBackground && <div className="absolute inset-0" aria-hidden="true">{heroBackground}</div>}
@@ -323,7 +336,11 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
                 </div>
               </section>
               <div
-                className={cn("grid gap-3 px-4 py-5", compact ? "grid-cols-1" : "sm:grid-cols-2 lg:grid-cols-4")}
+                // 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"
               >
                 {suggestions.map((suggestion) => (
@@ -374,7 +391,11 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
             onSend={(content) => void send(content)}
             disabled={busy}
             voice={voice}
+            onVoice={() => setVoiceOpen(true)}
+            draft={composerDraft}
             texts={{
+              dictate: texts.dictate,
+              dictation: texts.dictation,
               placeholder: texts.composerPlaceholder,
               hint: texts.composerHint,
               send: texts.send,
@@ -384,6 +405,17 @@ export const AssistantChat: React.FC<AssistantChatProps> = ({
           />
           {disclaimer && <div className="mt-2 px-2 text-xs text-ews-gray-500">{disclaimer}</div>}
         </div>
+        {/* In the thread column, so the conversation list stays visible beside it in the wide layouts. */}
+        {voiceOpen && (
+          <AssistantVoiceMode
+            language={language}
+            messages={messages}
+            busy={busy}
+            onSend={(content) => void send(content)}
+            onClose={() => setVoiceOpen(false)}
+            texts={texts.voiceMode}
+          />
+        )}
       </div>
     </div>
   );

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

@@ -98,7 +98,7 @@ export interface AssistantChatTexts {
   composerPlaceholder: string;
   composerHint: string;
   send: string;
-  /** Mic button: hold to talk. */
+  /** Mic button label: opens the voice conversation (MED-1801 voice mode). */
   holdToTalk: string;
   listening: string;
   thinking: string;
@@ -111,6 +111,23 @@ export interface AssistantChatTexts {
   cancel: string;
   /** The history button of the panel layout; falls back to `recentConversations`. */
   history?: string;
+  /** The dictation (waveform) button: label and tooltip. French default. */
+  dictate?: string;
+  /** Texts of the dictation recording bar; French defaults when absent. */
+  dictation?: { cancel?: string; done?: string; send?: string; unavailable?: string };
+  /** Texts of the voice conversation screen; French defaults when absent. */
+  voiceMode?: {
+    title?: string;
+    listening?: string;
+    thinking?: string;
+    speaking?: string;
+    muted?: string;
+    mute?: string;
+    unmute?: string;
+    end?: string;
+    /** Shown when the browser refuses the mic (permission denied, or the page is not https). */
+    unavailable?: string;
+  };
 }
 
 export interface AssistantConfirmation {
@@ -161,6 +178,13 @@ export interface AssistantChatProps {
    * soon as possible. Each `id` is sent once; a new id sends again.
    */
   queuedPrompt?: { id: string; content: string } | null;
+  /**
+   * Opens the voice conversation screen from outside (the launcher bar mic).
+   * Each `id` opens it once; a new id opens it again.
+   */
+  voiceRequest?: { id: string } | null;
+  /** A text to put in the composer from outside (a dictation done in the launcher bar). Each id once. */
+  composerDraft?: { id: string; content: string } | null;
   /**
    * Called when a link in an answer is clicked. Return true when the host
    * navigated itself (e.g. its router): the browser then does not follow the

package/src/components/AssistantChat/AssistantComposer.tsx

@@ -1,21 +1,31 @@
-import { Mic, SendHorizontal } from "lucide-react";
-import React, { useCallback, useRef, useState } from "react";
-import { useSpeechRecognition } from "../../hooks/useSpeechRecognition";
+import { AudioLines, Mic, SendHorizontal } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useSpeechSupported } from "../../hooks/useSpeechRecognition";
 import { cn } from "../../utils";
+import { ActionTooltip } from "./ActionTooltip";
+import { AssistantDictationBar, type AssistantDictationTexts } from "./AssistantDictationBar";
 import type { AssistantLanguage } from "./AssistantChat.types";
 
 export interface AssistantComposerProps {
   language: AssistantLanguage;
   onSend: (content: string) => void;
   disabled?: boolean;
-  /** Mic button; hidden anyway where the browser has no speech API. */
+  /** Mic and dictation buttons; hidden anyway where the browser has no speech API. */
   voice?: boolean;
+  /** Mic click: opens the voice conversation. Without it the mic is not shown. */
+  onVoice?: () => void;
+  /** A text to put in the field from outside (e.g. a dictation done in the launcher bar). Each id once. */
+  draft?: { id: string; content: string } | null;
   texts: {
     placeholder: string;
     hint: string;
     send: string;
+    /** Mic: voice conversation (label and tooltip). */
     holdToTalk: string;
     listening: string;
+    /** Waveform button: dictation (label and tooltip). French default. */
+    dictate?: string;
+    dictation?: AssistantDictationTexts;
   };
   className?: string;
 }
@@ -23,19 +33,24 @@ export interface AssistantComposerProps {
 export const MAX_MESSAGE_LENGTH = 2000;
 
 /**
- * The composer of the mockup: textarea, hint, push-to-talk mic (hold to
- * record, release to send) and a send button. Enter sends, Shift+Enter breaks.
+ * The composer of the mockup: textarea, hint, a dictation button (waveform:
+ * a recording bar transcribes into the field), a mic (the voice conversation)
+ * and send. Both voice buttons show a tooltip. Enter sends, Shift+Enter breaks.
  */
 export const AssistantComposer: React.FC<AssistantComposerProps> = ({
   language,
   onSend,
   disabled = false,
   voice = true,
+  onVoice,
+  draft = null,
   texts,
   className,
 }) => {
   const [value, setValue] = useState("");
+  const [dictating, setDictating] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const speechSupported = useSpeechSupported();
 
   const submit = useCallback(
     (content: string) => {
@@ -47,11 +62,13 @@ export const AssistantComposer: React.FC<AssistantComposerProps> = ({
     [disabled, onSend]
   );
 
-  const speech = useSpeechRecognition({
-    language,
-    onInterim: (text) => setValue(text),
-    onResult: (text) => submit(text),
-  });
+  const handledDraftRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!draft || draft.id === handledDraftRef.current) return;
+    handledDraftRef.current = draft.id;
+    setValue(draft.content.slice(0, MAX_MESSAGE_LENGTH));
+    textareaRef.current?.focus();
+  }, [draft]);
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (event.key === "Enter" && !event.shiftKey) {
@@ -60,74 +77,95 @@ export const AssistantComposer: React.FC<AssistantComposerProps> = ({
     }
   };
 
-  const showMic = voice && speech.supported;
+  const showVoice = voice && speechSupported;
+  const dictateLabel = texts.dictate ?? "Dicter un message";
 
   // A plain div rather than a <form>: Enter and the send button submit, and a
   // form followed by a sibling trips React hydration under happy-dom (the apps'
   // server-rendering tests) although browsers are fine.
   return (
     <div className={cn("w-full", className)}>
-      <div
-        className={cn(
-          "flex items-end gap-2 rounded-2xl border border-ews-gray-200 bg-white px-3 py-2 shadow-sm",
-          "focus-within:border-ews-primary focus-within:ring-2 focus-within:ring-ews-primary/20"
-        )}
-      >
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={(event) => setValue(event.target.value)}
-          onKeyDown={onKeyDown}
-          rows={1}
-          maxLength={MAX_MESSAGE_LENGTH}
-          placeholder={speech.listening ? texts.listening : texts.placeholder}
-          aria-label={texts.placeholder}
-          disabled={disabled}
-          className="max-h-40 min-h-[2.5rem] flex-1 resize-none bg-transparent py-2 text-base text-ews-gray-900 placeholder:text-ews-gray-400 focus:outline-none disabled:opacity-60"
+      {dictating ? (
+        <AssistantDictationBar
+          language={language}
+          texts={texts.dictation}
+          onCancel={() => setDictating(false)}
+          onDone={(text) => {
+            setDictating(false);
+            if (text) setValue((current) => (current ? `${current} ${text}` : text).slice(0, MAX_MESSAGE_LENGTH));
+            setTimeout(() => textareaRef.current?.focus(), 0);
+          }}
+          onSend={(text) => {
+            setDictating(false);
+            submit(value ? `${value} ${text}` : text);
+          }}
         />
-        {showMic && (
+      ) : (
+        <div
+          className={cn(
+            "flex items-end gap-2 rounded-2xl border border-ews-gray-200 bg-white px-3 py-2 shadow-sm",
+            "focus-within:border-ews-primary focus-within:ring-2 focus-within:ring-ews-primary/20"
+          )}
+        >
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={(event) => setValue(event.target.value)}
+            onKeyDown={onKeyDown}
+            rows={1}
+            maxLength={MAX_MESSAGE_LENGTH}
+            placeholder={texts.placeholder}
+            aria-label={texts.placeholder}
+            disabled={disabled}
+            className="max-h-40 min-h-[2.5rem] flex-1 resize-none bg-transparent py-2 text-base text-ews-gray-900 placeholder:text-ews-gray-400 focus:outline-none disabled:opacity-60"
+          />
+          {showVoice && (
+            <ActionTooltip label={dictateLabel}>
+              {(describedBy) => (
+                <button
+                  type="button"
+                  aria-label={dictateLabel}
+                  aria-describedby={describedBy}
+                  disabled={disabled}
+                  onClick={() => setDictating(true)}
+                  className="rounded-full p-2 text-ews-gray-500 transition-colors hover:bg-ews-gray-100 hover:text-ews-primary focus:outline-none focus:ring-2 focus:ring-ews-primary disabled:opacity-50"
+                  data-testid="assistant-dictate"
+                >
+                  <AudioLines className="h-5 w-5" aria-hidden="true" />
+                </button>
+              )}
+            </ActionTooltip>
+          )}
+          {showVoice && onVoice && (
+            <ActionTooltip label={texts.holdToTalk}>
+              {(describedBy) => (
+                <button
+                  type="button"
+                  aria-label={texts.holdToTalk}
+                  aria-describedby={describedBy}
+                  disabled={disabled}
+                  onClick={onVoice}
+                  className="rounded-full p-2 text-ews-gray-500 transition-colors hover:bg-ews-gray-100 hover:text-ews-primary focus:outline-none focus:ring-2 focus:ring-ews-primary disabled:opacity-50"
+                  data-testid="assistant-mic"
+                >
+                  <Mic className="h-5 w-5" aria-hidden="true" />
+                </button>
+              )}
+            </ActionTooltip>
+          )}
           <button
             type="button"
-            aria-label={texts.holdToTalk}
-            aria-pressed={speech.listening}
-            title={texts.holdToTalk}
-            disabled={disabled}
-            onMouseDown={speech.start}
-            onMouseUp={speech.stop}
-            onMouseLeave={speech.listening ? speech.stop : undefined}
-            onTouchStart={speech.start}
-            onTouchEnd={speech.stop}
-            onKeyDown={(event) => {
-              if (event.key === " " || event.key === "Enter") {
-                event.preventDefault();
-                if (speech.listening) speech.stop();
-                else speech.start();
-              }
-            }}
-            className={cn(
-              "rounded-full p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-ews-primary",
-              speech.listening
-                ? "bg-ews-error text-white animate-pulse"
-                : "text-ews-gray-500 hover:bg-ews-gray-100 hover:text-ews-primary",
-              "disabled:opacity-50"
-            )}
-            data-testid="assistant-mic"
+            onClick={() => submit(value)}
+            aria-label={texts.send}
+            title={texts.send}
+            disabled={disabled || value.trim().length === 0}
+            className="rounded-full bg-ews-primary p-2 text-white transition-colors hover:bg-ews-primary-hover focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-1 disabled:opacity-40"
+            data-testid="assistant-send"
           >
-            <Mic className="h-5 w-5" aria-hidden="true" />
+            <SendHorizontal className="h-5 w-5 rtl:-scale-x-100" aria-hidden="true" />
           </button>
-        )}
-        <button
-          type="button"
-          onClick={() => submit(value)}
-          aria-label={texts.send}
-          title={texts.send}
-          disabled={disabled || value.trim().length === 0}
-          className="rounded-full bg-ews-primary p-2 text-white transition-colors hover:bg-ews-primary-hover focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-1 disabled:opacity-40"
-          data-testid="assistant-send"
-        >
-          <SendHorizontal className="h-5 w-5 rtl:-scale-x-100" aria-hidden="true" />
-        </button>
-      </div>
+        </div>
+      )}
       <p className="mt-1.5 px-2 text-xs text-ews-gray-400">{texts.hint}</p>
     </div>
   );