Proposition : Upload de fichiers dans Chat AI

Status : IMPLEMENTEE

Contexte

Actuellement le chat AI n'accepte que du texte. L'utilisateur ne peut pas joindre d'images, de documents ou d'autres fichiers a ses messages. Pourtant :

YOLO necessite une image (actuellement via URL uniquement)
L'analyse de documents (PDF, CSV) serait utile
Le scraper pourrait recevoir des fichiers HTML locaux
L'infra est deja a 90% prete (table ai_attachments, Supabase Storage, routes de download)

Ce qui existe deja

Element	Etat	Detail
Table `ai_attachments`	OK	Schema complet (id, message_id, conversation_id, filename, bucket_path, mime_type, size_bytes)
Supabase Storage	OK	Bucket `ai-outputs`, methodes upload/download/signedUrl
Routes download	OK	`GET /api/ai/attachments/:id/file/*` (proxy vers Storage)
Route list	OK	`GET /api/ai/conversations/:id/attachments`
Upload AI outputs	OK	`uploadJobOutputToStorage()` dans aiChat.ts
Upload utilisateur	MANQUANT	Pas de route ni d'UI
Affichage attachments	MANQUANT	ChatMessages ne rend que du texte
UI d'upload	MANQUANT	ChatInput n'a qu'un textarea

Plan d'implementation

1. Backend : Route d'upload (connectors-api)

Fichier : src/index.ts - nouvelle route

POST /api/ai/conversations/:id/attachments
Content-Type: multipart/form-data
Body: file (binary)

Valide l'auth et la propriete de la conversation
Limite de taille : 10 Mo
MIME types autorises : images (jpg, png, gif, webp), documents (pdf, txt, csv, json, md), audio (mp3, wav, ogg)
Upload vers Supabase Storage : {userId}/uploads/{conversationId}/{uuid}-{filename}
Insert dans ai_attachments avec message_id: null (associe apres envoi du message)
Retourne : { attachment: { id, filename, mime_type, size_bytes, preview_url } }

2. Backend : Modifier sendMessage pour gerer les attachments

Fichier : src/services/aiChat.ts

Le stream endpoint accepte un champ attachment_ids: string[] en plus de content
Au debut de _processMessage :
- Recupere les attachments par leurs IDs
- Met a jour message_id vers le message utilisateur
- Pour les images : passe l'URL proxy comme contexte a l'intent detector
Integration intent detector :
- Si attachment image + keywords YOLO → route vers YOLO (telecharge depuis Storage au lieu d'URL externe)
- Si attachment image sans keywords specifiques → ajoute "[Image jointe: filename]" au contexte LLM
- Si attachment document (PDF, CSV, etc.) → extrait le texte et l'ajoute au contexte LLM

3. Frontend : ChatInput avec upload

Fichier : src/components/ai/ChatInput.tsx

Modifications :

Ajouter un bouton trombone (clip) a gauche du textarea
<input type="file"> cache, declenche par le bouton
Au clic : upload via POST /api/ai/conversations/:id/attachments
Affiche un apercu sous le textarea (miniature image ou nom+taille fichier)
Possibilite de supprimer le fichier avant envoi
Au send : passe les attachment_ids en plus du content
Support drag & drop sur le textarea
Support paste d'image (Ctrl+V)

Nouvelle interface :

interface ChatInputProps {
  onSend$: (content: string, attachmentIds?: string[]) => void;
  conversationId: string;
  disabled?: boolean;
}

4. Frontend : Affichage des attachments dans ChatMessages

Fichier : src/components/ai/ChatMessages.tsx

Ajouter attachments?: Attachment[] a l'interface Message
Pour les messages user avec attachments :
- Images : miniature cliquable (ouvre en plein ecran)
- Documents : icone + nom + taille
- Audio : mini-player HTML5
Pour les messages assistant : deja gere via markdown (![](url))

5. Frontend : API client

Fichier : src/lib/api.ts

Nouvelles methodes :

uploadChatAttachment(conversationId, file) : POST multipart
Modifier sendChatMessageStream(convId, content, attachmentIds?, onStep) : passe les IDs

6. Integration YOLO avec fichiers uploades

Fichier : src/services/intentDetector.ts + intentExecutor.ts

detectIntent recoit un parametre optionnel attachments: Attachment[]
Si attachment image present + keywords YOLO → intent YOLO avec fichier local
executeYoloIntent : si intent.body.attachmentId au lieu de intent.body.url, telecharge depuis Supabase Storage puis upload vers YOLO

Ce qui ne change PAS

Schema ai_attachments (deja adapte)
Routes de download existantes
Bucket Supabase Storage ai-outputs (reutilise)
Rendering markdown des messages assistant
SSE streaming (attachment_ids passe dans le body initial, pas dans le stream)

Fichiers a modifier/creer

Fichier	Action
`connectors-api/src/index.ts`	Ajouter route POST upload + modifier stream route
`connectors-api/src/services/aiChat.ts`	Gerer attachment_ids dans _processMessage
`connectors-api/src/services/intentDetector.ts`	Accepter attachments en parametre
`connectors-api/src/services/intentExecutor.ts`	YOLO avec fichier local
`connectors-front/src/components/ai/ChatInput.tsx`	UI upload (bouton, preview, drag&drop)
`connectors-front/src/components/ai/ChatMessages.tsx`	Affichage attachments
`connectors-front/src/lib/api.ts`	uploadChatAttachment() + modifier sendChatMessageStream
`connectors-front/src/routes/chat/[id]/index.tsx`	Passer conversationId a ChatInput, gerer attachmentIds

Ordre d'implementation

Route upload backend (POST multipart, validation, stockage)
Modifier stream route (accepter attachment_ids)
aiChat.ts (recuperer attachments, associer au message, passer au contexte)
ChatInput.tsx (bouton upload, preview, drag&drop, paste image)
api.ts (uploadChatAttachment, modifier sendChatMessageStream)
chat/[id]/index.tsx (wiring)
ChatMessages.tsx (affichage miniatures/fichiers)
Intent YOLO (fichier local au lieu d'URL)
Test complet

Limites et contraintes

Taille max : 10 Mo par fichier
1 fichier par message (simplification initiale, extensible ensuite)
Pas d'extraction de texte PDF dans la v1 (juste le nom et la taille en contexte)
Pas de preview video (juste lien)
Les fichiers sont stockes dans le meme bucket ai-outputs avec un prefix uploads/