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

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

@@ -0,0 +1,171 @@
+import type { ReactNode } from "react";
+
+/** Languages the assistant speaks; `ar` renders right-to-left. */
+export type AssistantLanguage = "fr" | "en" | "ar";
+
+/**
+ * Events streamed by the assistant BFF for one answer
+ * (projects/medecine360-mcp/docs/assistant-api-contract.md).
+ */
+export type AssistantEvent =
+  | { type: "message_start"; messageId: string }
+  | { type: "text_delta"; text: string }
+  | {
+      type: "tool_call";
+      name: string;
+      status: "started" | "done" | "failed";
+      label: string;
+    }
+  | { type: "citation"; title: string; url: string }
+  | {
+      type: "message_end";
+      messageId: string;
+      usage?: { inputTokens: number; outputTokens: number };
+    }
+  | {
+      type: "error";
+      code:
+        | "MODEL_UNAVAILABLE"
+        | "RATE_LIMITED"
+        | "CONVERSATION_NOT_FOUND"
+        | "INVALID_MESSAGE"
+        | "NETWORK"
+        | string;
+      message: string;
+      retryAfterSeconds?: number;
+    };
+
+export interface AssistantCitation {
+  title: string;
+  url: string;
+}
+
+export interface AssistantMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  citations?: AssistantCitation[];
+  /** Streaming state of an assistant message. */
+  status?: "streaming" | "done" | "error";
+  /** Set when `status` is `error`: what to show, and whether a retry makes sense. */
+  error?: { message: string; retryAfterSeconds?: number };
+}
+
+export interface AssistantConversationSummary {
+  id: string;
+  title: string;
+  createdAt: string;
+}
+
+/**
+ * The transport is the app's job: the component never knows a URL. The
+ * async iterable returned by `sendMessage` must end after `message_end` or
+ * `error`; a thrown error is treated as a network failure.
+ */
+export interface AssistantTransport {
+  startConversation(language: AssistantLanguage): Promise<{ id: string }>;
+  sendMessage(
+    conversationId: string,
+    content: string,
+    options?: { signal?: AbortSignal }
+  ): AsyncIterable<AssistantEvent>;
+  getConversation?(
+    conversationId: string
+  ): Promise<{ id: string; messages: AssistantMessage[] }>;
+}
+
+export interface AssistantSuggestion {
+  id: string;
+  title: string;
+  description?: string;
+  /** What is sent when the card is clicked. */
+  prompt: string;
+  icon?: ReactNode;
+  /** Marks the "example question" card of the mockup. */
+  kind?: "action" | "example";
+}
+
+/** Every string the component shows; the app translates them. */
+export interface AssistantChatTexts {
+  brandName: string;
+  online: string;
+  newConversation: string;
+  recentConversations: string;
+  signIn: string;
+  signInHint: string;
+  heroTitle: string;
+  heroSubtitle: string;
+  composerPlaceholder: string;
+  composerHint: string;
+  send: string;
+  /** Mic button: hold to talk. */
+  holdToTalk: string;
+  listening: string;
+  thinking: string;
+  retry: string;
+  rateLimited: (seconds: number) => string;
+  genericError: string;
+  sources: string;
+  exampleLabel: string;
+  confirm: string;
+  cancel: string;
+  /** The history button of the panel layout; falls back to `recentConversations`. */
+  history?: string;
+}
+
+export interface AssistantConfirmation {
+  id: string;
+  title: string;
+  details: Array<{ label: string; value: string }>;
+}
+
+export interface AssistantChatProps {
+  transport: AssistantTransport;
+  language: AssistantLanguage;
+  texts: AssistantChatTexts;
+  suggestions: AssistantSuggestion[];
+  /** Conversations the app remembers (local storage or account). */
+  conversations?: AssistantConversationSummary[];
+  activeConversationId?: string | null;
+  /** Messages of the active conversation, when the app restores one. */
+  initialMessages?: AssistantMessage[];
+  onConversationCreated?: (conversation: AssistantConversationSummary) => void;
+  onSelectConversation?: (conversationId: string) => void;
+  onNewConversation?: () => void;
+  /** Where "Se connecter" goes. Hidden when absent. */
+  signInHref?: string;
+  /** Rendered in the header, right side (e.g. "Réserver un appel"). */
+  headerAction?: ReactNode;
+  /** Rendered under the composer (sources, no medical advice, privacy link). */
+  disclaimer?: ReactNode;
+  /** Decorative image or gradient behind the hero. */
+  heroBackground?: 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. */
+  pendingConfirmation?: AssistantConfirmation | null;
+  onConfirm?: (confirmation: AssistantConfirmation) => void;
+  onCancelConfirmation?: (confirmation: AssistantConfirmation) => void;
+  /**
+   * `page` (default): the chat home with the conversation list beside the
+   * thread. `panel` (MED-1787): one narrow column for a slide-over, the
+   * conversation list behind a history button, a "new conversation" button
+   * in the header. `wide`: the expanded slide-over, list beside the thread.
+   */
+  layout?: "page" | "panel" | "wide";
+  /** Panel layout: the conversation list is shown over the thread. */
+  historyOpen?: boolean;
+  onHistoryOpenChange?: (open: boolean) => void;
+  /**
+   * MED-1787: a message typed outside the chat (the launcher bar) to send as
+   * soon as possible. Each `id` is sent once; a new id sends again.
+   */
+  queuedPrompt?: { 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
+   * link. Links to other origins always open in a new tab.
+   */
+  onNavigate?: (href: string) => boolean | void;
+  className?: string;
+}

package/src/components/AssistantChat/AssistantComposer.tsx

@@ -0,0 +1,134 @@
+import { Mic, SendHorizontal } from "lucide-react";
+import React, { useCallback, useRef, useState } from "react";
+import { useSpeechRecognition } from "../../hooks/useSpeechRecognition";
+import { cn } from "../../utils";
+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. */
+  voice?: boolean;
+  texts: {
+    placeholder: string;
+    hint: string;
+    send: string;
+    holdToTalk: string;
+    listening: string;
+  };
+  className?: string;
+}
+
+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.
+ */
+export const AssistantComposer: React.FC<AssistantComposerProps> = ({
+  language,
+  onSend,
+  disabled = false,
+  voice = true,
+  texts,
+  className,
+}) => {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const submit = useCallback(
+    (content: string) => {
+      const trimmed = content.trim();
+      if (!trimmed || disabled) return;
+      onSend(trimmed.slice(0, MAX_MESSAGE_LENGTH));
+      setValue("");
+    },
+    [disabled, onSend]
+  );
+
+  const speech = useSpeechRecognition({
+    language,
+    onInterim: (text) => setValue(text),
+    onResult: (text) => submit(text),
+  });
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      submit(value);
+    }
+  };
+
+  const showMic = voice && speech.supported;
+
+  // 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"
+        />
+        {showMic && (
+          <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"
+          >
+            <Mic className="h-5 w-5" 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>
+      <p className="mt-1.5 px-2 text-xs text-ews-gray-400">{texts.hint}</p>
+    </div>
+  );
+};

package/src/components/AssistantChat/AssistantConfirmationCard.tsx

@@ -0,0 +1,58 @@
+import { ShieldCheck } from "lucide-react";
+import React from "react";
+import { cn } from "../../utils";
+import { Button } from "../Button/Button";
+import type { AssistantConfirmation } from "./AssistantChat.types";
+
+export interface AssistantConfirmationCardProps {
+  confirmation: AssistantConfirmation;
+  onConfirm: (confirmation: AssistantConfirmation) => void;
+  onCancel: (confirmation: AssistantConfirmation) => void;
+  texts: { confirm: string; cancel: string };
+  busy?: boolean;
+  className?: string;
+}
+
+/**
+ * Reserved for phase 2 (MED-1779): the card the assistant shows before a
+ * write (booking, cancellation). Title, details, confirm and cancel wired to
+ * the app, so phase 2 needs no component change.
+ */
+export const AssistantConfirmationCard: React.FC<AssistantConfirmationCardProps> = ({
+  confirmation,
+  onConfirm,
+  onCancel,
+  texts,
+  busy = false,
+  className,
+}) => (
+  <section
+    aria-label={confirmation.title}
+    className={cn(
+      "rounded-xl border border-ews-primary/30 bg-ews-primary-light/30 p-4",
+      className
+    )}
+    data-testid="assistant-confirmation"
+  >
+    <h3 className="flex items-center gap-2 font-semibold text-ews-gray-900">
+      <ShieldCheck className="h-5 w-5 text-ews-primary" aria-hidden="true" />
+      {confirmation.title}
+    </h3>
+    <dl className="mt-3 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+      {confirmation.details.map((detail) => (
+        <React.Fragment key={detail.label}>
+          <dt className="text-ews-gray-500">{detail.label}</dt>
+          <dd className="font-medium text-ews-gray-900">{detail.value}</dd>
+        </React.Fragment>
+      ))}
+    </dl>
+    <div className="mt-4 flex gap-2">
+      <Button size="sm" loading={busy} onClick={() => onConfirm(confirmation)}>
+        {texts.confirm}
+      </Button>
+      <Button size="sm" variant="ghost" disabled={busy} onClick={() => onCancel(confirmation)}>
+        {texts.cancel}
+      </Button>
+    </div>
+  </section>
+);

package/src/components/AssistantChat/AssistantConversationList.tsx

@@ -0,0 +1,85 @@
+import { MessageSquare, SquarePen, UserRound } from "lucide-react";
+import React from "react";
+import { cn } from "../../utils";
+import type { AssistantConversationSummary } from "./AssistantChat.types";
+
+export interface AssistantConversationListProps {
+  conversations: AssistantConversationSummary[];
+  activeConversationId?: string | null;
+  onSelect?: (conversationId: string) => void;
+  onNew?: () => void;
+  texts: {
+    newConversation: string;
+    recentConversations: string;
+    signIn: string;
+    signInHint: string;
+  };
+  signInHref?: string;
+  className?: string;
+}
+
+/** Left column of the mockup: new discussion, recent ones, sign-in prompt at the bottom. */
+export const AssistantConversationList: React.FC<AssistantConversationListProps> = ({
+  conversations,
+  activeConversationId,
+  onSelect,
+  onNew,
+  texts,
+  signInHref,
+  className,
+}) => (
+  <nav
+    aria-label={texts.recentConversations}
+    className={cn("flex h-full flex-col gap-4 bg-ews-gray-50 p-3", className)}
+  >
+    <button
+      type="button"
+      onClick={onNew}
+      className="flex items-center gap-2 rounded-lg border border-ews-gray-200 bg-white px-3 py-2 text-sm font-medium text-ews-gray-800 hover:border-ews-primary hover:text-ews-primary"
+    >
+      <SquarePen className="h-4 w-4" aria-hidden="true" />
+      {texts.newConversation}
+    </button>
+
+    {conversations.length > 0 && (
+      <ul className="flex-1 space-y-1 overflow-y-auto" data-testid="assistant-conversation-list">
+        {conversations.map((conversation) => {
+          const active = conversation.id === activeConversationId;
+          return (
+            <li key={conversation.id}>
+              <button
+                type="button"
+                onClick={() => onSelect?.(conversation.id)}
+                aria-current={active ? "true" : undefined}
+                className={cn(
+                  "flex w-full items-center gap-2 truncate rounded-md px-2 py-1.5 text-start text-sm",
+                  active
+                    ? "bg-white font-medium text-ews-primary shadow-sm"
+                    : "text-ews-gray-700 hover:bg-white"
+                )}
+              >
+                <MessageSquare className="h-3.5 w-3.5 shrink-0 text-ews-gray-400" aria-hidden="true" />
+                <span className="truncate">{conversation.title}</span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    )}
+
+    {signInHref && (
+      <a
+        href={signInHref}
+        className="mt-auto flex items-start gap-2 rounded-lg px-2 py-2 text-sm hover:bg-white"
+      >
+        <span className="rounded-full bg-ews-primary-light p-1.5 text-ews-primary" aria-hidden="true">
+          <UserRound className="h-4 w-4" />
+        </span>
+        <span>
+          <span className="block font-medium text-ews-gray-900">{texts.signIn}</span>
+          <span className="block text-xs text-ews-gray-500">{texts.signInHint}</span>
+        </span>
+      </a>
+    )}
+  </nav>
+);

package/src/components/AssistantChat/AssistantMessages.tsx

@@ -0,0 +1,123 @@
+import { AlertCircle, Loader2, RotateCcw } from "lucide-react";
+import React, { useEffect, useRef } from "react";
+import { cn } from "../../utils";
+import type { AssistantMessage } from "./AssistantChat.types";
+import { renderAssistantMarkdown } from "./assistantMarkdown";
+import type { AssistantMarkdownOptions } from "./assistantMarkdown";
+
+export interface AssistantMessagesProps {
+  messages: AssistantMessage[];
+  /** The tool activity line shown under the streaming answer, e.g. "Recherche de médecins…". */
+  activity?: string | null;
+  onRetry?: (message: AssistantMessage) => void;
+  texts: { thinking: string; retry: string; sources: string; brandName: string };
+  /** Link handling of the answers (same-tab navigation through the host router). */
+  linkOptions?: AssistantMarkdownOptions;
+  className?: string;
+}
+
+/** The thread: user bubbles on the end side, assistant answers on the start side, auto-scrolled. */
+export const AssistantMessages: React.FC<AssistantMessagesProps> = ({
+  messages,
+  activity,
+  onRetry,
+  texts,
+  linkOptions,
+  className,
+}) => {
+  const endRef = useRef<HTMLDivElement>(null);
+  const last = messages[messages.length - 1];
+
+  useEffect(() => {
+    endRef.current?.scrollIntoView?.({ block: "end" });
+  }, [messages.length, last?.content, activity]);
+
+  return (
+    <div
+      className={cn("flex flex-col gap-4", className)}
+      role="log"
+      aria-live="polite"
+      aria-relevant="additions text"
+      data-testid="assistant-messages"
+    >
+      {messages.map((message) => {
+        const isUser = message.role === "user";
+        return (
+          <div
+            key={message.id}
+            className={cn("flex", isUser ? "justify-end" : "justify-start")}
+            data-testid={`assistant-message-${message.role}`}
+          >
+            <div
+              className={cn(
+                "max-w-[85%] rounded-2xl px-4 py-3 text-base leading-relaxed",
+                isUser
+                  ? "rounded-ee-md bg-ews-primary text-white"
+                  : "rounded-es-md bg-ews-gray-100 text-ews-gray-900"
+              )}
+            >
+              {isUser ? (
+                <p className="whitespace-pre-wrap">{message.content}</p>
+              ) : (
+                <>
+                  {message.content.length > 0 && renderAssistantMarkdown(message.content, linkOptions)}
+                  {message.status === "streaming" && message.content.length === 0 && (
+                    <span className="flex items-center gap-2 text-ews-gray-500">
+                      <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+                      {texts.thinking}
+                    </span>
+                  )}
+                  {message.status === "streaming" && activity && (
+                    <p className="mt-2 flex items-center gap-2 text-sm text-ews-gray-500" data-testid="assistant-activity">
+                      <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden="true" />
+                      {activity}
+                    </p>
+                  )}
+                  {message.citations && message.citations.length > 0 && (
+                    <p className="mt-3 border-t border-ews-gray-200 pt-2 text-xs text-ews-gray-500">
+                      <span className="font-medium">{texts.sources}: </span>
+                      {message.citations.map((citation, index) => (
+                        <React.Fragment key={`${citation.url}-${index}`}>
+                          {index > 0 && ", "}
+                          <a
+                            href={citation.url}
+                            className="underline underline-offset-2 hover:text-ews-primary"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {citation.title}
+                          </a>
+                        </React.Fragment>
+                      ))}
+                    </p>
+                  )}
+                  {message.status === "error" && message.error && (
+                    <div
+                      role="alert"
+                      className="mt-2 flex flex-wrap items-center gap-2 text-sm text-ews-error"
+                      data-testid="assistant-error"
+                    >
+                      <AlertCircle className="h-4 w-4 shrink-0" aria-hidden="true" />
+                      <span>{message.error.message}</span>
+                      {onRetry && (
+                        <button
+                          type="button"
+                          onClick={() => onRetry(message)}
+                          className="inline-flex items-center gap-1 rounded-md border border-ews-error/40 px-2 py-0.5 font-medium hover:bg-ews-error/10"
+                        >
+                          <RotateCcw className="h-3.5 w-3.5" aria-hidden="true" />
+                          {texts.retry}
+                        </button>
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        );
+      })}
+      <div ref={endRef} />
+    </div>
+  );
+};

package/src/components/AssistantChat/AssistantSuggestionCard.tsx

@@ -0,0 +1,48 @@
+import { ArrowRight, Sparkles } from "lucide-react";
+import React from "react";
+import { cn } from "../../utils";
+import type { AssistantSuggestion } from "./AssistantChat.types";
+
+export interface AssistantSuggestionCardProps {
+  suggestion: AssistantSuggestion;
+  onSelect: (suggestion: AssistantSuggestion) => void;
+  exampleLabel: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/** One of the cards under the hero (mockup med1): title, description, sent as a prompt on click. */
+export const AssistantSuggestionCard: React.FC<AssistantSuggestionCardProps> = ({
+  suggestion,
+  onSelect,
+  exampleLabel,
+  disabled = false,
+  className,
+}) => {
+  const isExample = suggestion.kind === "example";
+  return (
+    <button
+      type="button"
+      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",
+        "disabled:cursor-not-allowed disabled:opacity-60",
+        className
+      )}
+      data-testid={`assistant-suggestion-${suggestion.id}`}
+    >
+      <span className="text-ews-gray-400" 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>
+      {suggestion.description && (
+        <span className="text-sm text-ews-gray-600">{suggestion.description}</span>
+      )}
+      {isExample && (
+        <span className="mt-auto text-xs uppercase tracking-wide text-ews-gray-400">{exampleLabel}</span>
+      )}
+    </button>
+  );
+};