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>
99 lines
6.0 KiB
Vue
99 lines
6.0 KiB
Vue
<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>
|