@eifi1/ui-kit 0.13.1 → 0.14.0

package/src/feedback/feedback-thread.tsx

@@ -2,7 +2,7 @@ import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useS
 import type { ReactNode, Ref } from "react";
 import { Paperclip, Send } from "lucide-react";
 import { cn } from "../lib/cn";
-import { formatRelativeTime } from "../lib/format";
+import { formatDate, formatRelativeTime } from "../lib/format";
 import { Button, EmptyState, Spinner, Textarea } from "../components/ui";
 import { Skeleton } from "../components/skeleton";
 import { Tooltip } from "../components/tooltip";
@@ -35,6 +35,13 @@ import type { FeedbackAttachmentLabels } from "./feedback-dialog";
  * **RTL.** Sides are logical — `justify-end` is the reading end, and the bubble's
  * tucked corner is `rounded-ee` / `rounded-es` — and each body is `dir="auto"`, so a
  * Hebrew reply in an English thread (or the reverse) lays out as its own language.
+ *
+ * **A chat, too** (keksdose G4/G5). keksdose's support chat is the same conversation
+ * read the chat way: status lines between the messages ("Closed automatically",
+ * "Reopened"), a day line where the date changes, clock times under it, Enter to send
+ * and several files uploaded ahead of the send. Each of those is an opt-in here
+ * (`kind: "event"`, `daySeparators`, `timeFormat="clock"`, `sendOn="enter"`,
+ * `attachmentSlot` + `canSend`), so the feedback thread's defaults stay as they were.
  */
 
 /* ── Labels ───────────────────────────────────────────────────────────────── */
@@ -71,6 +78,9 @@ export interface FeedbackComposerLabels {
   send: string;
   /** The shortcut line, given the platform's modifier ("Ctrl" or "⌘"). */
   sendHint: (modifier: string) => string;
+  /** The shortcut line under `sendOn="enter"` (keksdose G5): Enter sends, so say how a
+   *  new line is made. */
+  sendHintEnter: string;
 }
 
 export const DEFAULT_FEEDBACK_COMPOSER_LABELS: FeedbackComposerLabels = {
@@ -78,6 +88,7 @@ export const DEFAULT_FEEDBACK_COMPOSER_LABELS: FeedbackComposerLabels = {
   placeholder: "Write a comment…",
   send: "Send",
   sendHint: (modifier) => `${modifier} + Enter to send`,
+  sendHintEnter: "Enter to send, Shift + Enter for a new line",
 };
 
 /* ── Thread ───────────────────────────────────────────────────────────────── */
@@ -94,6 +105,8 @@ export interface FeedbackThreadAttachment {
 }
 
 export interface FeedbackThreadMessage {
+  /** Leave out, or `"message"`. `"event"` is a {@link FeedbackThreadEvent}. */
+  kind?: "message";
   id: string | number;
   /** Who wrote it. Left out on an `own` message, it reads "You". */
   author?: ReactNode;
@@ -107,8 +120,34 @@ export interface FeedbackThreadMessage {
   staff?: boolean;
 }
 
+/**
+ * A line in the thread that nobody wrote — "Closed automatically", "Marked as
+ * resolved", "Reopened" — drawn centred and muted with its time, no author, no side,
+ * no bubble.
+ *
+ * keksdose G4: its support chat interleaves these with the messages, and as a message
+ * they came out as a bubble from nobody at the start side, which reads as the member
+ * having said "resolved". Word it for the READER, as with `own`: the app knows whether
+ * "you reopened it" or "Anna reopened it" is true for the person looking.
+ *
+ * The text is the app's, not somebody's words about their data, so it is NOT tagged
+ * `data-private`; one that names a person can wrap the name in its own
+ * `<span data-private>` (`body` is a node for that reason).
+ */
+export interface FeedbackThreadEvent {
+  kind: "event";
+  id: string | number;
+  /** A `Date`, an ISO string or epoch ms. */
+  createdAt: Date | string | number;
+  body: ReactNode;
+}
+
+/** One row of a {@link FeedbackThread}: a message, or an event line between them. */
+export type FeedbackThreadItem = FeedbackThreadMessage | FeedbackThreadEvent;
+
 export interface FeedbackThreadProps {
-  messages: readonly FeedbackThreadMessage[];
+  /** Oldest first. Event lines ({@link FeedbackThreadEvent}) sit among the messages. */
+  messages: readonly FeedbackThreadItem[];
   loading?: boolean;
   /** Replaces the default "No comments yet". */
   empty?: ReactNode;
@@ -120,7 +159,23 @@ export interface FeedbackThreadProps {
   renderAttachment?: (attachment: FeedbackThreadAttachment, message: FeedbackThreadMessage) => ReactNode;
   /** Tag bodies, authors and attachments `data-private`. Default true. */
   redact?: boolean;
-  /** "Now" for the relative times — pin it in tests and stories. Default: the clock. */
+  /**
+   * How a row's time reads. `"relative"` (default): "5 minutes ago", a date past six
+   * days — right for a report's comments, read days apart. `"clock"`: the time of day
+   * in the locale ("14:05", "2:05 PM") — the chat look, keksdose G4; pair it with
+   * `daySeparators`, which say which day that clock time is on. Either way the full
+   * date and time is in the Tooltip.
+   */
+  timeFormat?: "relative" | "clock";
+  /**
+   * A centred day line before the first row and wherever the next row is on another
+   * calendar day (the device's zone): "Today", "Yesterday", else the date — keksdose
+   * G4. "Today" / "Yesterday" are `Intl.RelativeTimeFormat`'s own words in the kit
+   * locale, so there is no label to translate. Default false.
+   */
+  daySeparators?: boolean;
+  /** "Now" for the relative times and the day lines — pin it in tests and stories.
+   *  Default: the clock. */
   now?: Date | number;
   /** Overrides the provider's locale for the times. */
   locale?: string;
@@ -136,6 +191,8 @@ export function FeedbackThread({
   redact = true,
   now,
   locale: localeProp,
+  timeFormat = "relative",
+  daySeparators = false,
   labels: labelsProp,
   className,
 }: FeedbackThreadProps) {
@@ -160,13 +217,60 @@ export function FeedbackThread({
     );
   }
 
+  // Per row, the calendar day of the last readable date up to it — what a day line
+  // compares against.
+  const days: (number | null)[] = [];
+  for (const message of messages) {
+    const date = toDate(message.createdAt);
+    days.push(date ? dayNumber(date) : (days.at(-1) ?? null));
+  }
+
   return (
     <ol aria-label={labels.thread} aria-busy={loading || undefined} className={cn("space-y-3", className)}>
-      {messages.map((message) => {
+      {messages.flatMap((message, index) => {
         const date = toDate(message.createdAt);
+        const time = date && (
+          // The kit's Tooltip, not a native title: one tooltip look app-wide
+          // (keksdose F0 / dev#523).
+          <Tooltip label={new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" }).format(date)}>
+            <time dateTime={date.toISOString()} className="tabular-nums">
+              {timeFormat === "clock"
+                ? formatDate(date, "time", { locale })
+                : formatRelativeTime(date, {
+                    now: reference,
+                    locale,
+                    // Past the kit's day steps it is a date: "2 weeks ago" makes
+                    // the reader do arithmetic the date already did.
+                    absoluteAfterDays: 6.5,
+                  })}
+            </time>
+          </Tooltip>
+        );
+        const rows: ReactNode[] = [];
+        const day = date && dayNumber(date);
+        // Against the last row WITH a readable date: an unparseable one neither starts
+        // a day nor hides the next change.
+        if (daySeparators && date && day !== days[index - 1]) {
+          rows.push(<DaySeparator key={`day-${message.id}`} date={date} now={reference} locale={locale} />);
+        }
+        if (message.kind === "event") {
+          // A list item like the rest, so "Reopened" is read in its place, but not an
+          // article: an article is somebody's post, and this has no author.
+          rows.push(
+            <li
+              key={message.id}
+              data-event=""
+              className="flex flex-wrap items-baseline justify-center gap-x-2 px-4 text-center text-xs text-[var(--text-muted)]"
+            >
+              <span>{message.body}</span>
+              {time && <span className="text-[11px]">{time}</span>}
+            </li>,
+          );
+          return rows;
+        }
         const author = message.author ?? (message.own ? labels.you : null);
         const attachments = message.attachments ?? [];
-        return (
+        rows.push(
           <li
             key={message.id}
             className={cn("flex", message.own ? "justify-end" : "justify-start")}
@@ -191,21 +295,7 @@ export function FeedbackThread({
                     {labels.staff}
                   </span>
                 )}
-                {date && (
-                  // The kit's Tooltip, not a native title: one tooltip look app-wide
-                  // (keksdose F0 / dev#523).
-                  <Tooltip label={new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" }).format(date)}>
-                    <time dateTime={date.toISOString()} className="tabular-nums">
-                      {formatRelativeTime(date, {
-                        now: reference,
-                        locale,
-                        // Past the kit's day steps it is a date: "2 weeks ago" makes
-                        // the reader do arithmetic the date already did.
-                        absoluteAfterDays: 6.5,
-                      })}
-                    </time>
-                  </Tooltip>
-                )}
+                {time}
               </header>
               {message.body && (
                 <p
@@ -230,8 +320,9 @@ export function FeedbackThread({
                 </ul>
               )}
             </article>
-          </li>
+          </li>,
         );
+        return rows;
       })}
     </ol>
   );
@@ -290,6 +381,57 @@ function useMinuteClock(active: boolean): number {
   return time;
 }
 
+/** The local calendar day as one number (20260926), for "same day?" and keys. */
+function dayNumber(date: Date): number {
+  return date.getFullYear() * 10_000 + (date.getMonth() + 1) * 100 + date.getDate();
+}
+
+/**
+ * The day line of `daySeparators` (keksdose G4): "Today" / "Yesterday" from
+ * `Intl.RelativeTimeFormat` (`numeric: "auto"`) — the locale's own words, capitalised
+ * for a line that stands alone ("heute" → "Heute"; a script without case is left as
+ * is) — else the weekday and date, with the year only when it is not this one.
+ *
+ * Counted in calendar days, not 24-hour spans: 23:50 yesterday is "Yesterday" at
+ * 00:10 today.
+ */
+function DaySeparator({ date, now, locale }: { date: Date; now: number; locale: string | undefined }) {
+  const today = new Date(now);
+  const days = Math.round(
+    (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) -
+      Date.UTC(today.getFullYear(), today.getMonth(), today.getDate())) /
+      86_400_000,
+  );
+  let label: string;
+  if (days === 0 || days === -1) {
+    const word = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(days + 0, "day");
+    label = word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
+  } else {
+    label = formatDate(
+      date,
+      {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        ...(date.getFullYear() === today.getFullYear() ? null : { year: "numeric" }),
+      },
+      { locale },
+    );
+  }
+  const y = String(date.getFullYear()).padStart(4, "0");
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return (
+    <li data-day-separator="" className="flex items-center gap-3 py-1 text-xs text-[var(--text-muted)]">
+      <span aria-hidden className="h-px flex-1 bg-[var(--border)]" />
+      <time dateTime={`${y}-${m}-${d}`} className="font-medium">
+        {label}
+      </time>
+      <span aria-hidden className="h-px flex-1 bg-[var(--border)]" />
+    </li>
+  );
+}
+
 function toDate(value: Date | string | number): Date | null {
   const date = value instanceof Date ? value : new Date(value);
   return Number.isNaN(date.getTime()) ? null : date;
@@ -308,6 +450,10 @@ export interface FeedbackComposerProps {
    * Send the comment. Return the promise: the box clears when it RESOLVES, and only of
    * what was sent — text typed while it was in flight stays. A rejection keeps
    * everything for a retry (surface the error yourself; the composer stays quiet).
+   *
+   * `attachment` is the built-in field's one picture. Files the host uploaded ahead
+   * (`attachmentSlot`) are the host's state, read by the host here — and `body` may be
+   * `""` when `canSend` let an attachments-only message go.
    */
   onSend: (body: string, attachment: File | null) => void | Promise<unknown>;
   /** The send is in flight: a spinner on the button and no second send. */
@@ -315,6 +461,31 @@ export interface FeedbackComposerProps {
   /** Offer one picture with the comment (file, paste or `onCaptureScreenshot`).
    *  `true` for the defaults. Left out, the composer is text only. */
   attachment?: boolean | FeedbackComposerAttachment;
+  /**
+   * The host's own attach control, in the row with Send where the built-in field sits
+   * (after it, if both are on) — keksdose G5: its support chat uploads up to N files
+   * AHEAD of the send and sends their refs, which one `File` in `onSend` cannot carry.
+   * The slot is the host's picker plus the chips of what is uploaded; the upload, the
+   * refs and clearing them once `onSend` resolves stay with the host. Pair it with
+   * `canSend`.
+   */
+  attachmentSlot?: ReactNode;
+  /**
+   * Whether Send is enabled, over the composer's own rule (some text in the box) —
+   * for state the composer cannot see, i.e. `attachmentSlot`'s (keksdose G5): `true`
+   * with files ready makes an empty draft sendable (`onSend("", null)`), `false` while
+   * an upload is still running holds even a written reply back. Left out, the text
+   * decides. `pending` blocks a send either way.
+   */
+  canSend?: boolean;
+  /**
+   * Which key sends. `"mod-enter"` (default): Ctrl/⌘+Enter, the report dialog's and
+   * note editor's shortcut, with plain Enter a new line — feedback is written in
+   * paragraphs. `"enter"`: the chat way (keksdose G5) — Enter sends, Shift+Enter is a
+   * new line, Ctrl/⌘+Enter still sends; an Enter that confirms an IME composition
+   * (Japanese, Chinese input) is the IME's, never a send.
+   */
+  sendOn?: "mod-enter" | "enter";
   /** Rendered INSTEAD of the composer — the thread is closed, or read-only for this
    *  reader. */
   disabledReason?: ReactNode;
@@ -372,12 +543,15 @@ const isApple = () =>
  * The answer box under a {@link FeedbackThread}: a textarea, an optional picture,
  * and Send — Ctrl/⌘+Enter sends, the shortcut the report dialog and the note editor
  * use, so the habit carries across the feature. Plain Enter is a new line: feedback is
- * written in paragraphs, unlike a chat.
+ * written in paragraphs, unlike a chat — which `sendOn="enter"` is for (keksdose G5).
  */
 export function FeedbackComposer({
   onSend,
   pending = false,
   attachment,
+  attachmentSlot,
+  canSend: canSendProp,
+  sendOn = "mod-enter",
   disabledReason,
   rows = 3,
   placeholder,
@@ -445,7 +619,7 @@ export function FeedbackComposer({
     return <p className={cn("text-xs text-[var(--text-muted)]", className)}>{disabledReason}</p>;
   }
 
-  const canSend = draft.trim().length > 0 && !pending;
+  const canSend = (canSendProp ?? draft.trim().length > 0) && !pending;
   const send = () => {
     if (!canSend) return;
     const sentDraft = draft;
@@ -471,30 +645,48 @@ export function FeedbackComposer({
         value={draft}
         onChange={(event) => setDraft(event.target.value)}
         onKeyDown={(event) => {
-          if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+          if (event.key !== "Enter") return;
+          const mod = event.ctrlKey || event.metaKey;
+          // Under "enter": plain Enter sends, Shift+Enter falls through to the
+          // textarea's new line, and an Enter that ends an IME composition is the
+          // IME's (keyCode 229 is how Safari reports it after the composition ended).
+          const chat =
+            sendOn === "enter" &&
+            !event.shiftKey &&
+            !event.altKey &&
+            !event.nativeEvent.isComposing &&
+            event.keyCode !== 229;
+          if (mod || chat) {
             event.preventDefault();
             send();
           }
         }}
       />
       <div className="flex flex-wrap items-end justify-between gap-2">
-        {config ? (
-          <FeedbackAttachmentField
-            value={file}
-            onChange={setFile}
-            labels={config.labels}
-            accept={config.accept}
-            maxBytes={config.maxBytes}
-            onError={config.onError}
-            onCaptureScreenshot={config.onCaptureScreenshot}
-            // The box is this field's sibling; a paste in it bubbles to `root`.
-            pasteFrom={root}
-          />
+        {config || attachmentSlot != null ? (
+          <div className="flex min-w-0 flex-wrap items-end gap-2">
+            {config && (
+              <FeedbackAttachmentField
+                value={file}
+                onChange={setFile}
+                labels={config.labels}
+                accept={config.accept}
+                maxBytes={config.maxBytes}
+                onError={config.onError}
+                onCaptureScreenshot={config.onCaptureScreenshot}
+                // The box is this field's sibling; a paste in it bubbles to `root`.
+                pasteFrom={root}
+              />
+            )}
+            {attachmentSlot}
+          </div>
         ) : (
           <span />
         )}
         <div className="ms-auto flex items-center gap-2">
-          <span className="text-xs text-[var(--text-placeholder)]">{labels.sendHint(modifier)}</span>
+          <span className="text-xs text-[var(--text-placeholder)]">
+            {sendOn === "enter" ? labels.sendHintEnter : labels.sendHint(modifier)}
+          </span>
           <Button onClick={send} disabled={!canSend} aria-busy={pending || undefined}>
             {pending ? (
               <Spinner label={null} className="size-4" />

package/src/i18n/locales/de.ts

@@ -47,6 +47,8 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       send: "Senden",
       // German keyboards label the key "Strg".
       sendHint: (modifier) => `${modifier === "Ctrl" ? "Strg" : modifier} + Enter zum Senden`,
+      // "Umschalt", the German key label, as in the table's sort hint.
+      sendHintEnter: "Enter zum Senden, Umschalt + Enter für neue Zeile",
     },
     accountSettings: {
       profile: {

package/src/i18n/locales/es.ts

@@ -45,6 +45,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       placeholder: "Escribe un comentario…",
       send: "Enviar",
       sendHint: (modifier) => `${modifier} + Intro para enviar`,
+      sendHintEnter: "Intro para enviar, Mayús + Intro para una nueva línea",
     },
     accountSettings: {
       profile: {

package/src/i18n/locales/fr.ts

@@ -45,6 +45,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       placeholder: "Écrire un commentaire…",
       send: "Envoyer",
       sendHint: (modifier) => `${modifier} + Entrée pour envoyer`,
+      sendHintEnter: "Entrée pour envoyer, Maj + Entrée pour aller à la ligne",
     },
     accountSettings: {
       profile: {

package/src/i18n/locales/hu.ts

@@ -44,6 +44,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       placeholder: "Hozzászólás írása…",
       send: "Küldés",
       sendHint: (modifier) => `${modifier} + Enter a küldéshez`,
+      sendHintEnter: "Enter: küldés, Shift + Enter: új sor",
     },
     accountSettings: {
       profile: {

package/src/i18n/locales/it.ts

@@ -45,6 +45,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       placeholder: "Scrivi un commento…",
       send: "Invia",
       sendHint: (modifier) => `${modifier} + Invio per inviare`,
+      sendHintEnter: "Invio per inviare, Maiusc + Invio per andare a capo",
     },
     accountSettings: {
       profile: {

package/src/i18n/locales/zh.ts

@@ -44,6 +44,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       placeholder: "撰写评论…",
       send: "发送",
       sendHint: (modifier) => `${modifier} + Enter 发送`,
+      sendHintEnter: "Enter 发送，Shift + Enter 换行",
     },
     accountSettings: {
       profile: {