feat(dragdrop): drag & drop complet de fichiers/dossiers & intégration IA (#89)
CI / lint (push) Successful in 1m20s
CI / security (push) Successful in 50s
CI / test (push) Successful in 2m42s
CI / build (push) Successful in 51s
CI / e2e (push) Successful in 10m29s

This commit is contained in:
2026-09-14 15:31:12 -04:00
parent 150b57d538
commit 1db3e0ad2f
13 changed files with 990 additions and 10 deletions
+1
View File
@@ -135,6 +135,7 @@
| # | Domaine / fonctionnalité | Version | Détails |
|---|---|---|---|
| 89 | Drag & drop complet de fichiers/dossiers & intégration Assistant IA | 2.3.0 | [features/drag-and-drop-ai.md](./features/drag-and-drop-ai.md) |
| 1–8 | Fondations (FastAPI, TF-IDF + stemming, watchdog, SPA, sécurité, path traversal, gzip, PWA) | 1.0.0→1.4.0 | [archive](./archive/COMPLETED_v1-v2.md) |
| 9–20 | UX & productivité (share, webhooks, dashboard, conflits, backlinks, redaction, backups, graphe, header, aperçu) | 1.5.0→1.6.0 | [archive](./archive/COMPLETED_v1-v2.md) |
| 21–22 | Architecture (split `app.js` → 16 modules, validateur imports CI) | 1.5.1 | [archive](./archive/COMPLETED_v1-v2.md) |
+71
View File
@@ -0,0 +1,71 @@
# #89 — Drag & drop complet de fichiers / dossiers & intégration Assistant IA
> **Statut :** ✅ Livré
> **Priorité :** 🟡 P2
> **Zone :** frontend + backend
> **Références :** [Roadmap](../ROADMAP.md) · [Assistant IA #80](./ai-assistant-ux.md) · [Assistant IA #88](./ai-app-context.md)
---
## 🎯 Objectif
Offrir une expérience complète de glisser-déposer (Drag & Drop) dans ObsiGate couvrant à la fois la gestion de fichiers dans le vault et les interactions avec l'Assistant IA :
1. Glisser-déposer de fichiers individuels, multiples et **dossiers récursifs** depuis le système d'exploitation vers l'arborescence du vault.
2. Espace de drop dédié (dropzone explicite + overlay visuel réactif à double cible).
3. Glisser-déposer de fichiers / dossiers (internes au vault ou externes depuis l'OS) vers le panneau de l'assistant IA pour enrichir le contexte ou lui soumettre des instructions directes.
---
## 🏗️ Architecture & Composants
### 1. Backend — Endpoint d'upload récursif / batch (`POST /api/vault/{vault}/batch-upload`)
- Réception de structures de fichiers avec leurs chemins relatifs (`relative_path`).
- Validation de sécurité anti path-traversal via `resolve_safe_path` et validation d'extension via `_validate_extension(allow_images=True)`.
- Création automatique et récursive des dossiers parents manquants.
- Gestion des collisions / écrasements (option d'écrasement avec sauvegarde automatique `create_backup`).
- Retour d'un bilan d'upload (`uploaded`, `created_dirs`, `errors`).
### 2. Frontend — Core Drag & Drop & Traversée d'arborescence (`frontend/js/upload.js` & `dragdrop.js`)
- Utilisation de la `FileSystem API` (`DataTransferItem.webkitGetAsEntry()`) pour extraire de manière récursive toute l'arborescence de répertoires et fichiers déposés depuis l'OS.
- Surbrillance dynamique des dossiers cibles dans l'arborescence (`.tree-item`) lors du survol d'éléments externes de type `Files`.
- Support du drop sur la racine d'un vault ou dans un sous-dossier spécifique.
- Feedback utilisateur immédiat via les toasts d'information / progression / succès.
### 3. Frontend — Dropzones dédiées & Overlay global
- Overlay visuel plein écran lors du drag d'éléments depuis l'OS sur l'application avec séparation claire des zones cibles :
- *Zone Vault* : Déposer pour importer dans le dossier actif / vault.
- *Zone Assistant IA* : Déposer pour analyser avec l'IA.
- Dropzone réactive dans le panneau BooksLM.
### 4. Intégration Assistant IA (`frontend/js/bookslm.js`)
- **Drag interne (depuis l'arborescence ObsiGate vers le chat)** :
- Déposer un dossier : bascule l'assistant ou insère le dossier en contexte ad-hoc.
- Déposer un ou plusieurs fichiers : ajoute les fichiers en context chips (`_adhocFiles`).
- **Drag externe (depuis l'OS vers le chat)** :
- Images : ajout direct en pièce jointe pour les modèles multimodaux (vision).
- Documents texte / Markdown / Code : lecture immédiate du contenu et ajout en contexte ad-hoc.
---
## 📋 Sous-tâches
- [x] **Backend** :
- [x] Endpoint `POST /api/vault/{vault}/batch-upload` (gestion des sous-dossiers et upload en batch).
- [x] Services métier `save_raw_file` et `batch_upload_files` dans `backend/services/mutations.py`.
- [x] Tests unitaires backend (`tests/test_batch_upload.py`).
- [x] **Frontend Core Upload & Tree Drop** :
- [x] Helper de lecture récursive `readDataTransferEntries` (fichiers + dossiers) dans `frontend/js/upload.js`.
- [x] Écouteurs `dragover` / `drop` sur l'arborescence du vault avec retour visuel dans `frontend/js/dragdrop.js`.
- [x] Gestion des transferts et notifications toasts.
- [x] **Overlay & Dropzone UI** :
- [x] Détection globale du glisser externe sur la fenêtre avec overlay interactif (`initGlobalDropOverlay`).
- [x] Styles de l'overlay et des zones cibles dans `frontend/style.css`.
- [x] **Intégration Assistant IA** :
- [x] Dropzone sur le composeur BooksLM (`_setupDropZones`).
- [x] Gestion des drops internes (fichiers/dossiers du vault) et externes (OS `handleExternalDroppedItems`).
- [x] Intégration transparente avec les chips de contexte et images multimodales.
- [x] **Internationalisation (i18n)** :
- [x] Clés FR/EN pour toutes les indications de drop, progression et erreurs dans `frontend/locales/{fr,en}.json`.
- [x] **Tests & Validation** :
- [x] Tests unitaires frontend `tests/frontend/upload.test.mjs`.
- [x] Validation de tous les imports/exports ES modules `tests/frontend/validate-imports.mjs`.