jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chatbot): séparation définitive Carte1/Carte2 + markdown inline styles

Browse Source 
- ChatbotReseaux.vue : composant standalone, endpoint hardcodé /api/chatbot-reseaux,
  onboarding 120 réseaux AEP, aucun prop partagé avec ChatbotSheet
- ChatbotSheet.vue : restauré état simple, /api/chatbot hardcodé, onboarding Carte 1
- agences.vue : ChatbotReseaux au lieu de ChatbotSheet
- useMarkdown.ts : inline styles (font-weight:700 etc) — zéro dépendance CSS,
  fonctionne dans tout contexte Vue scoped/v-html sans exception

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-07 02:38:47 +02:00
parent 419071b4c5
commit 5967a5af57
4 changed files with 244 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
components/ChatbotSheet.vue
View File

@@ -61,9 +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);">
{{ props.title ?? (activeEndpoint === '/api/chatbot-reseaux' ? 'Réseaux AEP' : 'Chatbot') }}
</span>
<span class="font-bold text-sm" style="color: var(--nav-text);">Chatbot</span>
</div>
</div>
@@ -71,19 +69,14 @@
<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">
<template v-if="props.onboarding">
<div class="md-content" v-html="renderMd(props.onboarding)" />
</template>
<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, formule ta requête ainsi :</p>
<ul>
<li>• Besoin : [ce que tu cherches]</li>
<li>• Thématique : [juridique / technique / économique / ...]</li>
<li>• Lieu : [région ou ville]</li>
</ul>
<p class="example">Exemple : "Je suis salarié d'agence, litige avec mon employeur, besoin conseil juridique droit du travail, Île-de-France."</p>
</template>
<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, formule ta requête ainsi :</p>
<ul>
<li>• Besoin : [ce que tu cherches]</li>
<li>• Thématique : [juridique / technique / économique / ...]</li>
<li>• Lieu : [région ou ville]</li>
</ul>
<p class="example">Exemple : "Je suis salarié d'agence, litige avec mon employeur, besoin conseil juridique droit du travail, Île-de-France."</p>
</div>
<!-- Messages -->
@@ -170,14 +163,6 @@
import { useMarkdown } from '~/composables/useMarkdown'
const { render: renderMd } = useMarkdown()
// Détection double-sécurité : prop endpoint > route-based fallback
const route = useRoute()
const activeEndpoint = computed(() => {
if (props.endpoint) return props.endpoint
if (route.path.startsWith('/agences')) return '/api/chatbot-reseaux'
return '/api/chatbot'
})
interface FicheReco {
id: number | string
nom: string
@@ -192,9 +177,6 @@ interface ChatMessage {
const props = defineProps<{
modelValue: boolean
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<{
@@ -242,7 +224,7 @@ async function sendMessage() {
const res = await $fetch<{
reponse_texte: string
fiches_recommandees: { id: number | string; nom: string; explication: string }[]
}>(activeEndpoint.value, {
}>('/api/chatbot', {
method: 'POST',
body: { question },
})