fix(aep): chatbot RAG pensées + config ragPeUrl + layout media + a-propos
Composant + route chatbot non committés, runtimeConfig.ragPeUrl, ajustements layout MediaTabVisuel, contenu a-propos.
This commit is contained in:
Jules Neny
448
components/ChatbotPensees.vue
Normal file
448
components/ChatbotPensees.vue
Normal file
@@ -0,0 +1,448 @@
|
||||
<template>
|
||||
<div class="chatbot-pensees" :class="{ inline: inline }">
|
||||
<!-- Header compact -->
|
||||
<div class="chatbot-header">
|
||||
<div class="chatbot-header-left">
|
||||
<div class="chatbot-icon">
|
||||
<svg width="13" height="13" 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>
|
||||
</div>
|
||||
<span class="chatbot-title">
|
||||
<template v-if="auteurContext">{{ auteurContext }}</template>
|
||||
<template v-else>Bibliothèque des pensées</template>
|
||||
</span>
|
||||
<span v-if="auteurContext" class="chatbot-corpus-badge">auteur</span>
|
||||
<span v-else class="chatbot-corpus-badge">FRACAS</span>
|
||||
</div>
|
||||
<div class="chatbot-header-right">
|
||||
<button
|
||||
v-if="messages.length > 0"
|
||||
class="chatbot-clear-btn"
|
||||
title="Effacer la conversation"
|
||||
@click="clearMessages"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
|
||||
<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<select v-model="corpusMode" class="chatbot-corpus-select" title="Corpus interrogé">
|
||||
<option value="pensees">Pensées éco.</option>
|
||||
<option value="both">Pensées + Projets</option>
|
||||
<option value="projets">Projets</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone messages -->
|
||||
<div ref="messagesContainer" class="chatbot-messages">
|
||||
<!-- Onboarding -->
|
||||
<div v-if="messages.length === 0" class="chatbot-onboarding">
|
||||
<template v-if="auteurContext">
|
||||
<p>Interroge le corpus de <strong>{{ auteurContext }}</strong> — ses livres, ses thèses, ses arguments.</p>
|
||||
<p class="chatbot-onboarding-hint">Ex : "Quelle est sa critique du capitalisme vert ?"</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p>Bibliothèque des pensées écologiques — <strong>~140 auteurs FRACAS</strong>, de l'écosocialisme à l'éthique environnementale.</p>
|
||||
<p class="chatbot-onboarding-hint">Ex : "Quelles différences entre décroissance et doughnut économics ?"</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<template v-for="(msg, i) in messages" :key="i">
|
||||
<div v-if="msg.role === 'user'" class="chatbot-bubble user">{{ msg.content }}</div>
|
||||
<div v-else class="chatbot-bubble assistant">
|
||||
<div class="chatbot-md" v-html="renderMd(msg.content)" />
|
||||
<div v-if="msg.auteur" class="chatbot-auteur-tag">
|
||||
<span>{{ msg.auteur.nom }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Chargement -->
|
||||
<div v-if="loading" class="chatbot-bubble assistant loading">
|
||||
<span class="dot" /><span class="dot" /><span class="dot" />
|
||||
</div>
|
||||
|
||||
<!-- Erreur -->
|
||||
<div v-if="errorMsg" class="chatbot-error">{{ errorMsg }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<div class="chatbot-input-row">
|
||||
<input
|
||||
v-model="inputText"
|
||||
type="text"
|
||||
:disabled="loading"
|
||||
:placeholder="auteurContext ? `Interroger ${auteurContext}…` : 'Pose ta question sur les pensées éco…'"
|
||||
class="chatbot-input"
|
||||
@keydown.enter.prevent="sendMessage"
|
||||
/>
|
||||
<button
|
||||
:disabled="loading || !inputText.trim()"
|
||||
class="chatbot-send-btn"
|
||||
aria-label="Envoyer"
|
||||
@click="sendMessage"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useMarkdown } from '~/composables/useMarkdown'
|
||||
|
||||
const { render: renderMd } = useMarkdown()
|
||||
|
||||
interface ChatMessage {
|
||||
role: 'user' | 'assistant'
|
||||
content: string
|
||||
auteur?: { slug: string; nom: string } | null
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
auteurContext: string | null
|
||||
inline?: boolean
|
||||
}>()
|
||||
|
||||
const messages = ref<ChatMessage[]>([])
|
||||
const inputText = ref('')
|
||||
const loading = ref(false)
|
||||
const errorMsg = ref('')
|
||||
const corpusMode = ref<'pensees' | 'projets' | 'both'>('pensees')
|
||||
const messagesContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
watch(() => props.auteurContext, () => {
|
||||
messages.value = []
|
||||
errorMsg.value = ''
|
||||
})
|
||||
|
||||
function clearMessages() {
|
||||
messages.value = []
|
||||
errorMsg.value = ''
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
if (messagesContainer.value) {
|
||||
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
const query = inputText.value.trim()
|
||||
if (!query || loading.value) return
|
||||
|
||||
inputText.value = ''
|
||||
errorMsg.value = ''
|
||||
messages.value.push({ role: 'user', content: query })
|
||||
loading.value = true
|
||||
|
||||
await nextTick()
|
||||
scrollToBottom()
|
||||
|
||||
try {
|
||||
const res = await $fetch<{
|
||||
response: string
|
||||
auteur: { slug: string; nom: string } | null
|
||||
}>('/api/chatbot-pensees', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
query,
|
||||
corpus: corpusMode.value,
|
||||
auteur_slug: props.auteurContext ? slugify(props.auteurContext) : undefined,
|
||||
},
|
||||
})
|
||||
messages.value.push({
|
||||
role: 'assistant',
|
||||
content: res.response,
|
||||
auteur: res.auteur ?? null,
|
||||
})
|
||||
} catch (e: any) {
|
||||
const status = e?.statusCode ?? e?.status
|
||||
if (status === 429) {
|
||||
errorMsg.value = 'Limite de 20 questions par jour atteinte.'
|
||||
} else if (status === 503) {
|
||||
errorMsg.value = 'Le RAG est indisponible pour l\'instant — réessaie dans quelques minutes.'
|
||||
} else if (status === 504) {
|
||||
errorMsg.value = 'Le RAG met du temps à répondre — réessaie dans quelques secondes.'
|
||||
} else {
|
||||
errorMsg.value = 'Une erreur est survenue. Réessaie dans quelques instants.'
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
await nextTick()
|
||||
scrollToBottom()
|
||||
}
|
||||
}
|
||||
|
||||
function slugify(str: string): string {
|
||||
return str.toLowerCase()
|
||||
.normalize('NFD').replace(/[̀-ͯ]/g, '')
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-|-$/g, '')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chatbot-pensees {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
background: var(--nav-bg);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.chatbot-header {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: var(--nav-surface);
|
||||
border-bottom: 1px solid rgba(180, 170, 160, 0.22);
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.chatbot-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chatbot-icon {
|
||||
flex-shrink: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--nav-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--nav-text-on-primary);
|
||||
}
|
||||
|
||||
.chatbot-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--nav-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.chatbot-corpus-badge {
|
||||
flex-shrink: 0;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--nav-text-muted);
|
||||
background: var(--nav-bg-alt);
|
||||
border-radius: 4px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
.chatbot-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chatbot-clear-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--nav-text-muted);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.chatbot-clear-btn:hover {
|
||||
background: var(--nav-bg-alt);
|
||||
color: var(--nav-text);
|
||||
}
|
||||
|
||||
.chatbot-corpus-select {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(180, 170, 160, 0.3);
|
||||
background: var(--nav-bg-alt);
|
||||
color: var(--nav-text-muted);
|
||||
cursor: pointer;
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
.chatbot-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.chatbot-onboarding {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.55;
|
||||
color: var(--nav-text-muted);
|
||||
background: var(--nav-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.chatbot-onboarding p { margin: 0 0 6px; }
|
||||
.chatbot-onboarding p:last-child { margin-bottom: 0; }
|
||||
.chatbot-onboarding strong { color: var(--nav-text); font-weight: 600; }
|
||||
.chatbot-onboarding-hint { font-style: italic; font-size: 0.75rem; opacity: 0.75; }
|
||||
|
||||
/* Bulles */
|
||||
.chatbot-bubble {
|
||||
max-width: 88%;
|
||||
font-size: 0.825rem;
|
||||
line-height: 1.55;
|
||||
border-radius: 10px;
|
||||
padding: 8px 11px;
|
||||
}
|
||||
|
||||
.chatbot-bubble.user {
|
||||
align-self: flex-end;
|
||||
background: var(--nav-primary);
|
||||
color: var(--nav-text-on-primary);
|
||||
border-radius: 10px 10px 3px 10px;
|
||||
}
|
||||
|
||||
.chatbot-bubble.assistant {
|
||||
align-self: flex-start;
|
||||
background: var(--nav-surface);
|
||||
border: 1px solid rgba(180, 170, 160, 0.22);
|
||||
color: var(--nav-text);
|
||||
border-radius: 10px 10px 10px 3px;
|
||||
}
|
||||
|
||||
/* Markdown dans les bulles */
|
||||
:deep(.chatbot-md) { font-size: inherit; line-height: 1.55; }
|
||||
:deep(.chatbot-md p) { margin: 0 0 0.35em; }
|
||||
:deep(.chatbot-md p:last-child) { margin-bottom: 0; }
|
||||
:deep(.chatbot-md strong) { font-weight: 700; }
|
||||
:deep(.chatbot-md em) { font-style: italic; }
|
||||
:deep(.chatbot-md ul) { margin: 0.25em 0 0.25em 1em; list-style: disc; padding: 0; }
|
||||
:deep(.chatbot-md li) { margin-bottom: 0.1em; }
|
||||
|
||||
.chatbot-auteur-tag {
|
||||
margin-top: 6px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--nav-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.chatbot-bubble.loading {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--nav-text-muted);
|
||||
animation: blink 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.dot:nth-child(2) { animation-delay: 0.2s; }
|
||||
.dot:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes blink {
|
||||
0%, 80%, 100% { opacity: 0.25; }
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Erreur */
|
||||
.chatbot-error {
|
||||
align-self: flex-start;
|
||||
font-size: 0.775rem;
|
||||
color: #a85d3e;
|
||||
background: rgba(168, 93, 62, 0.08);
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.chatbot-input-row {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-top: 1px solid rgba(180, 170, 160, 0.22);
|
||||
background: var(--nav-surface);
|
||||
}
|
||||
|
||||
.chatbot-input {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(180, 170, 160, 0.3);
|
||||
background: var(--nav-bg);
|
||||
color: var(--nav-text);
|
||||
font-family: var(--nav-font);
|
||||
font-size: 0.8rem;
|
||||
min-width: 0;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.chatbot-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--nav-primary);
|
||||
}
|
||||
|
||||
.chatbot-input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.chatbot-send-btn {
|
||||
flex-shrink: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
border: none;
|
||||
background: var(--nav-primary);
|
||||
color: var(--nav-text-on-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.chatbot-send-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.chatbot-send-btn:not(:disabled):hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
</style>
|
||||
@@ -606,8 +606,8 @@ function onInterrogerRag(auteurId: string) {
|
||||
}
|
||||
|
||||
.chatbot-split {
|
||||
flex: 0 0 34%;
|
||||
min-height: 0;
|
||||
flex: 1 1 0;
|
||||
min-height: 120px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -639,8 +639,8 @@ function onInterrogerRag(auteurId: string) {
|
||||
height: 60vh;
|
||||
}
|
||||
.chatbot-split {
|
||||
flex: 0 0 calc(40vh - 38px);
|
||||
height: calc(40vh - 38px);
|
||||
flex: 1 1 0;
|
||||
min-height: 120px;
|
||||
}
|
||||
.toggle-btn {
|
||||
font-size: 0.7rem;
|
||||
|
||||
Reference in New Issue
Block a user