Add app: page.js (main page)

app/page.js

@@ -0,0 +1,277 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import UploadArea from "@/components/UploadArea";
+import SplitView from "@/components/SplitView";
+import ControlBar from "@/components/ControlBar";
+import Toast from "@/components/Toast";
+
+export default function Home() {
+  const [sessionId, setSessionId] = useState(null);
+  const [fileName, setFileName] = useState("");
+  const [paragraphs, setParagraphs] = useState([]);
+  const [classifications, setClassifications] = useState([]);
+  const [headingFontSize, setHeadingFontSize] = useState(18);
+  const [loading, setLoading] = useState(false);
+  const [loadingMessage, setLoadingMessage] = useState("");
+  const [toast, setToast] = useState(null);
+  const [enriched, setEnriched] = useState(false);
+
+  const showToast = useCallback((message, type = "info") => {
+    setToast({ message, type });
+    setTimeout(() => setToast(null), 4000);
+  }, []);
+
+  // Step 1: Upload and parse the document
+  const handleUpload = useCallback(
+    async (file) => {
+      setLoading(true);
+      setLoadingMessage("Parsing document...");
+      setEnriched(false);
+      setClassifications([]);
+
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        const res = await fetch("/api/parse-docx", {
+          method: "POST",
+          body: formData,
+        });
+
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error);
+
+        setSessionId(data.sessionId);
+        setFileName(data.fileName);
+        setParagraphs(data.paragraphs);
+        showToast(
+          `Parsed ${data.totalParagraphs} paragraphs from "${data.fileName}"`,
+          "success"
+        );
+      } catch (err) {
+        showToast(err.message, "error");
+      } finally {
+        setLoading(false);
+        setLoadingMessage("");
+      }
+    },
+    [showToast]
+  );
+
+  // Step 2: Run LLM enrichment
+  const handleEnrich = useCallback(
+    async (model, customPrompt) => {
+      if (!sessionId) return;
+
+      setLoading(true);
+      setLoadingMessage(
+        "Analyzing document with AI... This may take a minute."
+      );
+
+      try {
+        const res = await fetch("/api/enrich", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sessionId,
+            model: model || "llama3",
+            customPrompt: customPrompt || undefined,
+            headingFontSize,
+          }),
+        });
+
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error);
+
+        setClassifications(data.classifications);
+        setEnriched(true);
+        showToast(
+          `Found ${data.headingsFound} headings with ${headingFontSize}pt font size`,
+          "success"
+        );
+      } catch (err) {
+        showToast(err.message, "error");
+      } finally {
+        setLoading(false);
+        setLoadingMessage("");
+      }
+    },
+    [sessionId, headingFontSize, showToast]
+  );
+
+  // Step 3: Apply manual changes
+  const handleApplyChanges = useCallback(
+    async (headingIndices) => {
+      if (!sessionId) return;
+
+      setLoading(true);
+      setLoadingMessage("Applying your changes...");
+
+      try {
+        const res = await fetch("/api/apply-changes", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sessionId,
+            headingIndices,
+            headingFontSize,
+          }),
+        });
+
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error);
+
+        setClassifications(data.classifications);
+        setEnriched(true);
+        showToast(
+          `Applied ${data.headingsApplied} heading(s) at ${headingFontSize}pt`,
+          "success"
+        );
+      } catch (err) {
+        showToast(err.message, "error");
+      } finally {
+        setLoading(false);
+        setLoadingMessage("");
+      }
+    },
+    [sessionId, headingFontSize, showToast]
+  );
+
+  // Step 4: Download
+  const handleDownload = useCallback(async () => {
+    if (!sessionId || !enriched) return;
+
+    try {
+      const res = await fetch(`/api/download?sessionId=${sessionId}`);
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error);
+      }
+
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = fileName
+        ? fileName.replace(".docx", "_enriched.docx")
+        : "enriched_sop.docx";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+      showToast("Download started!", "success");
+    } catch (err) {
+      showToast(err.message, "error");
+    }
+  }, [sessionId, enriched, fileName, showToast]);
+
+  // Reset everything
+  const handleReset = useCallback(() => {
+    setSessionId(null);
+    setFileName("");
+    setParagraphs([]);
+    setClassifications([]);
+    setEnriched(false);
+  }, []);
+
+  return (
+    <div className="min-h-screen flex flex-col" style={{ background: "var(--bg-secondary)" }}>
+      {toast && <Toast message={toast.message} type={toast.type} />}
+
+      {/* Top navbar */}
+      <header
+        className="flex items-center justify-between px-5 py-3 border-b"
+        style={{
+          background: "var(--bg-primary)",
+          borderColor: "var(--border-color)",
+        }}
+      >
+        <div className="flex items-center gap-3">
+          <div
+            className="w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold"
+            style={{ background: "var(--accent)", color: "var(--bg-secondary)" }}
+          >
+            S
+          </div>
+          <h1 className="text-base font-semibold" style={{ color: "var(--text-primary)" }}>
+            SOP Heading Enricher
+          </h1>
+        </div>
+
+        <div className="flex items-center gap-3">
+          {fileName && (
+            <span
+              className="text-xs px-3 py-1 rounded-full"
+              style={{
+                background: "var(--bg-tertiary)",
+                color: "var(--text-secondary)",
+              }}
+            >
+              {fileName}
+            </span>
+          )}
+          {sessionId && (
+            <button
+              onClick={handleReset}
+              className="text-xs px-3 py-1.5 rounded-lg transition-colors cursor-pointer"
+              style={{
+                background: "var(--bg-tertiary)",
+                color: "var(--text-secondary)",
+              }}
+              onMouseEnter={(e) =>
+                (e.target.style.background = "var(--bg-hover)")
+              }
+              onMouseLeave={(e) =>
+                (e.target.style.background = "var(--bg-tertiary)")
+              }
+            >
+              New Document
+            </button>
+          )}
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="flex-1 flex flex-col">
+        {!sessionId ? (
+          <UploadArea onUpload={handleUpload} loading={loading} />
+        ) : (
+          <>
+            <ControlBar
+              onEnrich={handleEnrich}
+              onApplyChanges={handleApplyChanges}
+              onDownload={handleDownload}
+              enriched={enriched}
+              loading={loading}
+              loadingMessage={loadingMessage}
+              headingFontSize={headingFontSize}
+              onFontSizeChange={setHeadingFontSize}
+              classifications={classifications}
+            />
+            <SplitView
+              paragraphs={paragraphs}
+              classifications={classifications}
+              enriched={enriched}
+            />
+          </>
+        )}
+      </main>
+
+      {/* Loading overlay */}
+      {loading && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div
+            className="rounded-xl px-8 py-6 flex flex-col items-center gap-3 shadow-2xl"
+            style={{ background: "var(--bg-primary)" }}
+          >
+            <div className="spinner" />
+            <p className="text-sm" style={{ color: "var(--text-secondary)" }}>
+              {loadingMessage || "Processing..."}
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}