zidane-ui 9.1.1 → 9.1.4

package/src/chat/interactions/QuestionForm.tsx

@@ -1,283 +0,0 @@
-/**
- * `ask_user` as a card (the desktop app's inbox, `InteractionCard`). The canonical `QuestionPayload` as a form:
- * `text`, `textarea`, `select` (single / `multi`, `selected` pre-ticks),
- * `confirm`. The submitted `answers` map goes verbatim to the canonical
- * `serializeInteractionResponse` server-side (main trims / normalises).
- *
- * Layout: optional intro, one card per question, then a permanent
- * "Additional instructions" textarea (sent as `instructions`, omitted when
- * empty) so the user can refine or override the model's framing. Required
- * questions block Send; skipping a non-required text question sends the key
- * absent (the serializer drops empty entries). Parity with the TUI's form:
- * select / confirm are required unless `required: false`, free text is
- * optional unless `required: true`.
- *
- * Two ways out: **Send** answers (`onAnswer`); **Dismiss** (`onDismiss`,
- * shown when given) cancels so the agent moves on without an answer.
- * Leaving the card alone keeps the question pending. Markdown (the intro)
- * draws through the transcript's `Markdown` slot unless `Markdown` is passed.
- */
-import { type ComponentType, type CSSProperties, useMemo, useRef, useState } from 'react';
-
-import type { AnswerValue, QuestionPayload, QuestionRequest, QuestionResponse } from 'zidane/chat';
-
-import { type MarkdownSlotProps, useTranscriptRenderers } from '../transcript/renderers';
-import { useChatLabels } from '../useChatLabels';
-import { BTN_GHOST_LEADING, BTN_PRIMARY, CardError, INPUT, useAutoFocus } from './card-ui';
-import { isRequired, QuestionField } from './QuestionField';
-
-export { isRequired };
-
-/** Props for {@link QuestionForm}. */
-export interface QuestionFormProps {
-  /** The `ask_user` request: its intro and questions. */
-  request: QuestionRequest;
-  /** Focus the first control (the card just became the one to answer). */
-  autoFocus?: boolean;
-  /** Called with the answers when the user sends. The form waits on the promise and shows a rejection's message under the controls. */
-  onAnswer(response: QuestionResponse): Promise<void>;
-  /** Withdraw the question unanswered. Absent: no Dismiss button. */
-  onDismiss?(): Promise<void>;
-  /** Draws the intro; defaults to the transcript's `Markdown` slot. */
-  Markdown?: ComponentType<MarkdownSlotProps>;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders an `ask_user` request as a form: an optional intro, one card per question, and an "Additional instructions" field. Required questions block Send.
- *
- * @param props - The {@link QuestionFormProps}.
- */
-export function QuestionForm({
-  request,
-  autoFocus = false,
-  onAnswer,
-  onDismiss,
-  Markdown: MarkdownProp,
-  className,
-  style,
-}: QuestionFormProps) {
-  const labels = useChatLabels();
-  const slots = useTranscriptRenderers();
-  const Markdown = MarkdownProp ?? slots.Markdown;
-  const payload: QuestionPayload = request.payload;
-  const [answers, setAnswers] = useState<Record<string, AnswerValue>>(() => seedDefaults(payload));
-  const [instructions, setInstructions] = useState('');
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  useAutoFocus(rootRef, autoFocus);
-
-  const canSubmit = useMemo(
-    () =>
-      payload.questions.every((q) => {
-        if (!isRequired(q)) return true;
-        const value = answers[q.id];
-        if (q.type === 'confirm') return typeof value === 'boolean';
-        if (q.type === 'select' && q.multi) return Array.isArray(value) && value.length > 0;
-        return typeof value === 'string' && value.trim().length > 0;
-      }),
-    [answers, payload.questions],
-  );
-
-  const submit = async () => {
-    if (busy || !canSubmit) return;
-    setBusy(true);
-    setError(null);
-    try {
-      await onAnswer({
-        kind: 'question',
-        answers,
-        ...(instructions.trim() ? { instructions: instructions.trim() } : {}),
-      });
-    } catch (err) {
-      setError((err as Error).message ?? String(err));
-      setBusy(false);
-    }
-  };
-
-  /** Explicit dismissal: the agent is told there is no answer and continues. */
-  const dismiss = async () => {
-    if (busy || !onDismiss) return;
-    setBusy(true);
-    setError(null);
-    try {
-      await onDismiss();
-    } catch (err) {
-      setError((err as Error).message ?? String(err));
-      setBusy(false);
-    }
-  };
-
-  const setAnswer = (id: string, value: AnswerValue) => setAnswers((prev) => ({ ...prev, [id]: value }));
-
-  return (
-    <div
-      ref={rootRef}
-      // A delegated shortcut, not a control: the fields inside keep their own semantics.
-      role="presentation"
-      className={['flex flex-col gap-3', className].filter(Boolean).join(' ')}
-      style={style}
-      onKeyDown={(e) => {
-        // ⌘/Ctrl+Enter submits from anywhere in the form, as in the composer.
-        if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-          e.preventDefault();
-          void submit();
-        }
-      }}
-    >
-      {payload.intro && (
-        <div className="prose-styles text-zg-ui text-[var(--zg-text)] zg-pretty">
-          <Markdown>{payload.intro}</Markdown>
-        </div>
-      )}
-
-      {payload.questions.map((q, index) => (
-        <QuestionField
-          key={q.id}
-          index={index}
-          question={q}
-          value={answers[q.id]}
-          onChange={(v) => setAnswer(q.id, v)}
-          requestId={request.id}
-          labels={labels}
-        />
-      ))}
-
-      {/* Always present, never required: the user's escape hatch out of the model's framing. */}
-      <div className="flex flex-col gap-1.5">
-        <div className="flex items-baseline gap-1.5">
-          <label
-            htmlFor={`ask-${request.id}-instructions`}
-            className="text-zg-label font-medium text-[var(--zg-text-muted)]"
-          >
-            {labels.additionalInstructions}
-          </label>
-          <span className="text-zg-meta text-[var(--zg-text-muted)]">{labels.additionalInstructionsHint}</span>
-        </div>
-        <textarea
-          id={`ask-${request.id}-instructions`}
-          value={instructions}
-          onChange={(e) => setInstructions(e.target.value)}
-          placeholder={labels.additionalInstructionsPlaceholder}
-          rows={2}
-          spellCheck={false}
-          className={`${INPUT} min-h-14 py-2 resize-y`}
-        />
-      </div>
-
-      <div className="flex items-center gap-2 pt-1">
-        {onDismiss && (
-          <button
-            type="button"
-            onClick={() => void dismiss()}
-            disabled={busy}
-            title={labels.dismissHint}
-            className={BTN_GHOST_LEADING}
-          >
-            {labels.dismiss}
-          </button>
-        )}
-        <CardError error={error} />
-        <span className="flex-1" />
-        <button
-          type="button"
-          onClick={() => void submit()}
-          disabled={busy || !canSubmit}
-          className={BTN_PRIMARY}
-          data-testid="inbox-send"
-        >
-          {labels.sendAnswers(payload.questions.length)}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/** Props for {@link AnsweredQuestions}. */
-export interface AnsweredQuestionsProps {
-  /** The questions that were asked. */
-  payload: QuestionPayload;
-  /** The submitted answers, keyed by question id. */
-  answers: Readonly<Record<string, AnswerValue>>;
-  /** The additional instructions the user gave. Shown only when not blank. */
-  instructions?: string;
-  /** Unique per call, for the fields' ids. */
-  id: string;
-  /** Draws the intro; defaults to the transcript's `Markdown` slot. */
-  Markdown?: ComponentType<MarkdownSlotProps>;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * An answered `ask_user` form, read-only: the same intro and question cards
- * as the live form, each showing what was picked or typed, then the
- * additional instructions when some were given. Used by the transcript
- * (the call's details), so an answer reads the way it was given.
- *
- * @param props - Component props: the `payload` that was asked, the `answers`, optional `instructions`, a unique `id`, and an optional `Markdown` renderer.
- */
-export function AnsweredQuestions({
-  payload,
-  answers,
-  instructions,
-  id,
-  Markdown: MarkdownProp,
-  className,
-  style,
-}: AnsweredQuestionsProps) {
-  const labels = useChatLabels();
-  const slots = useTranscriptRenderers();
-  const Markdown = MarkdownProp ?? slots.Markdown;
-  return (
-    <div className={['flex flex-col gap-3', className].filter(Boolean).join(' ')} style={style}>
-      {payload.intro && (
-        <div className="prose-styles text-zg-ui text-[var(--zg-text)] zg-pretty">
-          <Markdown>{payload.intro}</Markdown>
-        </div>
-      )}
-      {payload.questions.map((q, index) => (
-        <QuestionField
-          key={q.id}
-          index={index}
-          question={q}
-          value={answers[q.id]}
-          onChange={() => undefined}
-          requestId={id}
-          labels={labels}
-          readOnly
-        />
-      ))}
-      {instructions && instructions.trim() !== '' && (
-        <div className="flex flex-col gap-1">
-          <span className="text-zg-label font-medium text-[var(--zg-text-muted)]">{labels.additionalInstructions}</span>
-          <div className="text-zg-ui leading-5 text-[var(--zg-text)] whitespace-pre-wrap zg-pretty">{instructions}</div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/**
- * Seed the form from the payload: `default` for free text, `selected`
- * pre-ticks for multi-select (an opt-out list arrives already ticked).
- *
- * @param payload - The question payload to read defaults from.
- */
-export function seedDefaults(payload: QuestionPayload): Record<string, AnswerValue> {
-  const out: Record<string, AnswerValue> = {};
-  for (const q of payload.questions) {
-    if ((q.type === 'text' || q.type === 'textarea') && q.default) out[q.id] = q.default;
-    if (q.type === 'select' && q.multi) {
-      const ticked = q.choices.filter((c) => c.selected).map((c) => c.id);
-      if (ticked.length > 0) out[q.id] = ticked;
-    }
-  }
-  return out;
-}

package/src/chat/interactions/card-ui.tsx

@@ -1,86 +0,0 @@
-/**
- * Shared controls for the interaction cards (a question form, a plan
- * review), wherever they show: the desktop app's inbox, `HostInteractions`.
- * Button and field classes, the inline error, first-control focus.
- */
-import { useEffect, useRef, type CSSProperties, type RefObject } from 'react';
-
-import { buttonClass } from '../../components/button';
-
-/** Class names of a secondary button in an interaction card. */
-export const BTN = `${buttonClass({ variant: 'secondary' })} !text-[var(--zg-text)] font-medium`;
-/** Class names of the primary (solid) button in an interaction card. */
-export const BTN_PRIMARY = buttonClass({ variant: 'solid' });
-/** Class names of a ghost button in an interaction card. */
-export const BTN_GHOST = buttonClass({ variant: 'ghost' });
-/** A ghost button that leads a footer: pulled out by its padding so its text sits on the card's content edge. */
-export const BTN_GHOST_LEADING = buttonClass({ variant: 'ghost', flush: 'start' });
-/** Class names of the danger button in an interaction card: the danger fill. */
-export const BTN_DANGER = buttonClass({ variant: 'danger-solid' });
-
-/** Class names of a text field in an interaction card. */
-export const INPUT = 'zg-well w-full text-zg-ui px-2.5 placeholder:text-[var(--zg-text-subtle)]';
-
-/** Props for {@link CardError}. */
-export interface CardErrorProps {
-  /** The message to show, or `null` to render nothing. */
-  error: string | null;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders an inline error message, or nothing when there is none.
- *
- * @param props - Component props: the `error` text.
- */
-export function CardError({ error, className, style }: CardErrorProps) {
-  if (!error) return null;
-  return (
-    <span
-      role="alert"
-      className={['min-w-0 truncate text-zg-meta text-[var(--zg-error)]', className].filter(Boolean).join(' ')}
-      style={style}
-      title={error}
-    >
-      {error}
-    </span>
-  );
-}
-
-/**
- * Move keyboard focus to the card's first focusable control when asked
- * (the card became the head, or the user came through "Open inbox").
- * `preventScroll`: the panel body scrolls the card into view itself.
- *
- * @param root - Ref to the card's root element.
- * @param when - Focuses the first control when it turns true.
- */
-export function useAutoFocus(root: RefObject<HTMLElement | null>, when: boolean): void {
-  // Latched: `when` is a one-render pulse (the host takes the focus request
-  // as soon as it is seen), so the frame must not be cancelled when it drops.
-  const pending = useRef<number | null>(null);
-  useEffect(() => {
-    if (!when) return;
-    pending.current = requestAnimationFrame(() => {
-      pending.current = null;
-      // A card may name its primary control; else the first field or button.
-      const first =
-        root.current?.querySelector<HTMLElement>('[data-autofocus]') ??
-        root.current?.querySelector<HTMLElement>(
-          // A radio group's tab stop, not its first radio (which may be unchecked and out of the tab order).
-          'input, textarea, [role="radio"]:not([tabindex="-1"]), [role="checkbox"], button:not([disabled])',
-        );
-      first?.focus({ preventScroll: true });
-      root.current?.scrollIntoView({ block: 'nearest' });
-    });
-  }, [root, when]);
-  useEffect(
-    () => () => {
-      if (pending.current !== null) cancelAnimationFrame(pending.current);
-    },
-    [],
-  );
-}

package/src/chat/interactions/hooks.ts

@@ -1,49 +0,0 @@
-/**
- * Readers of the requests the agent waits on (`ChatHost.interactions`):
- * one session's, its head (the oldest), and every session's. Each re-renders
- * only for what it returns.
- */
-import { useCallback, useMemo, useSyncExternalStore } from 'react';
-
-import { useOptionalChatHost } from '../ChatProvider';
-import type { ChatInteraction } from '../headless/host';
-import { constant, useReadable } from '../headless/store';
-
-const NONE = constant<readonly ChatInteraction[]>([]);
-
-/**
- * One session's pending requests, oldest first; empty for no session or a host without interactions.
- *
- * @param sessionId - The session, or `null`.
- */
-export function usePendingInteractions(sessionId: string | null): readonly ChatInteraction[] {
-  const interactions = useOptionalChatHost()?.interactions;
-  const store = useMemo(
-    () => (interactions && sessionId ? interactions.pending(sessionId) : NONE),
-    [interactions, sessionId],
-  );
-  return useReadable(store);
-}
-
-/**
- * The oldest pending request of one session, or `null`. Re-renders only when that request changes, not when more queue
- * behind it (a sidebar dot reads it per row).
- *
- * @param sessionId - The session, or `null`.
- */
-export function useInteractionHead(sessionId: string | null): ChatInteraction | null {
-  const interactions = useOptionalChatHost()?.interactions;
-  const store = useMemo(
-    () => (interactions && sessionId ? interactions.pending(sessionId) : NONE),
-    [interactions, sessionId],
-  );
-  const head = useCallback(() => store.get()[0] ?? null, [store]);
-  return useSyncExternalStore(store.subscribe, head, head);
-}
-
-/** Every session's pending requests, in arrival order; empty when the host only lists them per session. */
-export function useAllInteractions(): readonly ChatInteraction[] {
-  const interactions = useOptionalChatHost()?.interactions;
-  const store = useMemo(() => interactions?.all?.() ?? NONE, [interactions]);
-  return useReadable(store);
-}

package/src/chat/interactions/index.ts

@@ -1,8 +0,0 @@
-/** `zidane-ui/chat/interactions`: question and plan cards, and `HostInteractions` over a `ChatHost`. */
-export * from './HostInteractions';
-export * from './InboxPanel';
-export * from './hooks';
-export * from './InteractionCard';
-export * from './PlanCard';
-export * from './QuestionField';
-export * from './QuestionForm';

package/src/chat/provider-color.ts

@@ -1,71 +0,0 @@
-/**
- * One stable color per provider, derived from its key so new providers get
- * a color without a lookup table and the same provider always looks the
- * same. Well-known providers pin a hue that matches their brand feel; the
- * rest hash onto the wheel.
- *
- * Output is a CSS `hsl()` string at fixed saturation / lightness tuned for
- * the dark theme: readable as text, and soft when used as a tinted fill via
- * `color-mix`.
- */
-
-const PINNED_HUE: Record<string, number> = {
-  anthropic: 24, // warm clay
-  openai: 160, // teal-green
-  google: 210, // blue
-  gemini: 210,
-  xai: 0, // red (used desaturated below)
-  mistral: 30, // orange
-  groq: 300, // magenta
-  openrouter: 265, // violet
-  deepseek: 230, // indigo
-  ollama: 120, // green
-  local: 120,
-  together: 190,
-  fireworks: 12,
-  bedrock: 40,
-  azure: 205,
-  vertex: 215,
-};
-
-function hashHue(key: string): number {
-  let h = 2166136261;
-  for (let i = 0; i < key.length; i++) {
-    h ^= key.charCodeAt(i);
-    h = Math.imul(h, 16777619);
-  }
-  return Math.abs(h) % 360;
-}
-
-/**
- * The hue (0 to 359) for a provider key: the pinned hue of a well-known provider whose name the key starts with, else a hash of the key.
- *
- * @param providerKey - The provider key, matched case-insensitively.
- */
-export function providerHue(providerKey: string): number {
-  const k = providerKey.toLowerCase();
-  const pinned = Object.entries(PINNED_HUE).find(([name]) => k.startsWith(name));
-  return pinned ? pinned[1] : hashHue(k);
-}
-
-/**
- * Text / border color.
- *
- * @param providerKey - The provider key, matched case-insensitively.
- */
-export function providerColor(providerKey: string): string {
-  const hue = providerHue(providerKey);
-  // Reds read as errors in this UI; keep them softer.
-  const sat = hue < 15 || hue > 345 ? 55 : 62;
-  return `hsl(${hue} ${sat}% 66%)`;
-}
-
-/**
- * Soft tinted fill for chips / badges.
- *
- * @param providerKey - The provider key, matched case-insensitively.
- * @param percent - How much of the provider color to mix in, 0 to 100.
- */
-export function providerTint(providerKey: string, percent = 16): string {
-  return `color-mix(in srgb, ${providerColor(providerKey)} ${percent}%, transparent)`;
-}