668ae5caff
- server/api/chatbot-pensees.post.ts : endpoint LightRAG VPS (hybrid mode, preface militante, rate limit 20/jour, health guard) - nuxt.config.ts : ragPeUrl runtimeConfig (NUXT_RAG_PE_URL) - public/data/auteurs-pensees.json : 18 auteurs FRACAS, 8 ecoles, theses, livres RAG - components/CartePensees.vue : D3 force-directed (8 ecoles fixes + auteurs gravitants) - components/FicheAuteur.vue : modal auteur (bio + theses + livres RAG + bouton RAG) - components/ChatbotPensees.vue : overlay chatbot bottom-right (sources expansibles) - pages/pensees-ecologiques.vue : page dedicee /pensees-ecologiques (toggle Familiale/Graphe) - pages/agences.vue : 4e onglet "Pensees" (desktop + mobile) -> /pensees-ecologiques Branche : feat/aep-rag-pensees-ecologiques Checkpoint Jules requis avant merge main. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
141 lines
8.1 KiB
Vue
141 lines
8.1 KiB
Vue
<template>
|
|
<button v-if="!open" @click="open = true"
|
|
class="fixed bottom-6 right-6 z-[1000] flex items-center gap-2 px-4 rounded-full shadow-lg"
|
|
style="height:48px;background:var(--nav-primary);color:var(--nav-text-on-primary);font-size:0.875rem;font-weight:600;"
|
|
aria-label="Chatbot Pensees Ecologiques">
|
|
<svg width="16" height="16" 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>Pensees ?</span>
|
|
</button>
|
|
|
|
<Transition name="cpanel">
|
|
<div v-if="open" class="fixed bottom-6 right-6 z-[1000] flex flex-col"
|
|
style="width:min(360px,calc(100vw - 24px));max-height:60vh;background:var(--nav-surface);border-radius:14px;box-shadow:0 8px 32px rgba(26,34,56,0.22);overflow:hidden;border:1px solid var(--nav-bg-alt);"
|
|
role="dialog" aria-modal="true" aria-label="RAG Pensees Ecologiques">
|
|
<div class="flex items-center justify-between px-4 py-3 shrink-0" style="border-bottom:1px solid var(--nav-bg-alt);background:var(--nav-bg);">
|
|
<div>
|
|
<p class="text-sm font-bold" style="color:var(--nav-text);">RAG Pensees Ecologiques</p>
|
|
<p class="text-xs" style="color:var(--nav-text-muted);">{{ corpusCount }} auteurs ingeres</p>
|
|
</div>
|
|
<button @click="open = false" class="flex items-center justify-center w-7 h-7 rounded-full hover:opacity-70"
|
|
style="background:var(--nav-bg-alt);color:var(--nav-text-muted);" aria-label="Fermer">
|
|
<svg width="12" height="12" 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>
|
|
<div ref="msgEl" class="flex-1 overflow-y-auto px-4 py-3 flex flex-col gap-3" style="min-height:0;">
|
|
<div v-if="messages.length === 0" style="font-size:0.8rem;color:var(--nav-text-muted);line-height:1.5;">
|
|
Pose une question sur les pensees ecologiques : ecosocialisme, decroissance, ecofeminismes, technocritique, deep ecology...
|
|
</div>
|
|
<template v-for="(msg, i) in messages" :key="i">
|
|
<div v-if="msg.role === 'user'" class="self-end max-w-[85%] px-3 py-2 rounded-xl text-sm"
|
|
style="background:var(--nav-primary);color:var(--nav-text-on-primary);font-weight:500;">{{ msg.content }}</div>
|
|
<div v-else class="self-start max-w-full">
|
|
<div class="px-3 py-2 rounded-xl text-sm leading-relaxed" style="background:var(--nav-bg-alt);color:var(--nav-text);"
|
|
v-html="renderMd(stripSrc(msg.content))" />
|
|
<div v-if="parseSrc(msg.content).length" class="mt-1.5">
|
|
<button @click="toggled[i] = !toggled[i]" class="flex items-center gap-1 text-xs hover:opacity-70" style="color:var(--nav-text-muted);">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
|
|
:style="`transform:rotate(${toggled[i] ? 90 : 0}deg);transition:transform 0.15s`"><polyline points="9 18 15 12 9 6"/></svg>
|
|
Sources ({{ parseSrc(msg.content).length }})
|
|
</button>
|
|
<div v-if="toggled[i]" class="mt-1 flex flex-col gap-1">
|
|
<div v-for="(s, si) in parseSrc(msg.content)" :key="si" class="px-2 py-1 rounded text-xs"
|
|
style="background:var(--nav-bg-alt);color:var(--nav-text-muted);border-left:2px solid var(--nav-primary-solid);">
|
|
<span style="font-weight:600;color:var(--nav-text);">[{{ si + 1 }}]</span> {{ s }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div v-if="loading" class="self-start px-3 py-2 rounded-xl" style="background:var(--nav-bg-alt);">
|
|
<span class="dots"><span/><span style="animation-delay:150ms"/><span style="animation-delay:300ms"/></span>
|
|
</div>
|
|
<div v-if="err" class="text-xs px-3 py-2 rounded-xl" style="background:#fee;color:#c0392b;">{{ err }}</div>
|
|
</div>
|
|
<div class="shrink-0 px-3 py-3" style="border-top:1px solid var(--nav-bg-alt);">
|
|
<div class="flex items-center gap-2">
|
|
<input ref="inputEl" v-model="q" type="text" placeholder="Ta question..." maxlength="500"
|
|
class="flex-1 px-3 py-2 rounded-lg text-sm outline-none"
|
|
style="background:var(--nav-bg);color:var(--nav-text);border:1px solid var(--nav-bg-alt);"
|
|
@keydown.enter.prevent="send" />
|
|
<button @click="send" :disabled="loading || !q.trim()"
|
|
class="flex items-center justify-center w-9 h-9 rounded-lg"
|
|
:style="loading||!q.trim() ? 'background:var(--nav-bg-alt);opacity:0.5;cursor:not-allowed;' : 'background:var(--nav-primary);cursor:pointer;'"
|
|
aria-label="Envoyer">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color:white;">
|
|
<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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Message { role: 'user' | 'assistant'; content: string }
|
|
const props = defineProps<{ auteurContext?: string | null }>()
|
|
const open = ref(false)
|
|
const q = ref('')
|
|
const messages = ref<Message[]>([])
|
|
const loading = ref(false)
|
|
const err = ref('')
|
|
const toggled = ref<Record<number, boolean>>({})
|
|
const msgEl = ref<HTMLElement | null>(null)
|
|
const inputEl = ref<HTMLInputElement | null>(null)
|
|
const corpusCount = 18
|
|
|
|
watch(open, (val) => {
|
|
if (!val) return
|
|
nextTick(() => inputEl.value?.focus())
|
|
if (props.auteurContext && messages.value.length === 0)
|
|
q.value = `Quelles sont les theses centrales de ${props.auteurContext} ?`
|
|
})
|
|
watch(() => props.auteurContext, (ctx) => {
|
|
if (!ctx) return
|
|
if (!open.value) open.value = true
|
|
if (messages.value.length === 0) q.value = `Quelles sont les theses centrales de ${ctx} ?`
|
|
})
|
|
|
|
async function send() {
|
|
const query = q.value.trim()
|
|
if (!query || loading.value) return
|
|
err.value = ''
|
|
messages.value.push({ role: 'user', content: query })
|
|
q.value = ''
|
|
loading.value = true
|
|
await nextTick(); scrollBottom()
|
|
try {
|
|
const res = await $fetch<{ response: string }>('/api/chatbot-pensees', { method: 'POST', body: { query, mode: 'hybrid' } })
|
|
messages.value.push({ role: 'assistant', content: res.response ?? '' })
|
|
} catch (e: any) {
|
|
const s = e?.response?.status ?? e?.statusCode
|
|
err.value = s === 429 ? 'Limite atteinte.' : s === 503 ? 'RAG indisponible.' : 'Erreur - reessaie.'
|
|
} finally {
|
|
loading.value = false
|
|
await nextTick(); scrollBottom()
|
|
}
|
|
}
|
|
function scrollBottom() { if (msgEl.value) msgEl.value.scrollTop = msgEl.value.scrollHeight }
|
|
function renderMd(t: string) {
|
|
return '<p>' + t.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/\*(.+?)\*/g, '<em>$1</em>').replace(/\n\n/g, '</p><p>').replace(/\n/g, '<br>') + '</p>'
|
|
}
|
|
function stripSrc(t: string) { return t.replace(/\n*(?:Sources?|References?)\s*:[\s\S]*$/i, '').trim() }
|
|
function parseSrc(t: string): string[] {
|
|
const bloc = t.match(/\n*(?:Sources?|References?)\s*:\n?([\s\S]+?)$/i)
|
|
if (bloc) return bloc[1].split('\n').map(l => l.replace(/^[-*\d.[\]]+\s*/, '').trim()).filter(l => l.length > 3)
|
|
return [...new Set([...t.matchAll(/\[([^\]]{5,80})\]/g)].filter(m => m[1].includes(' - ')).map(m => m[1]))]
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.cpanel-enter-active { transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
|
|
.cpanel-leave-active { transition: opacity 0.18s, transform 0.15s ease-in; }
|
|
.cpanel-enter-from { opacity: 0; transform: translateY(12px) scale(0.95); }
|
|
.cpanel-leave-to { opacity: 0; transform: translateY(8px) scale(0.97); }
|
|
.dots span { display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--nav-text-muted);margin:0 2px;animation:bounce 1s infinite; }
|
|
@keyframes bounce { 0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)} }
|
|
</style> |