nav-carte/components/ChatbotPensees.vue

<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>