@signalcore/ui 0.1.0 → 1.0.0-beta.1

package/src/surface/Form.tsx

@@ -0,0 +1,299 @@
+import { CheckIcon } from "@phosphor-icons/react";
+import { useRef, useState, type FormEvent } from "react";
+
+import type { FieldValue, FormBlock, FormField } from "../blocks";
+import { Button } from "../kit/Button";
+import { Chips, Choices } from "../kit/Choices";
+import { Combobox } from "../kit/Combobox";
+import { useKit } from "../kit/context";
+import { DateField } from "../kit/DateField";
+import { Field, type FieldIds } from "../kit/Field";
+import { FileField } from "../kit/FileField";
+import { Checkbox, NumberInput, SecretInput, TextArea, TextInput } from "../kit/Inputs";
+import { RangeField } from "../kit/RangeField";
+import { RatingField } from "../kit/RatingField";
+import { DateTimeField, TimeField } from "../kit/TimeField";
+import { useScope, useSurfaceParts } from "./scope";
+import { FEW_CHIPS, FEW_OPTIONS, filled, problemsOf, startValues, type Values } from "./values";
+
+/**
+ * Fields to fill and the one button that sends them. It starts from what the person already sent
+ * when the surface was answered (and draws it so, closed), else from what the agent gave.
+ */
+export function FormView({ block }: { block: FormBlock }) {
+  const { answered } = useScope();
+  const mine = answered?.name === block.action ? answered.data : undefined;
+  // An answer that lands later starts the form again from it.
+  return <Filling key={mine ? "answered" : "open"} block={block} answered={mine} />;
+}
+
+/**
+ * The form's values, held here. Sending checks every field first: what is wrong shows under
+ * each (a file field also says what it still waits on: a file on its way, one that failed), the
+ * first such field takes the focus, and from then on the words follow the values.
+ */
+function Filling({
+  block,
+  answered,
+}: {
+  block: FormBlock;
+  answered: Record<string, unknown> | undefined;
+}) {
+  const { active, onAction, files } = useScope();
+  const { messages, code } = useKit();
+  const part = useSurfaceParts();
+  const form = useRef<HTMLFormElement>(null);
+  const [values, setValues] = useState<Values>(() => startValues(block.fields, answered));
+  const [waits, setWaits] = useState<Readonly<Record<string, string>>>({});
+  const [tried, setTried] = useState(false);
+  const check = () => ({ ...problemsOf(block.fields, values, code, messages), ...waits });
+  const problems = tried ? check() : {};
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!active) return;
+    const found = check();
+    const first = block.fields.find((field) => field.name in found);
+    if (first) {
+      setTried(true);
+      focusField(form.current, first.name);
+      return;
+    }
+    onAction(filled(block, values, code, messages, files?.known));
+  };
+
+  const waitOn = (name: string) => (problem: string | null) => {
+    setWaits((now) => {
+      if ((now[name] ?? null) === problem) return now;
+      const { [name]: _, ...rest } = now;
+      return problem === null ? rest : { ...rest, [name]: problem };
+    });
+  };
+
+  return (
+    <form ref={form} noValidate onSubmit={submit} part="form" className={part("sc-surface__form")}>
+      {/* Answered, each control is closed on its own, so what still opens (a file sent) can. */}
+      <fieldset disabled={!active && !answered}>
+        {block.fields.map((field) => (
+          <Field
+            key={field.name}
+            name={field.name}
+            label={field.kind === "checkbox" ? undefined : field.label}
+            optional={!field.required}
+            help={field.help}
+            error={problems[field.name]}
+            group={grouped(field)}
+          >
+            {(ids) => (
+              <Control
+                field={field}
+                ids={ids}
+                value={values[field.name] ?? null}
+                disabled={!active}
+                onChange={(value) => setValues((now) => ({ ...now, [field.name]: value }))}
+                onWait={waitOn(field.name)}
+              />
+            )}
+          </Field>
+        ))}
+        <div className={part("sc-surface__foot")}>
+          {answered ? (
+            <p className={part("sc-surface__sent")}>
+              <CheckIcon aria-hidden weight="bold" />
+              {messages.sent}
+            </p>
+          ) : (
+            <Button type="submit" tone="primary" className={part("sc-surface__submit")}>
+              {block.submit ?? messages.send}
+            </Button>
+          )}
+        </div>
+      </fieldset>
+    </form>
+  );
+}
+
+/** Puts the focus on a field's first control that takes it. */
+function focusField(form: HTMLFormElement | null, name: string) {
+  form
+    ?.querySelector<HTMLElement>(
+      `[data-field="${name}"] :is(input, textarea, button[tabindex="0"], button:not([tabindex]))`,
+    )
+    ?.focus();
+}
+
+/** Whether the field draws as a group of buttons rather than one control a label points at. */
+function grouped({ kind, options = [], times }: FormField): boolean {
+  if (kind === "select") return options.length <= FEW_OPTIONS;
+  if (kind === "multiselect") return options.length <= FEW_CHIPS;
+  if (kind === "time") return times !== undefined;
+  return kind === "rating" || kind === "datetime" || kind === "file";
+}
+
+/**
+ * The kit's control for the field's kind, given the field's narrowing; a select or a
+ * multiselect by how many options it has: all in sight when few, a list to search when many.
+ */
+function Control({
+  field,
+  ids,
+  value,
+  disabled,
+  onChange,
+  onWait,
+}: {
+  field: FormField;
+  ids: FieldIds;
+  value: FieldValue;
+  disabled: boolean;
+  onChange: (value: FieldValue) => void;
+  onWait: (problem: string | null) => void;
+}) {
+  const { messages } = useKit();
+  const { files } = useScope();
+  const control = {
+    ...ids,
+    label: field.label ?? field.placeholder,
+    required: field.required,
+    disabled,
+  };
+  const text = typeof value === "string" ? value : "";
+  const number = typeof value === "number" ? value : null;
+  const options = field.options ?? [];
+  switch (field.kind) {
+    case "text":
+    case "email":
+    case "phone":
+    case "url":
+      return (
+        <TextInput
+          {...control}
+          kind={field.kind}
+          value={text}
+          onChange={onChange}
+          placeholder={field.placeholder}
+        />
+      );
+    case "textarea":
+      return (
+        <TextArea {...control} value={text} onChange={onChange} placeholder={field.placeholder} />
+      );
+    case "secret":
+      return (
+        <SecretInput
+          {...control}
+          value={text}
+          onChange={onChange}
+          placeholder={field.placeholder}
+        />
+      );
+    case "number":
+      return (
+        <NumberInput
+          {...control}
+          value={number}
+          onChange={onChange}
+          min={field.min}
+          max={field.max}
+          step={field.step}
+          unit={field.unit}
+          placeholder={field.placeholder}
+        />
+      );
+    case "checkbox":
+      return (
+        <Checkbox {...control} value={value === true} onChange={onChange}>
+          {field.label ?? field.placeholder}
+        </Checkbox>
+      );
+    case "date":
+      return (
+        <DateField
+          {...control}
+          value={text || null}
+          onChange={onChange}
+          dates={field.dates}
+          earliest={field.earliest}
+          latest={field.latest}
+          placeholder={field.placeholder}
+        />
+      );
+    case "time":
+      return (
+        <TimeField
+          {...control}
+          value={text || null}
+          onChange={onChange}
+          times={field.times}
+          placeholder={field.placeholder}
+        />
+      );
+    case "datetime":
+      return (
+        <DateTimeField
+          {...control}
+          value={text || null}
+          onChange={onChange}
+          dates={field.dates}
+          earliest={field.earliest}
+          latest={field.latest}
+          times={field.times}
+        />
+      );
+    case "range":
+      return (
+        <RangeField
+          {...control}
+          value={number ?? field.min ?? 0}
+          onChange={onChange}
+          min={field.min}
+          max={field.max}
+          step={field.step}
+          unit={field.unit}
+        />
+      );
+    case "rating":
+      return <RatingField {...control} value={number} onChange={onChange} max={field.max} />;
+    case "select":
+      return grouped(field) ? (
+        <Choices {...control} options={options} value={text || null} onChange={onChange} />
+      ) : (
+        <Combobox
+          {...control}
+          options={options}
+          value={text ? [text] : []}
+          multiple={false}
+          onChange={(ids) => onChange(ids[0] ?? null)}
+          placeholder={field.placeholder ?? messages.pick}
+        />
+      );
+    case "multiselect": {
+      const picked = Array.isArray(value) ? value : [];
+      return grouped(field) ? (
+        <Chips {...control} options={options} value={picked} onChange={onChange} />
+      ) : (
+        <Combobox
+          {...control}
+          options={options}
+          value={picked}
+          multiple
+          onChange={onChange}
+          placeholder={field.placeholder ?? messages.pick}
+        />
+      );
+    }
+    case "file":
+      return (
+        <FileField
+          {...control}
+          value={Array.isArray(value) ? value : []}
+          onChange={onChange}
+          files={files}
+          accept={field.accept}
+          multiple={field.multiple}
+          maxMb={field.max_mb}
+          onWait={onWait}
+        />
+      );
+  }
+}

package/src/surface/Markdown.tsx

@@ -0,0 +1,55 @@
+import { Fragment } from "react";
+
+import { parse, type Inline } from "../markdown";
+
+/** A heading sits two levels under the page's own (its title, a dialog's): `#` is an `h3`. */
+const HEADINGS = ["h3", "h4", "h5", "h6"] as const;
+
+/** The little Markdown of an agent's words, as headings, paragraphs and lists; the chat's too. */
+export function Markdown({ text }: { text: string }) {
+  return parse(text).map((node, index) => {
+    if (node.kind === "heading") {
+      const Heading = HEADINGS[Math.min(node.level, HEADINGS.length) - 1] ?? "h6";
+      return (
+        <Heading key={index}>
+          <Words inline={node.inline} />
+        </Heading>
+      );
+    }
+    return node.kind === "list" ? (
+      <ul key={index}>
+        {node.items.map((item, at) => (
+          <li key={at}>
+            <Words inline={item} />
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <p key={index}>
+        <Words inline={node.inline} />
+      </p>
+    );
+  });
+}
+
+/** One line's words, its bold, italic, code and links drawn; a link opens apart, never in place. */
+export function Words({ inline }: { inline: Inline[] }) {
+  return inline.map((part, index) => {
+    switch (part.kind) {
+      case "text":
+        return <Fragment key={index}>{part.text}</Fragment>;
+      case "strong":
+        return <strong key={index}>{part.text}</strong>;
+      case "em":
+        return <em key={index}>{part.text}</em>;
+      case "code":
+        return <code key={index}>{part.text}</code>;
+      case "link":
+        return (
+          <a key={index} href={part.href} target="_blank" rel="noopener noreferrer">
+            {part.text}
+          </a>
+        );
+    }
+  });
+}