From 19ff17e23666f0b6e2c76114d7864455ee426d27 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Thu, 7 May 2026 00:57:58 +0200
Subject: [PATCH] =?UTF-8?q?feat(taff):=20layout=20colonne=20+=20modal=20po?=
 =?UTF-8?q?sitionn=C3=A9=20+=20chatbot=20flottant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Grille : 3 colonnes → 1 colonne centrée 720px (respire, 16 fiches)
- Modal : top fixe 72px au lieu de top-1/2 (ne mord plus le header)
- Chatbot FAB : bouton fixe bas-droite + panel slide-in avec Mistral
- /api/chatbot-taff : endpoint dédié lisant plateformes-taff.json
- Cartes : layout restructuré tag/nom/axes/desc-3-lignes/footer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 pages/trouver-du-taf.vue        | 338 +++++++++++++++++++++++++++++++-
 server/api/chatbot-taff.post.ts | 143 ++++++++++++++
 2 files changed, 476 insertions(+), 5 deletions(-)
 create mode 100644 server/api/chatbot-taff.post.ts

diff --git a/pages/trouver-du-taf.vue b/pages/trouver-du-taf.vue
index 1c231b2..aee7e1a 100644
--- a/pages/trouver-du-taf.vue
+++ b/pages/trouver-du-taf.vue
@@ -135,6 +135,104 @@
       </div>
     </div>
 
+    <!-- ── Chatbot FAB ───────────────────────────────────────────── -->
+    <Teleport to="body">
+      <!-- Bouton flottant -->
+      <button
+        v-if="!chatOpen"
+        class="taff-fab"
+        @click="chatOpen = true"
+        aria-label="Ouvrir le guide IA — Quel plateforme me convient ?"
+        title="Guide IA — Je t'aide à choisir"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+        </svg>
+        <span class="taff-fab-label">Guide IA</span>
+      </button>
+
+      <!-- Panel chatbot -->
+      <Transition name="taff-chat">
+        <div v-if="chatOpen" class="taff-chat-panel" role="dialog" aria-modal="true" aria-label="Guide IA — Choisir sa plateforme">
+
+          <!-- Header panel -->
+          <div class="taff-chat-header">
+            <div class="flex items-center gap-2">
+              <div class="taff-chat-avatar">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-on-primary);">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                </svg>
+              </div>
+              <div>
+                <div class="text-sm font-semibold" style="color: var(--nav-text);">Guide AEP</div>
+                <div class="text-xs" style="color: var(--nav-text-muted);">Je t'aide à choisir ta plateforme</div>
+              </div>
+            </div>
+            <button @click="chatOpen = false" class="taff-chat-close" aria-label="Fermer">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+
+          <!-- Messages -->
+          <div class="taff-chat-messages" ref="chatMessagesEl">
+            <!-- Message d'accueil -->
+            <div class="taff-msg taff-msg--bot">
+              <p>Dis-moi ta situation : ton secteur, ta zone, ce qui te bloque. Je t'oriente parmi les {{ allPlateformes.length }} plateformes de l'annuaire.</p>
+              <p class="text-xs mt-1.5 opacity-60">Ex : "Je suis en rénovation à Lyon, je cherche des leads sans commission."</p>
+            </div>
+
+            <!-- Messages de la conversation -->
+            <template v-for="(msg, i) in chatMessages" :key="i">
+              <div :class="['taff-msg', msg.role === 'user' ? 'taff-msg--user' : 'taff-msg--bot']">
+                <p>{{ msg.content }}</p>
+              </div>
+              <!-- Plateformes recommandées -->
+              <div v-if="msg.role === 'bot' && msg.recommandations?.length" class="taff-chat-recos">
+                <button
+                  v-for="r in msg.recommandations"
+                  :key="r.id"
+                  class="taff-reco-chip"
+                  @click="openModalById(r.id); chatOpen = false"
+                >
+                  {{ r.nom }}
+                  <span class="taff-reco-arrow">→</span>
+                </button>
+              </div>
+            </template>
+
+            <!-- Loader -->
+            <div v-if="chatLoading" class="taff-msg taff-msg--bot">
+              <span class="taff-typing"><span/><span/><span/></span>
+            </div>
+          </div>
+
+          <!-- Input -->
+          <div class="taff-chat-input-wrap">
+            <textarea
+              v-model="chatInput"
+              class="taff-chat-input"
+              placeholder="Décris ta situation..."
+              rows="2"
+              @keydown.enter.exact.prevent="sendChat"
+            />
+            <button
+              class="taff-chat-send"
+              :disabled="chatLoading || !chatInput.trim()"
+              @click="sendChat"
+              aria-label="Envoyer"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+              </svg>
+            </button>
+          </div>
+          <p class="taff-chat-footer-note">Propulsé par Mistral · 20 questions/jour</p>
+        </div>
+      </Transition>
+    </Teleport>
+
     <!-- ── Note juridique ────────────────────────────────────────── -->
     <div class="taff-disclaimer">
       <p>
@@ -157,8 +255,8 @@
       <Transition name="taff-modal">
         <div
           v-if="modalPlateforme"
-          class="fixed z-[10001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
-          style="width: min(760px, 92vw); max-height: 90vh; background: var(--nav-bg); border-radius: 16px; box-shadow: 0 16px 64px rgba(26,34,56,0.28); overflow: hidden;"
+          class="fixed z-[10001] left-1/2 -translate-x-1/2 flex flex-col"
+          style="width: min(760px, 92vw); top: 72px; max-height: calc(100vh - 88px); background: var(--nav-bg); border-radius: 16px; box-shadow: 0 16px 64px rgba(26,34,56,0.28); overflow: hidden;"
           role="dialog"
           aria-modal="true"
           :aria-label="modalPlateforme.nom"
@@ -389,6 +487,50 @@ function axeScoreText(score: string) {
 const modalPlateforme = ref<PlateformeTaff | null>(null)
 function openModal(p: PlateformeTaff) { modalPlateforme.value = p }
 function closeModal()                  { modalPlateforme.value = null }
+function openModalById(id: string) {
+  const p = allPlateformes.value.find(p => p.id === id)
+  if (p) modalPlateforme.value = p
+}
+
+// Chatbot
+interface ChatMessage {
+  role: 'user' | 'bot'
+  content: string
+  recommandations?: { id: string; nom: string; raison: string }[]
+}
+
+const chatOpen    = ref(false)
+const chatInput   = ref('')
+const chatLoading = ref(false)
+const chatMessages = ref<ChatMessage[]>([])
+const chatMessagesEl = ref<HTMLElement | null>(null)
+
+async function sendChat() {
+  const q = chatInput.value.trim()
+  if (!q || chatLoading.value) return
+  chatMessages.value.push({ role: 'user', content: q })
+  chatInput.value = ''
+  chatLoading.value = true
+  await nextTick()
+  chatMessagesEl.value?.scrollTo({ top: chatMessagesEl.value.scrollHeight, behavior: 'smooth' })
+  try {
+    const res = await $fetch<{ reponse_texte: string; plateformes_recommandees: { id: string; nom: string; raison: string }[] }>(
+      '/api/chatbot-taff',
+      { method: 'POST', body: { question: q } }
+    )
+    chatMessages.value.push({
+      role: 'bot',
+      content: res.reponse_texte,
+      recommandations: res.plateformes_recommandees ?? [],
+    })
+  } catch (e: any) {
+    chatMessages.value.push({ role: 'bot', content: e?.data?.statusMessage ?? 'Erreur — réessaie dans un instant.' })
+  } finally {
+    chatLoading.value = false
+    await nextTick()
+    chatMessagesEl.value?.scrollTo({ top: chatMessagesEl.value.scrollHeight, behavior: 'smooth' })
+  }
+}
 
 const TAG_CONFIG: Record<string, { emoji: string; label: string; bg: string; text: string }> = {
   'recommande':   { emoji: '✅', label: 'Recommandé AEP', bg: 'rgba(90,122,74,0.12)',    text: '#3d5534' },
@@ -448,7 +590,7 @@ const parsedDescription = computed(() => {
 .taff-search-clear { color: var(--nav-text-muted); background: none; border: none; cursor: pointer; padding: 0; display: flex; }
 
 .taff-grid-wrap { padding: 1.5rem; }
-.taff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
+.taff-grid { display: flex; flex-direction: column; gap: 0.75rem; max-width: 720px; margin: 0 auto; }
 .taff-empty { text-align: center; padding: 3rem; }
 .taff-reset-btn { margin-top: 0.75rem; padding: 0.5rem 1.25rem; border-radius: 8px; background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; border: none; cursor: pointer; }
 .taff-reset-btn:hover { opacity: 0.7; }
@@ -464,9 +606,195 @@ const parsedDescription = computed(() => {
 .modal-meta-key { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--nav-text-muted); }
 .modal-meta-val { font-size: 0.875rem; font-weight: 500; color: var(--nav-text); }
 
-/* Transitions */
+/* Transitions modal */
 .taff-backdrop-enter-active, .taff-backdrop-leave-active { transition: opacity 0.2s; }
 .taff-backdrop-enter-from, .taff-backdrop-leave-to { opacity: 0; }
 .taff-modal-enter-active, .taff-modal-leave-active { transition: opacity 0.2s, transform 0.2s; }
-.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
+.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translateX(-50%) translateY(-12px); }
+
+/* ── Chatbot FAB ──────────────────────────────────────────────────── */
+.taff-fab {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.125rem;
+  border-radius: 9999px;
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 20px rgba(26,34,56,0.3);
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+.taff-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,34,56,0.35); }
+.taff-fab-label { white-space: nowrap; }
+
+/* Panel chatbot */
+.taff-chat-panel {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 9999;
+  width: min(380px, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
+  background: var(--nav-surface);
+  border-radius: 16px;
+  box-shadow: 0 8px 40px rgba(26,34,56,0.25);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--nav-bg-alt);
+}
+
+.taff-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--nav-bg-alt);
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+.taff-chat-avatar {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  background: var(--nav-primary-solid);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.taff-chat-close {
+  width: 28px; height: 28px;
+  border-radius: 8px;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+  border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: opacity 0.15s;
+}
+.taff-chat-close:hover { opacity: 0.7; }
+
+.taff-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.taff-msg {
+  padding: 0.625rem 0.875rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  max-width: 92%;
+}
+.taff-msg--bot {
+  background: var(--nav-bg-alt);
+  color: var(--nav-text);
+  align-self: flex-start;
+  border-bottom-left-radius: 4px;
+}
+.taff-msg--user {
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  align-self: flex-end;
+  border-bottom-right-radius: 4px;
+}
+
+.taff-chat-recos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-self: flex-start;
+  max-width: 92%;
+}
+.taff-reco-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  background: var(--nav-bg);
+  color: var(--nav-text);
+  border: 1px solid var(--nav-bg-alt);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.taff-reco-chip:hover { background: var(--nav-bg-alt); }
+.taff-reco-arrow { opacity: 0.5; }
+
+/* Typing indicator */
+.taff-typing { display: inline-flex; gap: 4px; align-items: center; }
+.taff-typing span {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--nav-text-muted);
+  animation: taff-bounce 1.2s infinite;
+}
+.taff-typing span:nth-child(2) { animation-delay: 0.2s; }
+.taff-typing span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes taff-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40% { transform: translateY(-5px); opacity: 1; }
+}
+
+.taff-chat-input-wrap {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-top: 1px solid var(--nav-bg-alt);
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+.taff-chat-input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--nav-bg-alt);
+  border-radius: 10px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: var(--nav-bg);
+  color: var(--nav-text);
+  font-family: var(--nav-font);
+  outline: none;
+  line-height: 1.5;
+}
+.taff-chat-input::placeholder { color: var(--nav-text-muted); }
+.taff-chat-input:focus { border-color: var(--nav-primary); }
+
+.taff-chat-send {
+  width: 36px; height: 36px;
+  border-radius: 10px;
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: opacity 0.15s;
+}
+.taff-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
+.taff-chat-send:not(:disabled):hover { opacity: 0.85; }
+
+.taff-chat-footer-note {
+  text-align: center;
+  font-size: 0.6875rem;
+  color: var(--nav-text-muted);
+  padding: 0.375rem;
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+
+/* Transition panel chatbot */
+.taff-chat-enter-active, .taff-chat-leave-active { transition: opacity 0.2s, transform 0.2s; }
+.taff-chat-enter-from, .taff-chat-leave-to { opacity: 0; transform: translateY(12px) scale(0.97); }
 </style>
diff --git a/server/api/chatbot-taff.post.ts b/server/api/chatbot-taff.post.ts
new file mode 100644
index 0000000..87a6e93
--- /dev/null
+++ b/server/api/chatbot-taff.post.ts
@@ -0,0 +1,143 @@
+/**
+ * POST /api/chatbot-taff
+ * Chatbot d'aiguillage — Carte 3 "Trouver du taf"
+ * Lit plateformes-taff.json, appelle Mistral Small, retourne recommandations.
+ */
+
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { checkRateLimitJson } from '~/server/utils/rateLimitJson'
+
+interface PlateformeMinimal {
+  id: string
+  nom: string
+  type: string
+  description_courte: string
+  scoring: {
+    remuneration: string | null
+    transparence: string | null
+    pratiques: string | null
+    ecologie: string | null
+    matching: string | null
+    tag_global: string
+    justification_tag: string
+  }
+  secteurs_servis: string[]
+  cout_entree: string
+}
+
+const SYSTEM_PROMPT = `Tu es un conseiller expert au service des architectes indépendants français. Tu connais toutes les plateformes de mise en relation architecte↔particulier et les agrégateurs d'appels d'offres publics référencés par AEP (Architecture d'Écologie Politique).
+
+Ton rôle : aider l'architecte à choisir LA ou LES plateformes adaptées à sa situation, en t'appuyant exclusivement sur les données ci-dessous.
+
+RÈGLES :
+1. Ne recommande QUE des plateformes présentes dans le contexte ci-dessous.
+2. Sois direct et opinionné — c'est ça la valeur d'AEP.
+3. Si une plateforme est ❌ "À éviter", signale-le clairement.
+4. Réponse max 250 mots, en français, ton conseiller pair.
+5. Retourne UNIQUEMENT un JSON valide, sans texte avant ou après.
+
+FORMAT :
+{
+  "reponse_texte": "Ta réponse en prose, max 250 mots",
+  "plateformes_recommandees": [
+    { "id": "slug-kebab", "nom": "Nom plateforme", "raison": "Pourquoi cette plateforme en 1 phrase" }
+  ]
+}
+
+PLATEFORMES DISPONIBLES :
+{{PLATEFORMES_JSON}}`
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+
+  const ip =
+    getHeader(event, 'x-forwarded-for')?.split(',')[0].trim() ||
+    event.node.req.socket?.remoteAddress ||
+    '0.0.0.0'
+
+  const allowed = checkRateLimitJson(ip, 'chatbot-taff', 20)
+  if (!allowed) {
+    throw createError({ statusCode: 429, statusMessage: 'Limite de 20 questions par jour atteinte.' })
+  }
+
+  const body = await readBody(event)
+  const question: string = (body?.question ?? '').trim()
+  if (!question || question.length < 5) {
+    throw createError({ statusCode: 400, statusMessage: 'Question trop courte.' })
+  }
+
+  // Lire le JSON statique des plateformes
+  let plateformes: PlateformeMinimal[] = []
+  try {
+    const jsonPath = resolve(process.cwd(), 'public/data/plateformes-taff.json')
+    const raw = JSON.parse(readFileSync(jsonPath, 'utf8'))
+    plateformes = (raw.plateformes ?? []).map((p: any) => ({
+      id: p.id,
+      nom: p.nom,
+      type: p.type,
+      description_courte: p.description_courte,
+      scoring: p.scoring,
+      secteurs_servis: p.secteurs_servis,
+      cout_entree: p.cout_entree,
+    }))
+  } catch (e) {
+    throw createError({ statusCode: 500, statusMessage: 'Données plateformes introuvables.' })
+  }
+
+  const context = plateformes.map(p => ({
+    id: p.id,
+    nom: p.nom,
+    type: p.type === 'b2c-mise-en-relation' ? 'B2C' : 'Appels offres publics',
+    tag: p.scoring.tag_global,
+    resume: p.description_courte,
+    secteurs: p.secteurs_servis.join(', '),
+    cout: p.cout_entree,
+    justification: p.scoring.justification_tag,
+  }))
+
+  const systemPrompt = SYSTEM_PROMPT.replace('{{PLATEFORMES_JSON}}', JSON.stringify(context, null, 0))
+
+  const mistralApiKey = config.mistralApiKey as string
+  if (!mistralApiKey) {
+    throw createError({ statusCode: 500, statusMessage: 'Clé API Mistral manquante.' })
+  }
+
+  let mistralRaw: string
+  try {
+    const res = await $fetch<{ choices: { message: { content: string } }[] }>(
+      'https://api.mistral.ai/v1/chat/completions',
+      {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${mistralApiKey}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          model: 'mistral-small-latest',
+          temperature: 0.3,
+          max_tokens: 700,
+          response_format: { type: 'json_object' },
+          messages: [
+            { role: 'system', content: systemPrompt },
+            { role: 'user', content: question },
+          ],
+        }),
+      }
+    )
+    mistralRaw = res.choices?.[0]?.message?.content ?? '{}'
+  } catch {
+    throw createError({ statusCode: 502, statusMessage: 'Erreur IA — réessaie dans quelques instants.' })
+  }
+
+  try {
+    const parsed = JSON.parse(mistralRaw)
+    return {
+      reponse_texte: parsed.reponse_texte ?? "Je n'ai pas pu analyser ta demande.",
+      plateformes_recommandees: (parsed.plateformes_recommandees ?? []).map((r: any) => ({
+        id: r.id,
+        nom: r.nom ?? plateformes.find(p => p.id === r.id)?.nom ?? r.id,
+        raison: r.raison ?? '',
+      })),
+    }
+  } catch {
+    return { reponse_texte: "Je n'ai pas pu analyser ta demande.", plateformes_recommandees: [] }
+  }
+})