@aphrody/m3-ai 3.3.4 → 3.3.6

package/src/Markdown.tsx

@@ -3,13 +3,15 @@
 
 "use client";
 
-import { Icon } from "@aphrody/m3-primitives";
 import { clsx } from "clsx";
 import { forwardRef, isValidElement, useEffect, useRef, useState, type ReactNode } from "react";
 import ReactMarkdown, { type Components } from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
+import { type ChatLabels, resolveChatLabels } from "./chatLabels";
+import { ChatIcon } from "./chatIcons";
+
 type MarkdownSize = "small" | "medium" | "large";
 
 interface MarkdownProps {
@@ -22,8 +24,41 @@ interface MarkdownProps {
    * trusted content.
    */
   allowHtml?: boolean;
+  /** Element overrides merged over the M3 renderers (e.g. citation links). */
+  components?: Components;
+  /**
+   * Called on every link activation. Call `event.preventDefault()` to handle it yourself (e.g.
+   * open the system browser from a Tauri webview).
+   */
+  onLinkClick?: MarkdownLinkHandler;
+  /** Replaces the link element entirely. */
+  renderLink?: MarkdownLinkRenderer;
+  /** Visible strings of the code blocks; English defaults. */
+  labels?: Partial<ChatLabels>;
 }
 
+/** Link activation callback of {@link Markdown}. */
+export type MarkdownLinkHandler = (
+  href: string,
+  event: React.MouseEvent<HTMLAnchorElement>,
+) => void;
+
+/** Custom link renderer of {@link Markdown}. */
+export type MarkdownLinkRenderer = (link: {
+  href: string;
+  children: React.ReactNode;
+  external: boolean;
+}) => React.ReactNode;
+
+/** Whether `href` leaves the page: an absolute URL with a scheme, or protocol-relative. */
+export function isExternalHref(href: string | undefined): boolean {
+  if (!href) return false;
+  return /^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith("//");
+}
+
+/** Safe defaults of an external link: a new browsing context without opener or referrer. */
+export const externalLinkProps = { target: "_blank", rel: "noopener noreferrer" } as const;
+
 const bodyClass: Record<MarkdownSize, string> = {
   small: "text-body-small",
   medium: "text-body-medium",
@@ -123,6 +158,8 @@ export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement
   language?: string;
   onCopy?: (code: string) => void;
   children?: ReactNode;
+  /** `copy`, `copyCode`, `copied`; English defaults. */
+  labels?: Partial<ChatLabels>;
 }
 
 export function CodeBlock({
@@ -131,8 +168,10 @@ export function CodeBlock({
   onCopy,
   className,
   children,
+  labels,
   ...restProps
 }: CodeBlockProps) {
+  const l = resolveChatLabels(labels);
   // Strip node passed by ReactMarkdown to avoid rendering node="[object Object]" in DOM
   const { node: _node, ...props } = restProps as Record<string, any>;
 
@@ -202,15 +241,15 @@ export function CodeBlock({
               : "text-on-surface-variant hover:bg-on-surface/8 hover:text-on-surface active:bg-on-surface/12",
             "focus-visible:outline-2 focus-visible:outline-primary",
           )}
-          aria-label={copied ? "Copied" : "Copy code"}
-          title={copied ? "Copied!" : "Copy code"}
+          aria-label={copied ? l.copied : l.copyCode}
+          title={copied ? l.copied : l.copyCode}
         >
-          <Icon
+          <ChatIcon
             name={copied ? "check" : "content_copy"}
             size={16}
             className={copied ? "text-success" : undefined}
           />
-          <span>{copied ? "Copied!" : "Copy"}</span>
+          <span>{copied ? l.copied : l.copy}</span>
         </button>
       </div>
       <pre className="overflow-x-auto p-3 font-code text-body-small text-on-surface bg-surface-container-highest [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-[length:inherit]">
@@ -508,7 +547,13 @@ export function remarkMathPlugin() {
 // Element overrides mapping markdown onto M3 typescale and color roles
 // ---------------------------------------------------------------------------
 
-function m3Components(size: MarkdownSize): Components {
+interface LinkOptions {
+  onLinkClick?: MarkdownLinkHandler;
+  renderLink?: MarkdownLinkRenderer;
+  labels?: Partial<ChatLabels>;
+}
+
+function m3Components(size: MarkdownSize, link: LinkOptions = {}): Components {
   const body = bodyClass[size];
   return {
     h1: ({ node: _node, className, children, ...props }) => (
@@ -562,18 +607,28 @@ function m3Components(size: MarkdownSize): Components {
     p: ({ node: _node, className, ...props }) => (
       <p className={clsx("my-2 first:mt-0 last:mb-0", body, className)} {...props} />
     ),
-    a: ({ node: _node, className, children, ...props }) => (
-      <a
-        className={clsx(
-          "text-primary underline underline-offset-2 hover:decoration-2",
-          "rounded-extra-small outline-none focus-visible:outline-3 focus-visible:outline-secondary focus-visible:outline-offset-2",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </a>
-    ),
+    a: ({ node: _node, className, children, href, onClick, ...props }) => {
+      const external = isExternalHref(href);
+      if (link.renderLink) return <>{link.renderLink({ href: href ?? "", children, external })}</>;
+      return (
+        <a
+          className={clsx(
+            "text-primary underline underline-offset-2 hover:decoration-2",
+            "rounded-extra-small outline-none focus-visible:outline-3 focus-visible:outline-secondary focus-visible:outline-offset-2",
+            className,
+          )}
+          href={href}
+          {...(external ? externalLinkProps : {})}
+          onClick={(event) => {
+            onClick?.(event);
+            if (href) link.onLinkClick?.(href, event);
+          }}
+          {...props}
+        >
+          {children}
+        </a>
+      );
+    },
     strong: ({ node: _node, className, ...props }) => (
       <strong className={clsx("font-semibold text-on-surface", className)} {...props} />
     ),
@@ -611,7 +666,7 @@ function m3Components(size: MarkdownSize): Components {
       />
     ),
     pre: ({ node: _node, children, className, style }) => (
-      <CodeBlock className={className} style={style}>
+      <CodeBlock className={className} style={style} labels={link.labels}>
         {children}
       </CodeBlock>
     ),
@@ -677,7 +732,20 @@ function m3Components(size: MarkdownSize): Components {
 }
 
 const Markdown = forwardRef<HTMLDivElement, MarkdownProps>(
-  ({ content, className, size = "medium", allowHtml = false }, ref) => {
+  (
+    {
+      content,
+      className,
+      size = "medium",
+      allowHtml = false,
+      components,
+      onLinkClick,
+      renderLink,
+      labels,
+    },
+    ref,
+  ) => {
+    const base = m3Components(size, { onLinkClick, renderLink, labels });
     return (
       <div
         ref={ref}
@@ -686,7 +754,7 @@ const Markdown = forwardRef<HTMLDivElement, MarkdownProps>(
         <ReactMarkdown
           remarkPlugins={[remarkGfm, remarkMathPlugin]}
           rehypePlugins={allowHtml ? [rehypeRaw] : undefined}
-          components={m3Components(size)}
+          components={components ? { ...base, ...components } : base}
         >
           {content}
         </ReactMarkdown>

package/src/MemoryPanel.tsx

@@ -0,0 +1,176 @@
+// SPDX-License-Identifier: Apache-2.0
+// Memory panel: the agent's saved memories as an M3 list, with per-item deletion and a
+// "clear all" action guarded by an inline confirmation (or an injected one).
+
+"use client";
+
+import { CircleButton } from "@aphrody/m3-primitives";
+import { clsx } from "clsx";
+import { useMemo, useState } from "react";
+
+import { type ChatLabels, resolveChatLabels } from "./chatLabels";
+import { ChatIcon } from "./chatIcons";
+import { CircularIndicator, focusRing } from "./internal";
+
+export interface MemoryItem {
+  id: string;
+  content: string;
+  tags?: string[];
+  /** ISO string, epoch milliseconds or Date. */
+  createdAt: string | number | Date;
+}
+
+export interface MemoryPanelProps {
+  memories: readonly MemoryItem[];
+  loading?: boolean;
+  onDelete?: (id: string) => void;
+  /** Shows "clear all". */
+  onClear?: () => void;
+  /**
+   * Replaces the built-in inline confirmation of "clear all" (e.g. an app dialog):
+   * resolve `true` to clear.
+   */
+  confirmClear?: () => boolean | Promise<boolean>;
+  labels?: Partial<ChatLabels>;
+  locale?: string;
+  formatDate?: (createdAt: Date) => string;
+  className?: string;
+}
+
+const textButton = clsx(
+  "inline-flex h-10 items-center rounded-full px-3 text-label-large",
+  "transition-colors duration-200 ease-standard",
+  focusRing,
+);
+
+export function MemoryPanel({
+  memories,
+  loading = false,
+  onDelete,
+  onClear,
+  confirmClear,
+  labels,
+  locale,
+  formatDate,
+  className,
+}: MemoryPanelProps) {
+  const l = resolveChatLabels(labels);
+  const [confirming, setConfirming] = useState(false);
+  const dateFormat = useMemo(
+    () => new Intl.DateTimeFormat(locale, { dateStyle: "medium" }),
+    [locale],
+  );
+  const format = (value: string | number | Date) => {
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) return "";
+    return formatDate ? formatDate(date) : dateFormat.format(date);
+  };
+
+  const requestClear = async () => {
+    if (!onClear) return;
+    if (confirmClear) {
+      if (await confirmClear()) onClear();
+      return;
+    }
+    setConfirming(true);
+  };
+
+  return (
+    <section
+      aria-label={l.memory}
+      aria-busy={loading || undefined}
+      className={clsx(
+        "m3-memory-panel flex min-h-0 flex-col gap-2 rounded-large bg-surface-container-low py-3 text-on-surface",
+        className,
+      )}
+    >
+      <header className="flex items-center justify-between gap-2 px-4">
+        <h2 className="m-0 text-title-medium">{l.memory}</h2>
+        {onClear && memories.length > 0 && !confirming ? (
+          <button
+            type="button"
+            onClick={() => void requestClear()}
+            className={clsx(textButton, "text-error hover:bg-error/8")}
+          >
+            {l.clearMemory}
+          </button>
+        ) : null}
+      </header>
+      {confirming ? (
+        <div
+          role="alertdialog"
+          aria-label={l.clearMemory}
+          className="mx-4 flex flex-col gap-2 rounded-medium bg-error-container px-4 py-3 text-on-error-container"
+        >
+          <p className="m-0 text-body-medium">{l.clearMemoryConfirm}</p>
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setConfirming(false)}
+              className={clsx(textButton, "hover:bg-on-error-container/8")}
+            >
+              {l.cancel}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setConfirming(false);
+                onClear?.();
+              }}
+              className={clsx(textButton, "bg-error px-4 text-on-error hover:bg-error/92")}
+            >
+              {l.confirm}
+            </button>
+          </div>
+        </div>
+      ) : null}
+      {loading ? (
+        <div className="flex justify-center py-6">
+          <CircularIndicator size={24} label={l.memoryLoading} />
+        </div>
+      ) : memories.length === 0 ? (
+        <p className="m-0 px-4 py-6 text-center text-body-medium text-on-surface-variant">
+          {l.memoryEmpty}
+        </p>
+      ) : (
+        <ul className="m-0 flex min-h-0 list-none flex-col overflow-y-auto p-0">
+          {memories.map((memory) => (
+            <li
+              key={memory.id}
+              className="group flex items-start gap-3 px-4 py-2 transition-colors duration-200 ease-standard hover:bg-on-surface/8"
+            >
+              <div className="min-w-0 flex-1">
+                <p className="m-0 text-body-medium break-words whitespace-pre-wrap text-on-surface">
+                  {memory.content}
+                </p>
+                <div className="mt-1 flex flex-wrap items-center gap-1.5">
+                  <time className="text-label-small text-on-surface-variant">
+                    {format(memory.createdAt)}
+                  </time>
+                  {memory.tags?.map((tag) => (
+                    <span
+                      key={tag}
+                      className="inline-flex h-6 items-center rounded-small border border-outline-variant px-2 text-label-small text-on-surface-variant"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              {onDelete ? (
+                <CircleButton
+                  icon={<ChatIcon name="delete" size={18} />}
+                  variant="standard"
+                  size="sm"
+                  onClick={() => onDelete(memory.id)}
+                  aria-label={l.deleteMemory}
+                  title={l.deleteMemory}
+                />
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/MessageBubble.tsx

@@ -6,7 +6,10 @@
 import { CircleButton } from "@aphrody/m3-primitives";
 import { clsx } from "clsx";
 
-import { Markdown } from "./Markdown";
+import { type ChatLabels, resolveChatLabels } from "./chatLabels";
+import { type Citation, CitationList, CitedMarkdown, RefusalNotice } from "./citations";
+import { ChatIcon } from "./chatIcons";
+import { Markdown, type MarkdownLinkHandler } from "./Markdown";
 
 export interface MessageBubbleProps {
   content: string;
@@ -17,6 +20,15 @@ export interface MessageBubbleProps {
   onFork?: () => void;
   variant?: "default" | "codex";
   className?: string;
+  /** Visible strings (aria-labels, titles); English defaults. */
+  labels?: Partial<ChatLabels>;
+  /** Grounded answer: `[n]` markers become citation chips and the sources are listed below. */
+  citations?: readonly Citation[];
+  /** The backend refused to answer: a refusal notice replaces an empty answer. */
+  refusal?: boolean;
+  onCitationSelect?: (citation: Citation) => void;
+  /** Link activation in the answer (e.g. open the system browser from Tauri). */
+  onLinkClick?: MarkdownLinkHandler;
 }
 
 /**
@@ -32,12 +44,23 @@ export function MessageBubble({
   onFork,
   variant = "default",
   className,
+  labels,
+  citations,
+  refusal = false,
+  onCitationSelect,
+  onLinkClick,
 }: MessageBubbleProps) {
   const isCodex = variant === "codex";
+  const l = resolveChatLabels(labels);
+  const cited = !isUser && citations && citations.length > 0 ? citations : null;
 
   return (
     <div
-      className={clsx("group flex flex-col py-1.5 w-full", isUser ? "items-end" : "items-start", className)}
+      className={clsx(
+        "group flex flex-col py-1.5 w-full",
+        isUser ? "items-end" : "items-start",
+        className,
+      )}
     >
       <div
         className={clsx(
@@ -53,39 +76,64 @@ export function MessageBubble({
         {isUser ? (
           <div className="whitespace-pre-wrap break-words">{content}</div>
         ) : (
-          <Markdown content={content} size="large" className="break-words font-sans" />
+          <>
+            {refusal && !content.trim() ? (
+              <RefusalNotice labels={labels} />
+            ) : cited ? (
+              <CitedMarkdown
+                content={content}
+                citations={cited}
+                labels={labels}
+                onCitationSelect={onCitationSelect}
+                onLinkClick={onLinkClick}
+                className="break-words font-sans"
+              />
+            ) : (
+              <Markdown
+                content={content}
+                size="large"
+                labels={labels}
+                onLinkClick={onLinkClick}
+                className="break-words font-sans"
+              />
+            )}
+            {refusal && content.trim() ? <RefusalNotice labels={labels} className="mt-2" /> : null}
+            {cited && !isStreaming ? (
+              <CitationList citations={cited} labels={labels} onSelect={onCitationSelect} />
+            ) : null}
+          </>
         )}
       </div>
       {!isUser && (onCopy || onDislike || onFork) ? (
         <div className="mt-1.5 flex items-center gap-1 opacity-0 transition-opacity duration-200 ease-standard group-focus-within:opacity-100 group-hover:opacity-100">
           {onCopy && (
             <CircleButton
-              icon="content_copy"
+              icon={<ChatIcon name="content_copy" size={18} />}
               variant="standard"
               size="sm"
               onClick={() => onCopy(content)}
-              aria-label={isStreaming ? "Copy Streaming Message" : "Copy Message"}
-              title={isStreaming ? "Copy streaming message" : "Copier"}
+              aria-label={isStreaming ? l.copyStreamingMessage : l.copyMessage}
+              title={isStreaming ? l.copyStreamingMessage : l.copyMessage}
             />
           )}
           {onDislike && (
             <CircleButton
-              icon="thumb_down"
+              icon={<ChatIcon name="thumb_down" size={18} />}
               variant="standard"
               size="sm"
               onClick={() => onDislike(content)}
-              aria-label="Dislike"
-              title="Je n'aime pas"
+              aria-label={l.dislike}
+              title={l.dislike}
             />
           )}
           {onFork && (
             <CircleButton
-              icon="call_split"
+              icon={<ChatIcon name="call_split" size={18} />}
               variant="standard"
               size="sm"
               onClick={onFork}
-              aria-label="Fork"
-              title="Bifurquer à partir de ce tour"
+              aria-label={l.fork}
+              title={l.fork}
             />
           )}
         </div>

package/src/ModelSelector.tsx

@@ -3,16 +3,12 @@
 
 "use client";
 
-import {
-  Icon,
-  Popover,
-  usePopover,
-  SelectPill,
-  type SelectPillProps,
-} from "@aphrody/m3-primitives";
+import { Popover, usePopover, SelectPill, type SelectPillProps } from "@aphrody/m3-primitives";
 import { clsx } from "clsx";
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 
+import { type ChatLabels, formatLabel, resolveChatLabels } from "./chatLabels";
+import { ChatIcon } from "./chatIcons";
 import { focusRing } from "./internal";
 import type { ModelOption } from "./types";
 
@@ -37,6 +33,8 @@ export interface ModelSelectorProps {
   className?: string;
   /** Disabled state */
   disabled?: boolean;
+  /** Visible strings; `placeholder` / `searchPlaceholder` win over them. English defaults. */
+  labels?: Partial<ChatLabels>;
 }
 
 /** Group models by provider, keeping the order of first appearance. */
@@ -67,6 +65,7 @@ export interface ModelOptionListProps {
   /** Called when a model is picked */
   onSelect: (value: string) => void;
   className?: string;
+  labels?: Partial<ChatLabels>;
 }
 
 /**
@@ -74,7 +73,14 @@ export interface ModelOptionListProps {
  * 48 dp two-line items (`text-label-large` + `text-body-small` supporting text), the selected
  * item on `secondary-container`, capabilities as small outlined chips.
  */
-export function ModelOptionList({ grouped, value, onSelect, className }: ModelOptionListProps) {
+export function ModelOptionList({
+  grouped,
+  value,
+  onSelect,
+  className,
+  labels,
+}: ModelOptionListProps) {
+  const l = resolveChatLabels(labels);
   const providers = Object.entries(grouped);
   const models = providers.flatMap(([, providerModels]) => providerModels);
   const [focusedId, setFocusedId] = useState(value);
@@ -85,7 +91,7 @@ export function ModelOptionList({ grouped, value, onSelect, className }: ModelOp
     <div
       // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- M3 menu whose options are rich rows (headers, supporting text, chips); a native <select>/<datalist> cannot render them.
       role="listbox"
-      aria-label="Models"
+      aria-label={l.models}
       tabIndex={-1}
       onKeyDown={(event) => {
         if (event.defaultPrevented) return;
@@ -158,7 +164,9 @@ export function ModelOptionList({ grouped, value, onSelect, className }: ModelOp
                             selected ? "text-on-secondary-container" : "text-on-surface-variant",
                           )}
                         >
-                          {model.context_window.toLocaleString()} tokens
+                          {formatLabel(l.contextTokens, {
+                            count: model.context_window.toLocaleString(),
+                          })}
                         </span>
                       ) : null}
                       {model.capabilities?.map((capability) => (
@@ -175,7 +183,7 @@ export function ModelOptionList({ grouped, value, onSelect, className }: ModelOp
                     </div>
                   ) : null}
                 </div>
-                {selected && <Icon name="check" size={20} className="shrink-0" />}
+                {selected && <ChatIcon name="check" size={20} />}
               </button>
             );
           })}
@@ -183,7 +191,7 @@ export function ModelOptionList({ grouped, value, onSelect, className }: ModelOp
       ))}
       {providers.length === 0 && (
         <div className="px-3 py-3 text-center text-body-small text-on-surface-variant">
-          No models found
+          {l.noModels}
         </div>
       )}
     </div>
@@ -212,7 +220,7 @@ function ModelSearchField({
   return (
     <div className="px-2 pb-2">
       <label className="flex h-10 items-center gap-2 rounded-full bg-surface-container-high px-3 text-on-surface-variant focus-within:bg-surface-container-highest">
-        <Icon name="search" size={20} className="shrink-0" />
+        <ChatIcon name="search" size={20} />
         <input
           ref={inputRef}
           value={value}
@@ -232,16 +240,18 @@ export const ModelSelector = forwardRef<HTMLButtonElement, ModelSelectorProps>(
       models,
       value,
       onChange,
-      placeholder = "Select model...",
-      searchPlaceholder = "Search models...",
+      placeholder,
+      searchPlaceholder,
       variant,
       size,
       popover: externalPopover,
       className,
       disabled,
+      labels,
     },
     ref,
   ) => {
+    const l = resolveChatLabels(labels);
     const internalPopover = usePopover();
     const popover = externalPopover ?? internalPopover;
     const [search, setSearch] = useState("");
@@ -265,9 +275,13 @@ export const ModelSelector = forwardRef<HTMLButtonElement, ModelSelectorProps>(
             size={size}
             disabled={disabled}
             aria-haspopup="listbox"
+            hideCaret
             className={clsx("w-full", className)}
           >
-            {selectedModel?.name ?? placeholder}
+            <span className="min-w-0 flex-1 truncate">
+              {selectedModel?.name ?? placeholder ?? l.selectModel}
+            </span>
+            <ChatIcon name="expand_more" size={18} />
           </SelectPill>
         </Popover.Trigger>
         <Popover.Content
@@ -277,13 +291,18 @@ export const ModelSelector = forwardRef<HTMLButtonElement, ModelSelectorProps>(
           className="overflow-hidden rounded-extra-small! py-2"
         >
           {/* Search */}
-          <ModelSearchField value={search} onChange={setSearch} placeholder={searchPlaceholder} />
+          <ModelSearchField
+            value={search}
+            onChange={setSearch}
+            placeholder={searchPlaceholder ?? l.searchModels}
+          />
 
           {/* Grouped results */}
           <div className="max-h-[320px] overflow-y-auto">
             <ModelOptionList
               grouped={grouped}
               value={value}
+              labels={labels}
               onSelect={(id) => {
                 onChange(id);
                 popover.setOpen(false);