Spaces:
Sleeping
Sleeping
Update web/src/components/ChatArea.tsx
Browse files
web/src/components/ChatArea.tsx
CHANGED
|
@@ -571,13 +571,14 @@ export function ChatArea({
|
|
| 571 |
if (idx >= 0) onRemoveFile(idx);
|
| 572 |
};
|
| 573 |
|
| 574 |
-
|
|
|
|
| 575 |
const allThumbFiles = React.useMemo(() => {
|
| 576 |
return [...uploadedFiles.map((u) => u.file), ...pendingFiles.map((p) => p.file)];
|
| 577 |
}, [uploadedFiles, pendingFiles]);
|
| 578 |
const { getOrCreate } = useObjectUrlCache(allThumbFiles);
|
| 579 |
|
| 580 |
-
//
|
| 581 |
const FileChip = ({
|
| 582 |
file,
|
| 583 |
index,
|
|
@@ -601,16 +602,17 @@ export function ChatArea({
|
|
| 601 |
: "File";
|
| 602 |
|
| 603 |
const thumbUrl = isImage ? getOrCreate(file) : null;
|
| 604 |
-
|
| 605 |
const handleRemove = () => {
|
| 606 |
if (source === "uploaded") {
|
| 607 |
-
|
| 608 |
-
// 或:removeUploadedByFile(file);
|
| 609 |
} else {
|
| 610 |
setPendingFiles((prev) => prev.filter((p) => fileKey(p.file) !== fileKey(file)));
|
| 611 |
}
|
| 612 |
};
|
| 613 |
|
|
|
|
|
|
|
| 614 |
return (
|
| 615 |
<div className="flex items-center gap-2 rounded-xl border border-border bg-card px-3 py-2 shadow-sm w-[320px] max-w-full">
|
| 616 |
{/* ✅ 缩略图:右侧小图(上传图片时显示) */}
|
|
|
|
| 571 |
if (idx >= 0) onRemoveFile(idx);
|
| 572 |
};
|
| 573 |
|
| 574 |
+
|
| 575 |
+
// useObjectUrlCache: for image thumbnails (uploaded + pending)
|
| 576 |
const allThumbFiles = React.useMemo(() => {
|
| 577 |
return [...uploadedFiles.map((u) => u.file), ...pendingFiles.map((p) => p.file)];
|
| 578 |
}, [uploadedFiles, pendingFiles]);
|
| 579 |
const { getOrCreate } = useObjectUrlCache(allThumbFiles);
|
| 580 |
|
| 581 |
+
// NEW: a compact "chip" UI (the one with left X)
|
| 582 |
const FileChip = ({
|
| 583 |
file,
|
| 584 |
index,
|
|
|
|
| 602 |
: "File";
|
| 603 |
|
| 604 |
const thumbUrl = isImage ? getOrCreate(file) : null;
|
| 605 |
+
|
| 606 |
const handleRemove = () => {
|
| 607 |
if (source === "uploaded") {
|
| 608 |
+
removeUploadedByFile(file);
|
|
|
|
| 609 |
} else {
|
| 610 |
setPendingFiles((prev) => prev.filter((p) => fileKey(p.file) !== fileKey(file)));
|
| 611 |
}
|
| 612 |
};
|
| 613 |
|
| 614 |
+
|
| 615 |
+
|
| 616 |
return (
|
| 617 |
<div className="flex items-center gap-2 rounded-xl border border-border bg-card px-3 py-2 shadow-sm w-[320px] max-w-full">
|
| 618 |
{/* ✅ 缩略图:右侧小图(上传图片时显示) */}
|