@particle-academy/react-fancy 5.36.2 → 5.38.0

package/dist/chunk-RYKPYILS.cjs

@@ -0,0 +1,699 @@
+'use strict';
+
+var chunkX7H75WVP_cjs = require('./chunk-X7H75WVP.cjs');
+var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function usePastePills({
+  threshold,
+  heldPastes: controlledHeldPastes,
+  onHeldPastesChange
+} = {}) {
+  const [heldPastes, setHeldPastes] = chunkSNHU2AI4_cjs.useControllableState(
+    controlledHeldPastes,
+    [],
+    onHeldPastesChange
+  );
+  const nextId = react.useRef(0);
+  const hold = react.useCallback(
+    (text) => {
+      let id;
+      do {
+        nextId.current += 1;
+        id = `paste-${nextId.current}`;
+      } while (heldPastes.some((p) => p.id === id));
+      setHeldPastes((current) => [...current, { id, text }]);
+      return id;
+    },
+    [heldPastes, setHeldPastes]
+  );
+  const handlePaste = react.useCallback(
+    (event) => {
+      if (!threshold || threshold <= 0) return false;
+      const text = event.clipboardData?.getData("text/plain") ?? "";
+      if (text.length < threshold) return false;
+      event.preventDefault();
+      hold(text);
+      return true;
+    },
+    [threshold, hold]
+  );
+  const expand = react.useCallback(
+    (id) => {
+      const found = heldPastes.find((p) => p.id === id);
+      if (found === void 0) return void 0;
+      setHeldPastes((current) => current.filter((p) => p.id !== id));
+      return found.text;
+    },
+    [heldPastes, setHeldPastes]
+  );
+  const remove = react.useCallback(
+    (id) => setHeldPastes((current) => current.filter((p) => p.id !== id)),
+    [setHeldPastes]
+  );
+  const clear = react.useCallback(() => setHeldPastes([]), [setHeldPastes]);
+  return { heldPastes, handlePaste, hold, expand, remove, clear };
+}
+
+// src/components/Composer/paste-markers.ts
+var PILL_MARK = "\uFFFC";
+var MARKER = /\uFFFC([^\uFFFC\n]+)\uFFFC/g;
+function pasteMarker(id) {
+  return `${PILL_MARK}${id}${PILL_MARK}`;
+}
+function segmentValue(value, known) {
+  const out = [];
+  let last = 0;
+  for (const match of value.matchAll(MARKER)) {
+    const id = match[1];
+    if (!known.has(id)) continue;
+    const start = match.index ?? 0;
+    if (start > last) out.push({ type: "text", text: value.slice(last, start) });
+    out.push({ type: "pill", id });
+    last = start + match[0].length;
+  }
+  if (last < value.length) out.push({ type: "text", text: value.slice(last) });
+  return out;
+}
+function markedIds(value) {
+  return Array.from(value.matchAll(MARKER), (m) => m[1]);
+}
+function expandMarkers(value, pastes, images) {
+  const text = new Map(pastes.map((p) => [p.id, p.text]));
+  const image = new Map(images.map((i) => [i.id, `[${i.label}]`]));
+  return value.replace(MARKER, (whole, id) => text.get(id) ?? image.get(id) ?? whole);
+}
+var HOST_ATTR = "data-react-fancy-composer-paste-host";
+function serialize(parent, keep) {
+  let out = "";
+  const children = Array.from(parent.childNodes);
+  children.forEach((node, i) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      out += (node.textContent ?? "").replace(/\u00A0/g, " ");
+      return;
+    }
+    if (!(node instanceof HTMLElement)) return;
+    const id = node.getAttribute(HOST_ATTR);
+    if (id !== null) {
+      if (keep(id)) out += pasteMarker(id);
+      return;
+    }
+    if (node.tagName === "BR") {
+      if (i !== children.length - 1) out += "\n";
+      return;
+    }
+    if (/^(DIV|P)$/.test(node.tagName) && out.length > 0 && !out.endsWith("\n")) {
+      out += "\n";
+    }
+    out += serialize(node, keep);
+  });
+  return out;
+}
+function makeHost(id) {
+  const host = document.createElement("span");
+  host.setAttribute("contenteditable", "false");
+  host.setAttribute(HOST_ATTR, id);
+  host.className = "inline-block align-baseline";
+  return host;
+}
+function ensureTrailingBreak(root, value) {
+  const last = root.lastChild;
+  const hasBreak = last instanceof HTMLElement && last.tagName === "BR";
+  if (value.endsWith("\n") && !hasBreak) root.append(document.createElement("br"));
+  if (!value.endsWith("\n") && hasBreak && value.length > 0) last.remove();
+}
+function placeCaretAfter(node) {
+  const selection = window.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  range.setStartAfter(node);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+var InlinePasteEditor = react.forwardRef(
+  function InlinePasteEditor2({ value, known, onChange, onSubmit, onPaste, onHostsChange, placeholder, disabled, className }, ref) {
+    const rootRef = react.useRef(null);
+    const lastValue = react.useRef(null);
+    const pending = react.useRef(/* @__PURE__ */ new Set());
+    const knownRef = react.useRef(known);
+    knownRef.current = known;
+    const keep = react.useCallback(
+      (id) => knownRef.current.has(id) || pending.current.has(id),
+      []
+    );
+    const reportHosts = react.useCallback(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const hosts = /* @__PURE__ */ new Map();
+      root.querySelectorAll(`[${HOST_ATTR}]`).forEach((el) => {
+        const id = el.getAttribute(HOST_ATTR);
+        if (keep(id)) hosts.set(id, el);
+      });
+      onHostsChange(hosts);
+    }, [keep, onHostsChange]);
+    const emit = react.useCallback(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const next = serialize(root, keep);
+      ensureTrailingBreak(root, next);
+      reportHosts();
+      if (next !== lastValue.current) {
+        lastValue.current = next;
+        onChange(next);
+      }
+    }, [keep, onChange, reportHosts]);
+    const caret = react.useCallback(() => {
+      const root = rootRef.current;
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range2 = selection.getRangeAt(0);
+        if (root.contains(range2.commonAncestorContainer)) return range2;
+      }
+      const range = document.createRange();
+      range.selectNodeContents(root);
+      range.collapse(false);
+      const last = root.lastChild;
+      if (last instanceof HTMLElement && last.tagName === "BR") {
+        range.setStartBefore(last);
+        range.collapse(true);
+      }
+      return range;
+    }, []);
+    const insert = react.useCallback(
+      (build) => {
+        const root = rootRef.current;
+        const range = caret();
+        range.deleteContents();
+        const head = document.createRange();
+        head.selectNodeContents(root);
+        head.setEnd(range.startContainer, range.startOffset);
+        const tail = document.createRange();
+        tail.selectNodeContents(root);
+        tail.setStart(range.endContainer, range.endOffset);
+        const nodes = build(
+          serialize(head.cloneContents(), () => true),
+          serialize(tail.cloneContents(), () => true)
+        );
+        if (nodes.length === 0) return;
+        const fragment = document.createDocumentFragment();
+        nodes.forEach((n) => fragment.append(n));
+        range.insertNode(fragment);
+        placeCaretAfter(nodes[nodes.length - 1]);
+        emit();
+      },
+      [caret, emit]
+    );
+    const insertText = react.useCallback(
+      (text) => insert(() => text ? [document.createTextNode(text)] : []),
+      [insert]
+    );
+    react.useLayoutEffect(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      for (const id of pending.current) if (known.has(id)) pending.current.delete(id);
+      const wanted = segmentValue(value, known).flatMap((s) => s.type === "pill" ? [s.id] : []).join(PILL_MARK);
+      const onScreen = Array.from(root.querySelectorAll(`[${HOST_ATTR}]`)).map((el) => el.getAttribute(HOST_ATTR)).filter((id) => id !== null && keep(id)).join(PILL_MARK);
+      if (value === lastValue.current && wanted === onScreen) return;
+      root.replaceChildren();
+      for (const segment of segmentValue(value, known)) {
+        if (segment.type === "text") {
+          root.append(document.createTextNode(segment.text));
+        } else {
+          root.append(makeHost(segment.id));
+        }
+      }
+      ensureTrailingBreak(root, value);
+      lastValue.current = value;
+      reportHosts();
+    }, [value, known, keep, reportHosts]);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        focus() {
+          const root = rootRef.current;
+          if (!root) return;
+          root.focus();
+          const range = caret();
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        },
+        replacePill(id, text) {
+          const root = rootRef.current;
+          const host = Array.from(
+            root?.querySelectorAll(`[${HOST_ATTR}]`) ?? []
+          ).find((el) => el.getAttribute(HOST_ATTR) === id);
+          if (!root || !host) return;
+          const node = document.createTextNode(text);
+          host.replaceWith(node);
+          root.focus();
+          placeCaretAfter(node);
+          emit();
+        }
+      }),
+      [caret, emit]
+    );
+    const handlePaste = (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      const pills = onPaste(e.clipboardData);
+      if (pills === null) {
+        insertText((e.clipboardData?.getData("text/plain") ?? "").replace(/\r\n?/g, "\n"));
+        return;
+      }
+      for (const { id } of pills) pending.current.add(id);
+      insert((before, after) => {
+        const nodes = [];
+        for (const { id, block } of pills) {
+          if (block) {
+            const precededByBreak = nodes.length === 0 ? before === "" || before.endsWith("\n") : nodes[nodes.length - 1].textContent === "\n";
+            if (!precededByBreak) nodes.push(document.createTextNode("\n"));
+            nodes.push(makeHost(id));
+            nodes.push(document.createTextNode("\n"));
+          } else {
+            nodes.push(makeHost(id));
+          }
+        }
+        const last = nodes[nodes.length - 1];
+        if (last.textContent === "\n" && after.startsWith("\n")) nodes.pop();
+        return nodes;
+      });
+    };
+    const handleKeyDown = (e) => {
+      if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+      e.preventDefault();
+      if (e.shiftKey) {
+        insertText("\n");
+      } else {
+        onSubmit();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      value === "" && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "pointer-events-none absolute left-4 top-3 text-sm text-zinc-400",
+          children: placeholder
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: rootRef,
+          "data-react-fancy-composer-input": "",
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-placeholder": placeholder,
+          "aria-disabled": disabled || void 0,
+          contentEditable: !disabled,
+          suppressContentEditableWarning: true,
+          onInput: emit,
+          onPaste: handlePaste,
+          onKeyDown: handleKeyDown,
+          className: chunkZU5Q77OT_cjs.cn(
+            "max-h-72 min-h-[4.5rem] w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent px-4 pt-3 text-sm outline-none",
+            className
+          )
+        }
+      )
+    ] });
+  }
+);
+var PREVIEW_CHARS = 20;
+function withSeparators(n) {
+  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+function endsOf(text, chars) {
+  if (text.length <= chars * 2) return text;
+  return `${text.slice(0, chars)} \u2026 ${text.slice(-chars)}`;
+}
+var PILL_BASE = "inline-flex select-none items-center rounded-md px-2 py-0.5 text-xs leading-5 transition-colors";
+var TEXT_PILL = "cursor-pointer bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700";
+var IMAGE_PILL = "bg-rose-100 font-medium text-rose-600 dark:bg-rose-500/20 dark:text-rose-300";
+var PREVIEW_BASE = "max-w-xs whitespace-pre-wrap break-all text-xs";
+function ImageThumb({ file }) {
+  const [url, setUrl] = react.useState(null);
+  react.useEffect(() => {
+    if (typeof URL.createObjectURL !== "function") return;
+    const made = URL.createObjectURL(file);
+    setUrl(made);
+    return () => URL.revokeObjectURL(made);
+  }, [file]);
+  return url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: "", className: "max-h-40 max-w-[16rem] rounded" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: file.name });
+}
+function InlinePill({
+  preview,
+  previewChars,
+  renderPastePreview,
+  classNames,
+  disabled,
+  onExpand
+}) {
+  const id = preview.kind === "text" ? preview.paste.id : preview.image.id;
+  const content = /* @__PURE__ */ jsxRuntime.jsx("span", { "data-react-fancy-composer-paste-pill-preview": id, children: renderPastePreview?.(preview) ?? (preview.kind === "text" ? endsOf(preview.paste.text, previewChars) : /* @__PURE__ */ jsxRuntime.jsx(ImageThumb, { file: preview.image.file })) });
+  const tooltipClass = chunkZU5Q77OT_cjs.cn(PREVIEW_BASE, classNames?.preview);
+  if (preview.kind === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkX7H75WVP_cjs.Tooltip, { content, className: tooltipClass, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "data-react-fancy-composer-image-pill": id,
+        role: "img",
+        "aria-label": preview.image.label,
+        className: chunkZU5Q77OT_cjs.cn(PILL_BASE, IMAGE_PILL, classNames?.pill, classNames?.imagePill),
+        children: preview.image.label
+      }
+    ) });
+  }
+  const count = withSeparators(preview.paste.text.length);
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkX7H75WVP_cjs.Tooltip, { content, className: tooltipClass, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      "data-react-fancy-composer-paste-pill": id,
+      onClick: () => onExpand(id),
+      disabled,
+      "aria-label": `Insert this pasted text, ${count} characters`,
+      className: chunkZU5Q77OT_cjs.cn(PILL_BASE, TEXT_PILL, classNames?.pill, classNames?.textPill),
+      children: [
+        "Pasted text \xB7 ",
+        count,
+        " characters"
+      ]
+    }
+  ) });
+}
+var Composer = react.forwardRef(
+  function Composer2({
+    value: controlledValue,
+    defaultValue = "",
+    onChange,
+    onSubmit,
+    placeholder = "Type a message...",
+    actions,
+    disabled = false,
+    className,
+    pasteThreshold,
+    pastePlacement = "above",
+    pasteImages = false,
+    previewChars = PREVIEW_CHARS,
+    renderPastePreview,
+    classNames,
+    heldPastes: controlledHeldPastes,
+    onHeldPastesChange,
+    heldImages: controlledHeldImages,
+    onHeldImagesChange
+  }, ref) {
+    const inline = pastePlacement === "inline";
+    const [value, setValue] = chunkSNHU2AI4_cjs.useControllableState(
+      controlledValue,
+      defaultValue,
+      onChange
+    );
+    const pills = usePastePills({
+      threshold: pasteThreshold,
+      heldPastes: controlledHeldPastes,
+      onHeldPastesChange
+    });
+    const heldPastes = pills.heldPastes;
+    const [heldImages, setHeldImages] = chunkSNHU2AI4_cjs.useControllableState(
+      controlledHeldImages,
+      [],
+      onHeldImagesChange
+    );
+    const textareaRef = react.useRef(null);
+    const editorRef = react.useRef(null);
+    const imageCount = react.useRef(0);
+    const known = react.useMemo(
+      () => /* @__PURE__ */ new Set([...heldPastes.map((p) => p.id), ...heldImages.map((i) => i.id)]),
+      [heldPastes, heldImages]
+    );
+    const handlePaste = react.useCallback(
+      (e) => {
+        pills.handlePaste(e);
+      },
+      [pills]
+    );
+    const holdImage = react.useCallback(
+      (file) => {
+        let id;
+        do {
+          imageCount.current += 1;
+          id = `image-${imageCount.current}`;
+        } while (heldImages.some((i) => i.id === id));
+        const image = { id, file, label: `Pasted image ${imageCount.current}` };
+        setHeldImages((current) => [...current, image]);
+        return id;
+      },
+      [heldImages, setHeldImages]
+    );
+    const decidePaste = react.useCallback(
+      (data) => {
+        const text = data?.getData("text/plain") ?? "";
+        if (pasteImages && text === "") {
+          const files = Array.from(data?.files ?? []).filter(
+            (f) => f.type.startsWith("image/")
+          );
+          if (files.length > 0) {
+            return files.map((file) => ({ id: holdImage(file), block: false }));
+          }
+        }
+        if (pasteThreshold && pasteThreshold > 0 && text.length >= pasteThreshold) {
+          return [{ id: pills.hold(text), block: true }];
+        }
+        return null;
+      },
+      [pasteImages, pasteThreshold, holdImage, pills]
+    );
+    const handleInlineChange = react.useCallback(
+      (next) => {
+        setValue(next);
+        const present = new Set(markedIds(next));
+        for (const paste of heldPastes) if (!present.has(paste.id)) pills.remove(paste.id);
+        if (heldImages.some((i) => !present.has(i.id))) {
+          setHeldImages((current) => current.filter((i) => present.has(i.id)));
+        }
+      },
+      [setValue, heldPastes, heldImages, pills, setHeldImages]
+    );
+    const [hosts, setHosts] = react.useState(/* @__PURE__ */ new Map());
+    const handleHostsChange = react.useCallback((next) => {
+      setHosts((prev) => {
+        if (prev.size === next.size && [...next].every(([id, el]) => prev.get(id) === el)) {
+          return prev;
+        }
+        return next;
+      });
+    }, []);
+    const composeOutgoing = react.useCallback(() => {
+      if (inline) return expandMarkers(value, heldPastes, heldImages);
+      return [value, ...heldPastes.map((p) => p.text)].filter(Boolean).join("\n\n");
+    }, [inline, value, heldPastes, heldImages]);
+    const hasContent = value.trim().length > 0 || !inline && heldPastes.length > 0;
+    const focusInput = react.useCallback(() => {
+      if (inline) editorRef.current?.focus();
+      else textareaRef.current?.focus();
+    }, [inline]);
+    const handleSubmit = react.useCallback(() => {
+      if (!hasContent || disabled) return;
+      const order = markedIds(value);
+      const images = inline ? order.flatMap((id) => heldImages.filter((i) => i.id === id)) : [];
+      onSubmit?.(composeOutgoing(), { images });
+      setValue("");
+      pills.clear();
+      setHeldImages([]);
+      focusInput();
+    }, [
+      hasContent,
+      disabled,
+      value,
+      inline,
+      heldImages,
+      onSubmit,
+      composeOutgoing,
+      setValue,
+      pills,
+      setHeldImages,
+      focusInput
+    ]);
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    const insertPaste = react.useCallback(
+      (paste) => {
+        const text = pills.expand(paste.id);
+        if (text === void 0) return;
+        setValue((current) => current ? `${current}
+
+${text}` : text);
+        textareaRef.current?.focus();
+      },
+      [pills, setValue]
+    );
+    const expandInline = react.useCallback(
+      (id) => {
+        const text = pills.expand(id);
+        if (text === void 0) return;
+        editorRef.current?.replacePill(id, text);
+      },
+      [pills]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-react-fancy-composer": "",
+        ref,
+        className: chunkZU5Q77OT_cjs.cn(
+          "rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+          disabled && "opacity-50",
+          className
+        ),
+        children: [
+          !inline && heldPastes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-react-fancy-composer-paste-pills": "",
+              className: "flex flex-wrap gap-1.5 px-3 pt-3",
+              children: heldPastes.map((paste) => (
+                // `group` + `group-hover` rather than hover state: the preview is
+                // presentation, and a useState for it would be one more thing an
+                // agent could desynchronise.
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "group relative inline-flex", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-composer-paste-pill": paste.id,
+                      onClick: () => insertPaste(paste),
+                      disabled,
+                      "aria-label": `Insert this pasted text, ${withSeparators(paste.text.length)} characters`,
+                      "aria-describedby": `${paste.id}-preview`,
+                      className: chunkZU5Q77OT_cjs.cn(
+                        "inline-flex items-center gap-1.5 rounded-full border border-zinc-200 bg-zinc-50 py-1 pl-2.5 pr-7 text-xs text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700",
+                        classNames?.pill,
+                        classNames?.textPill
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                        "Pasted text \xB7 ",
+                        withSeparators(paste.text.length),
+                        " characters"
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "data-react-fancy-composer-paste-pill-remove": paste.id,
+                      onClick: () => pills.remove(paste.id),
+                      disabled,
+                      "aria-label": "Discard this pasted text",
+                      className: chunkZU5Q77OT_cjs.cn(
+                        "absolute right-1 top-1/2 -translate-y-1/2 rounded-full px-1 text-xs text-zinc-400 transition-colors hover:text-zinc-700 dark:hover:text-zinc-100",
+                        classNames?.remove
+                      ),
+                      children: "\xD7"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      id: `${paste.id}-preview`,
+                      "data-react-fancy-composer-paste-pill-preview": paste.id,
+                      role: "tooltip",
+                      className: chunkZU5Q77OT_cjs.cn(
+                        "pointer-events-none absolute bottom-full left-0 z-10 mb-1 hidden max-w-xs whitespace-pre-wrap break-all rounded-md bg-zinc-900 px-2 py-1 text-xs text-white group-hover:block dark:bg-zinc-100 dark:text-zinc-900",
+                        classNames?.preview
+                      ),
+                      children: renderPastePreview?.({ kind: "text", paste }) ?? endsOf(paste.text, previewChars)
+                    }
+                  )
+                ] }, paste.id)
+              ))
+            }
+          ),
+          inline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InlinePasteEditor,
+              {
+                ref: editorRef,
+                value,
+                known,
+                onChange: handleInlineChange,
+                onSubmit: handleSubmit,
+                onPaste: decidePaste,
+                onHostsChange: handleHostsChange,
+                placeholder,
+                disabled,
+                className: classNames?.input
+              }
+            ),
+            Array.from(hosts, ([id, host]) => {
+              const paste = heldPastes.find((p) => p.id === id);
+              const image = paste ? void 0 : heldImages.find((i) => i.id === id);
+              const preview = paste ? { kind: "text", paste } : image ? { kind: "image", image } : null;
+              return preview ? reactDom.createPortal(
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  InlinePill,
+                  {
+                    preview,
+                    previewChars,
+                    renderPastePreview,
+                    classNames,
+                    disabled,
+                    onExpand: expandInline
+                  }
+                ),
+                host,
+                id
+              ) : null;
+            })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value,
+              onChange: (e) => setValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              placeholder,
+              disabled,
+              rows: 3,
+              className: chunkZU5Q77OT_cjs.cn(
+                "w-full resize-none bg-transparent px-4 pt-3 text-sm outline-none placeholder:text-zinc-400",
+                classNames?.input
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-t border-zinc-100 px-3 py-2 dark:border-zinc-800", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: actions }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleSubmit,
+                disabled: disabled || !hasContent,
+                className: "rounded-lg bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-50 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-100",
+                children: "Send"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Composer.displayName = "Composer";
+
+exports.Composer = Composer;
+exports.pasteMarker = pasteMarker;
+exports.usePastePills = usePastePills;
+//# sourceMappingURL=chunk-RYKPYILS.cjs.map
+//# sourceMappingURL=chunk-RYKPYILS.cjs.map