kunthawat/moreminimore-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload image via chat (#686)

Browse Source
This commit is contained in:
Will Chen
2025-07-22 15:45:30 -07:00
committed by GitHub
parent de73445766
commit 9edd0fa80f
16 changed files with 509 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/chat/AttachmentsList.tsx
View File

@@ -1,7 +1,8 @@
import { FileText, X } from "lucide-react";
import { FileText, X, MessageSquare, Upload } from "lucide-react";
import type { FileAttachment } from "@/ipc/ipc_types";
interface AttachmentsListProps {
attachments: File[];
attachments: FileAttachment[];
onRemove: (index: number) => void;
}
@@ -13,40 +14,50 @@ export function AttachmentsList({
return (
<div className="px-2 pt-2 flex flex-wrap gap-1">
{attachments.map((file, index) => (
{attachments.map((attachment, index) => (
<div
key={index}
className="flex items-center bg-muted rounded-md px-2 py-1 text-xs gap-1"
title={`${file.name} (${(file.size / 1024).toFixed(1)}KB)`}
title={`${attachment.file.name} (${(attachment.file.size / 1024).toFixed(1)}KB)`}
>
{file.type.startsWith("image/") ? (
<div className="relative group">
<img
src={URL.createObjectURL(file)}
alt={file.name}
className="w-5 h-5 object-cover rounded"
onLoad={(e) =>
URL.revokeObjectURL((e.target as HTMLImageElement).src)
}
onError={(e) =>
URL.revokeObjectURL((e.target as HTMLImageElement).src)
}
/>
<div className="absolute hidden group-hover:block top-6 left-0 z-10">
<div className="flex items-center gap-1">
{attachment.type === "upload-to-codebase" ? (
<Upload size={12} className="text-blue-600" />
) : (
<MessageSquare size={12} className="text-green-600" />
)}
{attachment.file.type.startsWith("image/") ? (
<div className="relative group">
<img
src={URL.createObjectURL(file)}
alt={file.name}
className="max-w-[200px] max-h-[200px] object-contain bg-white p-1 rounded shadow-lg"
src={URL.createObjectURL(attachment.file)}
alt={attachment.file.name}
className="w-5 h-5 object-cover rounded"
onLoad={(e) =>
URL.revokeObjectURL((e.target as HTMLImageElement).src)
}
onError={(e) =>
URL.revokeObjectURL((e.target as HTMLImageElement).src)
}
/>
<div className="absolute hidden group-hover:block top-6 left-0 z-10">
<img
src={URL.createObjectURL(attachment.file)}
alt={attachment.file.name}
className="max-w-[200px] max-h-[200px] object-contain bg-white p-1 rounded shadow-lg"
onLoad={(e) =>
URL.revokeObjectURL((e.target as HTMLImageElement).src)
}
onError={(e) =>
URL.revokeObjectURL((e.target as HTMLImageElement).src)
}
/>
</div>
</div>
</div>
) : (
<FileText size={12} />
)}
<span className="truncate max-w-[120px]">{file.name}</span>
) : (
<FileText size={12} />
)}
</div>
<span className="truncate max-w-[120px]">{attachment.file.name}</span>
<button
onClick={() => onRemove(index)}
className="hover:bg-muted-foreground/20 rounded-full p-0.5"