feat(rag-pe): PRG-5 + PRG-6 frontend pensees ecologiques

- 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>
This commit is contained in:
Jules Neny
2026-05-11 15:07:42 +02:00
parent f5732bf336
commit 668ae5caff
8 changed files with 890 additions and 0 deletions

135
components/CartePensees.vue Normal file
View File

@@ -0,0 +1,135 @@
<template>
<div style="width: 100%; height: 100%; position: relative; background: var(--nav-bg);">
<svg ref="svgRef" style="width: 100%; height: 100%;"></svg>
<div ref="tooltipRef" style="
position: absolute; pointer-events: none;
background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);
border-radius: 6px; padding: 8px 12px; font-size: 0.78rem;
color: var(--nav-text); max-width: 240px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
opacity: 0; transition: opacity 0.15s; z-index: 100;
"></div>
</div>
</template>
<script setup lang="ts">
interface EcoleData { id: string; label: string; description: string; color: string; x_hint: number; y_hint: number }
interface LivreRag { slug: string; titre: string; annee: number; couches: string[] }
interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }
const props = defineProps<{ data: PenseesData | null; active?: boolean }>()
const emit = defineEmits<{ 'select-auteur': [id: string] }>()
const svgRef = ref<SVGElement | null>(null)
const tooltipRef = ref<HTMLElement | null>(null)
let simulation: any = null
let d3NodeSel: any = null
let d3LinkSel: any = null
async function initGraph() {
if (!svgRef.value || !props.data) return
const d3 = await import('d3')
const svgEl = svgRef.value
const W = svgEl.clientWidth || 900
const H = svgEl.clientHeight || 600
d3.select(svgEl).selectAll('*').remove()
const svg = d3.select(svgEl).attr('viewBox', `0 0 ${W} ${H}`)
const g = svg.append('g')
svg.call(d3.zoom<SVGElement, unknown>().scaleExtent([0.3, 4]).on('zoom', (e) => g.attr('transform', e.transform)) as any)
const ecoleMap = new Map<string, EcoleData>(props.data.ecoles.map(e => [e.id, e]))
const ecoleNodes: any[] = props.data.ecoles.map(e => ({
id: `ecole-${e.id}`, type: 'ecole', ecoleId: e.id, label: e.label, color: e.color, r: 38,
x: W * e.x_hint, y: H * e.y_hint, fx: W * e.x_hint, fy: H * e.y_hint,
}))
const auteurNodes: any[] = props.data.auteurs.map(a => ({
id: a.id, type: 'auteur', nom: a.nom, dates: a.dates, bio_courte: a.bio_courte,
ecole_principale: a.ecole_principale,
color: ecoleMap.get(a.ecole_principale)?.color ?? '#888', r: 11,
}))
const allNodes = [...ecoleNodes, ...auteurNodes]
const links: any[] = []
props.data.auteurs.forEach(a => {
links.push({ source: a.id, target: `ecole-${a.ecole_principale}`, strength: 0.65 })
a.ecoles.filter(e => e !== a.ecole_principale).forEach(e => links.push({ source: a.id, target: `ecole-${e}`, strength: 0.25 }))
})
if (simulation) simulation.stop()
simulation = d3.forceSimulation(allNodes)
.force('link', d3.forceLink(links).id((d: any) => d.id).distance(90).strength((d: any) => d.strength ?? 0.5))
.force('charge', d3.forceManyBody().strength(-80))
.force('center', d3.forceCenter(W / 2, H / 2))
.force('collision', d3.forceCollide().radius((d: any) => d.r + 5))
d3LinkSel = g.append('g').selectAll('line').data(links).join('line')
.attr('stroke', 'rgba(150,150,150,0.3)').attr('stroke-width', 1.2)
d3NodeSel = g.append('g').selectAll('g').data(allNodes).join('g')
.style('cursor', (d: any) => d.type === 'auteur' ? 'pointer' : 'default')
.call(d3.drag<any, any>()
.on('start', (e: any, d: any) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y })
.on('drag', (e: any, d: any) => { d.fx = e.x; d.fy = e.y })
.on('end', (e: any, d: any) => { if (!e.active) simulation.alphaTarget(0); if (d.type !== 'ecole') { d.fx = null; d.fy = null } }))
.on('click', (e: any, d: any) => { e.stopPropagation(); if (d.type === 'auteur') emit('select-auteur', d.id) })
d3NodeSel.append('circle')
.attr('r', (d: any) => d.r)
.attr('fill', (d: any) => d.type === 'ecole' ? d.color : d.color + 'cc')
.attr('stroke', (d: any) => d.type === 'ecole' ? 'rgba(255,255,255,0.6)' : d.color)
.attr('stroke-width', (d: any) => d.type === 'ecole' ? 3 : 1.5)
d3NodeSel.filter((d: any) => d.type === 'ecole').append('text')
.attr('text-anchor', 'middle').attr('dy', '0.35em').attr('font-size', '10px').attr('font-weight', '700').attr('fill', 'white')
.style('pointer-events', 'none')
.each(function(d: any) {
const el = d3.select(this as any)
const words: string[] = d.label.split(' ')
if (words.length <= 2) { el.text(d.label) } else {
const mid = Math.ceil(words.length / 2)
el.append('tspan').attr('x', 0).attr('dy', '-0.6em').text(words.slice(0, mid).join(' '))
el.append('tspan').attr('x', 0).attr('dy', '1.2em').text(words.slice(mid).join(' '))
}
})
d3NodeSel.filter((d: any) => d.type === 'auteur').append('text')
.attr('class', 'pensees-auteur-label')
.text((d: any) => d.nom.split(' ').pop() ?? d.nom)
.attr('text-anchor', 'middle').attr('dy', (d: any) => -(d.r + 4)).attr('font-size', '9px').attr('font-weight', '500')
.style('pointer-events', 'none')
d3NodeSel.filter((d: any) => d.type === 'auteur')
.on('mouseenter', (e: any, d: any) => {
if (!tooltipRef.value) return
const bio = d.bio_courte.length > 90 ? d.bio_courte.slice(0, 87) + '...' : d.bio_courte
tooltipRef.value.innerHTML = `<strong>${d.nom}</strong> <span style="opacity:0.6;font-size:0.7rem;">${d.dates}</span><br><span style="opacity:0.75;font-size:0.72rem;">${bio}</span>`
tooltipRef.value.style.opacity = '1'
})
.on('mousemove', (e: any) => {
if (!tooltipRef.value || !svgEl) return
const rect = (svgEl as HTMLElement).getBoundingClientRect()
tooltipRef.value.style.left = (e.clientX - rect.left + 14) + 'px'
tooltipRef.value.style.top = (e.clientY - rect.top - 10) + 'px'
})
.on('mouseleave', () => { if (tooltipRef.value) tooltipRef.value.style.opacity = '0' })
simulation.on('tick', () => {
d3LinkSel.attr('x1', (d: any) => d.source.x).attr('y1', (d: any) => d.source.y)
.attr('x2', (d: any) => d.target.x).attr('y2', (d: any) => d.target.y)
d3NodeSel.attr('transform', (d: any) => `translate(${d.x},${d.y})`)
})
}
watch(() => props.active, (val) => { if (val && import.meta.client && props.data) requestAnimationFrame(() => requestAnimationFrame(() => initGraph())) })
watch(() => props.data, (val) => { if (val && props.active && import.meta.client) requestAnimationFrame(() => requestAnimationFrame(() => initGraph())) })
onMounted(async () => { if (import.meta.client && props.data && props.active) { await nextTick(); initGraph() } })
onUnmounted(() => { if (simulation) simulation.stop() })
</script>
<style>
.pensees-auteur-label { fill: var(--nav-text); opacity: 0.75; paint-order: stroke; stroke: var(--nav-bg); stroke-width: 3px; stroke-linejoin: round; user-select: none; }
</style>

View File

@@ -0,0 +1,141 @@
<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>

View File

@@ -0,0 +1,98 @@
<template>
<Teleport to="body">
<Transition name="backdrop">
<div v-if="open && auteur" class="fixed inset-0 z-[1500]" style="background: rgba(26,34,56,0.55);" @click="emit('close')" aria-hidden="true" />
</Transition>
<Transition name="modal">
<div v-if="open && auteur" class="fixed z-[1501] left-1/2 flex flex-col"
style="top:50%;transform:translate(-50%,-50%);width:min(520px,94vw);max-height:85vh;background:var(--nav-bg);border-radius:14px;box-shadow:0 16px 64px rgba(26,34,56,0.28);overflow:hidden;"
role="dialog" aria-modal="true">
<!-- Header -->
<div class="flex items-start justify-between px-5 py-4 shrink-0"
:style="`border-bottom: 3px solid ${ecoleColor}; background: var(--nav-surface);`">
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap">
<span class="px-2 py-0.5 rounded-full text-xs font-semibold" :style="`background:${ecoleColor}22;color:${ecoleColor};`">{{ ecoleLabel }}</span>
<span v-for="eid in auteur.ecoles.filter(e => e !== auteur.ecole_principale)" :key="eid"
class="px-2 py-0.5 rounded-full text-xs" :style="`background:${getEcoleColor(eid)}22;color:${getEcoleColor(eid)};`">{{ getEcoleLabel(eid) }}</span>
</div>
<h2 class="mt-2 font-bold text-lg leading-tight" style="color:var(--nav-text);">{{ auteur.nom }}</h2>
<p class="text-sm" style="color:var(--nav-text-muted);">{{ auteur.dates }}</p>
</div>
<button @click="emit('close')" class="ml-3 shrink-0 flex items-center justify-center w-8 h-8 rounded-full hover:opacity-70"
style="background:var(--nav-bg-alt);color:var(--nav-text-muted);" aria-label="Fermer">
<svg width="14" height="14" 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>
<!-- Body -->
<div class="flex-1 overflow-y-auto px-5 py-4 flex flex-col gap-4">
<p class="text-sm leading-relaxed" style="color:var(--nav-text);">{{ auteur.bio_courte }}</p>
<div v-if="auteur.theses_cles.length">
<p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Theses cles</p>
<ul class="flex flex-col gap-1.5">
<li v-for="t in auteur.theses_cles" :key="t" class="flex items-start gap-2 text-sm" style="color:var(--nav-text);">
<span class="mt-1.5 w-1.5 h-1.5 rounded-full shrink-0" :style="`background:${ecoleColor};`"></span>
<span>{{ t }}</span>
</li>
</ul>
</div>
<div v-if="auteur.livres_rag.length">
<p class="text-xs font-bold uppercase tracking-widest mb-2" style="color:var(--nav-text-muted);">Livres dans le RAG</p>
<div class="flex flex-col gap-2">
<div v-for="l in auteur.livres_rag" :key="l.slug" class="flex items-start gap-3 p-3 rounded-lg" style="background:var(--nav-bg-alt);">
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold leading-snug" style="color:var(--nav-text);">{{ l.titre }}</p>
<p class="text-xs mt-0.5" style="color:var(--nav-text-muted);">{{ l.annee }}</p>
</div>
<div class="flex gap-1 shrink-0">
<span v-for="c in l.couches" :key="c" class="px-1.5 py-0.5 rounded text-xs" style="background:var(--nav-surface);color:var(--nav-text-muted);">{{ c }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="shrink-0 px-5 py-3 border-t" style="border-color:var(--nav-bg-alt);">
<button @click="emit('interroger-rag', auteurId!)" class="w-full py-2.5 rounded-lg text-sm font-semibold hover:opacity-80"
:style="`background:${ecoleColor};color:white;`">
Interroger le RAG sur {{ auteur.nom.split(' ').pop() }}
</button>
</div>
</div>
</Transition>
</Teleport>
</template>
<script setup lang="ts">
interface LivreRag { slug: string; titre: string; annee: number; couches: string[] }
interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
interface EcoleData { id: string; label: string; color: string }
interface PenseesData { ecoles: EcoleData[]; auteurs: AuteurData[] }
const props = defineProps<{ open: boolean; auteurId: string | null; data: PenseesData | null }>()
const emit = defineEmits<{ close: []; 'interroger-rag': [auteurId: string] }>()
const auteur = computed<AuteurData | null>(() => {
if (!props.auteurId || !props.data) return null
return props.data.auteurs.find(a => a.id === props.auteurId) ?? null
})
const ecoleColor = computed(() => props.data?.ecoles.find(e => e.id === auteur.value?.ecole_principale)?.color ?? '#888')
const ecoleLabel = computed(() => props.data?.ecoles.find(e => e.id === auteur.value?.ecole_principale)?.label ?? '')
function getEcoleColor(id: string) { return props.data?.ecoles.find(e => e.id === id)?.color ?? '#888' }
function getEcoleLabel(id: string) { return props.data?.ecoles.find(e => e.id === id)?.label ?? id }
function onKey(e: KeyboardEvent) { if (e.key === 'Escape' && props.open) emit('close') }
onMounted(() => window.addEventListener('keydown', onKey))
onUnmounted(() => window.removeEventListener('keydown', onKey))
</script>
<style scoped>
.backdrop-enter-active,.backdrop-leave-active { transition: opacity 0.2s; }
.backdrop-enter-from,.backdrop-leave-to { opacity: 0; }
.modal-enter-active { transition: opacity 0.2s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); }
.modal-leave-active { transition: opacity 0.18s, transform 0.18s ease-in; }
.modal-enter-from { opacity: 0; transform: translate(-50%,-48%) scale(0.94); }
.modal-leave-to { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }
</style>

View File

@@ -23,6 +23,7 @@ export default defineNuxtConfig({
codevPassword: 'merci', // NUXT_CODEV_PASSWORD - défaut "merci", overridable
codevBaseId: '', // NUXT_CODEV_BASE_ID - base NocoDB (ex: pipilvsi7dibo80)
codevAdminPassword: 'admin2026', // NUXT_CODEV_ADMIN_PASSWORD
ragPeUrl: process.env.NUXT_RAG_PE_URL || 'http://localhost:9621',
},
// Leaflet ne fonctionne pas en SSR — forcer le rendu côté client

View File

@@ -128,6 +128,12 @@
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
@click="desktopMapView = 'graphe'"
>Vue graphique</button>
<NuxtLink
to="/pensees-ecologiques"
class="px-5 py-2 text-sm font-medium transition-colors"
style="color: var(--nav-text-muted); border-bottom: 2px solid transparent;"
active-class="!color-nav-text"
>Pensees</NuxtLink>
</div>
<!-- Carte Métropole desktop -->
@@ -219,6 +225,11 @@
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
@click="mobileMapView = 'graphe'"
>Graphe</button>
<NuxtLink
to="/pensees-ecologiques"
class="flex-1 py-2 text-sm font-medium transition-colors text-center"
style="color: var(--nav-text-muted); border-bottom: 2px solid transparent;"
>Pensees</NuxtLink>
</div>
<div class="lg:hidden flex-1 relative overflow-hidden">

View File

@@ -0,0 +1,119 @@
<template>
<div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">
<!-- ZONE PRINCIPALE (pleine largeur, pas de sidebar) -->
<main class="flex-1 flex flex-col overflow-hidden relative">
<!-- Header onglet -->
<div class="shrink-0 flex items-center justify-between px-5 py-3"
style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
<div>
<h1 class="font-bold text-base" style="color: var(--nav-text);">Pensees Ecologiques</h1>
<p class="text-xs mt-0.5" style="color: var(--nav-text-muted);">
{{ corpusCount }} auteurs ingeres dans le RAG - carte FRACAS Bonpote V2
</p>
</div>
<!-- Toggle vue -->
<div class="flex items-center gap-1 p-1 rounded-lg" style="background: var(--nav-bg-alt);">
<button
@click="vue = 'familiale'"
class="px-3 py-1.5 rounded-md text-xs font-semibold transition-all"
:style="vue === 'familiale'
? 'background: var(--nav-surface); color: var(--nav-text); box-shadow: 0 1px 3px rgba(0,0,0,0.12);'
: 'color: var(--nav-text-muted);'"
>Familiale</button>
<button
@click="vue = 'graphe'"
class="px-3 py-1.5 rounded-md text-xs font-semibold transition-all"
:style="vue === 'graphe'
? 'background: var(--nav-surface); color: var(--nav-text); box-shadow: 0 1px 3px rgba(0,0,0,0.12);'
: 'color: var(--nav-text-muted);'"
>Graphe</button>
</div>
</div>
<!-- Vue Familiale (CartePensees D3 force-directed) -->
<div v-show="vue === 'familiale'" class="flex-1 overflow-hidden relative">
<ClientOnly>
<CartePensees
:data="penseesData"
:active="vue === 'familiale'"
@select-auteur="onSelectAuteur"
/>
<template #fallback>
<div class="w-full h-full flex items-center justify-center" style="color: var(--nav-text-muted);">
Chargement de la carte...
</div>
</template>
</ClientOnly>
</div>
<!-- Vue Graphe (GraphView existant adapte) -->
<div v-show="vue === 'graphe'" class="flex-1 overflow-hidden relative">
<ClientOnly>
<CartePensees
:data="penseesData"
:active="vue === 'graphe'"
@select-auteur="onSelectAuteur"
/>
<template #fallback>
<div class="w-full h-full flex items-center justify-center" style="color: var(--nav-text-muted);">
Chargement du graphe...
</div>
</template>
</ClientOnly>
</div>
</main>
<!-- Fiche auteur modal -->
<FicheAuteur
:open="ficheOpen"
:auteurId="ficheAuteurId"
:data="penseesData"
@close="ficheOpen = false"
@interroger-rag="onInterrogerRag"
/>
<!-- Chatbot flottant -->
<ChatbotPensees :auteurContext="chatbotAuteur" />
</div>
</template>
<script setup lang="ts">
interface EcoleData { id: string; label: string; description: string; color: string; x_hint: number; y_hint: number }
interface LivreRag { slug: string; titre: string; annee: number; couches: string[] }
interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
interface PenseesData { meta: any; ecoles: EcoleData[]; auteurs: AuteurData[] }
const vue = ref<'familiale' | 'graphe'>('familiale')
const ficheOpen = ref(false)
const ficheAuteurId = ref<string | null>(null)
const chatbotAuteur = ref<string | null>(null)
const penseesData = ref<PenseesData | null>(null)
const corpusCount = computed(() => penseesData.value?.auteurs.length ?? 0)
onMounted(async () => {
try {
penseesData.value = await $fetch<PenseesData>('/data/auteurs-pensees.json')
} catch (e) {
console.error('Erreur chargement auteurs-pensees.json', e)
}
})
function onSelectAuteur(id: string) {
ficheAuteurId.value = id
ficheOpen.value = true
chatbotAuteur.value = null
}
function onInterrogerRag(auteurId: string) {
ficheOpen.value = false
const auteur = penseesData.value?.auteurs.find(a => a.id === auteurId)
chatbotAuteur.value = auteur?.nom ?? null
}
useHead({ title: 'AEP - Pensees Ecologiques - Carte FRACAS' })
</script>

View File

@@ -0,0 +1,300 @@
{
"meta": {
"version": "1.0",
"source": "FRACAS Bonpote V2 oct 2024 + LightRAG corpus J+2",
"corpus_ingere": 27,
"updated": "2026-05-11"
},
"ecoles": [
{
"id": "ecosocialisme",
"label": "Écosocialisme",
"description": "Synthèse du marxisme et de l'écologie. Articule la critique du capitalisme et la crise écologique comme deux faces d'un même système.",
"color": "#c0392b",
"x_hint": 0.55,
"y_hint": 0.28
},
{
"id": "eco-anarchisme",
"label": "Éco-anarchisme",
"description": "Écologies libertaires et anti-industrielles. Contre l'État, le capitalisme et la domination de la nature — pour l'autogestion et le municipalisme libertaire.",
"color": "#2d6a4f",
"x_hint": 0.25,
"y_hint": 0.3
},
{
"id": "decroissance",
"label": "Décroissance",
"description": "Critique radicale de la croissance économique comme horizon. Pour une réduction volontaire de la production et de la consommation.",
"color": "#e67e22",
"x_hint": 0.38,
"y_hint": 0.42
},
{
"id": "ecofeminismes",
"label": "Écoféminismes",
"description": "Connexions entre la domination des femmes et la domination de la nature. Féminisme de la subsistance, critique du développement, commons.",
"color": "#e07a5f",
"x_hint": 0.48,
"y_hint": 0.68
},
{
"id": "technocritique",
"label": "Technocritique",
"description": "Critique radicale de la technique comme système autonome. Contre l'illusion de la technologie comme solution aux crises qu'elle engendre.",
"color": "#7f8c8d",
"x_hint": 0.2,
"y_hint": 0.48
},
{
"id": "ecologies-decoloniales",
"label": "Écologies décoloniales",
"description": "Articulation des luttes écologiques et des luttes anticoloniales. Critique de l'extractivisme comme continuation du colonialisme.",
"color": "#b5451b",
"x_hint": 0.3,
"y_hint": 0.72
},
{
"id": "ethiques-environnementales",
"label": "Éthiques environnementales",
"description": "Philosophies de la nature : deep ecology, écocentrisme, droits des non-humains. Valeur intrinsèque du vivant.",
"color": "#2c7873",
"x_hint": 0.72,
"y_hint": 0.72
},
{
"id": "pensees-vivant",
"label": "Pensées du vivant",
"description": "Anthropologie et ontologies de la nature. Dépasser le dualisme nature/culture. Sympoïèse, multi-espèces.",
"color": "#6b8e6e",
"x_hint": 0.62,
"y_hint": 0.58
}
],
"auteurs": [
{
"id": "murray-bookchin",
"nom": "Murray Bookchin",
"dates": "1921-2006",
"ecoles": ["eco-anarchisme"],
"ecole_principale": "eco-anarchisme",
"livres_rag": [
{ "slug": "bookchin-ecology-of-freedom", "titre": "L'Écologie de la liberté", "annee": 1982, "couches": ["fond", "structure"] },
{ "slug": "bookchin-post-scarcity", "titre": "Post-Scarcity Anarchism", "annee": 1971, "couches": ["fond", "structure"] },
{ "slug": "bookchin-urbanization", "titre": "The Rise of Urbanization and the Decline of Citizenship", "annee": 1987, "couches": ["fond", "structure"] }
],
"theses_cles": ["Municipalisme libertaire", "Écologie sociale", "Hiérarchie comme origine de la domination nature"],
"bio_courte": "Théoricien américain de l'écologie sociale et du municipalisme libertaire. A développé le concept d'\"écologie sociale\" articulant domination sociale et destruction de la nature."
},
{
"id": "pierre-kropotkine",
"nom": "Pierre Kropotkine",
"dates": "1842-1921",
"ecoles": ["eco-anarchisme"],
"ecole_principale": "eco-anarchisme",
"livres_rag": [
{ "slug": "kropotkine-entraide", "titre": "L'Entraide, un facteur de l'évolution", "annee": 1902, "couches": ["fond", "structure"] },
{ "slug": "kropotkine-pain", "titre": "La Conquête du pain", "annee": 1892, "couches": ["fond", "structure"] }
],
"theses_cles": ["Entraide vs sélection naturelle darwiniste", "Fédéralisme anarchiste", "Géographie critique"],
"bio_courte": "Géographe et révolutionnaire russe. Son oeuvre centrale démontre que l'entraide, et non la compétition, est le moteur principal de l'évolution."
},
{
"id": "michael-lowy",
"nom": "Michael Löwy",
"dates": "1938-",
"ecoles": ["ecosocialisme"],
"ecole_principale": "ecosocialisme",
"livres_rag": [
{ "slug": "lowy-ecosocialisme", "titre": "Écosocialisme", "annee": 2011, "couches": ["fond", "structure"] }
],
"theses_cles": ["Romantisme révolutionnaire", "Anticapitalisme écologique", "Walter Benjamin et l'écologie"],
"bio_courte": "Sociologue franco-brésilien, figure centrale de l'écosocialisme. Articule marxisme hétérodoxe et critique de la modernité industrielle."
},
{
"id": "andreas-malm",
"nom": "Andreas Malm",
"dates": "1977-",
"ecoles": ["ecosocialisme"],
"ecole_principale": "ecosocialisme",
"livres_rag": [
{ "slug": "malm-fossil-capital", "titre": "Fossil Capital", "annee": 2016, "couches": ["fond", "structure"] },
{ "slug": "malm-comment-saboter", "titre": "Comment saboter un pipeline ?", "annee": 2020, "couches": ["fond", "structure"] },
{ "slug": "malm-corona-climat", "titre": "Corona, Climate, Chronic Emergency", "annee": 2020, "couches": ["fond", "structure"] }
],
"theses_cles": ["Capitalisme fossile", "Sabotage stratégique", "Urgence climatique et action directe"],
"bio_courte": "Professeur d'écologie humaine à Lund. Théoricien du 'capital fossile' et défenseur d'une écologie de guerre pour répondre à l'urgence climatique."
},
{
"id": "kohei-saito",
"nom": "Kohei Saito",
"dates": "1987-",
"ecoles": ["ecosocialisme"],
"ecole_principale": "ecosocialisme",
"livres_rag": [
{ "slug": "saito-marx-ecosocialisme", "titre": "Marx dans l'Anthropocène", "annee": 2020, "couches": ["fond", "structure"] }
],
"theses_cles": ["Marx et l'écologie", "Métabolisme social", "Décroissance communiste"],
"bio_courte": "Philosophe japonais, auteur d'une relecture écologiste des cahiers tardifs de Marx. Défend une 'décroissance communiste' comme horizon."
},
{
"id": "karl-marx",
"nom": "Karl Marx",
"dates": "1818-1883",
"ecoles": ["ecosocialisme", "eco-anarchisme"],
"ecole_principale": "ecosocialisme",
"livres_rag": [
{ "slug": "marx-manuscrits-1844", "titre": "Manuscrits de 1844", "annee": 1844, "couches": ["fond", "structure"] },
{ "slug": "marx-capital", "titre": "Le Capital", "annee": 1867, "couches": ["fond", "structure"] },
{ "slug": "marx-grundrisse", "titre": "Grundrisse", "annee": 1857, "couches": ["fond", "structure"] }
],
"theses_cles": ["Métabolisme entre travail humain et nature", "Aliénation naturelle", "Accumulation primitive"],
"bio_courte": "Pensée-racine de l'écosocialisme. Les Grundrisse et le Capital contiennent une critique écologique du capitalisme souvent occultée."
},
{
"id": "serge-latouche",
"nom": "Serge Latouche",
"dates": "1940-",
"ecoles": ["decroissance"],
"ecole_principale": "decroissance",
"livres_rag": [
{ "slug": "latouche-decroissance", "titre": "Le Pari de la décroissance", "annee": 2006, "couches": ["fond", "structure"] },
{ "slug": "latouche-petit-traite", "titre": "Petit traité de la décroissance sereine", "annee": 2007, "couches": ["fond", "structure"] }
],
"theses_cles": ["Sereine décroissance", "Critique du développement", "Société frugale abondante"],
"bio_courte": "Économiste hétérodoxe franco-algérien, principal théoricien de la décroissance en France. Critique radical de l'économie du développement."
},
{
"id": "pablo-servigne",
"nom": "Pablo Servigne",
"dates": "1978-",
"ecoles": ["decroissance", "pensees-vivant"],
"ecole_principale": "decroissance",
"livres_rag": [
{ "slug": "servigne-comment-tout", "titre": "Comment tout peut s'effondrer", "annee": 2015, "couches": ["fond", "structure"] }
],
"theses_cles": ["Collapsologie", "Entraide comme résilience", "Transition post-collapse"],
"bio_courte": "Ingénieur agronome belge, cofondateur de la collapsologie. Explore les conditions d'un effondrement de la civilisation industrielle et les voies de résilience."
},
{
"id": "donella-meadows",
"nom": "Dennis et Donella Meadows",
"dates": "1941-2001 / 1942-",
"ecoles": ["decroissance"],
"ecole_principale": "decroissance",
"livres_rag": [
{ "slug": "meadows-limites-croissance", "titre": "Les Limites à la croissance", "annee": 1972, "couches": ["fond", "structure"] }
],
"theses_cles": ["Limites planétaires", "Modèles systémiques", "Overshoot"],
"bio_courte": "Le rapport Meadows (1972) est le premier modèle systémique démontrant l'impossibilité d'une croissance infinie dans un monde fini."
},
{
"id": "francoise-deaubonne",
"nom": "Françoise d'Eaubonne",
"dates": "1920-2005",
"ecoles": ["ecofeminismes"],
"ecole_principale": "ecofeminismes",
"livres_rag": [
{ "slug": "eaubonne-feminisme-mort", "titre": "Le Féminisme ou la mort", "annee": 1974, "couches": ["fond", "structure"] }
],
"theses_cles": ["Écoféminisme (terme inventé)", "Patriarcat et destruction de la nature", "Révolution féministe écologique"],
"bio_courte": "Féministe française, inventrice du terme 'écoféminisme' en 1974. Lie patriarcat et destruction de l'environnement dans une même critique."
},
{
"id": "silvia-federici",
"nom": "Silvia Federici",
"dates": "1942-",
"ecoles": ["ecofeminismes"],
"ecole_principale": "ecofeminismes",
"livres_rag": [
{ "slug": "federici-caliban", "titre": "Caliban et la sorcière", "annee": 2004, "couches": ["fond", "structure"] }
],
"theses_cles": ["Accumulation primitive et corps des femmes", "Chasse aux sorcières", "Travail reproductif"],
"bio_courte": "Philosophe italo-américaine, théoricienne du féminisme marxiste. Caliban et la sorcière relit l'accumulation primitive à travers la domination des femmes."
},
{
"id": "vandana-shiva",
"nom": "Vandana Shiva",
"dates": "1952-",
"ecoles": ["ecofeminismes", "ecologies-decoloniales"],
"ecole_principale": "ecofeminismes",
"livres_rag": [
{ "slug": "shiva-monocultures-esprit", "titre": "Monocultures of the Mind", "annee": 1993, "couches": ["fond", "structure"] }
],
"theses_cles": ["Biopiraterie", "Souveraineté alimentaire", "Écoféminisme tiers-mondiste"],
"bio_courte": "Physicienne et militante indienne, figure mondiale de l'écoféminisme et de la souveraineté alimentaire. Cofondatrice de Navdanya."
},
{
"id": "malcolm-ferdinand",
"nom": "Malcom Ferdinand",
"dates": "1985-",
"ecoles": ["ecologies-decoloniales"],
"ecole_principale": "ecologies-decoloniales",
"livres_rag": [
{ "slug": "ferdinand-ecologie-decoloniale", "titre": "Une écologie décoloniale", "annee": 2019, "couches": ["fond", "structure"] }
],
"theses_cles": ["Double fracture coloniale et écologique", "Habiter le monde", "Antillanité et écologie"],
"bio_courte": "Ingénieur et philosophe martiniquais. Son oeuvre articule colonialisme et destruction de l'environnement autour de la 'double fracture' historique."
},
{
"id": "jacques-ellul",
"nom": "Jacques Ellul",
"dates": "1912-1994",
"ecoles": ["technocritique"],
"ecole_principale": "technocritique",
"livres_rag": [
{ "slug": "ellul-technique-enjeu", "titre": "La Technique ou l'Enjeu du siècle", "annee": 1954, "couches": ["fond", "structure"] }
],
"theses_cles": ["Technique comme système autonome", "Efficacité comme valeur unique", "Propagande et technosystème"],
"bio_courte": "Juriste, sociologue et théologien bordelais. Son oeuvre fondatrice analyse la Technique comme système autonome qui échappe à tout contrôle humain."
},
{
"id": "david-graeber",
"nom": "David Graeber",
"dates": "1961-2020",
"ecoles": ["eco-anarchisme"],
"ecole_principale": "eco-anarchisme",
"livres_rag": [
{ "slug": "graeber-dette", "titre": "Dette : 5000 ans d'histoire", "annee": 2011, "couches": ["fond", "structure"] }
],
"theses_cles": ["Dette comme instrument de domination", "Anthropologie anarchiste", "Bullshit jobs"],
"bio_courte": "Anthropologue américain, figure du mouvement Occupy. Ses travaux anthropologiques déconstruisent les mythes fondateurs du capitalisme (troc, dette, marché)."
},
{
"id": "philippe-descola",
"nom": "Philippe Descola",
"dates": "1949-",
"ecoles": ["pensees-vivant"],
"ecole_principale": "pensees-vivant",
"livres_rag": [
{ "slug": "descola-par-dela-nature", "titre": "Par-delà nature et culture", "annee": 2005, "couches": ["fond", "structure"] }
],
"theses_cles": ["Dualisme nature/culture comme exception occidentale", "4 ontologies (animisme, totémisme, analogisme, naturalisme)", "Cosmopolitiques"],
"bio_courte": "Anthropologue et ethnologue français, successeur de Lévi-Strauss au Collège de France. Démontre que le dualisme nature/culture est une anomalie culturelle."
},
{
"id": "rachel-carson",
"nom": "Rachel Carson",
"dates": "1907-1964",
"ecoles": ["ethiques-environnementales"],
"ecole_principale": "ethiques-environnementales",
"livres_rag": [
{ "slug": "carson-printemps-silencieux", "titre": "Printemps silencieux", "annee": 1962, "couches": ["fond", "structure"] }
],
"theses_cles": ["Impact des pesticides sur les écosystèmes", "Naissance du mouvement environnementaliste moderne", "Responsabilité scientifique"],
"bio_courte": "Marine biologist and author américaine. Son livre Printemps silencieux (1962) a lancé le mouvement environnementaliste moderne en dénonçant les pesticides."
},
{
"id": "arne-naess",
"nom": "Arne Næss",
"dates": "1912-2009",
"ecoles": ["ethiques-environnementales"],
"ecole_principale": "ethiques-environnementales",
"livres_rag": [
{ "slug": "naess-ecologie-profonde", "titre": "Écologie, communauté et style de vie", "annee": 1989, "couches": ["fond", "structure"] }
],
"theses_cles": ["Deep ecology vs écologie superficielle", "Égalité biosphérique", "Réalisation de Soi élargie"],
"bio_courte": "Philosophe norvégien, fondateur de la 'deep ecology'. Défend une valeur intrinsèque de tous les êtres vivants, indépendamment de leur utilité pour les humains."
}
]
}

View File

@@ -0,0 +1,85 @@
import type { H3Event } from 'h3'
import { checkRateLimitJson } from '~/server/utils/rateLimitJson'
interface ChatbotPenseesRequest {
query: string
mode?: 'hybrid' | 'local' | 'global' | 'naive' | 'mix'
filter_couche?: 'fond' | 'forme' | 'structure' | null
filter_ecole?: string | null
history?: Array<{ role: 'user' | 'assistant'; content: string }>
}
interface LightRAGQueryResponse {
response: string
}
const SYSTEM_PREFACE = `Tu es un agent du RAG Pensées Écologiques, infrastructure militante du collectif trans-former.fr.
Tu réponds en t'appuyant STRICTEMENT sur le corpus ingéré (auteurs FRACAS Bonpote : écosocialisme, éco-anarchisme, écoféminismes, écologies décoloniales, technocritique, pensées du vivant, décroissance...).
Règles :
- Cite les sources (auteur, livre) à chaque assertion importante.
- Si la question dépasse le corpus, dis-le clairement. Pas d'hallucination.
- Ton politique direct, pas de neutralité fade.
- Réponse en français, dense, sans délayage.
- Distingue les positions selon les écoles quand elles divergent.`
export default defineEventHandler(async (event: H3Event) => {
const config = useRuntimeConfig(event)
// 1. Rate limit (20 req/jour/IP, IP hashée RGPD)
const ip =
getHeader(event, 'x-forwarded-for')?.split(',')[0].trim() ||
event.node.req.socket?.remoteAddress ||
'0.0.0.0'
const allowed = checkRateLimitJson(ip, 'chatbot-pensees', 20)
if (!allowed) {
throw createError({ statusCode: 429, message: 'Limite de 20 questions par jour atteinte.' })
}
// 2. Body parse + validation
const body = await readBody<ChatbotPenseesRequest>(event)
if (!body?.query || body.query.trim().length < 3 || body.query.trim().length > 500) {
throw createError({ statusCode: 400, message: 'Query invalide (3-500 caractères).' })
}
const query = body.query.trim()
const mode = body.mode || 'hybrid'
const ragUrl = (config.ragPeUrl as string) || 'http://localhost:9621'
// 3. Health guard — LightRAG down = erreur claire, pas de fallback hallucinatoire
try {
await $fetch(`${ragUrl}/health`, { timeout: 5000 })
} catch {
throw createError({
statusCode: 503,
message: 'RAG indisponible pour l\'instant — réessaie dans quelques minutes.',
})
}
// 4. Call LightRAG VPS — préface système injectée dans la query
const ragQuery = `${SYSTEM_PREFACE}\n\nQuestion : ${query}`
let ragResponse: LightRAGQueryResponse
try {
ragResponse = await $fetch<LightRAGQueryResponse>(`${ragUrl}/query`, {
method: 'POST',
body: { query: ragQuery, mode },
timeout: 90000,
})
} catch (e: any) {
const status = e?.response?.status
if (status === 429) {
throw createError({ statusCode: 429, message: 'RAG saturé — réessaie dans quelques instants.' })
}
throw createError({ statusCode: 504, message: 'RAG en cours de processing — réessaie dans quelques secondes.' })
}
// 5. Retour formaté
return {
response: ragResponse.response ?? '',
mode,
filter: { couche: body.filter_couche ?? null, ecole: body.filter_ecole ?? null },
timestamp: new Date().toISOString(),
}
})