@remit/web-client 0.0.310 → 0.0.312

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.310",
+  "version": "0.0.312",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeForm.tsx

@@ -30,7 +30,7 @@ import {
 	sanitizeQuotedHtml,
 	unwrapLanguage,
 } from "@remit/ui";
-import type { ComposeBodyMode } from "@remit/ui/rich-text";
+import type { ComposeBodyMode, ComposeInsertion } from "@remit/ui/rich-text";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { RefObject } from "react";
 import {
@@ -50,6 +50,7 @@ import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
 import { useSaveDraft } from "../../hooks/useSaveDraft";
 import { useSignature } from "../../hooks/useSignature.js";
 import { isNotFound, softErrorMeta } from "../../lib/error-classifier";
+import type { ComposeSeed } from "../../lib/mail-search";
 import { accountIsMissingSmtp } from "../settings/account-form-helpers.js";
 import { useErrorBanners } from "../ui/ErrorBannerProvider.js";
 import {
@@ -94,6 +95,8 @@ interface ComposeFormProps {
 	 * shared would open on the last draft any other composer touched.
 	 */
 	outboxMessageId?: string;
+	seed?: ComposeSeed;
+	insertion?: ComposeInsertion;
 	/** The draft the first autosave created, for the owner to record. */
 	onDraftCreated: (outboxMessageId: string) => void;
 	onClose: () => void;
@@ -118,10 +121,19 @@ const buildInitialHtml = (signaturePlainText: string): string => {
  */
 const freshDocument = (
 	signaturePlainText: string,
-): { html: string; text: string } => ({
-	html: buildInitialHtml(signaturePlainText),
-	text: signaturePlainText,
-});
+	seed?: ComposeSeed,
+): { html: string; text: string } => {
+	if (!seed) {
+		return {
+			html: buildInitialHtml(signaturePlainText),
+			text: signaturePlainText,
+		};
+	}
+	return {
+		html: `${textToHtml(seed.body)}${buildInitialHtml(signaturePlainText)}`,
+		text: [seed.body, signaturePlainText].filter(Boolean).join("\n\n"),
+	};
+};
 
 const buildReplySubject = (subject?: string): string => {
 	if (!subject) return "Re: ";
@@ -396,6 +408,8 @@ export const ComposeForm = ({
 	account,
 	sourceMessage,
 	outboxMessageId,
+	seed,
+	insertion,
 	onDraftCreated,
 	onClose,
 	onAccountChange,
@@ -546,7 +560,7 @@ export const ComposeForm = ({
 		// the signature, the same document a fresh mount would have started on.
 		const opening = outboxMessageId
 			? { html: "", text: "" }
-			: freshDocument(signatureRef.current);
+			: freshDocument(signatureRef.current, seedRef.current);
 		setToAddresses([]);
 		setCcAddresses([]);
 		setBccAddresses([]);
@@ -571,15 +585,19 @@ export const ComposeForm = ({
 	// not a reason to reopen the document somebody is typing in.
 	const signatureRef = useRef(signature.plainText);
 	signatureRef.current = signature.plainText;
+	const seedRef = useRef(seed);
+	seedRef.current = seed;
 	// The editor reads its document once, so this is the document it opens on,
 	// not the live value, and it is remounted when the generation changes. Only
 	// loading a different document bumps that — remounting mid-compose would take
 	// the caret, the focus and the undo history with it.
 	const [documentGeneration, setDocumentGeneration] = useState(0);
 	const [initialHtml, setInitialHtml] = useState(
-		() => freshDocument(signature.plainText).html,
+		() => freshDocument(signature.plainText, seed).html,
+	);
+	const [initialText, setInitialText] = useState(
+		() => freshDocument(signature.plainText, seed).text,
 	);
-	const [initialText, setInitialText] = useState(signature.plainText);
 	const [bodyMode, setBodyMode] = useState<ComposeBodyMode>("rich");
 	// What the body is tagged with on the way out. The composer owns the value —
 	// it is the surface that has the text detection reads — and reports it here,
@@ -587,9 +605,18 @@ export const ComposeForm = ({
 	const [composeLanguage, setComposeLanguage] = useState("en");
 	const [draftLanguage, setDraftLanguage] = useState<string | undefined>();
 	const [body, setBody] = useState<RichTextValue>(() => ({
-		...freshDocument(signature.plainText),
+		...freshDocument(signature.plainText, seed),
 		formatting: [],
 	}));
+	const [insertedVersion, setInsertedVersion] = useState(
+		() => insertion?.version ?? 0,
+	);
+	const pendingInsertion =
+		insertion &&
+		insertion.version > insertedVersion &&
+		(outboxMessageId === undefined || draftLoaded)
+			? insertion
+			: undefined;
 
 	const { data: draftData, error: draftError } = useQuery({
 		...outboxDetailOperationsGetOutboxMessageOptions({
@@ -1352,6 +1379,8 @@ export const ComposeForm = ({
 					initialLanguage={draftLanguage}
 					onLanguageChange={setComposeLanguage}
 					spellcheck={spellcheck}
+					insertion={pendingInsertion}
+					onInserted={setInsertedVersion}
 				/>
 			</Suspense>
 		</ComposeFormShell>

package/src/components/compose/ComposeProvider.tsx

@@ -9,6 +9,7 @@ import {
 	useContext,
 	useEffect,
 	useMemo,
+	useRef,
 	useState,
 } from "react";
 import { isNotFound, softErrorStatuses } from "@/lib/error-classifier";
@@ -30,8 +31,15 @@ export type ComposeMode = ReplyMode | "new";
  * the address's answers — `useComposeDraftId` and `useIsComposing`. A second
  * copy here is what let a reply's draft turn up in the next new message.
  */
+type InsertIntoReply = (text: string) => void;
+
 interface ComposeContextValue {
 	startSendPolling: (outboxMessageId: string) => void;
+	insertIntoOpenReply: (sourceMessageId: string, text: string) => boolean;
+	registerOpenReply: (
+		sourceMessageId: string,
+		insert: InsertIntoReply,
+	) => () => void;
 }
 
 const ComposeContext = createContext<ComposeContextValue | undefined>(
@@ -124,7 +132,33 @@ export const ComposeProvider = ({
 		setPollingMessageId(outboxMessageId);
 	}, []);
 
-	const value = useMemo(() => ({ startSendPolling }), [startSendPolling]);
+	const openReplies = useRef(new Map<string, InsertIntoReply>());
+
+	const insertIntoOpenReply = useCallback(
+		(sourceMessageId: string, text: string): boolean => {
+			const insert = openReplies.current.get(sourceMessageId);
+			if (!insert) return false;
+			insert(text);
+			return true;
+		},
+		[],
+	);
+
+	const registerOpenReply = useCallback(
+		(sourceMessageId: string, insert: InsertIntoReply) => {
+			openReplies.current.set(sourceMessageId, insert);
+			return () => {
+				if (openReplies.current.get(sourceMessageId) === insert)
+					openReplies.current.delete(sourceMessageId);
+			};
+		},
+		[],
+	);
+
+	const value = useMemo(
+		() => ({ startSendPolling, insertIntoOpenReply, registerOpenReply }),
+		[startSendPolling, insertIntoOpenReply, registerOpenReply],
+	);
 
 	return (
 		<ComposeContext.Provider value={value}>{children}</ComposeContext.Provider>

package/src/components/compose/ConversationCompose.tsx

@@ -2,7 +2,9 @@ import {
 	configOperationsGetConfigOptions,
 	messageOperationsDescribeMessageOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { ComposeInsertion } from "@remit/ui/rich-text";
 import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import {
 	type ReplyAddress,
@@ -10,6 +12,7 @@ import {
 	useCloseReply,
 } from "@/routing";
 import { ComposeForm } from "./ComposeForm";
+import { useCompose } from "./ComposeProvider";
 
 /**
  * The answer to a message, as the top block of the conversation it answers.
@@ -27,6 +30,19 @@ import { ComposeForm } from "./ComposeForm";
 export const ConversationCompose = ({ surface }: { surface: ReplyAddress }) => {
 	const adoptCreatedDraft = useAdoptReplyDraft();
 	const closeReply = useCloseReply();
+	const { registerOpenReply } = useCompose();
+	const [insertion, setInsertion] = useState<ComposeInsertion>();
+	const insert = useCallback(
+		(text: string) =>
+			setInsertion((prev) => ({ version: (prev?.version ?? 0) + 1, text })),
+		[],
+	);
+	const answering = surface.sourceMessageId;
+
+	useEffect(
+		() => registerOpenReply(answering, insert),
+		[answering, insert, registerOpenReply],
+	);
 
 	const { data: sourceMessage } = useQuery({
 		...messageOperationsDescribeMessageOptions({
@@ -56,11 +72,14 @@ export const ConversationCompose = ({ surface }: { surface: ReplyAddress }) => {
 			    the address, and remounting the form on that would take the caret out
 			    of the sentence being typed. */}
 			<ComposeForm
+				key={surface.sourceMessageId}
 				layout="flow"
 				mode={surface.mode}
 				account={account}
 				sourceMessage={sourceMessage}
 				outboxMessageId={surface.outboxMessageId}
+				seed={surface.seed}
+				insertion={insertion}
 				onDraftCreated={adoptCreatedDraft}
 				onClose={closeReply}
 			/>

package/src/components/compose/compose.stories.tsx

@@ -174,6 +174,19 @@ export const Reply: Story = {
 	},
 };
 
+const OFFERED_TIMES = "Thursday 11 June: 12:30 – 13:00, 15:00 – 15:30";
+
+export const ReplyWithOfferedTimes: Story = {
+	args: {
+		url: `${messageUrl("lunch")}/reply?body=${encodeURIComponent(OFFERED_TIMES)}`,
+	},
+	play: async () => {
+		const subject = await page().findByPlaceholderText("Subject");
+		await waitFor(() => expect(subject).toHaveValue(`Re: ${LUNCH_SUBJECT}`));
+		await expect(await writingSurface(OFFERED_TIMES)).toBeVisible();
+	},
+};
+
 export const Forward: Story = {
 	args: { url: `${messageUrl("lunch")}/forward` },
 	play: async () => {

package/src/components/compose/reply-with-times.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import { useOpenReply } from "@/routing";
+import { useCompose } from "./ComposeProvider";
+
+export interface AnsweredMessage {
+	threadId: string;
+	messageId: string;
+}
+
+export type ReplyWithText = (message: AnsweredMessage, text: string) => void;
+
+export function useReplyWithText(): ReplyWithText {
+	const { insertIntoOpenReply } = useCompose();
+	const openReply = useOpenReply();
+	return useCallback(
+		(message: AnsweredMessage, text: string) => {
+			if (insertIntoOpenReply(message.messageId, text)) return;
+			openReply({ ...message, mode: "reply" }, { body: text });
+		},
+		[insertIntoOpenReply, openReply],
+	);
+}

package/src/components/mail/BriefPane.tsx

@@ -23,6 +23,7 @@ import {
 	useContext,
 	useMemo,
 } from "react";
+import { useReplyWithText } from "@/components/compose/reply-with-times";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DailyBrief } from "@/components/mail/DailyBrief";
 import { IntelligenceDrawer } from "@/components/mail/IntelligenceDrawer";
@@ -317,6 +318,7 @@ function BriefList() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function BriefReading() {
+	const replyWithText = useReplyWithText();
 	const {
 		conversation,
 		selectedThread,
@@ -374,6 +376,7 @@ function BriefReading() {
 				mailboxId={selectedThread?.mailboxId}
 				accountId={selectedThread?.accountId}
 				onAfterOptimisticRemove={handleDeselectIfRemoved}
+				onReplyWithText={replyWithText}
 			/>
 		</>
 	);
@@ -384,6 +387,7 @@ function BriefReading() {
  * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
  */
 function BriefIntelligence() {
+	const replyWithText = useReplyWithText();
 	const { selectedThread, handleDeselectIfRemoved } = useBriefPane();
 	const { onToggleIntelligence } = useMailContext();
 
@@ -394,6 +398,7 @@ function BriefIntelligence() {
 			mailboxId={selectedThread?.mailboxId}
 			accountId={selectedThread?.accountId}
 			onAfterOptimisticRemove={handleDeselectIfRemoved}
+			onReplyWithText={replyWithText}
 		/>
 	);
 }
@@ -402,6 +407,7 @@ function BriefIntelligence() {
  * Phone view: ConversationView when thread is open, or the DailyBrief list.
  */
 function BriefPhone() {
+	const replyWithText = useReplyWithText();
 	const {
 		selectedThread,
 		conversation,
@@ -437,6 +443,7 @@ function BriefPhone() {
 					mailboxId={selectedThread?.mailboxId}
 					accountId={selectedThread?.accountId}
 					onAfterOptimisticRemove={handleDeselectIfRemoved}
+					onReplyWithText={replyWithText}
 				/>
 			</>
 		);

package/src/components/mail/FlaggedPane.tsx

@@ -33,6 +33,7 @@ import {
 	useContext,
 	useMemo,
 } from "react";
+import { useReplyWithText } from "@/components/compose/reply-with-times";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { FlaggedList } from "@/components/mail/FlaggedList";
 import { IntelligenceDrawer } from "@/components/mail/IntelligenceDrawer";
@@ -320,6 +321,7 @@ function FlaggedListSlot() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function FlaggedReading() {
+	const replyWithText = useReplyWithText();
 	const {
 		conversation,
 		selectedThread,
@@ -377,6 +379,7 @@ function FlaggedReading() {
 				mailboxId={selectedThread?.mailboxId}
 				accountId={selectedThread?.accountId}
 				onAfterOptimisticRemove={handleDeselectIfRemoved}
+				onReplyWithText={replyWithText}
 			/>
 		</>
 	);
@@ -387,6 +390,7 @@ function FlaggedReading() {
  * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
  */
 function FlaggedIntelligence() {
+	const replyWithText = useReplyWithText();
 	const { selectedThread, handleDeselectIfRemoved } = useFlaggedPane();
 	const { onToggleIntelligence } = useMailContext();
 
@@ -397,12 +401,14 @@ function FlaggedIntelligence() {
 			mailboxId={selectedThread?.mailboxId}
 			accountId={selectedThread?.accountId}
 			onAfterOptimisticRemove={handleDeselectIfRemoved}
+			onReplyWithText={replyWithText}
 		/>
 	);
 }
 
 /** Phone view: ConversationView when a thread is open, else the flat list. */
 function FlaggedPhone() {
+	const replyWithText = useReplyWithText();
 	const {
 		selectedThread,
 		conversation,
@@ -438,6 +444,7 @@ function FlaggedPhone() {
 					mailboxId={selectedThread?.mailboxId}
 					accountId={selectedThread?.accountId}
 					onAfterOptimisticRemove={handleDeselectIfRemoved}
+					onReplyWithText={replyWithText}
 				/>
 			</>
 		);

package/src/components/mail/IntelligenceDrawer.tsx

@@ -1,4 +1,5 @@
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { ReplyWithText } from "@/components/compose/reply-with-times";
 import { Drawer } from "@/components/layout/Drawer";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 
@@ -16,6 +17,7 @@ export function IntelligenceDrawer({
 	mailboxId,
 	accountId,
 	onAfterOptimisticRemove,
+	onReplyWithText,
 }: {
 	isOpen: boolean;
 	onClose: () => void;
@@ -23,6 +25,7 @@ export function IntelligenceDrawer({
 	mailboxId?: string;
 	accountId?: string;
 	onAfterOptimisticRemove?: (messageIds: string[]) => void;
+	onReplyWithText?: ReplyWithText;
 }) {
 	return (
 		<Drawer
@@ -41,6 +44,7 @@ export function IntelligenceDrawer({
 				accountId={accountId}
 				hideCloseButton
 				onAfterOptimisticRemove={onAfterOptimisticRemove}
+				onReplyWithText={onReplyWithText}
 			/>
 		</Drawer>
 	);

package/src/components/mail/IntelligencePane.tsx

@@ -20,6 +20,7 @@ import { isRescueCandidate } from "@/lib/rescue-candidates";
 import { recordRescueSentToJunk } from "@/lib/rescue-telemetry";
 import { useTelemetry } from "@/lib/telemetry-context";
 import { NavLink } from "@/routing";
+import type { ReplyWithText } from "../compose/reply-with-times";
 
 export interface IntelligencePaneProps {
 	onClose: () => void;
@@ -53,6 +54,7 @@ export interface IntelligencePaneProps {
 	 * occasional unneeded pane-close — not a bug; see `useReportSpam`.
 	 */
 	onAfterOptimisticRemove?: (messageIds: string[]) => void;
+	onReplyWithText?: ReplyWithText;
 }
 
 /**
@@ -251,6 +253,7 @@ interface WiredPanelProps {
 	accountId?: string;
 	hideCloseButton?: boolean;
 	onAfterOptimisticRemove?: (messageIds: string[]) => void;
+	onReplyWithText?: ReplyWithText;
 }
 
 /**
@@ -263,6 +266,7 @@ function WiredPanel({
 	accountId,
 	hideCloseButton,
 	onAfterOptimisticRemove,
+	onReplyWithText,
 }: WiredPanelProps) {
 	const {
 		data,
@@ -273,7 +277,7 @@ function WiredPanel({
 		similarErrorIsFatal,
 		semanticEnabled,
 	} = useIntelligenceData(thread, mailboxId);
-	const calendar = useIntelligenceCalendar(thread);
+	const calendar = useIntelligenceCalendar(thread, onReplyWithText);
 	const [reclassifyOpen, setReclassifyOpen] = useState(false);
 	const senderEmail = thread.fromEmail ?? undefined;
 
@@ -432,6 +436,7 @@ export const IntelligencePane = ({
 	accountId,
 	hideCloseButton,
 	onAfterOptimisticRemove,
+	onReplyWithText,
 }: IntelligencePaneProps) => {
 	if (!thread) {
 		return (
@@ -461,6 +466,7 @@ export const IntelligencePane = ({
 			accountId={accountId}
 			hideCloseButton={hideCloseButton}
 			onAfterOptimisticRemove={onAfterOptimisticRemove}
+			onReplyWithText={onReplyWithText}
 		/>
 	);
 };

package/src/components/mail/MailboxPane.tsx

@@ -45,6 +45,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { useReplyWithText } from "@/components/compose/reply-with-times";
 import { ConversationView } from "@/components/mail/ConversationView";
 import { DraftsView } from "@/components/mail/DraftsView";
 import { EmptyTrashBar } from "@/components/mail/EmptyTrashBar";
@@ -1115,6 +1116,7 @@ function MailboxList() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function MailboxReading() {
+	const replyWithText = useReplyWithText();
 	const {
 		mailboxId,
 		mailboxAccountId,
@@ -1204,6 +1206,7 @@ function MailboxReading() {
 				mailboxId={mailboxId}
 				accountId={mailboxAccountId}
 				onAfterOptimisticRemove={handleDeselectIfRemoved}
+				onReplyWithText={replyWithText}
 			/>
 		</>
 	);
@@ -1214,6 +1217,7 @@ function MailboxReading() {
  * Mount in the `intelligence` slot of `AppShellSlotted`. Only rendered ≥ 1280px.
  */
 function MailboxIntelligence() {
+	const replyWithText = useReplyWithText();
 	const {
 		mailboxId,
 		mailboxAccountId,
@@ -1229,6 +1233,7 @@ function MailboxIntelligence() {
 			mailboxId={mailboxId}
 			accountId={mailboxAccountId}
 			onAfterOptimisticRemove={handleDeselectIfRemoved}
+			onReplyWithText={replyWithText}
 		/>
 	);
 }
@@ -1238,6 +1243,7 @@ function MailboxIntelligence() {
  * Use this on phones instead of the slot sub-views.
  */
 function MailboxPhone() {
+	const replyWithText = useReplyWithText();
 	const {
 		mailboxId,
 		mailboxAccountId,
@@ -1281,6 +1287,7 @@ function MailboxPhone() {
 					mailboxId={mailboxId}
 					accountId={mailboxAccountId}
 					onAfterOptimisticRemove={handleDeselectIfRemoved}
+					onReplyWithText={replyWithText}
 				/>
 			</>
 		);