Add support for drag'n'dropping files in chat panel

This commit is contained in:
dimitrievgs 2026-05-11 13:49:32 +03:00
parent 143160ee26
commit 43d855a27d
2 changed files with 118 additions and 1 deletions

View File

@ -569,8 +569,11 @@ export class ChatPanel {
this.hideSuggestions(); this.hideSuggestions();
} }
}); });
}
// Обработчики Drag-n-Drop для внешних файлов
this.setupDragAndDrop();
}
// ----------------------------------------------- Reference Processing --------------------------------------------------------------- // ----------------------------------------------- Reference Processing ---------------------------------------------------------------
/** /**
@ -1159,4 +1162,99 @@ export class ChatPanel {
this.renderAttachedFiles(); this.renderAttachedFiles();
} }
} }
// ----------------------------------------------- Drag-and-Drop ---------------------------------------------------------------
private setupDragAndDrop()
{
const inputContainer = this.container.querySelector('.chat-input-container') as HTMLElement;
if (inputContainer) {
inputContainer.addEventListener('dragover', (e) => {
e.preventDefault();
// Добавляем класс для создания визуального эффекта (подсветка поля)
inputContainer.classList.add('drag-over');
});
inputContainer.addEventListener('dragenter', (e) => {
e.preventDefault();
inputContainer.classList.add('drag-over');
});
inputContainer.addEventListener('dragleave', (e) => {
e.preventDefault();
const relatedTarget = e.relatedTarget as Node | null;
// Проверяем, что курсор действительно покинул зону, а не перешел на дочерний элемент (текст, кнопку)
if (!inputContainer.contains(relatedTarget)) {
inputContainer.classList.remove('drag-over');
}
});
inputContainer.addEventListener('drop', async (e) => {
e.preventDefault();
inputContainer.classList.remove('drag-over');
await this.handleDrop(e);
});
}
}
/**
* Обрабатывает событие сброса внешних файлов (Drag-and-Drop) из ОС
*/
private async handleDrop(e: DragEvent): Promise<void> {
if (!e.dataTransfer?.files || e.dataTransfer.files.length === 0) {
return; // Оброшен не файл (например, просто выделенный текст)
}
const isCtrlPressed = e.ctrlKey || e.metaKey;
const shouldBePermanent = !isCtrlPressed;
const files = Array.from(e.dataTransfer.files);
let addedCount = 0;
for (const file of files) {
let absolutePath = '';
// 1. Попытка через скрытое свойство 'path' (иногда оно есть, но не перечисляемо)
absolutePath = (file as any).path;
// 2. Попытка через Electron (если доступен window.require)
if (!absolutePath && window.require) {
try {
const electron = window.require('electron');
// В некоторых версиях путь можно достать через webUtils из модуля
if (electron.webUtils) {
absolutePath = electron.webUtils.getPathForFile(file);
}
} catch (err) {}
}
try {
// Кэшируем файл (копируем в папку плагина) и получаем метаинформацию
const cacheResult = await this.cacheManager.cacheExternalFile(absolutePath);
// Формируем Attachment объект
const newAttachment: Attachment = {
type: 'external',
name: cacheResult.name,
sourcePath: absolutePath,
cachedPath: cacheResult.cachedPath,
uuid: cacheResult.uuid,
permanent: shouldBePermanent, // D&D файлы прикрепляем разово (как $файл, а не !$)
mimeType: cacheResult.mimeType
};
this.currentAttachments.push(newAttachment);
addedCount++;
} catch (error: any) {
console.error(`Ошибка обработки D&D файла ${file.name}:`, error);
new Notice(`Не удалось прикрепить ${file.name}. ${error.message || error}`);
}
}
if (addedCount > 0) {
// Перерисовываем UI "Скрепки" над полем ввода
this.renderAttachedFiles();
new Notice(`Прикреплено файлов: ${addedCount}`, 2000);
}
}
} }

View File

@ -231,6 +231,25 @@
border-top: 1px solid var(--background-modifier-border); border-top: 1px solid var(--background-modifier-border);
padding: 8px 10px 4px 10px; padding: 8px 10px 4px 10px;
position: relative; position: relative;
/* Добавляем плавность для эффекта Drag-n-Drop */
transition: background-color 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease;
}
/* Состояние при перетаскивании файлов (Drag-n-Drop) над полем чата */
.chat-input-container.drag-over {
border: 2px dashed var(--interactive-accent) !important;
border-top: 2px dashed var(--interactive-accent) !important;
background-color: var(--background-modifier-hover);
border-radius: var(--node-border-radius); /* Используем вашу переменную из :root */
z-index: 10;
}
/* Опционально: Добавляем легкое свечение, чтобы ясно дать понять, что зона активна */
.theme-dark .chat-input-container.drag-over {
box-shadow: 0 0 15px rgba(106, 168, 79, 0.15); /* Ваш --text-accent: #6aa84f */
}
.theme-light .chat-input-container.drag-over {
box-shadow: 0 0 15px rgba(0, 123, 255, 0.15); /* Ваш --text-accent: #007bff */
} }
.scroll-container { .scroll-container {