From 4c57f30f6aca79fdcf9e6085c83053462791a035 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Fri, 9 Oct 2026 03:49:56 +0200
Subject: [PATCH] =?UTF-8?q?feat(chatbot):=20composant=20ChatModeToggle=20(?=
 =?UTF-8?q?radiogroup)=20et=20=C3=A9tat=20partag=C3=A9=20du=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Toggle sobre 2 options (role radiogroup, flèches/Home/End, focus visible,
reduced-motion), étiquette de mode sur les réponses approfondies, et
useChatProfondeur (état par clé, desktop et mobile synchronisés). Libellés lus
dans utils/chatProfondeur.ts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015vcVGz8i4WpZm2dixKUiSD
---
 components/ChatModeBadge.vue     | 21 +++++++++
 components/ChatModeToggle.vue    | 80 ++++++++++++++++++++++++++++++++
 composables/useChatProfondeur.ts | 13 ++++++
 3 files changed, 114 insertions(+)
 create mode 100644 components/ChatModeBadge.vue
 create mode 100644 components/ChatModeToggle.vue
 create mode 100644 composables/useChatProfondeur.ts

diff --git a/components/ChatModeBadge.vue b/components/ChatModeBadge.vue
new file mode 100644
index 0000000..f5d62bf
--- /dev/null
+++ b/components/ChatModeBadge.vue
@@ -0,0 +1,21 @@
+<template>
+  <span v-if="profondeur === 'approfondi'" class="chat-mode-badge">{{ CHAT_PROFONDEUR_LIBELLES.approfondi }}</span>
+</template>
+
+<script setup lang="ts">
+// Étiquette sobre sur une réponse donnée en mode approfondi (rien en mode rapide).
+defineProps<{ profondeur?: string }>()
+</script>
+
+<style scoped>
+.chat-mode-badge {
+  display: inline-block;
+  margin-bottom: 6px;
+  padding: 1px 8px;
+  border-radius: 9999px;
+  border: 1px solid var(--nav-bg-alt);
+  font-size: 0.66rem;
+  font-family: var(--nav-font);
+  color: var(--nav-text-muted);
+}
+</style>
diff --git a/components/ChatModeToggle.vue b/components/ChatModeToggle.vue
new file mode 100644
index 0000000..736ccbd
--- /dev/null
+++ b/components/ChatModeToggle.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="chat-mode" role="radiogroup" aria-label="Mode de réponse">
+    <button
+      v-for="(p, i) in CHAT_PROFONDEURS"
+      :key="p"
+      :ref="(el) => (boutons[i] = el as HTMLButtonElement | null)"
+      type="button"
+      role="radio"
+      class="chat-mode-option"
+      :class="{ active: modelValue === p }"
+      :aria-checked="modelValue === p"
+      :tabindex="modelValue === p ? 0 : -1"
+      :title="CHAT_PROFONDEUR_AIDES[p]"
+      :disabled="disabled"
+      @click="choisir(p)"
+      @keydown="onKey($event, i)"
+    >{{ CHAT_PROFONDEUR_LIBELLES[p] }}</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Toggle 2 options partagé par les 5 chatbots. Libellés : utils/chatProfondeur.ts.
+// radiogroup : flèches déplacent la sélection, Tab entre/sort du groupe (roving tabindex).
+const props = defineProps<{ modelValue: 'rapide' | 'approfondi'; disabled?: boolean }>()
+const emit = defineEmits<{ 'update:modelValue': [value: 'rapide' | 'approfondi'] }>()
+
+const boutons = ref<(HTMLButtonElement | null)[]>([])
+
+function choisir(p: ChatProfondeur) {
+  if (!props.disabled) emit('update:modelValue', p)
+}
+
+function onKey(e: KeyboardEvent, i: number) {
+  const n = CHAT_PROFONDEURS.length
+  let j = -1
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') j = (i + 1) % n
+  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') j = (i - 1 + n) % n
+  else if (e.key === 'Home') j = 0
+  else if (e.key === 'End') j = n - 1
+  if (j < 0) return
+  e.preventDefault()
+  choisir(CHAT_PROFONDEURS[j])
+  nextTick(() => boutons.value[j]?.focus())
+}
+</script>
+
+<style scoped>
+.chat-mode {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 9999px;
+  background: var(--nav-bg-alt);
+  align-self: flex-start;
+}
+.chat-mode-option {
+  border: none;
+  background: transparent;
+  color: var(--nav-text-muted);
+  font-family: var(--nav-font);
+  font-size: 0.72rem;
+  line-height: 1.2;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.chat-mode-option:hover:not(.active):not(:disabled) { color: var(--nav-text); }
+.chat-mode-option.active {
+  background: var(--nav-primary);
+  color: var(--nav-text-on-primary);
+  font-weight: 600;
+}
+.chat-mode-option:focus-visible { outline: 2px solid var(--nav-primary); outline-offset: 2px; }
+.chat-mode-option:disabled { opacity: 0.5; cursor: not-allowed; }
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-mode-option { transition: none; }
+}
+</style>
diff --git a/composables/useChatProfondeur.ts b/composables/useChatProfondeur.ts
new file mode 100644
index 0000000..e475692
--- /dev/null
+++ b/composables/useChatProfondeur.ts
@@ -0,0 +1,13 @@
+/**
+ * Mode de profondeur courant d'un chatbot (M3). État partagé par clé via useState :
+ * desktop et mobile d'un même chatbot (clés 'accueil', 'agences'…) restent synchronisés.
+ * Volontairement non persisté : le mode est un choix par question, 'rapide' à chaque visite.
+ */
+export function useChatProfondeur(key: string | (() => string) = 'defaut') {
+  const k = typeof key === 'function' ? key : () => key
+  const store = useState<Record<string, ChatProfondeur>>('aep-chat-profondeur', () => ({}))
+  return computed<ChatProfondeur>({
+    get: () => store.value[k()] ?? CHAT_PROFONDEUR_DEFAUT,
+    set: (v) => { store.value = { ...store.value, [k()]: normaliserProfondeur(v) } },
+  })
+}