+ {attachments.files.map((file) => {
+ const isImage = file.mediaType?.startsWith('image/');
+ return (
+
+ {isImage && file.url && (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ )}
+
+ {file.filename || 'file'}
+
+
+
+ );
+ })}
+
+ );
+}
+
export function MessageInput({
onSend,
onCommand,
@@ -351,12 +479,38 @@ export function MessageInput({
}
}, [fetchFiles, fetchSkills, popoverMode, closePopover]);
- const handleSubmit = useCallback(async (_msg: { text: string; files: unknown[] }, e: FormEvent
@@ -204,11 +229,11 @@ export function MessageItem({ message }: MessageItemProps) {
)}
{/* Text content */}
- {text && (
+ {displayText && (
isUser ? (
- {text}
+ {displayText}
)
)}
@@ -217,7 +242,7 @@ export function MessageItem({ message }: MessageItemProps) {
{
const {
prompt,
@@ -141,6 +167,7 @@ export function streamClaude(options: ClaudeStreamOptions): ReadableStream({
@@ -339,8 +366,61 @@ export function streamClaude(options: ClaudeStreamOptions): ReadableStream 0) {
+ // Allowed image types for Claude multimodal: JPEG, PNG, GIF, WebP; max 5MB each
+ const allowedImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+ const maxImageSize = 5 * 1024 * 1024;
+ const imageFiles = files.filter(f =>
+ isImageFile(f.type) && allowedImageTypes.includes(f.type) && f.size <= maxImageSize
+ );
+ const nonImageFiles = files.filter(f => !isImageFile(f.type));
+
+ // Save non-image files to disk so Claude's Read tool can access them
+ let fileReferences = '';
+ if (nonImageFiles.length > 0) {
+ const workDir = workingDirectory || process.cwd();
+ const savedPaths = saveUploadedFiles(nonImageFiles, workDir);
+ fileReferences = savedPaths
+ .map((p, i) => `[User attached file: ${p} (${nonImageFiles[i].name})]`)
+ .join('\n') + '\n\n';
+ }
+
+ // For image files, construct multimodal content blocks
+ if (imageFiles.length > 0) {
+ const contentBlocks: unknown[] = [];
+
+ // Add image content blocks
+ for (const img of imageFiles) {
+ // Supported: image/jpeg, image/png, image/gif, image/webp
+ const mediaType = img.type as 'image/jpeg' | 'image/png' | 'image/gif' | 'image/webp';
+ contentBlocks.push({
+ type: 'image',
+ source: {
+ type: 'base64',
+ media_type: mediaType,
+ data: img.data,
+ },
+ });
+ }
+
+ // Add text block with optional file references prepended
+ contentBlocks.push({
+ type: 'text',
+ text: fileReferences + prompt,
+ });
+
+ finalPrompt = { content: contentBlocks };
+ } else {
+ // No images, just prepend file references to the text prompt
+ finalPrompt = fileReferences + prompt;
+ }
+ }
+
const conversation = query({
- prompt,
+ prompt: finalPrompt as string,
options: queryOptions,
});
diff --git a/src/types/index.ts b/src/types/index.ts
index 28f1f38..eff9823 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -392,6 +392,30 @@ export const SETTING_KEYS = {
MAX_THINKING_TOKENS: 'max_thinking_tokens',
} as const;
+// ==========================================
+// File Attachment Types
+// ==========================================
+
+export interface FileAttachment {
+ id: string;
+ name: string;
+ type: string; // MIME type
+ size: number;
+ data: string; // base64 encoded content
+}
+
+// Check if a MIME type is an image
+export function isImageFile(type: string): boolean {
+ return type.startsWith('image/');
+}
+
+// Format bytes into human-readable size
+export function formatFileSize(bytes: number): string {
+ if (bytes < 1024) return bytes + ' B';
+ if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+ return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+}
+
// ==========================================
// Claude Client Types
// ==========================================
@@ -406,4 +430,5 @@ export interface ClaudeStreamOptions {
mcpServers?: Record;
abortController?: AbortController;
permissionMode?: string;
+ files?: FileAttachment[];
}
{text}
+ {displayText}
) : (
-
{!isUser && {timestamp}}
{!isUser && tokenUsage &&
);
diff --git a/src/lib/claude-client.ts b/src/lib/claude-client.ts
index a081f42..2a2e008 100644
--- a/src/lib/claude-client.ts
+++ b/src/lib/claude-client.ts
@@ -15,11 +15,14 @@ import type {
NotificationHookInput,
PostToolUseHookInput,
} from '@anthropic-ai/claude-agent-sdk';
-import type { ClaudeStreamOptions, SSEEvent, TokenUsage, MCPServerConfig, PermissionRequestEvent } from '@/types';
+import type { ClaudeStreamOptions, SSEEvent, TokenUsage, MCPServerConfig, PermissionRequestEvent, FileAttachment } from '@/types';
+import { isImageFile } from '@/types';
import { registerPendingPermission } from './permission-registry';
import { getSetting, getActiveProvider } from './db';
import { findClaudeBinary, findGitBash, getExpandedPath } from './platform';
import os from 'os';
+import fs from 'fs';
+import path from 'path';
let cachedClaudePath: string | null | undefined;
@@ -131,6 +134,29 @@ function extractTokenUsage(msg: SDKResultMessage): TokenUsage | null {
* Stream Claude responses using the Agent SDK.
* Returns a ReadableStream of SSE-formatted strings.
*/
+/**
+ * Save non-image file attachments to a temporary upload directory
+ * and return the file paths. The files are placed in .codepilot-uploads/
+ * under the working directory so Claude's Read tool can access them.
+ */
+function saveUploadedFiles(files: FileAttachment[], workDir: string): string[] {
+ const uploadDir = path.join(workDir, '.codepilot-uploads');
+ if (!fs.existsSync(uploadDir)) {
+ fs.mkdirSync(uploadDir, { recursive: true });
+ }
+ const savedPaths: string[] = [];
+ for (const file of files) {
+ // Sanitize filename to prevent directory traversal
+ const safeName = path.basename(file.name).replace(/[^a-zA-Z0-9._-]/g, '_');
+ const timestamp = Date.now();
+ const filePath = path.join(uploadDir, `${timestamp}-${safeName}`);
+ const buffer = Buffer.from(file.data, 'base64');
+ fs.writeFileSync(filePath, buffer);
+ savedPaths.push(filePath);
+ }
+ return savedPaths;
+}
+
export function streamClaude(options: ClaudeStreamOptions): ReadableStream