@athenaintel/react 0.42.2 → 0.48.0

package/dist/chat-ui/composer/tiptap-composer.cjs

@@ -3,20 +3,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const athenaDiagnostics = require("../../diagnostics/athena-diagnostics.cjs");
 const clipboard = require("../../composer/clipboard.cjs");
-const react = require("react");
-const react$2 = require("@tiptap/react");
+const require$$0 = require("react");
+const react$1 = require("@tiptap/react");
 const Placeholder = require("@tiptap/extension-placeholder");
 const core = require("@tiptap/core");
-const react$1 = require("@assistant-ui/react");
+const react = require("@assistant-ui/react");
 const composerHandoff = require("../../composer/composer-handoff.cjs");
 const statewireSessionLane = require("../../runtime/statewire-session-lane.cjs");
 const lucideReact = require("lucide-react");
+const imageViewer = require("../../ui/image-viewer.cjs");
 const chatTextSchema = require("../rich-text/chat-text-schema.cjs");
 const mentionSuggestions_extension = require("../mentions/suggestions/mention-suggestions.extension.cjs");
 const mentionSuggestionPopup = require("../mentions/suggestions/components/mention-suggestion-popup.cjs");
 const mentionSuggestionList = require("../mentions/suggestions/components/mention-suggestion-list.cjs");
 const useMentionSuggestions = require("../mentions/suggestions/data/use-mention-suggestions.cjs");
 const state = require("@tiptap/pm/state");
+const offlineStatus = require("../../agent-runtime/src/offline-status.cjs");
 const composerMessage = require("./composer-message.cjs");
 const pendingAttachmentUploads = require("./pending-attachment-uploads.cjs");
 const runInputRulesOnEnter = require("./run-input-rules-on-enter.cjs");
@@ -101,8 +103,6 @@ function assetMentionIds(editor) {
   });
   return ids;
 }
-const OFFLINE_EXTRAS_MESSAGE = "Athena can't be reached. A message with an attachment or a quote can't wait to be sent — remove it to send the text when Athena is back.";
-const WAITING_EXTRAS_MESSAGE = "Messages you wrote while Athena couldn't be reached haven't gone yet. A message with an attachment or a quote can't wait behind them — send it once they've gone.";
 function chatOutboxRead(outbox) {
   if (outbox.getSnapshot().loaded) return Promise.resolve();
   return new Promise((resolve) => {
@@ -128,62 +128,89 @@ function ImagePreviewStrip({
   previews,
   onRemove
 }) {
+  const [viewingKey, setViewingKey] = require$$0.useState(null);
+  const viewingIndex = previews.findIndex((preview) => preview.key === viewingKey);
   if (previews.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "flex w-full gap-2 overflow-x-auto px-1.5 pb-1 pt-1.5",
-      role: "list",
-      "aria-label": "Image attachments",
-      children: previews.map((preview) => {
-        const uploading = preview.assetId === void 0;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "group relative h-16 w-[clamp(76px,30vw,112px)] shrink-0 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100 shadow-sm",
-            role: "listitem",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: preview.src,
-                  alt: preview.name,
-                  className: "size-full object-cover"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 truncate bg-gradient-to-t from-black/75 to-transparent px-1.5 pb-1 pt-4 text-[10px] font-medium text-white", children: preview.name }),
-              uploading ? /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: "absolute left-1 top-1 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white",
-                  title: "Uploading image",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircleIcon, { className: "size-3 animate-spin" })
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onRemove(preview),
-                  className: "absolute right-1 top-1 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 ${preview.name}`,
-                  title: "Remove image",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
-                }
-              )
-            ]
-          },
-          preview.key
-        );
-      })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex w-full gap-2 overflow-x-auto px-1.5 pb-1 pt-1.5",
+        role: "list",
+        "aria-label": "Image attachments",
+        children: previews.map((preview) => {
+          const uploading = preview.assetId === void 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "group relative h-16 w-[clamp(76px,30vw,112px)] shrink-0 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100 shadow-sm",
+              role: "listitem",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setViewingKey(preview.key),
+                    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 ${preview.name}`,
+                    title: `View ${preview.name}`,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: preview.src,
+                        alt: preview.name,
+                        className: "size-full object-cover",
+                        draggable: false
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 truncate bg-gradient-to-t from-black/75 to-transparent px-1.5 pb-1 pt-4 text-[10px] font-medium text-white", children: preview.name }),
+                uploading ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "absolute left-1 top-1 inline-flex size-5 items-center justify-center rounded-full bg-black/65 text-white",
+                    title: "Uploading image",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircleIcon, { className: "size-3 animate-spin" })
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onRemove(preview),
+                    className: "absolute right-1 top-1 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 ${preview.name}`,
+                    title: "Remove image",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
+                  }
+                )
+              ]
+            },
+            preview.key
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      imageViewer.ImageViewer,
+      {
+        images: previews,
+        index: viewingIndex === -1 ? null : viewingIndex,
+        onIndexChange: (index) => {
+          var _a;
+          return setViewingKey(index === null ? null : ((_a = previews[index]) == null ? void 0 : _a.key) ?? null);
+        }
+      }
+    )
+  ] });
 }
-const TiptapComposer = react.forwardRef(
+const TiptapComposer = require$$0.forwardRef(
   ({
     placeholder = "Message Athena... (type @ to mention)",
     threadId,
     disabled = false,
     sendBlocked = false,
+    mentionSearchUnavailable = null,
     appearance = "default",
     webpages = NO_WEBPAGES,
     tools,
@@ -199,38 +226,38 @@ const TiptapComposer = react.forwardRef(
     holdPendingExtras,
     onSubmitted
   }, outerRef) => {
-    const aui = react$1.useAui();
+    const aui = react.useAui();
     const outbox = useDeepAgentChatOutbox.useDeepAgentChatOutboxContext();
-    const outboxRef = react.useRef(outbox);
+    const outboxRef = require$$0.useRef(outbox);
     outboxRef.current = outbox;
-    const composerInput = react$1.unstable_useComposerInput();
+    const composerInput = react.unstable_useComposerInput();
     const handoff = composerHandoff.useComposerHandoffStore();
-    const applyingRuntimeTextRef = react.useRef(false);
-    const lastEmittedMarkdownRef = react.useRef(null);
-    const restoredSendRef = react.useRef(null);
-    const listRef = react.useRef(null);
-    const pendingUploadsRef = react.useRef(new pendingAttachmentUploads.PendingAttachmentUploads());
-    const submitInFlightRef = react.useRef(false);
-    const interceptionPendingRef = react.useRef(false);
-    const disabledRef = react.useRef(disabled);
+    const applyingRuntimeTextRef = require$$0.useRef(false);
+    const lastEmittedMarkdownRef = require$$0.useRef(null);
+    const restoredSendRef = require$$0.useRef(null);
+    const listRef = require$$0.useRef(null);
+    const pendingUploadsRef = require$$0.useRef(new pendingAttachmentUploads.PendingAttachmentUploads());
+    const submitInFlightRef = require$$0.useRef(false);
+    const interceptionPendingRef = require$$0.useRef(false);
+    const disabledRef = require$$0.useRef(disabled);
     disabledRef.current = disabled;
-    const setEditorEditable = react.useCallback((ed) => {
+    const setEditorEditable = require$$0.useCallback((ed) => {
       ed.setEditable(!disabledRef.current && !interceptionPendingRef.current, false);
       ed.view.dom.setAttribute("aria-busy", String(interceptionPendingRef.current));
       ed.view.dom.setAttribute("aria-readonly", String(!ed.isEditable));
     }, []);
-    const sendBlockedRef = react.useRef(sendBlocked);
+    const sendBlockedRef = require$$0.useRef(sendBlocked);
     sendBlockedRef.current = sendBlocked;
     const sessionLane = statewireSessionLane.useStatewireSessionLane();
-    const sessionLaneRef = react.useRef(sessionLane);
+    const sessionLaneRef = require$$0.useRef(sessionLane);
     sessionLaneRef.current = sessionLane;
-    const imagePreviewsRef = react.useRef([]);
-    const [imagePreviews, setImagePreviews] = react.useState([]);
-    const replaceImagePreviews = react.useCallback((next) => {
+    const imagePreviewsRef = require$$0.useRef([]);
+    const [imagePreviews, setImagePreviews] = require$$0.useState([]);
+    const replaceImagePreviews = require$$0.useCallback((next) => {
       imagePreviewsRef.current = next;
       setImagePreviews(next);
     }, []);
-    const removeImagePreviews = react.useCallback(
+    const removeImagePreviews = require$$0.useCallback(
       (shouldRemove) => {
         const kept = [];
         let removed = false;
@@ -244,11 +271,11 @@ const TiptapComposer = react.forwardRef(
       },
       [replaceImagePreviews]
     );
-    const clearImagePreviews = react.useCallback(() => {
+    const clearImagePreviews = require$$0.useCallback(() => {
       removeImagePreviews(() => true);
     }, [removeImagePreviews]);
-    react.useEffect(() => clearImagePreviews(), [clearImagePreviews, threadId]);
-    react.useEffect(
+    require$$0.useEffect(() => clearImagePreviews(), [clearImagePreviews, threadId]);
+    require$$0.useEffect(
       () => () => {
         for (const preview of imagePreviewsRef.current) {
           revokeImagePreview(preview.src);
@@ -257,11 +284,16 @@ const TiptapComposer = react.forwardRef(
       },
       []
     );
-    const { store } = useMentionSuggestions.useMentionSuggestions({ webpages, tools, rootCategories });
-    const [popupOpen, setPopupOpen] = react.useState(false);
-    const popupOpenRef = react.useRef(false);
-    const [popupProps, setPopupProps] = react.useState(null);
-    const callbacksRef = react.useRef({
+    const { store } = useMentionSuggestions.useMentionSuggestions({
+      webpages,
+      tools,
+      rootCategories,
+      athenaUnavailable: mentionSearchUnavailable
+    });
+    const [popupOpen, setPopupOpen] = require$$0.useState(false);
+    const popupOpenRef = require$$0.useRef(false);
+    const [popupProps, setPopupProps] = require$$0.useState(null);
+    const callbacksRef = require$$0.useRef({
       onStart: (props) => {
         setPopupOpen(true);
         popupOpenRef.current = true;
@@ -280,8 +312,8 @@ const TiptapComposer = react.forwardRef(
         setPopupProps(null);
       }
     });
-    const editorRef = react.useRef(null);
-    const handleSubmit = react.useCallback(async () => {
+    const editorRef = require$$0.useRef(null);
+    const handleSubmit = require$$0.useCallback(async () => {
       var _a, _b;
       if (disabled || sendBlockedRef.current) return;
       if (submitInFlightRef.current) return;
@@ -317,7 +349,7 @@ const TiptapComposer = react.forwardRef(
         if (waitingOutbox == null ? void 0 : waitingOutbox.shouldHold()) {
           if (cannotWait) {
             onAttachmentError == null ? void 0 : onAttachmentError(
-              waitingOutbox.getSnapshot().rows.length > 0 ? WAITING_EXTRAS_MESSAGE : OFFLINE_EXTRAS_MESSAGE
+              waitingOutbox.getSnapshot().rows.length > 0 ? offlineStatus.attachedMessageBehindWaiting({ withQuote: true }) : offlineStatus.attachedMessageNeedsConnection({ withQuote: true })
             );
             return;
           }
@@ -393,9 +425,9 @@ const TiptapComposer = react.forwardRef(
       threadId,
       waitForHostUploads
     ]);
-    const handleSubmitRef = react.useRef(handleSubmit);
+    const handleSubmitRef = require$$0.useRef(handleSubmit);
     handleSubmitRef.current = handleSubmit;
-    const addAttachment = react.useCallback(
+    const addAttachment = require$$0.useCallback(
       (file) => {
         let previewKey;
         if (showImagePreviews && file.type.startsWith("image/") && typeof URL.createObjectURL === "function") {
@@ -419,7 +451,7 @@ const TiptapComposer = react.forwardRef(
       },
       [aui, removeImagePreviews, replaceImagePreviews, showImagePreviews]
     );
-    const handlePaste = react.useCallback(
+    const handlePaste = require$$0.useCallback(
       (_view, event) => {
         const clipboardData = event.clipboardData;
         if (!clipboardData) return false;
@@ -455,7 +487,7 @@ const TiptapComposer = react.forwardRef(
       },
       [addAttachment, attachAnyFile, fileIntake, onAttachmentError]
     );
-    const addDroppedFiles = react.useCallback(
+    const addDroppedFiles = require$$0.useCallback(
       (files) => {
         const attachable = Array.from(files).filter(
           (file) => attachAnyFile || clipboard.isImageFile(file)
@@ -483,11 +515,11 @@ const TiptapComposer = react.forwardRef(
       },
       [addAttachment, attachAnyFile, fileIntake, onAttachmentError]
     );
-    const insertAssetMentionRef = react.useRef(
+    const insertAssetMentionRef = require$$0.useRef(
       () => {
       }
     );
-    const handleAssetDrop = react.useCallback(
+    const handleAssetDrop = require$$0.useCallback(
       (event, view) => {
         if (disabledRef.current || !event.dataTransfer) return false;
         const dropped = athenaAssetDrag.readAthenaAssetDrop(event.dataTransfer);
@@ -511,7 +543,7 @@ const TiptapComposer = react.forwardRef(
       },
       []
     );
-    const handleDrop = react.useCallback(
+    const handleDrop = require$$0.useCallback(
       (view, event) => {
         var _a;
         if (handleAssetDrop(event, view)) return true;
@@ -523,7 +555,7 @@ const TiptapComposer = react.forwardRef(
       },
       [addDroppedFiles, handleAssetDrop]
     );
-    const handleComposerDrop = react.useCallback(
+    const handleComposerDrop = require$$0.useCallback(
       (event) => {
         var _a;
         if (event.defaultPrevented) return;
@@ -532,9 +564,9 @@ const TiptapComposer = react.forwardRef(
       },
       [addDroppedFiles, handleAssetDrop]
     );
-    const placeholderRef = react.useRef(placeholder);
+    const placeholderRef = require$$0.useRef(placeholder);
     placeholderRef.current = placeholder;
-    const editor = react$2.useEditor({
+    const editor = react$1.useEditor({
       editable: !disabled,
       extensions: [
         ...chatTextSchema.createChatTextExtensions(),
@@ -579,14 +611,14 @@ const TiptapComposer = react.forwardRef(
       immediatelyRender: false
     });
     editorRef.current = editor;
-    react.useEffect(() => {
+    require$$0.useEffect(() => {
       if (editor && !editor.isDestroyed) setEditorEditable(editor);
     }, [disabled, editor, setEditorEditable]);
-    react.useEffect(() => {
+    require$$0.useEffect(() => {
       if (!editor || editor.isDestroyed) return;
       editor.view.dispatch(editor.state.tr.setMeta("addToHistory", false));
     }, [editor, placeholder]);
-    react.useEffect(() => {
+    require$$0.useEffect(() => {
       if (!editor) return;
       const value = composerInput.value;
       if (value === lastEmittedMarkdownRef.current) return;
@@ -618,7 +650,7 @@ const TiptapComposer = react.forwardRef(
         cancelled = true;
       };
     }, [composerInput.value, editor, handoff, onDraftStateChange, threadId]);
-    react.useEffect(() => {
+    require$$0.useEffect(() => {
       if (!editor || !handoff) return;
       handoff.focusEnd = () => {
         if (!editor.isDestroyed) editor.commands.focus("end");
@@ -631,7 +663,7 @@ const TiptapComposer = react.forwardRef(
         handoff.focusEnd = null;
       };
     }, [editor, handoff]);
-    const insertAssetMention = react.useCallback(
+    const insertAssetMention = require$$0.useCallback(
       (asset, sourceFile) => {
         const currentEditor = editorRef.current;
         if (!currentEditor) throw new Error("The chat composer is not ready.");
@@ -672,7 +704,7 @@ const TiptapComposer = react.forwardRef(
       [replaceImagePreviews, showImagePreviews]
     );
     insertAssetMentionRef.current = insertAssetMention;
-    const removeImagePreview = react.useCallback(
+    const removeImagePreview = require$$0.useCallback(
       (preview) => {
         if (!preview.assetId) return;
         const currentEditor = editorRef.current;
@@ -693,11 +725,11 @@ const TiptapComposer = react.forwardRef(
       },
       [removeImagePreviews]
     );
-    react.useEffect(
+    require$$0.useEffect(
       () => assetAttachment.registerChatAssetMentionHandler(threadId, insertAssetMention),
       [insertAssetMention, threadId]
     );
-    const openMentionMenu = react.useCallback(() => {
+    const openMentionMenu = require$$0.useCallback(() => {
       if (disabled) return;
       const currentEditor = editorRef.current;
       if (!currentEditor || currentEditor.isDestroyed) return;
@@ -710,15 +742,15 @@ const TiptapComposer = react.forwardRef(
       const needsSpace = before.length > 0 && !/[\s([{"']/.test(before);
       currentEditor.chain().focus().insertContent({ type: "text", text: needsSpace ? " @" : "@" }).run();
     }, [disabled]);
-    const appendText = react.useCallback((text) => {
+    const appendText = require$$0.useCallback((text) => {
       const currentEditor = editorRef.current;
       if (currentEditor) appendPlainText(currentEditor, text);
     }, []);
-    const captureSend = react.useCallback(() => {
+    const captureSend = require$$0.useCallback(() => {
       const currentEditor = editorRef.current;
       return currentEditor && !currentEditor.isDestroyed ? composerMessage.captureComposerSend(currentEditor) : null;
     }, []);
-    react.useImperativeHandle(
+    require$$0.useImperativeHandle(
       outerRef,
       () => ({
         submit: handleSubmit,
@@ -765,7 +797,7 @@ const TiptapComposer = react.forwardRef(
                 onRemove: removeImagePreview
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(react$2.EditorContent, { editor })
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.EditorContent, { editor })
           ]
         }
       ),
@@ -787,8 +819,7 @@ const TiptapComposer = react.forwardRef(
   }
 );
 TiptapComposer.displayName = "TiptapComposer";
-exports.OFFLINE_EXTRAS_MESSAGE = OFFLINE_EXTRAS_MESSAGE;
+exports.ImagePreviewStrip = ImagePreviewStrip;
 exports.TiptapComposer = TiptapComposer;
-exports.WAITING_EXTRAS_MESSAGE = WAITING_EXTRAS_MESSAGE;
 exports.serializeDraft = serializeDraft;
 //# sourceMappingURL=tiptap-composer.cjs.map