5967a5af57
- 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>
209 lines
9.4 KiB
Vue
209 lines
9.4 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<transition name="backdrop">
|
|
<div
|
|
v-if="modelValue"
|
|
class="fixed inset-0 z-[1010]"
|
|
style="background: rgba(26,34,56,0.5);"
|
|
@click="emit('update:modelValue', false)"
|
|
aria-hidden="true"
|
|
/>
|
|
</transition>
|
|
|
|
<transition name="sheet">
|
|
<div
|
|
v-if="modelValue"
|
|
class="fixed inset-x-0 bottom-0 z-[1011] flex flex-col"
|
|
style="background: var(--nav-surface); height: 100dvh; max-height: 100dvh; box-shadow: 0 -4px 32px rgba(26,34,56,0.18);"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Assistant Réseaux AEP"
|
|
>
|
|
<div class="flex justify-center pt-3 pb-1 shrink-0">
|
|
<div class="rounded-full" style="width: 36px; height: 4px; background: var(--nav-bg-alt);" />
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between px-4 py-3 shrink-0 border-b" style="border-color: var(--nav-bg-alt);">
|
|
<button
|
|
@click="emit('update:modelValue', false)"
|
|
class="flex items-center gap-2 text-sm font-medium transition-opacity hover:opacity-70"
|
|
style="color: var(--nav-text-muted);"
|
|
aria-label="Retour"
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="15 18 9 12 15 6"/>
|
|
</svg>
|
|
Retour
|
|
</button>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full flex items-center justify-center shrink-0" style="background: var(--nav-primary);">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" 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>
|
|
<span class="font-bold text-sm" style="color: var(--nav-text);">Réseaux AEP</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div ref="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-3">
|
|
<div v-if="messages.length === 0" class="onboarding-bubble">
|
|
<p>Je connais les <strong>120 réseaux, collectifs et agences</strong> cartographiés dans AEP — ceux qui portent une vision écologique et politique de l'architecture.</p>
|
|
<p>Décris ta situation : tu cherches un collectif, une agence inspirante, un partenaire sur un projet en Occitanie, en transition énergétique ?</p>
|
|
</div>
|
|
|
|
<template v-for="(msg, i) in messages" :key="i">
|
|
<div v-if="msg.role === 'user'" class="user-bubble">{{ msg.content }}</div>
|
|
<div v-else class="assistant-bubble">
|
|
<div v-html="renderMd(msg.content)" />
|
|
<div v-if="msg.fiches && msg.fiches.length > 0" class="fiches-list" style="margin-top:12px;">
|
|
<p class="fiches-title">Structures recommandées :</p>
|
|
<a
|
|
v-for="fiche in msg.fiches"
|
|
:key="fiche.id"
|
|
:href="`/agences#${fiche.id}`"
|
|
class="fiche-card"
|
|
>
|
|
<span class="fiche-nom">{{ fiche.nom }}</span>
|
|
<span v-if="fiche.explication" class="fiche-expl">{{ fiche.explication }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="loading" class="assistant-bubble loading-bubble">
|
|
<span class="dot" /><span class="dot" /><span class="dot" />
|
|
</div>
|
|
<div v-if="errorMsg" class="error-bubble">{{ errorMsg }}</div>
|
|
</div>
|
|
|
|
<div class="shrink-0 px-4 pt-3 border-t" style="border-color: var(--nav-bg-alt); padding-bottom: max(1rem, env(safe-area-inset-bottom));">
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
v-model="inputText"
|
|
type="text"
|
|
:disabled="loading"
|
|
placeholder="Décris ta situation…"
|
|
class="flex-1 px-4 py-3 rounded-xl text-sm border"
|
|
style="border-color: var(--nav-bg-alt); background: var(--nav-bg); color: var(--nav-text); font-family: var(--nav-font); font-size: 16px;"
|
|
@keydown.enter.prevent="sendMessage"
|
|
/>
|
|
<button
|
|
:disabled="loading || !inputText.trim()"
|
|
class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0 transition-opacity"
|
|
style="background: var(--nav-primary);"
|
|
:style="{ opacity: (loading || !inputText.trim()) ? 0.4 : 1 }"
|
|
aria-label="Envoyer"
|
|
@click="sendMessage"
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--nav-text-on-primary);">
|
|
<line x1="22" y1="2" x2="11" y2="13"/>
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useMarkdown } from '~/composables/useMarkdown'
|
|
const { render: renderMd } = useMarkdown()
|
|
|
|
interface FicheReco { id: number | string; nom: string; explication?: string }
|
|
interface ChatMessage { role: 'user' | 'assistant'; content: string; fiches?: FicheReco[] }
|
|
|
|
const props = defineProps<{ modelValue: boolean }>()
|
|
const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
|
|
|
|
const messages = ref<ChatMessage[]>([])
|
|
const inputText = ref('')
|
|
const loading = ref(false)
|
|
const errorMsg = ref('')
|
|
const messagesContainer = ref<HTMLElement | null>(null)
|
|
|
|
watch(() => props.modelValue, (open) => {
|
|
if (typeof document === 'undefined') return
|
|
document.body.style.overflow = open ? 'hidden' : ''
|
|
document.documentElement.style.overflow = open ? 'hidden' : ''
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (typeof document !== 'undefined') {
|
|
document.body.style.overflow = ''
|
|
document.documentElement.style.overflow = ''
|
|
}
|
|
})
|
|
|
|
async function sendMessage() {
|
|
const question = inputText.value.trim()
|
|
if (!question || loading.value) return
|
|
inputText.value = ''
|
|
errorMsg.value = ''
|
|
messages.value.push({ role: 'user', content: question })
|
|
loading.value = true
|
|
await nextTick()
|
|
if (messagesContainer.value) messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
|
|
|
try {
|
|
const res = await $fetch<{ reponse_texte: string; fiches_recommandees: FicheReco[] }>(
|
|
'/api/chatbot-reseaux',
|
|
{ method: 'POST', body: { question } }
|
|
)
|
|
messages.value.push({ role: 'assistant', content: res.reponse_texte, fiches: res.fiches_recommandees || [] })
|
|
} catch (e: any) {
|
|
const s = e?.statusCode ?? e?.status
|
|
errorMsg.value = s === 429
|
|
? 'Limite de 20 questions par jour atteinte.'
|
|
: 'Une erreur est survenue. Réessaie dans quelques instants.'
|
|
} finally {
|
|
loading.value = false
|
|
await nextTick()
|
|
if (messagesContainer.value) messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
|
|
.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
|
|
.sheet-enter-active, .sheet-leave-active { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
|
|
.sheet-enter-from, .sheet-leave-to { transform: translateY(100%); }
|
|
|
|
.onboarding-bubble {
|
|
background: var(--nav-bg); border: 1px solid var(--nav-bg-alt);
|
|
border-radius: 12px; padding: 16px;
|
|
font-size: 0.85rem; line-height: 1.65; color: var(--nav-text-muted);
|
|
}
|
|
.onboarding-bubble p { margin-bottom: 10px; }
|
|
.onboarding-bubble strong { font-weight: 700; color: var(--nav-text); }
|
|
|
|
.user-bubble {
|
|
align-self: flex-end; max-width: 80%;
|
|
background: var(--nav-primary); color: var(--nav-text-on-primary);
|
|
border-radius: 16px 16px 4px 16px; padding: 10px 14px;
|
|
font-size: 0.875rem; line-height: 1.5;
|
|
}
|
|
.assistant-bubble {
|
|
align-self: flex-start; max-width: 90%;
|
|
background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);
|
|
border-radius: 16px 16px 16px 4px; padding: 12px 14px;
|
|
font-size: 0.875rem; line-height: 1.6; color: var(--nav-text);
|
|
}
|
|
.loading-bubble { display: flex; gap: 5px; align-items: center; }
|
|
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nav-text-muted); animation: blink 1.2s infinite; }
|
|
.dot:nth-child(2) { animation-delay: 0.2s; }
|
|
.dot:nth-child(3) { animation-delay: 0.4s; }
|
|
@keyframes blink { 0%,80%,100% { opacity: 0.3; } 40% { opacity: 1; } }
|
|
|
|
.error-bubble { align-self: flex-start; max-width: 90%; color: #a85d3e; font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; background: rgba(168,93,62,0.08); }
|
|
|
|
.fiches-list { display: flex; flex-direction: column; gap: 6px; }
|
|
.fiches-title { font-size: 0.75rem; font-weight: 600; color: var(--nav-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
|
|
.fiche-card { display: block; background: var(--nav-bg); border: 1px solid var(--nav-bg-alt); border-radius: 8px; padding: 8px 12px; text-decoration: none; transition: background 0.15s; }
|
|
.fiche-card:hover { background: var(--nav-bg-alt); }
|
|
.fiche-nom { display: block; font-size: 0.875rem; font-weight: 600; color: var(--nav-text); }
|
|
.fiche-expl { display: block; font-size: 0.8rem; color: var(--nav-text-muted); margin-top: 2px; }
|
|
</style>
|