@lotics/ui 14.3.1 → 15.1.0

package/src/message_actions.tsx

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { IconButton } from "./icon_button";
+import { useLoticsLocale } from "./locale";
+
+/** The branch/version pager slot — the previous/next controls over a message's
+ *  sibling versions. Rendered only when `total > 1`. */
+export interface MessageActionsBranch {
+  current: number;
+  total: number;
+  onPrevious: () => void;
+  onNext: () => void;
+  disabled?: boolean;
+}
+
+export interface MessageActionsProps {
+  /** Copy the message. The bar OWNS the copied feedback — the icon flips to a
+   *  check and the tooltip flips to "Copied" for ~2s (the timer is cleared on
+   *  unmount). The handler only performs the clipboard write — it reads the
+   *  message content the bar cannot see. */
+  onCopy?: () => void | Promise<void>;
+  /** Regenerate the (assistant) message. */
+  onRegenerate?: () => void;
+  /** Edit the (user) message. */
+  onEdit?: () => void;
+  /** The sibling-version pager, absorbed as an internal part of the bar. */
+  branch?: MessageActionsBranch;
+}
+
+/**
+ * The single shared per-message action bar — the branch/version pager, copy
+ * (with the owned copied-feedback contract), regenerate, and edit. Each action
+ * renders ONLY when its handler is provided, so an assistant bar (copy +
+ * regenerate) and a user bar (copy + edit) are the same component with a
+ * different handler set; the pager renders when `branch.total > 1`. The bar
+ * hugs its content, so the parent controls the row's side (left for an
+ * assistant turn, right for a user bubble). Strings resolve through the
+ * `messageActions` locale slice.
+ */
+export function MessageActions(props: MessageActionsProps) {
+  const { onCopy, onRegenerate, onEdit, branch } = props;
+  const labels = useLoticsLocale().messageActions;
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  // The copied flag flips back after a beat; the timer is cleared on unmount so
+  // a bar that disappears (last message loses its actions) never sets state on
+  // an unmounted tree.
+  useEffect(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    await onCopy?.();
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 2000);
+  }, [onCopy]);
+
+  return (
+    <View style={styles.bar}>
+      {branch ? <BranchPager branch={branch} previousLabel={labels.previousVersion} nextLabel={labels.nextVersion} /> : null}
+      {onCopy ? (
+        <IconButton
+          testID="copy-button"
+          onPress={handleCopy}
+          icon={copied ? "check" : "copy"}
+          tooltip={copied ? labels.copied : labels.copy}
+        />
+      ) : null}
+      {onRegenerate ? (
+        <IconButton testID="regenerate-button" onPress={onRegenerate} icon="refresh-cw" tooltip={labels.regenerate} />
+      ) : null}
+      {onEdit ? (
+        <IconButton testID="edit-button" onPress={onEdit} icon="pencil" tooltip={labels.edit} />
+      ) : null}
+    </View>
+  );
+}
+
+// The sibling-version pager: [‹] {current} / {total} [›]. A single version has
+// nothing to page, so it renders nothing.
+function BranchPager({ branch, previousLabel, nextLabel }: { branch: MessageActionsBranch; previousLabel: string; nextLabel: string }) {
+  const { current, total, onPrevious, onNext, disabled } = branch;
+  if (total <= 1) return null;
+  return (
+    <View testID="branch-pagination" style={styles.branch}>
+      <IconButton testID="branch-prev" icon="chevron-left" tooltip={previousLabel} onPress={onPrevious} disabled={disabled || current <= 1} />
+      <Text size="xs" color="muted">
+        {current} / {total}
+      </Text>
+      <IconButton testID="branch-next" icon="chevron-right" tooltip={nextLabel} onPress={onNext} disabled={disabled || current >= total} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  branch: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+  },
+});

package/src/use_paste_files.ts

@@ -0,0 +1,14 @@
+import type { UsePasteFilesOptions } from "./file_intake";
+
+/**
+ * Native stand-in for the web clipboard sink.
+ *
+ * There is no document-level `paste` event on React Native — the OS clipboard is
+ * read imperatively — so the hook is a no-op and the surface's own Add-file CTA
+ * stays the intake path. The file exists so a shared screen can call
+ * `usePasteFiles` unconditionally without the DOM code ever reaching Metro.
+ *
+ * Web targets resolve `use_paste_files.web.ts` instead (Metro's `.web` extension
+ * resolution; the package's `react-native` export condition).
+ */
+export function usePasteFiles(_options: UsePasteFilesOptions): void {}

package/src/use_paste_files.web.ts

@@ -0,0 +1,101 @@
+import { useEffect, useRef } from "react";
+import { filesFromTransfer, selectPasteSink, type UsePasteFilesOptions } from "./file_intake";
+import { resolveRegionNode } from "./dom_region";
+
+/**
+ * Web variant: the document-level clipboard sink. Isolated into its own module
+ * so the native bundle (which resolves `use_paste_files.ts`) never references
+ * the DOM.
+ */
+
+type PasteSink = (event: ClipboardEvent) => void;
+
+interface RegisteredSink {
+  sink: PasteSink;
+  /** Evaluated at dispatch time: does this sink's region contain focus? A
+   *  region-less sink is always false — it routes by stack order alone. */
+  hasFocusWithin: () => boolean;
+}
+
+/**
+ * The active sinks, most recently subscribed LAST, behind ONE document listener.
+ * A paste is routed by `selectPasteSink`: the TOP-MOST sink whose region holds
+ * focus wins (so two file targets on one layer each take the paste when the user
+ * is working in them), else the top of the stack (right for modal stacking — a
+ * dialog over a screen).
+ */
+const sinks: RegisteredSink[] = [];
+let listening = false;
+
+function dispatch(event: ClipboardEvent) {
+  // An inner handler (a composer with its own attach path) already claimed it.
+  if (event.defaultPrevented) return;
+  const chosen = selectPasteSink(
+    sinks.map((registered) => ({ sink: registered.sink, focused: registered.hasFocusWithin() })),
+  );
+  chosen?.(event);
+}
+
+function pushSink(registered: RegisteredSink): () => void {
+  sinks.push(registered);
+  if (!listening) {
+    document.addEventListener("paste", dispatch);
+    listening = true;
+  }
+  return () => {
+    const index = sinks.lastIndexOf(registered);
+    if (index >= 0) sinks.splice(index, 1);
+    if (sinks.length === 0 && listening) {
+      document.removeEventListener("paste", dispatch);
+      listening = false;
+    }
+  };
+}
+
+/**
+ * Ctrl/Cmd+V adds files — the paste half of file intake, alongside the drop
+ * (`FileDropTarget` / `FileDropzone`) and the pick (`pickFiles`). Reads whatever
+ * the clipboard carries (a copied file, or a screenshot, which some engines
+ * surface only through `clipboardData.items`), filters it by `accept`, and hands
+ * it to `onFiles`.
+ *
+ * Scope it with `enabled` so only the open surface listens. Pass `region` (the
+ * ref of the surface's DOM region) to route by FOCUS: when the paste fires while
+ * focus is inside this region, this sink wins over a later-mounted one — so two
+ * peer file sections each take the paste when the user is in them. Without a
+ * region it routes by stack order (the modal-stacking default). A paste carrying
+ * NO acceptable file is left entirely alone — typing Ctrl+V in a text field
+ * still pastes text.
+ */
+export function usePasteFiles(options: UsePasteFilesOptions): void {
+  const { onFiles, accept, multiple = true, enabled = true, region } = options;
+
+  // Read through a ref so the sink subscribes ONCE per enabled window. Keying
+  // the effect on `onFiles` instead would re-push on every parent render —
+  // routine with an inline callback — and a background surface re-rendering
+  // would jump the stack and steal the next paste.
+  const latest = useRef({ onFiles, accept, multiple, region });
+  useEffect(() => {
+    latest.current = { onFiles, accept, multiple, region };
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof document === "undefined") return;
+    return pushSink({
+      hasFocusWithin: () => {
+        const node = resolveRegionNode(latest.current.region);
+        return node !== null && node.contains(document.activeElement);
+      },
+      sink: (event) => {
+        const settings = latest.current;
+        const files = filesFromTransfer(event.clipboardData, settings);
+        if (files.length === 0) return;
+        // Claim ONLY the paste actually consumed, so a text paste stays the
+        // browser's (and the focused input's) to handle.
+        event.preventDefault();
+        settings.onFiles(files);
+      },
+    });
+  }, [enabled]);
+}