mirror of
https://github.com/wavetermdev/waveterm
synced 2026-05-24 09:18:27 +00:00
bf0312f69d
Enables dragging files from preview directory listings directly into the
WaveAI panel for analysis.
## Changes
**Modified `frontend/app/aipanel/aipanel.tsx`:**
- Added `useDrop` hook to accept `FILE_ITEM` drag type from preview
directory
- Implemented `handleFileItemDrop` to:
- Read file content via `RpcApi.FileReadCommand` using the remote URI
- Convert base64 data to browser `File` object with proper MIME type
- Validate and add to panel using existing `model.addFile()` flow
- Integrated with existing drag overlay for visual feedback
- Rejects directories with appropriate error messaging
## Implementation
```typescript
const handleFileItemDrop = useCallback(
async (draggedFile: DraggedFile) => {
if (draggedFile.isDir) {
model.setError("Cannot add directories to Wave AI. Please select a file.");
return;
}
const fileData = await RpcApi.FileReadCommand(TabRpcClient, {
info: { path: draggedFile.uri }
}, null);
const bytes = new Uint8Array(atob(fileData.data64).split('').map(c => c.charCodeAt(0)));
const file = new File([bytes], draggedFile.relName, {
type: fileData.info?.mimetype || "application/octet-stream"
});
// Existing validation and addFile flow
await model.addFile(file);
},
[model]
);
const [{ isOver, canDrop }, drop] = useDrop(() => ({
accept: "FILE_ITEM",
drop: handleFileItemDrop,
collect: (monitor) => ({ isOver: monitor.isOver(), canDrop: monitor.canDrop() })
}), [handleFileItemDrop]);
```
No changes required to preview directory—it already exports `FILE_ITEM`
drag items. Works independently from native file system drag-and-drop.
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
|
||
|---|---|---|
| .. | ||
| app | ||
| builder | ||
| layout | ||
| types | ||
| util | ||
| tailwindsetup.css | ||
| wave.ts | ||