@hgdc/ui 0.30.0 → 0.31.0

package/README.md

@@ -109,6 +109,7 @@ Sur ordinateur, la coque ouvre sur la barre des produits (ADR 0011) : organisati
 | `rank-bar`       | `<RankBar label="Pages les plus vues" items={[{ key, label: "/tarifs", value: 640, render: <Link … /> }]} limit={5} />`                                                                                                                                                                                                                                                                                                                                 |
 | `secret-reveal`  | `<SecretReveal label="Clé d'API" value={key} onDismiss={forget} />` : affichée une fois, puis retirée de la page                                                                                                                                                                                                                                                                                                                                        |
 | `assistant-chat` | `<AssistantConversation><AssistantUserMessage>…</AssistantUserMessage><AssistantReply tools={chips} waiting={pending} actions={<AssistantActionCard title=… status="pending" onConfirm={…} onCancel={…} />}><Markdown>{text}</Markdown></AssistantReply></AssistantConversation>`, `<AssistantComposer value={v} onValueChange={setV} onSubmit={send} busy={busy} />`, `<AssistantExamples examples={…} onPick={setV} />` : le produit rend le Markdown |
+| `assistant-view` | `<AssistantView status={status} threads={threads} threadId={id} onThreadChange={setId} thread={thread} renderText={(t) => <Markdown>{t}</Markdown>} onSend={send} onConfirm={confirm} onCancel={cancel} />` : le panneau complet pour `AppShell` (`assistant.panel`), aux formes de `@hgdc/assistant/convex` ; `subject` (page ouverte), `request` (demande venue de la page), `labels` (vouvoiement)                                                   |
 | `family-loader`  | `<FamilyLoaderRoot>{children}</FamilyLoaderRoot>` une fois dans le `body` de la route racine : le seul H d'un chargement de page, fixe sur la zone de contenu de la coque, rendu par le serveur, calé sur l'horloge (même pixel et même phase d'une page et d'un produit à l'autre, ADR 0015). `<FamilyLoader size="lg" />` : le H en ligne (une boucle de 2 s, `transform` et `opacity`). Dans un bouton : `Spinner`                                   |
 | `page-pending`   | `createRouter({ routeTree, ...routerPendingDefaults })` (préchargement au survol, chargement après 50 ms, au moins 300 ms) ; `AppShell {...useRouterState({ select: shellNavigation, structuralSharing: true })}` : la zone de contenu se couvre dès qu'une navigation attend, la coque reste ; `PagePending` : marque la place d'une page qui attend, le H du document s'affiche                                                                       |
 | `skeleton`       | `<Pending pending={isLoading} fallback={<TableSkeleton columns={3} />}>…</Pending>` : après 200 ms, tenu 400 ms au moins                                                                                                                                                                                                                                                                                                                                |

package/dist/assistant-chat.d.ts

@@ -35,7 +35,7 @@ export declare function AssistantReply({ tools, waiting, waitingLabel, error, ac
  * Une écriture proposée par l'assistant, qui n'a lieu qu'au clic sur « Confirmer ». Une fois
  * traitée, la carte garde son état (fait, annulé, échec et sa raison).
  */
-export declare function AssistantActionCard({ title, details, status, result, onConfirm, onCancel, confirming, cancelling, confirmLabel, cancelLabel, }: {
+export declare function AssistantActionCard({ title, details, status, result, onConfirm, onCancel, confirming, cancelling, confirmLabel, cancelLabel, pendingLabel, }: {
     title: ReactNode;
     details?: ReadonlyArray<{
         label: string;
@@ -50,6 +50,8 @@ export declare function AssistantActionCard({ title, details, status, result, on
     cancelling?: boolean;
     confirmLabel?: string;
     cancelLabel?: string;
+    /** Au-dessus du titre tant que la carte attend. */
+    pendingLabel?: string;
 }): React.JSX.Element;
 /** Des demandes d'exemple, pour une conversation vide : un clic remplit la saisie. */
 export declare function AssistantExamples({ examples, onPick, disabled, label, }: {

package/dist/assistant-chat.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Alert02Icon from "@hugeicons/core-free-icons/Alert02Icon";
 import ArrowUp02Icon from "@hugeicons/core-free-icons/ArrowUp02Icon";
 import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
 import CheckmarkCircle02Icon from "@hugeicons/core-free-icons/CheckmarkCircle02Icon";
@@ -22,7 +23,7 @@ export function AssistantUserMessage({ children }) {
 export function AssistantToolChips({ tools, label = "Ce que l'assistant a consulté", }) {
     if (!tools.length)
         return null;
-    return (_jsx("ul", { className: "flex flex-wrap gap-1.5", "aria-label": label, children: tools.map((tool) => (_jsx("li", { children: _jsxs(Badge, { tone: tool.status === "error" ? "destructive" : "neutral", children: [tool.status === "running" ? _jsx(Spinner, { size: 3 }) : null, tool.label] }) }, tool.id))) }));
+    return (_jsx("ul", { className: "flex flex-wrap gap-1.5", "aria-label": label, children: tools.map((tool) => (_jsx("li", { children: _jsxs(Badge, { tone: tool.status === "error" ? "destructive" : "neutral", "data-status": tool.status, children: [tool.status === "running" ? (_jsx(Spinner, { size: 3 })) : (_jsx(HugeiconsIcon, { icon: tool.status === "done" ? CheckmarkCircle02Icon : Alert02Icon, "aria-hidden": true, className: cn("size-3.5", tool.status === "done" && "text-success") })), tool.label, tool.status === "error" ? _jsx("span", { className: "sr-only", children: " (\u00E9chec)" }) : null] }) }, tool.id))) }));
 }
 /**
  * Une réponse : pastilles, puis le texte rendu par le produit (`children`), puis les cartes.
@@ -40,9 +41,9 @@ const ACTION_BADGE = {
  * Une écriture proposée par l'assistant, qui n'a lieu qu'au clic sur « Confirmer ». Une fois
  * traitée, la carte garde son état (fait, annulé, échec et sa raison).
  */
-export function AssistantActionCard({ title, details = [], status, result, onConfirm, onCancel, confirming = false, cancelling = false, confirmLabel = "Confirmer", cancelLabel = "Annuler", }) {
+export function AssistantActionCard({ title, details = [], status, result, onConfirm, onCancel, confirming = false, cancelling = false, confirmLabel = "Confirmer", cancelLabel = "Annuler", pendingLabel = "À confirmer", }) {
     const badge = status === "pending" ? null : ACTION_BADGE[status];
-    return (_jsxs(Card, { "data-slot": "assistant-action-card", className: "max-w-xl", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: title }) }), details.length ? (_jsx(CardContent, { children: _jsx("dl", { className: "grid gap-2 text-sm", children: details.map((row) => (_jsxs("div", { className: "grid gap-0.5", children: [_jsx("dt", { className: "text-muted-foreground", children: row.label }), _jsx("dd", { className: "break-words whitespace-pre-wrap", children: row.value })] }, row.label))) }) })) : null, _jsx(CardFooter, { className: "justify-start", children: badge ? (_jsx(Badge, { tone: badge.tone, children: status === "failed" && result ? `${badge.label} : ${result}` : badge.label })) : (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", isLoading: confirming, disabled: cancelling, onClick: onConfirm, children: [_jsx(HugeiconsIcon, { icon: CheckmarkCircle02Icon, "data-icon": "inline-start" }), confirmLabel] }), _jsxs(Button, { size: "sm", variant: "ghost", isLoading: cancelling, disabled: confirming, onClick: onCancel, children: [_jsx(HugeiconsIcon, { icon: Cancel01Icon, "data-icon": "inline-start" }), cancelLabel] })] })) })] }));
+    return (_jsxs(Card, { "data-slot": "assistant-action-card", "data-status": status, className: "max-w-xl card-in rounded-2xl motion-reduce:animate-none", children: [_jsxs(CardHeader, { className: "gap-0.5 px-4 pt-3.5 sm:px-4 sm:pt-3.5", children: [status === "pending" ? _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: pendingLabel }) : null, _jsx(CardTitle, { className: "text-[0.9375rem] leading-snug", children: title })] }), details.length ? (_jsx(CardContent, { className: "px-4 py-3 sm:px-4 sm:py-3 [[data-slot=card-header]+&]:pt-2", children: _jsx("dl", { className: "grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-4 gap-y-1 text-sm", children: details.map((row) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-muted-foreground", children: row.label }), _jsx("dd", { className: "break-words whitespace-pre-wrap", children: row.value })] }, row.label))) }) })) : (_jsx("div", { "aria-hidden": true, className: "h-3" })), _jsx(CardFooter, { className: "justify-start px-4 py-2.5 sm:px-4", children: badge ? (_jsx(Badge, { tone: badge.tone, children: status === "failed" && result ? `${badge.label} : ${result}` : badge.label })) : (_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs(Button, { size: "sm", isLoading: confirming, disabled: cancelling, onClick: onConfirm, children: [_jsx(HugeiconsIcon, { icon: CheckmarkCircle02Icon, "data-icon": "inline-start" }), confirmLabel] }), _jsxs(Button, { size: "sm", variant: "ghost", isLoading: cancelling, disabled: confirming, onClick: onCancel, children: [_jsx(HugeiconsIcon, { icon: Cancel01Icon, "data-icon": "inline-start" }), cancelLabel] })] })) })] }));
 }
 /** Des demandes d'exemple, pour une conversation vide : un clic remplit la saisie. */
 export function AssistantExamples({ examples, onPick, disabled = false, label = "Par exemple :", }) {

package/dist/assistant-view.d.ts

@@ -0,0 +1,157 @@
+import { type IconSvgElement } from "@hugeicons/react";
+import { type ReactNode } from "react";
+import { type AssistantActionStatus, type AssistantTool } from "./assistant-chat.tsx";
+/** État de l'assistant pour l'organisation (`readStatus`). */
+export type AssistantStatus = {
+    ready: boolean;
+    ownKey: {
+        hint: string;
+    } | null;
+    credits: {
+        used: number;
+        limit: number;
+    };
+};
+export type AssistantThreadSummary = {
+    _id: string;
+    title: string;
+    updatedAt: number;
+};
+export type AssistantMessageStatus = "pending" | "streaming" | "done" | "error";
+export type AssistantMessage = {
+    _id: string;
+    role: "user" | "assistant";
+    text: string;
+    status: AssistantMessageStatus;
+    tools: ReadonlyArray<AssistantTool>;
+};
+export type AssistantAction = {
+    _id: string;
+    messageId: string;
+    summary: string;
+    details?: ReadonlyArray<{
+        label: string;
+        value: string;
+    }>;
+    status: AssistantActionStatus;
+    result?: string | null;
+};
+/** Une conversation ouverte (`readThread`). */
+export type AssistantThread = {
+    /** L'historique a atteint sa taille maximale : une nouvelle conversation s'impose. */
+    full?: boolean;
+    messages: ReadonlyArray<AssistantMessage>;
+    actions: ReadonlyArray<AssistantAction>;
+};
+/** La page ouverte, que l'assistant prend comme sujet tant que la personne ne la retire pas. */
+export type AssistantSubject = {
+    /** « Campagne « Octobre » », « Déploiement abc123 ». */
+    label: string;
+    icon?: IconSvgElement;
+    attached: boolean;
+    onAttachedChange: (attached: boolean) => void;
+    /** Bouton pour la rattacher : « Parler de ce déploiement ». */
+    attachLabel: string;
+};
+/** Une demande venue d'un bouton de la page (« Écrire avec l'assistant ») : part une seule fois par `nonce`. */
+export type AssistantRequest = {
+    prompt?: string;
+    nonce: number;
+};
+export type AssistantLabels = {
+    welcomeTitle: string;
+    welcomeDescription: string;
+    notReadyTitle: string;
+    notReadyDescription: string;
+    exhaustedTitle: string;
+    exhaustedDescription: string;
+    placeholder: string;
+    placeholderBusy: string;
+    composerLabel: string;
+    history: string;
+    noHistory: string;
+    newThread: string;
+    deleteThread: string;
+    deleteConfirm: string;
+    deleteYes: string;
+    deleteNo: string;
+    loadError: string;
+    full: string;
+    sendError: string;
+    creditsLeft: (remaining: number) => string;
+    ownKey: (hint: string) => string;
+    notReadyShort: string;
+    detach: string;
+};
+/** Tutoiement de la console ; un produit qui vouvoie (clients de Portal) remplace ce qu'il faut. */
+export declare const ASSISTANT_LABELS: AssistantLabels;
+/** Le message d'une erreur Convex (`ConvexError` avec un texte) ; sinon `fallback`. */
+export declare function assistantErrorText(error: unknown, fallback: string): string;
+/**
+ * Un lien écrit par l'assistant. Un chemin de l'application (`/…`) reste un lien interne ; une
+ * adresse `https:` s'ouvre dans un nouvel onglet, sans référent ni accès à la page, avec son domaine
+ * affiché à côté du texte (un texte trompeur ne cache pas la destination) ; tout le reste
+ * (`javascript:`, `http:`, `data:`…) devient du texte. À passer au rendu Markdown du produit
+ * (`components={{ a: AssistantLink }}`) ; `renderInternal` pour le lien du routeur.
+ */
+export declare function AssistantLink({ href, children, renderInternal, }: {
+    href?: string | undefined;
+    children?: ReactNode;
+    renderInternal?: (href: string, children: ReactNode) => ReactNode;
+}): React.JSX.Element;
+/** Le rendu par défaut : texte brut en paragraphes, adresses https en liens sûrs. Aucun HTML. */
+export declare function renderPlainText(text: string): ReactNode;
+/** La ligne sous la barre : crédits restants, ou la clé de l'organisation. */
+export declare function AssistantCredits({ status, labels, }: {
+    status: AssistantStatus | undefined;
+    labels?: Pick<AssistantLabels, "creditsLeft" | "ownKey" | "notReadyShort">;
+}): React.JSX.Element;
+/** Les conversations précédentes et « Nouvelle conversation ». */
+export declare function AssistantHistory({ threads, threadId, onThreadChange, now, labels, }: {
+    threads: ReadonlyArray<AssistantThreadSummary> | undefined;
+    threadId: string | null;
+    onThreadChange: (threadId: string | null) => void;
+    now?: number;
+    labels?: Pick<AssistantLabels, "history" | "noHistory" | "newThread">;
+}): React.JSX.Element;
+/** La page ouverte en pastille au-dessus de la saisie, ou le lien pour la rattacher. */
+export declare function AssistantSubjectChip({ subject, labels, }: {
+    subject: AssistantSubject;
+    labels?: Pick<AssistantLabels, "detach">;
+}): React.JSX.Element;
+export type AssistantViewProps = {
+    /** `undefined` pendant le chargement. */
+    status: AssistantStatus | undefined;
+    threads: ReadonlyArray<AssistantThreadSummary> | undefined;
+    /** Conversation ouverte ; `null` : une nouvelle. */
+    threadId: string | null;
+    onThreadChange: (threadId: string | null) => void;
+    /** La conversation ouverte ; `undefined` pendant son chargement, `null` si elle ne se lit pas. */
+    thread: AssistantThread | null | undefined;
+    /**
+     * Le texte d'une réponse, rendu par le produit (Markdown avec `AssistantLink` pour les liens,
+     * sans image). Par défaut : texte brut, paragraphes, adresses https en liens sûrs.
+     */
+    renderText?: (text: string) => ReactNode;
+    /** Envoie la demande ; une erreur remet le texte dans la saisie et s'affiche au-dessus. */
+    onSend: (text: string) => Promise<void>;
+    onConfirm: (actionId: string) => Promise<void>;
+    onCancel: (actionId: string) => Promise<void>;
+    onDeleteThread?: (threadId: string) => Promise<void>;
+    examples?: ReadonlyArray<string>;
+    /** Remplace le titre et le texte d'accueil (une page ouverte appelle un autre accueil). */
+    welcome?: {
+        title?: string;
+        description?: ReactNode;
+    };
+    /** Sous l'état « non branché » ou « crédits épuisés » : un lien vers les réglages, pour un admin. */
+    setup?: ReactNode;
+    subject?: AssistantSubject | null;
+    request?: AssistantRequest | null;
+    labels?: Partial<AssistantLabels>;
+    /** Instant de référence des dates relatives (tests, captures). */
+    now?: number;
+    className?: string;
+};
+/** Le panneau de l'assistant, prêt pour la colonne de `AppShell`. */
+export declare function AssistantView({ status, threads, threadId, onThreadChange, thread, renderText, onSend, onConfirm, onCancel, onDeleteThread, examples, welcome, setup, subject, request, labels: overrides, now, className, }: AssistantViewProps): React.JSX.Element;

package/dist/assistant-view.js

@@ -0,0 +1,232 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Add01Icon from "@hugeicons/core-free-icons/Add01Icon";
+import AiMagicIcon from "@hugeicons/core-free-icons/AiMagicIcon";
+import Alert02Icon from "@hugeicons/core-free-icons/Alert02Icon";
+import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
+import Clock01Icon from "@hugeicons/core-free-icons/Clock01Icon";
+import Delete02Icon from "@hugeicons/core-free-icons/Delete02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { AssistantActionCard, AssistantComposer, AssistantConversation, AssistantExamples, AssistantReply, AssistantUserMessage, } from "./assistant-chat.js";
+import { Button } from "./button.js";
+import { cn } from "./cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { formatRelative } from "./relative-time.js";
+import { Spinner } from "./spinner.js";
+/** Tutoiement de la console ; un produit qui vouvoie (clients de Portal) remplace ce qu'il faut. */
+export const ASSISTANT_LABELS = {
+    welcomeTitle: "Qu'est-ce que je fais pour toi ?",
+    welcomeDescription: "Je lis ce que tu vois dans l'application et je t'aide à t'y retrouver. Je te demande toujours avant de modifier ou d'envoyer quoi que ce soit.",
+    notReadyTitle: "L'assistant n'est pas encore branché",
+    notReadyDescription: "Il manque une clé pour le modèle. Un administrateur peut l'ajouter dans les réglages.",
+    exhaustedTitle: "Les crédits du mois sont utilisés",
+    exhaustedDescription: "Le compteur repart le 1er du mois. Un administrateur peut aussi ajouter la clé de l'organisation dans les réglages.",
+    placeholder: "Demande-moi quelque chose",
+    placeholderBusy: "L'assistant répond…",
+    composerLabel: "Message pour l'assistant",
+    history: "Conversations précédentes",
+    noHistory: "Aucune conversation pour l'instant",
+    newThread: "Nouvelle conversation",
+    deleteThread: "Effacer cette conversation",
+    deleteConfirm: "Effacer pour de bon ?",
+    deleteYes: "Effacer",
+    deleteNo: "Garder",
+    loadError: "Cette conversation ne s'affiche pas. Réessaie dans un instant.",
+    full: "Cette conversation est pleine. Ouvre une nouvelle conversation pour continuer.",
+    sendError: "Le message n'est pas parti. Réessaie dans un instant.",
+    creditsLeft: (remaining) => remaining <= 0
+        ? "Plus de crédits ce mois-ci"
+        : `${remaining} crédit${remaining > 1 ? "s" : ""} restant${remaining > 1 ? "s" : ""} ce mois-ci`,
+    ownKey: (hint) => `Clé de l'organisation ••••${hint}`,
+    notReadyShort: "Pas encore branché",
+    detach: "Ne plus parler de cette page",
+};
+/** Le message d'une erreur Convex (`ConvexError` avec un texte) ; sinon `fallback`. */
+export function assistantErrorText(error, fallback) {
+    if (typeof error === "object" && error !== null && "data" in error) {
+        const data = error.data;
+        if (typeof data === "string" && data.trim())
+            return data;
+        if (typeof data === "object" && data !== null && "message" in data) {
+            const message = data.message;
+            if (typeof message === "string" && message.trim())
+                return message;
+        }
+    }
+    return fallback;
+}
+/**
+ * Un lien écrit par l'assistant. Un chemin de l'application (`/…`) reste un lien interne ; une
+ * adresse `https:` s'ouvre dans un nouvel onglet, sans référent ni accès à la page, avec son domaine
+ * affiché à côté du texte (un texte trompeur ne cache pas la destination) ; tout le reste
+ * (`javascript:`, `http:`, `data:`…) devient du texte. À passer au rendu Markdown du produit
+ * (`components={{ a: AssistantLink }}`) ; `renderInternal` pour le lien du routeur.
+ */
+export function AssistantLink({ href, children, renderInternal, }) {
+    const value = (href ?? "").trim();
+    const className = "font-medium underline underline-offset-2";
+    if (value.startsWith("/") && !value.startsWith("//") && !value.startsWith("/\\")) {
+        return renderInternal ? (_jsx(_Fragment, { children: renderInternal(value, children) })) : (_jsx("a", { href: value, className: className, children: children }));
+    }
+    let url = null;
+    try {
+        url = new URL(value);
+    }
+    catch {
+        url = null;
+    }
+    if (!url || url.protocol !== "https:" || url.username || url.password)
+        return _jsx("span", { children: children });
+    return (_jsxs("a", { href: url.href, target: "_blank", rel: "noopener noreferrer nofollow", className: className, children: [children, _jsxs("span", { className: "ml-1 text-xs font-normal text-muted-foreground no-underline", children: ["(", url.hostname, ")"] })] }));
+}
+const URL_IN_TEXT = /(https:\/\/[^\s<>"')]+)/g;
+/** Le rendu par défaut : texte brut en paragraphes, adresses https en liens sûrs. Aucun HTML. */
+export function renderPlainText(text) {
+    return text.split(/\n{2,}/).map((paragraph, i) => (_jsx("p", { className: "my-2 whitespace-pre-wrap first:mt-0 last:mb-0", children: paragraph.split(URL_IN_TEXT).map((part, j) => j % 2 === 1 ? (_jsx(AssistantLink, { href: part, children: part }, j)) : (part)) }, i)));
+}
+function remainingCredits(status) {
+    return Math.max(0, Math.floor(status.credits.limit - status.credits.used));
+}
+/** La ligne sous la barre : crédits restants, ou la clé de l'organisation. */
+export function AssistantCredits({ status, labels = ASSISTANT_LABELS, }) {
+    return (_jsx("p", { "data-slot": "assistant-credits", className: "min-w-0 truncate text-xs text-muted-foreground", "aria-live": "polite", children: status === undefined
+            ? " "
+            : status.ownKey
+                ? labels.ownKey(status.ownKey.hint)
+                : !status.ready
+                    ? labels.notReadyShort
+                    : labels.creditsLeft(remainingCredits(status)) }));
+}
+/** Les conversations précédentes et « Nouvelle conversation ». */
+export function AssistantHistory({ threads, threadId, onThreadChange, now, labels = ASSISTANT_LABELS, }) {
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": labels.history, title: labels.history, disabled: !threads?.length }), children: _jsx(HugeiconsIcon, { icon: Clock01Icon, "aria-hidden": true }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-72 max-w-[calc(100vw-2rem)]", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: labels.history }), threads?.length ? (threads.map((thread) => (_jsxs(DropdownMenuItem, { onClick: () => onThreadChange(thread._id), "aria-current": thread._id === threadId ? "true" : undefined, className: "aria-[current]:font-medium", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: thread.title }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatRelative(thread.updatedAt, now) })] }, thread._id)))) : (_jsx("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: labels.noHistory }))] }) })] }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": labels.newThread, title: labels.newThread, disabled: threadId === null, onClick: () => onThreadChange(null), children: _jsx(HugeiconsIcon, { icon: Add01Icon, "aria-hidden": true }) })] }));
+}
+/** Un état sans conversation : accueil, non branché, crédits épuisés. */
+function AssistantState({ title, description, tone = "neutral", children, }) {
+    return (_jsxs("div", { "data-slot": "assistant-state", className: "grid gap-4 py-4", children: [_jsx("span", { "aria-hidden": true, className: cn("grid size-10 place-items-center rounded-2xl", tone === "warning" ? "bg-status-paused/15 text-status-paused-ink" : "bg-muted text-foreground"), children: _jsx(HugeiconsIcon, { icon: tone === "warning" ? Alert02Icon : AiMagicIcon, strokeWidth: 1.8, className: "size-5" }) }), _jsxs("div", { className: "grid gap-1.5", children: [_jsx("p", { className: "font-heading text-lg leading-snug font-semibold text-balance", children: title }), _jsx("div", { className: "text-sm text-pretty text-muted-foreground", children: description })] }), children] }));
+}
+/** La page ouverte en pastille au-dessus de la saisie, ou le lien pour la rattacher. */
+export function AssistantSubjectChip({ subject, labels = ASSISTANT_LABELS, }) {
+    if (!subject.attached) {
+        return (_jsx("button", { type: "button", onClick: () => subject.onAttachedChange(true), className: "touch-target w-fit rounded-lg text-xs text-muted-foreground underline-offset-2 outline-none hover:text-foreground hover:underline focus-visible:ring-2 focus-visible:ring-ring/50", children: subject.attachLabel }));
+    }
+    return (_jsxs("span", { "data-slot": "assistant-subject", className: "flex w-fit max-w-full min-w-0 soft-in items-center gap-1.5 rounded-full bg-muted py-1 pr-1 pl-2.5 text-xs font-medium motion-reduce:animate-none", children: [subject.icon ? _jsx(HugeiconsIcon, { icon: subject.icon, "aria-hidden": true, className: "size-3.5 shrink-0" }) : null, _jsx("span", { className: "truncate", children: subject.label }), _jsx("button", { type: "button", "aria-label": labels.detach, title: labels.detach, onClick: () => subject.onAttachedChange(false), className: "grid size-6 shrink-0 place-items-center rounded-full text-muted-foreground outline-none hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: _jsx(HugeiconsIcon, { icon: Cancel01Icon, "aria-hidden": true, className: "size-3" }) })] }));
+}
+function DeleteThread({ onDelete, labels, }) {
+    const [asking, setAsking] = useState(false);
+    const [busy, setBusy] = useState(false);
+    if (!asking) {
+        return (_jsxs("button", { type: "button", onClick: () => setAsking(true), className: "touch-target flex w-fit items-center gap-1 rounded-lg text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", children: [_jsx(HugeiconsIcon, { icon: Delete02Icon, "aria-hidden": true, className: "size-3.5" }), labels.deleteThread] }));
+    }
+    return (_jsxs("div", { role: "group", "aria-label": labels.deleteThread, className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "text-muted-foreground", children: labels.deleteConfirm }), _jsx(Button, { size: "xs", variant: "destructive", isLoading: busy, onClick: async () => {
+                    setBusy(true);
+                    try {
+                        await onDelete();
+                    }
+                    finally {
+                        setBusy(false);
+                        setAsking(false);
+                    }
+                }, children: labels.deleteYes }), _jsx(Button, { size: "xs", variant: "ghost", disabled: busy, onClick: () => setAsking(false), children: labels.deleteNo })] }));
+}
+/** Le panneau de l'assistant, prêt pour la colonne de `AppShell`. */
+export function AssistantView({ status, threads, threadId, onThreadChange, thread, renderText = renderPlainText, onSend, onConfirm, onCancel, onDeleteThread, examples = [], welcome, setup, subject, request, labels: overrides, now, className, }) {
+    const labels = { ...ASSISTANT_LABELS, ...overrides };
+    const [draft, setDraft] = useState("");
+    const [sending, setSending] = useState(false);
+    const [sendError, setSendError] = useState(null);
+    const [actionBusy, setActionBusy] = useState(null);
+    const scroller = useRef(null);
+    const messages = threadId && thread ? thread.messages : [];
+    const last = messages.at(-1);
+    const answering = last?.status === "pending" || last?.status === "streaming";
+    const busy = sending || answering;
+    const exhausted = Boolean(status && status.ready && !status.ownKey && remainingCredits(status) <= 0);
+    const full = Boolean(threadId && thread?.full);
+    const blocked = status === undefined || !status.ready || exhausted || full;
+    // Le fil suit la réponse en cours, sauf si la personne remonte pour relire.
+    useEffect(() => {
+        const el = scroller.current;
+        if (!el)
+            return;
+        if (el.scrollHeight - el.scrollTop - el.clientHeight < 160)
+            el.scrollTo({ top: el.scrollHeight });
+    }, [thread]);
+    async function submit(text) {
+        const value = text.trim();
+        if (!value || busy || blocked)
+            return;
+        setSending(true);
+        setSendError(null);
+        setDraft("");
+        try {
+            await onSend(value);
+            requestAnimationFrame(() => {
+                const el = scroller.current;
+                if (el)
+                    el.scrollTo({ top: el.scrollHeight });
+            });
+        }
+        catch (error) {
+            setDraft(value);
+            setSendError(assistantErrorText(error, labels.sendError));
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    async function act(id, kind) {
+        setActionBusy({ id, kind });
+        try {
+            await (kind === "confirm" ? onConfirm(id) : onCancel(id));
+        }
+        catch (error) {
+            setSendError(assistantErrorText(error, labels.sendError));
+        }
+        finally {
+            setActionBusy(null);
+        }
+    }
+    // Une demande venue de la page part une seule fois ; sans texte, elle met le curseur dans la saisie.
+    const handled = useRef(null);
+    const onRequest = useEffectEvent((next) => {
+        if (handled.current === next.nonce)
+            return;
+        handled.current = next.nonce;
+        if (next.prompt)
+            void submit(next.prompt);
+    });
+    useEffect(() => {
+        // oxlint-disable-next-line react/set-state-in-effect -- la demande est un clic sur la page, transmis par prop : exécutée une seule fois par nonce.
+        if (request)
+            onRequest(request);
+    }, [request]);
+    let body;
+    if (status === undefined) {
+        body = (_jsx("div", { className: "grid place-items-center py-16", children: _jsx(Spinner, { size: 5, label: "Chargement" }) }));
+    }
+    else if (!status.ready) {
+        body = (_jsx(AssistantState, { title: labels.notReadyTitle, description: labels.notReadyDescription, tone: "warning", children: setup }));
+    }
+    else if (!threadId) {
+        body = exhausted ? (_jsx(AssistantState, { title: labels.exhaustedTitle, description: labels.exhaustedDescription, tone: "warning", children: setup })) : (_jsx(AssistantState, { title: welcome?.title ?? labels.welcomeTitle, description: welcome?.description ?? labels.welcomeDescription, children: examples.length ? _jsx(AssistantExamples, { examples: examples, onPick: (e) => void submit(e) }) : null }));
+    }
+    else if (thread === undefined) {
+        body = (_jsx("div", { className: "grid place-items-center py-16", children: _jsx(Spinner, { size: 5, label: "Chargement de la conversation" }) }));
+    }
+    else if (thread === null) {
+        body = (_jsx("p", { role: "alert", className: "py-8 text-sm text-destructive", children: labels.loadError }));
+    }
+    else {
+        body = (_jsx(AssistantConversation, { className: "gap-5", children: thread.messages.map((message) => message.role === "user" ? (_jsx(AssistantUserMessage, { children: message.text }, message._id)) : (_jsx(AssistantReply, { tools: message.tools, waiting: !message.text && (message.status === "pending" || message.status === "streaming"), error: message.status === "error", actions: thread.actions
+                    .filter((action) => action.messageId === message._id)
+                    .map((action) => (_jsx(AssistantActionCard, { title: action.summary, details: action.details ?? [], status: action.status, result: action.result ?? null, confirming: actionBusy?.id === action._id && actionBusy.kind === "confirm", cancelling: actionBusy?.id === action._id && actionBusy.kind === "cancel", onConfirm: () => void act(action._id, "confirm"), onCancel: () => void act(action._id, "cancel") }, action._id))), children: message.text ? renderText(message.text) : null }, message._id))) }));
+    }
+    return (_jsxs("div", { "data-slot": "assistant-view", className: cn("flex min-h-0 flex-1 flex-col", className), children: [_jsxs("div", { className: "flex min-h-11 shrink-0 items-center gap-2 px-4 xl:pr-2 xl:pl-5", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(AssistantCredits, { status: status, labels: labels }) }), _jsx(AssistantHistory, { threads: threads, threadId: threadId, onThreadChange: (id) => {
+                            setSendError(null);
+                            onThreadChange(id);
+                        }, labels: labels, ...(now === undefined ? {} : { now }) })] }), _jsx("div", { ref: scroller, "data-slot": "assistant-scroller", className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pt-2 pb-4 xl:pr-3 xl:pl-5", children: body }), _jsxs("div", { className: "grid shrink-0 gap-2 border-t border-foreground/5 px-4 pt-3 pb-[max(env(safe-area-inset-bottom),0.75rem)] xl:pr-3 xl:pl-5", children: [sendError ? (_jsx("p", { role: "alert", className: "text-sm text-destructive", children: sendError })) : null, full ? _jsx("p", { className: "text-sm text-muted-foreground", children: labels.full }) : null, subject ? _jsx(AssistantSubjectChip, { subject: subject, labels: labels }) : null, _jsx(AssistantComposer, { value: draft, onValueChange: setDraft, onSubmit: () => void submit(draft), disabled: blocked, busy: answering, sending: sending, label: labels.composerLabel, placeholder: answering ? labels.placeholderBusy : labels.placeholder, hint: null }), threadId && onDeleteThread && thread ? (_jsx(DeleteThread, { labels: labels, onDelete: async () => {
+                            await onDeleteThread(threadId);
+                            onThreadChange(null);
+                        } })) : null] })] }));
+}

package/dist/time-chart.js

@@ -27,6 +27,13 @@ export function niceScale(max, ticks = 4) {
     const step = nice * magnitude;
     return { max: Math.ceil(max / step) * step, step };
 }
+/** Lignes lues par les lecteurs d'écran au plus : au-delà, un échantillon régulier, premier et dernier inclus. */
+const SR_SAMPLE_SIZE = 60;
+function sampleIndices(n) {
+    if (n <= SR_SAMPLE_SIZE)
+        return Array.from({ length: n }, (_, i) => i);
+    return Array.from({ length: SR_SAMPLE_SIZE }, (_, k) => Math.round((k * (n - 1)) / (SR_SAMPLE_SIZE - 1)));
+}
 /**
  * Série temporelle en SVG, sans bibliothèque : lignes (aire sous la courbe pour une série seule)
  * ou barres empilées. Le SVG s'étire à la largeur de son conteneur ; les traits gardent 2 px
@@ -88,5 +95,5 @@ export function TimeChart({ timestamps, series, kind = "line", height = 200, com
                                                         return v > 0 ? (_jsx("rect", { x: i + 0.15, y: base, width: 0.7, height: h, fill: color(si), opacity: (active === null || active === i ? 1 : 0.55) * (i === incompleteIndex ? 0.5 : 1) }, `${s.key}-${i}`)) : null;
                                                     });
                                                 })
-                                                : series.map((s, si) => (_jsxs("g", { children: [series.length === 1 ? (_jsx("path", { d: areaPath(s.values, scale.max), fill: color(si), opacity: 0.1 })) : null, _jsx("path", { d: linePath(incompleteIndex < 0 ? s.values : s.values.map((v, i) => (i === incompleteIndex ? null : v)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }), incompleteIndex >= 0 ? (_jsx("path", { "data-slot": "time-chart-incomplete", d: linePath(s.values.map((v, i) => (i >= incompleteIndex - 1 ? v : null)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeDasharray: "3 4", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })) : null] }, s.key))), active !== null ? (_jsx("line", { x1: active + 0.5, x2: active + 0.5, y1: 0, y2: 100, vectorEffect: "non-scaling-stroke", className: "stroke-foreground/25", strokeWidth: 1 })) : null] }), active !== null && activeTime !== undefined ? (_jsxs("div", { "data-slot": "time-chart-tooltip", className: cn("pointer-events-none absolute top-0 z-10 grid min-w-36 gap-1 rounded-xl bg-popover px-3 py-2 text-xs shadow-lg shadow-black/10 [--popover:var(--floating)]", (active + 0.5) / n > 0.6 ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), style: { left: `${((active + 0.5) / n) * 100}%` }, children: [_jsxs("p", { className: "font-medium", children: [formatTime(activeTime), active === incompleteIndex ? (_jsx("span", { className: "ml-1.5 font-normal text-muted-foreground", children: "En cours" })) : null] }), series.map((s, si) => (_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: color(si) } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }), _jsx("span", { className: "font-medium tabular-nums", children: s.values[active] === null ? "-" : formatValue(s.values[active] ?? 0) })] }, s.key)))] })) : null] }), xLabels.length > 0 ? (_jsx("div", { "aria-hidden": true, className: "relative h-4 text-[11px] text-muted-foreground tabular-nums", children: xLabels.map((i, k) => (_jsx("span", { className: cn("absolute", k === 0 ? "left-0" : k === xLabels.length - 1 ? "right-0" : "-translate-x-1/2"), style: k === 0 || k === xLabels.length - 1 ? undefined : { left: `${((i + 0.5) / n) * 100}%` }, children: timestamps[i] !== undefined ? formatTime(timestamps[i]) : null }, i))) })) : null] })] }), _jsxs("table", { className: "sr-only", children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Date" }), series.map((s) => (_jsx("th", { scope: "col", children: s.label }, s.key)))] }) }), _jsx("tbody", { children: timestamps.map((t, i) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [formatTime(t), i === incompleteIndex ? " (en cours)" : ""] }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, t))) })] })] }));
+                                                : series.map((s, si) => (_jsxs("g", { children: [series.length === 1 ? (_jsx("path", { d: areaPath(s.values, scale.max), fill: color(si), opacity: 0.1 })) : null, _jsx("path", { d: linePath(incompleteIndex < 0 ? s.values : s.values.map((v, i) => (i === incompleteIndex ? null : v)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }), incompleteIndex >= 0 ? (_jsx("path", { "data-slot": "time-chart-incomplete", d: linePath(s.values.map((v, i) => (i >= incompleteIndex - 1 ? v : null)), scale.max), fill: "none", stroke: color(si), strokeWidth: 2, strokeDasharray: "3 4", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" })) : null] }, s.key))), active !== null ? (_jsx("line", { x1: active + 0.5, x2: active + 0.5, y1: 0, y2: 100, vectorEffect: "non-scaling-stroke", className: "stroke-foreground/25", strokeWidth: 1 })) : null] }), active !== null && activeTime !== undefined ? (_jsxs("div", { "data-slot": "time-chart-tooltip", className: cn("pointer-events-none absolute top-0 z-10 grid min-w-36 gap-1 rounded-xl bg-popover px-3 py-2 text-xs shadow-lg shadow-black/10 [--popover:var(--floating)]", (active + 0.5) / n > 0.6 ? "-translate-x-[calc(100%+0.75rem)]" : "translate-x-3"), style: { left: `${((active + 0.5) / n) * 100}%` }, children: [_jsxs("p", { className: "font-medium", children: [formatTime(activeTime), active === incompleteIndex ? (_jsx("span", { className: "ml-1.5 font-normal text-muted-foreground", children: "En cours" })) : null] }), series.map((s, si) => (_jsxs("p", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[2px]", style: { background: color(si) } }), _jsx("span", { className: "flex-1 text-muted-foreground", children: s.label }), _jsx("span", { className: "font-medium tabular-nums", children: s.values[active] === null ? "-" : formatValue(s.values[active] ?? 0) })] }, s.key)))] })) : null] }), xLabels.length > 0 ? (_jsx("div", { "aria-hidden": true, className: "relative h-4 text-[11px] text-muted-foreground tabular-nums", children: xLabels.map((i, k) => (_jsx("span", { className: cn("absolute", k === 0 ? "left-0" : k === xLabels.length - 1 ? "right-0" : "-translate-x-1/2"), style: k === 0 || k === xLabels.length - 1 ? undefined : { left: `${((i + 0.5) / n) * 100}%` }, children: timestamps[i] !== undefined ? formatTime(timestamps[i]) : null }, i))) })) : null] })] }), _jsx("div", { className: "sr-only", children: _jsxs("table", { children: [_jsx("caption", { children: n > SR_SAMPLE_SIZE ? `${label} (${n} mesures, échantillon de ${SR_SAMPLE_SIZE})` : label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Date" }), series.map((s) => (_jsx("th", { scope: "col", children: s.label }, s.key)))] }) }), _jsx("tbody", { children: sampleIndices(n).map((i) => (_jsxs("tr", { children: [_jsxs("th", { scope: "row", children: [formatTime(timestamps[i] ?? 0), i === incompleteIndex ? " (en cours)" : ""] }), series.map((s) => (_jsx("td", { children: s.values[i] === null ? "-" : formatValue(s.values[i] ?? 0) }, s.key)))] }, timestamps[i]))) })] }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",