From a72928343f4c8d85ac1515260a7c87eb62d59ce8 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Thu, 7 May 2026 01:54:38 +0200
Subject: [PATCH] fix(chatbot): import explicite useMarkdown + titre/onboarding
 par carte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ChatbotSheet: import explicite useMarkdown (plus d'auto-import incertain)
- Props: title, onboarding, endpoint
- agences.vue: titre 'Réseaux AEP' + message d'accueil distinct + endpoint correct
- Header chatbot affiche le nom de la carte active

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/ChatbotSheet.vue | 10 ++++++++--
 pages/agences.vue           |  2 ++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/ChatbotSheet.vue b/components/ChatbotSheet.vue
index 21ef69f..065e706 100644
--- a/components/ChatbotSheet.vue
+++ b/components/ChatbotSheet.vue
@@ -61,7 +61,7 @@
                 <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>
-            <span class="font-bold text-sm" style="color: var(--nav-text);">Chatbot</span>
+            <span class="font-bold text-sm" style="color: var(--nav-text);">{{ props.title ?? 'Chatbot' }}</span>
           </div>
         </div>
 
@@ -69,6 +69,8 @@
         <div ref="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-3">
           <!-- Message onboarding (avant la première question) -->
           <div v-if="messages.length === 0" class="onboarding-bubble">
+            <p v-if="props.onboarding" v-html="renderMd(props.onboarding)" />
+            <template v-else>
             <p>Ce chatbot fonctionne sur un serveur européen souverain
 (Mistral FR, zéro rétention), conçu sobre en énergie.</p>
             <p>Pour m'aider à te répondre efficacement,
@@ -81,6 +83,7 @@ formule ta requête ainsi :</p>
             <p class="example">Exemple : "Je suis salarié d'agence, litige avec mon
 employeur, besoin conseil juridique droit du travail,
 Île-de-France."</p>
+            </template>
           </div>
 
           <!-- Messages -->
@@ -164,6 +167,7 @@ employeur, besoin conseil juridique droit du travail,
 </template>
 
 <script setup lang="ts">
+import { useMarkdown } from '~/composables/useMarkdown'
 const { render: renderMd } = useMarkdown()
 
 interface FicheReco {
@@ -180,7 +184,9 @@ interface ChatMessage {
 
 const props = defineProps<{
   modelValue: boolean
-  endpoint?: string   // défaut: /api/chatbot (Carte 1 NocoDB)
+  endpoint?: string     // défaut: /api/chatbot (Carte 1 NocoDB)
+  title?: string        // label dans le header
+  onboarding?: string   // message d'accueil personnalisé (markdown ok)
 }>()
 
 const emit = defineEmits<{
diff --git a/pages/agences.vue b/pages/agences.vue
index a5ef5b0..8acb3f5 100644
--- a/pages/agences.vue
+++ b/pages/agences.vue
@@ -377,6 +377,8 @@
     <ChatbotSheet
       :modelValue="chatbotOpen"
       endpoint="/api/chatbot-reseaux"
+      title="Réseaux AEP"
+      onboarding="Je connais les **120 réseaux, collectifs et agences** cartographiés dans AEP — ceux qui portent une vision écologique et politique de l'architecture.\n\nDécris ta situation : tu cherches un collectif, une agence inspirante, un partenaire sur un projet ?"
       @update:modelValue="chatbotOpen = $event"
       @highlightOrgs="() => {}"
     />