@arbidocs/blocks 0.4.106 → 0.4.108

package/dist/connect/index.cjs

@@ -3,10 +3,11 @@
 
 var chunk5YXG342J_cjs = require('../chunk-5YXG342J.cjs');
 var chunkXMBYDLZQ_cjs = require('../chunk-XMBYDLZQ.cjs');
-var chunk7LLLQUM7_cjs = require('../chunk-7LLLQUM7.cjs');
+var chunkZYSY4L5L_cjs = require('../chunk-ZYSY4L5L.cjs');
 var chunkMUMH3Z6K_cjs = require('../chunk-MUMH3Z6K.cjs');
 var chunkJH6JTI76_cjs = require('../chunk-JH6JTI76.cjs');
-require('../chunk-ZWWN4CUL.cjs');
+require('../chunk-S24XEVPS.cjs');
+require('../chunk-QT6EGMAJ.cjs');
 require('../chunk-5FYU7ZIU.cjs');
 var chunkO4YPVYPO_cjs = require('../chunk-O4YPVYPO.cjs');
 var chunkSKSE4OT6_cjs = require('../chunk-SKSE4OT6.cjs');
@@ -27,7 +28,7 @@ require('../chunk-B4SRYJLM.cjs');
 require('../chunk-7UTB4PHM.cjs');
 require('../chunk-PPCATBOY.cjs');
 var chunkKDG6FER6_cjs = require('../chunk-KDG6FER6.cjs');
-var chunk3R6XBYL7_cjs = require('../chunk-3R6XBYL7.cjs');
+var chunkDTBSGG36_cjs = require('../chunk-DTBSGG36.cjs');
 var chunkULWRNGGE_cjs = require('../chunk-ULWRNGGE.cjs');
 require('../chunk-IXALYQT7.cjs');
 require('../chunk-FX3K6LNZ.cjs');
@@ -43,6 +44,7 @@ var lucideReact = require('lucide-react');
 var documentTools = require('@arbidocs/react/document-tools');
 var shell = require('@arbidocs/react/shell');
 var client = require('@arbidocs/client');
+var reactDom = require('react-dom');
 
 function ConnectionBoundWebSocket({ children }) {
   const { status } = chunkMUMH3Z6K_cjs.useConnection();
@@ -664,7 +666,7 @@ function WorkflowWordDialog({
       title: title ?? labels.wordTitle,
       size: "xl",
       testId: "workflow-word-dialog",
-      children: /* @__PURE__ */ jsxRuntime.jsx(chunkULWRNGGE_cjs.ModalScaffold.Body, { className: "h-[70dvh] p-0", children: /* @__PURE__ */ jsxRuntime.jsx(chunk7LLLQUM7_cjs.ConnectedNativeDocxEditor, { documentId: id, title: title ?? labels.wordTitle }) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(chunkULWRNGGE_cjs.ModalScaffold.Body, { className: "h-[70dvh] p-0", children: /* @__PURE__ */ jsxRuntime.jsx(chunkZYSY4L5L_cjs.ConnectedNativeDocxEditor, { documentId: id, title: title ?? labels.wordTitle }) })
     }
   );
 }
@@ -2063,11 +2065,96 @@ function ConnectedMailAccounts({
     }
   );
 }
+var sessionRooms = /* @__PURE__ */ new Map();
+function useWordBody({
+  word,
+  client,
+  initial,
+  sessionKey,
+  roomId: givenRoomId,
+  onBodyChange
+}) {
+  const [documentKey] = react.useState(
+    () => `mail-${sessionKey ?? initial.draft_id ?? crypto.randomUUID()}`
+  );
+  const roomRef = react.useRef(sessionRooms.get(documentKey) ?? givenRoomId);
+  const [roomId, setRoomId] = react.useState(roomRef.current);
+  const [project, setProject] = react.useState();
+  const stateRef = react.useRef(null);
+  const changed = react.useRef(onBodyChange);
+  react.useEffect(() => {
+    changed.current = onBodyChange;
+  });
+  const opening = react.useRef(null);
+  const adapter = react.useMemo(
+    () => ({
+      ...word.adapter,
+      open: async () => {
+        if (!roomRef.current && opening.current) return opening.current;
+        const request = client.openDraftEditor(
+          roomRef.current ? { roomId: roomRef.current } : { draftId: initial.draft_id ?? void 0, text: initial.text, html: initial.html }
+        );
+        if (!roomRef.current) opening.current = request;
+        try {
+          const session = await request;
+          roomRef.current = session.room_id;
+          sessionRooms.set(documentKey, session.room_id);
+          setRoomId(session.room_id);
+          setProject(session.project ?? null);
+          return session;
+        } finally {
+          opening.current = null;
+        }
+      },
+      save: async () => {
+        throw new Error("Save the draft from the composer");
+      },
+      onDirtyChange: (dirty) => {
+        if (dirty) changed.current();
+      }
+    }),
+    // The editor keeps its adapter for the session; the seed matters only when it first opens.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [word.adapter, client, documentKey]
+  );
+  react.useEffect(() => {
+    if (!roomId) return;
+    return word.onRoomOpened?.(roomId) || void 0;
+  }, [roomId, word]);
+  const editor = react$1.useMailDraftEditor();
+  const state = () => stateRef.current?.() ?? null;
+  return {
+    adapter,
+    documentKey,
+    stateRef,
+    ready: !!roomId,
+    save: (compose) => editor.save(roomRef.current, compose, state()),
+    send: async (compose) => {
+      const result = await editor.send(roomRef.current, compose, state());
+      sessionRooms.delete(documentKey);
+      return result;
+    },
+    body: (final) => editor.body(roomRef.current, final, state()),
+    project,
+    chooseProject: async (projectExtId) => {
+      setProject(await editor.setProject(roomRef.current, projectExtId));
+    }
+  };
+}
 var MailBodyEditor = react.lazy(
   () => import('../MailBodyEditor-D7MGJMLH.cjs').catch(() => ({
-    default: chunk3R6XBYL7_cjs.PlainMailBodyEditor
+    default: chunkDTBSGG36_cjs.PlainMailBodyEditor
   }))
 );
+var NativeDocxEditor = react.lazy(
+  () => import('../NativeDocxEditor-YX7B7OFH.cjs').then((m) => ({ default: m.NativeDocxEditor }))
+);
+var NO_WORD = {
+  adapter: {
+    request: () => Promise.reject(new Error("No Word editor")),
+    loadFonts: () => Promise.reject(new Error("No Word editor"))
+  }
+};
 function MailComposerForm({
   account,
   initial,
@@ -2076,13 +2163,18 @@ function MailComposerForm({
   drafts,
   onClose,
   onOpenDraft,
+  onReload,
   onChange,
   embedded = false,
   closeRequestRef,
   localDraftId: initialLocalDraftId,
   offline,
   documents,
-  notify: notify3
+  notify: notify3,
+  word,
+  sessionKey,
+  roomId,
+  headerSlot
 }) {
   const { client } = react$1.useMailClient();
   const [to, setTo] = react.useState(initial.to.map((r) => r.email).join("; "));
@@ -2099,7 +2191,26 @@ function MailComposerForm({
   const [dirty, setDirty] = react.useState(false);
   const [attaching, setAttaching] = react.useState(false);
   const [saved, setSaved] = react.useState(false);
+  const [replacedBy, setReplacedBy] = react.useState();
   const isOnline = react$1.useMailOnline();
+  const [usesWord] = react.useState(
+    () => !!word && !!client.openDraftEditor && account?.provider === "native" && isOnline && !initialLocalDraftId
+  );
+  const [bodyChanged, setBodyChanged] = react.useState(false);
+  const [wordPending, setWordPending] = react.useState(false);
+  const projects = react$1.useMailProjects({ enabled: usesWord });
+  const wordBody = useWordBody({
+    word: word ?? NO_WORD,
+    client,
+    initial,
+    sessionKey,
+    roomId,
+    onBodyChange: () => {
+      setBodyChanged(true);
+      setSaved(false);
+      setDirty(true);
+    }
+  });
   const [localDraftId, setLocalDraftId] = react.useState(initialLocalDraftId);
   const [savedLocally, setSavedLocally] = react.useState(false);
   const [secure, setSecure] = react.useState(initial.secure_delivery ?? false);
@@ -2113,9 +2224,9 @@ function MailComposerForm({
   }, [drafts, draftId, subject]);
   const body = () => ({
     ...initial,
-    to: chunk3R6XBYL7_cjs.parseMailRecipients(to),
-    cc: chunk3R6XBYL7_cjs.parseMailRecipients(cc),
-    bcc: chunk3R6XBYL7_cjs.parseMailRecipients(bcc),
+    to: chunkDTBSGG36_cjs.parseMailRecipients(to),
+    cc: chunkDTBSGG36_cjs.parseMailRecipients(cc),
+    bcc: chunkDTBSGG36_cjs.parseMailRecipients(bcc),
     subject,
     text,
     html,
@@ -2143,27 +2254,46 @@ function MailComposerForm({
   const send = react$1.useSendMail(
     offline && { keep: queueInOutbox, isNetworkFailure: offline.isNetworkFailure }
   );
-  const saveDraft = () => save.mutate(
-    { accountId: account.id, compose: body() },
-    {
-      onSuccess: (result) => {
-        setSaved(true);
-        setDirty(false);
-        if ("onDevice" in result) {
-          setSavedLocally(true);
-          return;
-        }
-        setSavedLocally(false);
-        setDraftId(result.id);
-        if (localDraftId) {
-          void offline?.deleteDraft(localDraftId);
-          setLocalDraftId(void 0);
-        }
-      },
-      onError: (err) => setError(err.message)
+  const onSaved = (result) => {
+    setSaved(true);
+    setDirty(false);
+    if ("onDevice" in result) {
+      setSavedLocally(true);
+      return;
     }
-  );
-  const sendMessage = () => {
+    setSavedLocally(false);
+    setDraftId(result.id);
+    setReplacedBy(void 0);
+    if (localDraftId) {
+      void offline?.deleteDraft(localDraftId);
+      setLocalDraftId(void 0);
+    }
+  };
+  const saveDraft = () => {
+    if (usesWord) {
+      if (!wordBody.ready) return setError("The editor is still opening");
+      setWordPending(true);
+      void wordBody.save(body()).then(
+        (result) => {
+          onSaved(result);
+          setBodyChanged(false);
+        },
+        (err) => setError(err.message)
+      ).finally(() => setWordPending(false));
+      return;
+    }
+    save.mutate(
+      { accountId: account.id, compose: body() },
+      { onSuccess: onSaved, onError: (err) => setError(err.message) }
+    );
+  };
+  react$1.useMailDraftReplaced(draftId, (newId) => {
+    if (save.isPending || wordPending) return;
+    setDraftId(newId);
+    if (!dirty && onReload) onReload(newId);
+    else setReplacedBy(newId);
+  });
+  const sendMessage = async () => {
     let value = attemptedPayload.current;
     if (value === null) {
       value = body();
@@ -2172,18 +2302,41 @@ function MailComposerForm({
       if (problem) return setError(problem);
       if (!(offline && !isOnline)) attemptedPayload.current = value;
     }
+    if (usesWord) {
+      if (!wordBody.ready) return setError("The editor is still opening");
+      const refused = (err) => {
+        setError(err.message);
+        if (err.status === 409) attemptedPayload.current = null;
+      };
+      setWordPending(true);
+      try {
+        if (!secure) {
+          await wordBody.send({ ...value, request_id: requestId.current });
+          notify3("Email queued for delivery", "success");
+          onClose();
+          return;
+        }
+        value = { ...value, ...await wordBody.body(true) };
+        attemptedPayload.current = value;
+      } catch (err) {
+        return refused(err);
+      } finally {
+        setWordPending(false);
+      }
+    }
     const sending = account;
+    const message = value;
     send.mutate(
       {
         accountId: account.id,
-        compose: value,
+        compose: message,
         requestId: requestId.current,
         // Secure delivery prepares its encrypted payload once.
         secure: secure ? async () => {
           if (sending?.provider !== "native" || !client.prepareSecureMail)
             throw new Error("Choose your native inbox to send securely");
           securePayload.current ??= await client.prepareSecureMail(
-            value,
+            message,
             sending,
             requestId.current
           );
@@ -2207,7 +2360,7 @@ function MailComposerForm({
       }
     );
   };
-  const busy = attaching || save.isPending || send.isPending;
+  const busy = attaching || save.isPending || send.isPending || wordPending;
   const locked = busy || attemptedPayload.current !== null;
   const addFiles = async (files) => {
     if (!files) return;
@@ -2246,7 +2399,7 @@ function MailComposerForm({
   };
   const close = () => {
     if (busy) return;
-    if (!saved && (dirty || !draftId) && (text || subject || to || cc || bcc || attachments.length) && !window.confirm("Close this message without saving your latest changes?"))
+    if (!saved && (dirty || !draftId) && (text || subject || to || cc || bcc || attachments.length || bodyChanged) && !window.confirm("Close this message without saving your latest changes?"))
       return;
     onClose();
   };
@@ -2256,6 +2409,30 @@ function MailComposerForm({
   react.useEffect(() => {
     onChange?.(body());
   }, [to, cc, bcc, subject, text, html, attachments, draftId, secure]);
+  const billTo = wordBody.project && /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: "flex items-center gap-1 text-xs text-muted-foreground",
+      title: "ARBI's work on this email is billed to this project",
+      children: [
+        "Billed to",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            "aria-label": "Bill to",
+            className: "max-w-[12rem] truncate rounded bg-transparent py-0.5 text-foreground hover:bg-muted/60 focus:bg-muted/60 focus:outline-none",
+            value: wordBody.project.external_id,
+            disabled: busy,
+            onChange: (e) => {
+              const chosen = projects.data?.find((p) => p.external_id === e.target.value);
+              void wordBody.chooseProject(chosen && !chosen.personal ? chosen.external_id : null).catch((err) => setError(err.message));
+            },
+            children: (projects.data ?? [wordBody.project]).map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.external_id, children: p.personal ? `${p.name} (personal)` : p.name }, p.external_id))
+          }
+        )
+      ]
+    }
+  );
   const form = /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
@@ -2271,7 +2448,7 @@ function MailComposerForm({
       onSubmit: (e) => {
         e.preventDefault();
         setError("");
-        sendMessage();
+        void sendMessage();
       },
       className: embedded ? "flex h-full min-h-0 w-full flex-col bg-background" : "flex max-h-[95dvh] w-full max-w-3xl flex-col rounded-xl border bg-background shadow-2xl",
       children: [
@@ -2289,7 +2466,7 @@ function MailComposerForm({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-auto px-5 py-3", children: [
           sameSubjectDraft && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -2310,10 +2487,36 @@ function MailComposerForm({
               ]
             }
           ),
+          replacedBy && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "status",
+              className: "mb-3 flex items-center justify-between gap-3 rounded-md bg-muted/40 px-3 py-2 text-xs text-muted-foreground",
+              children: [
+                "This draft was changed elsewhere (by ARBI or in another tab). Saving keeps your version.",
+                onReload && /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    className: "h-7 shrink-0 text-xs",
+                    disabled: busy,
+                    onClick: () => {
+                      if (window.confirm("Discard your unsaved changes and load the changed draft?"))
+                        onReload(replacedBy);
+                    },
+                    children: "Load changes"
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-2 flex items-center gap-3 border-b border-border/60 pb-3 text-xs text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-14 shrink-0", children: "From" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-muted/50 px-2 py-1 text-foreground", children: account?.email ?? "Connect a mailbox to send" })
           ] }),
+          usesWord && wordBody.project && !headerSlot && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2", children: billTo }),
+          usesWord && wordBody.project && headerSlot && reactDom.createPortal(billTo, headerSlot),
           [
             ["To", to, setTo],
             ["Cc", cc, setCc],
@@ -2386,7 +2589,24 @@ function MailComposerForm({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-4 text-sm text-muted-foreground", children: "Loading editor\u2026" }), children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "py-4 text-sm text-muted-foreground", children: "Loading editor\u2026" }), children: usesWord ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "-mx-5 -mb-3 flex min-h-[22rem] flex-1 flex-col border-t border-border/60",
+              "data-testid": "mail-word-body",
+              onSubmit: (event) => event.stopPropagation(),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                NativeDocxEditor,
+                {
+                  compact: true,
+                  adapter: wordBody.adapter,
+                  documentId: wordBody.documentKey,
+                  title: "Email",
+                  stateRef: wordBody.stateRef
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
             MailBodyEditor,
             {
               text,
@@ -2454,7 +2674,7 @@ function MailComposerForm({
             }
           ),
           documents && /* @__PURE__ */ jsxRuntime.jsx(
-            chunk3R6XBYL7_cjs.MailDocumentPicker,
+            chunkDTBSGG36_cjs.MailDocumentPicker,
             {
               documents: documents.documents,
               disabled: locked,
@@ -2553,6 +2773,7 @@ function ConnectedMailComposer({
   drafts: draftsProp,
   notify: notify3 = defaultMailNotify,
   offline,
+  replyTo,
   ...rest
 }) {
   const { client } = react$1.useMailClient();
@@ -2567,12 +2788,14 @@ function ConnectedMailComposer({
   const draftsList = react$1.useMailMessages(account, draftsFolderId, "", null, {
     enabled: !draftsProp && ready
   });
+  const [reloaded, setReloaded] = react.useState();
+  const openId = reloaded ?? draftId;
   const draft = react$1.useMailDraftCompose(
     account,
-    draftId,
+    openId,
     async (from, id) => {
       const message = await client.getMessage(from, id);
-      return chunk3R6XBYL7_cjs.draftMailCompose(
+      return chunkDTBSGG36_cjs.draftMailCompose(
         message,
         await hydrateMailAttachments(client, from, message.id, message.attachments, {
           isOnline,
@@ -2580,14 +2803,20 @@ function ConnectedMailComposer({
         })
       );
     },
-    { enabled: !initial && ready }
-  );
-  const start = react.useMemo(
-    () => initial ?? (draftId ? draft.data : chunk3R6XBYL7_cjs.emptyMailCompose()),
-    [initial, draftId, draft.data]
+    { enabled: (!initial || !!reloaded) && ready }
   );
+  const original = react$1.useMailMessage(account, replyTo, { enabled: !!replyTo && ready });
+  const start = react.useMemo(() => {
+    if (replyTo)
+      return original.data && account ? {
+        ...chunkDTBSGG36_cjs.replyMailCompose(original.data, { account, folderRole: "inbox" }),
+        text: "",
+        html: ""
+      } : void 0;
+    return reloaded ? draft.data : initial ?? (openId ? draft.data : chunkDTBSGG36_cjs.emptyMailCompose());
+  }, [replyTo, original.data, account, reloaded, initial, openId, draft.data]);
   if (!start)
-    return draft.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "p-4 text-sm text-destructive", children: draft.error.message }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "Loading draft\u2026" });
+    return draft.error ?? original.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "p-4 text-sm text-destructive", children: (draft.error ?? original.error)?.message }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "Loading draft\u2026" });
   return /* @__PURE__ */ jsxRuntime.jsx(
     MailComposerForm,
     {
@@ -2598,9 +2827,10 @@ function ConnectedMailComposer({
       drafts: draftsProp ?? draftsList.data?.messages ?? [],
       notify: notify3,
       offline,
+      onReload: setReloaded,
       ...rest
     },
-    `${account?.id}-${draftId ?? ""}`
+    `${account?.id}-${openId ?? ""}`
   );
 }
 function ConnectedMailSetup({
@@ -2780,6 +3010,8 @@ function ConnectedMailbox({
   offline,
   documents,
   saveToWorkspace,
+  word,
+  onReplyWithArbi,
   renderInvite,
   renderPanel = SidePanel,
   onViewerOpenChange,
@@ -2809,6 +3041,7 @@ function ConnectedMailbox({
   const [compose, setCompose] = react.useState(null);
   const [composeLocalDraftId, setComposeLocalDraftId] = react.useState();
   const [composeSession, setComposeSession] = react.useState(0);
+  const [mailboxKey] = react.useState(() => crypto.randomUUID());
   const openCompose = (value, localDraftId) => {
     setComposeSession((n) => n + 1);
     setComposeLocalDraftId(localDraftId);
@@ -2887,7 +3120,7 @@ function ConnectedMailbox({
   const message = detail.data;
   react.useEffect(() => {
     if (!composeAttachments?.length) return;
-    openCompose({ ...chunk3R6XBYL7_cjs.emptyMailCompose(), attachments: composeAttachments });
+    openCompose({ ...chunkDTBSGG36_cjs.emptyMailCompose(), attachments: composeAttachments });
     onComposeOpened?.();
   }, [composeAttachments]);
   react.useEffect(() => {
@@ -2987,7 +3220,7 @@ function ConnectedMailbox({
   const editDraft = async () => {
     if (!message) return;
     try {
-      openCompose(chunk3R6XBYL7_cjs.draftMailCompose(message, await hydrate(message.attachments)));
+      openCompose(chunkDTBSGG36_cjs.draftMailCompose(message, await hydrate(message.attachments)));
     } catch (e) {
       setActionError(e instanceof Error ? e.message : "Could not load draft attachments");
     }
@@ -2996,7 +3229,7 @@ function ConnectedMailbox({
     if (!message || !account) return;
     try {
       const attachments = forward ? await hydrate(message.attachments) : [];
-      openCompose(chunk3R6XBYL7_cjs.replyMailCompose(message, { account, folderRole, forward, all, attachments }));
+      openCompose(chunkDTBSGG36_cjs.replyMailCompose(message, { account, folderRole, forward, all, attachments }));
     } catch (e) {
       setActionError(e instanceof Error ? e.message : "Could not prepare forwarded attachments");
     }
@@ -3105,7 +3338,7 @@ function ConnectedMailbox({
               {
                 size: "sm",
                 disabled: !ready || !!compose,
-                onClick: () => openCompose(chunk3R6XBYL7_cjs.emptyMailCompose()),
+                onClick: () => openCompose(chunkDTBSGG36_cjs.emptyMailCompose()),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "mr-1.5 size-4" }),
                   "Email"
@@ -3184,7 +3417,7 @@ function ConnectedMailbox({
           onEdit: (value) => openCompose({ ...value })
         }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: deviceFolder ? "hidden" : "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-          chunk3R6XBYL7_cjs.MailGrid,
+          chunkDTBSGG36_cjs.MailGrid,
           {
             messages: filteredMessages,
             loading: list.isPending && list.fetchStatus !== "idle",
@@ -3231,6 +3464,8 @@ function ConnectedMailbox({
             offline,
             documents,
             notify: notify3,
+            word,
+            sessionKey: `${mailboxKey}-${composeSession}`,
             onChange: setCompose,
             closeRequestRef: composeClose,
             onClose: () => {
@@ -3246,7 +3481,7 @@ function ConnectedMailbox({
           },
           `${account?.id}-${composeSession}`
         ) : message && selected ? /* @__PURE__ */ jsxRuntime.jsx(
-          chunk3R6XBYL7_cjs.MailMessageView,
+          chunkDTBSGG36_cjs.MailMessageView,
           {
             account,
             message,
@@ -3265,6 +3500,7 @@ function ConnectedMailbox({
             onBack: () => setSelected(null),
             onEditDraft: () => void editDraft(),
             onReply: (forward, all) => void reply(forward, all),
+            onReplyWithArbi: onReplyWithArbi && account.provider === "native" ? () => onReplyWithArbi(message, account) : void 0,
             onUpdate: (body) => void update(body),
             onDownloadAttachment: (a) => void downloadAttachment(a),
             onDownloadOriginal: () => void download(
@@ -3320,6 +3556,85 @@ function ConnectedMailbox({
     )
   ] });
 }
+function ConnectedMailMessage({
+  messageId,
+  mailbox = "native",
+  folderRole = "inbox",
+  onClose,
+  onCompose,
+  onReplyWithArbi
+}) {
+  const { client } = react$1.useMailClient();
+  const isOnline = react$1.useMailOnline();
+  const cache = react$1.useMailCache();
+  const accounts = react$1.useMailAccounts();
+  const account = resolveMailbox(accounts.data, mailbox);
+  const unlock = react$1.useMailUnlock(account);
+  const detail = react$1.useMailMessage(account, messageId, { enabled: !!unlock.data || !isOnline });
+  const [error, setError] = react.useState("");
+  const message = detail.data;
+  if (!account || !message)
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { role: detail.error ? "alert" : "status", className: "p-4 text-sm text-muted-foreground", children: detail.error?.message ?? "Loading message\u2026" });
+  const update = async (body) => {
+    try {
+      await react$1.mailJson(
+        client.fetch,
+        `${react$1.accountPath(account.id)}/messages/${encodeURIComponent(message.id)}`,
+        {
+          method: "PATCH",
+          body: JSON.stringify(body)
+        }
+      );
+      await cache.refreshAll();
+      if (body.folder_id || body.action) onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not update message");
+    }
+  };
+  const download = async (path, name) => {
+    try {
+      saveFile(await (await client.fetch(path)).blob(), name);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Download failed");
+    }
+  };
+  const reply = async (forward = false, all = false) => {
+    try {
+      const attachments = forward ? await hydrateMailAttachments(client, account, message.id, message.attachments, {
+        isOnline
+      }) : [];
+      onCompose(chunkDTBSGG36_cjs.replyMailCompose(message, { account, folderRole, forward, all, attachments }));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not prepare forwarded attachments");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "px-4 pt-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkDTBSGG36_cjs.MailMessageView,
+      {
+        account,
+        message,
+        folderRole,
+        folders: void 0,
+        isOnline,
+        loading: detail.isFetching,
+        onBack: onClose,
+        onEditDraft: () => void hydrateMailAttachments(client, account, message.id, message.attachments, {
+          isOnline
+        }).then((attachments) => onCompose(chunkDTBSGG36_cjs.draftMailCompose(message, attachments))).catch((e) => setError(e.message)),
+        onReply: (forward, all) => void reply(forward, all),
+        onReplyWithArbi: onReplyWithArbi && account.provider === "native" ? () => onReplyWithArbi(message, account) : void 0,
+        onUpdate: (body) => void update(body),
+        onDownloadAttachment: (a) => void download(attachmentPath(account.id, message.id, a.id), a.name),
+        onDownloadOriginal: () => void download(
+          `${react$1.accountPath(account.id)}/messages/${message.id}/original`,
+          "original.eml"
+        )
+      }
+    )
+  ] });
+}
 function ActiveChat({ agentId, workspaceId }) {
   const chat = react$1.useArbiChat({ agentId, workspaceId });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3438,6 +3753,7 @@ exports.ConnectedIdentityVerification = ConnectedIdentityVerification;
 exports.ConnectedLogoutDialog = ConnectedLogoutDialog;
 exports.ConnectedMailAccounts = ConnectedMailAccounts;
 exports.ConnectedMailComposer = ConnectedMailComposer;
+exports.ConnectedMailMessage = ConnectedMailMessage;
 exports.ConnectedMailSetup = ConnectedMailSetup;
 exports.ConnectedMailbox = ConnectedMailbox;
 exports.ConnectedNotificationPreferences = ConnectedNotificationPreferences;