Spaces:

Docfile
/

Chatm

Running

File size: 18,156 Bytes

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mariam AI!</title>

  <!-- Tailwind CSS via CDN (inclut le plugin Forms) -->
  <script src="https://cdn.tailwindcss.com?plugins=forms"></script>

  <!-- Favicon (Emoji simple) -->
  <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>">

  <style>
    /* Assurer la hauteur minimale et permettre le scroll de la page sur mobile */
    html, body {
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      flex-direction: column;
      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";
    }
    #chat-container {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      min-height: 0;
    }
    #chat-messages {
      flex-grow: 1;
      overflow-y: auto;
      min-height: 0;
    }
    /* Styles de la scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
      background: #a8a8a8;
      border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #7a7a7a;
    }
    /* Styles pour le rendu Markdown dans le chat */
    #chat-messages .prose code:not(pre code) {
      background-color: #e5e7eb;
      padding: 0.2em 0.4em;
      font-size: 85%;
      border-radius: 4px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }
    #chat-messages .prose pre {
      background-color: #f3f4f6;
      padding: 0.8em 1em;
      border-radius: 6px;
      overflow-x: auto;
      font-size: 0.875rem;
    }
    #chat-messages .prose pre code {
      background-color: transparent;
      padding: 0;
      font-size: inherit;
      border-radius: 0;
      color: inherit;
    }
    #chat-messages .prose blockquote {
      border-left-color: #9ca3af;
      color: #4b5563;
    }
    #chat-messages .prose strong {
      color: #1f2937;
    }
    #chat-messages .prose a {
      color: #2563eb;
      text-decoration: underline;
      text-decoration-color: #93c5fd;
      transition: color 0.2s ease;
    }
    #chat-messages .prose a:hover {
      color: #1d4ed8;
      text-decoration-color: #60a5fa;
    }
    /* Chargement initial de l'historique */
    #history-loading {
      padding: 20px;
      text-align: center;
      color: #6b7280;
      font-style: italic;
    }
  </style>
</head>
<body class="bg-gray-100 flex flex-col min-h-screen">
  <!-- En-tête fixe -->
  <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">
    <h1 class="text-xl sm:text-2xl font-bold">Mariam AI!</h1>
    <form action="/clear" method="POST" id="clear-form">
      <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">
        Effacer
      </button>
    </form>
  </header>

  <!-- Conteneur Principal du Chat -->
  <div id="chat-container" class="max-w-4xl w-full mx-auto bg-white shadow-xl rounded-b-lg flex flex-col flex-grow">
    <!-- Zone d'affichage des messages -->
    <div id="chat-messages" class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 scroll-smooth">
      <div id="history-loading">
        <div class="flex justify-center items-center space-x-2">
          <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">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <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>
          </svg>
          <span>Chargement de l'historique...</span>
        </div>
      </div>
      <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
        <div class="flex justify-center items-center space-x-2">
          <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">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <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>
          </svg>
          <span>Mariam réfléchit...</span>
        </div>
      </div>
    </div>

    <!-- Zone d'erreur -->
    <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;">
      <p class="font-bold mr-2">Erreur:</p>
      <p id="error-text">Le message d'erreur détaillé ira ici.</p>
    </div>

    <!-- Barre d'options et d'upload -->
    <div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0">
      <div class="flex items-center justify-between text-sm">
        <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">
          <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">
          <span class="hidden sm:inline">Recherche Web</span>
          <span class="sm:hidden">Web</span>
        </label>
        <div class="flex items-center space-x-2">
          <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)">
            <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">
              <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" />
            </svg>
            <span class="hidden sm:inline">Fichier</span>
            <input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg">
          </label>
          <span id="file-name" class="text-gray-500 text-xs truncate max-w-[150px]" title=""></span>
          <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;">
            <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">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Formulaire d'entrée du message -->
    <form id="chat-form" class="bg-gray-100 p-3 sm:p-4 border-t border-gray-200 rounded-b-lg flex-shrink-0">
      <div class="flex items-center space-x-2 sm:space-x-3">
        <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">
        <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">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
        </button>
      </div>
    </form>
  </div>

  <!-- Script JavaScript pour l'interaction -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Références aux éléments du DOM
      const chatForm = document.getElementById('chat-form');
      const promptInput = document.getElementById('prompt');
      const chatMessages = document.getElementById('chat-messages');
      const loadingIndicator = document.getElementById('loading-indicator');
      const historyLoadingIndicator = document.getElementById('history-loading');
      const errorMessageDiv = document.getElementById('error-message');
      const errorTextP = document.getElementById('error-text');
      const webSearchToggle = document.getElementById('web_search_toggle');
      const fileUpload = document.getElementById('file_upload');
      const fileNameSpan = document.getElementById('file-name');
      const clearFileButton = document.getElementById('clear-file');
      const sendButton = document.getElementById('send-button');
      const clearForm = document.getElementById('clear-form');

      // Endpoints de l'API Backend
      const API_CHAT_ENDPOINT = '/api/chat';
      const API_HISTORY_ENDPOINT = '/api/history';
      const CLEAR_ENDPOINT = '/clear';

      function scrollToBottom() {
        setTimeout(() => {
          chatMessages.scrollTop = chatMessages.scrollHeight;
        }, 50);
      }

      function showLoading(show) {
        const currentlyLoading = loadingIndicator.style.display !== 'none';
        if (show && !currentlyLoading) {
          loadingIndicator.style.display = 'block';
          chatMessages.appendChild(loadingIndicator);
          scrollToBottom();
        } else if (!show && currentlyLoading) {
          loadingIndicator.style.display = 'none';
        }
        sendButton.disabled = show;
        promptInput.disabled = show;
        fileUpload.disabled = show;
        clearFileButton.disabled = show;
      }

      function displayError(message) {
        errorTextP.textContent = message || "Une erreur inconnue est survenue.";
        errorMessageDiv.style.display = 'flex';
        errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }

      function addMessageToChat(role, text, isHtml = false) {
        errorMessageDiv.style.display = 'none';
        const messageWrapper = document.createElement('div');
        messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4');

        const bubbleDiv = document.createElement('div');
        bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-[85%]', 'sm:max-w-[75%]', 'shadow-md', 'relative');

        if (role === 'user') {
          bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
          const paragraph = document.createElement('p');
          paragraph.classList.add('text-sm', 'sm:text-base', 'break-words');
          paragraph.textContent = text;
          bubbleDiv.appendChild(paragraph);
        } else {
          bubbleDiv.classList.add('bg-gray-100', 'text-gray-800', 'rounded-bl-none', 'border', 'border-gray-200');
          const proseDiv = document.createElement('div');
          proseDiv.classList.add('prose', 'prose-sm', 'sm:prose-base', 'max-w-none', 'text-gray-800', 'prose-headings:font-semibold', 'prose-headings:text-gray-800', 'prose-a:text-blue-600', 'prose-a:no-underline', 'hover:prose-a:underline', 'prose-strong:text-gray-800', 'prose-code:text-red-600', 'prose-code:font-mono', 'prose-blockquote:text-gray-600', 'break-words');
          if (isHtml) {
            proseDiv.innerHTML = text;
          } else {
            proseDiv.textContent = text;
          }
          bubbleDiv.appendChild(proseDiv);
        }

        messageWrapper.appendChild(bubbleDiv);
        chatMessages.insertBefore(messageWrapper, loadingIndicator);

        if (historyLoadingIndicator.parentNode !== chatMessages) {
          scrollToBottom();
        }
      }

      async function loadChatHistory() {
        historyLoadingIndicator.style.display = 'block';
        try {
          const response = await fetch(API_HISTORY_ENDPOINT);
          if (!response.ok) {
            let errorMsg = `Erreur serveur (${response.status})`;
            try {
              const errData = await response.json();
              errorMsg = errData.error || errorMsg;
            } catch (e) { }
            throw new Error(errorMsg);
          }
          const data = await response.json();
          if (data.success && Array.isArray(data.history)) {
            chatMessages.innerHTML = '';
            chatMessages.appendChild(loadingIndicator);
            loadingIndicator.style.display = 'none';
            if (data.history.length === 0) {
              addMessageToChat('assistant', "Bonjour ! Comment puis-je vous aider aujourd'hui ?");
            } else {
              data.history.forEach(message => {
                const isAssistantHtml = message.role === 'assistant';
                addMessageToChat(message.role, message.text, isAssistantHtml);
              });
            }
            scrollToBottom();
          } else {
            throw new Error(data.error || "Format de réponse de l'historique invalide.");
          }
        } catch (error) {
          chatMessages.innerHTML = '';
          chatMessages.appendChild(loadingIndicator);
          loadingIndicator.style.display = 'none';
          displayError(`Impossible de charger l'historique: ${error.message}`);
        } finally {
          if (historyLoadingIndicator.parentNode === chatMessages) {
            historyLoadingIndicator.remove();
          }
          promptInput.focus();
        }
      }

      function clearFileInput() {
        fileUpload.value = '';
        fileNameSpan.textContent = '';
        fileNameSpan.title = '';
        clearFileButton.style.display = 'none';
      }

      fileUpload.addEventListener('change', () => {
        if (fileUpload.files.length > 0) {
          const file = fileUpload.files[0];
          const name = file.name;
          fileNameSpan.textContent = name.length > 20 ? name.substring(0, 17) + '...' : name;
          fileNameSpan.title = name;
          clearFileButton.style.display = 'inline-block';
        } else {
          clearFileInput();
        }
      });

      clearFileButton.addEventListener('click', () => {
        clearFileInput();
      });

      chatForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const prompt = promptInput.value.trim();
        const file = fileUpload.files[0];
        const useWebSearch = webSearchToggle.checked;

        if (!prompt && !file) {
          displayError("Veuillez entrer un message ou sélectionner un fichier.");
          promptInput.focus();
          return;
        }

        errorMessageDiv.style.display = 'none';
        let userMessageText = prompt;
        if (file) {
          userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
        }
        addMessageToChat('user', userMessageText);

        const formData = new FormData();
        formData.append('prompt', prompt);
        formData.append('web_search', useWebSearch);
        if (file) {
          formData.append('file', file);
        }

        showLoading(true);
        promptInput.value = '';
        clearFileInput();

        try {
          const response = await fetch(API_CHAT_ENDPOINT, {
            method: 'POST',
            body: formData,
          });
          const data = await response.json();
          if (!response.ok) {
            throw new Error(data.error || `Erreur serveur: ${response.status}`);
          }
          if (data.success && data.message) {
            addMessageToChat('assistant', data.message, true);
          } else {
            throw new Error(data.error || "Réponse invalide ou vide du serveur.");
          }
        } catch (error) {
          displayError(error.message);
        } finally {
          showLoading(false);
          promptInput.focus();
        }
      });

      clearForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        if (confirm("Êtes-vous sûr de vouloir effacer toute la conversation ?")) {
          const originalButtonText = e.target.querySelector('button').textContent;
          e.target.querySelector('button').textContent = '...';
          e.target.querySelector('button').disabled = true;
          try {
            const response = await fetch(CLEAR_ENDPOINT, { method: 'POST' });
            const data = await response.json();
            if (response.ok && data.success) {
              chatMessages.innerHTML = '';
              chatMessages.appendChild(loadingIndicator);
              loadingIndicator.style.display = 'none';
              addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
              errorMessageDiv.style.display = 'none';
            } else {
              throw new Error(data.error || "Impossible d'effacer côté serveur.");
            }
          } catch (error) {
            displayError(`Erreur lors de l'effacement du chat: ${error.message}`);
          } finally {
            e.target.querySelector('button').textContent = originalButtonText;
            e.target.querySelector('button').disabled = false;
            promptInput.focus();
          }
        }
      });

      loadChatHistory();
    });
  </script>
</body>
</html>