@athenaintel/react 0.43.0 → 0.48.0

package/dist/collab/react.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
+const require$$0 = require("react");
 const AthenaCredentialSourceContext = require("../auth/AthenaCredentialSourceContext.cjs");
 const AthenaContext = require("../provider/AthenaContext.cjs");
 const client = require("./client.cjs");
@@ -8,9 +8,9 @@ function useGenericDoc(assetId, options) {
   const config = AthenaContext.useAthenaConfig();
   const identityEpoch = AthenaCredentialSourceContext.useAthenaCredentialIdentityEpoch();
   const access = (options == null ? void 0 : options.access) ?? "view";
-  const [handle, setHandle] = react.useState(null);
-  const handleRef = react.useRef(null);
-  react.useEffect(() => {
+  const [handle, setHandle] = require$$0.useState(null);
+  const handleRef = require$$0.useRef(null);
+  require$$0.useEffect(() => {
     const next = client.connectGenericDoc({
       assetId,
       access,
@@ -28,14 +28,14 @@ function useGenericDoc(assetId, options) {
       next.destroy();
     };
   }, [assetId, access, config.backendUrl, config.apiKey, config.getToken, identityEpoch]);
-  const subscribe = react.useMemo(() => {
+  const subscribe = require$$0.useMemo(() => {
     return (onStoreChange) => {
       if (!handle) return () => {
       };
       return handle.onChange(onStoreChange);
     };
   }, [handle]);
-  react.useSyncExternalStore(
+  require$$0.useSyncExternalStore(
     subscribe,
     () => {
       if (!handle) return EMPTY_SNAPSHOT;

package/dist/collab/react.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"react.cjs","sources":["../../src/collab/react.ts"],"sourcesContent":["/**\n * React bindings for Generic Doc live collaboration.\n *\n * `useGenericDoc(assetId)` opens (and owns) a `connectGenericDoc` handle,\n * resolving auth from the surrounding `AthenaProvider` (per-viewer bearer when\n * present, API key otherwise) and re-rendering on status/presence changes via\n * `useSyncExternalStore`.\n */\n\nimport { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport { useAthenaCredentialIdentityEpoch } from '../auth/AthenaCredentialSourceContext';\nimport { useAthenaConfig } from '../provider/AthenaContext';\nimport {\n  type GenericDocHandle,\n  type GenericDocStatus,\n  type PresenceEntry,\n  connectGenericDoc,\n} from './client';\nimport type * as Y from '@y/y';\n\nexport interface UseGenericDocResult {\n  /** Null until the handle is created (first render effect). */\n  doc: Y.Doc | null;\n  status: GenericDocStatus;\n  /**\n   * Whether the initial server sync completed for the current connection —\n   * `status === 'connected'` fires before the server state arrives, so gate\n   * \"is this doc really empty?\" UI on this.\n   */\n  synced: boolean;\n  accessType: 'r' | 'rw' | null;\n  error: Error | null;\n  presence: PresenceEntry[];\n  setPresence: (state: Record<string, unknown> | null) => void;\n}\n\nexport function useGenericDoc(\n  assetId: string,\n  options?: { access?: 'view' | 'edit' }\n): UseGenericDocResult {\n  const config = useAthenaConfig();\n  const identityEpoch = useAthenaCredentialIdentityEpoch();\n  const access = options?.access ?? 'view';\n  const [handle, setHandle] = useState<GenericDocHandle | null>(null);\n  const handleRef = useRef<GenericDocHandle | null>(null);\n\n  useEffect(() => {\n    const next = connectGenericDoc({\n      assetId,\n      access,\n      auth: {\n        backendUrl: config.backendUrl,\n        apiKey: config.apiKey,\n        token: config.token,\n        getToken: config.getToken,\n      },\n    });\n    handleRef.current = next;\n    setHandle(next);\n    return () => {\n      handleRef.current = null;\n      next.destroy();\n    };\n    // Recreate when the target or the signed-in identity changes (the\n    // credential source's identity epoch). A renewed token for the same\n    // identity reaches the next re-mint through `getToken`, so a renewal\n    // does not tear the live connection down.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [assetId, access, config.backendUrl, config.apiKey, config.getToken, identityEpoch]);\n\n  const subscribe = useMemo(() => {\n    return (onStoreChange: () => void) => {\n      if (!handle) return () => {};\n      return handle.onChange(onStoreChange);\n    };\n  }, [handle]);\n\n  const snapshot = useSyncExternalStore(\n    subscribe,\n    () => {\n      if (!handle) return EMPTY_SNAPSHOT;\n      return `${handle.status}|${handle.synced}|${handle.accessType ?? ''}|${handle.version}`;\n    },\n    () => EMPTY_SNAPSHOT\n  );\n  void snapshot;\n\n  return {\n    doc: handle?.doc ?? null,\n    status: handle?.status ?? 'connecting',\n    synced: handle?.synced ?? false,\n    accessType: handle?.accessType ?? null,\n    error: handle?.error ?? null,\n    presence: handle?.getPresence() ?? [],\n    setPresence: (state) => handleRef.current?.setPresence(state),\n  };\n}\n\nconst EMPTY_SNAPSHOT = 'init|false||0';\n"],"names":["useAthenaConfig","useAthenaCredentialIdentityEpoch","useState","useRef","useEffect","connectGenericDoc","useMemo","useSyncExternalStore"],"mappings":";;;;;;AAoCO,SAAS,cACd,SACA,SACqB;AACrB,QAAM,SAASA,cAAAA,gBAAA;AACf,QAAM,gBAAgBC,8BAAAA,iCAAA;AACtB,QAAM,UAAS,mCAAS,WAAU;AAClC,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAkC,IAAI;AAClE,QAAM,YAAYC,MAAAA,OAAgC,IAAI;AAEtDC,QAAAA,UAAU,MAAM;AACd,UAAM,OAAOC,OAAAA,kBAAkB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,MAAM;AAAA,QACJ,YAAY,OAAO;AAAA,QACnB,QAAQ,OAAO;AAAA,QACf,OAAO,OAAO;AAAA,QACd,UAAU,OAAO;AAAA,MAAA;AAAA,IACnB,CACD;AACD,cAAU,UAAU;AACpB,cAAU,IAAI;AACd,WAAO,MAAM;AACX,gBAAU,UAAU;AACpB,WAAK,QAAA;AAAA,IACP;AAAA,EAMF,GAAG,CAAC,SAAS,QAAQ,OAAO,YAAY,OAAO,QAAQ,OAAO,UAAU,aAAa,CAAC;AAEtF,QAAM,YAAYC,MAAAA,QAAQ,MAAM;AAC9B,WAAO,CAAC,kBAA8B;AACpC,UAAI,CAAC,OAAQ,QAAO,MAAM;AAAA,MAAC;AAC3B,aAAO,OAAO,SAAS,aAAa;AAAA,IACtC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEMC,QAAAA;AAAAA,IACf;AAAA,IACA,MAAM;AACJ,UAAI,CAAC,OAAQ,QAAO;AACpB,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,MAAM,IAAI,OAAO,cAAc,EAAE,IAAI,OAAO,OAAO;AAAA,IACvF;AAAA,IACA,MAAM;AAAA,EAAA;AAIR,SAAO;AAAA,IACL,MAAK,iCAAQ,QAAO;AAAA,IACpB,SAAQ,iCAAQ,WAAU;AAAA,IAC1B,SAAQ,iCAAQ,WAAU;AAAA,IAC1B,aAAY,iCAAQ,eAAc;AAAA,IAClC,QAAO,iCAAQ,UAAS;AAAA,IACxB,WAAU,iCAAQ,kBAAiB,CAAA;AAAA,IACnC,aAAa,CAAC,UAAA;;AAAU,6BAAU,YAAV,mBAAmB,YAAY;AAAA;AAAA,EAAK;AAEhE;AAEA,MAAM,iBAAiB;;"}
+{"version":3,"file":"react.cjs","sources":["../../src/collab/react.ts"],"sourcesContent":["/**\n * React bindings for Generic Doc live collaboration.\n *\n * `useGenericDoc(assetId)` opens (and owns) a `connectGenericDoc` handle,\n * resolving auth from the surrounding `AthenaProvider` (per-viewer bearer when\n * present, API key otherwise) and re-rendering on status/presence changes via\n * `useSyncExternalStore`.\n */\n\nimport { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport { useAthenaCredentialIdentityEpoch } from '../auth/AthenaCredentialSourceContext';\nimport { useAthenaConfig } from '../provider/AthenaContext';\nimport {\n  type GenericDocHandle,\n  type GenericDocStatus,\n  type PresenceEntry,\n  connectGenericDoc,\n} from './client';\nimport type * as Y from '@y/y';\n\nexport interface UseGenericDocResult {\n  /** Null until the handle is created (first render effect). */\n  doc: Y.Doc | null;\n  status: GenericDocStatus;\n  /**\n   * Whether the initial server sync completed for the current connection —\n   * `status === 'connected'` fires before the server state arrives, so gate\n   * \"is this doc really empty?\" UI on this.\n   */\n  synced: boolean;\n  accessType: 'r' | 'rw' | null;\n  error: Error | null;\n  presence: PresenceEntry[];\n  setPresence: (state: Record<string, unknown> | null) => void;\n}\n\nexport function useGenericDoc(\n  assetId: string,\n  options?: { access?: 'view' | 'edit' }\n): UseGenericDocResult {\n  const config = useAthenaConfig();\n  const identityEpoch = useAthenaCredentialIdentityEpoch();\n  const access = options?.access ?? 'view';\n  const [handle, setHandle] = useState<GenericDocHandle | null>(null);\n  const handleRef = useRef<GenericDocHandle | null>(null);\n\n  useEffect(() => {\n    const next = connectGenericDoc({\n      assetId,\n      access,\n      auth: {\n        backendUrl: config.backendUrl,\n        apiKey: config.apiKey,\n        token: config.token,\n        getToken: config.getToken,\n      },\n    });\n    handleRef.current = next;\n    setHandle(next);\n    return () => {\n      handleRef.current = null;\n      next.destroy();\n    };\n    // Recreate when the target or the signed-in identity changes (the\n    // credential source's identity epoch). A renewed token for the same\n    // identity reaches the next re-mint through `getToken`, so a renewal\n    // does not tear the live connection down.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [assetId, access, config.backendUrl, config.apiKey, config.getToken, identityEpoch]);\n\n  const subscribe = useMemo(() => {\n    return (onStoreChange: () => void) => {\n      if (!handle) return () => {};\n      return handle.onChange(onStoreChange);\n    };\n  }, [handle]);\n\n  const snapshot = useSyncExternalStore(\n    subscribe,\n    () => {\n      if (!handle) return EMPTY_SNAPSHOT;\n      return `${handle.status}|${handle.synced}|${handle.accessType ?? ''}|${handle.version}`;\n    },\n    () => EMPTY_SNAPSHOT\n  );\n  void snapshot;\n\n  return {\n    doc: handle?.doc ?? null,\n    status: handle?.status ?? 'connecting',\n    synced: handle?.synced ?? false,\n    accessType: handle?.accessType ?? null,\n    error: handle?.error ?? null,\n    presence: handle?.getPresence() ?? [],\n    setPresence: (state) => handleRef.current?.setPresence(state),\n  };\n}\n\nconst EMPTY_SNAPSHOT = 'init|false||0';\n"],"names":["useAthenaConfig","useAthenaCredentialIdentityEpoch","useState","useRef","useEffect","connectGenericDoc","useMemo","useSyncExternalStore"],"mappings":";;;;;;AAoCO,SAAS,cACd,SACA,SACqB;AACrB,QAAM,SAASA,cAAAA,gBAAA;AACf,QAAM,gBAAgBC,8BAAAA,iCAAA;AACtB,QAAM,UAAS,mCAAS,WAAU;AAClC,QAAM,CAAC,QAAQ,SAAS,IAAIC,WAAAA,SAAkC,IAAI;AAClE,QAAM,YAAYC,WAAAA,OAAgC,IAAI;AAEtDC,aAAAA,UAAU,MAAM;AACd,UAAM,OAAOC,OAAAA,kBAAkB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,MAAM;AAAA,QACJ,YAAY,OAAO;AAAA,QACnB,QAAQ,OAAO;AAAA,QACf,OAAO,OAAO;AAAA,QACd,UAAU,OAAO;AAAA,MAAA;AAAA,IACnB,CACD;AACD,cAAU,UAAU;AACpB,cAAU,IAAI;AACd,WAAO,MAAM;AACX,gBAAU,UAAU;AACpB,WAAK,QAAA;AAAA,IACP;AAAA,EAMF,GAAG,CAAC,SAAS,QAAQ,OAAO,YAAY,OAAO,QAAQ,OAAO,UAAU,aAAa,CAAC;AAEtF,QAAM,YAAYC,WAAAA,QAAQ,MAAM;AAC9B,WAAO,CAAC,kBAA8B;AACpC,UAAI,CAAC,OAAQ,QAAO,MAAM;AAAA,MAAC;AAC3B,aAAO,OAAO,SAAS,aAAa;AAAA,IACtC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEMC,aAAAA;AAAAA,IACf;AAAA,IACA,MAAM;AACJ,UAAI,CAAC,OAAQ,QAAO;AACpB,aAAO,GAAG,OAAO,MAAM,IAAI,OAAO,MAAM,IAAI,OAAO,cAAc,EAAE,IAAI,OAAO,OAAO;AAAA,IACvF;AAAA,IACA,MAAM;AAAA,EAAA;AAIR,SAAO;AAAA,IACL,MAAK,iCAAQ,QAAO;AAAA,IACpB,SAAQ,iCAAQ,WAAU;AAAA,IAC1B,SAAQ,iCAAQ,WAAU;AAAA,IAC1B,aAAY,iCAAQ,eAAc;AAAA,IAClC,QAAO,iCAAQ,UAAS;AAAA,IACxB,WAAU,iCAAQ,kBAAiB,CAAA;AAAA,IACnC,aAAa,CAAC,UAAA;;AAAU,6BAAU,YAAV,mBAAmB,YAAY;AAAA;AAAA,EAAK;AAEhE;AAEA,MAAM,iBAAiB;;"}

package/dist/composer/AttachmentContext.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const require$$0 = require("react");
 const zustand = require("zustand");
 const vanilla = require("zustand/vanilla");
 const athenaUrls = require("../lib/athena-urls.cjs");
-const AttachmentCtx = react.createContext(null);
+const AttachmentCtx = require$$0.createContext(null);
 function createAttachmentStore() {
   return vanilla.createStore(() => ({ attachments: [], isUploading: false, notice: null }));
 }
@@ -13,15 +13,22 @@ function AttachmentProvider({
   children,
   store
 }) {
-  const outer = react.useContext(AttachmentCtx);
+  const outer = require$$0.useContext(AttachmentCtx);
   if (store) return /* @__PURE__ */ jsxRuntime.jsx(StoreAttachmentProvider, { store, children });
   if (outer) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   return /* @__PURE__ */ jsxRuntime.jsx(OwnAttachmentProvider, { children });
 }
 function OwnAttachmentProvider({ children }) {
-  const [store] = react.useState(createAttachmentStore);
+  const [store] = require$$0.useState(createAttachmentStore);
+  require$$0.useEffect(() => () => revokePreviews(store.getState().attachments), [store]);
   return /* @__PURE__ */ jsxRuntime.jsx(StoreAttachmentProvider, { store, children });
 }
+function revokePreviews(attachments) {
+  if (typeof URL === "undefined" || typeof URL.revokeObjectURL !== "function") return;
+  for (const attachment of attachments) {
+    if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
+  }
+}
 function StoreAttachmentProvider({
   children,
   store
@@ -29,13 +36,19 @@ function StoreAttachmentProvider({
   const attachments = zustand.useStore(store, (state) => state.attachments);
   const isUploading = zustand.useStore(store, (state) => state.isUploading);
   const notice = zustand.useStore(store, (state) => state.notice ?? null);
-  const actions = react.useMemo(
+  const actions = require$$0.useMemo(
     () => ({
       addAttachments: (assets) => store.setState((state) => ({ attachments: [...state.attachments, ...assets] })),
-      removeAttachment: (id) => store.setState((state) => ({
-        attachments: state.attachments.filter((attachment) => attachment.id !== id)
-      })),
-      clearAttachments: () => store.setState({ attachments: [] }),
+      removeAttachment: (id) => {
+        revokePreviews(store.getState().attachments.filter((attachment) => attachment.id === id));
+        store.setState((state) => ({
+          attachments: state.attachments.filter((attachment) => attachment.id !== id)
+        }));
+      },
+      clearAttachments: () => {
+        revokePreviews(store.getState().attachments);
+        store.setState({ attachments: [] });
+      },
       setIsUploading: (uploading) => store.setState({ isUploading: uploading }),
       setNotice: (next) => {
         if ((store.getState().notice ?? null) !== next) store.setState({ notice: next });
@@ -43,14 +56,14 @@ function StoreAttachmentProvider({
     }),
     [store]
   );
-  const value = react.useMemo(
+  const value = require$$0.useMemo(
     () => ({ attachments, isUploading, notice, ...actions }),
     [attachments, isUploading, notice, actions]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AttachmentCtx.Provider, { value, children });
 }
 function useAttachments() {
-  const ctx = react.useContext(AttachmentCtx);
+  const ctx = require$$0.useContext(AttachmentCtx);
   if (!ctx) {
     throw new Error("[AthenaSDK] useAttachments must be used within <AttachmentProvider>");
   }

package/dist/composer/AttachmentContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentContext.cjs","sources":["../../src/composer/AttachmentContext.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';\nimport { useStore } from 'zustand';\nimport { createStore, type StoreApi } from 'zustand/vanilla';\nimport { createAthenaSpacesUrl, DEFAULT_APP_URL } from '../lib/athena-urls';\nimport type { UploadedAsset } from './useFileUpload';\n\ninterface AttachmentContextValue {\n  attachments: UploadedAsset[];\n  addAttachments: (assets: UploadedAsset[]) => void;\n  removeAttachment: (id: string) => void;\n  clearAttachments: () => void;\n  /** True when one or more files are currently being uploaded. */\n  isUploading: boolean;\n  setIsUploading: (v: boolean) => void;\n  /**\n   * Why the last files offered were not attached, for the composer to say (a file picked while\n   * Athena can't be reached cannot upload), or `null`.\n   */\n  notice: string | null;\n  setNotice: (notice: string | null) => void;\n}\n\nconst AttachmentCtx = createContext<AttachmentContextValue | null>(null);\n\ninterface AttachmentStoreState {\n  attachments: UploadedAsset[];\n  isUploading: boolean;\n  notice?: string | null;\n}\n\n/**\n * A composer's staged attachments, kept outside React (`createAttachmentStore`):\n * a host that shows several chats gives each its own, and keeps it while that\n * chat's `AthenaChat` remounts (a tab moving between windows).\n */\nexport type AttachmentStore = StoreApi<AttachmentStoreState>;\n\n/** An empty `AttachmentStore`, for `<AttachmentProvider store>`. */\nexport function createAttachmentStore(): AttachmentStore {\n  return createStore<AttachmentStoreState>(() => ({ attachments: [], isUploading: false, notice: null }));\n}\n\n/**\n * Staged attachments for the composer. With a `store`, they are that store's,\n * whatever is mounted above: one per chat when a host shows several. Without\n * one, a provider already mounted above (a host's, outliving a remounting\n * \\`AthenaChat\\` such as a tab moving between windows) is reused instead of\n * starting empty.\n */\nexport function AttachmentProvider({\n  children,\n  store,\n}: {\n  children: ReactNode;\n  store?: AttachmentStore;\n}) {\n  const outer = useContext(AttachmentCtx);\n  if (store) return <StoreAttachmentProvider store={store}>{children}</StoreAttachmentProvider>;\n  if (outer) return <>{children}</>;\n  return <OwnAttachmentProvider>{children}</OwnAttachmentProvider>;\n}\n\nfunction OwnAttachmentProvider({ children }: { children: ReactNode }) {\n  const [store] = useState(createAttachmentStore);\n  return <StoreAttachmentProvider store={store}>{children}</StoreAttachmentProvider>;\n}\n\nfunction StoreAttachmentProvider({\n  children,\n  store,\n}: {\n  children: ReactNode;\n  store: AttachmentStore;\n}) {\n  const attachments = useStore(store, (state) => state.attachments);\n  const isUploading = useStore(store, (state) => state.isUploading);\n  const notice = useStore(store, (state) => state.notice ?? null);\n  const actions = useMemo(\n    () => ({\n      addAttachments: (assets: UploadedAsset[]) =>\n        store.setState((state) => ({ attachments: [...state.attachments, ...assets] })),\n      removeAttachment: (id: string) =>\n        store.setState((state) => ({\n          attachments: state.attachments.filter((attachment) => attachment.id !== id),\n        })),\n      clearAttachments: () => store.setState({ attachments: [] }),\n      setIsUploading: (uploading: boolean) => store.setState({ isUploading: uploading }),\n      setNotice: (next: string | null) => {\n        if ((store.getState().notice ?? null) !== next) store.setState({ notice: next });\n      },\n    }),\n    [store],\n  );\n  const value = useMemo(\n    () => ({ attachments, isUploading, notice, ...actions }),\n    [attachments, isUploading, notice, actions],\n  );\n\n  return (\n    <AttachmentCtx.Provider value={value}>\n      {children}\n    </AttachmentCtx.Provider>\n  );\n}\n\nexport function useAttachments(): AttachmentContextValue {\n  const ctx = useContext(AttachmentCtx);\n  if (!ctx) {\n    throw new Error('[AthenaSDK] useAttachments must be used within <AttachmentProvider>');\n  }\n  return ctx;\n}\n\n/**\n * Build the markdown references for the current attachments.\n * Returns empty string if no attachments.\n *\n * @deprecated Use `buildAttachmentMarkdownWithAppUrl` to avoid defaulting links to the production Athena app URL.\n */\nexport function buildAttachmentMarkdown(attachments: UploadedAsset[]): string {\n  return buildAttachmentMarkdownWithAppUrl({ attachments });\n}\n\nexport function buildAttachmentMarkdownWithAppUrl({\n  attachments,\n  appUrl = DEFAULT_APP_URL,\n}: {\n  attachments: UploadedAsset[];\n  appUrl?: string;\n}): string {\n  if (attachments.length === 0) return '';\n  return attachments\n    .map((attachment) => `[@${attachment.title}](${createAthenaSpacesUrl({ appUrl, assetIds: attachment.id })})`)\n    .join('\\n');\n}\n"],"names":["createContext","createStore","useContext","jsx","Fragment","useState","useStore","useMemo","DEFAULT_APP_URL","createAthenaSpacesUrl"],"mappings":";;;;;;;AAsBA,MAAM,gBAAgBA,MAAAA,cAA6C,IAAI;AAgBhE,SAAS,wBAAyC;AACvD,SAAOC,QAAAA,YAAkC,OAAO,EAAE,aAAa,CAAA,GAAI,aAAa,OAAO,QAAQ,KAAA,EAAO;AACxG;AASO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,QAAM,QAAQC,MAAAA,WAAW,aAAa;AACtC,MAAI,MAAO,QAAOC,2BAAAA,IAAC,yBAAA,EAAwB,OAAe,UAAS;AACnE,MAAI,MAAO,QAAOA,2BAAAA,IAAAC,WAAAA,UAAA,EAAG,SAAA,CAAS;AAC9B,SAAOD,+BAAC,yBAAuB,UAAS;AAC1C;AAEA,SAAS,sBAAsB,EAAE,YAAqC;AACpE,QAAM,CAAC,KAAK,IAAIE,MAAAA,SAAS,qBAAqB;AAC9C,SAAOF,2BAAAA,IAAC,yBAAA,EAAwB,OAAe,SAAA,CAAS;AAC1D;AAEA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,cAAcG,QAAAA,SAAS,OAAO,CAAC,UAAU,MAAM,WAAW;AAChE,QAAM,cAAcA,QAAAA,SAAS,OAAO,CAAC,UAAU,MAAM,WAAW;AAChE,QAAM,SAASA,QAAAA,SAAS,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI;AAC9D,QAAM,UAAUC,MAAAA;AAAAA,IACd,OAAO;AAAA,MACL,gBAAgB,CAAC,WACf,MAAM,SAAS,CAAC,WAAW,EAAE,aAAa,CAAC,GAAG,MAAM,aAAa,GAAG,MAAM,IAAI;AAAA,MAChF,kBAAkB,CAAC,OACjB,MAAM,SAAS,CAAC,WAAW;AAAA,QACzB,aAAa,MAAM,YAAY,OAAO,CAAC,eAAe,WAAW,OAAO,EAAE;AAAA,MAAA,EAC1E;AAAA,MACJ,kBAAkB,MAAM,MAAM,SAAS,EAAE,aAAa,CAAA,GAAI;AAAA,MAC1D,gBAAgB,CAAC,cAAuB,MAAM,SAAS,EAAE,aAAa,WAAW;AAAA,MACjF,WAAW,CAAC,SAAwB;AAClC,aAAK,MAAM,SAAA,EAAW,UAAU,UAAU,KAAM,OAAM,SAAS,EAAE,QAAQ,KAAA,CAAM;AAAA,MACjF;AAAA,IAAA;AAAA,IAEF,CAAC,KAAK;AAAA,EAAA;AAER,QAAM,QAAQA,MAAAA;AAAAA,IACZ,OAAO,EAAE,aAAa,aAAa,QAAQ,GAAG,QAAA;AAAA,IAC9C,CAAC,aAAa,aAAa,QAAQ,OAAO;AAAA,EAAA;AAG5C,SACEJ,2BAAAA,IAAC,cAAc,UAAd,EAAuB,OACrB,SAAA,CACH;AAEJ;AAEO,SAAS,iBAAyC;AACvD,QAAM,MAAMD,MAAAA,WAAW,aAAa;AACpC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,qEAAqE;AAAA,EACvF;AACA,SAAO;AACT;AAYO,SAAS,kCAAkC;AAAA,EAChD;AAAA,EACA,SAASM,WAAAA;AACX,GAGW;AACT,MAAI,YAAY,WAAW,EAAG,QAAO;AACrC,SAAO,YACJ,IAAI,CAAC,eAAe,KAAK,WAAW,KAAK,KAAKC,WAAAA,sBAAsB,EAAE,QAAQ,UAAU,WAAW,GAAA,CAAI,CAAC,GAAG,EAC3G,KAAK,IAAI;AACd;;;;;"}
+{"version":3,"file":"AttachmentContext.cjs","sources":["../../src/composer/AttachmentContext.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { useStore } from 'zustand';\nimport { createStore, type StoreApi } from 'zustand/vanilla';\nimport { createAthenaSpacesUrl, DEFAULT_APP_URL } from '../lib/athena-urls';\nimport type { UploadedAsset } from './useFileUpload';\n\ninterface AttachmentContextValue {\n  attachments: UploadedAsset[];\n  addAttachments: (assets: UploadedAsset[]) => void;\n  removeAttachment: (id: string) => void;\n  clearAttachments: () => void;\n  /** True when one or more files are currently being uploaded. */\n  isUploading: boolean;\n  setIsUploading: (v: boolean) => void;\n  /**\n   * Why the last files offered were not attached, for the composer to say (a file picked while\n   * Athena can't be reached cannot upload), or `null`.\n   */\n  notice: string | null;\n  setNotice: (notice: string | null) => void;\n}\n\nconst AttachmentCtx = createContext<AttachmentContextValue | null>(null);\n\ninterface AttachmentStoreState {\n  attachments: UploadedAsset[];\n  isUploading: boolean;\n  notice?: string | null;\n}\n\n/**\n * A composer's staged attachments, kept outside React (`createAttachmentStore`):\n * a host that shows several chats gives each its own, and keeps it while that\n * chat's `AthenaChat` remounts (a tab moving between windows).\n */\nexport type AttachmentStore = StoreApi<AttachmentStoreState>;\n\n/** An empty `AttachmentStore`, for `<AttachmentProvider store>`. */\nexport function createAttachmentStore(): AttachmentStore {\n  return createStore<AttachmentStoreState>(() => ({ attachments: [], isUploading: false, notice: null }));\n}\n\n/**\n * Staged attachments for the composer. With a `store`, they are that store's,\n * whatever is mounted above: one per chat when a host shows several. Without\n * one, a provider already mounted above (a host's, outliving a remounting\n * \\`AthenaChat\\` such as a tab moving between windows) is reused instead of\n * starting empty.\n */\nexport function AttachmentProvider({\n  children,\n  store,\n}: {\n  children: ReactNode;\n  store?: AttachmentStore;\n}) {\n  const outer = useContext(AttachmentCtx);\n  if (store) return <StoreAttachmentProvider store={store}>{children}</StoreAttachmentProvider>;\n  if (outer) return <>{children}</>;\n  return <OwnAttachmentProvider>{children}</OwnAttachmentProvider>;\n}\n\nfunction OwnAttachmentProvider({ children }: { children: ReactNode }) {\n  const [store] = useState(createAttachmentStore);\n  // The store is this provider's alone and goes with it: free the pictures a\n  // draft still held. A host's store (`store`, an outer provider) outlives a\n  // remount and keeps them.\n  useEffect(() => () => revokePreviews(store.getState().attachments), [store]);\n  return <StoreAttachmentProvider store={store}>{children}</StoreAttachmentProvider>;\n}\n\n/** Frees the local picture previews of attachments the draft lets go. */\nfunction revokePreviews(attachments: readonly UploadedAsset[]): void {\n  if (typeof URL === 'undefined' || typeof URL.revokeObjectURL !== 'function') return;\n  for (const attachment of attachments) {\n    if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);\n  }\n}\n\nfunction StoreAttachmentProvider({\n  children,\n  store,\n}: {\n  children: ReactNode;\n  store: AttachmentStore;\n}) {\n  const attachments = useStore(store, (state) => state.attachments);\n  const isUploading = useStore(store, (state) => state.isUploading);\n  const notice = useStore(store, (state) => state.notice ?? null);\n  const actions = useMemo(\n    () => ({\n      addAttachments: (assets: UploadedAsset[]) =>\n        store.setState((state) => ({ attachments: [...state.attachments, ...assets] })),\n      removeAttachment: (id: string) => {\n        revokePreviews(store.getState().attachments.filter((attachment) => attachment.id === id));\n        store.setState((state) => ({\n          attachments: state.attachments.filter((attachment) => attachment.id !== id),\n        }));\n      },\n      clearAttachments: () => {\n        revokePreviews(store.getState().attachments);\n        store.setState({ attachments: [] });\n      },\n      setIsUploading: (uploading: boolean) => store.setState({ isUploading: uploading }),\n      setNotice: (next: string | null) => {\n        if ((store.getState().notice ?? null) !== next) store.setState({ notice: next });\n      },\n    }),\n    [store],\n  );\n  const value = useMemo(\n    () => ({ attachments, isUploading, notice, ...actions }),\n    [attachments, isUploading, notice, actions],\n  );\n\n  return (\n    <AttachmentCtx.Provider value={value}>\n      {children}\n    </AttachmentCtx.Provider>\n  );\n}\n\nexport function useAttachments(): AttachmentContextValue {\n  const ctx = useContext(AttachmentCtx);\n  if (!ctx) {\n    throw new Error('[AthenaSDK] useAttachments must be used within <AttachmentProvider>');\n  }\n  return ctx;\n}\n\n/**\n * Build the markdown references for the current attachments.\n * Returns empty string if no attachments.\n *\n * @deprecated Use `buildAttachmentMarkdownWithAppUrl` to avoid defaulting links to the production Athena app URL.\n */\nexport function buildAttachmentMarkdown(attachments: UploadedAsset[]): string {\n  return buildAttachmentMarkdownWithAppUrl({ attachments });\n}\n\nexport function buildAttachmentMarkdownWithAppUrl({\n  attachments,\n  appUrl = DEFAULT_APP_URL,\n}: {\n  attachments: UploadedAsset[];\n  appUrl?: string;\n}): string {\n  if (attachments.length === 0) return '';\n  return attachments\n    .map((attachment) => `[@${attachment.title}](${createAthenaSpacesUrl({ appUrl, assetIds: attachment.id })})`)\n    .join('\\n');\n}\n"],"names":["createContext","createStore","useContext","jsx","Fragment","useState","useEffect","useStore","useMemo","DEFAULT_APP_URL","createAthenaSpacesUrl"],"mappings":"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"}

package/dist/composer/AttachmentContext.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { useContext, createContext, useMemo, useState } from "react";
+import { useContext, createContext, useMemo, useState, useEffect } from "react";
 import { useStore } from "zustand";
 import { createStore } from "zustand/vanilla";
 import { createAthenaSpacesUrl, DEFAULT_APP_URL } from "../lib/athena-urls.js";
@@ -18,8 +18,15 @@ function AttachmentProvider({
 }
 function OwnAttachmentProvider({ children }) {
   const [store] = useState(createAttachmentStore);
+  useEffect(() => () => revokePreviews(store.getState().attachments), [store]);
   return /* @__PURE__ */ jsx(StoreAttachmentProvider, { store, children });
 }
+function revokePreviews(attachments) {
+  if (typeof URL === "undefined" || typeof URL.revokeObjectURL !== "function") return;
+  for (const attachment of attachments) {
+    if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);
+  }
+}
 function StoreAttachmentProvider({
   children,
   store
@@ -30,10 +37,16 @@ function StoreAttachmentProvider({
   const actions = useMemo(
     () => ({
       addAttachments: (assets) => store.setState((state) => ({ attachments: [...state.attachments, ...assets] })),
-      removeAttachment: (id) => store.setState((state) => ({
-        attachments: state.attachments.filter((attachment) => attachment.id !== id)
-      })),
-      clearAttachments: () => store.setState({ attachments: [] }),
+      removeAttachment: (id) => {
+        revokePreviews(store.getState().attachments.filter((attachment) => attachment.id === id));
+        store.setState((state) => ({
+          attachments: state.attachments.filter((attachment) => attachment.id !== id)
+        }));
+      },
+      clearAttachments: () => {
+        revokePreviews(store.getState().attachments);
+        store.setState({ attachments: [] });
+      },
       setIsUploading: (uploading) => store.setState({ isUploading: uploading }),
       setNotice: (next) => {
         if ((store.getState().notice ?? null) !== next) store.setState({ notice: next });

package/dist/composer/AttachmentContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentContext.js","sources":["../../src/composer/AttachmentContext.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, useState, type ReactNode } from 'react';\nimport { useStore } from 'zustand';\nimport { createStore, type StoreApi } from 'zustand/vanilla';\nimport { createAthenaSpacesUrl, DEFAULT_APP_URL } from '../lib/athena-urls';\nimport type { UploadedAsset } from './useFileUpload';\n\ninterface AttachmentContextValue {\n  attachments: UploadedAsset[];\n  addAttachments: (assets: UploadedAsset[]) => void;\n  removeAttachment: (id: string) => void;\n  clearAttachments: () => void;\n  /** True when one or more files are currently being uploaded. */\n  isUploading: boolean;\n  setIsUploading: (v: boolean) => void;\n  /**\n   * Why the last files offered were not attached, for the composer to say (a file picked while\n   * Athena can't be reached cannot upload), or `null`.\n   */\n  notice: string | null;\n  setNotice: (notice: string | null) => void;\n}\n\nconst AttachmentCtx = createContext<AttachmentContextValue | null>(null);\n\ninterface AttachmentStoreState {\n  attachments: UploadedAsset[];\n  isUploading: boolean;\n  notice?: string | null;\n}\n\n/**\n * A composer's staged attachments, kept outside React (`createAttachmentStore`):\n * a host that shows several chats gives each its own, and keeps it while that\n * chat's `AthenaChat` remounts (a tab moving between windows).\n */\nexport type AttachmentStore = StoreApi<AttachmentStoreState>;\n\n/** An empty `AttachmentStore`, for `<AttachmentProvider store>`. */\nexport function createAttachmentStore(): AttachmentStore {\n  return createStore<AttachmentStoreState>(() => ({ attachments: [], isUploading: false, notice: null }));\n}\n\n/**\n * Staged attachments for the composer. With a `store`, they are that store's,\n * whatever is mounted above: one per chat when a host shows several. Without\n * one, a provider already mounted above (a host's, outliving a remounting\n * \\`AthenaChat\\` such as a tab moving between windows) is reused instead of\n * starting empty.\n */\nexport function AttachmentProvider({\n  children,\n  store,\n}: {\n  children: ReactNode;\n  store?: AttachmentStore;\n}) {\n  const outer = useContext(AttachmentCtx);\n  if (store) return <StoreAttachmentProvider store={store}>{children}</StoreAttachmentProvider>;\n  if (outer) return <>{children}</>;\n  return <OwnAttachmentProvider>{children}</OwnAttachmentProvider>;\n}\n\nfunction OwnAttachmentProvider({ children }: { children: ReactNode }) {\n  const [store] = useState(createAttachmentStore);\n  return <StoreAttachmentProvider store={store}>{children}</StoreAttachmentProvider>;\n}\n\nfunction StoreAttachmentProvider({\n  children,\n  store,\n}: {\n  children: ReactNode;\n  store: AttachmentStore;\n}) {\n  const attachments = useStore(store, (state) => state.attachments);\n  const isUploading = useStore(store, (state) => state.isUploading);\n  const notice = useStore(store, (state) => state.notice ?? null);\n  const actions = useMemo(\n    () => ({\n      addAttachments: (assets: UploadedAsset[]) =>\n        store.setState((state) => ({ attachments: [...state.attachments, ...assets] })),\n      removeAttachment: (id: string) =>\n        store.setState((state) => ({\n          attachments: state.attachments.filter((attachment) => attachment.id !== id),\n        })),\n      clearAttachments: () => store.setState({ attachments: [] }),\n      setIsUploading: (uploading: boolean) => store.setState({ isUploading: uploading }),\n      setNotice: (next: string | null) => {\n        if ((store.getState().notice ?? null) !== next) store.setState({ notice: next });\n      },\n    }),\n    [store],\n  );\n  const value = useMemo(\n    () => ({ attachments, isUploading, notice, ...actions }),\n    [attachments, isUploading, notice, actions],\n  );\n\n  return (\n    <AttachmentCtx.Provider value={value}>\n      {children}\n    </AttachmentCtx.Provider>\n  );\n}\n\nexport function useAttachments(): AttachmentContextValue {\n  const ctx = useContext(AttachmentCtx);\n  if (!ctx) {\n    throw new Error('[AthenaSDK] useAttachments must be used within <AttachmentProvider>');\n  }\n  return ctx;\n}\n\n/**\n * Build the markdown references for the current attachments.\n * Returns empty string if no attachments.\n *\n * @deprecated Use `buildAttachmentMarkdownWithAppUrl` to avoid defaulting links to the production Athena app URL.\n */\nexport function buildAttachmentMarkdown(attachments: UploadedAsset[]): string {\n  return buildAttachmentMarkdownWithAppUrl({ attachments });\n}\n\nexport function buildAttachmentMarkdownWithAppUrl({\n  attachments,\n  appUrl = DEFAULT_APP_URL,\n}: {\n  attachments: UploadedAsset[];\n  appUrl?: string;\n}): string {\n  if (attachments.length === 0) return '';\n  return attachments\n    .map((attachment) => `[@${attachment.title}](${createAthenaSpacesUrl({ appUrl, assetIds: attachment.id })})`)\n    .join('\\n');\n}\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,gBAAgB,cAA6C,IAAI;AAgBhE,SAAS,wBAAyC;AACvD,SAAO,YAAkC,OAAO,EAAE,aAAa,CAAA,GAAI,aAAa,OAAO,QAAQ,KAAA,EAAO;AACxG;AASO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,QAAM,QAAQ,WAAW,aAAa;AACtC,MAAI,MAAO,QAAO,oBAAC,yBAAA,EAAwB,OAAe,UAAS;AACnE,MAAI,MAAO,QAAO,oBAAA,UAAA,EAAG,SAAA,CAAS;AAC9B,SAAO,oBAAC,yBAAuB,UAAS;AAC1C;AAEA,SAAS,sBAAsB,EAAE,YAAqC;AACpE,QAAM,CAAC,KAAK,IAAI,SAAS,qBAAqB;AAC9C,SAAO,oBAAC,yBAAA,EAAwB,OAAe,SAAA,CAAS;AAC1D;AAEA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,cAAc,SAAS,OAAO,CAAC,UAAU,MAAM,WAAW;AAChE,QAAM,cAAc,SAAS,OAAO,CAAC,UAAU,MAAM,WAAW;AAChE,QAAM,SAAS,SAAS,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI;AAC9D,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,gBAAgB,CAAC,WACf,MAAM,SAAS,CAAC,WAAW,EAAE,aAAa,CAAC,GAAG,MAAM,aAAa,GAAG,MAAM,IAAI;AAAA,MAChF,kBAAkB,CAAC,OACjB,MAAM,SAAS,CAAC,WAAW;AAAA,QACzB,aAAa,MAAM,YAAY,OAAO,CAAC,eAAe,WAAW,OAAO,EAAE;AAAA,MAAA,EAC1E;AAAA,MACJ,kBAAkB,MAAM,MAAM,SAAS,EAAE,aAAa,CAAA,GAAI;AAAA,MAC1D,gBAAgB,CAAC,cAAuB,MAAM,SAAS,EAAE,aAAa,WAAW;AAAA,MACjF,WAAW,CAAC,SAAwB;AAClC,aAAK,MAAM,SAAA,EAAW,UAAU,UAAU,KAAM,OAAM,SAAS,EAAE,QAAQ,KAAA,CAAM;AAAA,MACjF;AAAA,IAAA;AAAA,IAEF,CAAC,KAAK;AAAA,EAAA;AAER,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,aAAa,aAAa,QAAQ,GAAG,QAAA;AAAA,IAC9C,CAAC,aAAa,aAAa,QAAQ,OAAO;AAAA,EAAA;AAG5C,SACE,oBAAC,cAAc,UAAd,EAAuB,OACrB,SAAA,CACH;AAEJ;AAEO,SAAS,iBAAyC;AACvD,QAAM,MAAM,WAAW,aAAa;AACpC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,qEAAqE;AAAA,EACvF;AACA,SAAO;AACT;AAYO,SAAS,kCAAkC;AAAA,EAChD;AAAA,EACA,SAAS;AACX,GAGW;AACT,MAAI,YAAY,WAAW,EAAG,QAAO;AACrC,SAAO,YACJ,IAAI,CAAC,eAAe,KAAK,WAAW,KAAK,KAAK,sBAAsB,EAAE,QAAQ,UAAU,WAAW,GAAA,CAAI,CAAC,GAAG,EAC3G,KAAK,IAAI;AACd;"}
+{"version":3,"file":"AttachmentContext.js","sources":["../../src/composer/AttachmentContext.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';\nimport { useStore } from 'zustand';\nimport { createStore, type StoreApi } from 'zustand/vanilla';\nimport { createAthenaSpacesUrl, DEFAULT_APP_URL } from '../lib/athena-urls';\nimport type { UploadedAsset } from './useFileUpload';\n\ninterface AttachmentContextValue {\n  attachments: UploadedAsset[];\n  addAttachments: (assets: UploadedAsset[]) => void;\n  removeAttachment: (id: string) => void;\n  clearAttachments: () => void;\n  /** True when one or more files are currently being uploaded. */\n  isUploading: boolean;\n  setIsUploading: (v: boolean) => void;\n  /**\n   * Why the last files offered were not attached, for the composer to say (a file picked while\n   * Athena can't be reached cannot upload), or `null`.\n   */\n  notice: string | null;\n  setNotice: (notice: string | null) => void;\n}\n\nconst AttachmentCtx = createContext<AttachmentContextValue | null>(null);\n\ninterface AttachmentStoreState {\n  attachments: UploadedAsset[];\n  isUploading: boolean;\n  notice?: string | null;\n}\n\n/**\n * A composer's staged attachments, kept outside React (`createAttachmentStore`):\n * a host that shows several chats gives each its own, and keeps it while that\n * chat's `AthenaChat` remounts (a tab moving between windows).\n */\nexport type AttachmentStore = StoreApi<AttachmentStoreState>;\n\n/** An empty `AttachmentStore`, for `<AttachmentProvider store>`. */\nexport function createAttachmentStore(): AttachmentStore {\n  return createStore<AttachmentStoreState>(() => ({ attachments: [], isUploading: false, notice: null }));\n}\n\n/**\n * Staged attachments for the composer. With a `store`, they are that store's,\n * whatever is mounted above: one per chat when a host shows several. Without\n * one, a provider already mounted above (a host's, outliving a remounting\n * \\`AthenaChat\\` such as a tab moving between windows) is reused instead of\n * starting empty.\n */\nexport function AttachmentProvider({\n  children,\n  store,\n}: {\n  children: ReactNode;\n  store?: AttachmentStore;\n}) {\n  const outer = useContext(AttachmentCtx);\n  if (store) return <StoreAttachmentProvider store={store}>{children}</StoreAttachmentProvider>;\n  if (outer) return <>{children}</>;\n  return <OwnAttachmentProvider>{children}</OwnAttachmentProvider>;\n}\n\nfunction OwnAttachmentProvider({ children }: { children: ReactNode }) {\n  const [store] = useState(createAttachmentStore);\n  // The store is this provider's alone and goes with it: free the pictures a\n  // draft still held. A host's store (`store`, an outer provider) outlives a\n  // remount and keeps them.\n  useEffect(() => () => revokePreviews(store.getState().attachments), [store]);\n  return <StoreAttachmentProvider store={store}>{children}</StoreAttachmentProvider>;\n}\n\n/** Frees the local picture previews of attachments the draft lets go. */\nfunction revokePreviews(attachments: readonly UploadedAsset[]): void {\n  if (typeof URL === 'undefined' || typeof URL.revokeObjectURL !== 'function') return;\n  for (const attachment of attachments) {\n    if (attachment.previewUrl) URL.revokeObjectURL(attachment.previewUrl);\n  }\n}\n\nfunction StoreAttachmentProvider({\n  children,\n  store,\n}: {\n  children: ReactNode;\n  store: AttachmentStore;\n}) {\n  const attachments = useStore(store, (state) => state.attachments);\n  const isUploading = useStore(store, (state) => state.isUploading);\n  const notice = useStore(store, (state) => state.notice ?? null);\n  const actions = useMemo(\n    () => ({\n      addAttachments: (assets: UploadedAsset[]) =>\n        store.setState((state) => ({ attachments: [...state.attachments, ...assets] })),\n      removeAttachment: (id: string) => {\n        revokePreviews(store.getState().attachments.filter((attachment) => attachment.id === id));\n        store.setState((state) => ({\n          attachments: state.attachments.filter((attachment) => attachment.id !== id),\n        }));\n      },\n      clearAttachments: () => {\n        revokePreviews(store.getState().attachments);\n        store.setState({ attachments: [] });\n      },\n      setIsUploading: (uploading: boolean) => store.setState({ isUploading: uploading }),\n      setNotice: (next: string | null) => {\n        if ((store.getState().notice ?? null) !== next) store.setState({ notice: next });\n      },\n    }),\n    [store],\n  );\n  const value = useMemo(\n    () => ({ attachments, isUploading, notice, ...actions }),\n    [attachments, isUploading, notice, actions],\n  );\n\n  return (\n    <AttachmentCtx.Provider value={value}>\n      {children}\n    </AttachmentCtx.Provider>\n  );\n}\n\nexport function useAttachments(): AttachmentContextValue {\n  const ctx = useContext(AttachmentCtx);\n  if (!ctx) {\n    throw new Error('[AthenaSDK] useAttachments must be used within <AttachmentProvider>');\n  }\n  return ctx;\n}\n\n/**\n * Build the markdown references for the current attachments.\n * Returns empty string if no attachments.\n *\n * @deprecated Use `buildAttachmentMarkdownWithAppUrl` to avoid defaulting links to the production Athena app URL.\n */\nexport function buildAttachmentMarkdown(attachments: UploadedAsset[]): string {\n  return buildAttachmentMarkdownWithAppUrl({ attachments });\n}\n\nexport function buildAttachmentMarkdownWithAppUrl({\n  attachments,\n  appUrl = DEFAULT_APP_URL,\n}: {\n  attachments: UploadedAsset[];\n  appUrl?: string;\n}): string {\n  if (attachments.length === 0) return '';\n  return attachments\n    .map((attachment) => `[@${attachment.title}](${createAthenaSpacesUrl({ appUrl, assetIds: attachment.id })})`)\n    .join('\\n');\n}\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,gBAAgB,cAA6C,IAAI;AAgBhE,SAAS,wBAAyC;AACvD,SAAO,YAAkC,OAAO,EAAE,aAAa,CAAA,GAAI,aAAa,OAAO,QAAQ,KAAA,EAAO;AACxG;AASO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AACF,GAGG;AACD,QAAM,QAAQ,WAAW,aAAa;AACtC,MAAI,MAAO,QAAO,oBAAC,yBAAA,EAAwB,OAAe,UAAS;AACnE,MAAI,MAAO,QAAO,oBAAA,UAAA,EAAG,SAAA,CAAS;AAC9B,SAAO,oBAAC,yBAAuB,UAAS;AAC1C;AAEA,SAAS,sBAAsB,EAAE,YAAqC;AACpE,QAAM,CAAC,KAAK,IAAI,SAAS,qBAAqB;AAI9C,YAAU,MAAM,MAAM,eAAe,MAAM,SAAA,EAAW,WAAW,GAAG,CAAC,KAAK,CAAC;AAC3E,SAAO,oBAAC,yBAAA,EAAwB,OAAe,SAAA,CAAS;AAC1D;AAGA,SAAS,eAAe,aAA6C;AACnE,MAAI,OAAO,QAAQ,eAAe,OAAO,IAAI,oBAAoB,WAAY;AAC7E,aAAW,cAAc,aAAa;AACpC,QAAI,WAAW,WAAY,KAAI,gBAAgB,WAAW,UAAU;AAAA,EACtE;AACF;AAEA,SAAS,wBAAwB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,cAAc,SAAS,OAAO,CAAC,UAAU,MAAM,WAAW;AAChE,QAAM,cAAc,SAAS,OAAO,CAAC,UAAU,MAAM,WAAW;AAChE,QAAM,SAAS,SAAS,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI;AAC9D,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,gBAAgB,CAAC,WACf,MAAM,SAAS,CAAC,WAAW,EAAE,aAAa,CAAC,GAAG,MAAM,aAAa,GAAG,MAAM,IAAI;AAAA,MAChF,kBAAkB,CAAC,OAAe;AAChC,uBAAe,MAAM,SAAA,EAAW,YAAY,OAAO,CAAC,eAAe,WAAW,OAAO,EAAE,CAAC;AACxF,cAAM,SAAS,CAAC,WAAW;AAAA,UACzB,aAAa,MAAM,YAAY,OAAO,CAAC,eAAe,WAAW,OAAO,EAAE;AAAA,QAAA,EAC1E;AAAA,MACJ;AAAA,MACA,kBAAkB,MAAM;AACtB,uBAAe,MAAM,SAAA,EAAW,WAAW;AAC3C,cAAM,SAAS,EAAE,aAAa,CAAA,GAAI;AAAA,MACpC;AAAA,MACA,gBAAgB,CAAC,cAAuB,MAAM,SAAS,EAAE,aAAa,WAAW;AAAA,MACjF,WAAW,CAAC,SAAwB;AAClC,aAAK,MAAM,SAAA,EAAW,UAAU,UAAU,KAAM,OAAM,SAAS,EAAE,QAAQ,KAAA,CAAM;AAAA,MACjF;AAAA,IAAA;AAAA,IAEF,CAAC,KAAK;AAAA,EAAA;AAER,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,aAAa,aAAa,QAAQ,GAAG,QAAA;AAAA,IAC9C,CAAC,aAAa,aAAa,QAAQ,OAAO;AAAA,EAAA;AAG5C,SACE,oBAAC,cAAc,UAAd,EAAuB,OACrB,SAAA,CACH;AAEJ;AAEO,SAAS,iBAAyC;AACvD,QAAM,MAAM,WAAW,aAAa;AACpC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,qEAAqE;AAAA,EACvF;AACA,SAAO;AACT;AAYO,SAAS,kCAAkC;AAAA,EAChD;AAAA,EACA,SAAS;AACX,GAGW;AACT,MAAI,YAAY,WAAW,EAAG,QAAO;AACrC,SAAO,YACJ,IAAI,CAAC,eAAe,KAAK,WAAW,KAAK,KAAK,sBAAsB,EAAE,QAAQ,UAAU,WAAW,GAAA,CAAI,CAAC,GAAG,EAC3G,KAAK,IAAI;AACd;"}

package/dist/composer/ComposerAttachmentPreview.cjs

@@ -2,37 +2,92 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
+const require$$0 = require("react");
+const imageViewer = require("../ui/image-viewer.cjs");
 const AttachmentContext = require("./AttachmentContext.cjs");
 const cnfast = require("cnfast");
+const isPicture = (asset) => Boolean(asset.previewUrl);
+const REMOVE_BUTTON_CLASS = "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors";
 const ComposerAttachmentPreview = ({ className }) => {
   const { attachments, isUploading, removeAttachment } = AttachmentContext.useAttachments();
+  const pictures = require$$0.useMemo(() => attachments.filter(isPicture), [attachments]);
+  const images = require$$0.useMemo(
+    () => pictures.map((picture) => ({ src: picture.previewUrl, name: picture.title })),
+    [pictures]
+  );
+  const [viewingId, setViewingId] = require$$0.useState(null);
+  const viewingIndex = pictures.findIndex((picture) => picture.id === viewingId);
   if (attachments.length === 0 && !isUploading) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cnfast.cn("aui-attachment-preview mx-3 mt-2 flex flex-wrap gap-1.5", className), children: [
-    attachments.map((asset) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PaperclipIcon, { className: "size-3 shrink-0 text-muted-foreground/60" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[180px] truncate text-foreground/80", children: asset.title }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => removeAttachment(asset.id),
-              className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
-              "aria-label": `Remove ${asset.title}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
-            }
-          )
-        ]
-      },
-      asset.id
-    )),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cnfast.cn("aui-attachment-preview mx-3 mt-2 flex flex-wrap items-end gap-1.5", className), children: [
+    attachments.map(
+      (asset) => isPicture(asset) ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "group relative h-14 w-[72px] shrink-0 overflow-hidden rounded-lg border border-border/60 bg-muted/40",
+          "data-slot": "attachment-picture",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewingId(asset.id),
+                className: "block size-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                "aria-label": `View ${asset.title}`,
+                title: asset.title,
+                children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: asset.previewUrl, alt: asset.title, draggable: false, className: "size-full object-cover" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeAttachment(asset.id),
+                className: "absolute right-0.5 top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white opacity-80 transition-opacity hover:bg-black/80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white",
+                "aria-label": `Remove ${asset.title}`,
+                title: "Remove",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        asset.id
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PaperclipIcon, { className: "size-3 shrink-0 text-muted-foreground/60" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[180px] truncate text-foreground/80", children: asset.title }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeAttachment(asset.id),
+                className: REMOVE_BUTTON_CLASS,
+                "aria-label": `Remove ${asset.title}`,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        asset.id
+      )
+    ),
     isUploading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "size-3 shrink-0 animate-spin" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Uploading..." })
-    ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      imageViewer.ImageViewer,
+      {
+        images,
+        index: viewingIndex === -1 ? null : viewingIndex,
+        onIndexChange: (index) => {
+          var _a;
+          return setViewingId(index === null ? null : ((_a = pictures[index]) == null ? void 0 : _a.id) ?? null);
+        }
+      }
+    )
   ] });
 };
 exports.ComposerAttachmentPreview = ComposerAttachmentPreview;

package/dist/composer/ComposerAttachmentPreview.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerAttachmentPreview.cjs","sources":["../../src/composer/ComposerAttachmentPreview.tsx"],"sourcesContent":["import { Loader2Icon, PaperclipIcon, XIcon } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useAttachments } from './AttachmentContext';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerAttachmentPreviewProps {\n  className?: string;\n}\n\n/**\n * Renders uploaded file pills above the composer.\n * Each pill shows the file name and a dismiss button.\n */\nexport const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps> = ({ className }) => {\n  const { attachments, isUploading, removeAttachment } = useAttachments();\n\n  if (attachments.length === 0 && !isUploading) return null;\n\n  return (\n    <div className={cn('aui-attachment-preview mx-3 mt-2 flex flex-wrap gap-1.5', className)}>\n      {attachments.map((asset) => (\n        <div\n          key={asset.id}\n          className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs\"\n        >\n          <PaperclipIcon className=\"size-3 shrink-0 text-muted-foreground/60\" />\n          <span className=\"max-w-[180px] truncate text-foreground/80\">{asset.title}</span>\n          <button\n            type=\"button\"\n            onClick={() => removeAttachment(asset.id)}\n            className=\"shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors\"\n            aria-label={`Remove ${asset.title}`}\n          >\n            <XIcon className=\"size-3\" />\n          </button>\n        </div>\n      ))}\n      {isUploading ? (\n        <div className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground\">\n          <Loader2Icon className=\"size-3 shrink-0 animate-spin\" />\n          <span>Uploading...</span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useAttachments","cn","jsxs","jsx","PaperclipIcon","XIcon","Loader2Icon"],"mappings":";;;;;;AAaO,MAAM,4BAAgE,CAAC,EAAE,gBAAgB;AAC9F,QAAM,EAAE,aAAa,aAAa,iBAAA,IAAqBA,kBAAAA,eAAA;AAEvD,MAAI,YAAY,WAAW,KAAK,CAAC,YAAa,QAAO;AAErD,yCACG,OAAA,EAAI,WAAWC,OAAAA,GAAG,2DAA2D,SAAS,GACpF,UAAA;AAAA,IAAA,YAAY,IAAI,CAAC,UAChBC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAAC,2BAAAA,IAACC,YAAAA,eAAA,EAAc,WAAU,2CAAA,CAA2C;AAAA,UACpED,2BAAAA,IAAC,QAAA,EAAK,WAAU,6CAA6C,gBAAM,OAAM;AAAA,UACzEA,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,cACxC,WAAU;AAAA,cACV,cAAY,UAAU,MAAM,KAAK;AAAA,cAEjC,UAAAA,2BAAAA,IAACE,YAAAA,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5B;AAAA,MAAA;AAAA,MAZK,MAAM;AAAA,IAAA,CAcd;AAAA,IACA,cACCH,2BAAAA,KAAC,OAAA,EAAI,WAAU,wHACb,UAAA;AAAA,MAAAC,2BAAAA,IAACG,YAAAA,aAAA,EAAY,WAAU,+BAAA,CAA+B;AAAA,MACtDH,2BAAAA,IAAC,UAAK,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CACpB,IACE;AAAA,EAAA,GACN;AAEJ;;"}
+{"version":3,"file":"ComposerAttachmentPreview.cjs","sources":["../../src/composer/ComposerAttachmentPreview.tsx"],"sourcesContent":["import { Loader2Icon, PaperclipIcon, XIcon } from 'lucide-react';\nimport { type FC, useMemo, useState } from 'react';\nimport { ImageViewer, type ImageViewerImage } from '../ui/image-viewer';\nimport { useAttachments } from './AttachmentContext';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerAttachmentPreviewProps {\n  className?: string;\n}\n\n/** A staged picture: the attachment, with the local preview it shows. */\ntype PictureAttachment = UploadedAsset & { previewUrl: string };\n\nconst isPicture = (asset: UploadedAsset): asset is PictureAttachment => Boolean(asset.previewUrl);\n\nconst REMOVE_BUTTON_CLASS =\n  'shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors';\n\n/**\n * Renders the draft's attachments above the composer. A picture shows as a\n * thumbnail that opens full screen, as Devin's composer does (← → page through\n * the draft's pictures, Esc closes); any other file shows as a pill with its\n * name. Each has a dismiss button.\n */\nexport const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps> = ({ className }) => {\n  const { attachments, isUploading, removeAttachment } = useAttachments();\n  const pictures = useMemo(() => attachments.filter(isPicture), [attachments]);\n  const images = useMemo<ImageViewerImage[]>(\n    () => pictures.map((picture) => ({ src: picture.previewUrl, name: picture.title })),\n    [pictures],\n  );\n  // The picture open in the viewer, by attachment id: removing another one\n  // never moves the viewer to a different picture.\n  const [viewingId, setViewingId] = useState<string | null>(null);\n  const viewingIndex = pictures.findIndex((picture) => picture.id === viewingId);\n\n  if (attachments.length === 0 && !isUploading) return null;\n\n  return (\n    <div className={cn('aui-attachment-preview mx-3 mt-2 flex flex-wrap items-end gap-1.5', className)}>\n      {attachments.map((asset) =>\n        isPicture(asset) ? (\n          <div\n            key={asset.id}\n            className=\"group relative h-14 w-[72px] shrink-0 overflow-hidden rounded-lg border border-border/60 bg-muted/40\"\n            data-slot=\"attachment-picture\"\n          >\n            <button\n              type=\"button\"\n              onClick={() => setViewingId(asset.id)}\n              className=\"block size-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\"\n              aria-label={`View ${asset.title}`}\n              title={asset.title}\n            >\n              <img src={asset.previewUrl} alt={asset.title} draggable={false} className=\"size-full object-cover\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => removeAttachment(asset.id)}\n              className=\"absolute right-0.5 top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white opacity-80 transition-opacity hover:bg-black/80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white\"\n              aria-label={`Remove ${asset.title}`}\n              title=\"Remove\"\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          </div>\n        ) : (\n          <div\n            key={asset.id}\n            className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs\"\n          >\n            <PaperclipIcon className=\"size-3 shrink-0 text-muted-foreground/60\" />\n            <span className=\"max-w-[180px] truncate text-foreground/80\">{asset.title}</span>\n            <button\n              type=\"button\"\n              onClick={() => removeAttachment(asset.id)}\n              className={REMOVE_BUTTON_CLASS}\n              aria-label={`Remove ${asset.title}`}\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          </div>\n        ),\n      )}\n      {isUploading ? (\n        <div className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground\">\n          <Loader2Icon className=\"size-3 shrink-0 animate-spin\" />\n          <span>Uploading...</span>\n        </div>\n      ) : null}\n      <ImageViewer\n        images={images}\n        index={viewingIndex === -1 ? null : viewingIndex}\n        onIndexChange={(index) => setViewingId(index === null ? null : (pictures[index]?.id ?? null))}\n      />\n    </div>\n  );\n};\n"],"names":["useAttachments","useMemo","useState","cn","jsxs","jsx","XIcon","PaperclipIcon","Loader2Icon","ImageViewer"],"mappings":"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"}

package/dist/composer/ComposerAttachmentPreview.d.ts

@@ -1,9 +1,11 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 export interface ComposerAttachmentPreviewProps {
     className?: string;
 }
 /**
- * Renders uploaded file pills above the composer.
- * Each pill shows the file name and a dismiss button.
+ * Renders the draft's attachments above the composer. A picture shows as a
+ * thumbnail that opens full screen, as Devin's composer does (← → page through
+ * the draft's pictures, Esc closes); any other file shows as a pill with its
+ * name. Each has a dismiss button.
  */
 export declare const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps>;

package/dist/composer/ComposerAttachmentPreview.js

@@ -1,36 +1,91 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { PaperclipIcon, XIcon, Loader2Icon } from "lucide-react";
+import { XIcon, PaperclipIcon, Loader2Icon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { ImageViewer } from "../ui/image-viewer.js";
 import { useAttachments } from "./AttachmentContext.js";
 import { cn } from "cnfast";
+const isPicture = (asset) => Boolean(asset.previewUrl);
+const REMOVE_BUTTON_CLASS = "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors";
 const ComposerAttachmentPreview = ({ className }) => {
   const { attachments, isUploading, removeAttachment } = useAttachments();
+  const pictures = useMemo(() => attachments.filter(isPicture), [attachments]);
+  const images = useMemo(
+    () => pictures.map((picture) => ({ src: picture.previewUrl, name: picture.title })),
+    [pictures]
+  );
+  const [viewingId, setViewingId] = useState(null);
+  const viewingIndex = pictures.findIndex((picture) => picture.id === viewingId);
   if (attachments.length === 0 && !isUploading) return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("aui-attachment-preview mx-3 mt-2 flex flex-wrap gap-1.5", className), children: [
-    attachments.map((asset) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs",
-        children: [
-          /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3 shrink-0 text-muted-foreground/60" }),
-          /* @__PURE__ */ jsx("span", { className: "max-w-[180px] truncate text-foreground/80", children: asset.title }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => removeAttachment(asset.id),
-              className: "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
-              "aria-label": `Remove ${asset.title}`,
-              children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
-            }
-          )
-        ]
-      },
-      asset.id
-    )),
+  return /* @__PURE__ */ jsxs("div", { className: cn("aui-attachment-preview mx-3 mt-2 flex flex-wrap items-end gap-1.5", className), children: [
+    attachments.map(
+      (asset) => isPicture(asset) ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "group relative h-14 w-[72px] shrink-0 overflow-hidden rounded-lg border border-border/60 bg-muted/40",
+          "data-slot": "attachment-picture",
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setViewingId(asset.id),
+                className: "block size-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                "aria-label": `View ${asset.title}`,
+                title: asset.title,
+                children: /* @__PURE__ */ jsx("img", { src: asset.previewUrl, alt: asset.title, draggable: false, className: "size-full object-cover" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeAttachment(asset.id),
+                className: "absolute right-0.5 top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white opacity-80 transition-opacity hover:bg-black/80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white",
+                "aria-label": `Remove ${asset.title}`,
+                title: "Remove",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        asset.id
+      ) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs",
+          children: [
+            /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3 shrink-0 text-muted-foreground/60" }),
+            /* @__PURE__ */ jsx("span", { className: "max-w-[180px] truncate text-foreground/80", children: asset.title }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeAttachment(asset.id),
+                className: REMOVE_BUTTON_CLASS,
+                "aria-label": `Remove ${asset.title}`,
+                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+              }
+            )
+          ]
+        },
+        asset.id
+      )
+    ),
     isUploading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 shrink-0 animate-spin" }),
       /* @__PURE__ */ jsx("span", { children: "Uploading..." })
-    ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      ImageViewer,
+      {
+        images,
+        index: viewingIndex === -1 ? null : viewingIndex,
+        onIndexChange: (index) => {
+          var _a;
+          return setViewingId(index === null ? null : ((_a = pictures[index]) == null ? void 0 : _a.id) ?? null);
+        }
+      }
+    )
   ] });
 };
 export {

package/dist/composer/ComposerAttachmentPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComposerAttachmentPreview.js","sources":["../../src/composer/ComposerAttachmentPreview.tsx"],"sourcesContent":["import { Loader2Icon, PaperclipIcon, XIcon } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useAttachments } from './AttachmentContext';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerAttachmentPreviewProps {\n  className?: string;\n}\n\n/**\n * Renders uploaded file pills above the composer.\n * Each pill shows the file name and a dismiss button.\n */\nexport const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps> = ({ className }) => {\n  const { attachments, isUploading, removeAttachment } = useAttachments();\n\n  if (attachments.length === 0 && !isUploading) return null;\n\n  return (\n    <div className={cn('aui-attachment-preview mx-3 mt-2 flex flex-wrap gap-1.5', className)}>\n      {attachments.map((asset) => (\n        <div\n          key={asset.id}\n          className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs\"\n        >\n          <PaperclipIcon className=\"size-3 shrink-0 text-muted-foreground/60\" />\n          <span className=\"max-w-[180px] truncate text-foreground/80\">{asset.title}</span>\n          <button\n            type=\"button\"\n            onClick={() => removeAttachment(asset.id)}\n            className=\"shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors\"\n            aria-label={`Remove ${asset.title}`}\n          >\n            <XIcon className=\"size-3\" />\n          </button>\n        </div>\n      ))}\n      {isUploading ? (\n        <div className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground\">\n          <Loader2Icon className=\"size-3 shrink-0 animate-spin\" />\n          <span>Uploading...</span>\n        </div>\n      ) : null}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,4BAAgE,CAAC,EAAE,gBAAgB;AAC9F,QAAM,EAAE,aAAa,aAAa,iBAAA,IAAqB,eAAA;AAEvD,MAAI,YAAY,WAAW,KAAK,CAAC,YAAa,QAAO;AAErD,8BACG,OAAA,EAAI,WAAW,GAAG,2DAA2D,SAAS,GACpF,UAAA;AAAA,IAAA,YAAY,IAAI,CAAC,UAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,oBAAC,eAAA,EAAc,WAAU,2CAAA,CAA2C;AAAA,UACpE,oBAAC,QAAA,EAAK,WAAU,6CAA6C,gBAAM,OAAM;AAAA,UACzE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,cACxC,WAAU;AAAA,cACV,cAAY,UAAU,MAAM,KAAK;AAAA,cAEjC,UAAA,oBAAC,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5B;AAAA,MAAA;AAAA,MAZK,MAAM;AAAA,IAAA,CAcd;AAAA,IACA,cACC,qBAAC,OAAA,EAAI,WAAU,wHACb,UAAA;AAAA,MAAA,oBAAC,aAAA,EAAY,WAAU,+BAAA,CAA+B;AAAA,MACtD,oBAAC,UAAK,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CACpB,IACE;AAAA,EAAA,GACN;AAEJ;"}
+{"version":3,"file":"ComposerAttachmentPreview.js","sources":["../../src/composer/ComposerAttachmentPreview.tsx"],"sourcesContent":["import { Loader2Icon, PaperclipIcon, XIcon } from 'lucide-react';\nimport { type FC, useMemo, useState } from 'react';\nimport { ImageViewer, type ImageViewerImage } from '../ui/image-viewer';\nimport { useAttachments } from './AttachmentContext';\nimport type { UploadedAsset } from './useFileUpload';\nimport { cn } from '../lib/utils';\n\nexport interface ComposerAttachmentPreviewProps {\n  className?: string;\n}\n\n/** A staged picture: the attachment, with the local preview it shows. */\ntype PictureAttachment = UploadedAsset & { previewUrl: string };\n\nconst isPicture = (asset: UploadedAsset): asset is PictureAttachment => Boolean(asset.previewUrl);\n\nconst REMOVE_BUTTON_CLASS =\n  'shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors';\n\n/**\n * Renders the draft's attachments above the composer. A picture shows as a\n * thumbnail that opens full screen, as Devin's composer does (← → page through\n * the draft's pictures, Esc closes); any other file shows as a pill with its\n * name. Each has a dismiss button.\n */\nexport const ComposerAttachmentPreview: FC<ComposerAttachmentPreviewProps> = ({ className }) => {\n  const { attachments, isUploading, removeAttachment } = useAttachments();\n  const pictures = useMemo(() => attachments.filter(isPicture), [attachments]);\n  const images = useMemo<ImageViewerImage[]>(\n    () => pictures.map((picture) => ({ src: picture.previewUrl, name: picture.title })),\n    [pictures],\n  );\n  // The picture open in the viewer, by attachment id: removing another one\n  // never moves the viewer to a different picture.\n  const [viewingId, setViewingId] = useState<string | null>(null);\n  const viewingIndex = pictures.findIndex((picture) => picture.id === viewingId);\n\n  if (attachments.length === 0 && !isUploading) return null;\n\n  return (\n    <div className={cn('aui-attachment-preview mx-3 mt-2 flex flex-wrap items-end gap-1.5', className)}>\n      {attachments.map((asset) =>\n        isPicture(asset) ? (\n          <div\n            key={asset.id}\n            className=\"group relative h-14 w-[72px] shrink-0 overflow-hidden rounded-lg border border-border/60 bg-muted/40\"\n            data-slot=\"attachment-picture\"\n          >\n            <button\n              type=\"button\"\n              onClick={() => setViewingId(asset.id)}\n              className=\"block size-full cursor-zoom-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\"\n              aria-label={`View ${asset.title}`}\n              title={asset.title}\n            >\n              <img src={asset.previewUrl} alt={asset.title} draggable={false} className=\"size-full object-cover\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => removeAttachment(asset.id)}\n              className=\"absolute right-0.5 top-0.5 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white opacity-80 transition-opacity hover:bg-black/80 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white\"\n              aria-label={`Remove ${asset.title}`}\n              title=\"Remove\"\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          </div>\n        ) : (\n          <div\n            key={asset.id}\n            className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs\"\n          >\n            <PaperclipIcon className=\"size-3 shrink-0 text-muted-foreground/60\" />\n            <span className=\"max-w-[180px] truncate text-foreground/80\">{asset.title}</span>\n            <button\n              type=\"button\"\n              onClick={() => removeAttachment(asset.id)}\n              className={REMOVE_BUTTON_CLASS}\n              aria-label={`Remove ${asset.title}`}\n            >\n              <XIcon className=\"size-3\" />\n            </button>\n          </div>\n        ),\n      )}\n      {isUploading ? (\n        <div className=\"flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-2.5 py-1.5 text-xs text-muted-foreground\">\n          <Loader2Icon className=\"size-3 shrink-0 animate-spin\" />\n          <span>Uploading...</span>\n        </div>\n      ) : null}\n      <ImageViewer\n        images={images}\n        index={viewingIndex === -1 ? null : viewingIndex}\n        onIndexChange={(index) => setViewingId(index === null ? null : (pictures[index]?.id ?? null))}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcA,MAAM,YAAY,CAAC,UAAqD,QAAQ,MAAM,UAAU;AAEhG,MAAM,sBACJ;AAQK,MAAM,4BAAgE,CAAC,EAAE,gBAAgB;AAC9F,QAAM,EAAE,aAAa,aAAa,iBAAA,IAAqB,eAAA;AACvD,QAAM,WAAW,QAAQ,MAAM,YAAY,OAAO,SAAS,GAAG,CAAC,WAAW,CAAC;AAC3E,QAAM,SAAS;AAAA,IACb,MAAM,SAAS,IAAI,CAAC,aAAa,EAAE,KAAK,QAAQ,YAAY,MAAM,QAAQ,MAAA,EAAQ;AAAA,IAClF,CAAC,QAAQ;AAAA,EAAA;AAIX,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,eAAe,SAAS,UAAU,CAAC,YAAY,QAAQ,OAAO,SAAS;AAE7E,MAAI,YAAY,WAAW,KAAK,CAAC,YAAa,QAAO;AAErD,8BACG,OAAA,EAAI,WAAW,GAAG,qEAAqE,SAAS,GAC9F,UAAA;AAAA,IAAA,YAAY;AAAA,MAAI,CAAC,UAChB,UAAU,KAAK,IACb;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UACV,aAAU;AAAA,UAEV,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,aAAa,MAAM,EAAE;AAAA,gBACpC,WAAU;AAAA,gBACV,cAAY,QAAQ,MAAM,KAAK;AAAA,gBAC/B,OAAO,MAAM;AAAA,gBAEb,UAAA,oBAAC,OAAA,EAAI,KAAK,MAAM,YAAY,KAAK,MAAM,OAAO,WAAW,OAAO,WAAU,yBAAA,CAAyB;AAAA,cAAA;AAAA,YAAA;AAAA,YAErG;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,gBACxC,WAAU;AAAA,gBACV,cAAY,UAAU,MAAM,KAAK;AAAA,gBACjC,OAAM;AAAA,gBAEN,UAAA,oBAAC,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,QAAA;AAAA,QArBK,MAAM;AAAA,MAAA,IAwBb;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,eAAA,EAAc,WAAU,2CAAA,CAA2C;AAAA,YACpE,oBAAC,QAAA,EAAK,WAAU,6CAA6C,gBAAM,OAAM;AAAA,YACzE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM,iBAAiB,MAAM,EAAE;AAAA,gBACxC,WAAW;AAAA,gBACX,cAAY,UAAU,MAAM,KAAK;AAAA,gBAEjC,UAAA,oBAAC,OAAA,EAAM,WAAU,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,QAAA;AAAA,QAZK,MAAM;AAAA,MAAA;AAAA,IAab;AAAA,IAGH,cACC,qBAAC,OAAA,EAAI,WAAU,wHACb,UAAA;AAAA,MAAA,oBAAC,aAAA,EAAY,WAAU,+BAAA,CAA+B;AAAA,MACtD,oBAAC,UAAK,UAAA,eAAA,CAAY;AAAA,IAAA,EAAA,CACpB,IACE;AAAA,IACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO,iBAAiB,KAAK,OAAO;AAAA,QACpC,eAAe,CAAC;;AAAU,8BAAa,UAAU,OAAO,SAAQ,cAAS,KAAK,MAAd,mBAAiB,OAAM,IAAK;AAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC9F,GACF;AAEJ;"}