@acms-subir/core 0.2.0 → 0.3.1

package/src/components/AiCleaner.tsx

@@ -0,0 +1,291 @@
+import { useRef, useState } from 'react';
+import { extractDocument } from '../lib/documents/extract';
+
+type Kind = 'posts' | 'pages';
+type Props = { initialKind?: Kind; initialCollection?: string; collections: Array<{ key: string; label: string }> };
+type Options = { notes: string; spacing: boolean; grammar: boolean; formatting: boolean; translate: boolean; targetLanguage: string };
+type Doc = { filename: string; source: string; warnings: string[] };
+// `key` fingerprints the source + options the result was produced from; `cleaned` is the untouched model output.
+type Result = { key: string; original: string; cleaned: string; text: string; model: string; warnings: string[]; translatedTo: string; failed: boolean };
+
+const MAX_SOURCE = 50000, MAX_NOTES = 2000, MAX_LANG = 100, MAX_TITLE = 300;
+const DEFAULT_OPTIONS: Options = { notes: '', spacing: true, grammar: true, formatting: true, translate: false, targetLanguage: '' };
+
+async function request<T>(path: string, body: unknown): Promise<T> {
+  const response = await fetch(path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+  const data = await response.json().catch(() => null);
+  if (!response.ok || !data) throw new Error(data?.error || 'Request failed. Try again.');
+  return data as T;
+}
+const message = (cause: unknown, fallback: string) => (cause instanceof Error && cause.message ? cause.message : fallback);
+function payload(source: string, o: Options) {
+  return { source, notes: o.notes.trim(), spacing: o.spacing, grammar: o.grammar, formatting: o.formatting, translate: o.translate, targetLanguage: o.translate ? o.targetLanguage.trim() : '' };
+}
+
+export default function AiCleaner({ initialKind = 'posts', initialCollection, collections }: Props) {
+  const [kind, setKind] = useState<Kind>(initialKind);
+  const [collection, setCollection] = useState(collections.find((c) => c.key === initialCollection)?.key ?? collections[0]?.key ?? '');
+  const [doc, setDoc] = useState<Doc | null>(null);
+  const [options, setOptions] = useState<Options>(DEFAULT_OPTIONS);
+  const [title, setTitle] = useState('');
+  const [result, setResult] = useState<Result | null>(null);
+  const [reviewed, setReviewed] = useState(false);
+  const [editUrl, setEditUrl] = useState('');
+  const [busy, setBusy] = useState<'extract' | 'clean' | 'save' | null>(null);
+  const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
+  const pending = useRef(false);
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  const set = <K extends keyof Options>(key: K, value: Options[K]) => setOptions((o) => ({ ...o, [key]: value }));
+  const source = doc?.source ?? '';
+  const currentKey = JSON.stringify(payload(source, options));
+  const stale = !!result && (result.failed || result.key !== currentKey);
+  const locked = !!busy || !!editUrl;
+  const needsFlag = !options.translate && !options.spacing && !options.grammar && !options.formatting;
+  const cleanProblem = !source.trim() ? 'Upload a document with text to clean.'
+    : source.length > MAX_SOURCE ? `The source is over ${MAX_SOURCE.toLocaleString()} characters. Shorten it before cleaning.`
+    : needsFlag ? 'Choose at least one cleanup option, or request a translation.'
+    : options.translate && !options.targetLanguage.trim() ? 'Enter the language to translate into.'
+    : '';
+  const saveProblem = !title.trim() ? 'Add a title before creating the draft.'
+    : !result?.text.trim() ? 'The cleaned content is empty.'
+    : (result?.text.length ?? 0) > 100000 ? 'The cleaned content exceeds 100,000 characters.'
+    : !reviewed ? 'Confirm you have reviewed the content.'
+    : '';
+  const hasWork = !!doc || !!result;
+
+  async function pickFile(file: File | undefined) {
+    if (!file || pending.current) return;
+    if (hasWork && !editUrl && !confirm('Replace the current document? Its source text and any cleaned result will be discarded.')) {
+      if (fileInput.current) fileInput.current.value = '';
+      return;
+    }
+    // Drop everything tied to the previous file before reading the new one, so a failure can't leave it behind.
+    pending.current = true; setBusy('extract'); setError(''); setNotice(`Reading ${file.name}…`);
+    setDoc(null); setResult(null); setTitle(''); setReviewed(false); setEditUrl('');
+    setOptions((previous) => ({ ...previous, translate: false, targetLanguage: '' }));
+    try {
+      const extracted = await extractDocument(file);
+      if (!extracted.source.trim()) throw new Error('No text was found in this document.');
+      setDoc({ filename: extracted.filename, source: extracted.source, warnings: extracted.warnings });
+      setTitle(extracted.title.slice(0, MAX_TITLE));
+      setNotice(`Loaded ${extracted.filename}. Check the extracted text, then clean it up.`);
+    } catch (cause) {
+      if (fileInput.current) fileInput.current.value = '';
+      setNotice(''); setError(message(cause, 'Could not read this document. Try a .docx, text-based .pdf, .txt or .md file.'));
+    } finally { pending.current = false; setBusy(null); }
+  }
+
+  async function clean() {
+    if (pending.current || cleanProblem || editUrl) return;
+    if (result && !result.failed && result.text !== result.cleaned && !confirm('Clean again? Your edits to the cleaned result will be replaced.')) return;
+    const body = payload(source, options), key = currentKey;
+    pending.current = true; setBusy('clean'); setError(''); setNotice('Cleaning up the document…');
+    try {
+      const res = await request<{ text: string; model: string; warnings?: string[] }>('/api/ai/clean', body);
+      setResult({ key, original: body.source, cleaned: res.text, text: res.text, model: res.model, warnings: res.warnings ?? [], translatedTo: body.targetLanguage, failed: false });
+      setReviewed(false);
+      setNotice('Cleanup finished. Compare it with the original and edit before creating a draft.');
+    } catch (cause) {
+      // Keep the previous text for reference, but it no longer matches what was requested.
+      setResult((r) => (r ? { ...r, failed: true } : r));
+      setNotice(''); setError(message(cause, 'Cleanup failed. Try again.'));
+    } finally { pending.current = false; setBusy(null); }
+  }
+
+  async function save() {
+    if (pending.current || editUrl || stale || saveProblem || !result) return;
+    pending.current = true; setBusy('save'); setError(''); setNotice('Creating draft…');
+    try {
+      const body = kind === 'posts' && collection
+        ? { kind, collection, title: title.trim(), content: result.text }
+        : { kind, title: title.trim(), content: result.text };
+      const res = await request<{ id: string; status: 'draft'; editUrl: string }>('/api/ai/draft', body);
+      setEditUrl(res.editUrl);
+      setNotice('Draft created. Opening the editor…');
+      window.location.assign(res.editUrl);
+    } catch (cause) {
+      setNotice(''); setError(message(cause, 'Could not create the draft.'));
+    } finally { pending.current = false; setBusy(null); }
+  }
+
+  function startOver() {
+    if (pending.current) return;
+    if (!editUrl && hasWork && !confirm('Discard this document and its cleaned result?')) return;
+    setDoc(null); setResult(null); setTitle(''); setReviewed(false); setEditUrl(''); setOptions(DEFAULT_OPTIONS);
+    setError(''); setNotice('Cleared. Upload another document to begin.');
+    if (fileInput.current) fileInput.current.value = '';
+  }
+
+  const kindLabel = kind === 'posts' ? 'post' : 'page';
+  return <div className="aic">
+    <style>{CSS}</style>
+    <div className="page-head">
+      <div><h1>Create from document</h1><p className="sub">Upload a document, clean up its spacing, spelling and formatting, then turn it into a draft post or page. Its meaning and language stay as written.</p></div>
+      <div className="aic-head-actions">
+        {hasWork && <button type="button" className="btn" onClick={startOver} disabled={!!busy}>Start over</button>}
+        <a className="btn" href="/admin/settings#ai-agents">AI settings</a>
+      </div>
+    </div>
+
+    <div className="aic-grid">
+      <form className="aic-card" aria-labelledby="aic-source-heading" aria-busy={busy === 'extract' || busy === 'clean'} onSubmit={(e) => { e.preventDefault(); void clean(); }}>
+        <div className="aic-kicker">01 · Upload &amp; clean</div>
+        <h2 id="aic-source-heading">Your document</h2>
+        <fieldset disabled={locked} className="aic-fs">
+            <div className="field-row">
+              <label className="field">
+                <span>Create a</span>
+                <select value={kind} onChange={(e) => setKind(e.target.value as Kind)}>
+                  <option value="posts">Post</option>
+                  <option value="pages">Page</option>
+                </select>
+              </label>
+              {kind === 'posts' && collections.length > 1 && <label className="field">
+                <span>Collection</span>
+                <select value={collection} onChange={(e) => setCollection(e.target.value)}>
+                  {collections.map((c) => <option key={c.key} value={c.key}>{c.label}</option>)}
+                </select>
+              </label>}
+            </div>
+
+          <label className="field">
+            <span>Document</span>
+            <input ref={fileInput} type="file" className="aic-file" accept=".docx,.pdf,.txt,.md,text/plain,text/markdown,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document" aria-describedby="aic-file-hint" onChange={(e) => void pickFile(e.target.files?.[0])} />
+            <small className="hint" id="aic-file-hint">DOCX, text-based PDF, TXT or Markdown, up to 10 MB. The file is read in your browser; scanned or password-protected PDFs aren't supported.</small>
+          </label>
+          {busy === 'extract' && <p className="aic-inline">Reading document…</p>}
+
+          {doc && <>
+            {doc.warnings.length > 0 && <Warnings title={`Notes on ${doc.filename}`} items={doc.warnings} />}
+            <label className="field">
+              <span>Extracted text <span className="hint">· {doc.filename} · {source.length.toLocaleString()} / {MAX_SOURCE.toLocaleString()}</span></span>
+              <textarea dir="auto" rows={10} maxLength={MAX_SOURCE} value={source} onChange={(e) => setDoc({ ...doc, source: e.target.value })} aria-describedby="aic-source-hint" />
+              <small className="hint" id="aic-source-hint">Fix anything the import got wrong. This is the text that will be cleaned.</small>
+            </label>
+
+            <fieldset className="aic-group">
+              <legend>What to clean</legend>
+              <label className="check-row"><input type="checkbox" checked={options.spacing} onChange={(e) => set('spacing', e.target.checked)} /> Spacing, blank lines and paragraph breaks</label>
+              <label className="check-row"><input type="checkbox" checked={options.grammar} onChange={(e) => set('grammar', e.target.checked)} /> Spelling, grammar and punctuation</label>
+              <label className="check-row"><input type="checkbox" checked={options.formatting} onChange={(e) => set('formatting', e.target.checked)} /> Consistent headings, lists and text formatting</label>
+            </fieldset>
+
+            <div className="aic-note">Keeps the author's meaning, voice, names, facts, dates, numbers and section order. Cleanup is limited to corrections; unclear passages should be flagged for your review. The document keeps its original language, including mixed-language passages. Its text is treated as content to clean, never as instructions.</div>
+
+            <label className="field">
+              <span>Cleanup notes <span className="hint">optional</span></span>
+              <textarea rows={2} maxLength={MAX_NOTES} value={options.notes} onChange={(e) => set('notes', e.target.value)} placeholder="For example: keep the informal tone" />
+            </label>
+
+            <label className="check-row"><input type="checkbox" checked={options.translate} onChange={(e) => set('translate', e.target.checked)} aria-describedby="aic-translate-hint" /> I want this translated</label>
+            <small className="hint aic-under-check" id="aic-translate-hint">Off unless you tick it. Requests written inside the document don't count.</small>
+            {options.translate && <div className="subpanel">
+              <label className="field">
+                <span>Translate into</span>
+                <input type="text" required maxLength={MAX_LANG} value={options.targetLanguage} onChange={(e) => set('targetLanguage', e.target.value)} placeholder="Language name, e.g. Spanish" />
+              </label>
+            </div>}
+          </>}
+        </fieldset>
+
+        {doc && <div className="aic-actions">
+          <button className="btn primary" type="submit" disabled={locked || !!cleanProblem}>{busy === 'clean' ? 'Cleaning…' : result ? 'Clean again' : 'Clean up document'}</button>
+          {cleanProblem && !busy && <span className="hint">{cleanProblem}</span>}
+        </div>}
+        <p className="hint aic-privacy">Only the extracted text, your notes and options are sent to the AI provider set in Settings, and only when you click. Nothing is stored in your browser.</p>
+      </form>
+
+      <section className="aic-card" aria-labelledby="aic-review-heading" aria-busy={busy === 'save'}>
+        <div className="aic-kicker">02 · Review &amp; create draft</div>
+        <h2 id="aic-review-heading">Compare and edit</h2>
+        {!result ? <p className="aic-empty">{doc ? 'Clean up the document to compare the result with the original here.' : 'Upload a document to begin.'}</p> : <>
+          <div className="aic-meta">
+            <span className="aic-badge">{result.translatedTo ? `Cleaned and translated into ${result.translatedTo}` : 'Cleaned · no translation requested'}</span>
+            {result.model && <span className="hint">Model: {result.model}</span>}
+          </div>
+          {stale && <div className="aic-stale" role="note">
+            <b>{result.failed ? 'The last cleanup failed.' : 'The source or options changed.'}</b> This result doesn't reflect the current document and options. Clean again before creating a draft.
+          </div>}
+          {result.warnings.length > 0 && <Warnings title="Flagged for review" items={result.warnings} />}
+          <div className="aic-compare">
+            <label className="field">
+              <span>Original <span className="hint">as sent for cleanup · read-only</span></span>
+              <textarea dir="auto" readOnly rows={18} value={result.original} className="aic-original" />
+            </label>
+            <label className="field">
+              <span>Cleaned <span className="hint">Markdown · editable</span></span>
+              <textarea dir="auto" rows={18} maxLength={100000} value={result.text} onChange={(e) => { setResult({ ...result, text: e.target.value }); }} disabled={locked} />
+            </label>
+          </div>
+
+          {!stale && <fieldset className="aic-fs aic-save" disabled={locked}>
+            <legend className="sr-only">Draft details</legend>
+            <label className="field">
+              <span>Title</span>
+              <input type="text" dir="auto" required maxLength={MAX_TITLE} value={title} onChange={(e) => setTitle(e.target.value)} aria-describedby="aic-title-hint" />
+              <small className="hint" id="aic-title-hint">Taken from the document's heading or file name. It isn't cleaned or translated, so edit it here.</small>
+            </label>
+            <label className="check-row"><input type="checkbox" checked={reviewed} onChange={(e) => setReviewed(e.target.checked)} /> I've compared the cleaned content with the original</label>
+          </fieldset>}
+
+          {!stale && <div className="aic-actions">
+            {editUrl
+              ? <a className="btn primary" href={editUrl}>Open draft in editor →</a>
+              : <button type="button" className="btn primary" onClick={() => void save()} disabled={locked || !!saveProblem}>{busy === 'save' ? 'Creating…' : 'Create draft & open editor'}</button>}
+            {!editUrl && saveProblem && !busy && <span className="hint">{saveProblem}</span>}
+          </div>}
+          <p className="hint aic-privacy">Creates a new unpublished {kindLabel}. Nothing goes live until you publish it from the editor.</p>
+        </>}
+      </section>
+    </div>
+
+    {error && <div className="flash error" role="alert">{error}</div>}
+    <p className="aic-status" role="status" aria-live="polite">{notice}</p>
+  </div>;
+}
+
+function Warnings({ title, items }: { title: string; items: string[] }) {
+  return <div className="aic-warn">
+    <b>{title}</b>
+    <ul>{items.map((w, i) => <li key={i}>{w}</li>)}</ul>
+  </div>;
+}
+
+const CSS = `
+.aic{max-width:1280px;margin:0 auto}
+.aic-head-actions{display:flex;gap:8px;flex-wrap:wrap}
+.aic-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start}
+.aic-card{min-width:0;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
+.aic-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--accent-deep);margin-bottom:8px}
+.aic h2{margin:0 0 18px;font-size:19px;letter-spacing:-.02em}
+.aic-fs{border:0;margin:0;padding:0;min-width:0}
+.aic-group{border:0;margin:0 0 6px;padding:0}
+.aic-group legend{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:8px;padding:0}
+.aic textarea{width:100%}
+.aic-file{display:block;width:100%;font:inherit;color:var(--text-2);padding:10px;border:1.5px dashed var(--line-strong);border-radius:var(--r-md);background:var(--panel-2);cursor:pointer}
+.aic-file:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
+.aic-file::file-selector-button{font:inherit;font-weight:500;margin-right:10px;padding:5px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--panel);color:var(--text);cursor:pointer}
+.aic-fs:disabled .aic-file{cursor:not-allowed;opacity:.7}
+.aic-note{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 13px;font-size:12.5px;color:var(--text-2);margin:6px 0 14px}
+.aic-under-check{display:block;margin:-6px 0 10px 23px}
+.aic .subpanel{margin:0 0 12px 23px}.aic .subpanel .field{margin-bottom:0}
+.aic-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
+.aic-privacy{margin:12px 0 0}
+.aic-inline{color:var(--muted);margin:0 0 12px}
+.aic-empty{color:var(--muted);margin:0;padding:40px 16px;text-align:center;background:var(--panel-2);border-radius:var(--r-md)}
+.aic-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
+.aic-badge{background:var(--accent-soft);color:var(--accent-deep);border-radius:var(--r-full);padding:3px 10px;font-size:12px;font-weight:600}
+.aic-stale{background:var(--amber-soft);color:var(--amber);border-radius:var(--r-md);padding:10px 13px;margin-bottom:12px;font-size:13px}
+.aic-warn{background:var(--amber-soft);color:var(--amber);border-radius:var(--r-md);padding:10px 13px;margin-bottom:12px;font-size:12.5px}
+.aic-warn ul{margin:4px 0 0;padding-left:18px}
+.aic-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
+.aic-compare textarea{min-height:340px}
+.aic-original{background:var(--panel-2);color:var(--text-2)}
+.aic-save{margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
+.aic-status{color:var(--green);min-height:22px;margin-top:14px}
+.aic .flash{margin-top:14px}
+@media(max-width:1100px){.aic-grid{grid-template-columns:1fr}}
+@media(max-width:720px){.aic-card{padding:18px}.aic-compare,.aic .field-row{grid-template-columns:1fr}.aic-compare textarea{min-height:220px}}
+`;