Knowledge files

"use client";
import * as React from "react";
import { KnowledgeFiles, type KnowledgeFile } from "@/components/ui/notchset/blocks/knowledge-files";

const START: KnowledgeFile[] = [
  { id: "f1", name: "Launch brief v3.pdf", size: 412_000, state: "ready", pages: 6 },
  { id: "f2", name: "Interview notes, October.docx", size: 1_840_000, state: "reading", pages: 40, read: 12 },
  { id: "f3", name: "Scanned contract.pdf", size: 8_200_000, state: "failed", reason: "Scanned pages with no text: export it with text, or paste the text in" },
];

export default function KnowledgeFilesDemo() {
  const [files, setFiles] = React.useState(START);
  /* the sample uploads in steps and reads a page every half second; the template's adapter reports real progress */
  React.useEffect(() => {
    const t = setInterval(() => {
      setFiles((fs) =>
        fs.map((f): KnowledgeFile => {
          if (f.state === "uploading") return (f.progress ?? 0) >= 100 ? { ...f, state: "reading", pages: 8, read: 0 } : { ...f, progress: (f.progress ?? 0) + 25 };
          if (f.state === "reading" && f.pages) return (f.read ?? 0) + 1 >= f.pages ? { ...f, state: "ready", read: f.pages } : { ...f, read: (f.read ?? 0) + 1 };
          return f;
        }),
      );
    }, 500);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="max-w-[520px]">
      <KnowledgeFiles
        files={files}
        cap={20}
        onAdd={(added) => setFiles((fs) => [...fs, ...added.map((f, i): KnowledgeFile => ({ id: `n${Date.now()}${i}`, name: f.name, size: f.size, state: "uploading", progress: 0 }))])}
        onRemove={(id) => setFiles((fs) => fs.filter((f) => f.id !== id))}
        onRetry={(id) => setFiles((fs) => fs.map((f): KnowledgeFile => (f.id === id ? { id: f.id, name: f.name, size: f.size, state: "uploading", progress: 0 } : f)))}
      />
    </div>
  );
}