@pgege/kaboo-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -9,21 +9,33 @@ import {
   KabooInterruptHandler,
   MarkdownContent,
   MiniTable,
+  REFERENCES_STATE_KEY,
+  REFERENCE_METADATA_KEYS,
+  ReferenceStateSync,
+  ReferencesProvider,
   StructuredRenderersContext,
   Timeline,
   ToolRow,
+  attachmentToInputContent,
+  buildUserContent,
   directChildren,
   formatToolInput,
   formatToolResult,
+  mintReferenceId,
   normalizeResult,
+  objectToStateEntry,
   partitionChildrenByToolCall,
   pendingToolAnchorExists,
+  referenceMarker,
+  serializeReferences,
   topLevelGroups,
   useActivity,
   useDrill,
   useInterruptBridge,
-  useInterruptFor
-} from "./chunk-RXZWOBSI.js";
+  useInterruptFor,
+  useReferences,
+  withReferenceState
+} from "./chunk-4TDUEMK5.js";
 
 // src/context/KabooProvider.tsx
 import { CopilotKit } from "@copilotkit/react-core/v2";
@@ -36,6 +48,7 @@ function KabooProvider({
   interruptRenderers,
   disableInterruptHandler = false,
   disableInlineCards = false,
+  references,
   copilotKitProps,
   children
 }) {
@@ -47,17 +60,907 @@ function KabooProvider({
       threadId,
       useSingleEndpoint: false,
       ...copilotKitProps,
-      children: /* @__PURE__ */ jsx(KabooActivityProvider, { agentId: agent, structuredRenderers, children: /* @__PURE__ */ jsx(DrillProvider, { children: /* @__PURE__ */ jsxs(InterruptBridgeProvider, { children: [
+      children: /* @__PURE__ */ jsx(KabooActivityProvider, { agentId: agent, structuredRenderers, children: /* @__PURE__ */ jsx(DrillProvider, { children: /* @__PURE__ */ jsx(InterruptBridgeProvider, { children: /* @__PURE__ */ jsxs(ReferencesProvider, { providers: references, syncObjectStateTo: agent, children: [
         !disableInterruptHandler && /* @__PURE__ */ jsx(KabooInterruptHandler, { agentId: agent, renderers: interruptRenderers }),
         !disableInlineCards && /* @__PURE__ */ jsx(KabooInlineCards, {}),
         children
-      ] }) }) })
+      ] }) }) }) })
     }
   );
 }
 
+// src/references/ReferenceInput.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { CopilotChatInput, useAgent, useCopilotChatConfiguration } from "@copilotkit/react-core/v2";
+
+// src/references/uploadProvider.tsx
+var UPLOAD_MARKER = "__kabooUpload";
+var DEFAULT_MAX_SIZE = 20 * 1024 * 1024;
+function readAsBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = String(reader.result);
+      const comma = result.indexOf(",");
+      resolve(comma >= 0 ? result.slice(comma + 1) : result);
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+async function uploadFileToReference(file, config) {
+  const kind = config.kind ?? "file";
+  const id = mintReferenceId(kind);
+  const maxSize = config.maxSize ?? DEFAULT_MAX_SIZE;
+  if (file.size > maxSize) {
+    throw new Error(`File "${file.name}" exceeds the ${maxSize}-byte limit.`);
+  }
+  if (config.onUpload) {
+    const result = await config.onUpload(file);
+    const mimeType = result.mimeType ?? file.type ?? "application/octet-stream";
+    const source = result.type === "url" ? { url: result.value } : { data: result.value };
+    return { transport: "attachment", kind, id, name: file.name, mimeType, source };
+  }
+  const data = await readAsBase64(file);
+  return {
+    transport: "attachment",
+    kind,
+    id,
+    name: file.name,
+    mimeType: file.type || "application/octet-stream",
+    source: { data }
+  };
+}
+function uploadProvider(config = {}) {
+  return {
+    id: config.id ?? "upload",
+    label: config.label ?? "Upload",
+    [UPLOAD_MARKER]: {
+      kind: config.kind ?? "file",
+      maxSize: config.maxSize ?? DEFAULT_MAX_SIZE,
+      accept: config.accept,
+      onUpload: config.onUpload
+    }
+  };
+}
+function isUploadProvider(provider) {
+  return UPLOAD_MARKER in provider;
+}
+function buildAttachmentsConfig(config = {}) {
+  const kind = config.kind ?? "file";
+  return {
+    enabled: true,
+    accept: config.accept,
+    maxSize: config.maxSize,
+    onUpload: async (file) => {
+      const id = mintReferenceId(kind);
+      const kabooMeta = {
+        [REFERENCE_METADATA_KEYS.id]: id,
+        [REFERENCE_METADATA_KEYS.kind]: kind,
+        [REFERENCE_METADATA_KEYS.name]: file.name
+      };
+      if (config.onUpload) {
+        const result = await config.onUpload(file);
+        return { ...result, metadata: { ...result.metadata ?? {}, ...kabooMeta } };
+      }
+      const value = await readAsBase64(file);
+      return {
+        type: "data",
+        value,
+        mimeType: file.type || "application/octet-stream",
+        metadata: kabooMeta
+      };
+    }
+  };
+}
+
+// src/references/ReferenceInput.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CHIP_CLASS = "kaboo-chip";
+var NBSP = "\xA0";
+var AT_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/></svg>';
+var FILE_SVG = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>';
+var X_SVG = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>';
+var AttachIcon = /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
+var AtIcon = /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "4" }),
+  /* @__PURE__ */ jsx2("path", { d: "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" })
+] });
+var PlusIcon = /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M5 12h14M12 5v14" }) });
+var SearchIcon = /* @__PURE__ */ jsxs2("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ jsx2("path", { d: "m21 21-4.3-4.3" })
+] });
+var POPOVER_WIDTH = 320;
+var VIEWPORT_MARGIN = 8;
+var ANCHOR_GAP = 6;
+function computePosition(rect) {
+  if (!rect) return null;
+  const width = Math.min(POPOVER_WIDTH, window.innerWidth - VIEWPORT_MARGIN * 2);
+  const left = Math.max(
+    VIEWPORT_MARGIN,
+    Math.min(rect.left, window.innerWidth - width - VIEWPORT_MARGIN)
+  );
+  return { left, bottom: window.innerHeight - rect.top + ANCHOR_GAP, width };
+}
+function isImageMime(mime) {
+  return mime.startsWith("image/");
+}
+function previewSrc(ref) {
+  return "url" in ref.source ? ref.source.url : `data:${ref.mimeType};base64,${ref.source.data}`;
+}
+function serializeEditor(root) {
+  let out = "";
+  const walk = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      out += node.textContent ?? "";
+      return;
+    }
+    if (node instanceof HTMLElement) {
+      if (node.classList.contains(CHIP_CLASS)) {
+        const name = node.dataset.name ?? "";
+        out += node.dataset.transport === "object" ? `@${name}` : name;
+        return;
+      }
+      if (node.tagName === "BR") {
+        out += "\n";
+        return;
+      }
+      if (node.tagName === "DIV" && out.length > 0 && !out.endsWith("\n")) out += "\n";
+      node.childNodes.forEach(walk);
+    }
+  };
+  root.childNodes.forEach(walk);
+  return out.replace(new RegExp(NBSP, "g"), " ");
+}
+function KabooReferenceInput({ trigger = "@", ...inputProps }) {
+  const {
+    providers,
+    pending,
+    addReference,
+    removeReference,
+    clearReferences,
+    recordMessageReferences
+  } = useReferences();
+  const config = useCopilotChatConfiguration();
+  const configAgentId = config?.agentId;
+  const { agent } = useAgent(configAgentId ? { agentId: configAgentId } : void 0);
+  const placeholder = config?.labels?.chatInputPlaceholder ?? "Type a message...";
+  const wrapRef = useRef(null);
+  const trayRef = useRef(null);
+  const menuRef = useRef(null);
+  const editorRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const addBtnRef = useRef(null);
+  const searchRef = useRef(null);
+  const nativeChangeRef = useRef(void 0);
+  const anchorRef = useRef(() => null);
+  const tokenRef = useRef(null);
+  const replacingRef = useRef(null);
+  const replacingTrayIdRef = useRef(null);
+  const inlineIdsRef = useRef(/* @__PURE__ */ new Set());
+  const commitTargetRef = useRef("inline");
+  const [open, setOpen] = useState(false);
+  const [rows, setRows] = useState([]);
+  const [active, setActive] = useState(0);
+  const [query, setQuery] = useState("");
+  const [mode, setMode] = useState("token");
+  const [pos, setPos] = useState(null);
+  const placeholderRef = useRef(placeholder);
+  placeholderRef.current = placeholder;
+  const markEmpty = useCallback(() => {
+    const root = editorRef.current;
+    if (!root) return;
+    const isEmpty = root.querySelector(`.${CHIP_CLASS}`) === null && (root.textContent ?? "").trim().length === 0;
+    root.dataset.empty = isEmpty ? "true" : "false";
+  }, []);
+  const uploadProviderDef = useMemo(() => providers.find(isUploadProvider), [providers]);
+  const searchable = useMemo(() => providers.filter((p) => typeof p.search === "function"), [providers]);
+  const actionProviders = useMemo(
+    () => providers.filter((p) => typeof p.search !== "function"),
+    [providers]
+  );
+  const buildRows = useCallback(
+    async (q) => {
+      const next = [];
+      for (const provider of actionProviders) {
+        const label = isUploadProvider(provider) ? "Attach" : provider.label;
+        if (!q || label.toLowerCase().includes(q.toLowerCase())) {
+          next.push({ kind: "action", group: label, provider });
+        }
+      }
+      for (const provider of searchable) {
+        try {
+          const items = await provider.search(q);
+          for (const item of items) next.push({ kind: "item", group: provider.label, provider, item });
+        } catch {
+        }
+      }
+      return next;
+    },
+    [actionProviders, searchable]
+  );
+  const refresh = useCallback(
+    async (q) => {
+      const next = await buildRows(q);
+      setRows(next);
+      setActive(0);
+    },
+    [buildRows]
+  );
+  const close = useCallback(() => {
+    setOpen(false);
+    setRows([]);
+    setQuery("");
+    tokenRef.current = null;
+    replacingRef.current = null;
+    replacingTrayIdRef.current = null;
+  }, []);
+  const emit = useCallback(() => {
+    const root = editorRef.current;
+    if (!root) return;
+    const text = serializeEditor(root);
+    markEmpty();
+    nativeChangeRef.current?.({ target: { value: text } });
+  }, [markEmpty]);
+  const reconcile = useCallback(() => {
+    const root = editorRef.current;
+    if (!root) return;
+    const live = new Set(
+      Array.from(root.querySelectorAll(`.${CHIP_CLASS}`)).map((c) => c.dataset.refId)
+    );
+    for (const id of Array.from(inlineIdsRef.current)) {
+      if (!live.has(id)) {
+        inlineIdsRef.current.delete(id);
+        removeReference(id);
+      }
+    }
+  }, [removeReference]);
+  const focusEditor = useCallback(() => editorRef.current?.focus(), []);
+  const createChip = useCallback((ref) => {
+    const chip = document.createElement("span");
+    chip.className = `${CHIP_CLASS} ${CHIP_CLASS}-${ref.transport}`;
+    chip.contentEditable = "false";
+    chip.dataset.refId = ref.id;
+    chip.dataset.kind = ref.kind;
+    chip.dataset.name = ref.name;
+    chip.dataset.transport = ref.transport;
+    chip.title = ref.name;
+    if (ref.transport === "attachment" && isImageMime(ref.mimeType)) {
+      const img = document.createElement("img");
+      img.className = "kaboo-chip-thumb";
+      img.src = previewSrc(ref);
+      img.alt = ref.name;
+      chip.appendChild(img);
+    } else {
+      const ic = document.createElement("span");
+      ic.className = "kaboo-chip-ic";
+      ic.innerHTML = ref.transport === "object" ? AT_SVG : FILE_SVG;
+      chip.appendChild(ic);
+    }
+    const label = document.createElement("span");
+    label.className = "kaboo-chip-label";
+    label.textContent = ref.name;
+    chip.appendChild(label);
+    const x = document.createElement("button");
+    x.type = "button";
+    x.className = "kaboo-chip-x";
+    x.setAttribute("aria-label", `Remove ${ref.name}`);
+    x.innerHTML = X_SVG;
+    x.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handlersRef.current.removeChip(chip);
+    });
+    chip.appendChild(x);
+    chip.addEventListener("mousedown", (e) => {
+      if (e.target === x || x.contains(e.target)) return;
+      e.preventDefault();
+      handlersRef.current.replaceChip(chip);
+    });
+    return chip;
+  }, []);
+  const insertAtCaret = useCallback((node) => {
+    const root = editorRef.current;
+    if (!root) return;
+    const sel = window.getSelection();
+    let range;
+    if (sel && sel.rangeCount > 0 && root.contains(sel.focusNode)) {
+      range = sel.getRangeAt(0);
+    } else {
+      range = document.createRange();
+      range.selectNodeContents(root);
+      range.collapse(false);
+    }
+    range.collapse(false);
+    const space = document.createTextNode(NBSP);
+    range.insertNode(space);
+    range.insertNode(node);
+    const after = document.createRange();
+    after.setStartAfter(space);
+    after.collapse(true);
+    sel?.removeAllRanges();
+    sel?.addRange(after);
+  }, []);
+  const placeChip = useCallback(
+    (ref) => {
+      const chip = createChip(ref);
+      const replacing = replacingRef.current;
+      if (replacing) {
+        const oldId = replacing.dataset.refId;
+        if (oldId && oldId !== ref.id) removeReference(oldId);
+        replacing.replaceWith(chip);
+        replacingRef.current = null;
+      } else if (tokenRef.current) {
+        const { node, start } = tokenRef.current;
+        const sel = window.getSelection();
+        const range = document.createRange();
+        range.setStart(node, Math.min(start, node.textContent?.length ?? 0));
+        if (sel && sel.focusNode && editorRef.current?.contains(sel.focusNode)) {
+          range.setEnd(sel.focusNode, sel.focusOffset);
+        } else {
+          range.setEnd(node, node.textContent?.length ?? 0);
+        }
+        range.deleteContents();
+        const space = document.createTextNode(NBSP);
+        range.insertNode(space);
+        range.insertNode(chip);
+        const after = document.createRange();
+        after.setStartAfter(space);
+        after.collapse(true);
+        sel?.removeAllRanges();
+        sel?.addRange(after);
+        tokenRef.current = null;
+      } else {
+        insertAtCaret(chip);
+      }
+      emit();
+    },
+    [createChip, insertAtCaret, removeReference, emit]
+  );
+  const commit = useCallback(
+    (ref, target) => {
+      addReference(ref);
+      if (target === "inline") {
+        inlineIdsRef.current.add(ref.id);
+        placeChip(ref);
+      } else {
+        const oldId = replacingTrayIdRef.current;
+        if (oldId && oldId !== ref.id) removeReference(oldId);
+        replacingTrayIdRef.current = null;
+        inlineIdsRef.current.delete(ref.id);
+      }
+    },
+    [addReference, placeChip, removeReference]
+  );
+  const openFilePicker = useCallback(
+    (provider, target) => {
+      const input = fileInputRef.current;
+      if (!input) return;
+      const cfg = isUploadProvider(provider) ? provider[UPLOAD_MARKER] : {};
+      input.accept = cfg.accept ?? "";
+      input.onchange = async () => {
+        const file = input.files?.[0];
+        input.value = "";
+        if (!file) return;
+        try {
+          const ref = await uploadFileToReference(file, cfg);
+          commit(ref, target);
+        } catch (err) {
+          console.error("[kaboo] upload failed", err);
+        }
+      };
+      input.click();
+    },
+    [commit]
+  );
+  const stripToken = useCallback(() => {
+    const t = tokenRef.current;
+    if (!t) return;
+    const sel = window.getSelection();
+    const range = document.createRange();
+    range.setStart(t.node, Math.min(t.start, t.node.textContent?.length ?? 0));
+    if (sel?.focusNode && editorRef.current?.contains(sel.focusNode)) {
+      range.setEnd(sel.focusNode, sel.focusOffset);
+    } else {
+      range.setEnd(t.node, t.node.textContent?.length ?? 0);
+    }
+    range.deleteContents();
+    emit();
+  }, [emit]);
+  const select = useCallback(
+    async (row) => {
+      const target = commitTargetRef.current;
+      if (row.kind === "action") {
+        const provider = row.provider;
+        if (target === "inline") stripToken();
+        close();
+        if (isUploadProvider(provider)) openFilePicker(provider, target);
+        else await provider.onSelect?.({ id: provider.id, label: provider.label });
+        focusEditor();
+        return;
+      }
+      await row.provider.onSelect?.(row.item);
+      const ref = row.provider.toReference?.(row.item);
+      if (ref) commit(ref, target);
+      close();
+      focusEditor();
+    },
+    [stripToken, close, openFilePicker, focusEditor, commit]
+  );
+  const openFromToken = useCallback(
+    (q) => {
+      commitTargetRef.current = "inline";
+      replacingRef.current = null;
+      replacingTrayIdRef.current = null;
+      anchorRef.current = () => {
+        const t = tokenRef.current;
+        return t ? caretRectFor(t.node, t.start) : null;
+      };
+      setMode("token");
+      setQuery(q);
+      setPos(computePosition(anchorRef.current()));
+      setOpen(true);
+      void refresh(q);
+    },
+    [refresh]
+  );
+  const toggleFromButton = useCallback(() => {
+    setOpen((prev) => {
+      if (prev) {
+        close();
+        return false;
+      }
+      commitTargetRef.current = "tray";
+      tokenRef.current = null;
+      replacingRef.current = null;
+      replacingTrayIdRef.current = null;
+      anchorRef.current = () => addBtnRef.current?.getBoundingClientRect() ?? null;
+      setMode("menu");
+      setQuery("");
+      setPos(computePosition(anchorRef.current()));
+      void refresh("");
+      return true;
+    });
+  }, [refresh, close]);
+  const onSearch = useCallback(
+    (value) => {
+      setQuery(value);
+      void refresh(value);
+    },
+    [refresh]
+  );
+  const handleNavKey = useCallback(
+    (e) => {
+      if (!open || rows.length === 0) return false;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActive((a) => (a + 1) % rows.length);
+        return true;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActive((a) => (a - 1 + rows.length) % rows.length);
+        return true;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        void select(rows[active]);
+        return true;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        focusEditor();
+        return true;
+      }
+      return false;
+    },
+    [open, rows, active, select, close, focusEditor]
+  );
+  const replaceChip = useCallback(
+    (chip) => {
+      commitTargetRef.current = "inline";
+      replacingRef.current = chip;
+      replacingTrayIdRef.current = null;
+      tokenRef.current = null;
+      anchorRef.current = () => chip.getBoundingClientRect();
+      setMode("menu");
+      setQuery("");
+      setPos(computePosition(chip.getBoundingClientRect()));
+      setOpen(true);
+      void refresh("");
+    },
+    [refresh]
+  );
+  const replaceTrayChip = useCallback(
+    (id, anchorEl) => {
+      commitTargetRef.current = "tray";
+      replacingTrayIdRef.current = id;
+      replacingRef.current = null;
+      tokenRef.current = null;
+      anchorRef.current = () => anchorEl.getBoundingClientRect();
+      setMode("menu");
+      setQuery("");
+      setPos(computePosition(anchorEl.getBoundingClientRect()));
+      setOpen(true);
+      void refresh("");
+    },
+    [refresh]
+  );
+  const removeChip = useCallback(
+    (chip) => {
+      const id = chip.dataset.refId;
+      const next = chip.nextSibling;
+      chip.remove();
+      if (next && next.nodeType === Node.TEXT_NODE && next.textContent === NBSP) next.remove();
+      if (id) {
+        inlineIdsRef.current.delete(id);
+        removeReference(id);
+      }
+      emit();
+      focusEditor();
+    },
+    [removeReference, emit, focusEditor]
+  );
+  const handlersRef = useRef({ removeChip, replaceChip });
+  handlersRef.current = { removeChip, replaceChip };
+  const ctl = { open, rows, active, trigger, openFromToken, toggleFromButton, close, handleNavKey };
+  const ctlRef = useRef(ctl);
+  ctlRef.current = ctl;
+  const readToken = useCallback(() => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return null;
+    const node = sel.focusNode;
+    if (!node || node.nodeType !== Node.TEXT_NODE) return null;
+    const text = node.textContent ?? "";
+    const before = text.slice(0, sel.focusOffset);
+    const at = before.lastIndexOf(ctlRef.current.trigger);
+    if (at < 0) return null;
+    const prev = at > 0 ? before[at - 1] : "";
+    if (prev && !/\s/.test(prev)) return null;
+    const q = before.slice(at + 1);
+    if (/\s/.test(q)) return null;
+    return { node, start: at, query: q };
+  }, []);
+  const onEditorInput = useCallback(() => {
+    reconcile();
+    emit();
+    const token = readToken();
+    if (token) {
+      tokenRef.current = { node: token.node, start: token.start };
+      const c = ctlRef.current;
+      if (!c.open || mode === "token") openFromToken(token.query);
+      else {
+        setQuery(token.query);
+        void refresh(token.query);
+      }
+    } else if (ctlRef.current.open && mode === "token") {
+      close();
+    }
+  }, [reconcile, emit, readToken, openFromToken, refresh, mode, close]);
+  const TextAreaSlot = useMemo(
+    () => forwardRef(function KabooRefEditor(props, ref) {
+      const { onChange, onKeyDown, className, autoFocus } = props;
+      nativeChangeRef.current = onChange;
+      const setRefs = (node) => {
+        editorRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      };
+      const handleKeyDown = (e) => {
+        if (ctlRef.current.handleNavKey(e)) return;
+        onKeyDown?.(e);
+      };
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: setRefs,
+          role: "textbox",
+          "aria-multiline": "true",
+          tabIndex: 0,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          "data-placeholder": placeholderRef.current,
+          className: `kaboo-ref-editor cpk:bg-transparent cpk:outline-none cpk:antialiased cpk:leading-relaxed cpk:text-[16px] ${className ?? ""}`,
+          "data-empty": "true",
+          autoFocus,
+          onInput: onEditorInput,
+          onKeyDown: handleKeyDown
+        }
+      );
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const AddMenuButtonSlot = useMemo(
+    () => function KabooRefAddButton(props) {
+      return /* @__PURE__ */ jsx2(
+        "button",
+        {
+          ref: addBtnRef,
+          type: "button",
+          className: "kaboo-ref-add",
+          "aria-label": "Add attachment or reference",
+          "aria-haspopup": "listbox",
+          "aria-expanded": ctlRef.current.open,
+          disabled: props.disabled,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => ctlRef.current.toggleFromButton(),
+          children: PlusIcon
+        }
+      );
+    },
+    []
+  );
+  useEffect(() => {
+    if (!open) return;
+    const onDocMouseDown = (e) => {
+      const target = e.target;
+      if (wrapRef.current?.contains(target) || menuRef.current?.contains(target)) return;
+      close();
+    };
+    const onDocKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    document.addEventListener("keydown", onDocKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocMouseDown);
+      document.removeEventListener("keydown", onDocKey);
+    };
+  }, [open, close]);
+  useEffect(() => {
+    if (!open) return;
+    const reposition = () => setPos(computePosition(anchorRef.current()));
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  }, [open]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    setPos(computePosition(anchorRef.current()));
+    if (mode === "menu") searchRef.current?.focus();
+  }, [open, mode, rows.length]);
+  useEffect(() => {
+    const target = agent;
+    if (!target || typeof target.subscribe !== "function") return;
+    const sub = target.subscribe({ onRunStartedEvent: () => clearReferences() });
+    return () => sub?.unsubscribe?.();
+  }, [agent, clearReferences]);
+  useEffect(() => {
+    const root = editorRef.current;
+    if (!root) return;
+    if ((inputProps.value ?? "") === "" && root.childNodes.length > 0) {
+      root.textContent = "";
+      markEmpty();
+    }
+  }, [inputProps.value, markEmpty]);
+  const handleSubmit = useCallback(
+    (message) => {
+      const text = message.trim();
+      const { attachmentParts } = serializeReferences(pending);
+      const target = agent;
+      if (text.length === 0 && attachmentParts.length === 0) return;
+      if (!target?.addMessage || !target.runAgent) {
+        inputProps.onSubmitMessage?.(message);
+        close();
+        return;
+      }
+      const content = attachmentParts.length > 0 ? buildUserContent(text, attachmentParts) : text;
+      const id = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2);
+      recordMessageReferences(
+        id,
+        pending.filter((r) => r.transport === "object")
+      );
+      target.addMessage({ id, role: "user", content });
+      void Promise.resolve(target.runAgent()).catch(
+        (err) => console.error("[kaboo] runAgent failed", err)
+      );
+      const root = editorRef.current;
+      if (root) root.textContent = "";
+      markEmpty();
+      close();
+    },
+    [pending, agent, inputProps, close, markEmpty, recordMessageReferences]
+  );
+  const trayRefs = pending.filter((r) => !inlineIdsRef.current.has(r.id));
+  useLayoutEffect(() => {
+    const tray = trayRef.current;
+    const wrap = wrapRef.current;
+    if (!tray || !wrap) return;
+    const align = () => {
+      const pill = wrap.querySelector(".copilotKitInput");
+      if (!pill) return;
+      const pr = pill.getBoundingClientRect();
+      const wr = wrap.getBoundingClientRect();
+      tray.style.marginLeft = `${Math.max(0, pr.left - wr.left)}px`;
+      tray.style.width = `${pr.width}px`;
+    };
+    align();
+    window.addEventListener("resize", align);
+    return () => window.removeEventListener("resize", align);
+  }, [trayRefs.length]);
+  return /* @__PURE__ */ jsxs2("div", { ref: wrapRef, className: "kaboo-ref-input", children: [
+    /* @__PURE__ */ jsx2("input", { ref: fileInputRef, type: "file", className: "kaboo-ref-file", tabIndex: -1, "aria-hidden": "true" }),
+    trayRefs.length > 0 && /* @__PURE__ */ jsx2("div", { ref: trayRef, className: "kaboo-ref-tray", children: trayRefs.map((r) => /* @__PURE__ */ jsx2(
+      TrayChip,
+      {
+        reference: r,
+        onRemove: () => removeReference(r.id),
+        onReplace: (el) => replaceTrayChip(r.id, el)
+      },
+      r.id
+    )) }),
+    /* @__PURE__ */ jsx2(
+      CopilotChatInput,
+      {
+        ...inputProps,
+        onSubmitMessage: handleSubmit,
+        textArea: TextAreaSlot,
+        addMenuButton: AddMenuButtonSlot
+      }
+    ),
+    open && pos && createPortal(
+      /* @__PURE__ */ jsx2(
+        ReferencePopover,
+        {
+          ref: menuRef,
+          pos,
+          rows,
+          active,
+          query,
+          mode,
+          searchRef,
+          hasUpload: !!uploadProviderDef,
+          onSearch,
+          onSearchKeyDown: handleNavKey,
+          onHover: setActive,
+          onPick: select
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function TrayChip({
+  reference,
+  onRemove,
+  onReplace
+}) {
+  const ref = useRef(null);
+  const isImage = reference.transport === "attachment" && isImageMime(reference.mimeType);
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ref,
+      className: `kaboo-chip ${CHIP_CLASS}-${reference.transport} kaboo-chip-tray`,
+      title: reference.name,
+      role: "button",
+      tabIndex: 0,
+      onMouseDown: (e) => {
+        e.preventDefault();
+        if (ref.current) onReplace(ref.current);
+      },
+      children: [
+        isImage ? /* @__PURE__ */ jsx2(
+          "img",
+          {
+            className: "kaboo-chip-thumb",
+            src: previewSrc(reference),
+            alt: reference.name
+          }
+        ) : /* @__PURE__ */ jsx2("span", { className: "kaboo-chip-ic", children: reference.transport === "object" ? AtIcon : AttachIcon }),
+        /* @__PURE__ */ jsx2("span", { className: "kaboo-chip-label", children: reference.name }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "kaboo-chip-x",
+            "aria-label": `Remove ${reference.name}`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onRemove();
+            },
+            children: /* @__PURE__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function caretRectFor(node, offset) {
+  try {
+    const range = document.createRange();
+    range.setStart(node, Math.min(offset, node.textContent?.length ?? 0));
+    range.collapse(true);
+    const rect = range.getBoundingClientRect();
+    if (rect.top === 0 && rect.left === 0) {
+      const parent = node.parentElement;
+      return parent ? parent.getBoundingClientRect() : null;
+    }
+    return rect;
+  } catch {
+    return null;
+  }
+}
+var ReferencePopover = forwardRef(function ReferencePopover2({ pos, rows, active, query, mode, searchRef, onSearch, onSearchKeyDown, onHover, onPick }, ref) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      className: "kaboo-refmenu",
+      role: "listbox",
+      style: { left: pos.left, bottom: pos.bottom, width: pos.width },
+      children: [
+        mode === "menu" && /* @__PURE__ */ jsxs2("div", { className: "kaboo-refmenu-search", children: [
+          /* @__PURE__ */ jsx2("span", { className: "kaboo-refmenu-search-icon", children: SearchIcon }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              ref: searchRef,
+              type: "text",
+              className: "kaboo-refmenu-search-input",
+              placeholder: "Search\u2026",
+              value: query,
+              onChange: (e) => onSearch(e.target.value),
+              onKeyDown: (e) => onSearchKeyDown(e)
+            }
+          )
+        ] }),
+        rows.length === 0 && /* @__PURE__ */ jsx2("div", { className: "kaboo-refmenu-empty", children: "No matches" }),
+        rows.map((row, i) => {
+          const key = row.kind === "action" ? `action:${row.provider.id}` : `${row.provider.id}:${row.item.id}`;
+          const showHeader = i === 0 || rows[i - 1].group !== row.group;
+          const isUpload = row.kind === "action" && isUploadProvider(row.provider);
+          const icon = isUpload ? AttachIcon : row.kind === "item" ? row.provider.icon ?? AtIcon : row.provider.icon ?? AtIcon;
+          const title = row.kind === "action" ? isUpload ? "Attach a file" : row.provider.label : row.item.label;
+          const subtitle = row.kind === "action" ? isUpload ? "Upload from your device" : void 0 : row.item.description;
+          const custom = row.kind === "item" ? row.provider.renderItem?.(row.item) : void 0;
+          return /* @__PURE__ */ jsxs2("div", { children: [
+            showHeader && /* @__PURE__ */ jsx2("div", { className: "kaboo-refmenu-group", children: row.group }),
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                role: "option",
+                "aria-selected": i === active,
+                className: `kaboo-refmenu-item${i === active ? " is-active" : ""}`,
+                onMouseEnter: () => onHover(i),
+                onMouseDown: (e) => {
+                  e.preventDefault();
+                  onPick(row);
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("span", { className: "kaboo-refmenu-icon", children: icon }),
+                  custom ?? /* @__PURE__ */ jsxs2("span", { className: "kaboo-refmenu-text", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "kaboo-refmenu-title", children: title }),
+                    subtitle && /* @__PURE__ */ jsx2("span", { className: "kaboo-refmenu-sub", children: subtitle })
+                  ] })
+                ]
+              }
+            )
+          ] }, key);
+        })
+      ]
+    }
+  );
+});
+
 // src/components/ActivityPanel.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function ActivityPanel() {
   const { groups } = useActivity();
   const { activeDrill } = useDrill();
@@ -66,14 +969,14 @@ function ActivityPanel() {
   if (filtered.length === 0 && activeDrill) {
     const exact = groups[activeDrill];
     if (exact) {
-      return /* @__PURE__ */ jsx2("div", { className: "kaboo-activity-panel", children: /* @__PURE__ */ jsx2(AgentCard, { groupId: activeDrill, group: exact }) });
+      return /* @__PURE__ */ jsx3("div", { className: "kaboo-activity-panel", children: /* @__PURE__ */ jsx3(AgentCard, { groupId: activeDrill, group: exact }) });
     }
   }
-  return /* @__PURE__ */ jsx2("div", { className: "kaboo-activity-panel", children: filtered.map(([id, group]) => /* @__PURE__ */ jsx2(AgentCard, { groupId: id, group }, id)) });
+  return /* @__PURE__ */ jsx3("div", { className: "kaboo-activity-panel", children: filtered.map(([id, group]) => /* @__PURE__ */ jsx3(AgentCard, { groupId: id, group }, id)) });
 }
 
 // src/components/GlassTabs.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function GlassTabs() {
   const { drillPath, drillToRoot, drillToLevel } = useDrill();
   const { groups } = useActivity();
@@ -86,11 +989,11 @@ function GlassTabs() {
       level: i
     }))
   ];
-  return /* @__PURE__ */ jsx3("nav", { className: "kaboo-breadcrumb-bar", children: tabs.map((tab, i) => {
+  return /* @__PURE__ */ jsx4("nav", { className: "kaboo-breadcrumb-bar", children: tabs.map((tab, i) => {
     const isLast = i === tabs.length - 1;
-    return /* @__PURE__ */ jsxs2("span", { className: "kaboo-breadcrumb-item", children: [
-      i > 0 && /* @__PURE__ */ jsx3("svg", { width: 12, height: 12, viewBox: "0 0 16 16", className: "kaboo-breadcrumb-sep", children: /* @__PURE__ */ jsx3("path", { d: "M6 4l4 4-4 4", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
-      /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3("span", { className: "kaboo-breadcrumb-item", children: [
+      i > 0 && /* @__PURE__ */ jsx4("svg", { width: 12, height: 12, viewBox: "0 0 16 16", className: "kaboo-breadcrumb-sep", children: /* @__PURE__ */ jsx4("path", { d: "M6 4l4 4-4 4", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+      /* @__PURE__ */ jsxs3(
         "button",
         {
           className: `kaboo-breadcrumb-link ${isLast ? "kaboo-breadcrumb-current" : ""}`,
@@ -101,7 +1004,7 @@ function GlassTabs() {
           },
           disabled: isLast,
           children: [
-            i === 0 && /* @__PURE__ */ jsx3("svg", { width: 14, height: 14, viewBox: "0 0 16 16", className: "kaboo-breadcrumb-icon", children: /* @__PURE__ */ jsx3("path", { d: "M3 8.5L8 4l5 4.5M4.5 7.5V12h2.5V9.5h2V12h2.5V7.5", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            i === 0 && /* @__PURE__ */ jsx4("svg", { width: 14, height: 14, viewBox: "0 0 16 16", className: "kaboo-breadcrumb-icon", children: /* @__PURE__ */ jsx4("path", { d: "M3 8.5L8 4l5 4.5M4.5 7.5V12h2.5V9.5h2V12h2.5V7.5", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
             tab.label
           ]
         }
@@ -111,20 +1014,20 @@ function GlassTabs() {
 }
 
 // src/components/DrillDetailView.tsx
-import { useEffect, useRef } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function DrillDetailView() {
   const { activeDrill } = useDrill();
   const { groups } = useActivity();
   const { active: activeInterrupts } = useInterruptBridge();
-  const bodyRef = useRef(null);
-  useEffect(() => {
+  const bodyRef = useRef2(null);
+  useEffect2(() => {
     if (activeDrill && bodyRef.current) {
       bodyRef.current.scrollTop = 0;
     }
   }, [activeDrill]);
   if (!activeDrill) {
-    return /* @__PURE__ */ jsx4("div", { className: "kaboo-drill-detail kaboo-hidden" });
+    return /* @__PURE__ */ jsx5("div", { className: "kaboo-drill-detail kaboo-hidden" });
   }
   const group = groups[activeDrill];
   const timeline = group?.timeline ?? [];
@@ -136,15 +1039,15 @@ function DrillDetailView() {
   const renderToolCard = (toolUseId) => {
     const entry = childByToolCall.get(toolUseId);
     if (!entry) return null;
-    return /* @__PURE__ */ jsx4(AgentCard, { groupId: entry[0], group: entry[1] });
+    return /* @__PURE__ */ jsx5(AgentCard, { groupId: entry[0], group: entry[1] });
   };
-  return /* @__PURE__ */ jsx4("div", { ref: bodyRef, className: "kaboo-drill-detail", children: /* @__PURE__ */ jsxs3("div", { className: "kaboo-drill-detail-inner", children: [
-    group?.task && /* @__PURE__ */ jsxs3("div", { className: "kaboo-agent-card-task kaboo-drill-task", children: [
-      /* @__PURE__ */ jsx4("strong", { children: "Task:" }),
+  return /* @__PURE__ */ jsx5("div", { ref: bodyRef, className: "kaboo-drill-detail", children: /* @__PURE__ */ jsxs4("div", { className: "kaboo-drill-detail-inner", children: [
+    group?.task && /* @__PURE__ */ jsxs4("div", { className: "kaboo-agent-card-task kaboo-drill-task", children: [
+      /* @__PURE__ */ jsx5("strong", { children: "Task:" }),
       " ",
       group.task
     ] }),
-    group && timeline.length > 0 && /* @__PURE__ */ jsx4("div", { className: "kaboo-drill-timeline", children: /* @__PURE__ */ jsx4(
+    group && timeline.length > 0 && /* @__PURE__ */ jsx5("div", { className: "kaboo-drill-timeline", children: /* @__PURE__ */ jsx5(
       Timeline,
       {
         timeline,
@@ -153,7 +1056,7 @@ function DrillDetailView() {
         renderToolCard
       }
     ) }),
-    unanchoredInterrupts.length > 0 && /* @__PURE__ */ jsx4("div", { className: "kaboo-drill-interrupt", children: unanchoredInterrupts.map((it) => /* @__PURE__ */ jsx4(
+    unanchoredInterrupts.length > 0 && /* @__PURE__ */ jsx5("div", { className: "kaboo-drill-interrupt", children: unanchoredInterrupts.map((it) => /* @__PURE__ */ jsx5(
       InterruptRenderer,
       {
         reason: it.reason,
@@ -163,12 +1066,12 @@ function DrillDetailView() {
       },
       it.id
     )) }),
-    leftoverChildren.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "kaboo-drill-children", children: [
-      /* @__PURE__ */ jsx4("div", { className: "kaboo-drill-section-label", children: "Sub-agents" }),
-      leftoverChildren.map(([id, childGroup]) => /* @__PURE__ */ jsx4(AgentCard, { groupId: id, group: childGroup }, id))
+    leftoverChildren.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "kaboo-drill-children", children: [
+      /* @__PURE__ */ jsx5("div", { className: "kaboo-drill-section-label", children: "Sub-agents" }),
+      leftoverChildren.map(([id, childGroup]) => /* @__PURE__ */ jsx5(AgentCard, { groupId: id, group: childGroup }, id))
     ] }),
-    group && timeline.length === 0 && childEntries.length === 0 && /* @__PURE__ */ jsx4("div", { className: "kaboo-agent-card-empty", children: "Working..." }),
-    !group && /* @__PURE__ */ jsx4("div", { className: "kaboo-agent-card-empty", children: "No activity data for this group." })
+    group && timeline.length === 0 && childEntries.length === 0 && /* @__PURE__ */ jsx5("div", { className: "kaboo-agent-card-empty", children: "Working..." }),
+    !group && /* @__PURE__ */ jsx5("div", { className: "kaboo-agent-card-empty", children: "No activity data for this group." })
   ] }) });
 }
 export {
@@ -182,19 +1085,37 @@ export {
   InterruptRenderer,
   KabooActivityProvider,
   KabooProvider,
+  KabooReferenceInput,
   MarkdownContent,
   MiniTable,
+  REFERENCES_STATE_KEY,
+  REFERENCE_METADATA_KEYS,
+  ReferenceStateSync,
+  ReferencesProvider,
   StructuredRenderersContext,
   Timeline,
   ToolRow,
+  UPLOAD_MARKER,
+  attachmentToInputContent,
+  buildAttachmentsConfig,
+  buildUserContent,
   directChildren,
   formatToolInput,
   formatToolResult,
+  isUploadProvider,
+  mintReferenceId,
   normalizeResult,
+  objectToStateEntry,
+  referenceMarker,
+  serializeReferences,
   topLevelGroups,
+  uploadFileToReference,
+  uploadProvider,
   useActivity,
   useDrill,
   useInterruptBridge,
-  useInterruptFor
+  useInterruptFor,
+  useReferences,
+  withReferenceState
 };
 //# sourceMappingURL=index.js.map