Hugging Face's logo

Spaces:
HuggyGuyJo01
/
TestChat
Running

App Files Community
HuggyGuyJo01 commited on
Commit
2fdb240
·
verified ·
1 Parent(s): 9825317

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +128 -33
index.html CHANGED
@@ -1,4 +1,4 @@
1
- <html><head><base href="https://WhatsApp/ai.com">
2
  <meta charset="UTF-8">
3
  <title>AI-Powered WhatsApp Chat with Image Upload</title>
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
@@ -130,6 +130,34 @@
130
  max-width: 600px;
131
  }
132
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
133
  /* Ajout de styles pour le support des emojis */
134
  .emoji {
135
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Symbol", sans-serif;
@@ -139,17 +167,20 @@
139
  <body>
140
  <div id="chat-container">
141
  <div id="chat-header">
142
- <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" alt="Clipart of a customer assistant with headset">
143
  <h1>
144
- AI Assistant
145
- <span style="display: inline-block; margin-left: 5px; background-color: #0099ff; color: white; font-size: 0.6em; padding: 2px 5px; border-radius: 50%; vertical-align: middle;" title="Assistant IA Vérifié">✓</span>
146
- </h1>
 
 
 
 
 
147
  </div>
148
  <div id="chat-messages">
149
  <div class="typing-indicator" id="typing-indicator">
150
- <span></span>
151
- <span></span>
152
- <span></span>
153
  </div>
154
  </div>
155
  <div id="chat-input">
@@ -168,6 +199,11 @@
168
  </div>
169
  </div>
170
 
 
 
 
 
 
171
  <script>
172
  const chatMessages = document.getElementById('chat-messages');
173
  const userInput = document.getElementById('user-input');
@@ -175,33 +211,55 @@ const sendButton = document.getElementById('send-button');
175
  const fileButton = document.getElementById('file-button');
176
  const fileInput = document.getElementById('file-input');
177
  const typingIndicator = document.getElementById('typing-indicator');
 
 
178
 
179
- // URL du backend Python
180
  const BACKEND_URL = 'http://your-backend-url/api';
181
 
182
- // Fonction pour encoder correctement les caractères spéciaux
183
- function encodeMessage(message) {
184
- return encodeURIComponent(message);
185
- }
186
 
187
- // Fonction pour décoder les caractères spéciaux
188
- function decodeMessage(message) {
189
- return decodeURIComponent(message);
190
- }
 
 
191
 
192
- function showTypingIndicator() {
193
- typingIndicator.style.display = 'block';
194
- chatMessages.scrollTop = chatMessages.scrollHeight;
 
 
 
 
 
 
195
  }
196
 
197
- function hideTypingIndicator() {
198
- typingIndicator.style.display = 'none';
 
 
 
 
 
 
 
 
 
 
 
 
199
  }
200
 
 
 
 
 
201
  function addMessage(content, isUser, imageData = null) {
202
  const messageDiv = document.createElement('div');
203
- messageDiv.classList.add('message');
204
- messageDiv.classList.add(isUser ? 'user-message' : 'ai-message');
205
 
206
  if (imageData) {
207
  const img = document.createElement('img');
@@ -209,21 +267,43 @@ function addMessage(content, isUser, imageData = null) {
209
  img.alt = 'Image envoyée';
210
  messageDiv.appendChild(img);
211
  } else {
212
- // Décode le contenu pour afficher correctement les caractères spéciaux
213
- messageDiv.textContent = decodeMessage(content);
214
  }
215
 
216
  chatMessages.appendChild(messageDiv);
217
  chatMessages.scrollTop = chatMessages.scrollHeight;
 
 
 
218
  }
219
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
220
  async function sendMessageToBackend(message, imageData = null) {
221
  try {
222
  showTypingIndicator();
223
 
224
  const formData = new FormData();
225
  // Encode le message avant l'envoi
226
- formData.append('message', encodeMessage(message));
227
  if (imageData) {
228
  formData.append('image', imageData);
229
  }
@@ -242,7 +322,7 @@ async function sendMessageToBackend(message, imageData = null) {
242
 
243
  if (data.response) {
244
  // Décode la réponse du serveur
245
- addMessage(decodeMessage(data.response), false);
246
  }
247
  } catch (error) {
248
  console.error('Erreur:', error);
@@ -303,9 +383,24 @@ chatMessages.addEventListener('drop', (e) => {
303
  }
304
  });
305
 
306
- // Initialisation
307
- window.onload = () => {
308
- addMessage("Bonjour ! 👋 Je suis votre assistant virtuel. Comment puis-je vous aider aujourd'hui ?", false);
309
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
310
  </script>
311
- </body></html>
 
1
+ <!DOCTYPE html><html><head><base href="https://WhatsApp/ai.com">
2
  <meta charset="UTF-8">
3
  <title>AI-Powered WhatsApp Chat with Image Upload</title>
4
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
130
  max-width: 600px;
131
  }
132
  }
133
+ /* New styles for appointments and history */
134
+ .appointment-card {
135
+ background: #fff;
136
+ border-radius: 10px;
137
+ padding: 15px;
138
+ margin: 10px 0;
139
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
140
+ }
141
+ .history-button {
142
+ display: none; /* Hide the history button */
143
+ }
144
+ .history-panel {
145
+ position: fixed;
146
+ right: -300px; /* Keep it offscreen by default */
147
+ top: 0;
148
+ width: 300px;
149
+ height: 100%;
150
+ background: white;
151
+ box-shadow: -2px 0 5px rgba(0,0,0,0.2);
152
+ transition: right 0.3s ease;
153
+ z-index: 1000;
154
+ padding: 20px;
155
+ display: none; /* Hide it completely */
156
+ }
157
+ .history-panel.active {
158
+ right: 0;
159
+ display: block; /* Show only when active */
160
+ }
161
  /* Ajout de styles pour le support des emojis */
162
  .emoji {
163
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Symbol", sans-serif;
 
167
  <body>
168
  <div id="chat-container">
169
  <div id="chat-header">
170
+ <img src="https://cdn-icons-png.flaticon.com/512/4712/4712109.png" alt="Logo zone - corporate stylized icon with square background" style="width: 40px; height: 40px; object-fit: cover; border-radius: 5px;">
171
  <h1>
172
+ ASSISTANT AI +226 56888879
173
+ <span style="display: inline-block; margin-left: 5px; background-color: #0099ff; color: white; font-size: 0.6em; padding: 2px 5px; border-radius: 50%; vertical-align: middle; transform: translateY(-0.5mm);" title="Assistant IA Vérifié">✓</span>
174
+ </h1>
175
+ <button class="history-button" id="history-button">
176
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
177
+ <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z"></path>
178
+ </svg>
179
+ </button>
180
  </div>
181
  <div id="chat-messages">
182
  <div class="typing-indicator" id="typing-indicator">
183
+ <span></span><span></span><span></span>
 
 
184
  </div>
185
  </div>
186
  <div id="chat-input">
 
199
  </div>
200
  </div>
201
 
202
+ <div class="history-panel" id="history-panel">
203
+ <h2>Historique des conversations</h2>
204
+ <div id="conversation-history"></div>
205
+ </div>
206
+
207
  <script>
208
  const chatMessages = document.getElementById('chat-messages');
209
  const userInput = document.getElementById('user-input');
 
211
  const fileButton = document.getElementById('file-button');
212
  const fileInput = document.getElementById('file-input');
213
  const typingIndicator = document.getElementById('typing-indicator');
214
+ const historyButton = document.getElementById('history-button');
215
+ const historyPanel = document.getElementById('history-panel');
216
 
 
217
  const BACKEND_URL = 'http://your-backend-url/api';
218
 
219
+ // Store conversation history
220
+ let conversationHistory = [];
 
 
221
 
222
+ // Welcome messages
223
+ const welcomeMessages = [
224
+ "Bonjour! 👋 Je suis votre assistant virtuel. Comment puis-je vous aider aujourd'hui?",
225
+ "Je peux vous aider à prendre des rendez-vous, répondre à vos questions, et plus encore!",
226
+ "N'hésitez pas à partager des images ou à me poser des questions."
227
+ ];
228
 
229
+ function saveToHistory(message, isUser) {
230
+ const timestamp = new Date().toISOString();
231
+ conversationHistory.push({
232
+ message,
233
+ isUser,
234
+ timestamp
235
+ });
236
+ localStorage.setItem('chatHistory', JSON.stringify(conversationHistory));
237
+ updateHistoryPanel();
238
  }
239
 
240
+ function updateHistoryPanel() {
241
+ const historyContainer = document.getElementById('conversation-history');
242
+ historyContainer.innerHTML = '';
243
+
244
+ conversationHistory.forEach(item => {
245
+ const messageDiv = document.createElement('div');
246
+ messageDiv.classList.add('history-message');
247
+ const date = new Date(item.timestamp).toLocaleString();
248
+ messageDiv.innerHTML = `
249
+ <small>${date}</small><br>
250
+ <strong>${item.isUser ? 'Vous' : 'Assistant'}</strong>: ${item.message}
251
+ `;
252
+ historyContainer.appendChild(messageDiv);
253
+ });
254
  }
255
 
256
+ historyButton.addEventListener('click', () => {
257
+ historyPanel.classList.toggle('active');
258
+ });
259
+
260
  function addMessage(content, isUser, imageData = null) {
261
  const messageDiv = document.createElement('div');
262
+ messageDiv.classList.add('message', isUser ? 'user-message' : 'ai-message');
 
263
 
264
  if (imageData) {
265
  const img = document.createElement('img');
 
267
  img.alt = 'Image envoyée';
268
  messageDiv.appendChild(img);
269
  } else {
270
+ messageDiv.textContent = content;
 
271
  }
272
 
273
  chatMessages.appendChild(messageDiv);
274
  chatMessages.scrollTop = chatMessages.scrollHeight;
275
+
276
+ // Save to history
277
+ saveToHistory(imageData ? '[Image]' : content, isUser);
278
  }
279
 
280
+ // Load history from localStorage
281
+ function loadHistory() {
282
+ const savedHistory = localStorage.getItem('chatHistory');
283
+ if (savedHistory) {
284
+ conversationHistory = JSON.parse(savedHistory);
285
+ updateHistoryPanel();
286
+ }
287
+ }
288
+
289
+ // Initialize
290
+ window.onload = () => {
291
+ loadHistory();
292
+ // Display welcome messages with delay
293
+ welcomeMessages.forEach((message, index) => {
294
+ setTimeout(() => {
295
+ addMessage(message, false);
296
+ }, index * 1000);
297
+ });
298
+ };
299
+
300
  async function sendMessageToBackend(message, imageData = null) {
301
  try {
302
  showTypingIndicator();
303
 
304
  const formData = new FormData();
305
  // Encode le message avant l'envoi
306
+ formData.append('message', encodeURIComponent(message));
307
  if (imageData) {
308
  formData.append('image', imageData);
309
  }
 
322
 
323
  if (data.response) {
324
  // Décode la réponse du serveur
325
+ addMessage(decodeURIComponent(data.response), false);
326
  }
327
  } catch (error) {
328
  console.error('Erreur:', error);
 
383
  }
384
  });
385
 
386
+ // Fonction pour encoder correctement les caractères spéciaux
387
+ function encodeMessage(message) {
388
+ return encodeURIComponent(message);
389
+ }
390
+
391
+ // Fonction pour décoder les caractères spéciaux
392
+ function decodeMessage(message) {
393
+ return decodeURIComponent(message);
394
+ }
395
+
396
+ function showTypingIndicator() {
397
+ typingIndicator.style.display = 'block';
398
+ chatMessages.scrollTop = chatMessages.scrollHeight;
399
+ }
400
+
401
+ function hideTypingIndicator() {
402
+ typingIndicator.style.display = 'none';
403
+ }
404
+
405
  </script>
406
+ </body></html>