@particle-academy/react-fancy 5.64.1 → 5.66.0

package/dist/{chunk-BTNF3QBR.js → chunk-J44EV6SP.js}

@@ -1,11 +1,100 @@
 import { Tooltip } from './chunk-GR2WKBER.js';
-import { useInlinePaste, InlinePasteEditor, PastedFilesInput } from './chunk-NILA2LZY.js';
+import { useInlinePaste, InlinePasteEditor, PastedFilesInput, markedIds, expandMarkers } from './chunk-YIKXJWO4.js';
 import { Button } from './chunk-TLRRMYNV.js';
 import { Icon } from './chunk-J3A4Z2P7.js';
 import { cn } from './chunk-MMW2JGKZ.js';
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { forwardRef, useState, useRef, useCallback, useReducer, useMemo, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+// src/components/PromptInput/prompt-draft.ts
+var EMPTY_DRAFT = { v: 1, text: "", pills: [], attachments: [] };
+function readFile(raw, id) {
+  if (!raw || typeof raw !== "object") return null;
+  const f = raw;
+  const fileId = id ?? f.id;
+  if (typeof fileId !== "string" || typeof f.name !== "string") return null;
+  const out = {
+    id: fileId,
+    name: f.name,
+    type: typeof f.type === "string" ? f.type : "",
+    bytes: typeof f.bytes === "number" && Number.isFinite(f.bytes) ? f.bytes : 0
+  };
+  if (typeof f.ref === "string") out.ref = f.ref;
+  return out;
+}
+function readPill(raw) {
+  if (!raw || typeof raw !== "object") return null;
+  const p = raw;
+  if (typeof p.id !== "string") return null;
+  if (p.kind === "text" && typeof p.text === "string") {
+    return typeof p.label === "string" ? { kind: "text", id: p.id, text: p.text, label: p.label } : { kind: "text", id: p.id, text: p.text };
+  }
+  if (p.kind === "image" && typeof p.label === "string") {
+    const file = readFile(p.file, p.id);
+    return file ? { kind: "image", id: p.id, label: p.label, file } : null;
+  }
+  return null;
+}
+function readPromptDraft(raw, inline) {
+  if (!raw || typeof raw !== "object" || raw.v !== 1) return null;
+  const d = raw;
+  let text = typeof d.text === "string" ? d.text : "";
+  let pills = (Array.isArray(d.pills) ? d.pills : []).map(readPill).filter((p) => p !== null);
+  let attachments = (Array.isArray(d.attachments) ? d.attachments : []).map((a) => readFile(a)).filter((a) => a !== null);
+  const marked = new Set(markedIds(text));
+  pills = pills.filter((p) => marked.has(p.id));
+  if (!inline && pills.length > 0) {
+    const texts = pills.flatMap((p) => p.kind === "text" ? [{ id: p.id, text: p.text }] : []);
+    const images = pills.flatMap((p) => p.kind === "image" ? [p] : []);
+    text = expandMarkers(
+      text,
+      texts,
+      images.map((p) => ({ id: p.id, label: p.label }))
+    );
+    attachments = [...attachments, ...images.map((p) => p.file)];
+    pills = [];
+  }
+  return { v: 1, text, pills, attachments };
+}
+function clonePromptDraft(draft) {
+  return JSON.parse(JSON.stringify(draft));
+}
+function promptDraftFiles(draft) {
+  return [
+    ...draft.attachments,
+    ...draft.pills.flatMap((p) => p.kind === "image" ? [p.file] : [])
+  ];
+}
+function promptFileToDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+function promptDataUrlToFile(dataUrl, name, type) {
+  if (!dataUrl.startsWith("data:")) return void 0;
+  const comma = dataUrl.indexOf(",");
+  if (comma < 0) return void 0;
+  const meta = dataUrl.slice(5, comma);
+  const body = dataUrl.slice(comma + 1);
+  const mime = type || meta.split(";")[0] || "application/octet-stream";
+  try {
+    let bytes;
+    if (meta.endsWith(";base64")) {
+      const bin = atob(body);
+      bytes = new Uint8Array(bin.length);
+      for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+    } else {
+      bytes = new TextEncoder().encode(decodeURIComponent(body));
+    }
+    return new File([bytes], name, { type: mime });
+  } catch {
+    return void 0;
+  }
+}
+
 // src/utils/platform.ts
 var APPLE_UA_DATA_PLATFORMS = /* @__PURE__ */ new Set(["macos", "ios", "ipados"]);
 var APPLE_FREE_TEXT = /\b(mac|macintosh|iphone|ipad|ipod|darwin)/i;
@@ -32,7 +121,15 @@ var DEFAULT_MENTION_COLOR = {
   file: "#10b981",
   person: "#3b82f6"
 };
-function PromptInput({
+var PromptInput = forwardRef(function PromptInput2({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  draft: controlledDraft,
+  defaultDraft,
+  onDraftChange,
+  persistAttachment,
+  restoreAttachment,
   budgetTokens,
   commands = [],
   mentions = [],
@@ -58,9 +155,152 @@ function PromptInput({
   meterShowAt = 0.75,
   meterWarnAt = 0.9,
   ...rest
-}) {
-  const [text, setText] = useState("");
+}, ref) {
   const inline = pasteThreshold !== void 0 || pasteImages;
+  const draftControlled = controlledDraft !== void 0;
+  const [innerDraft, setInnerDraft] = useState(
+    () => defaultDraft && readPromptDraft(defaultDraft, inline) || {
+      ...EMPTY_DRAFT,
+      text: defaultValue ?? ""
+    }
+  );
+  const baseDraft = draftControlled ? controlledDraft : innerDraft;
+  const model = !draftControlled && controlledValue !== void 0 && controlledValue !== baseDraft.text ? { ...baseDraft, text: controlledValue } : baseDraft;
+  const modelRef = useRef(model);
+  modelRef.current = model;
+  const text = model.text;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onDraftChangeRef = useRef(onDraftChange);
+  onDraftChangeRef.current = onDraftChange;
+  const persistRef = useRef(persistAttachment);
+  persistRef.current = persistAttachment;
+  const commit = useCallback(
+    (update, notify = true) => {
+      const prev = modelRef.current;
+      const next = update(prev);
+      if (next === prev) return;
+      modelRef.current = next;
+      setInnerDraft(next);
+      if (!notify) return;
+      if (next.text !== prev.text) onChangeRef.current?.(next.text);
+      onDraftChangeRef.current?.(next);
+    },
+    []
+  );
+  const filesRef = useRef(/* @__PURE__ */ new Map());
+  const placeholdersRef = useRef(/* @__PURE__ */ new Map());
+  const requestedRef = useRef(/* @__PURE__ */ new Set());
+  const [filesVersion, bumpFiles] = useReducer((n) => n + 1, 0);
+  const setFileRef = useCallback(
+    (id, fileRef2) => commit((m) => {
+      const withRef = (f) => f.id === id ? { ...f, ref: fileRef2 } : f;
+      if (!promptDraftFiles(m).some((f) => f.id === id)) return m;
+      return {
+        ...m,
+        attachments: m.attachments.map(withRef),
+        pills: m.pills.map((p) => p.kind === "image" ? { ...p, file: withRef(p.file) } : p)
+      };
+    }),
+    [commit]
+  );
+  const persist = useCallback(
+    (file, entry) => {
+      const store = persistRef.current;
+      if (!store) return void 0;
+      let out;
+      try {
+        out = store(file, entry);
+      } catch (error) {
+        console.error("PromptInput: persistAttachment threw", error);
+        return void 0;
+      }
+      if (typeof out === "string") return out;
+      if (out && typeof out.then === "function") {
+        out.then(
+          (fileRef2) => {
+            if (typeof fileRef2 === "string") setFileRef(entry.id, fileRef2);
+          },
+          (error) => console.error("PromptInput: persistAttachment rejected", error)
+        );
+      }
+      return void 0;
+    },
+    [setFileRef]
+  );
+  const fileMeta = (id, file) => ({
+    id,
+    name: file.name,
+    type: file.type,
+    bytes: file.size
+  });
+  const fileFor = useCallback((entry) => {
+    const real = filesRef.current.get(entry.id);
+    if (real) return real;
+    let stand = placeholdersRef.current.get(entry.id);
+    if (!stand) {
+      stand = new File([], entry.name, { type: entry.type });
+      placeholdersRef.current.set(entry.id, stand);
+    }
+    return stand;
+  }, []);
+  const heldPastes = useMemo(
+    () => model.pills.flatMap(
+      (p) => p.kind === "text" ? [p.label !== void 0 ? { id: p.id, text: p.text, label: p.label } : { id: p.id, text: p.text }] : []
+    ),
+    [model.pills]
+  );
+  const heldImages = useMemo(
+    () => model.pills.flatMap(
+      (p) => p.kind === "image" ? [{ id: p.id, label: p.label, file: fileFor(p.file) }] : []
+    ),
+    // filesVersion: a restored File arrived, so the stand-in can be swapped out.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model.pills, fileFor, filesVersion]
+  );
+  const onHeldPastesChange = useCallback(
+    (next) => commit((m) => {
+      const current = m.pills.filter((p) => p.kind === "text");
+      if (current.length === next.length && current.every(
+        (p, i) => p.id === next[i].id && p.kind === "text" && p.text === next[i].text && p.label === next[i].label
+      )) {
+        return m;
+      }
+      return {
+        ...m,
+        pills: [
+          ...next.map(
+            (p) => p.label !== void 0 ? { kind: "text", id: p.id, text: p.text, label: p.label } : { kind: "text", id: p.id, text: p.text }
+          ),
+          ...m.pills.filter((p) => p.kind === "image")
+        ]
+      };
+    }),
+    [commit]
+  );
+  const onHeldImagesChange = useCallback(
+    (next) => commit((m) => {
+      const before = new Map(
+        m.pills.flatMap((p) => p.kind === "image" ? [[p.id, p]] : [])
+      );
+      if (before.size === next.length && next.every((i) => before.has(i.id))) return m;
+      const images = next.map((image) => {
+        const known = before.get(image.id);
+        if (known && known.kind === "image") return known;
+        filesRef.current.set(image.id, image.file);
+        const entry = fileMeta(image.id, image.file);
+        const fileRef2 = persist(image.file, entry);
+        return {
+          kind: "image",
+          id: image.id,
+          label: image.label,
+          file: fileRef2 === void 0 ? entry : { ...entry, ref: fileRef2 }
+        };
+      });
+      return { ...m, pills: [...m.pills.filter((p) => p.kind === "text"), ...images] };
+    }),
+    [commit, persist]
+  );
   const editorRef = useRef(null);
   const paste = useInlinePaste({
     pasteThreshold,
@@ -69,9 +309,55 @@ function PromptInput({
     renderPastePreview,
     classNames: pasteClassNames,
     disabled: false,
+    heldPastes,
+    onHeldPastesChange,
+    heldImages,
+    onHeldImagesChange,
     editorRef
   });
-  const [attachments, setAttachments] = useState([]);
+  const attachments = useMemo(
+    () => model.attachments.map((a) => ({
+      id: a.id,
+      name: a.name,
+      bytes: a.bytes,
+      file: filesRef.current.get(a.id),
+      type: a.type,
+      ...a.ref !== void 0 ? { ref: a.ref } : {}
+    })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model.attachments, filesVersion]
+  );
+  const restoreRef = useRef(restoreAttachment);
+  restoreRef.current = restoreAttachment;
+  useEffect(() => {
+    const restore = restoreRef.current;
+    if (!restore) return;
+    for (const entry of promptDraftFiles(model)) {
+      if (filesRef.current.has(entry.id) || requestedRef.current.has(entry.id)) continue;
+      requestedRef.current.add(entry.id);
+      const accept = (file) => {
+        if (!(file instanceof Blob)) return;
+        filesRef.current.set(entry.id, file);
+        bumpFiles();
+      };
+      let out;
+      try {
+        out = restore(entry);
+      } catch (error) {
+        console.error("PromptInput: restoreAttachment threw", error);
+        continue;
+      }
+      if (out && typeof out.then === "function") {
+        out.then(
+          accept,
+          (error) => console.error("PromptInput: restoreAttachment rejected", error)
+        );
+      } else {
+        accept(out);
+      }
+    }
+  }, [model]);
+  const setText = (next) => commit((m) => m.text === next ? m : { ...m, text: next });
   const [picker, setPicker] = useState(null);
   const taRef = useRef(null);
   const fileRef = useRef(null);
@@ -160,22 +446,68 @@ function PromptInput({
   const submit = () => {
     if (!text.trim() && attachments.length === 0) return;
     if (inline) {
-      const pastedImages = paste.imagesIn(text).map((image) => ({
-        id: image.id,
-        name: image.file.name,
-        bytes: image.file.size,
-        file: image.file,
-        type: image.file.type
-      }));
+      const pastedImages = paste.imagesIn(text).map((image) => {
+        const entry = model.pills.find((p) => p.id === image.id);
+        const meta = entry?.kind === "image" ? entry.file : fileMeta(image.id, image.file);
+        return {
+          id: image.id,
+          name: meta.name,
+          bytes: meta.bytes,
+          file: filesRef.current.get(image.id),
+          type: meta.type,
+          ...meta.ref !== void 0 ? { ref: meta.ref } : {}
+        };
+      });
       onSubmit(paste.expand(text), [...attachments, ...pastedImages]);
-      paste.clear();
     } else {
       onSubmit(text, attachments);
     }
-    setText("");
-    setAttachments([]);
+    commit(() => EMPTY_DRAFT);
+    filesRef.current.clear();
+    placeholdersRef.current.clear();
+    requestedRef.current.clear();
     setPicker(null);
   };
+  const pendingFocus = useRef(false);
+  const focusInput = useCallback(() => {
+    if (inline) {
+      editorRef.current?.focus();
+      return;
+    }
+    const ta = taRef.current;
+    if (!ta) return;
+    ta.focus();
+    ta.setSelectionRange(ta.value.length, ta.value.length);
+  }, [inline]);
+  useLayoutEffect(() => {
+    if (!pendingFocus.current) return;
+    pendingFocus.current = false;
+    focusInput();
+  });
+  useImperativeHandle(
+    ref,
+    () => ({
+      getDraft: () => clonePromptDraft(modelRef.current),
+      setDraft(next, options) {
+        const read = readPromptDraft(next, inline);
+        if (!read) {
+          console.warn(
+            "PromptInput: setDraft ignored a draft it does not recognise (expected { v: 1, ... }).",
+            next
+          );
+          return;
+        }
+        for (const entry of promptDraftFiles(read)) {
+          if (!filesRef.current.has(entry.id)) requestedRef.current.delete(entry.id);
+        }
+        setPicker(null);
+        commit(() => read, false);
+        if (options?.focus) pendingFocus.current = true;
+      },
+      focus: focusInput
+    }),
+    [inline, commit, focusInput]
+  );
   const onKeyDown = (e) => {
     if (picker) {
       if (e.key === "ArrowDown") {
@@ -209,16 +541,14 @@ function PromptInput({
   const attach = (list) => {
     const files = Array.from(list ?? []);
     if (files.length === 0) return;
-    setAttachments((cur) => [
-      ...cur,
-      ...files.map((f) => ({
-        id: crypto.randomUUID(),
-        name: f.name,
-        bytes: f.size,
-        file: f,
-        type: f.type
-      }))
-    ]);
+    const added = files.map((f) => {
+      const id = crypto.randomUUID();
+      filesRef.current.set(id, f);
+      const entry = fileMeta(id, f);
+      const fileRef2 = persist(f, entry);
+      return fileRef2 === void 0 ? entry : { ...entry, ref: fileRef2 };
+    });
+    commit((m) => ({ ...m, attachments: [...m.attachments, ...added] }));
   };
   const onDrop = (e) => {
     e.preventDefault();
@@ -254,6 +584,7 @@ function PromptInput({
         attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5 border-b border-zinc-200 px-3 py-2 dark:border-zinc-800", children: attachments.map((a) => /* @__PURE__ */ jsxs(
           "span",
           {
+            "data-react-fancy-prompt-input-attachment": a.id,
             className: "inline-flex items-center gap-1.5 rounded-md bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] px-2 py-0.5 text-[11px] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
             children: [
               /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: "xs", className: "text-zinc-400" }),
@@ -262,7 +593,10 @@ function PromptInput({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: () => setAttachments((cur) => cur.filter((x) => x.id !== a.id)),
+                  onClick: () => commit((m) => ({
+                    ...m,
+                    attachments: m.attachments.filter((x) => x.id !== a.id)
+                  })),
                   className: "opacity-50 hover:opacity-100",
                   "aria-label": "Remove attachment",
                   children: "\xD7"
@@ -304,7 +638,7 @@ function PromptInput({
               PastedFilesInput,
               {
                 name: pasteFilesName,
-                files: paste.imagesIn(text).map((i) => i.file)
+                files: paste.imagesIn(text).flatMap((i) => filesRef.current.has(i.id) ? [i.file] : [])
               }
             )
           ] }) : /* @__PURE__ */ jsx(
@@ -469,7 +803,7 @@ function PromptInput({
       ]
     }
   );
-}
+});
 function fmtTokens(n) {
   if (n < 1e3) return `${n}`;
   return `${(n / 1e3).toFixed(1)}k`;
@@ -480,6 +814,6 @@ function fmtSize(b) {
   return `${(b / 1024 / 1024).toFixed(1)} MB`;
 }
 
-export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel };
-//# sourceMappingURL=chunk-BTNF3QBR.js.map
-//# sourceMappingURL=chunk-BTNF3QBR.js.map
+export { PromptInput, browserPlatformHints, detectPlatform, modifierKeyLabel, promptDataUrlToFile, promptFileToDataUrl };
+//# sourceMappingURL=chunk-J44EV6SP.js.map
+//# sourceMappingURL=chunk-J44EV6SP.js.map