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

package/src/components/AssistantLauncher/AssistantLauncher.tsx

@@ -1,7 +1,9 @@
 import { 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 { useSpeechRecognition } from "../../hooks/useSpeechRecognition";
+import { useSpeechSupported } from "../../hooks/useSpeechRecognition";
+import { ActionTooltip } from "../AssistantChat/ActionTooltip";
+import { AssistantDictationBar } from "../AssistantChat/AssistantDictationBar";
 import { cn, generateId } from "../../utils";
 import { AssistantChat } from "../AssistantChat/AssistantChat";
 import type {
@@ -147,11 +149,18 @@ export const AssistantLauncher: React.FC<AssistantLauncherProps> = ({
     [setOpen]
   );
 
-  const speech = useSpeechRecognition({
-    language: chatProps.language,
-    onInterim: (text) => setDraft(text),
-    onResult: (text) => submitFromBar(text),
-  });
+  // One click on the bar mic (or the voice button) opens the panel straight in
+  // the voice conversation, listening at once.
+  const [voiceRequest, setVoiceRequest] = useState<{ id: string } | null>(null);
+  const openVoice = useCallback(() => {
+    setVoiceRequest({ id: generateId("v") });
+    setOpen(true);
+  }, [setOpen]);
+  const speechSupported = useSpeechSupported();
+  // The waveform button records a dictation in the bar itself (recording bar).
+  const [dictating, setDictating] = useState(false);
+  const [composerDraft, setComposerDraft] = useState<{ id: string; content: string } | null>(null);
+  const dictateLabel = chatProps.texts.dictate ?? launcherTexts.voice ?? "Dicter un message";
 
   const handleConversationCreated = useCallback(
     (conversation: AssistantConversationSummary) => {
@@ -218,7 +227,7 @@ export const AssistantLauncher: React.FC<AssistantLauncherProps> = ({
   if (hidden) return null;
 
   const dir = DIRECTION[chatProps.language];
-  const showMic = voice && speech.supported;
+  const showMic = voice && speechSupported;
   const expandLabel = launcherTexts.expand ?? launcherTexts.open;
   const collapseLabel = launcherTexts.collapse ?? launcherTexts.close;
   const texts = launcherTexts.history ? { ...chatProps.texts, history: launcherTexts.history } : chatProps.texts;
@@ -254,78 +263,89 @@ export const AssistantLauncher: React.FC<AssistantLauncherProps> = ({
             >
               {chatProps.texts.brandName.charAt(0)}
             </button>
-            {/* The field opens the panel: typing happens in the panel composer, which gets the focus. */}
-            <input
-              type="text"
-              readOnly
-              value={draft}
-              onMouseDown={(event) => {
-                event.preventDefault();
-                setOpen(true);
-              }}
-              onFocus={() => setOpen(true)}
-              onKeyDown={(event) => {
-                if (event.key === "Enter" || event.key === " ") {
-                  event.preventDefault();
+            {dictating ? (
+              <AssistantDictationBar
+                language={chatProps.language}
+                texts={chatProps.texts.dictation}
+                className="min-w-0 flex-1"
+                onCancel={() => setDictating(false)}
+                onDone={(text) => {
+                  setDictating(false);
+                  if (text) setComposerDraft({ id: generateId("d"), content: text });
                   setOpen(true);
-                }
-              }}
-              placeholder={speech.listening ? chatProps.texts.listening : 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 && (
-              <button
-                type="button"
-                aria-label={chatProps.texts.holdToTalk}
-                aria-pressed={speech.listening}
-                title={chatProps.texts.holdToTalk}
-                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(
-                  "flex h-10 w-10 shrink-0 items-center justify-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-ews-primary",
-                  speech.listening
-                    ? "bg-ews-error text-white animate-pulse"
-                    : "text-ews-gray-600 hover:bg-ews-gray-100 hover:text-ews-primary"
+                onSend={(text) => {
+                  setDictating(false);
+                  submitFromBar(text);
+                }}
+              />
+            ) : (
+              <>
+                {/* The field opens the panel: typing happens in the panel composer, which gets the focus. */}
+                <input
+                  type="text"
+                  readOnly
+                  value={draft}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    setOpen(true);
+                  }}
+                  onFocus={() => setOpen(true)}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      setOpen(true);
+                    }
+                  }}
+                  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 && (
+                  <ActionTooltip label={chatProps.texts.holdToTalk}>
+                    {(describedBy) => (
+                      <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"
+                      >
+                        <Mic className="h-5 w-5" aria-hidden="true" />
+                      </button>
+                    )}
+                  </ActionTooltip>
                 )}
-                data-testid="assistant-launcher-mic"
-              >
-                <Mic className="h-5 w-5" aria-hidden="true" />
-              </button>
+                <ActionTooltip label={dictateLabel}>
+                  {(describedBy) => (
+                    <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"
+                    >
+                      <AudioLines className="h-5 w-5" aria-hidden="true" />
+                    </button>
+                  )}
+                </ActionTooltip>
+                <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"
+                >
+                  <ArrowUp className="h-5 w-5" aria-hidden="true" />
+                </button>
+              </>
             )}
-            <button
-              type="button"
-              onClick={() => setOpen(true)}
-              aria-label={launcherTexts.voice ?? launcherTexts.open}
-              title={launcherTexts.voice ?? launcherTexts.open}
-              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"
-            >
-              <AudioLines className="h-5 w-5" aria-hidden="true" />
-            </button>
-            <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"
-            >
-              <ArrowUp className="h-5 w-5" aria-hidden="true" />
-            </button>
           </div>
         </div>
       )}
@@ -337,7 +357,9 @@ export const AssistantLauncher: React.FC<AssistantLauncherProps> = ({
         data-testid="assistant-launcher-panel"
       >
         <div
-          className="absolute inset-0 bg-black/40"
+          // 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"
         />
@@ -349,7 +371,12 @@ 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] duration-200",
+            "absolute inset-y-0 end-0 flex w-full flex-col bg-white shadow-2xl transition-[width,max-width,height] duration-200",
+            // 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)]",
             // 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
@@ -361,6 +388,8 @@ export const AssistantLauncher: React.FC<AssistantLauncherProps> = ({
             voice={voice}
             layout={isExpanded ? "wide" : "panel"}
             queuedPrompt={queuedPrompt}
+            voiceRequest={voiceRequest}
+            composerDraft={composerDraft}
             conversations={hostManaged ? hostConversations : storedConversations}
             activeConversationId={hostManaged ? hostActiveId : managedActiveId}
             initialMessages={hostManaged ? hostInitialMessages : managedMessages}

package/src/hooks/index.ts

@@ -4,5 +4,5 @@ export { useIdleLock } from "./useIdleLock";
 export type { UseIdleLockOptions, UseIdleLockResult } from "./useIdleLock";
 export { useSelectField } from "./useSelectField";
 export type { UseSelectFieldProps } from "./useSelectField";
-export { useSpeechRecognition, getSpeechRecognition } from "./useSpeechRecognition";
+export { useSpeechRecognition, useSpeechSupported, getSpeechRecognition } from "./useSpeechRecognition";
 export type { UseSpeechRecognitionOptions } from "./useSpeechRecognition";

package/src/hooks/useSpeechRecognition.ts

@@ -26,6 +26,15 @@ export function getSpeechRecognition(): SpeechRecognitionCtor | undefined {
   return w.SpeechRecognition ?? w.webkitSpeechRecognition;
 }
 
+/** True once mounted in a browser that has the speech recognition API (false on the server). */
+export function useSpeechSupported(): boolean {
+  const [supported, setSupported] = useState(false);
+  useEffect(() => {
+    setSupported(getSpeechRecognition() !== undefined);
+  }, []);
+  return supported;
+}
+
 export interface UseSpeechRecognitionOptions {
   /** `fr`, `en`, `ar` or a BCP 47 tag. */
   language: string;

package/src/index.ts

@@ -65,6 +65,9 @@ export type { PinCodeInputProps } from "./components/PinCodeInput";
 export {
   AssistantChat,
   AssistantComposer,
+  AssistantVoiceMode,
+  AssistantDictationBar,
+  toSpokenText,
   AssistantConfirmationCard,
   AssistantConversationList,
   AssistantMessages,
@@ -90,6 +93,10 @@ export type {
   AssistantMessagesProps,
   AssistantSuggestion,
   AssistantSuggestionCardProps,
+  AssistantVoiceModeProps,
+  AssistantDictationBarProps,
+  AssistantDictationTexts,
+  AssistantVoiceModeTexts,
   AssistantTransport,
 } from "./components/AssistantChat";
 
@@ -162,6 +169,7 @@ export {
   useMediaQuery,
   useSelectField,
   useSpeechRecognition,
+  useSpeechSupported,
   getSpeechRecognition,
 } from "./hooks";
 export type {