@arbidocs/blocks 0.4.106 → 0.4.108

package/dist/connect/index.js

@@ -2,11 +2,12 @@
 import { SettingsSection, ProfileCard, AvatarPicker, IdentityVerificationCard, IdentityVerificationDialog, RequireVerified, SettingsCard, SettingsActionRow, PasswordChangeDialog, EMAIL_NOTIFICATION_KEYS, EMAIL_NOTIFICATION_CATEGORIES, NotificationCategoryList, toNotificationCategories, toActiveSessionViews, SettingsRow, ActiveSessionsDialog, LogoutDialog, toLogoutSessionViews, SettingsDangerZone, DeleteAccountDialog, toDeleteBlockerViews } from '../chunk-W7NZRZ54.js';
 import { useWorkspaceDocs } from '../chunk-XQDM6T6C.js';
 export { ConnectedAssistantDock, redlineStats, textToArtifact, toRedlineMarkdown, useConnectedAiTask, useConnectedChat, useSemanticSearch, useWorkspaceDocs } from '../chunk-XQDM6T6C.js';
-import { ConnectedNativeDocxEditor } from '../chunk-4GFB5U3K.js';
+import { ConnectedNativeDocxEditor } from '../chunk-EGDWNEAG.js';
 import { ConnectionProvider, useConnection } from '../chunk-OYMWV45N.js';
 export { ConnectionProvider, SESSION_EXPIRED_MESSAGE, isAuthenticated, useConnection } from '../chunk-OYMWV45N.js';
 import { SignDocumentDialog } from '../chunk-2YOVK524.js';
-import '../chunk-W2RTZOK3.js';
+import '../chunk-GYAUJ4KT.js';
+import '../chunk-A2MN2ZLX.js';
 import '../chunk-HFZ45FD3.js';
 import { FilesFilterBar, FolderFilterButton, FolderPickerRow } from '../chunk-7RJTEWYM.js';
 import { WorkspaceActivityList, WorkspaceNotificationMenu, ThreadFollowMenuItem, ThreadFollowButton, TagTable, tagTableDocx } from '../chunk-S55VDTX3.js';
@@ -27,7 +28,7 @@ import '../chunk-HOXKR26S.js';
 import '../chunk-AA3PT6KR.js';
 import '../chunk-NPLYHR2E.js';
 import { initials } from '../chunk-OXF2IFXG.js';
-import { PlainMailBodyEditor, draftMailCompose, emptyMailCompose, MailGrid, MailMessageView, replyMailCompose, MailDocumentPicker, parseMailRecipients } from '../chunk-LGX6UFYG.js';
+import { PlainMailBodyEditor, draftMailCompose, replyMailCompose, emptyMailCompose, MailGrid, MailMessageView, MailDocumentPicker, parseMailRecipients } from '../chunk-P2KPDPFF.js';
 import { ModalScaffold } from '../chunk-TX2ZICS7.js';
 import '../chunk-ZPLG7QYF.js';
 import '../chunk-SLSBJRWW.js';
@@ -35,7 +36,7 @@ import '../chunk-7F6CBP3Z.js';
 import '../chunk-VUNV25KB.js';
 import { lazy, useState, useMemo, Suspense, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 import { QueryClient, QueryClientProvider, useQueryClient, useQuery } from '@tanstack/react-query';
-import { ArbiProvider, useConversations, useRunConversation, useWorkspaceActivity, useWorkspaceUsers, useWorkspaceNotificationLevel, useFollowThread, useUploadSkillFiles, ArtifactCanvas, useArbiChat, useArbi, useDocuments, useTagKindSchema, useTags, useSetTagValues, useUpdateTagKindSchema, useInvalidateTagData, useWorkspaces, useShellWorkspaces, useProfile, useUpdateProfile, useRequestEmailChange, useConfirmEmailChange, useNameEditor, useAvatarCrop, useEmailChange, ImageCropModal, useIdentityVerification, usePasswordChange, usePasswordChangeForm, useNotificationPreferences, useSessions, useCurrentSessionId, useTerminateSession, useLogoutAllSessions, useDeleteAccount, useDeleteAccountFlow, useArbiWebSocket, notify, useWorkNotifications, mailDraftIdFromContent, useMailClient, defaultMailAlias, useClaimNativeAlias, useMailOnline, useConnectMailAccount, useDisconnectMailAccount, useMailPolicy, useMailAccounts, useMailUnlock, useMailFolders, useMailMessages, useMailDraftCompose, useMailCache, useMailMessage, MailOfflineUnavailableError, accountPath, useAgentSession, useStartAgentSession, useCloseAgentSession, isAliasTakenError, nextAliasSuggestion, aliasTakenMessage, mailJson, ArbiWebSocketProvider, useCreateWork, useActOnStep, useConversationActivity, useConversationThreads, fileAttachment, useSaveMailDraft, useSendMail, AiAnswer } from '@arbidocs/react';
+import { ArbiProvider, useConversations, useRunConversation, useWorkspaceActivity, useWorkspaceUsers, useWorkspaceNotificationLevel, useFollowThread, useUploadSkillFiles, ArtifactCanvas, useArbiChat, useArbi, useDocuments, useTagKindSchema, useTags, useSetTagValues, useUpdateTagKindSchema, useInvalidateTagData, useWorkspaces, useShellWorkspaces, useProfile, useUpdateProfile, useRequestEmailChange, useConfirmEmailChange, useNameEditor, useAvatarCrop, useEmailChange, ImageCropModal, useIdentityVerification, usePasswordChange, usePasswordChangeForm, useNotificationPreferences, useSessions, useCurrentSessionId, useTerminateSession, useLogoutAllSessions, useDeleteAccount, useDeleteAccountFlow, useArbiWebSocket, notify, useWorkNotifications, mailDraftIdFromContent, useMailClient, defaultMailAlias, useClaimNativeAlias, useMailOnline, useConnectMailAccount, useDisconnectMailAccount, useMailPolicy, useMailAccounts, useMailUnlock, useMailFolders, useMailMessages, useMailDraftCompose, useMailMessage, useMailCache, MailOfflineUnavailableError, accountPath, useAgentSession, useStartAgentSession, useCloseAgentSession, isAliasTakenError, nextAliasSuggestion, aliasTakenMessage, mailJson, ArbiWebSocketProvider, useCreateWork, useActOnStep, useConversationActivity, useConversationThreads, fileAttachment, useMailProjects, useSaveMailDraft, useSendMail, useMailDraftReplaced, AiAnswer, useMailDraftEditor } from '@arbidocs/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button, Label, Input, Dialog, DialogContent, DialogTitle, DialogDescription, Tooltip, TooltipTrigger, TooltipContent, cn } from '@arbidocs/react/ui';
 import { useStreamedArtifact } from '@arbidocs/react/artifacts';
@@ -43,6 +44,7 @@ import { ExternalLink, UserCircle, KeyRound, Radio, Mail, Settings, Plus, ArrowL
 import { useOptionalDocumentTools, fetchDocumentPdf, DocumentToolsProvider } from '@arbidocs/react/document-tools';
 import { useNotify } from '@arbidocs/react/shell';
 import { bytesToBase64 } from '@arbidocs/client';
+import { createPortal } from 'react-dom';
 
 function ConnectionBoundWebSocket({ children }) {
   const { status } = useConnection();
@@ -2063,11 +2065,96 @@ function ConnectedMailAccounts({
     }
   );
 }
+var sessionRooms = /* @__PURE__ */ new Map();
+function useWordBody({
+  word,
+  client,
+  initial,
+  sessionKey,
+  roomId: givenRoomId,
+  onBodyChange
+}) {
+  const [documentKey] = useState(
+    () => `mail-${sessionKey ?? initial.draft_id ?? crypto.randomUUID()}`
+  );
+  const roomRef = useRef(sessionRooms.get(documentKey) ?? givenRoomId);
+  const [roomId, setRoomId] = useState(roomRef.current);
+  const [project, setProject] = useState();
+  const stateRef = useRef(null);
+  const changed = useRef(onBodyChange);
+  useEffect(() => {
+    changed.current = onBodyChange;
+  });
+  const opening = useRef(null);
+  const adapter = 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]
+  );
+  useEffect(() => {
+    if (!roomId) return;
+    return word.onRoomOpened?.(roomId) || void 0;
+  }, [roomId, word]);
+  const editor = 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 = lazy(
   () => import('../MailBodyEditor-5PIQLYVY.js').catch(() => ({
     default: PlainMailBodyEditor
   }))
 );
+var NativeDocxEditor = lazy(
+  () => import('../NativeDocxEditor-UAZUKZ77.js').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 } = useMailClient();
   const [to, setTo] = useState(initial.to.map((r) => r.email).join("; "));
@@ -2099,7 +2191,26 @@ function MailComposerForm({
   const [dirty, setDirty] = useState(false);
   const [attaching, setAttaching] = useState(false);
   const [saved, setSaved] = useState(false);
+  const [replacedBy, setReplacedBy] = useState();
   const isOnline = useMailOnline();
+  const [usesWord] = useState(
+    () => !!word && !!client.openDraftEditor && account?.provider === "native" && isOnline && !initialLocalDraftId
+  );
+  const [bodyChanged, setBodyChanged] = useState(false);
+  const [wordPending, setWordPending] = useState(false);
+  const projects = useMailProjects({ enabled: usesWord });
+  const wordBody = useWordBody({
+    word: word ?? NO_WORD,
+    client,
+    initial,
+    sessionKey,
+    roomId,
+    onBodyChange: () => {
+      setBodyChanged(true);
+      setSaved(false);
+      setDirty(true);
+    }
+  });
   const [localDraftId, setLocalDraftId] = useState(initialLocalDraftId);
   const [savedLocally, setSavedLocally] = useState(false);
   const [secure, setSecure] = useState(initial.secure_delivery ?? false);
@@ -2143,27 +2254,46 @@ function MailComposerForm({
   const send = 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) }
+    );
+  };
+  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({
   useEffect(() => {
     onChange?.(body());
   }, [to, cc, bcc, subject, text, html, attachments, draftId, secure]);
+  const billTo = wordBody.project && /* @__PURE__ */ 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__ */ 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__ */ jsx("option", { value: p.external_id, children: p.personal ? `${p.name} (personal)` : p.name }, p.external_id))
+          }
+        )
+      ]
+    }
+  );
   const form = /* @__PURE__ */ 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__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-auto px-5 py-3", children: [
           sameSubjectDraft && /* @__PURE__ */ jsxs(
             "div",
             {
@@ -2310,10 +2487,36 @@ function MailComposerForm({
               ]
             }
           ),
+          replacedBy && /* @__PURE__ */ 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__ */ jsx(
+                  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__ */ jsxs("p", { className: "mb-2 flex items-center gap-3 border-b border-border/60 pb-3 text-xs text-muted-foreground", children: [
             /* @__PURE__ */ jsx("span", { className: "w-14 shrink-0", children: "From" }),
             /* @__PURE__ */ 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__ */ jsx("p", { className: "mb-2", children: billTo }),
+          usesWord && wordBody.project && headerSlot && createPortal(billTo, headerSlot),
           [
             ["To", to, setTo],
             ["Cc", cc, setCc],
@@ -2386,7 +2589,24 @@ function MailComposerForm({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("p", { className: "py-4 text-sm text-muted-foreground", children: "Loading editor\u2026" }), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("p", { className: "py-4 text-sm text-muted-foreground", children: "Loading editor\u2026" }), children: usesWord ? /* @__PURE__ */ 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__ */ jsx(
+                NativeDocxEditor,
+                {
+                  compact: true,
+                  adapter: wordBody.adapter,
+                  documentId: wordBody.documentKey,
+                  title: "Email",
+                  stateRef: wordBody.stateRef
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsx(
             MailBodyEditor,
             {
               text,
@@ -2553,6 +2773,7 @@ function ConnectedMailComposer({
   drafts: draftsProp,
   notify: notify3 = defaultMailNotify,
   offline,
+  replyTo,
   ...rest
 }) {
   const { client } = useMailClient();
@@ -2567,9 +2788,11 @@ function ConnectedMailComposer({
   const draftsList = useMailMessages(account, draftsFolderId, "", null, {
     enabled: !draftsProp && ready
   });
+  const [reloaded, setReloaded] = useState();
+  const openId = reloaded ?? draftId;
   const draft = useMailDraftCompose(
     account,
-    draftId,
+    openId,
     async (from, id) => {
       const message = await client.getMessage(from, id);
       return draftMailCompose(
@@ -2580,14 +2803,20 @@ function ConnectedMailComposer({
         })
       );
     },
-    { enabled: !initial && ready }
-  );
-  const start = useMemo(
-    () => initial ?? (draftId ? draft.data : emptyMailCompose()),
-    [initial, draftId, draft.data]
+    { enabled: (!initial || !!reloaded) && ready }
   );
+  const original = useMailMessage(account, replyTo, { enabled: !!replyTo && ready });
+  const start = useMemo(() => {
+    if (replyTo)
+      return original.data && account ? {
+        ...replyMailCompose(original.data, { account, folderRole: "inbox" }),
+        text: "",
+        html: ""
+      } : void 0;
+    return reloaded ? draft.data : initial ?? (openId ? draft.data : emptyMailCompose());
+  }, [replyTo, original.data, account, reloaded, initial, openId, draft.data]);
   if (!start)
-    return draft.error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "p-4 text-sm text-destructive", children: draft.error.message }) : /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "Loading draft\u2026" });
+    return draft.error ?? original.error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "p-4 text-sm text-destructive", children: (draft.error ?? original.error)?.message }) : /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-muted-foreground", children: "Loading draft\u2026" });
   return /* @__PURE__ */ 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] = useState(null);
   const [composeLocalDraftId, setComposeLocalDraftId] = useState();
   const [composeSession, setComposeSession] = useState(0);
+  const [mailboxKey] = useState(() => crypto.randomUUID());
   const openCompose = (value, localDraftId) => {
     setComposeSession((n) => n + 1);
     setComposeLocalDraftId(localDraftId);
@@ -3231,6 +3464,8 @@ function ConnectedMailbox({
             offline,
             documents,
             notify: notify3,
+            word,
+            sessionKey: `${mailboxKey}-${composeSession}`,
             onChange: setCompose,
             closeRequestRef: composeClose,
             onClose: () => {
@@ -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 } = useMailClient();
+  const isOnline = useMailOnline();
+  const cache = useMailCache();
+  const accounts = useMailAccounts();
+  const account = resolveMailbox(accounts.data, mailbox);
+  const unlock = useMailUnlock(account);
+  const detail = useMailMessage(account, messageId, { enabled: !!unlock.data || !isOnline });
+  const [error, setError] = useState("");
+  const message = detail.data;
+  if (!account || !message)
+    return /* @__PURE__ */ 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 mailJson(
+        client.fetch,
+        `${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(replyMailCompose(message, { account, folderRole, forward, all, attachments }));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not prepare forwarded attachments");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "px-4 pt-3 text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsx(
+      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(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(
+          `${accountPath(account.id)}/messages/${message.id}/original`,
+          "original.eml"
+        )
+      }
+    )
+  ] });
+}
 function ActiveChat({ agentId, workspaceId }) {
   const chat = useArbiChat({ agentId, workspaceId });
   return /* @__PURE__ */ jsx(
@@ -3383,6 +3698,6 @@ function ConnectedAgentChatPanel({
   ] });
 }
 
-export { ArbiAppProvider, ConnectedAgentChatPanel, ConnectedDangerZone, ConnectedIdentityVerification, ConnectedLogoutDialog, ConnectedMailAccounts, ConnectedMailComposer, ConnectedMailSetup, ConnectedMailbox, ConnectedNotificationPreferences, ConnectedProfileCard, ConnectedRequireVerified, ConnectedSecuritySection, ConnectedSessionsRow, ConnectedSkillUpload, ConnectedTagTable, ConnectedTaskAccessRequest, ConnectedThreadFollow, ConnectedWorkflowRunner, ConnectedWorkspaceActivity, ConnectedWorkspaceNotificationMenu, DEFAULT_CONNECTED_WORKFLOW_RUNNER_LABELS, StreamedArtifact, WorkflowRunThread, defaultMailNotify, defaultUnmetPasswordRequirement, resolveMailbox, useConnectedDocxNotifications, useConnectedShellWorkspaces, useConnectedWorkNotifications };
+export { ArbiAppProvider, ConnectedAgentChatPanel, ConnectedDangerZone, ConnectedIdentityVerification, ConnectedLogoutDialog, ConnectedMailAccounts, ConnectedMailComposer, ConnectedMailMessage, ConnectedMailSetup, ConnectedMailbox, ConnectedNotificationPreferences, ConnectedProfileCard, ConnectedRequireVerified, ConnectedSecuritySection, ConnectedSessionsRow, ConnectedSkillUpload, ConnectedTagTable, ConnectedTaskAccessRequest, ConnectedThreadFollow, ConnectedWorkflowRunner, ConnectedWorkspaceActivity, ConnectedWorkspaceNotificationMenu, DEFAULT_CONNECTED_WORKFLOW_RUNNER_LABELS, StreamedArtifact, WorkflowRunThread, defaultMailNotify, defaultUnmetPasswordRequirement, resolveMailbox, useConnectedDocxNotifications, useConnectedShellWorkspaces, useConnectedWorkNotifications };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map