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

package/src/components/AssistantChat/AssistantDictationBar.tsx

@@ -0,0 +1,268 @@
+import { ArrowUp, Check, X } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { getSpeechRecognition } from "../../hooks/useSpeechRecognition";
+import { cn } from "../../utils";
+import type { AssistantLanguage } from "./AssistantChat.types";
+
+/** Texts of the dictation bar; French defaults. */
+export interface AssistantDictationTexts {
+  cancel?: string;
+  done?: string;
+  send?: string;
+  unavailable?: string;
+}
+
+const DEFAULT_TEXTS: Required<AssistantDictationTexts> = {
+  cancel: "Annuler la dictée",
+  done: "Terminer et modifier le texte",
+  send: "Envoyer",
+  unavailable: "Micro indisponible : autorisez-le (page https requise).",
+};
+
+const BCP47: Record<AssistantLanguage, string> = { fr: "fr-FR", en: "en-US", ar: "ar-SA" };
+const BARS = 28;
+const BLOCKING_ERRORS = new Set(["not-allowed", "service-not-allowed", "audio-capture"]);
+
+interface DictationRecognition {
+  lang: string;
+  interimResults: boolean;
+  continuous: boolean;
+  onresult: ((event: { results: ArrayLike<ArrayLike<{ transcript: string }>> }) => void) | null;
+  onerror: ((event: { error?: string }) => void) | null;
+  onend: (() => void) | null;
+  start(): void;
+  stop(): void;
+  abort(): void;
+}
+
+export interface AssistantDictationBarProps {
+  language: AssistantLanguage;
+  /** ✕: nothing is kept. */
+  onCancel: () => void;
+  /** ✓: the transcript goes into the field to be edited. */
+  onDone: (transcript: string) => void;
+  /** ↑: the transcript is sent at once. */
+  onSend: (transcript: string) => void;
+  texts?: AssistantDictationTexts;
+  className?: string;
+}
+
+const formatElapsed = (seconds: number) => `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`;
+
+/**
+ * The recording bar of the mockup (audio3): cancel, a live waveform, the
+ * elapsed time, done and send. Recording starts as soon as it shows. The
+ * waveform follows the mic level when the browser gives it, and moves while
+ * words come in otherwise.
+ */
+export const AssistantDictationBar: React.FC<AssistantDictationBarProps> = ({
+  language,
+  onCancel,
+  onDone,
+  onSend,
+  texts,
+  className,
+}) => {
+  const t = { ...DEFAULT_TEXTS, ...texts };
+  const [levels, setLevels] = useState<number[]>(() => Array(BARS).fill(0.15));
+  const [elapsed, setElapsed] = useState(0);
+  const [unavailable, setUnavailable] = useState(
+    () => typeof window !== "undefined" && window.isSecureContext === false
+  );
+  const transcriptRef = useRef("");
+  const recognitionRef = useRef<DictationRecognition | null>(null);
+  const actionRef = useRef<"done" | "send" | "cancel" | null>(null);
+  const callbacks = useRef({ onCancel, onDone, onSend });
+  callbacks.current = { onCancel, onDone, onSend };
+
+  const pushLevel = useCallback((level: number) => {
+    setLevels((current) => [...current.slice(1), Math.max(0.12, Math.min(1, level))]);
+  }, []);
+
+  const finish = useCallback(() => {
+    const text = transcriptRef.current.trim();
+    const action = actionRef.current;
+    if (action === "send" && text) callbacks.current.onSend(text);
+    else if (action === "done") callbacks.current.onDone(text);
+    else callbacks.current.onCancel();
+  }, []);
+
+  // Speech recognition, from the first render.
+  useEffect(() => {
+    if (unavailable) return;
+    const Ctor = getSpeechRecognition() as unknown as (new () => DictationRecognition) | undefined;
+    if (!Ctor) {
+      setUnavailable(true);
+      return;
+    }
+    const recognition = new Ctor();
+    recognition.lang = BCP47[language] ?? language;
+    recognition.interimResults = true;
+    recognition.continuous = true;
+    recognition.onresult = (event) => {
+      let text = "";
+      for (let i = 0; i < event.results.length; i++) text += event.results[i][0]?.transcript ?? "";
+      if (text.length !== transcriptRef.current.length) pushLevel(0.4 + Math.random() * 0.6);
+      transcriptRef.current = text;
+    };
+    recognition.onerror = (event) => {
+      if (event.error && BLOCKING_ERRORS.has(event.error)) {
+        recognition.onend = null;
+        recognitionRef.current = null;
+        setUnavailable(true);
+      }
+    };
+    recognition.onend = () => {
+      if (recognitionRef.current !== recognition) return;
+      recognitionRef.current = null;
+      if (actionRef.current) finish();
+      else {
+        // The browser stopped after a silence: keep recording.
+        try {
+          recognition.start();
+          recognitionRef.current = recognition;
+        } catch {
+          /* ignore: the user can still press done */
+        }
+      }
+    };
+    recognitionRef.current = recognition;
+    recognition.start();
+    return () => {
+      recognition.onend = null;
+      recognitionRef.current = null;
+      recognition.abort();
+    };
+  }, [finish, language, pushLevel, unavailable]);
+
+  // Live mic level for the waveform, where the browser allows it.
+  useEffect(() => {
+    if (unavailable || typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) return;
+    const w = window as unknown as { AudioContext?: typeof AudioContext; webkitAudioContext?: typeof AudioContext };
+    const AudioCtx = w.AudioContext ?? w.webkitAudioContext;
+    if (!AudioCtx) return;
+    let stream: MediaStream | null = null;
+    let context: AudioContext | null = null;
+    let frame = 0;
+    let cancelled = false;
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then((media) => {
+        if (cancelled) {
+          media.getTracks().forEach((track) => track.stop());
+          return;
+        }
+        stream = media;
+        context = new AudioCtx();
+        const analyser = context.createAnalyser();
+        analyser.fftSize = 256;
+        context.createMediaStreamSource(media).connect(analyser);
+        const data = new Uint8Array(analyser.frequencyBinCount);
+        let last = 0;
+        const tick = (now: number) => {
+          if (now - last > 80) {
+            analyser.getByteTimeDomainData(data);
+            let peak = 0;
+            for (const value of data) peak = Math.max(peak, Math.abs(value - 128));
+            pushLevel(peak / 64);
+            last = now;
+          }
+          frame = requestAnimationFrame(tick);
+        };
+        frame = requestAnimationFrame(tick);
+        return undefined;
+      })
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+      stream?.getTracks().forEach((track) => track.stop());
+      void context?.close();
+    };
+  }, [pushLevel, unavailable]);
+
+  // Elapsed time.
+  useEffect(() => {
+    if (unavailable) return;
+    const timer = setInterval(() => setElapsed((value) => value + 1), 1000);
+    return () => clearInterval(timer);
+  }, [unavailable]);
+
+  const end = (action: "done" | "send" | "cancel") => {
+    actionRef.current = action;
+    const recognition = recognitionRef.current;
+    if (!recognition || action === "cancel") {
+      if (recognition) {
+        recognition.onend = null;
+        recognitionRef.current = null;
+        recognition.abort();
+      }
+      finish();
+      return;
+    }
+    // stop() delivers the last words, then onend calls finish().
+    recognition.stop();
+  };
+
+  return (
+    <div
+      className={cn("flex w-full items-center gap-2 rounded-full bg-ews-gray-100 px-3 py-1.5", className)}
+      data-testid="assistant-dictation"
+    >
+      <button
+        type="button"
+        onClick={() => end("cancel")}
+        aria-label={t.cancel}
+        title={t.cancel}
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ews-gray-600 hover:bg-ews-gray-200 focus:outline-none focus:ring-2 focus:ring-ews-primary"
+        data-testid="assistant-dictation-cancel"
+      >
+        <X className="h-5 w-5" aria-hidden="true" />
+      </button>
+
+      {unavailable ? (
+        <p className="flex-1 truncate text-sm text-ews-error" role="alert" data-testid="assistant-dictation-unavailable">
+          {t.unavailable}
+        </p>
+      ) : (
+        <>
+          <div className="flex h-8 flex-1 items-center justify-center gap-[3px]" aria-hidden="true" data-testid="assistant-dictation-wave">
+            {levels.map((level, index) => (
+              <span
+                key={index}
+                className="w-[3px] rounded-full bg-ews-gray-700 transition-[height] duration-100"
+                style={{ height: `${Math.round(level * 100)}%` }}
+              />
+            ))}
+          </div>
+          <span className="w-10 shrink-0 text-end text-sm tabular-nums text-ews-gray-600" data-testid="assistant-dictation-time">
+            {formatElapsed(elapsed)}
+          </span>
+        </>
+      )}
+
+      <button
+        type="button"
+        onClick={() => end("done")}
+        disabled={unavailable}
+        aria-label={t.done}
+        title={t.done}
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-ews-gray-700 hover:bg-ews-gray-200 focus:outline-none focus:ring-2 focus:ring-ews-primary disabled:opacity-40"
+        data-testid="assistant-dictation-done"
+      >
+        <Check className="h-5 w-5" aria-hidden="true" />
+      </button>
+      <button
+        type="button"
+        onClick={() => end("send")}
+        disabled={unavailable}
+        aria-label={t.send}
+        title={t.send}
+        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-ews-primary text-white shadow-sm 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-dictation-send"
+      >
+        <ArrowUp className="h-5 w-5" aria-hidden="true" />
+      </button>
+    </div>
+  );
+};

package/src/components/AssistantChat/AssistantSuggestionCard.tsx

@@ -11,7 +11,7 @@ export interface AssistantSuggestionCardProps {
   className?: string;
 }
 
-/** One of the cards under the hero (mockup med1): title, description, sent as a prompt on click. */
+/** One of the cards under the hero (mockups med1 and tools): icon, title, description, sent as a prompt on click. */
 export const AssistantSuggestionCard: React.FC<AssistantSuggestionCardProps> = ({
   suggestion,
   onSelect,
@@ -26,19 +26,20 @@ export const AssistantSuggestionCard: React.FC<AssistantSuggestionCardProps> = (
       disabled={disabled}
       onClick={() => onSelect(suggestion)}
       className={cn(
-        "flex h-full w-full flex-col items-start gap-2 rounded-xl border border-ews-gray-200 bg-white p-4 text-start shadow-sm transition-colors",
-        "hover:border-ews-primary hover:bg-ews-gray-50 focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-1",
+        // A soft grey card without border (mockup tools); it lifts with a shadow on hover.
+        "flex h-full w-full flex-col items-start gap-2 rounded-2xl bg-ews-gray-100 p-4 text-start transition-[background-color,box-shadow]",
+        "hover:bg-ews-gray-50 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-1",
         "disabled:cursor-not-allowed disabled:opacity-60",
         className
       )}
       data-testid={`assistant-suggestion-${suggestion.id}`}
     >
-      <span className="text-ews-gray-400" aria-hidden="true">
+      <span className="mb-2 text-ews-gray-600" aria-hidden="true">
         {suggestion.icon ?? (isExample ? <Sparkles className="h-4 w-4" /> : <ArrowRight className="h-4 w-4" />)}
       </span>
-      <span className="font-semibold text-ews-gray-900">{suggestion.title}</span>
+      <span className="font-semibold leading-snug text-ews-gray-900">{suggestion.title}</span>
       {suggestion.description && (
-        <span className="text-sm text-ews-gray-600">{suggestion.description}</span>
+        <span className="text-sm leading-snug text-ews-gray-400">{suggestion.description}</span>
       )}
       {isExample && (
         <span className="mt-auto text-xs uppercase tracking-wide text-ews-gray-400">{exampleLabel}</span>

package/src/components/AssistantChat/AssistantVoiceMode.tsx

@@ -0,0 +1,304 @@
+import { Mic, MicOff } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { getSpeechRecognition } from "../../hooks/useSpeechRecognition";
+import { cn } from "../../utils";
+import type { AssistantLanguage, AssistantMessage } from "./AssistantChat.types";
+
+/** Texts of the voice mode; every field has a French default. */
+export interface AssistantVoiceModeTexts {
+  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;
+}
+
+const DEFAULT_TEXTS: Required<AssistantVoiceModeTexts> = {
+  title: "Conversation vocale avec Medecine360",
+  listening: "À l'écoute…",
+  thinking: "Réflexion…",
+  speaking: "Réponse…",
+  muted: "Micro coupé",
+  mute: "Couper le micro",
+  unmute: "Réactiver le micro",
+  end: "Terminer",
+  unavailable:
+    "Le micro n'est pas accessible. Autorisez-le dans le navigateur ; il ne fonctionne que sur une page sécurisée (https).",
+};
+
+/** Errors after which listening again cannot work until the user acts. */
+const BLOCKING_ERRORS = new Set(["not-allowed", "service-not-allowed", "audio-capture"]);
+
+const BCP47: Record<AssistantLanguage, string> = { fr: "fr-FR", en: "en-US", ar: "ar-SA" };
+
+/** The recognition events the voice mode reads (final vs interim results). */
+interface VoiceRecognition {
+  lang: string;
+  interimResults: boolean;
+  continuous: boolean;
+  onresult:
+    | ((event: { resultIndex?: number; results: ArrayLike<ArrayLike<{ transcript: string }> & { isFinal?: boolean }> }) => void)
+    | null;
+  onerror: ((event: { error?: string }) => void) | null;
+  onend: (() => void) | null;
+  start(): void;
+  stop(): void;
+  abort(): void;
+}
+
+/** Markdown and links read aloud as plain words. */
+export function toSpokenText(markdown: string): string {
+  return markdown
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/https?:\/\/\S+/g, "")
+    .replace(/\*\*/g, "")
+    .replace(/^\s*[-*•]\s+/gm, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+export interface AssistantVoiceModeProps {
+  language: AssistantLanguage;
+  /** The conversation: the screen shows the turns spoken since it opened. */
+  messages: AssistantMessage[];
+  /** True while the assistant is answering: the mic waits. */
+  busy: boolean;
+  onSend: (content: string) => void;
+  onClose: () => void;
+  texts?: AssistantVoiceModeTexts;
+  /** Read answers aloud with the browser speech synthesis. Default true where available. */
+  speak?: boolean;
+}
+
+type Phase = "listening" | "thinking" | "speaking" | "muted" | "unavailable";
+
+/**
+ * MED-1801 (voice): the voice conversation screen of the mockup. Listening
+ * starts as soon as it opens; a finished sentence is sent to the same
+ * conversation; the mic pauses while the assistant answers (read aloud when
+ * the browser can) and resumes after. Mute stops the mic; Terminer closes.
+ */
+export const AssistantVoiceMode: React.FC<AssistantVoiceModeProps> = ({
+  language,
+  messages,
+  busy,
+  onSend,
+  onClose,
+  texts,
+  speak = true,
+}) => {
+  const t = { ...DEFAULT_TEXTS, ...texts };
+  const [muted, setMuted] = useState(false);
+  const [speaking, setSpeaking] = useState(false);
+  const [interim, setInterim] = useState("");
+  // The mic cannot work: insecure page (http) or permission refused.
+  const [unavailable, setUnavailable] = useState(
+    () => typeof window !== "undefined" && window.isSecureContext === false
+  );
+  const recognitionRef = useRef<VoiceRecognition | null>(null);
+  const restartTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const sentRef = useRef(false);
+  // Only the turns of this voice session are shown.
+  const [firstIndex] = useState(messages.length);
+  const spokenRef = useRef<string | null>(null);
+  const callbacks = useRef({ onSend });
+  callbacks.current = { onSend };
+
+  const stopListening = useCallback(() => {
+    if (restartTimerRef.current) clearTimeout(restartTimerRef.current);
+    restartTimerRef.current = null;
+    const recognition = recognitionRef.current;
+    recognitionRef.current = null;
+    if (recognition) {
+      recognition.onend = null;
+      recognition.abort();
+    }
+  }, []);
+
+  const startListening = useCallback(() => {
+    const Ctor = getSpeechRecognition() as unknown as (new () => VoiceRecognition) | undefined;
+    if (!Ctor || recognitionRef.current) return;
+    const recognition = new Ctor();
+    recognition.lang = BCP47[language] ?? language;
+    recognition.interimResults = true;
+    recognition.continuous = true;
+    sentRef.current = false;
+    recognition.onresult = (event) => {
+      let text = "";
+      let final = false;
+      for (let i = 0; i < event.results.length; i++) {
+        text += event.results[i][0]?.transcript ?? "";
+        if (event.results[i].isFinal) final = true;
+      }
+      const trimmed = text.trim();
+      setInterim(trimmed);
+      if (final && trimmed && !sentRef.current) {
+        sentRef.current = true;
+        setInterim("");
+        recognitionRef.current = null;
+        recognition.onend = null;
+        recognition.stop();
+        callbacks.current.onSend(trimmed);
+      }
+    };
+    recognition.onerror = (event) => {
+      // Permission refused or no mic: stop here and say so, never retry in a loop.
+      if (event.error && BLOCKING_ERRORS.has(event.error)) {
+        recognitionRef.current = null;
+        recognition.onend = null;
+        setUnavailable(true);
+      }
+      /* other errors (no-speech, network): onend follows and listens again */
+    };
+    recognition.onend = () => {
+      // The browser ends recognition after a silence: listen again, a moment later.
+      if (recognitionRef.current === recognition) {
+        recognitionRef.current = null;
+        restartTimerRef.current = setTimeout(() => startListeningRef.current(), 250);
+      }
+    };
+    recognitionRef.current = recognition;
+    recognition.start();
+  }, [language]);
+  const startListeningRef = useRef(startListening);
+  startListeningRef.current = startListening;
+
+  const last = messages[messages.length - 1];
+  const canSpeak = speak && typeof window !== "undefined" && "speechSynthesis" in window;
+
+  // Read the finished answer aloud, once.
+  useEffect(() => {
+    if (busy || !last || last.role !== "assistant" || last.status === "streaming") return;
+    if (messages.length <= firstIndex || spokenRef.current === last.id) return;
+    spokenRef.current = last.id;
+    const text = toSpokenText(last.content);
+    if (!canSpeak || !text) return;
+    const utterance = new SpeechSynthesisUtterance(text);
+    utterance.lang = BCP47[language] ?? language;
+    utterance.onend = () => setSpeaking(false);
+    utterance.onerror = () => setSpeaking(false);
+    setSpeaking(true);
+    window.speechSynthesis.speak(utterance);
+  }, [busy, canSpeak, firstIndex, language, last, messages.length]);
+
+  // Listen whenever nobody else is talking.
+  const shouldListen = !muted && !busy && !speaking && !unavailable;
+  useEffect(() => {
+    if (shouldListen) startListening();
+    else stopListening();
+  }, [shouldListen, startListening, stopListening]);
+
+  useEffect(
+    () => () => {
+      stopListening();
+      if (typeof window !== "undefined" && "speechSynthesis" in window) window.speechSynthesis.cancel();
+    },
+    [stopListening]
+  );
+
+  const phase: Phase = unavailable
+    ? "unavailable"
+    : muted
+      ? "muted"
+      : busy
+        ? "thinking"
+        : speaking
+          ? "speaking"
+          : "listening";
+  const status = {
+    listening: t.listening,
+    thinking: t.thinking,
+    speaking: t.speaking,
+    muted: t.muted,
+    unavailable: t.unavailable,
+  }[phase];
+  const turns = messages.slice(firstIndex).filter((message) => message.content.trim().length > 0);
+
+  return (
+    <div
+      dir={language === "ar" ? "rtl" : "ltr"}
+      className="absolute inset-0 z-30 flex flex-col bg-white"
+      role="dialog"
+      aria-label={t.title}
+      data-phase={phase}
+      data-testid="assistant-voice-mode"
+    >
+      <div className="flex items-center gap-2 px-5 pt-4 text-sm text-ews-gray-600">
+        <span className="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true" />
+        {t.title}
+      </div>
+
+      <div className="flex flex-col items-center gap-3 pt-8">
+        <div
+          className={cn(
+            "h-32 w-32 rounded-full shadow-[0_0_60px_rgba(33,89,108,0.35)] transition-transform duration-700",
+            "bg-[radial-gradient(circle_at_30%_25%,#ffffff_0%,#c0d0d4_35%,#21596c_75%,#1a4756_100%)]",
+            phase === "listening" && "animate-pulse",
+            phase === "speaking" && "scale-110",
+            (phase === "muted" || phase === "unavailable") && "opacity-50"
+          )}
+          aria-hidden="true"
+          data-testid="assistant-voice-orb"
+        />
+        <p
+          className={cn("max-w-xs px-4 text-center text-sm", phase === "unavailable" ? "text-ews-error" : "text-ews-gray-500")}
+          role={phase === "unavailable" ? "alert" : undefined}
+          aria-live="polite"
+          data-testid="assistant-voice-status"
+        >
+          {status}
+        </p>
+      </div>
+
+      <div className="flex-1 space-y-3 overflow-y-auto px-5 py-6" data-testid="assistant-voice-transcript">
+        {turns.map((message) => (
+          <div key={message.id} className={cn("flex", message.role === "user" ? "justify-end" : "justify-start")}>
+            <p
+              className={cn(
+                "max-w-[85%] rounded-2xl px-4 py-2 text-sm",
+                message.role === "user" ? "bg-ews-gray-100 text-ews-gray-800" : "bg-ews-primary-light/40 text-ews-gray-900"
+              )}
+            >
+              {message.role === "assistant" ? toSpokenText(message.content) : message.content}
+            </p>
+          </div>
+        ))}
+        {interim && (
+          <div className="flex justify-end">
+            <p className="max-w-[85%] rounded-2xl bg-ews-gray-100 px-4 py-2 text-sm italic text-ews-gray-500" data-testid="assistant-voice-interim">
+              {interim}
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-center gap-3 pb-6">
+        <button
+          type="button"
+          disabled={unavailable}
+          onClick={() => setMuted((value) => !value)}
+          aria-pressed={muted}
+          aria-label={muted ? t.unmute : t.mute}
+          title={muted ? t.unmute : t.mute}
+          className="flex h-11 w-11 items-center justify-center rounded-full border border-ews-gray-200 text-ews-gray-600 hover:bg-ews-gray-50 disabled:opacity-40"
+          data-testid="assistant-voice-mute"
+        >
+          {muted ? <MicOff className="h-5 w-5" aria-hidden="true" /> : <Mic className="h-5 w-5" aria-hidden="true" />}
+        </button>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-full bg-red-600 px-6 py-2.5 text-sm font-semibold text-white shadow hover:bg-red-700"
+          data-testid="assistant-voice-end"
+        >
+          {t.end}
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/AssistantChat/assistantMarkdown.tsx

@@ -40,8 +40,11 @@ function renderInline(text: string, keyPrefix: string, options: AssistantMarkdow
     if (start > last) nodes.push(text.slice(last, start));
     const token = match[0];
     if (token.startsWith("**")) {
+      // MED-1801: a bold run can hold a link, e.g. **[Dr Ba](/doctors/8)**.
       nodes.push(
-        <strong key={`${keyPrefix}-b${index}`}>{token.slice(2, -2)}</strong>
+        <strong key={`${keyPrefix}-b${index}`}>
+          {renderInline(token.slice(2, -2), `${keyPrefix}-b${index}`, options)}
+        </strong>
       );
     } else {
       const close = token.indexOf("](");

package/src/components/AssistantChat/index.ts

@@ -1,5 +1,9 @@
 export { AssistantChat, conversationTitle } from "./AssistantChat";
 export { AssistantComposer, MAX_MESSAGE_LENGTH } from "./AssistantComposer";
+export { AssistantVoiceMode, toSpokenText } from "./AssistantVoiceMode";
+export { AssistantDictationBar } from "./AssistantDictationBar";
+export type { AssistantDictationBarProps, AssistantDictationTexts } from "./AssistantDictationBar";
+export type { AssistantVoiceModeProps, AssistantVoiceModeTexts } from "./AssistantVoiceMode";
 export type { AssistantComposerProps } from "./AssistantComposer";
 export { AssistantConfirmationCard } from "./AssistantConfirmationCard";
 export type { AssistantConfirmationCardProps } from "./AssistantConfirmationCard";