Hugging Face's logo

Spaces:
Docfile
/
Chatm
Running

App Files Community
Docfile commited on
Commit
ed39ad7
·
verified ·
1 Parent(s): ccfefd3

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +331 -134
templates/index.html CHANGED
@@ -3,40 +3,114 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mariam AI! (Standalone)</title>
7
- <!-- Chargement de Tailwind CSS via CDN avec le plugin Forms -->
 
8
  <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
9
- <!-- Favicon (Optionnel) -->
 
10
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
 
11
  <style>
12
- /* Styles de base pour assurer la hauteur complète et le défilement */
13
- html, body { height: 100%; margin: 0; padding: 0; }
14
- body { display: flex; flex-direction: column; font-family: Inter, sans-serif; /* Police sympa via CDN implicite de Tailwind */ }
15
- #chat-container { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; } /* Crucial pour le scroll */
16
- #chat-messages { flex-grow: 1; overflow-y: auto; min-height: 0; } /* Crucial pour le scroll */
17
-
18
- /* Style pour la scrollbar (optionnel) */
19
- ::-webkit-scrollbar { width: 8px; }
20
- ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
21
- ::-webkit-scrollbar-thumb { background: #a8a8a8; border-radius: 10px; }
22
- ::-webkit-scrollbar-thumb:hover { background: #7a7a7a; }
23
-
24
- /* Amélioration légère du rendu Markdown par défaut */
25
- .prose code { background-color: #e5e7eb; padding: 0.2em 0.4em; font-size: 85%; border-radius: 3px; }
26
- .prose pre > code { background-color: transparent; padding: 0; font-size: inherit; border-radius: 0; }
27
- .prose pre { background-color: #f3f4f6; padding: 1em; border-radius: 6px; overflow-x: auto; }
28
- .prose blockquote { border-left-color: #9ca3af; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  </style>
30
  </head>
31
  <body class="bg-gray-100 flex flex-col h-screen">
32
 
33
- <!-- En-tête -->
34
- <header class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white p-4 shadow-md flex justify-between items-center sticky top-0 z-10 flex-shrink-0">
35
- <h1 class="text-2xl font-bold">Mariam AI!</h1>
36
- <!-- Note: Le bouton clear fonctionne si le backend Flask a la route /clear -->
37
  <form action="/clear" method="POST" id="clear-form">
38
- <button type="submit" class="bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-1 px-3 rounded-full transition duration-200">
39
- Effacer Chat
40
  </button>
41
  </form>
42
  </header>
@@ -44,56 +118,70 @@
44
  <!-- Conteneur Principal du Chat -->
45
  <div id="chat-container" class="max-w-4xl w-full mx-auto bg-white shadow-xl rounded-b-lg flex flex-col flex-grow">
46
 
47
- <!-- Zone d'affichage des messages -->
48
- <div id="chat-messages" class="flex-grow overflow-y-auto p-6 space-y-4 scroll-smooth">
49
- <!-- Les messages seront ajoutés ici par JavaScript -->
50
- <!-- Message initial pour accueillir -->
51
- <div class="flex justify-start">
52
- <div class="bg-gray-200 text-gray-800 p-3 rounded-lg rounded-bl-none max-w-xs md:max-w-md shadow">
53
- <div class="prose prose-sm max-w-none">Bonjour ! Comment puis-je vous aider aujourd'hui ?</div>
 
 
 
54
  </div>
55
  </div>
56
 
57
- <!-- Indicateur de chargement (caché par défaut) -->
58
  <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
59
  <div class="flex justify-center items-center space-x-2">
60
- <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-500"></div>
 
 
 
61
  <span>Mariam réfléchit...</span>
62
  </div>
63
  </div>
64
  </div>
65
 
66
  <!-- Zone d'erreur (cachée par défaut) -->
67
- <div id="error-message" class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-2 rounded m-4" role="alert" style="display: none;">
68
- <p class="font-bold">Erreur</p>
69
- <p id="error-text">Le message d'erreur ira ici.</p>
70
  </div>
71
 
72
  <!-- Barre d'options et d'upload -->
73
  <div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0">
74
  <div class="flex items-center justify-between text-sm">
75
- <label for="web_search_toggle" class="flex items-center space-x-2 cursor-pointer text-gray-600 hover:text-gray-800 select-none">
76
- <input type="checkbox" id="web_search_toggle" name="web_search" value="true" class="form-checkbox h-4 w-4 rounded text-blue-500 focus:ring-blue-400 focus:ring-offset-0">
77
- <span>Recherche Web</span>
 
 
78
  </label>
 
79
  <div class="flex items-center space-x-2">
80
- <label for="file_upload" class="cursor-pointer text-blue-500 hover:text-blue-700 font-medium flex items-center">
81
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
82
- <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
83
  </svg>
84
- <span>Fichier</span>
85
- <input type="file" id="file_upload" name="file" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt">
86
  </label>
87
- <span id="file-name" class="text-gray-500 text-xs truncate max-w-[100px]" title=""></span> {# Pour afficher le nom du fichier #}
 
 
 
 
 
88
  </div>
89
  </div>
90
  </div>
91
 
92
- <!-- Formulaire d'entrée -->
93
- <form id="chat-form" class="bg-gray-100 p-4 border-t border-gray-200 rounded-b-lg flex-shrink-0">
94
- <div class="flex items-center space-x-3">
95
- <input type="text" id="prompt" name="prompt" class="flex-grow form-input px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-sm" placeholder="Posez votre question à Mariam..." autocomplete="off">
96
- <button type="submit" id="send-button" class="bg-blue-500 hover:bg-blue-600 text-white font-bold p-2 rounded-full transition duration-200 flex items-center justify-center shadow-md w-10 h-10 flex-shrink-0">
97
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
98
  <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
99
  </svg>
@@ -103,81 +191,96 @@
103
 
104
  </div>
105
 
106
- <!-- Script pour l'interaction -->
107
  <script>
108
  document.addEventListener('DOMContentLoaded', () => {
 
109
  const chatForm = document.getElementById('chat-form');
110
  const promptInput = document.getElementById('prompt');
111
  const chatMessages = document.getElementById('chat-messages');
112
- const loadingIndicator = document.getElementById('loading-indicator');
 
113
  const errorMessageDiv = document.getElementById('error-message');
114
  const errorTextP = document.getElementById('error-text');
115
  const webSearchToggle = document.getElementById('web_search_toggle');
116
  const fileUpload = document.getElementById('file_upload');
117
  const fileNameSpan = document.getElementById('file-name');
 
118
  const sendButton = document.getElementById('send-button');
119
- const clearForm = document.getElementById('clear-form'); // Référence au formulaire clear
120
 
121
- // URL de l'API Backend (ASSUREZ-VOUS QUE CELA CORRESPOND À VOTRE BACKEND FLASK)
122
- const API_ENDPOINT = '/api/chat'; // Ou l'URL complète si nécessaire
123
- const CLEAR_ENDPOINT = '/clear'; // Endpoint pour effacer
 
 
124
 
125
- // --- Fonctions Utilitaires ---
126
 
 
127
  function scrollToBottom() {
 
128
  setTimeout(() => {
129
  chatMessages.scrollTop = chatMessages.scrollHeight;
130
  }, 50);
131
  }
132
 
 
133
  function showLoading(show) {
134
- loadingIndicator.style.display = show ? 'block' : 'none';
 
 
 
 
 
 
 
 
 
135
  sendButton.disabled = show;
136
  promptInput.disabled = show;
137
- sendButton.classList.toggle('opacity-50', show);
138
- sendButton.classList.toggle('cursor-not-allowed', show);
139
- if (show) {
140
- // Déplacer l'indicateur de chargement à la fin de la liste des messages
141
- chatMessages.appendChild(loadingIndicator);
142
- scrollToBottom(); // Assure que l'indicateur est visible
143
- }
144
  }
145
 
 
146
  function displayError(message) {
147
- errorTextP.textContent = message;
148
- errorMessageDiv.style.display = 'block';
149
- // Remonter pour que l'erreur soit visible
150
- errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
151
- // Optionnel: Cacher après un délai
152
  // setTimeout(() => { errorMessageDiv.style.display = 'none'; }, 8000);
153
  }
154
 
 
155
  function addMessageToChat(role, text, isHtml = false) {
156
- // Cacher l'erreur si elle était affichée
157
  errorMessageDiv.style.display = 'none';
158
 
159
  const messageWrapper = document.createElement('div');
160
- messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4'); // Ajout mb-4
161
 
162
  const bubbleDiv = document.createElement('div');
163
- bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-xs', 'sm:max-w-md', 'md:max-w-lg', 'shadow-md'); // Augmenté max-w
164
 
165
- if (role === 'user') {
166
  bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
167
  const paragraph = document.createElement('p');
168
- paragraph.classList.add('text-sm', 'break-words'); // Permet la césure
169
- paragraph.textContent = text; // Toujours utiliser textContent pour l'input utilisateur
170
  bubbleDiv.appendChild(paragraph);
171
  } else { // Assistant
172
- bubbleDiv.classList.add('bg-gray-200', 'text-gray-800', 'rounded-bl-none');
173
  const proseDiv = document.createElement('div');
174
- // Ajout de classes prose pour le formatage markdown potentiel
175
- proseDiv.classList.add('prose', 'prose-sm', 'max-w-none', 'text-gray-800',
176
- 'prose-headings:text-gray-800', 'prose-a:text-blue-600',
177
- 'prose-strong:text-gray-800', 'prose-code:text-red-600',
178
- 'prose-blockquote:text-gray-600', 'break-words'); // Césure aussi
 
179
  if (isHtml) {
180
- // ATTENTION: Suppose que `text` est du HTML SÛR venant du backend
181
  proseDiv.innerHTML = text;
182
  } else {
183
  proseDiv.textContent = text;
@@ -186,123 +289,217 @@
186
  }
187
 
188
  messageWrapper.appendChild(bubbleDiv);
189
- // Insérer avant l'indicateur de chargement pour qu'il reste en bas
 
190
  chatMessages.insertBefore(messageWrapper, loadingIndicator);
191
 
192
- scrollToBottom();
 
 
 
193
  }
194
 
195
- // --- Gestionnaires d'événements ---
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
196
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
197
  fileUpload.addEventListener('change', () => {
198
  if (fileUpload.files.length > 0) {
199
- const name = fileUpload.files[0].name;
200
- fileNameSpan.textContent = name.length > 15 ? name.substring(0, 12) + '...' : name; // Tronquer si trop long
 
 
201
  fileNameSpan.title = name; // Titre complet au survol
 
202
  } else {
203
- fileNameSpan.textContent = '';
204
- fileNameSpan.title = '';
205
  }
206
  });
207
 
 
 
 
 
 
 
208
  chatForm.addEventListener('submit', async (e) => {
209
- e.preventDefault();
210
 
211
  const prompt = promptInput.value.trim();
212
- const file = fileUpload.files[0];
213
  const useWebSearch = webSearchToggle.checked;
214
 
 
215
  if (!prompt && !file) {
216
  displayError("Veuillez entrer un message ou sélectionner un fichier.");
 
217
  return;
218
  }
219
 
220
- errorMessageDiv.style.display = 'none'; // Cacher ancienne erreur
221
 
222
- // Construire et afficher le message utilisateur
223
  let userMessageText = prompt;
224
  if (file) {
225
- // Précéder le prompt du nom de fichier pour clarté dans l'UI
226
- userMessageText = `[${file.name}] ${prompt}`;
227
- }
228
- // N'afficher que s'il y a du texte ou un fichier
229
- if (userMessageText || file) {
230
- addMessageToChat('user', userMessageText || `[${file.name}]`); // Afficher nom fichier si prompt vide
231
  }
 
232
 
233
-
234
  const formData = new FormData();
235
- // Ajouter le prompt même s'il est vide si un fichier est présent
236
- formData.append('prompt', prompt);
237
- formData.append('web_search', useWebSearch);
238
  if (file) {
239
  formData.append('file', file);
240
  }
241
 
 
242
  showLoading(true);
243
- promptInput.value = ''; // Vider input texte
244
- fileUpload.value = ''; // Important pour pouvoir re-sélectionner le même fichier
245
- fileNameSpan.textContent = ''; // Vider nom fichier affiché
246
- fileNameSpan.title = '';
247
 
248
  try {
249
- const response = await fetch(API_ENDPOINT, {
 
250
  method: 'POST',
251
  body: formData,
 
252
  });
253
 
254
- const data = await response.json(); // Toujours essayer de lire le JSON
255
 
256
  if (!response.ok) {
257
- // Utiliser le message d'erreur du JSON si disponible
258
  throw new Error(data.error || `Erreur serveur: ${response.status}`);
259
  }
260
 
261
  if (data.success && data.message) {
262
- // Assumer que data.message est du HTML sûr venant du backend
263
- addMessageToChat('assistant', data.message, true); // true indique que c'est du HTML
264
  } else {
265
- // Si success est true mais pas de message (peu probable) ou success est false
266
- throw new Error(data.error || "Réponse invalide du serveur.");
267
  }
268
 
269
  } catch (error) {
270
- console.error("Erreur lors de l'envoi:", error);
271
- displayError(error.message || "Une erreur de connexion est survenue.");
 
272
  } finally {
 
273
  showLoading(false);
274
- promptInput.focus();
275
  }
276
  });
277
 
278
- // Optionnel : gestion du "clear" via JS pour éviter rechargement complet
279
  clearForm.addEventListener('submit', async (e) => {
280
  e.preventDefault(); // Empêche la soumission classique
281
- if (confirm("Voulez-vous vraiment effacer la conversation ?")) {
 
 
 
 
 
 
 
282
  try {
283
  const response = await fetch(CLEAR_ENDPOINT, { method: 'POST' });
284
- if (response.ok) {
285
- // Effacer les messages côté client
286
- chatMessages.innerHTML = ''; // Vide la zone de chat
287
- // Remettre le message d'accueil
288
- addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
289
- // Vider aussi l'erreur potentielle
290
- errorMessageDiv.style.display = 'none';
291
- console.log("Chat effacé côté serveur.");
 
 
 
 
292
  } else {
293
- throw new Error("Impossible d'effacer côté serveur.");
294
  }
295
  } catch (error) {
296
  console.error("Erreur lors de l'effacement:", error);
297
- displayError("Erreur lors de l'effacement du chat.");
 
 
 
 
 
298
  }
299
  }
300
  });
301
 
 
 
302
 
303
- // Scroll initial et focus
304
- scrollToBottom();
305
- promptInput.focus();
306
  });
307
  </script>
308
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mariam AI!</title>
7
+
8
+ <!-- Tailwind CSS via CDN (inclut le plugin Forms) -->
9
  <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
10
+
11
+ <!-- Favicon (Emoji simple) -->
12
  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
13
+
14
  <style>
15
+ /* Styles pour assurer la hauteur complète et le bon fonctionnement du scroll */
16
+ html, body {
17
+ height: 100%;
18
+ margin: 0;
19
+ padding: 0;
20
+ overflow: hidden; /* Empêche le scroll sur le body lui-même */
21
+ }
22
+ body {
23
+ display: flex;
24
+ flex-direction: column;
25
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
26
+ }
27
+ #chat-container {
28
+ display: flex;
29
+ flex-direction: column;
30
+ flex-grow: 1; /* Prend l'espace restant */
31
+ min-height: 0; /* Essentiel pour le scroll dans un conteneur flex */
32
+ }
33
+ #chat-messages {
34
+ flex-grow: 1;
35
+ overflow-y: auto; /* Active le scroll vertical uniquement sur cette zone */
36
+ min-height: 0; /* Essentiel pour le scroll dans un conteneur flex */
37
+ }
38
+
39
+ /* Style personnalisé pour la barre de défilement (optionnel) */
40
+ ::-webkit-scrollbar {
41
+ width: 8px;
42
+ }
43
+ ::-webkit-scrollbar-track {
44
+ background: #f1f1f1;
45
+ border-radius: 10px;
46
+ }
47
+ ::-webkit-scrollbar-thumb {
48
+ background: #a8a8a8; /* Gris plus doux */
49
+ border-radius: 10px;
50
+ }
51
+ ::-webkit-scrollbar-thumb:hover {
52
+ background: #7a7a7a; /* Gris plus foncé au survol */
53
+ }
54
+
55
+ /* Amélioration du rendu Markdown par défaut (via classes Prose de Tailwind principalement) */
56
+ /* Ciblage plus spécifique pour éviter conflits si prose est utilisé ailleurs */
57
+ #chat-messages .prose code:not(pre code) { /* Code inline */
58
+ background-color: #e5e7eb; /* gray-200 */
59
+ padding: 0.2em 0.4em;
60
+ font-size: 85%;
61
+ border-radius: 4px;
62
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
63
+ }
64
+ #chat-messages .prose pre { /* Bloc de code */
65
+ background-color: #f3f4f6; /* gray-100 */
66
+ padding: 0.8em 1em;
67
+ border-radius: 6px;
68
+ overflow-x: auto; /* Scroll horizontal si nécessaire */
69
+ font-size: 0.875rem; /* text-sm */
70
+ }
71
+ #chat-messages .prose pre code { /* Code dans un bloc pre */
72
+ background-color: transparent;
73
+ padding: 0;
74
+ font-size: inherit;
75
+ border-radius: 0;
76
+ color: inherit;
77
+ }
78
+ #chat-messages .prose blockquote {
79
+ border-left-color: #9ca3af; /* gray-400 */
80
+ color: #4b5563; /* gray-600 */
81
+ }
82
+ #chat-messages .prose strong {
83
+ color: #1f2937; /* gray-800 */
84
+ }
85
+ #chat-messages .prose a {
86
+ color: #2563eb; /* blue-600 */
87
+ text-decoration: underline;
88
+ text-decoration-color: #93c5fd; /* blue-300 */
89
+ transition: color 0.2s ease;
90
+ }
91
+ #chat-messages .prose a:hover {
92
+ color: #1d4ed8; /* blue-700 */
93
+ text-decoration-color: #60a5fa; /* blue-400 */
94
+ }
95
+
96
+ /* Style pour le chargement initial de l'historique */
97
+ #history-loading {
98
+ padding: 20px;
99
+ text-align: center;
100
+ color: #6b7280; /* gray-500 */
101
+ font-style: italic;
102
+ }
103
  </style>
104
  </head>
105
  <body class="bg-gray-100 flex flex-col h-screen">
106
 
107
+ <!-- En-tête fixe -->
108
+ <header class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white p-3 sm:p-4 shadow-md flex justify-between items-center sticky top-0 z-10 flex-shrink-0">
109
+ <h1 class="text-xl sm:text-2xl font-bold">Mariam AI!</h1>
110
+ <!-- Formulaire pour le bouton "Effacer" (intercepté par JS) -->
111
  <form action="/clear" method="POST" id="clear-form">
112
+ <button type="submit" title="Effacer la conversation actuelle" class="bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-1 px-3 rounded-full transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75">
113
+ Effacer
114
  </button>
115
  </form>
116
  </header>
 
118
  <!-- Conteneur Principal du Chat -->
119
  <div id="chat-container" class="max-w-4xl w-full mx-auto bg-white shadow-xl rounded-b-lg flex flex-col flex-grow">
120
 
121
+ <!-- Zone d'affichage des messages (avec scroll) -->
122
+ <div id="chat-messages" class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 scroll-smooth">
123
+ <!-- Indicateur de chargement de l'historique (sera remplacé) -->
124
+ <div id="history-loading">
125
+ <div class="flex justify-center items-center space-x-2">
126
+ <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
127
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
128
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
129
+ </svg>
130
+ <span>Chargement de l'historique...</span>
131
  </div>
132
  </div>
133
 
134
+ <!-- Indicateur de chargement pour les NOUVEAUX messages (sera déplacé ici par JS) -->
135
  <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
136
  <div class="flex justify-center items-center space-x-2">
137
+ <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
138
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
139
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
140
+ </svg>
141
  <span>Mariam réfléchit...</span>
142
  </div>
143
  </div>
144
  </div>
145
 
146
  <!-- Zone d'erreur (cachée par défaut) -->
147
+ <div id="error-message" class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-2 rounded mx-4 my-2 flex-shrink-0" role="alert" style="display: none;">
148
+ <p class="font-bold mr-2">Erreur:</p>
149
+ <p id="error-text">Le message d'erreur détaillé ira ici.</p>
150
  </div>
151
 
152
  <!-- Barre d'options et d'upload -->
153
  <div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0">
154
  <div class="flex items-center justify-between text-sm">
155
+ <!-- Toggle Recherche Web -->
156
+ <label for="web_search_toggle" class="flex items-center space-x-2 cursor-pointer text-gray-600 hover:text-gray-800 select-none" title="Activer/Désactiver la recherche web pour le prochain message">
157
+ <input type="checkbox" id="web_search_toggle" name="web_search" value="true" class="form-checkbox h-4 w-4 rounded text-blue-500 focus:ring-blue-400 focus:ring-offset-0 border-gray-300">
158
+ <span class="hidden sm:inline">Recherche Web</span>
159
+ <span class="sm:hidden">Web</span> <!-- Texte plus court pour mobile -->
160
  </label>
161
+ <!-- Upload Fichier -->
162
  <div class="flex items-center space-x-2">
163
+ <label for="file_upload" class="cursor-pointer text-blue-500 hover:text-blue-700 font-medium flex items-center" title="Joindre un fichier (txt, pdf, png, jpg)">
164
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
165
+ <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
166
  </svg>
167
+ <span class="hidden sm:inline">Fichier</span>
168
+ <input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg">
169
  </label>
170
+ <span id="file-name" class="text-gray-500 text-xs truncate max-w-[100px] sm:max-w-[150px]" title=""></span>
171
+ <button id="clear-file" class="text-red-500 hover:text-red-700 text-xs p-0.5 rounded focus:outline-none focus:ring-1 focus:ring-red-400" title="Retirer le fichier" style="display: none;">
172
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
173
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
174
+ </svg>
175
+ </button>
176
  </div>
177
  </div>
178
  </div>
179
 
180
+ <!-- Formulaire d'entrée du message -->
181
+ <form id="chat-form" class="bg-gray-100 p-3 sm:p-4 border-t border-gray-200 rounded-b-lg flex-shrink-0">
182
+ <div class="flex items-center space-x-2 sm:space-x-3">
183
+ <input type="text" id="prompt" name="prompt" class="flex-grow form-input px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-sm text-sm sm:text-base" placeholder="Posez votre question à Mariam..." autocomplete="off">
184
+ <button type="submit" id="send-button" title="Envoyer le message" class="bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold p-2 rounded-full transition duration-200 flex items-center justify-center shadow-md w-10 h-10 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
185
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
186
  <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
187
  </svg>
 
191
 
192
  </div>
193
 
194
+ <!-- Script JavaScript pour l'interaction -->
195
  <script>
196
  document.addEventListener('DOMContentLoaded', () => {
197
+ // === Références aux éléments du DOM ===
198
  const chatForm = document.getElementById('chat-form');
199
  const promptInput = document.getElementById('prompt');
200
  const chatMessages = document.getElementById('chat-messages');
201
+ const loadingIndicator = document.getElementById('loading-indicator'); // Indicateur pour NOUVEAUX messages
202
+ const historyLoadingIndicator = document.getElementById('history-loading'); // Indicateur pour l'historique
203
  const errorMessageDiv = document.getElementById('error-message');
204
  const errorTextP = document.getElementById('error-text');
205
  const webSearchToggle = document.getElementById('web_search_toggle');
206
  const fileUpload = document.getElementById('file_upload');
207
  const fileNameSpan = document.getElementById('file-name');
208
+ const clearFileButton = document.getElementById('clear-file');
209
  const sendButton = document.getElementById('send-button');
210
+ const clearForm = document.getElementById('clear-form');
211
 
212
+ // === Endpoints de l'API Backend ===
213
+ // Assurez-vous que ces URLs correspondent à votre configuration Flask
214
+ const API_CHAT_ENDPOINT = '/api/chat';
215
+ const API_HISTORY_ENDPOINT = '/api/history';
216
+ const CLEAR_ENDPOINT = '/clear';
217
 
218
+ // === Fonctions Utilitaires ===
219
 
220
+ /** Fait défiler la zone de chat vers le bas */
221
  function scrollToBottom() {
222
+ // Utilise un léger délai pour s'assurer que le DOM est mis à jour
223
  setTimeout(() => {
224
  chatMessages.scrollTop = chatMessages.scrollHeight;
225
  }, 50);
226
  }
227
 
228
+ /** Affiche/cache l'indicateur de chargement pour les nouveaux messages */
229
  function showLoading(show) {
230
+ const currentlyLoading = loadingIndicator.style.display !== 'none';
231
+ if (show && !currentlyLoading) {
232
+ loadingIndicator.style.display = 'block';
233
+ // S'assurer qu'il est le dernier élément pour être en bas
234
+ chatMessages.appendChild(loadingIndicator);
235
+ scrollToBottom();
236
+ } else if (!show && currentlyLoading) {
237
+ loadingIndicator.style.display = 'none';
238
+ }
239
+ // Désactiver/réactiver les contrôles pendant le chargement
240
  sendButton.disabled = show;
241
  promptInput.disabled = show;
242
+ fileUpload.disabled = show;
243
+ clearFileButton.disabled = show; // Désactiver aussi la suppression de fichier
 
 
 
 
 
244
  }
245
 
246
+ /** Affiche un message d'erreur dans la zone dédiée */
247
  function displayError(message) {
248
+ errorTextP.textContent = message || "Une erreur inconnue est survenue.";
249
+ errorMessageDiv.style.display = 'flex'; // Utiliser flex pour aligner l'icône si on en ajoute une
250
+ // Faire défiler pour voir l'erreur si elle est hors écran
251
+ errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
252
+ // Optionnel: Cacher l'erreur après un délai (ex: 8 secondes)
253
  // setTimeout(() => { errorMessageDiv.style.display = 'none'; }, 8000);
254
  }
255
 
256
+ /** Ajoute un message (utilisateur ou assistant) à la zone de chat */
257
  function addMessageToChat(role, text, isHtml = false) {
258
+ // Cacher l'erreur si elle était affichée lors de l'ajout d'un nouveau message
259
  errorMessageDiv.style.display = 'none';
260
 
261
  const messageWrapper = document.createElement('div');
262
+ messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4');
263
 
264
  const bubbleDiv = document.createElement('div');
265
+ bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-[85%]', 'sm:max-w-[75%]', 'shadow-md', 'relative'); // Limite la largeur
266
 
267
+ if (role === 'user') {
268
  bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
269
  const paragraph = document.createElement('p');
270
+ paragraph.classList.add('text-sm', 'sm:text-base', 'break-words'); // Permet le retour à la ligne
271
+ paragraph.textContent = text; // Sécurité: toujours textContent pour l'input utilisateur
272
  bubbleDiv.appendChild(paragraph);
273
  } else { // Assistant
274
+ bubbleDiv.classList.add('bg-gray-100', 'text-gray-800', 'rounded-bl-none', 'border', 'border-gray-200');
275
  const proseDiv = document.createElement('div');
276
+ // Appliquer les classes Prose pour le rendu Markdown/HTML
277
+ proseDiv.classList.add('prose', 'prose-sm', 'sm:prose-base', 'max-w-none', 'text-gray-800',
278
+ 'prose-headings:font-semibold', 'prose-headings:text-gray-800',
279
+ 'prose-a:text-blue-600', 'prose-a:no-underline', 'hover:prose-a:underline',
280
+ 'prose-strong:text-gray-800', 'prose-code:text-red-600', 'prose-code:font-mono',
281
+ 'prose-blockquote:text-gray-600', 'break-words');
282
  if (isHtml) {
283
+ // ATTENTION : NECESSITE QUE LE HTML DU BACKEND SOIT NETTOYÉ/SÉCURISÉ
284
  proseDiv.innerHTML = text;
285
  } else {
286
  proseDiv.textContent = text;
 
289
  }
290
 
291
  messageWrapper.appendChild(bubbleDiv);
292
+
293
+ // Insérer le nouveau message AVANT l'indicateur de chargement pour qu'il reste en bas
294
  chatMessages.insertBefore(messageWrapper, loadingIndicator);
295
 
296
+ // Faire défiler seulement si on n'est pas en train de charger l'historique initial
297
+ if (historyLoadingIndicator.parentNode !== chatMessages) {
298
+ scrollToBottom();
299
+ }
300
  }
301
 
302
+ /** Charge l'historique de chat depuis le backend */
303
+ async function loadChatHistory() {
304
+ console.log("Tentative de chargement de l'historique...");
305
+ // Garder l'indicateur visible pendant le chargement
306
+ historyLoadingIndicator.style.display = 'block';
307
+
308
+ try {
309
+ const response = await fetch(API_HISTORY_ENDPOINT);
310
+ if (!response.ok) {
311
+ let errorMsg = `Erreur serveur (${response.status})`;
312
+ try { // Tenter de lire un message d'erreur JSON du backend
313
+ const errData = await response.json();
314
+ errorMsg = errData.error || errorMsg;
315
+ } catch (e) { /* Ignorer si pas JSON */ }
316
+ throw new Error(errorMsg);
317
+ }
318
+ const data = await response.json();
319
+
320
+ if (data.success && Array.isArray(data.history)) {
321
+ console.log(`Historique reçu: ${data.history.length} message(s).`);
322
+ // Vider les messages actuels (au cas où, et supprime l'indicateur de chargement d'historique)
323
+ chatMessages.innerHTML = '';
324
+ // Remettre l'indicateur de chargement de NOUVEAU message (caché)
325
+ chatMessages.appendChild(loadingIndicator);
326
+ loadingIndicator.style.display = 'none'; // S'assurer qu'il est caché
327
+
328
+ if (data.history.length === 0) {
329
+ addMessageToChat('assistant', "Bonjour ! Comment puis-je vous aider aujourd'hui ?");
330
+ } else {
331
+ data.history.forEach(message => {
332
+ const isAssistantHtml = message.role === 'assistant';
333
+ addMessageToChat(message.role, message.text, isAssistantHtml);
334
+ });
335
+ }
336
+ // Faire défiler vers le bas après avoir ajouté tous les messages
337
+ scrollToBottom();
338
 
339
+ } else {
340
+ throw new Error(data.error || "Format de réponse de l'historique invalide.");
341
+ }
342
+ } catch (error) {
343
+ console.error("Erreur lors du chargement de l'historique:", error);
344
+ // Afficher l'erreur dans la zone de chat à la place de l'indicateur
345
+ chatMessages.innerHTML = ''; // Vider
346
+ chatMessages.appendChild(loadingIndicator); // Remettre l'indicateur caché
347
+ loadingIndicator.style.display = 'none';
348
+ displayError(`Impossible de charger l'historique: ${error.message}`);
349
+ } finally {
350
+ // Cacher l'indicateur de chargement d'historique s'il est toujours là (en cas d'erreur avant de le vider)
351
+ if (historyLoadingIndicator.parentNode === chatMessages) {
352
+ historyLoadingIndicator.remove();
353
+ }
354
+ // Mettre le focus sur l'input à la fin
355
+ promptInput.focus();
356
+ }
357
+ }
358
+
359
+ /** Réinitialise l'input fichier */
360
+ function clearFileInput() {
361
+ fileUpload.value = ''; // Réinitialise la sélection
362
+ fileNameSpan.textContent = '';
363
+ fileNameSpan.title = '';
364
+ clearFileButton.style.display = 'none'; // Cache le bouton 'X'
365
+ }
366
+
367
+ // === Gestionnaires d'événements ===
368
+
369
+ // Changement sur l'input fichier
370
  fileUpload.addEventListener('change', () => {
371
  if (fileUpload.files.length > 0) {
372
+ const file = fileUpload.files[0];
373
+ const name = file.name;
374
+ // Tronquer le nom si trop long pour l'affichage
375
+ fileNameSpan.textContent = name.length > 20 ? name.substring(0, 17) + '...' : name;
376
  fileNameSpan.title = name; // Titre complet au survol
377
+ clearFileButton.style.display = 'inline-block'; // Montre le bouton 'X'
378
  } else {
379
+ clearFileInput(); // Appeler la fonction de nettoyage
 
380
  }
381
  });
382
 
383
+ // Clic sur le bouton 'X' pour retirer le fichier
384
+ clearFileButton.addEventListener('click', () => {
385
+ clearFileInput();
386
+ });
387
+
388
+ // Soumission du formulaire de chat
389
  chatForm.addEventListener('submit', async (e) => {
390
+ e.preventDefault(); // Empêche le rechargement de page
391
 
392
  const prompt = promptInput.value.trim();
393
+ const file = fileUpload.files[0]; // Récupère le fichier s'il y en a un
394
  const useWebSearch = webSearchToggle.checked;
395
 
396
+ // Vérifier si un prompt ou un fichier est présent
397
  if (!prompt && !file) {
398
  displayError("Veuillez entrer un message ou sélectionner un fichier.");
399
+ promptInput.focus();
400
  return;
401
  }
402
 
403
+ errorMessageDiv.style.display = 'none'; // Cacher les erreurs précédentes
404
 
405
+ // Afficher le message utilisateur immédiatement
406
  let userMessageText = prompt;
407
  if (file) {
408
+ // Préciser le fichier dans le message affiché si les deux sont présents
409
+ userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
 
 
 
 
410
  }
411
+ addMessageToChat('user', userMessageText);
412
 
413
+ // Préparer les données pour l'envoi
414
  const formData = new FormData();
415
+ formData.append('prompt', prompt); // Envoyer même si vide si un fichier est présent
416
+ formData.append('web_search', useWebSearch); // Envoyer 'true' ou 'false'
 
417
  if (file) {
418
  formData.append('file', file);
419
  }
420
 
421
+ // Afficher le chargement et vider les champs
422
  showLoading(true);
423
+ promptInput.value = '';
424
+ clearFileInput(); // Nettoyer l'input fichier après envoi
 
 
425
 
426
  try {
427
+ // Envoyer les données au backend
428
+ const response = await fetch(API_CHAT_ENDPOINT, {
429
  method: 'POST',
430
  body: formData,
431
+ // Pas besoin de 'Content-Type', FormData le gère
432
  });
433
 
434
+ const data = await response.json(); // Tenter de lire la réponse JSON
435
 
436
  if (!response.ok) {
437
+ // Utiliser le message d'erreur du JSON si dispo, sinon statut HTTP
438
  throw new Error(data.error || `Erreur serveur: ${response.status}`);
439
  }
440
 
441
  if (data.success && data.message) {
442
+ // Ajouter la réponse de l'assistant (en supposant qu'elle est en HTML sûr)
443
+ addMessageToChat('assistant', data.message, true);
444
  } else {
445
+ // Gérer le cas où success=true mais pas de message, ou success=false
446
+ throw new Error(data.error || "Réponse invalide ou vide du serveur.");
447
  }
448
 
449
  } catch (error) {
450
+ console.error("Erreur lors de l'envoi du message:", error);
451
+ displayError(error.message);
452
+ // Optionnel : Supprimer le message utilisateur qui a causé l'erreur ? (Peut être déroutant)
453
  } finally {
454
+ // Arrêter l'indicateur de chargement et réactiver les contrôles
455
  showLoading(false);
456
+ promptInput.focus(); // Remettre le focus sur l'input
457
  }
458
  });
459
 
460
+ // Soumission du formulaire pour effacer le chat
461
  clearForm.addEventListener('submit', async (e) => {
462
  e.preventDefault(); // Empêche la soumission classique
463
+
464
+ if (confirm("Êtes-vous sûr de vouloir effacer toute la conversation ?")) {
465
+ console.log("Demande d'effacement du chat...");
466
+ // Ajouter un indicateur visuel temporaire si souhaité
467
+ const originalButtonText = e.target.querySelector('button').textContent;
468
+ e.target.querySelector('button').textContent = '...';
469
+ e.target.querySelector('button').disabled = true;
470
+
471
  try {
472
  const response = await fetch(CLEAR_ENDPOINT, { method: 'POST' });
473
+ const data = await response.json(); // Lire la réponse JSON
474
+
475
+ if (response.ok && data.success) {
476
+ console.log("Chat effacé avec succès.");
477
+ // Effacer les messages affichés dans le DOM
478
+ chatMessages.innerHTML = ''; // Vide complètement
479
+ // Remettre l'indicateur de chargement de NOUVEAU message (caché)
480
+ chatMessages.appendChild(loadingIndicator);
481
+ loadingIndicator.style.display = 'none';
482
+ // Ajouter le message d'accueil initial
483
+ addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
484
+ errorMessageDiv.style.display = 'none'; // Cacher toute erreur précédente
485
  } else {
486
+ throw new Error(data.error || "Impossible d'effacer côté serveur.");
487
  }
488
  } catch (error) {
489
  console.error("Erreur lors de l'effacement:", error);
490
+ displayError(`Erreur lors de l'effacement du chat: ${error.message}`);
491
+ } finally {
492
+ // Restaurer le bouton
493
+ e.target.querySelector('button').textContent = originalButtonText;
494
+ e.target.querySelector('button').disabled = false;
495
+ promptInput.focus(); // Remettre le focus
496
  }
497
  }
498
  });
499
 
500
+ // === Initialisation au chargement de la page ===
501
+ loadChatHistory(); // Charger l'historique dès que le DOM est prêt
502
 
 
 
 
503
  });
504
  </script>
505