update

frontend/src/components/dialogs.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from "react";
-import { Globe, ImagePlus, Link2, Pencil, Settings2, Tag, Unplug } from "lucide-react";
+import { Globe, FileText, ImagePlus, Link2, Mail, Pencil, ScanText, Settings2, Tag, Unplug } from "lucide-react";
 import { api } from "../lib/api.ts";
 import { cn } from "../lib/cn.ts";
-import type { Conversation, User } from "../lib/types.ts";
+import type { Conversation, FilePreview, User } from "../lib/types.ts";
 import { Avatar, Button, CopyButton, Field, Input, Modal, Picker, Spinner } from "./ui.tsx";
 
 /* ---------- Rename + topic ---------- */
@@ -67,6 +67,139 @@ export function ConvEditDialog({
   );
 }
 
+/* ---------- Key recovery ---------- */
+
+export function RecoverDialog({ open, onClose, from }: { open: boolean; onClose: () => void; from?: string }) {
+  const [username, setUsername] = useState("");
+  const [sent, setSent] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setUsername("");
+      setSent(false);
+      setError("");
+    }
+  }, [open ]);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      await api.recover(username.trim().toLowerCase());
+      setSent(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="Recover access key" icon={Mail}>
+      {sent ? (
+        <div className="space-y-4">
+          <p className="text-sm opacity-80">
+            If <strong>@{username.trim().toLowerCase() || "…"}</strong> exists and has a recovery
+            email, a reset link is on its way{from ? <> from <strong>{from}</strong></> : ""} (valid 60 minutes, single use).
+          </p>
+          <p className="rounded-2xl bg-amber-500/10 px-4 py-2.5 text-sm opacity-90 dark:bg-amber-500/10">
+            Check your inbox — and your spam folder, the message may have landed there.
+          </p>
+          <p className="text-sm opacity-70">
+            Nothing arrives? Then no recovery email is set on your account and the
+            reset is not possible — please contact the site administrator.
+          </p>
+          <div className="flex justify-end">
+            <Button size="sm" onClick={onClose}>Done</Button>
+          </div>
+        </div>
+      ) : (
+        <form onSubmit={submit} className="space-y-4">
+          <p className="text-sm opacity-70">
+            Enter your username. You'll receive a link that issues a fresh key
+            (the old one stops working).
+          </p>
+          <Field label="Username">
+            <Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" required />
+          </Field>
+          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+          <div className="flex justify-end gap-2">
+            <Button variant="secondary" size="sm" type="button" onClick={onClose}>Cancel</Button>
+            <Button size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : "Send reset link"}</Button>
+          </div>
+        </form>
+      )}
+    </Modal>
+  );
+}
+
+/* ---------- File preview (pre-transcription review) ---------- */
+
+export function FilePreviewModal({
+  preview,
+  busy,
+  onClose,
+  onAttach,
+}: {
+  preview: FilePreview | null;
+  busy: boolean;
+  onClose: () => void;
+  onAttach: (text: string) => void;
+}) {
+  const [text, setText] = useState("");
+
+  useEffect(() => {
+    if (preview) setText(preview.text);
+  }, [preview]);
+
+  const isOcr = preview?.kind === "ocr";
+
+  return (
+    <Modal
+      open={preview !== null}
+      onClose={onClose}
+      title={isOcr ? "Review transcription" : "Review text attachment"}
+      icon={isOcr ? ScanText : FileText}
+      wide
+    >
+      {busy ? (
+        <p className="flex items-center gap-2 py-8 text-sm opacity-70">
+          <Spinner size={16} />
+          {isOcr ? "Transcribing the image on the server (OCR)…" : "Uploading through platform tools…"}
+        </p>
+      ) : (
+        <div className="space-y-3">
+          <p className="rounded-2xl bg-emerald-600/10 px-4 py-2.5 text-sm opacity-90">
+            {isOcr
+              ? <>The image was transcribed to text on the server — <strong>the model receives this text, never the image</strong>. Fix any reading mistakes below, then attach.</>
+              : <>The file was uploaded through platform tools. <strong>Its text content is attached to your message.</strong> Edit below if needed, then attach.</>}
+          </p>
+          {preview?.truncated && (
+            <p className="rounded-2xl bg-amber-500/10 px-4 py-2.5 text-sm">Transcription truncated to the server limit — the end is missing.</p>
+          )}
+          <textarea
+            rows={10}
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            className="w-full resize-y rounded-2xl border border-stone-200 bg-stone-50 p-4 font-mono text-[13px] leading-relaxed outline-none focus:border-emerald-500 dark:border-zinc-700 dark:bg-zinc-800"
+          />
+          <div className="flex items-center justify-between">
+            <span className="text-xs opacity-60">{preview?.name} · {text.length.toLocaleString()} chars</span>
+            <div className="flex gap-2">
+              <Button variant="secondary" size="sm" onClick={onClose}>Cancel</Button>
+              <Button size="sm" onClick={() => onAttach(text)} disabled={!text.trim()}>Attach to message</Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}
+
 /* ---------- Share ---------- */
 
 export function ShareModal({ conv, onClose }: { conv: Conversation | null; onClose: () => void }) {
@@ -128,6 +261,7 @@ export function SettingsModal({
 }) {
   const [displayName, setDisplayName] = useState("");
   const [avatarUrl, setAvatarUrl] = useState("");
+  const [email, setEmail] = useState("");
   const [theme, setTheme] = useState("auto");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
@@ -140,6 +274,7 @@ export function SettingsModal({
     if (user) {
       setDisplayName(user.displayName);
       setAvatarUrl(user.avatarUrl);
+      setEmail(user.email);
       setTheme(user.theme);
       setError("");
       setUploadError("");
@@ -174,7 +309,7 @@ export function SettingsModal({
     setBusy(true);
     setError("");
     try {
-      const res = await api.updateMe({ displayName: displayName.trim(), avatarUrl: avatarUrl.trim(), theme });
+      const res = await api.updateMe({ displayName: displayName.trim(), avatarUrl: avatarUrl.trim(), email: email.trim(), theme });
       onSaved(res.user);
       onClose();
     } catch (err) {
@@ -244,6 +379,9 @@ export function SettingsModal({
         <Field label="Avatar URL" hint="Host an image on catbox.moe (or anywhere) and paste the direct link here. Empty = initials.">
           <Input value={avatarUrl} onChange={(e) => setAvatarUrl(e.target.value)} placeholder="https://…" inputMode="url" />
         </Field>
+        <Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it.">
+          <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
+        </Field>
         <Field label="Theme">
           <Picker
             ariaLabel="Theme"