| import { useEffect, useState } from "react"; |
| import { IconDoc } from "../lib/icons"; |
| import Badge from "./ui/Badge"; |
| import Button from "./ui/Button"; |
|
|
| export default function DocumentCard({ doc, onDelete }) { |
| const processed = doc.status === "processed"; |
| |
| |
| const [confirming, setConfirming] = useState(false); |
|
|
| useEffect(() => { |
| if (!confirming) return; |
| const t = setTimeout(() => setConfirming(false), 5000); |
| return () => clearTimeout(t); |
| }, [confirming]); |
|
|
| return ( |
| <div className="doc-card"> |
| <div className="doc-card-head"> |
| <span className="doc-icon"> |
| <IconDoc /> |
| </span> |
| <div style={{ minWidth: 0, flex: 1 }}> |
| <div className="doc-name">{doc.filename}</div> |
| <div className="doc-sub">{doc.file_type.toUpperCase()}</div> |
| {doc.error && <div className="doc-err">{doc.error}</div>} |
| </div> |
| </div> |
| <div |
| className="doc-foot" |
| onBlur={(e) => { |
| if (!e.currentTarget.contains(e.relatedTarget)) setConfirming(false); |
| }} |
| > |
| {confirming ? ( |
| <> |
| <span className="doc-confirm-msg"> |
| Delete this document and its history? |
| </span> |
| <div className="row" style={{ gap: 8 }}> |
| <Button |
| variant="danger" |
| size="sm" |
| onClick={() => { |
| setConfirming(false); |
| onDelete(doc); |
| }} |
| > |
| Confirm |
| </Button> |
| <Button variant="ghost" size="sm" onClick={() => setConfirming(false)}> |
| Cancel |
| </Button> |
| </div> |
| </> |
| ) : ( |
| <> |
| <div className="row" style={{ gap: 8 }}> |
| <Badge tone={processed ? "success" : "danger"} dot> |
| {doc.status} |
| </Badge> |
| {processed && ( |
| <span className="doc-sub">{doc.num_chunks} chunks</span> |
| )} |
| </div> |
| <Button variant="danger" size="sm" onClick={() => setConfirming(true)}> |
| Delete |
| </Button> |
| </> |
| )} |
| </div> |
| </div> |
| ); |
| } |
|
|
