fix(chatbot): markdown :deep() + onboarding v-if/v-else propre

- CSS: :deep(.md-content) perce le scoped — résout l'écrasement par .assistant-bubble p
- Template: <template v-if> / <template v-else> au lieu de <p v-if /> + v-else
  (tag void + v-else = pairing HTML instable)
- Carte 1 retrouve son onboarding d'origine (v-else sur props.onboarding absent)
- Carte 2 garde son onboarding 120 structures via prop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-07 02:07:28 +02:00
parent a72928343f
commit f7b01c33e6

View File

@@ -69,20 +69,18 @@
<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-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>
<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>
<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>
@@ -329,7 +327,17 @@ function scrollToBottom() {
line-height: 1.6;
color: var(--nav-text);
}
.assistant-bubble p { margin: 0; }
.assistant-bubble > p { margin: 0; }
/* Markdown rendu via v-html — :deep() perce le scoped */
:deep(.md-content) { font-size: inherit; line-height: 1.6; }
:deep(.md-content p) { margin: 0 0 0.4em; }
:deep(.md-content p:last-child) { margin-bottom: 0; }
:deep(.md-content strong) { font-weight: 700; }
:deep(.md-content em) { font-style: italic; }
:deep(.md-content ul) { margin: 0.3em 0 0.3em 1.1em; list-style: disc; padding: 0; }
:deep(.md-content li) { margin-bottom: 0.15em; }
:deep(.md-content a) { text-decoration: underline; opacity: 0.8; }
/* Fiches recommandées */
.fiches-list {