Fix Reply All, CC display and HTML quoted replies

app/components/AttachmentUpload.tsx

@@ -0,0 +1,123 @@
+// Copyright (c) 2026 Cloudflare, Inc.
+// Licensed under the Apache 2.0 license found in the LICENSE file or at:
+//     https://opensource.org/licenses/Apache-2.0
+
+import { Button } from "@cloudflare/kumo";
+import { PaperclipIcon, XIcon } from "@phosphor-icons/react";
+import { useRef } from "react";
+import { formatBytes } from "~/lib/utils";
+
+export interface AttachmentFile {
+	file: File;
+	id: string; // temporary id for display
+}
+
+interface AttachmentUploadProps {
+	attachments: AttachmentFile[];
+	onAdd: (files: File[]) => void;
+	onRemove: (id: string) => void;
+	maxSize?: number; // in bytes, default 25MB
+	disabled?: boolean;
+}
+
+const DEFAULT_MAX_SIZE = 25 * 1024 * 1024; // 25MB
+
+export default function AttachmentUpload({
+	attachments,
+	onAdd,
+	onRemove,
+	maxSize = DEFAULT_MAX_SIZE,
+	disabled = false,
+}: AttachmentUploadProps) {
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const files = Array.from(e.target.files || []);
+
+		// Validate files
+		const validFiles: File[] = [];
+		for (const file of files) {
+			if (file.size > maxSize) {
+				console.warn(`File ${file.name} exceeds size limit (${formatBytes(file.size)} > ${formatBytes(maxSize)})`);
+				continue;
+			}
+			validFiles.push(file);
+		}
+
+		if (validFiles.length > 0) {
+			onAdd(validFiles);
+		}
+
+		// Reset input so the same file can be selected again
+		if (inputRef.current) {
+			inputRef.current.value = "";
+		}
+	};
+
+	const handleClick = () => {
+		inputRef.current?.click();
+	};
+
+	return (
+		<div className="space-y-2">
+			<div>
+				<Button
+					type="button"
+					variant="ghost"
+					size="sm"
+					icon={<PaperclipIcon size={14} />}
+					onClick={handleClick}
+					disabled={disabled}
+				>
+					Add Attachment
+				</Button>
+				<input
+					ref={inputRef}
+					type="file"
+					multiple
+					onChange={handleFileSelect}
+					disabled={disabled}
+					className="hidden"
+					aria-label="Select files to attach"
+				/>
+			</div>
+
+			{attachments.length > 0 && (
+				<div className="bg-kumo-tint rounded p-3">
+					<div className="text-xs font-medium text-kumo-subtle mb-2">
+						{attachments.length} attachment{attachments.length !== 1 ? "s" : ""}
+					</div>
+					<div className="space-y-1.5">
+						{attachments.map((att) => (
+							<div
+								key={att.id}
+								className="flex items-center justify-between bg-kumo-base rounded px-2 py-1.5"
+							>
+								<div className="flex items-center gap-2 min-w-0 flex-1">
+									<PaperclipIcon size={12} className="text-kumo-subtle shrink-0" />
+									<div className="min-w-0 flex-1">
+										<div className="text-xs text-kumo-default truncate font-medium">
+											{att.file.name}
+										</div>
+										<div className="text-xs text-kumo-subtle">
+											{formatBytes(att.file.size)}
+										</div>
+									</div>
+								</div>
+								<button
+									type="button"
+									onClick={() => onRemove(att.id)}
+									disabled={disabled}
+									className="ml-2 p-1 text-kumo-subtle hover:text-kumo-default transition-colors shrink-0"
+									aria-label={`Remove ${att.file.name}`}
+								>
+									<XIcon size={12} />
+								</button>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}

app/components/ComposeEmail.tsx

@@ -3,141 +3,74 @@
 //     https://opensource.org/licenses/Apache-2.0
 
 import { Banner, Button, Dialog, Input, Text } from "@cloudflare/kumo";
-import { FloppyDiskIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react";
+import { FileIcon, PaperclipIcon, PaperPlaneTiltIcon, XIcon, FloppyDiskIcon } from "@phosphor-icons/react";
 import { useParams } from "react-router";
 import { useComposeForm } from "~/hooks/useComposeForm";
 import RichTextEditor from "./RichTextEditor";
 import { useUIStore } from "~/hooks/useUIStore";
 
+function formatSize(bytes: number) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 export default function ComposeEmail() {
-	const { mailboxId, folder } = useParams<{
-		mailboxId: string;
-		folder: string;
-	}>();
-
+	const { mailboxId, folder } = useParams<{ mailboxId: string; folder: string }>();
 	const { isComposeModalOpen, closeComposeModal } = useUIStore();
-
 	const {
-		to,
-		setTo,
-		cc,
-		setCc,
-		bcc,
-		setBcc,
-		showCcBcc,
-		setShowCcBcc,
-		subject,
-		setSubject,
-		body,
-		setBody,
-		error,
-		isSavingDraft,
-		isSending,
-		formTitle,
-		handleSaveDraft,
-		handleSend,
+		to, setTo, cc, setCc, bcc, setBcc, showCcBcc, setShowCcBcc,
+		subject, setSubject, body, setBody, attachments, addAttachments, removeAttachment,
+		error, isSavingDraft, isSending, formTitle, handleSaveDraft, handleSend,
 	} = useComposeForm(mailboxId, folder);
 
 	return (
-		<Dialog.Root
-			open={isComposeModalOpen}
-			onOpenChange={(open) => !open && !isSending && closeComposeModal()}
-		>
+		<Dialog.Root open={isComposeModalOpen} onOpenChange={(open) => !open && !isSending && closeComposeModal()}>
 			<Dialog size="lg" className="p-6 max-h-[85vh] overflow-y-auto">
-				<Dialog.Title className="text-lg font-semibold mb-5">
-					{formTitle}
-				</Dialog.Title>
+				<Dialog.Title className="text-lg font-semibold mb-5">{formTitle}</Dialog.Title>
 				<form onSubmit={(e) => handleSend(e, closeComposeModal)} className="space-y-4">
 					{error && <Banner variant="error" text={error} />}
 					<div className="flex items-center gap-2">
-						<div className="flex-1">
-							<Input
-								label="To"
-								type="text"
-								placeholder="recipient@example.com, another@example.com"
-								size="sm"
-								value={to}
-								onChange={(e) => setTo(e.target.value)}
-								required
+						<div className="flex-1"><Input label="To" type="text" placeholder="recipient@example.com, another@example.com" size="sm" value={to} onChange={(e) => setTo(e.target.value)} required /></div>
+						{!showCcBcc && <button type="button" onClick={() => setShowCcBcc(true)} className="shrink-0 text-xs text-kumo-link hover:text-kumo-link-hover font-medium mt-5">CC / BCC</button>}
+					</div>
+					{showCcBcc && <Input label="CC" type="text" size="sm" value={cc} onChange={(e) => setCc(e.target.value)} placeholder="Separate multiple addresses with commas" />}
+					{showCcBcc && <Input label="BCC" type="text" size="sm" value={bcc} onChange={(e) => setBcc(e.target.value)} placeholder="Separate multiple addresses with commas" />}
+					<Input label="Subject" type="text" placeholder="Email subject" size="sm" value={subject} onChange={(e) => setSubject(e.target.value)} required />
+					<div><Text size="sm" DANGEROUS_className="font-medium mb-1.5 block">Message</Text><RichTextEditor value={body} onChange={setBody} /></div>
+
+					{/* Attachment UI: the hook already converts files to the base64 format expected by SendEmailRequestSchema. */}
+					<div className="space-y-2">
+						<label className="inline-flex items-center gap-2 cursor-pointer text-sm text-kumo-default rounded-md border border-kumo-line px-3 py-2 hover:bg-kumo-tint">
+							<PaperclipIcon size={16} />
+							<span>Attach files</span>
+							<input
+								type="file"
+								multiple
+								className="hidden"
+								onChange={(e) => { void addAttachments(e.target.files); e.currentTarget.value = ""; }}
+								disabled={isSending}
 							/>
-						</div>
-						{!showCcBcc && (
-							<button
-								type="button"
-								onClick={() => setShowCcBcc(true)}
-								className="shrink-0 text-xs text-kumo-link hover:text-kumo-link-hover font-medium mt-5"
-							>
-								CC / BCC
-							</button>
+						</label>
+						{attachments.length > 0 && (
+							<div className="space-y-1.5">
+								{attachments.map((attachment, index) => (
+									<div key={`${attachment.filename}-${index}`} className="flex items-center gap-2 rounded-md border border-kumo-line px-3 py-2 text-sm">
+										<FileIcon size={16} className="text-kumo-subtle shrink-0" />
+										<span className="truncate flex-1">{attachment.filename}</span>
+										<span className="text-kumo-subtle shrink-0">{formatSize(attachment.size)}</span>
+										<button type="button" title="Remove attachment" onClick={() => removeAttachment(index)} disabled={isSending} className="p-1 rounded hover:bg-kumo-tint"><XIcon size={14} /></button>
+									</div>
+								))}
+							</div>
 						)}
 					</div>
-					{showCcBcc && (
-						<Input
-							label="CC"
-							type="text"
-							size="sm"
-							value={cc}
-							onChange={(e) => setCc(e.target.value)}
-							placeholder="Separate multiple addresses with commas"
-						/>
-					)}
-					{showCcBcc && (
-						<Input
-							label="BCC"
-							type="text"
-							size="sm"
-							value={bcc}
-							onChange={(e) => setBcc(e.target.value)}
-							placeholder="Separate multiple addresses with commas"
-						/>
-					)}
-					<Input
-						label="Subject"
-						type="text"
-						placeholder="Email subject"
-						size="sm"
-						value={subject}
-						onChange={(e) => setSubject(e.target.value)}
-						required
-					/>
-					<div>
-						<Text size="sm" DANGEROUS_className="font-medium mb-1.5 block">
-							Message
-						</Text>
-						<RichTextEditor value={body} onChange={setBody} />
-					</div>
+
 					<div className="flex justify-between items-center pt-2">
-						<Button
-							type="button"
-							variant="ghost"
-							size="sm"
-							onClick={closeComposeModal}
-							disabled={isSending}
-						>
-							Discard
-						</Button>
+						<Button type="button" variant="ghost" size="sm" onClick={closeComposeModal} disabled={isSending}>Discard</Button>
 						<div className="flex items-center gap-2">
-							<Button
-								type="button"
-								variant="secondary"
-								size="sm"
-								loading={isSavingDraft}
-								disabled={isSending}
-								icon={<FloppyDiskIcon size={14} />}
-								onClick={handleSaveDraft}
-							>
-								{isSavingDraft ? "Saving..." : "Save as Draft"}
-							</Button>
-							<Button
-								type="submit"
-								variant="primary"
-								size="sm"
-								loading={isSending}
-								disabled={isSavingDraft || isSending}
-								icon={<PaperPlaneTiltIcon size={14} />}
-							>
-								{isSending ? "Sending..." : "Send"}
-							</Button>
+							<Button type="button" variant="secondary" size="sm" loading={isSavingDraft} disabled={isSending} icon={<FloppyDiskIcon size={14} />} onClick={handleSaveDraft}>{isSavingDraft ? "Saving..." : "Save as Draft"}</Button>
+							<Button type="submit" variant="primary" size="sm" loading={isSending} disabled={isSavingDraft || isSending} icon={<PaperPlaneTiltIcon size={14} />}>{isSending ? "Sending..." : "Send"}</Button>
 						</div>
 					</div>
 				</form>