rift-ds 1.3.0 → 1.4.0

package/components/Attachment/useAttachments.js

@@ -0,0 +1,201 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { matchesAccept, getFileKind } from "./fileTypes.js";
+function revokeAttachmentUrls(items) {
+  for (const item of items) {
+    if (item.previewSrc?.startsWith("blob:")) URL.revokeObjectURL(item.previewSrc);
+  }
+}
+const DEFAULT_EXCERPT_LENGTH = 240;
+let nextId = 0;
+const createId = () => `attachment-${Date.now().toString(36)}-${(nextId++).toString(36)}`;
+const fileIdentity = (file) => `${file.name}:${file.size}:${file.lastModified}`;
+function useAttachments(options = {}) {
+  const [items, setItems] = useState([]);
+  const itemsRef = useRef([]);
+  const sourcesRef = useRef(/* @__PURE__ */ new Map());
+  const abortsRef = useRef(/* @__PURE__ */ new Map());
+  const optionsRef = useRef(options);
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+  const commit = useCallback((next) => {
+    itemsRef.current = next;
+    setItems(next);
+  }, []);
+  const patch = useCallback(
+    (id, change) => {
+      if (!itemsRef.current.some((item) => item.id === id)) return;
+      commit(itemsRef.current.map((item) => item.id === id ? { ...item, ...change } : item));
+    },
+    [commit]
+  );
+  const startUpload = useCallback(
+    (id, file) => {
+      const upload = optionsRef.current.upload;
+      if (!upload) return;
+      const controller = new AbortController();
+      abortsRef.current.set(id, controller);
+      upload(file, {
+        signal: controller.signal,
+        onProgress: (percent) => {
+          if (!controller.signal.aborted)
+            patch(id, { progress: Math.max(0, Math.min(100, percent)) });
+        }
+      }).then(
+        () => {
+          if (controller.signal.aborted) return;
+          abortsRef.current.delete(id);
+          patch(id, { status: "ready", progress: void 0, error: void 0 });
+        },
+        (reason) => {
+          if (controller.signal.aborted) return;
+          abortsRef.current.delete(id);
+          patch(id, {
+            status: "error",
+            progress: void 0,
+            error: reason instanceof Error && reason.message !== "" ? reason.message : void 0
+          });
+        }
+      );
+    },
+    [patch]
+  );
+  const add = useCallback(
+    (files) => {
+      const { accept, maxSize, maxCount, allowDuplicates, upload, onReject } = optionsRef.current;
+      const rejections = [];
+      const accepted = [];
+      const known = /* @__PURE__ */ new Set();
+      for (const source of sourcesRef.current.values()) {
+        if (typeof source !== "string") known.add(fileIdentity(source));
+      }
+      for (const file of files) {
+        if (accept && !matchesAccept(file, accept)) {
+          rejections.push({ file, reason: "type" });
+        } else if (maxSize !== void 0 && file.size > maxSize) {
+          rejections.push({ file, reason: "size" });
+        } else if (!allowDuplicates && known.has(fileIdentity(file))) {
+          rejections.push({ file, reason: "duplicate" });
+        } else if (maxCount !== void 0 && itemsRef.current.length + accepted.length >= maxCount) {
+          rejections.push({ file, reason: "count" });
+        } else {
+          known.add(fileIdentity(file));
+          const kind = getFileKind(file);
+          accepted.push({
+            file,
+            item: {
+              id: createId(),
+              name: file.name,
+              kind,
+              size: file.size,
+              mimeType: file.type || void 0,
+              status: upload ? "uploading" : "ready",
+              previewSrc: kind === "image" ? URL.createObjectURL(file) : void 0
+            }
+          });
+        }
+      }
+      if (accepted.length > 0) {
+        for (const { item, file } of accepted) sourcesRef.current.set(item.id, file);
+        commit([...itemsRef.current, ...accepted.map(({ item }) => item)]);
+        for (const { item, file } of accepted) startUpload(item.id, file);
+      }
+      if (rejections.length > 0) onReject?.(rejections);
+      return rejections;
+    },
+    [commit, startUpload]
+  );
+  const addText = useCallback(
+    (text, name = "Pasted text") => {
+      const { maxCount, excerptLength = DEFAULT_EXCERPT_LENGTH } = optionsRef.current;
+      if (maxCount !== void 0 && itemsRef.current.length >= maxCount) return;
+      const id = createId();
+      sourcesRef.current.set(id, text);
+      commit([
+        ...itemsRef.current,
+        {
+          id,
+          name,
+          kind: "pasted",
+          // Bytes, not characters: the size line should match what a file of
+          // this text would weigh.
+          size: new Blob([text]).size,
+          mimeType: "text/plain",
+          status: "ready",
+          excerpt: text.trim().slice(0, excerptLength)
+        }
+      ]);
+    },
+    [commit]
+  );
+  const release = useCallback((dropped) => {
+    for (const item of dropped) {
+      abortsRef.current.get(item.id)?.abort();
+      abortsRef.current.delete(item.id);
+      sourcesRef.current.delete(item.id);
+    }
+    revokeAttachmentUrls(dropped);
+  }, []);
+  const remove = useCallback(
+    (id) => {
+      const dropped = itemsRef.current.filter((item) => item.id === id);
+      if (dropped.length === 0) return;
+      release(dropped);
+      commit(itemsRef.current.filter((item) => item.id !== id));
+    },
+    [commit, release]
+  );
+  const retry = useCallback(
+    (id) => {
+      const source = sourcesRef.current.get(id);
+      if (source === void 0 || typeof source === "string") return;
+      if (!optionsRef.current.upload) return;
+      patch(id, { status: "uploading", progress: void 0, error: void 0 });
+      startUpload(id, source);
+    },
+    [patch, startUpload]
+  );
+  const clear = useCallback(() => {
+    release(itemsRef.current);
+    commit([]);
+  }, [commit, release]);
+  const take = useCallback(() => {
+    const taken = itemsRef.current;
+    const files = [];
+    for (const item of taken) {
+      const source = sourcesRef.current.get(item.id);
+      if (source !== void 0 && typeof source !== "string") files.push(source);
+      abortsRef.current.get(item.id)?.abort();
+    }
+    abortsRef.current.clear();
+    sourcesRef.current.clear();
+    commit([]);
+    return { items: taken, files };
+  }, [commit]);
+  const getSource = useCallback((id) => sourcesRef.current.get(id), []);
+  useEffect(() => {
+    const aborts = abortsRef.current;
+    return () => {
+      for (const controller of aborts.values()) controller.abort();
+      aborts.clear();
+      revokeAttachmentUrls(itemsRef.current);
+      itemsRef.current = [];
+    };
+  }, []);
+  return {
+    items,
+    add,
+    addText,
+    remove,
+    retry,
+    clear,
+    take,
+    getSource,
+    isUploading: items.some((item) => item.status === "uploading")
+  };
+}
+export {
+  revokeAttachmentUrls,
+  useAttachments
+};

package/components/ChatMessage/ChatMessage.css

@@ -87,6 +87,30 @@
   color: var(--color-text-tertiary);
 }
 
+/* ============================================
+   ATTACHMENTS
+   Files sent with the turn: outside the bubble, above the text, on the
+   speaker's side (the body's own alignment places them).
+   ============================================ */
+
+.ds-chat-message__attachments {
+  display: flex;
+  /* The full row, not shrink-to-fit: the group inside sizes itself against
+     this width, and a row that took its width from the group would give it
+     nothing to measure */
+  width: 100%;
+  min-width: 0;
+}
+
+.ds-chat-message--user .ds-chat-message__attachments {
+  justify-content: flex-end;
+}
+
+/* A compact thread seats smaller tiles */
+.ds-chat-message--compact .ds-chat-message__attachments {
+  --ds-attachment-tile-size: 96px;
+}
+
 /* ============================================
    CONTENT
    ============================================ */

package/components/ChatMessage/ChatMessage.d.ts

@@ -49,6 +49,12 @@ type ChatMessageOwnProps = {
      * feedback row — rather than a secondary affordance.
      */
     showActions?: boolean;
+    /**
+     * Files sent with this turn, drawn outside the bubble on the speaker's
+     * side, above the text. Pass an AttachmentGroup. A turn that carries
+     * files and no text draws no bubble at all.
+     */
+    attachments?: React.ReactNode;
     /** Footer slot under the content — a sources row, an edited note. */
     footer?: React.ReactNode;
     /** Additional CSS classes */

package/components/ChatMessage/ChatMessage.js

@@ -16,6 +16,7 @@ const ChatMessage = React.forwardRef(
     pendingLabel = "Waiting for a reply",
     actions,
     showActions = false,
+    attachments,
     footer,
     className = "",
     children,
@@ -24,6 +25,10 @@ const ChatMessage = React.forwardRef(
     const baseClass = "ds-chat-message";
     const hasBubble = bubble ?? role === "user";
     const hideAvatar = grouped || !showAvatar;
+    const hasChildren = React.Children.toArray(children).some(
+      (child) => typeof child !== "string" || child.trim() !== ""
+    );
+    const showContent = pending || hasChildren || !attachments;
     const classes = [
       baseClass,
       `${baseClass}--${role}`,
@@ -39,10 +44,7 @@ const ChatMessage = React.forwardRef(
       avatar !== void 0 && /* @__PURE__ */ jsx(
         "span",
         {
-          className: [
-            `${baseClass}__gutter`,
-            hideAvatar ? `${baseClass}__gutter--hidden` : ""
-          ].filter(Boolean).join(" "),
+          className: [`${baseClass}__gutter`, hideAvatar ? `${baseClass}__gutter--hidden` : ""].filter(Boolean).join(" "),
           children: avatar
         }
       ),
@@ -51,7 +53,8 @@ const ChatMessage = React.forwardRef(
           author && /* @__PURE__ */ jsx("span", { className: `${baseClass}__author`, children: author }),
           timestamp && /* @__PURE__ */ jsx("span", { className: `${baseClass}__timestamp`, children: timestamp })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: pending ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pending`, role: "status", children: [
+        attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
+        showContent && /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: pending ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pending`, role: "status", children: [
           /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: pendingLabel }),
           /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dots`, "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }),

package/components/Composer/Composer.css

@@ -1,6 +1,6 @@
 /* ============================================
    COMPOSER COMPONENT
-   The chat input shell: attachments, auto-growing textarea, send/stop
+   The chat input shell: file tray, auto-growing textarea, send/stop
    ============================================ */
 
 /* The focus treatment animates a registered custom property, exactly as
@@ -319,7 +319,100 @@
 }
 
 /* ============================================
-   ATTACHMENTS ROW
+   FILE TRAY
+   The queued files: one row of square tiles that scrolls sideways rather
+   than growing the shell.
+   ============================================ */
+
+.ds-composer__tray {
+  /* How far the tiles sit in from the shell's edge. The tile corner below
+     is derived from it, so the two can only move together. */
+  --ds-composer-tray-inset: var(--padding-300);
+  /* Concentric with the shell: its radius, less the border, less the inset.
+     Floored so a squared theme never computes a negative corner. */
+  --ds-attachment-tile-radius: max(
+    var(--radius-100),
+    calc(var(--ds-composer-radius) - var(--border-025) - var(--ds-composer-tray-inset))
+  );
+
+  display: flex;
+  /* A scroller may be squeezed by the column it sits in; the tray keeps
+     its tiles' full height */
+  flex: none;
+  gap: var(--gap-200);
+  margin: 0;
+  /* The inset on every side but the foot, where the text zone's own top
+     padding takes over and only a sliver is kept so the scrollbar of an
+     overflowing row does not touch the tiles. The top inset also houses the part of a remove
+     button that hangs above its tile: a scroller clips what leaves it. */
+  padding: var(--ds-composer-tray-inset) var(--ds-composer-tray-inset) var(--padding-100);
+  list-style: none;
+  overflow-x: auto;
+  /* Tiles are objects, not text: the shell's text cursor stops at them */
+  cursor: default;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-bg-container-secondary) transparent;
+}
+
+.ds-composer__tray-item {
+  display: flex;
+  flex: none;
+}
+
+/* ============================================
+   DROP HINT
+   While files hover over the shell it says what letting go will do.
+   ============================================ */
+
+.ds-composer--dragging {
+  border-color: var(--color-input-border-selected);
+}
+
+.ds-composer__drop-hint {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: inherit;
+  background-color: var(--color-bg-container-primary-semi);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-primary);
+  /* Never a target: the shell hears the drag, and a hint that caught the
+     pointer would fire a leave on everything under it */
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-composer--dragging .ds-composer__drop-hint {
+  opacity: 1;
+}
+
+/* The picker itself is never seen: the attach button opens it */
+.ds-composer__file-input {
+  display: none;
+}
+
+.ds-composer__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ============================================
+   ATTACHMENTS ROW (legacy free-form slot)
    ============================================ */
 
 .ds-composer__attachments {

package/components/Composer/Composer.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { AttachmentItem } from '../Attachment/fileTypes';
 /** Props owned by Composer itself — everything else falls through to the <textarea>. */
 type ComposerOwnProps = {
     /** Current value for controlled use. Pair with `onValueChange`. */
@@ -13,10 +14,12 @@ type ComposerOwnProps = {
     onValueChange?: (value: string) => void;
     /**
      * Fires with the current value on Enter (without Shift) and on the send
-     * button — never while `streaming`, and never when the trimmed value is
-     * empty. Composer does not clear the value: the consumer owns it and clears
-     * it after a successful submit. Shadows the native `onSubmit` attribute,
-     * which never fires on a textarea anyway.
+     * button — never while `streaming`, never while a file in `files` is
+     * still uploading, and never when there is nothing to send. Text is
+     * enough, and so is a ready file on its own, in which case the value is
+     * an empty string. Composer does not clear the value: the consumer owns
+     * it and clears it after a successful submit. Shadows the native
+     * `onSubmit` attribute, which never fires on a textarea anyway.
      */
     onSubmit?: (value: string) => void;
     /**
@@ -63,11 +66,57 @@ type ComposerOwnProps = {
      */
     contextIcon?: string | React.ReactNode;
     /**
-     * Attachment row rendered above the textarea (DocumentChips). Fully
-     * controlled by the caller — Composer never owns the list.
+     * The files queued on this message, drawn as a scrolling row of square
+     * tiles above the textarea. Controlled by the caller: Composer draws the
+     * list and reports what was added or removed, and never stores a file.
+     * `useAttachments` is the usual owner.
+     */
+    files?: AttachmentItem[];
+    /**
+     * Fires with the files a person picked, pasted or dropped. Providing it
+     * arms all three: the attach button and its picker, file paste in the
+     * textarea, and drop on the shell.
+     */
+    onFilesSelected?: (files: File[]) => void;
+    /** Fires with the id of the file whose remove button was pressed. Its presence renders the buttons. */
+    onFileRemove?: (id: string) => void;
+    /** Fires with a queued file when its tile is pressed. Its presence makes the tiles buttons. */
+    onFileClick?: (item: AttachmentItem) => void;
+    /** File types the picker offers, in the native `accept` syntax. */
+    accept?: string;
+    /** Whether the picker allows several files at once. */
+    multiple?: boolean;
+    /** Whether the built-in attach button shows when `onFilesSelected` is set. */
+    attachButton?: boolean;
+    /**
+     * Pasted text at least this many characters long becomes an attachment
+     * instead of landing in the textarea. Off unless set, and inert without
+     * `onPasteAsAttachment`.
+     */
+    pasteThreshold?: number;
+    /** Receives pasted text that met `pasteThreshold`. */
+    onPasteAsAttachment?: (text: string) => void;
+    /** Accessible label for the attach button. */
+    attachLabel?: string;
+    /** Text shown on the shell while files are dragged over it. */
+    dropLabel?: string;
+    /** Accessible label for the list of queued files. */
+    filesLabel?: string;
+    /**
+     * Builds the sentence announced to assistive technology when files join
+     * the queue, leave it, or fail.
+     */
+    formatFileAnnouncement?: (change: {
+        type: 'added' | 'removed' | 'failed';
+        names: string[];
+    }) => string;
+    /**
+     * Free-form row rendered above the textarea, after any `files`.
+     *
+     * @deprecated Use `files` with `onFilesSelected` and `onFileRemove`, which draw the queue as tiles.
      */
     attachments?: React.ReactNode;
-    /** Leading actions on the left of the action bar (attach button, model picker). */
+    /** Leading actions on the left of the action bar, after the attach button (a model picker). */
     actions?: React.ReactNode;
     /**
      * Trailing actions on the right of the action bar, just before the send
@@ -85,7 +134,7 @@ export interface ComposerProps extends ComposerOwnProps, Omit<React.ComponentPro
 }
 /**
  * Composer is the chat input shell: an optional context note ("Looking at
- * “Page name”"), an attachments row, an auto-growing textarea, a leading
+ * “Page name”"), a tray of queued files, an auto-growing textarea, a leading
  * actions slot, and a trailing send button — the one sanctioned
  * primary-action teal in the chat set, because sending a message is a
  * genuine primary CTA. While `streaming`, send becomes stop and Enter