feat(chat): Add drag & drop file attachment with Shift key guidance

Implement drag-and-drop file attachment functionality for the chat input.

Features:
- Drag & drop support for images and general files
- Image files saved to .claude/claude-code-chat-images/
- General files saved to .claude/claude-code-chat-files/
- Automatic filename sanitization (special chars → underscores)
- .gitignore auto-creation for temp directories
- Visual feedback with border highlight on dragover
- Real-time tooltip guidance for Shift key requirement
  - Without Shift: "⌨️ Hold Shift key to attach"
  - With Shift: "📎 Release to attach file"

Technical details:
- VS Code webview requires Shift key for file path insertion (native limitation)
- Cannot override this behavior due to Electron layer interception
- Tooltip provides clear UX guidance for the platform constraint

Changes:
- src/script.ts: Add drag/drop handlers, tooltip functions, filePath handler
- src/extension.ts: Add createFile message handler and _createFile method
- src/ui-styles.ts: Add .drag-over and .drag-tooltip styles
- package.json: Bump version to 1.0.8

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: doscode-kr

package.json

@@ -2,7 +2,7 @@
   "name": "claude-code-chat",
   "displayName": "Chat for Claude Code",
   "description": "Beautiful Claude Code Chat Interface for VS Code",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "publisher": "AndrePimenta",
   "author": "Andre Pimenta",
   "repository": {

src/extension.ts

@@ -300,6 +300,9 @@ class ClaudeChatProvider {
 			case 'createImageFile':
 				this._createImageFile(message.imageData, message.imageType);
 				return;
+		case 'createFile':
+			this._createFile(message.fileData, message.fileName, message.fileType);
+			return;
 			case 'permissionResponse':
 				this._handlePermissionResponse(message.id, message.approved, message.alwaysAllow);
 				return;
@@ -2387,6 +2390,60 @@ class ClaudeChatProvider {
 		}
 	}
 
+	private async _createFile(fileData: string, fileName: string, fileType: string) {
+		try {
+			const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
+			if (!workspaceFolder) { return; }
+
+			// Extract base64 data from data URL
+			const base64Data = fileData.split(',')[1];
+			const buffer = Buffer.from(base64Data, 'base64');
+
+			// Sanitize filename: allow only alphanumeric, dots, and hyphens
+			const sanitizedName = fileName.replace(/[^a-zA-Z0-9.-]/g, '_');
+
+			// Create unique filename with timestamp
+			const timestamp = Date.now();
+			const uniqueFileName = `file_${timestamp}_${sanitizedName}`;
+
+			// Create files folder in workspace .claude directory
+			const filesDir = vscode.Uri.joinPath(
+				workspaceFolder.uri,
+				'.claude',
+				'claude-code-chat-files'
+			);
+			await vscode.workspace.fs.createDirectory(filesDir);
+
+			// Create .gitignore to ignore all files
+			const gitignorePath = vscode.Uri.joinPath(filesDir, '.gitignore');
+			try {
+				await vscode.workspace.fs.stat(gitignorePath);
+			} catch {
+				// .gitignore doesn't exist, create it
+				const gitignoreContent = new TextEncoder().encode('*\n');
+				await vscode.workspace.fs.writeFile(gitignorePath, gitignoreContent);
+			}
+
+			// Create the file
+			const filePath = vscode.Uri.joinPath(filesDir, uniqueFileName);
+			await vscode.workspace.fs.writeFile(filePath, buffer);
+
+			// Send the file path back to webview
+			this._postMessage({
+				type: 'filePath',
+				data: {
+					filePath: filePath.fsPath,
+					originalName: fileName
+				}
+			});
+
+			console.log(`Created file: ${uniqueFileName}`);
+		} catch (error) {
+			console.error('Error creating file:', error);
+			vscode.window.showErrorMessage('Failed to create file');
+		}
+	}
+
 	public dispose() {
 		if (this._panel) {
 			this._panel.dispose();

src/script.ts

@@ -1026,6 +1026,110 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 			// but ensure paste will work when selected
 		});
 
+		// Drag & Drop event handlers for file attachment
+		// Add handlers to both messageInput and its parent container for better coverage
+		const dropTargets = [messageInput, messageInput.parentElement];
+		
+		dropTargets.forEach(target => {
+			if (!target) return;
+			
+			target.addEventListener('dragenter', (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				messageInput.classList.add('drag-over');
+			});
+
+			target.addEventListener('dragover', (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				// Force copy effect to allow drop without Shift key
+				if (e.dataTransfer) {
+					e.dataTransfer.dropEffect = 'copy';
+				}
+				
+				// Show shift key guidance tooltip
+				const message = e.shiftKey 
+					? '📎 Release to attach file' 
+					: '⌨️ Hold Shift key to attach';
+				showDragTooltip(message, e.clientX, e.clientY);
+				
+				messageInput.classList.add('drag-over');
+			});
+
+			target.addEventListener('dragleave', (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				// Only remove class if leaving the entire drop zone
+				if (!target.contains(e.relatedTarget)) {
+				hideDragTooltip();
+					messageInput.classList.remove('drag-over');
+				}
+			});
+
+			target.addEventListener('drop', async (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			hideDragTooltip();
+				messageInput.classList.remove('drag-over');
+
+				const files = e.dataTransfer?.files;
+				if (!files || files.length === 0) {
+					return;
+				}
+
+				// Process each dropped file
+				for (let i = 0; i < files.length; i++) {
+					const file = files[i];
+
+					if (file.type.startsWith('image/')) {
+						// Image file: reuse existing createImageFile logic
+						const reader = new FileReader();
+						reader.onload = (event) => {
+							vscode.postMessage({
+								type: 'createImageFile',
+								imageData: event.target.result,
+								imageType: file.type
+							});
+						};
+						reader.readAsDataURL(file);
+					} else {
+						// General file: use new createFile message
+						const reader = new FileReader();
+						reader.onload = (event) => {
+							vscode.postMessage({
+								type: 'createFile',
+								fileData: event.target.result,
+								fileName: file.name,
+								fileType: file.type
+							});
+						};
+						reader.readAsDataURL(file);
+					}
+				}
+			});
+		});
+
+
+		// Drag-and-drop tooltip for Shift key guidance
+		let dragTooltip = null;
+
+		function showDragTooltip(message, x, y) {
+			if (!dragTooltip) {
+				dragTooltip = document.createElement('div');
+				dragTooltip.className = 'drag-tooltip';
+				document.body.appendChild(dragTooltip);
+			}
+			dragTooltip.textContent = message;
+			dragTooltip.style.left = x + 'px';
+			dragTooltip.style.top = (y - 40) + 'px';
+			dragTooltip.style.display = 'block';
+		}
+
+		function hideDragTooltip() {
+			if (dragTooltip) {
+				dragTooltip.style.display = 'none';
+			}
+		}
 		// Initialize textarea height
 		adjustTextareaHeight();
 
@@ -2005,6 +2109,35 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
 					}
 					break;
 					
+
+			case 'filePath':
+				// Handle general file path response (from drag & drop)
+				if (message.data.filePath) {
+					// Get current cursor position and content
+					const cursorPosition = messageInput.selectionStart || messageInput.value.length;
+					const currentValue = messageInput.value || '';
+
+					// Insert the file path at the current cursor position
+					const textBefore = currentValue.substring(0, cursorPosition);
+					const textAfter = currentValue.substring(cursorPosition);
+
+					// Add a space before the path if there's text before and it doesn't end with whitespace
+					const separator = (textBefore && !textBefore.endsWith(' ') && !textBefore.endsWith('\\n')) ? ' ' : '';
+
+					messageInput.value = textBefore + separator + message.data.filePath + textAfter;
+
+					// Move cursor to end of inserted path
+					const newCursorPosition = cursorPosition + separator.length + message.data.filePath.length;
+					messageInput.setSelectionRange(newCursorPosition, newCursorPosition);
+
+					// Focus back on textarea and adjust height
+					messageInput.focus();
+					adjustTextareaHeight();
+
+					console.log('Inserted file path:', message.data.filePath);
+					console.log('Original file name:', message.data.originalName);
+				}
+				break;
 				case 'updateTokens':
 					// Update token totals in real-time
 					totalTokensInput = message.data.totalTokensInput || 0;

src/ui-styles.ts

@@ -1368,6 +1368,28 @@ const styles = `
         outline: none;
     }
 
+    .input-field.drag-over {
+        border: 2px dashed var(--vscode-focusBorder) !important;
+        background-color: var(--vscode-inputOption-hoverBackground) !important;
+        transition: all 0.2s ease;
+
+    .drag-tooltip {
+        position: fixed;
+        background: var(--vscode-editorWidget-background);
+        border: 1px solid var(--vscode-editorWidget-border);
+        color: var(--vscode-editorWidget-foreground);
+        padding: 6px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        z-index: 10000;
+        pointer-events: none;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+        white-space: nowrap;
+        display: none;
+        transition: opacity 0.2s ease;
+    }
+    }
+
     .input-field::placeholder {
         color: var(--vscode-input-placeholderForeground);
         border: none;