feat(chat): implement file upload support with staging and media handle (#77)
This commit is contained in:
Haze
@@ -1,65 +1,76 @@
|
||||
/**
|
||||
* Chat Input Component
|
||||
* Textarea with send button and image upload support.
|
||||
* Textarea with send button and universal file upload support.
|
||||
* Enter to send, Shift+Enter for new line.
|
||||
* Supports: file picker, clipboard paste, drag & drop.
|
||||
* Supports: native file picker, clipboard paste, drag & drop.
|
||||
* Files are staged to disk via IPC — only lightweight path references
|
||||
* are sent with the message (no base64 over WebSocket).
|
||||
*/
|
||||
import { useState, useRef, useEffect, useCallback } from 'react';
|
||||
import { Send, Square, X } from 'lucide-react';
|
||||
import { Send, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
export interface ChatAttachment {
|
||||
type: 'image';
|
||||
mimeType: string;
|
||||
// ── Types ────────────────────────────────────────────────────────
|
||||
|
||||
export interface FileAttachment {
|
||||
id: string;
|
||||
fileName: string;
|
||||
content: string; // base64
|
||||
preview: string; // data URL for display
|
||||
mimeType: string;
|
||||
fileSize: number;
|
||||
stagedPath: string; // disk path for gateway
|
||||
preview: string | null; // data URL for images, null for others
|
||||
status: 'staging' | 'ready' | 'error';
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface ChatInputProps {
|
||||
onSend: (text: string, attachments?: ChatAttachment[]) => void;
|
||||
onSend: (text: string, attachments?: FileAttachment[]) => void;
|
||||
onStop?: () => void;
|
||||
disabled?: boolean;
|
||||
sending?: boolean;
|
||||
}
|
||||
|
||||
const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
|
||||
const MAX_IMAGE_SIZE = 10 * 1024 * 1024; // 10MB
|
||||
// ── Helpers ──────────────────────────────────────────────────────
|
||||
|
||||
function fileToAttachment(file: File): Promise<ChatAttachment> {
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||||
}
|
||||
|
||||
function FileIcon({ mimeType, className }: { mimeType: string; className?: string }) {
|
||||
if (mimeType.startsWith('video/')) return <Film className={className} />;
|
||||
if (mimeType.startsWith('audio/')) return <Music className={className} />;
|
||||
if (mimeType.startsWith('text/') || mimeType === 'application/json' || mimeType === 'application/xml') return <FileText className={className} />;
|
||||
if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive') || mimeType.includes('tar') || mimeType.includes('rar') || mimeType.includes('7z')) return <FileArchive className={className} />;
|
||||
if (mimeType === 'application/pdf') return <FileText className={className} />;
|
||||
return <File className={className} />;
|
||||
}
|
||||
|
||||
/**
|
||||
* Read a browser File object as base64 string (without the data URL prefix).
|
||||
*/
|
||||
function readFileAsBase64(file: globalThis.File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
|
||||
reject(new Error(`Unsupported image type: ${file.type}`));
|
||||
return;
|
||||
}
|
||||
if (file.size > MAX_IMAGE_SIZE) {
|
||||
reject(new Error('Image too large (max 10MB)'));
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const dataUrl = reader.result as string;
|
||||
// Extract base64 content (remove "data:image/png;base64," prefix)
|
||||
const base64 = dataUrl.split(',')[1];
|
||||
resolve({
|
||||
type: 'image',
|
||||
mimeType: file.type,
|
||||
fileName: file.name,
|
||||
content: base64,
|
||||
preview: dataUrl,
|
||||
});
|
||||
resolve(base64);
|
||||
};
|
||||
reader.onerror = () => reject(new Error('Failed to read file'));
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
// ── Component ────────────────────────────────────────────────────
|
||||
|
||||
export function ChatInput({ onSend, onStop, disabled = false, sending = false }: ChatInputProps) {
|
||||
const [input, setInput] = useState('');
|
||||
const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
|
||||
const [attachments, setAttachments] = useState<FileAttachment[]>([]);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const isComposingRef = useRef(false);
|
||||
|
||||
// Auto-resize textarea
|
||||
@@ -70,28 +81,128 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
}
|
||||
}, [input]);
|
||||
|
||||
const addFiles = useCallback(async (files: FileList | File[]) => {
|
||||
const fileArray = Array.from(files).filter((f) => ACCEPTED_IMAGE_TYPES.includes(f.type));
|
||||
if (fileArray.length === 0) return;
|
||||
// ── File staging via native dialog ─────────────────────────────
|
||||
|
||||
const pickFiles = useCallback(async () => {
|
||||
try {
|
||||
const newAttachments = await Promise.all(fileArray.map(fileToAttachment));
|
||||
setAttachments((prev) => [...prev, ...newAttachments]);
|
||||
const result = await window.electron.ipcRenderer.invoke('dialog:open', {
|
||||
properties: ['openFile', 'multiSelections'],
|
||||
}) as { canceled: boolean; filePaths?: string[] };
|
||||
if (result.canceled || !result.filePaths?.length) return;
|
||||
|
||||
// Add placeholder entries immediately
|
||||
const tempIds: string[] = [];
|
||||
for (const filePath of result.filePaths) {
|
||||
const tempId = crypto.randomUUID();
|
||||
tempIds.push(tempId);
|
||||
const fileName = filePath.split('/').pop() || filePath.split('\\').pop() || 'file';
|
||||
setAttachments(prev => [...prev, {
|
||||
id: tempId,
|
||||
fileName,
|
||||
mimeType: '',
|
||||
fileSize: 0,
|
||||
stagedPath: '',
|
||||
preview: null,
|
||||
status: 'staging' as const,
|
||||
}]);
|
||||
}
|
||||
|
||||
// Stage all files via IPC
|
||||
const staged = await window.electron.ipcRenderer.invoke(
|
||||
'file:stage',
|
||||
result.filePaths,
|
||||
) as Array<{
|
||||
id: string;
|
||||
fileName: string;
|
||||
mimeType: string;
|
||||
fileSize: number;
|
||||
stagedPath: string;
|
||||
preview: string | null;
|
||||
}>;
|
||||
|
||||
// Update each placeholder with real data
|
||||
setAttachments(prev => {
|
||||
let updated = [...prev];
|
||||
for (let i = 0; i < tempIds.length; i++) {
|
||||
const tempId = tempIds[i];
|
||||
const data = staged[i];
|
||||
if (data) {
|
||||
updated = updated.map(a =>
|
||||
a.id === tempId
|
||||
? { ...data, status: 'ready' as const }
|
||||
: a,
|
||||
);
|
||||
} else {
|
||||
updated = updated.map(a =>
|
||||
a.id === tempId
|
||||
? { ...a, status: 'error' as const, error: 'Staging failed' }
|
||||
: a,
|
||||
);
|
||||
}
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Failed to process image:', err);
|
||||
console.error('Failed to pick files:', err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const removeAttachment = useCallback((index: number) => {
|
||||
setAttachments((prev) => prev.filter((_, i) => i !== index));
|
||||
// ── Stage browser File objects (paste / drag-drop) ─────────────
|
||||
|
||||
const stageBufferFiles = useCallback(async (files: globalThis.File[]) => {
|
||||
for (const file of files) {
|
||||
const tempId = crypto.randomUUID();
|
||||
setAttachments(prev => [...prev, {
|
||||
id: tempId,
|
||||
fileName: file.name,
|
||||
mimeType: file.type || 'application/octet-stream',
|
||||
fileSize: file.size,
|
||||
stagedPath: '',
|
||||
preview: null,
|
||||
status: 'staging' as const,
|
||||
}]);
|
||||
|
||||
try {
|
||||
const base64 = await readFileAsBase64(file);
|
||||
const staged = await window.electron.ipcRenderer.invoke('file:stageBuffer', {
|
||||
base64,
|
||||
fileName: file.name,
|
||||
mimeType: file.type || 'application/octet-stream',
|
||||
}) as {
|
||||
id: string;
|
||||
fileName: string;
|
||||
mimeType: string;
|
||||
fileSize: number;
|
||||
stagedPath: string;
|
||||
preview: string | null;
|
||||
};
|
||||
setAttachments(prev => prev.map(a =>
|
||||
a.id === tempId ? { ...staged, status: 'ready' as const } : a,
|
||||
));
|
||||
} catch (err) {
|
||||
setAttachments(prev => prev.map(a =>
|
||||
a.id === tempId
|
||||
? { ...a, status: 'error' as const, error: String(err) }
|
||||
: a,
|
||||
));
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const canSend = (input.trim() || attachments.length > 0) && !disabled && !sending;
|
||||
// ── Attachment management ──────────────────────────────────────
|
||||
|
||||
const removeAttachment = useCallback((id: string) => {
|
||||
setAttachments(prev => prev.filter(a => a.id !== id));
|
||||
}, []);
|
||||
|
||||
const allReady = attachments.length === 0 || attachments.every(a => a.status === 'ready');
|
||||
const canSend = (input.trim() || attachments.length > 0) && allReady && !disabled && !sending;
|
||||
const canStop = sending && !disabled && !!onStop;
|
||||
|
||||
const handleSend = useCallback(() => {
|
||||
if (!canSend) return;
|
||||
onSend(input.trim(), attachments.length > 0 ? attachments : undefined);
|
||||
const readyAttachments = attachments.filter(a => a.status === 'ready');
|
||||
onSend(input.trim(), readyAttachments.length > 0 ? readyAttachments : undefined);
|
||||
setInput('');
|
||||
setAttachments([]);
|
||||
if (textareaRef.current) {
|
||||
@@ -118,25 +229,25 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
[handleSend],
|
||||
);
|
||||
|
||||
// Handle paste (Ctrl/Cmd+V with image)
|
||||
// Handle paste (Ctrl/Cmd+V with files)
|
||||
const handlePaste = useCallback(
|
||||
(e: React.ClipboardEvent) => {
|
||||
const items = e.clipboardData?.items;
|
||||
if (!items) return;
|
||||
|
||||
const imageFiles: File[] = [];
|
||||
const pastedFiles: globalThis.File[] = [];
|
||||
for (const item of Array.from(items)) {
|
||||
if (item.type.startsWith('image/')) {
|
||||
if (item.kind === 'file') {
|
||||
const file = item.getAsFile();
|
||||
if (file) imageFiles.push(file);
|
||||
if (file) pastedFiles.push(file);
|
||||
}
|
||||
}
|
||||
if (imageFiles.length > 0) {
|
||||
if (pastedFiles.length > 0) {
|
||||
e.preventDefault();
|
||||
addFiles(imageFiles);
|
||||
stageBufferFiles(pastedFiles);
|
||||
}
|
||||
},
|
||||
[addFiles],
|
||||
[stageBufferFiles],
|
||||
);
|
||||
|
||||
// Handle drag & drop
|
||||
@@ -159,11 +270,11 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragOver(false);
|
||||
if (e.dataTransfer?.files) {
|
||||
addFiles(e.dataTransfer.files);
|
||||
if (e.dataTransfer?.files?.length) {
|
||||
stageBufferFiles(Array.from(e.dataTransfer.files));
|
||||
}
|
||||
},
|
||||
[addFiles],
|
||||
[stageBufferFiles],
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -174,26 +285,15 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Image Previews */}
|
||||
{/* Attachment Previews */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="flex gap-2 mb-2 flex-wrap">
|
||||
{attachments.map((att, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="relative group w-16 h-16 rounded-lg overflow-hidden border border-border"
|
||||
>
|
||||
<img
|
||||
src={att.preview}
|
||||
alt={att.fileName}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<button
|
||||
onClick={() => removeAttachment(idx)}
|
||||
className="absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
{attachments.map((att) => (
|
||||
<AttachmentPreview
|
||||
key={att.id}
|
||||
attachment={att}
|
||||
onRemove={() => removeAttachment(att.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -201,19 +301,17 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
{/* Input Row */}
|
||||
<div className={`flex items-end gap-2 ${dragOver ? 'ring-2 ring-primary rounded-lg' : ''}`}>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept={ACCEPTED_IMAGE_TYPES.join(',')}
|
||||
multiple
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
if (e.target.files) {
|
||||
addFiles(e.target.files);
|
||||
e.target.value = '';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/* Attach Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="shrink-0 h-[44px] w-[44px]"
|
||||
onClick={pickFiles}
|
||||
disabled={disabled || sending}
|
||||
title="Attach files"
|
||||
>
|
||||
<Paperclip className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{/* Textarea */}
|
||||
<div className="flex-1 relative">
|
||||
@@ -256,3 +354,63 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Attachment Preview ───────────────────────────────────────────
|
||||
|
||||
function AttachmentPreview({
|
||||
attachment,
|
||||
onRemove,
|
||||
}: {
|
||||
attachment: FileAttachment;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const isImage = attachment.mimeType.startsWith('image/') && attachment.preview;
|
||||
|
||||
return (
|
||||
<div className="relative group rounded-lg overflow-hidden border border-border">
|
||||
{isImage ? (
|
||||
// Image thumbnail
|
||||
<div className="w-16 h-16">
|
||||
<img
|
||||
src={attachment.preview!}
|
||||
alt={attachment.fileName}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
// Generic file card
|
||||
<div className="flex items-center gap-2 px-3 py-2 bg-muted/50 max-w-[200px]">
|
||||
<FileIcon mimeType={attachment.mimeType} className="h-5 w-5 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 overflow-hidden">
|
||||
<p className="text-xs font-medium truncate">{attachment.fileName}</p>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{attachment.fileSize > 0 ? formatFileSize(attachment.fileSize) : '...'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Staging overlay */}
|
||||
{attachment.status === 'staging' && (
|
||||
<div className="absolute inset-0 bg-black/40 flex items-center justify-center">
|
||||
<Loader2 className="h-4 w-4 text-white animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error overlay */}
|
||||
{attachment.status === 'error' && (
|
||||
<div className="absolute inset-0 bg-destructive/20 flex items-center justify-center">
|
||||
<span className="text-[10px] text-destructive font-medium px-1">Error</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Remove button */}
|
||||
<button
|
||||
onClick={onRemove}
|
||||
className="absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
* with markdown, thinking sections, images, and tool cards.
|
||||
*/
|
||||
import { useState, useCallback, memo } from 'react';
|
||||
import { User, Sparkles, Copy, Check, ChevronDown, ChevronRight, Wrench } from 'lucide-react';
|
||||
import { User, Sparkles, Copy, Check, ChevronDown, ChevronRight, Wrench, FileText, Film, Music, FileArchive, File } from 'lucide-react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { RawMessage } from '@/stores/chat';
|
||||
import type { RawMessage, AttachedFileMeta } from '@/stores/chat';
|
||||
import { extractText, extractThinking, extractImages, extractToolUse, formatTimestamp } from './message-utils';
|
||||
|
||||
interface ChatMessageProps {
|
||||
@@ -43,11 +43,13 @@ export const ChatMessage = memo(function ChatMessage({
|
||||
const visibleThinking = showThinking ? thinking : null;
|
||||
const visibleTools = showThinking ? tools : [];
|
||||
|
||||
const attachedFiles = message._attachedFiles || [];
|
||||
|
||||
// Never render tool result messages in chat UI
|
||||
if (isToolResult) return null;
|
||||
|
||||
// Don't render empty messages
|
||||
if (!hasText && !visibleThinking && images.length === 0 && visibleTools.length === 0) return null;
|
||||
if (!hasText && !visibleThinking && images.length === 0 && visibleTools.length === 0 && attachedFiles.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -103,7 +105,7 @@ export const ChatMessage = memo(function ChatMessage({
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Images */}
|
||||
{/* Images (from assistant/channel content blocks) */}
|
||||
{images.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{images.map((img, i) => (
|
||||
@@ -116,6 +118,24 @@ export const ChatMessage = memo(function ChatMessage({
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File attachments (user-uploaded files) */}
|
||||
{attachedFiles.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{attachedFiles.map((file, i) => (
|
||||
file.mimeType.startsWith('image/') && file.preview ? (
|
||||
<img
|
||||
key={i}
|
||||
src={file.preview}
|
||||
alt={file.fileName}
|
||||
className="max-w-xs max-h-48 rounded-lg border"
|
||||
/>
|
||||
) : (
|
||||
<FileCard key={i} file={file} />
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -292,6 +312,38 @@ function ThinkingBlock({ content }: { content: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ── File Card (for user-uploaded non-image files) ───────────────
|
||||
|
||||
function formatFileSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
||||
}
|
||||
|
||||
function FileIcon({ mimeType, className }: { mimeType: string; className?: string }) {
|
||||
if (mimeType.startsWith('video/')) return <Film className={className} />;
|
||||
if (mimeType.startsWith('audio/')) return <Music className={className} />;
|
||||
if (mimeType.startsWith('text/') || mimeType === 'application/json' || mimeType === 'application/xml') return <FileText className={className} />;
|
||||
if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive') || mimeType.includes('tar') || mimeType.includes('rar') || mimeType.includes('7z')) return <FileArchive className={className} />;
|
||||
if (mimeType === 'application/pdf') return <FileText className={className} />;
|
||||
return <File className={className} />;
|
||||
}
|
||||
|
||||
function FileCard({ file }: { file: AttachedFileMeta }) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-border px-3 py-2 bg-muted/30 max-w-[220px]">
|
||||
<FileIcon mimeType={file.mimeType} className="h-5 w-5 shrink-0 text-muted-foreground" />
|
||||
<div className="min-w-0 overflow-hidden">
|
||||
<p className="text-xs font-medium truncate">{file.fileName}</p>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
{file.fileSize > 0 ? formatFileSize(file.fileSize) : 'File'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tool Card ───────────────────────────────────────────────────
|
||||
|
||||
function ToolCard({ name, input }: { name: string; input: unknown }) {
|
||||
|
||||
Reference in New Issue
Block a user