Update web/src/components/ChatArea.tsx

web/src/components/ChatArea.tsx

@@ -50,9 +50,6 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { SmartReview } from "./SmartReview";
 import clareAvatar from "../assets/dfe44dab3ad8cd93953eac4a3e68bd1a5f999653.png";
 
-// ✅ NEW: object URL cache for image thumbnails
-import { useObjectUrlCache } from "../lib/useObjectUrlCache";
-
 type ReviewEventType = "send_message" | "review_topic" | "review_all";
 
 interface ChatAreaProps {
@@ -398,11 +395,7 @@ export function ChatArea({
 
       return chat.messages.every((savedMsg, idx) => {
         const currentMsg = messages[idx];
-        return (
-          savedMsg.id === currentMsg.id &&
-          savedMsg.role === currentMsg.role &&
-          savedMsg.content === currentMsg.content
-        );
+        return savedMsg.id === currentMsg.id && savedMsg.role === currentMsg.role && savedMsg.content === currentMsg.content;
       });
     });
   };
@@ -574,10 +567,7 @@ export function ChatArea({
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   };
 
-  // ✅ objectURL cache for image thumbnails (display only)
-  const cacheFiles = React.useMemo(() => uploadedFiles.map((u) => u.file), [uploadedFiles]);
-  const { getOrCreate } = useObjectUrlCache(cacheFiles);
-
+  // ✅ CHANGE 1: onRemove 改成无参，避免事件传递导致“点了没反应”
   const FileThumbnail = ({
     file,
     Icon,
@@ -591,11 +581,29 @@ export function ChatArea({
     fileInfo: { bgColor: string; type: string };
     isImage: boolean;
     onPreview: () => void;
-    onRemove: (e: React.MouseEvent) => void;
+    onRemove: () => void; // ✅ CHANGED
   }) => {
-    if (isImage) {
-      const src = getOrCreate(file);
+    const [imagePreview, setImagePreview] = useState<string | null>(null);
+    const [imageLoading, setImageLoading] = useState(true);
 
+    useEffect(() => {
+      if (!isImage) {
+        setImagePreview(null);
+        setImageLoading(false);
+        return;
+      }
+
+      setImageLoading(true);
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setImagePreview(e.target?.result as string);
+        setImageLoading(false);
+      };
+      reader.onerror = () => setImageLoading(false);
+      reader.readAsDataURL(file);
+    }, [file, isImage]);
+
+    if (isImage) {
       return (
         <div
           className="relative cursor-pointer w-16 h-16 flex-shrink-0"
@@ -604,19 +612,23 @@ export function ChatArea({
         >
           <div className="w-full h-full relative bg-card border border-border rounded-lg hover:border-primary/50 transition-colors">
             <div className="w-full h-full overflow-hidden rounded-lg absolute inset-0">
-              {src ? (
+              {imageLoading ? (
+                <div className="w-full h-full flex items-center justify-center bg-muted">
+                  <Icon className="h-5 w-5 text-muted-foreground animate-pulse" />
+                </div>
+              ) : imagePreview ? (
                 <img
-                  src={src}
+                  src={imagePreview}
                   alt={file.name}
                   className="w-full h-full object-cover"
-                  draggable={false}
                   onError={(e) => {
                     e.currentTarget.style.display = "none";
+                    setImageLoading(false);
                   }}
                 />
               ) : (
                 <div className="w-full h-full flex items-center justify-center bg-muted">
-                  <Icon className="h-5 w-5 text-muted-foreground animate-pulse" />
+                  <Icon className="h-5 w-5 text-muted-foreground" />
                 </div>
               )}
             </div>
@@ -626,7 +638,7 @@ export function ChatArea({
               className="absolute top-1 right-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm flex items-center justify-center cursor-pointer"
               onClick={(e) => {
                 e.stopPropagation();
-                onRemove(e);
+                onRemove(); // ✅ CHANGED
               }}
               style={{ zIndex: 100 }}
             >
@@ -656,7 +668,7 @@ export function ChatArea({
             className="absolute top-1 right-1 h-4 w-4 rounded-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-sm flex items-center justify-center cursor-pointer z-10"
             onClick={(e) => {
               e.stopPropagation();
-              onRemove(e);
+              onRemove(); // ✅ CHANGED
             }}
             style={{ zIndex: 10 }}
           >
@@ -961,8 +973,8 @@ export function ChatArea({
                         setSelectedFile({ file: uploadedFile.file, index });
                         setShowFileViewer(true);
                       }}
-                      onRemove={(e) => {
-                        e.stopPropagation();
+                      // ✅ CHANGE 2: 直接 set state，不传事件
+                      onRemove={() => {
                         setFileToDelete(index);
                         setShowDeleteDialog(true);
                       }}
@@ -1175,13 +1187,7 @@ export function ChatArea({
           <div className="border rounded-lg bg-muted/40 flex flex-col max-h-64">
             <div className="flex items-center justify-between p-4 sticky top-0 bg-muted/40 border-b z-10">
               <span className="text-sm font-medium">Preview</span>
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-7 px-2 text-xs gap-1.5"
-                onClick={handleCopyPreview}
-                title="Copy preview"
-              >
+              <Button variant="outline" size="sm" className="h-7 px-2 text-xs gap-1.5" onClick={handleCopyPreview} title="Copy preview">
                 <Copy className="h-3 w-3" />
                 Copy
               </Button>
@@ -1267,7 +1273,8 @@ export function ChatArea({
 
       {/* Delete File Confirmation Dialog */}
       <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <AlertDialogContent>
+        {/* ✅ CHANGE 3: 提高 z-index，确保弹窗不会被遮挡 */}
+        <AlertDialogContent className="z-[99999]" style={{ zIndex: 99999 }}>
           <AlertDialogHeader>
             <AlertDialogTitle>Delete File</AlertDialogTitle>
             <AlertDialogDescription>
@@ -1332,10 +1339,7 @@ export function ChatArea({
 
                     <div className="space-y-1">
                       <label className="text-xs text-muted-foreground">File Type</label>
-                      <Select
-                        value={pendingFile.type}
-                        onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}
-                      >
+                      <Select value={pendingFile.type} onValueChange={(value) => handlePendingFileTypeChange(index, value as FileType)}>
                         <SelectTrigger className="h-8 text-xs">
                           <SelectValue />
                         </SelectTrigger>