@remit/web-client 0.0.137 → 0.0.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.137",
+  "version": "0.0.138",
   "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/ComposeBody.stories.tsx

@@ -1,7 +1,7 @@
 import type { RichTextValue } from "@remit/ui/rich-text";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
-import { expect, fn, userEvent, within } from "storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import { ComposeBody, type ConversionFailure } from "./ComposeBody";
 
 const RICH_DOCUMENT = [
@@ -24,12 +24,25 @@ const PLAIN_MARKDOWN = [
 	"| EMEA | 412 |",
 ].join("\n");
 
+const DUTCH_DOCUMENT =
+	"<p>Beste Anna, de vergadering van donderdag gaat niet door. Ik stuur je morgen een nieuw voorstel voor de planning.</p>";
+
+const DUTCH_PROSE =
+	"Beste Anna, de vergadering van donderdag gaat niet door. Ik stuur je morgen een nieuw voorstel.";
+
+/** The languages a Dutch-writing account has configured, most-used first. */
+const LANGUAGES = ["nl", "en", "de"];
+
+const noop = () => undefined;
+
 const Harness = ({
 	initialHtml = "",
 	initialText = "",
 	startIn = "rich",
 	onConversionError = () => undefined,
 	conversions,
+	languages = LANGUAGES,
+	quoted,
 }: {
 	initialHtml?: string;
 	initialText?: string;
@@ -39,6 +52,8 @@ const Harness = ({
 		toPlain: (value: RichTextValue) => string;
 		toRich: (text: string) => string;
 	};
+	languages?: string[];
+	quoted?: string;
 }) => {
 	const [mode, setMode] = useState<"rich" | "plain">(startIn);
 	return (
@@ -51,11 +66,30 @@ const Harness = ({
 				onChange={() => undefined}
 				onConversionError={onConversionError}
 				conversions={conversions}
+				languages={languages}
+				onLanguageChange={noop}
 			/>
+			{quoted && (
+				<blockquote
+					data-testid="compose-quoted"
+					lang="fr"
+					className="border-l-2 border-line px-3 py-2 text-sm text-fg-muted"
+				>
+					{quoted}
+				</blockquote>
+			)}
 		</div>
 	);
 };
 
+const chipOf = (canvasElement: HTMLElement): HTMLElement => {
+	const chip = canvasElement.querySelector<HTMLElement>(
+		"[data-testid=compose-language-chip]",
+	);
+	if (!chip) throw new Error("the language chip is not mounted");
+	return chip;
+};
+
 /**
  * The mode switch as the compose window runs it: the toolbar control, the one
  * warning it raises, and the two surfaces it swaps between. The live
@@ -272,3 +306,158 @@ export const ReachableFromTheBody: Story = {
 		await expect(plainSurface(canvasElement)).not.toBeNull();
 	},
 };
+
+/**
+ * Detection runs over the body against the account's own languages and writes
+ * the result onto the writing surface. Firefox picks a dictionary from that tag
+ * among the ones the user installed; Chrome and Safari ignore it, and nothing
+ * here says otherwise.
+ */
+export const DutchIsDetected: Story = {
+	name: "Dutch prose sets the chip",
+	args: { initialHtml: DUTCH_DOCUMENT },
+	play: async ({ canvasElement }) => {
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+		await expect(
+			canvasElement.querySelector("[data-testid=compose-body]"),
+		).toHaveAttribute("lang", "nl");
+	},
+};
+
+/** Under twenty characters detection is a coin toss, so the account default stands. */
+export const TooShortHoldsTheDefault: Story = {
+	name: "Nine characters hold the default",
+	args: { startIn: "plain" },
+	play: async ({ canvasElement }) => {
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface is not mounted");
+
+		await userEvent.click(textarea);
+		await userEvent.keyboard("Hi Sophie");
+
+		await new Promise((resolve) => setTimeout(resolve, 800));
+		await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+	},
+};
+
+/**
+ * The first manual pick freezes the language for the rest of the message.
+ * Detection does not argue with a choice the user made — a tag that moved back
+ * under the caret would be a control that undoes itself.
+ */
+export const ManualPickSticks: Story = {
+	name: "A picked language survives more typing",
+	args: { startIn: "plain" },
+	play: async ({ canvasElement }) => {
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface is not mounted");
+
+		await userEvent.click(textarea);
+		await userEvent.keyboard(DUTCH_PROSE);
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+
+		await userEvent.click(chipOf(canvasElement));
+		await userEvent.click(
+			within(canvasElement).getByRole("menuitemradio", { name: /English/ }),
+		);
+		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
+
+		await userEvent.click(textarea);
+		await userEvent.keyboard(" Groetjes, Matthijs.");
+		await new Promise((resolve) => setTimeout(resolve, 800));
+		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
+		await expect(textarea).toHaveAttribute("lang", "en");
+	},
+};
+
+/**
+ * Two Shift+Tabs out of the body reach the chip — one still reaches the mode
+ * toggle, where #673 put it. The menu takes focus as it opens and hands it back
+ * to the chip on a pick, so the keyboard never lands somewhere it cannot leave.
+ */
+export const ChipFromTheKeyboard: Story = {
+	name: "Shift+Tab twice reaches the chip",
+	// Short enough that detection declines, so the chip is on the account
+	// default and the arrow key below has a known row to move off.
+	args: { initialHtml: "<p>Hoi.</p>" },
+	play: async ({ canvasElement }) => {
+		const editable = canvasElement.querySelector<HTMLElement>(
+			"[data-testid=compose-body]",
+		);
+		if (!editable) throw new Error("the rich surface is not mounted");
+
+		await userEvent.click(editable);
+		await userEvent.tab({ shift: true });
+		await expect(toggleOf(canvasElement)).toHaveFocus();
+		await userEvent.tab({ shift: true });
+		await expect(chipOf(canvasElement)).toHaveFocus();
+
+		await userEvent.keyboard("{Enter}");
+		await waitFor(async () => {
+			await expect(
+				canvasElement.querySelector("[data-testid=compose-language-menu]"),
+			).not.toBeNull();
+		});
+		await userEvent.keyboard("{ArrowDown}{Enter}");
+
+		await expect(chipOf(canvasElement)).toHaveTextContent("EN");
+		await expect(chipOf(canvasElement)).toHaveFocus();
+		await expect(editable).toHaveAttribute("lang", "en");
+	},
+};
+
+/** The tag follows the message across the mode switch, onto whichever surface is up. */
+export const PlainSurfaceCarriesTheLanguage: Story = {
+	name: "Plain text keeps the same language",
+	args: { initialHtml: DUTCH_DOCUMENT },
+	play: async ({ canvasElement }) => {
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+
+		await userEvent.click(toggleOf(canvasElement));
+		const textarea = plainSurface(canvasElement);
+		if (!textarea) throw new Error("the plain surface did not arrive");
+
+		await expect(textarea).toHaveAttribute("lang", "nl");
+		await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+	},
+};
+
+/**
+ * The quoted block a reply is written above is somebody else's text. It lives
+ * outside the editor, so detection never sees it and a French thread answered
+ * in Dutch is tagged Dutch.
+ */
+export const QuotedTextIsNotRead: Story = {
+	name: "A French quote under a Dutch reply",
+	args: {
+		initialHtml: DUTCH_DOCUMENT,
+		quoted:
+			"Bonjour, je vous confirme que la réunion de jeudi est annulée. Je vous propose de la reporter à la semaine prochaine.",
+	},
+	play: async ({ canvasElement }) => {
+		await waitFor(
+			async () => {
+				await expect(chipOf(canvasElement)).toHaveTextContent("NL");
+			},
+			{ timeout: 5000 },
+		);
+		await expect(
+			canvasElement.querySelector("[data-testid=compose-body]"),
+		).toHaveAttribute("lang", "nl");
+	},
+};

package/src/components/compose/ComposeBody.tsx

@@ -1,12 +1,14 @@
 import {
 	type ComposeBodyMode,
+	ComposeLanguageChip,
 	ComposeModeToggle,
 	markdownToHtml,
 	PlainTextEditor,
 	RichTextEditor,
 	type RichTextValue,
+	useComposeLanguage,
 } from "@remit/ui/rich-text";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ConfirmDialog } from "../ui/ConfirmDialog";
 import { conversionOutcome, switchNeedsWarning } from "./compose-mode";
 
@@ -50,6 +52,12 @@ interface ComposeBodyProps {
 	autoFocus?: boolean;
 	onConversionError: (failure: ConversionFailure) => void;
 	conversions?: ComposeConversions;
+	/** The account's writing languages, most-used first. */
+	languages: readonly string[];
+	/** The tag a reopened draft was stored under. */
+	initialLanguage?: string;
+	/** Reports the language the message is being written in, so the form can tag it. */
+	onLanguageChange: (language: string) => void;
 }
 
 /**
@@ -68,10 +76,14 @@ export const ComposeBody = ({
 	autoFocus = false,
 	onConversionError,
 	conversions = DEFAULT_COMPOSE_CONVERSIONS,
+	languages,
+	initialLanguage,
+	onLanguageChange,
 }: ComposeBodyProps) => {
 	const [richHtml, setRichHtml] = useState(initialHtml);
 	const [richGeneration, setRichGeneration] = useState(0);
 	const [plainText, setPlainText] = useState(initialText);
+	const [bodyText, setBodyText] = useState(initialText);
 	const [confirming, setConfirming] = useState(false);
 	// The caret does not survive a conversion: a rich selection is a node path
 	// and Markdown is a character offset. The surface that arrives takes focus
@@ -83,13 +95,27 @@ export const ComposeBody = ({
 		formatting: [],
 	});
 
+	// Detection reads the body the user typed. The quoted reply block is not part
+	// of it — that lives outside the editor, in the form's own `quoted` slot.
+	const { language, choose } = useComposeLanguage({
+		languages,
+		text: bodyText,
+		initialLanguage,
+	});
+
+	useEffect(() => {
+		onLanguageChange(language);
+	}, [language, onLanguageChange]);
+
 	const handleRichChange = (value: RichTextValue) => {
 		richValue.current = value;
+		setBodyText(value.text);
 		onChange(value);
 	};
 
 	const handlePlainChange = (text: string) => {
 		setPlainText(text);
+		setBodyText(text);
 		onChange(plainValue(text));
 	};
 
@@ -102,6 +128,7 @@ export const ComposeBody = ({
 			return;
 		}
 		setPlainText(converted);
+		setBodyText(converted);
 		setFocusSwitchedSurface(true);
 		onChange(plainValue(converted));
 		onModeChange("plain");
@@ -132,7 +159,18 @@ export const ComposeBody = ({
 		switchToPlain();
 	};
 
-	const toggle = <ComposeModeToggle mode={mode} onToggle={handleToggle} />;
+	// The chip comes first so the mode toggle stays one Shift+Tab out of the
+	// body, where #673 put it, and the chip is the second.
+	const trailing = (
+		<>
+			<ComposeLanguageChip
+				language={language}
+				languages={languages}
+				onSelect={choose}
+			/>
+			<ComposeModeToggle mode={mode} onToggle={handleToggle} />
+		</>
+	);
 
 	return (
 		<>
@@ -142,7 +180,8 @@ export const ComposeBody = ({
 					onChange={handlePlainChange}
 					onSubmit={onSubmit}
 					autoFocus={focusSwitchedSurface}
-					trailing={toggle}
+					lang={language}
+					trailing={trailing}
 				/>
 			) : (
 				<RichTextEditor
@@ -151,7 +190,8 @@ export const ComposeBody = ({
 					onChange={handleRichChange}
 					onSubmit={onSubmit}
 					autoFocus={autoFocus || focusSwitchedSurface}
-					trailing={toggle}
+					lang={language}
+					trailing={trailing}
 				/>
 			)}
 			<ConfirmDialog

package/src/components/compose/ComposeForm.tsx

@@ -11,10 +11,13 @@ import type {
 import {
 	ComposeActionBar,
 	ComposeFormShell,
+	defaultComposeLanguages,
 	EMPTY_RICH_TEXT,
 	QuotedText,
 	type RichTextValue,
 	sanitizeQuotedHtml,
+	unwrapLanguage,
+	wrapWithLanguage,
 } from "@remit/ui";
 import type { ComposeBodyMode } from "@remit/ui/rich-text";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -23,6 +26,7 @@ import {
 	Suspense,
 	useCallback,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 } from "react";
@@ -166,9 +170,15 @@ const getReferences = (
 const outgoingBody = (
 	bodyMode: ComposeBodyMode,
 	body: RichTextValue,
+	language: string,
 ): { textBody: string | undefined; htmlBody: string | undefined } => ({
 	textBody: body.text || undefined,
-	htmlBody: bodyMode === "plain" ? "" : body.html || undefined,
+	htmlBody:
+		bodyMode === "plain"
+			? ""
+			: body.html
+				? wrapWithLanguage(body.html, language)
+				: undefined,
 });
 
 const isFormEmpty = (
@@ -356,6 +366,7 @@ export const ComposeForm = ({
 		setInitialHtml("");
 		setInitialText("");
 		setBodyMode("rich");
+		setDraftLanguage(undefined);
 		setBody(EMPTY_RICH_TEXT);
 		setDocumentGeneration((generation) => generation + 1);
 		setDraftLoaded(false);
@@ -372,6 +383,11 @@ export const ComposeForm = ({
 	);
 	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,
+	// because this is where a draft is written and where a send is assembled.
+	const [composeLanguage, setComposeLanguage] = useState("en");
+	const [draftLanguage, setDraftLanguage] = useState<string | undefined>();
 	const [body, setBody] = useState<RichTextValue>(() => ({
 		html: buildInitialHtml(signature.plainText),
 		text: signature.plainText,
@@ -414,9 +430,15 @@ export const ComposeForm = ({
 		// is read off that rather than a field of its own. A rich draft comes back
 		// from its HTML — reading its text into one paragraph, as this did, brought
 		// a formatted message back flattened.
-		const loadedHtml = draftData.htmlBody ?? "";
+		// A rich draft carries its language in the `<div lang>` it was stored
+		// under; the editor reopens on what is inside that, so a reopened draft
+		// does not gain a second wrapper on its next autosave. A plain draft has
+		// no HTML to have carried one, and comes back on the account default.
+		const stored = unwrapLanguage(draftData.htmlBody ?? "");
+		const loadedHtml = stored.html;
 		const loadedText = draftData.textBody ?? "";
 		setBodyMode(modeOfDraft(draftData.htmlBody));
+		setDraftLanguage(stored.language ?? undefined);
 		setInitialHtml(loadedHtml);
 		setInitialText(loadedText);
 		setBody({ html: loadedHtml, text: loadedText, formatting: [] });
@@ -525,6 +547,17 @@ export const ComposeForm = ({
 		? accountIsMissingSmtp(selectedAccount)
 		: false;
 
+	// An account that has never been to the language setting falls back to what
+	// the browser already knows the user reads, which is an ordered answer.
+	const configured = selectedAccount?.composeLanguages;
+	const accountLanguages = useMemo(
+		() =>
+			configured && configured.length > 0
+				? configured
+				: defaultComposeLanguages(navigator.languages),
+		[configured],
+	);
+
 	// The action bar refuses a second press while one is in flight, but the
 	// editor's own Cmd+Enter goes straight to `handleSend`, and the write that
 	// now precedes the request widens the window a second press lands in.
@@ -545,7 +578,11 @@ export const ComposeForm = ({
 		if (isFormEmpty(toAddresses, ccAddresses, bccAddresses, subject, body))
 			return;
 
-		const { htmlBody, textBody } = outgoingBody(bodyMode, body);
+		const { htmlBody, textBody } = outgoingBody(
+			bodyMode,
+			body,
+			composeLanguage,
+		);
 
 		saveDraft({
 			accountId: selectedAccountId,
@@ -568,6 +605,7 @@ export const ComposeForm = ({
 		subject,
 		body,
 		bodyMode,
+		composeLanguage,
 		saveDraft,
 	]);
 
@@ -585,7 +623,11 @@ export const ComposeForm = ({
 					? getReferences(sourceMessage)
 					: {};
 
-			const { htmlBody, textBody } = outgoingBody(bodyMode, body);
+			const { htmlBody, textBody } = outgoingBody(
+				bodyMode,
+				body,
+				composeLanguage,
+			);
 			const createdThisAttempt = !outboxMessageId;
 
 			// The debounce dropped above may have been holding the last two seconds
@@ -653,6 +695,7 @@ export const ComposeForm = ({
 		subject,
 		body,
 		bodyMode,
+		composeLanguage,
 		mode,
 		sourceMessage,
 		outboxMessageId,
@@ -746,6 +789,9 @@ export const ComposeForm = ({
 					onSubmit={handleSend}
 					autoFocus={mode === "new"}
 					onConversionError={pushError}
+					languages={accountLanguages}
+					initialLanguage={draftLanguage}
+					onLanguageChange={setComposeLanguage}
 				/>
 			</Suspense>
 		</ComposeFormShell>

package/src/components/settings/AccountFormPanel.tsx

@@ -8,6 +8,7 @@ import {
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	Button,
+	ComposeLanguageSetting,
 	Input,
 	PasswordInput,
 	Select,
@@ -19,6 +20,7 @@ import { Check, Loader2, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { useComposeLanguages } from "../../hooks/useComposeLanguages";
 import { useSignature } from "../../hooks/useSignature";
 import {
 	getPresetById,
@@ -319,6 +321,25 @@ export const AccountFormPanel = ({
 	} = useSignature(account?.accountId);
 	const [signatureText, setSignatureText] = useState(signature.plainText);
 
+	const {
+		languages,
+		setLanguages,
+		isSaving: isLanguagesSaving,
+	} = useComposeLanguages(account?.accountId);
+
+	const languagesSection = (
+		<section>
+			<h3 className="text-2xs font-semibold text-fg-subtle uppercase tracking-wider mb-3">
+				Writing languages
+			</h3>
+			<ComposeLanguageSetting
+				value={languages}
+				onChange={setLanguages}
+				busy={isLanguagesSaving}
+			/>
+		</section>
+	);
+
 	useEffect(() => {
 		setSignatureText(signature.plainText);
 	}, [signature.plainText]);
@@ -475,6 +496,7 @@ export const AccountFormPanel = ({
 							</div>
 						</section>
 					)}
+					{isEditing && languagesSection}
 				</div>
 			</SlidePanel>
 		);
@@ -940,6 +962,7 @@ export const AccountFormPanel = ({
 						</div>
 					</section>
 				)}
+				{isEditing && languagesSection}
 			</form>
 		</SlidePanel>
 	);

package/src/hooks/useComposeLanguages.ts

@@ -0,0 +1,69 @@
+import {
+	accountDetailOperationsUpdateAccountMutation,
+	configOperationsGetConfigOptions,
+	configOperationsGetConfigQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { defaultComposeLanguages } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { buildMutationErrorBanner } from "@/components/ui/error-banners";
+
+/**
+ * The account's writing languages: the menu the composer's language chip
+ * offers, and the set detection is allowed to choose inside. Absent on the
+ * server means the user has never been here, and the browser's own ordered
+ * answer stands in.
+ */
+export const useComposeLanguages = (accountId?: string) => {
+	const queryClient = useQueryClient();
+	const { pushError } = useErrorBanners();
+
+	const { data: config } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	const configured = config?.accounts.find(
+		(account) => account.accountId === accountId,
+	)?.composeLanguages;
+
+	const languages = useMemo<string[]>(
+		() =>
+			configured && configured.length > 0
+				? [...configured]
+				: defaultComposeLanguages(navigator.languages),
+		[configured],
+	);
+
+	const mutation = useMutation({
+		...accountDetailOperationsUpdateAccountMutation(),
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: configOperationsGetConfigQueryKey(),
+			});
+		},
+		onError: (error) => {
+			pushError(
+				buildMutationErrorBanner(
+					"Couldn't save languages",
+					"The writing languages weren't saved.",
+					error,
+				),
+			);
+		},
+	});
+
+	const setLanguages = useCallback(
+		(next: string[]) => {
+			if (!accountId) return;
+			mutation.mutate({
+				path: { accountId },
+				body: { composeLanguages: next },
+			});
+		},
+		[accountId, mutation],
+	);
+
+	return { languages, setLanguages, isSaving: mutation.isPending };
+};