@learnpack/learnpack 5.0.361 → 5.0.363

package/src/creator/src/components/FileReviewModal.test.tsx

@@ -0,0 +1,193 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import toast from "react-hot-toast";
+import "../i18n";
+import { FileCard } from "./FileCard";
+import { FileReviewButton } from "./FileReviewModal";
+import { MarkdownRenderer } from "./MarkdownRenderer";
+import useStore from "../utils/store";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { ParsedFile, ReadReport } from "./FileUploader";
+
+vi.mock("react-hot-toast");
+
+const report: ReadReport = {
+  total_pages: 3,
+  ai_pages: [],
+  unread_pages: [],
+  failed_pages: [],
+  markdown: true,
+};
+
+const file = (changes: Partial<ParsedFile> = {}): ParsedFile => ({
+  name: "seed.pdf",
+  text: "\n[Page 1]\n|Term|Definition|\n|---|---|\n|Loop|Repeats|\n",
+  status: "SUCCESS",
+  notificationId: "read-1",
+  report,
+  ...changes,
+});
+
+const storedText = () => useStore.getState().uploadedFiles[0].text;
+
+const open = (name: string) => fireEvent.click(screen.getByText(name));
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  useStore.getState().setUploadedFiles([file()]);
+});
+
+afterEach(cleanup);
+
+describe("FileReviewButton", () => {
+  it("stays quiet on an ordinary read", () => {
+    render(<FileReviewButton file={file()} />);
+
+    expect(screen.getByText("View text")).toBeTruthy();
+  });
+
+  it("asks for a review when the AI read pages", () => {
+    render(<FileReviewButton file={file({ report: { ...report, ai_pages: [1, 2] } })} />);
+
+    open("Review text");
+
+    expect(
+      screen.getByText("We read 2 of 3 pages with AI. Check names, figures and dates.")
+    ).toBeTruthy();
+  });
+
+  it("names the pages that are missing, without repeating them", () => {
+    render(
+      <FileReviewButton
+        file={file({ report: { ...report, unread_pages: [3, 2], failed_pages: [2] } })}
+      />
+    );
+
+    open("Review text");
+
+    expect(screen.getByText("We could not fully read these pages: 2, 3.")).toBeTruthy();
+  });
+
+  it("draws tables instead of showing their markdown", () => {
+    render(<FileReviewButton file={file()} />);
+
+    open("View text");
+
+    expect(screen.getByRole("table")).toBeTruthy();
+    expect(screen.getByRole("cell", { name: "Repeats" })).toBeTruthy();
+  });
+
+  it("shows page headings on screen and keeps the markers in the stored text", () => {
+    render(<FileReviewButton file={file()} />);
+
+    open("View text");
+
+    expect(screen.getByRole("heading", { name: "Page 1" })).toBeTruthy();
+    expect(screen.queryByText("[Page 1]")).toBeNull();
+    expect(storedText()).toContain("[Page 1]");
+  });
+
+  it("keeps the lines of plain text apart", () => {
+    render(<FileReviewButton file={file({ text: "One\nTwo", report: undefined })} />);
+
+    open("View text");
+
+    expect(screen.getByText(/One/).className).toContain("whitespace-pre-wrap");
+  });
+
+  it("saves edits where every prompt reads the file from", () => {
+    render(<FileReviewButton file={file()} />);
+    open("View text");
+    open("Edit");
+
+    fireEvent.change(screen.getByRole("textbox"), {
+      target: { value: "Corrected text" },
+    });
+    open("Save changes");
+
+    expect(storedText()).toBe("Corrected text");
+    expect(screen.queryByText("Save changes")).toBeNull();
+  });
+
+  it("discards edits on close", () => {
+    render(<FileReviewButton file={file()} />);
+    open("View text");
+    open("Edit");
+
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Changed" } });
+    open("Close");
+
+    expect(storedText()).toBe(file().text);
+  });
+
+  it("does not let the user save an empty document", () => {
+    render(<FileReviewButton file={file()} />);
+    open("View text");
+    open("Edit");
+
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "   " } });
+
+    expect(
+      (screen.getByText("Save changes") as HTMLButtonElement).disabled
+    ).toBe(true);
+  });
+});
+
+describe("MarkdownRenderer", () => {
+  it("leaves the chat's markdown without table support", () => {
+    render(<MarkdownRenderer content={"|a|b|\n|---|---|\n|1|2|"} />);
+
+    expect(screen.queryByRole("table")).toBeNull();
+  });
+});
+
+describe("FileCard", () => {
+  const renderCard = (value: ParsedFile) =>
+    render(
+      <TooltipProvider>
+        <FileCard file={value} handleRemove={() => {}} />
+      </TooltipProvider>
+    );
+
+  const rerenderCard = (
+    rerender: ReturnType<typeof render>["rerender"],
+    value: ParsedFile
+  ) =>
+    act(() =>
+      rerender(
+        <TooltipProvider>
+          <FileCard file={value} handleRemove={() => {}} />
+        </TooltipProvider>
+      )
+    );
+
+  it("warns once when a read from the sidebar used the AI", () => {
+    const { rerender } = renderCard(
+      file({ status: "PROCESSING", text: "", report: undefined })
+    );
+
+    const finished = file({ report: { ...report, ai_pages: [1] } });
+    rerenderCard(rerender, finished);
+    rerenderCard(rerender, { ...finished });
+
+    expect(toast).toHaveBeenCalledTimes(1);
+  });
+
+  it("says nothing when the page reloads with a read already finished", () => {
+    renderCard(file({ report: { ...report, ai_pages: [1] } }));
+
+    expect(toast).not.toHaveBeenCalled();
+  });
+
+  it("reports a failed read", () => {
+    const { rerender } = renderCard(
+      file({ status: "PROCESSING", text: "", report: undefined })
+    );
+
+    rerenderCard(rerender, file({ status: "ERROR", text: "", report: undefined }));
+
+    expect(toast.error).toHaveBeenCalledWith(
+      "We could not read this file. Remove it or upload it again."
+    );
+  });
+});

package/src/creator/src/components/FileReviewModal.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react"
+import { createPortal } from "react-dom"
+import { useTranslation } from "react-i18next"
+import useStore from "../utils/store"
+import { isMarkdownRead, readNotices, withPageHeadings } from "../utils/fileRead"
+import { MarkdownRenderer } from "./MarkdownRenderer"
+import type { ParsedFile } from "./FileUploader"
+
+const tabClass = (active: boolean) =>
+  "px-3 py-1 rounded-md cursor-pointer text-sm " +
+  (active ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-800")
+
+// Rendered in a portal because the sidebar is transformed on small screens,
+// and a fixed element inside a transformed parent stops covering the page.
+export const FileReviewModal = ({
+  file,
+  onClose,
+}: {
+  file: ParsedFile
+  onClose: () => void
+}) => {
+  const { t } = useTranslation()
+  const [mode, setMode] = useState<"read" | "edit">("read")
+  const [draft, setDraft] = useState(file.text)
+
+  const notices = readNotices(file, t)
+  const canSave = draft.trim().length > 0 && draft !== file.text
+
+  const save = () => {
+    const { uploadedFiles, setUploadedFiles } = useStore.getState()
+    setUploadedFiles(
+      uploadedFiles.map((item) =>
+        item.name === file.name ? { ...item, text: draft } : item
+      )
+    )
+    onClose()
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-1000">
+      <div className="bg-white p-6 rounded-xl shadow-md max-w-3xl w-full mx-4 max-h-[90vh] flex flex-col gap-3 text-left text-gray-800">
+        <h2 className="text-xl font-semibold truncate">{file.name}</h2>
+
+        {notices.map((notice) => (
+          <p key={notice} className="text-sm bg-amber-50 border border-amber-300 rounded-md p-2">
+            {notice}
+          </p>
+        ))}
+
+        <div className="flex gap-2">
+          <button className={tabClass(mode === "read")} onClick={() => setMode("read")}>
+            {t("uploader.files.reviewRead")}
+          </button>
+          <button className={tabClass(mode === "edit")} onClick={() => setMode("edit")}>
+            {t("uploader.files.reviewEdit")}
+          </button>
+        </div>
+
+        {mode === "read" ? (
+          <div className="file-read overflow-y-auto min-h-48 flex-1 text-sm border border-gray-200 rounded-md p-3">
+            {isMarkdownRead(file) ? (
+              <MarkdownRenderer content={withPageHeadings(draft, t)} gfm />
+            ) : (
+              <p className="whitespace-pre-wrap">{draft}</p>
+            )}
+          </div>
+        ) : (
+          <textarea
+            aria-label={t("uploader.files.reviewEdit")}
+            className="min-h-48 h-[50vh] w-full text-sm border border-gray-200 rounded-md p-3 font-mono"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+          />
+        )}
+
+        <p className="text-xs text-gray-500">{t("uploader.files.reviewEditNote")}</p>
+
+        <div className="flex justify-end gap-2">
+          <button
+            className="bg-gray-200 text-gray-800 px-4 py-2 rounded-md cursor-pointer"
+            onClick={onClose}
+          >
+            {t("uploader.files.reviewClose")}
+          </button>
+          <button
+            className="bg-blue-600 text-white px-4 py-2 rounded-md cursor-pointer disabled:opacity-50"
+            disabled={!canSave}
+            onClick={save}
+          >
+            {t("uploader.files.reviewSave")}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+/**
+ * Opens the review of a file. The label asks for attention only when the read
+ * has something to check, so an ordinary PDF stays one quiet click away.
+ */
+export const FileReviewButton = ({
+  file,
+  label,
+  className = "",
+}: {
+  file: ParsedFile
+  label?: string
+  className?: string
+}) => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const needsReview = readNotices(file, t).length > 0
+
+  return (
+    <>
+      <button
+        className={"cursor-pointer " + (needsReview ? "font-semibold " : "") + className}
+        onClick={() => setIsOpen(true)}
+      >
+        {label ?? t(needsReview ? "uploader.files.reviewText" : "uploader.files.viewText")}
+      </button>
+      {isOpen && <FileReviewModal file={file} onClose={() => setIsOpen(false)} />}
+    </>
+  )
+}

package/src/creator/src/components/FileUploader.test.tsx

@@ -0,0 +1,229 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import axios from "axios";
+import toast from "react-hot-toast";
+import "../i18n";
+import FileUploader from "./FileUploader";
+import useStore from "../utils/store";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+vi.mock("axios");
+vi.mock("react-hot-toast");
+
+const post = vi.mocked(axios.post);
+
+const pdf = (name = "seed.pdf") =>
+  new File(["%PDF"], name, { type: "application/pdf" });
+
+const picker = () =>
+  document.querySelector('input[type="file"]') as HTMLInputElement;
+
+const choose = async (...files: File[]) => {
+  await act(async () => {
+    fireEvent.change(picker(), { target: { files } });
+  });
+};
+
+const renderUploader = () =>
+  render(
+    <TooltipProvider>
+      <FileUploader styledAs="card" />
+    </TooltipProvider>
+  );
+
+const files = () => useStore.getState().uploadedFiles;
+
+beforeEach(() => {
+  vi.resetAllMocks();
+  useStore.getState().setUploadedFiles([]);
+  post.mockResolvedValue({ status: 202, data: { status: "PROCESSING" } });
+});
+
+afterEach(cleanup);
+
+describe("FileUploader", () => {
+  it("adds the file as being read and sends the interface language", async () => {
+    renderUploader();
+
+    await choose(pdf());
+
+    expect(files()).toMatchObject([{ name: "seed.pdf", status: "PROCESSING" }]);
+    const form = post.mock.calls[0][1] as FormData;
+    expect(form.get("lang")).toBe("en");
+  });
+
+  it("replaces a file with the same name instead of adding a second one", async () => {
+    useStore.getState().setUploadedFiles([
+      { name: "seed.pdf", text: "old", status: "SUCCESS", notificationId: "old" },
+      { name: "other.pdf", text: "keep", status: "SUCCESS", notificationId: "other" },
+    ]);
+    renderUploader();
+
+    await choose(pdf());
+
+    expect(files().map((file) => file.name)).toEqual(["other.pdf", "seed.pdf"]);
+    expect(files()[1]).toMatchObject({ status: "PROCESSING", text: "" });
+  });
+
+  it("keeps a read that finished while another file was uploading", async () => {
+    useStore.getState().setUploadedFiles([
+      { name: "first.pdf", text: "", status: "PROCESSING", notificationId: "1" },
+    ]);
+    let finishUpload: (value: unknown) => void = () => {};
+    post.mockReturnValue(new Promise((resolve) => (finishUpload = resolve)) as never);
+    renderUploader();
+
+    await choose(pdf("second.pdf"));
+    act(() =>
+      useStore.getState().setUploadedFiles([
+        { name: "first.pdf", text: "Done", status: "SUCCESS", notificationId: "1" },
+      ])
+    );
+    await act(async () => {
+      finishUpload({ status: 202, data: { status: "PROCESSING" } });
+    });
+
+    expect(files()).toMatchObject([
+      { name: "first.pdf", status: "SUCCESS", text: "Done" },
+      { name: "second.pdf", status: "PROCESSING" },
+    ]);
+  });
+
+  it("does not lose the current file when its replacement is rejected", async () => {
+    useStore.getState().setUploadedFiles([
+      { name: "seed.pdf", text: "good", status: "SUCCESS", notificationId: "1" },
+    ]);
+    post.mockRejectedValue({ response: { status: 400, data: { detail: "Nope" } } });
+    renderUploader();
+
+    await choose(pdf());
+
+    expect(files()).toMatchObject([{ text: "good", status: "SUCCESS" }]);
+  });
+
+  it("shows the reason rigobot gives for rejecting a file", async () => {
+    post.mockRejectedValue({
+      response: { status: 400, data: { detail: "Este PDF tiene contraseña." } },
+    });
+    renderUploader();
+
+    await choose(pdf());
+
+    expect(toast.error).toHaveBeenCalledWith(
+      "❌ Este PDF tiene contraseña.",
+      expect.anything()
+    );
+    expect(files()).toEqual([]);
+  });
+
+  describe("a PDF that is mostly images", () => {
+    const needsConfirmation = (imagePages = 8) => ({
+      status: 200,
+      data: {
+        status: "NEEDS_CONFIRMATION",
+        report: { total_pages: 12, image_pages: imagePages, blank_pages: 0 },
+        ai_limit: 15,
+      },
+    });
+
+    const finishButton = () =>
+      screen.getByRole("button", { name: "🚀 Finish" }) as HTMLButtonElement;
+
+    beforeEach(() => {
+      post.mockResolvedValueOnce(needsConfirmation());
+    });
+
+    it("asks first, using no AI and blocking Finish until the user chooses", async () => {
+      renderUploader();
+
+      await choose(pdf());
+
+      const form = post.mock.calls[0][1] as FormData;
+      expect(form.get("preflight")).toBe("true");
+      expect(
+        screen.getByText("This PDF is saved almost entirely as images (8 of 12 pages).")
+      ).toBeTruthy();
+      expect(files()).toEqual([]);
+      expect(finishButton().disabled).toBe(true);
+    });
+
+    it("sends the same file again without the check when the user accepts", async () => {
+      renderUploader();
+      await choose(pdf());
+
+      await act(async () => {
+        fireEvent.click(screen.getByText("Use this PDF"));
+      });
+
+      expect(post).toHaveBeenCalledTimes(2);
+      const form = post.mock.calls[1][1] as FormData;
+      expect(form.get("preflight")).toBeNull();
+      expect((form.get("file") as File).name).toBe("seed.pdf");
+      expect(files()).toMatchObject([{ name: "seed.pdf", status: "PROCESSING" }]);
+      expect(screen.queryByText("Use this PDF")).toBeNull();
+    });
+
+    it("opens the file picker and drops the upload for another version", async () => {
+      renderUploader();
+      await choose(pdf());
+      const click = vi.spyOn(picker(), "click");
+
+      fireEvent.click(screen.getByText("Upload another version"));
+
+      expect(click).toHaveBeenCalled();
+      expect(screen.queryByText("Use this PDF")).toBeNull();
+      expect(post).toHaveBeenCalledTimes(1);
+      expect(files()).toEqual([]);
+    });
+
+    it("clears the question when a file with the same name is accepted", async () => {
+      renderUploader();
+      await choose(pdf());
+
+      await choose(pdf());
+
+      expect(screen.queryByText("Use this PDF")).toBeNull();
+      expect(files()).toMatchObject([{ name: "seed.pdf", status: "PROCESSING" }]);
+    });
+  });
+
+  it("warns when a scan goes over the reading limit", async () => {
+    post.mockResolvedValueOnce({
+      status: 200,
+      data: {
+        status: "NEEDS_CONFIRMATION",
+        report: { total_pages: 30, image_pages: 30, blank_pages: 0 },
+        ai_limit: 15,
+      },
+    });
+    renderUploader();
+
+    await choose(pdf());
+
+    expect(screen.getByText("We will only read the first 15 pages.")).toBeTruthy();
+  });
+
+  it("reads straight away from the sidebar, which has no room to ask", async () => {
+    render(
+      <TooltipProvider>
+        <FileUploader />
+      </TooltipProvider>
+    );
+
+    await choose(pdf());
+
+    const form = post.mock.calls[0][1] as FormData;
+    expect(form.get("preflight")).toBeNull();
+  });
+
+  it("survives a network failure and is ready for another try", async () => {
+    post.mockRejectedValue(new Error("Network Error"));
+    renderUploader();
+
+    await choose(pdf());
+
+    expect(toast.error).toHaveBeenCalled();
+    expect(screen.queryByText("Processing...")).toBeNull();
+    expect(picker().value).toBe("");
+  });
+});