Spaces:

Docfile
/

Chatbotma

Sleeping

App Files Files Community

Docfile commited on Jan 28

Commit

49603e8

verified ·

1 Parent(s): b79a6a1

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +133 -10

templates/index.html CHANGED Viewed

@@ -6,6 +6,8 @@
     <title>Mariam AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         .message-transition {
             transition: all 0.3s ease-in-out;
@@ -13,6 +15,47 @@
         .gradient-background {
             background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -32,11 +75,16 @@
                         <span class="text-gray-700">Activer la recherche web</span>
                     </label>
                 </div>
-                <div class="relative">
-                    <input type="file" id="fileInput" class="hidden" accept="image/*,.pdf,.txt">
-                    <button onclick="document.getElementById('fileInput').click()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
-                        <i class="fas fa-upload mr-2"></i>Télécharger un fichier
                     </button>
                 </div>
             </div>
         </div>
@@ -45,7 +93,20 @@
         <div class="bg-white rounded-lg shadow-md h-[600px] flex flex-col">
             <!-- Messages Area -->
             <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
-                <!-- Messages will be inserted here -->
             </div>
             <!-- Input Area -->
@@ -63,6 +124,20 @@
     <script>
         let currentFile = null;
         document.getElementById('fileInput').addEventListener('change', async (e) => {
             const file = e.target.files[0];
             if (!file) return;
@@ -89,6 +164,22 @@
             }
         });
         document.getElementById('chatForm').addEventListener('submit', async (e) => {
             e.preventDefault();
@@ -124,7 +215,8 @@
                 if (data.error) {
                     addMessage('assistant', `Erreur: ${data.error}`);
                 } else {
-                    addMessage('assistant', data.response);
                 }
                 // Reset current file
@@ -135,7 +227,7 @@
             }
         });
-        function addMessage(role, content) {
             const messagesContainer = document.getElementById('chatMessages');
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'} message-transition`;
@@ -146,11 +238,19 @@
                     ? 'bg-blue-500 text-white rounded-br-none'
                     : 'bg-gray-100 text-gray-800 rounded-bl-none'
             }`;
-            messageBubble.textContent = content;
             messageDiv.appendChild(messageBubble);
             messagesContainer.appendChild(messageDiv);
-            messagesContainer.scrollTop = messagesContainer.scrollHeight;
         }
         function addTypingIndicator() {
@@ -168,7 +268,7 @@
                 </div>
             `;
             messagesContainer.appendChild(indicatorDiv);
-            messagesContainer.scrollTop = messagesContainer.scrollHeight;
         }
         function removeTypingIndicator() {
@@ -177,6 +277,29 @@
                 indicator.remove();
             }
         }
     </script>
 </body>
 </html>

     <title>Mariam AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <style>
         .message-transition {
             transition: all 0.3s ease-in-out;
         .gradient-background {
             background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
         }
+        .message-content pre {
+            background-color: #f6f8fa;
+            border-radius: 6px;
+            padding: 16px;
+            overflow-x: auto;
+            margin: 8px 0;
+        }
+        .message-content code {
+            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+            font-size: 0.9em;
+        }
+        .message-content p {
+            margin-bottom: 0.5rem;
+        }
+        .message-content ul, .message-content ol {
+            margin-left: 1.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .message-content ul {
+            list-style-type: disc;
+        }
+        .message-content ol {
+            list-style-type: decimal;
+        }
+        .message-content a {
+            color: #2563eb;
+            text-decoration: underline;
+        }
+        .message-content table {
+            border-collapse: collapse;
+            margin: 8px 0;
+            width: 100%;
+        }
+        .message-content th, .message-content td {
+            border: 1px solid #e5e7eb;
+            padding: 8px;
+            text-align: left;
+        }
+        .message-content th {
+            background-color: #f9fafb;
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
                         <span class="text-gray-700">Activer la recherche web</span>
                     </label>
                 </div>
+                <div class="flex space-x-4">
+                    <button onclick="clearHistory()" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg transition duration-200">
+                        <i class="fas fa-trash mr-2"></i>Effacer l'historique
                     </button>
+                    <div class="relative">
+                        <input type="file" id="fileInput" class="hidden" accept="image/*,.pdf,.txt">
+                        <button onclick="document.getElementById('fileInput').click()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition duration-200">
+                            <i class="fas fa-upload mr-2"></i>Télécharger un fichier
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
         <div class="bg-white rounded-lg shadow-md h-[600px] flex flex-col">
             <!-- Messages Area -->
             <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-4">
+                <!-- Existing chat history -->
+                {% for message in chat_history %}
+                    <div class="flex {{ 'justify-end' if message.role == 'user' else 'justify-start' }} message-transition">
+                        <div class="max-w-[70%] p-3 rounded-lg {{ 'bg-blue-500 text-white rounded-br-none' if message.role == 'user' else 'bg-gray-100 text-gray-800 rounded-bl-none' }}">
+                            {% if message.role == 'user' %}
+                                {{ message.content }}
+                            {% else %}
+                                <div class="message-content prose">
+                                    {{ message.content_html | safe }}
+                                </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endfor %}
             </div>
             <!-- Input Area -->
     <script>
         let currentFile = null;
+        // Initialize highlight.js
+        document.addEventListener('DOMContentLoaded', (event) => {
+            document.querySelectorAll('pre code').forEach((el) => {
+                hljs.highlightElement(el);
+            });
+        });
+        // Function to highlight code in new messages
+        function highlightCode() {
+            document.querySelectorAll('pre code').forEach((el) => {
+                hljs.highlightElement(el);
+            });
+        }
         document.getElementById('fileInput').addEventListener('change', async (e) => {
             const file = e.target.files[0];
             if (!file) return;
             }
         });
+        async function clearHistory() {
+            try {
+                const response = await fetch('/clear', {
+                    method: 'POST'
+                });
+                const data = await response.json();
+                if (data.success) {
+                    document.getElementById('chatMessages').innerHTML = '';
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                alert('Erreur lors de la suppression de l\'historique');
+            }
+        }
         document.getElementById('chatForm').addEventListener('submit', async (e) => {
             e.preventDefault();
                 if (data.error) {
                     addMessage('assistant', `Erreur: ${data.error}`);
                 } else {
+                    addMessage('assistant', data.response, data.response_html);
+                    highlightCode();
                 }
                 // Reset current file
             }
         });
+        function addMessage(role, content, contentHtml = null) {
             const messagesContainer = document.getElementById('chatMessages');
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'} message-transition`;
                     ? 'bg-blue-500 text-white rounded-br-none'
                     : 'bg-gray-100 text-gray-800 rounded-bl-none'
             }`;
+            if (role === 'user' || !contentHtml) {
+                messageBubble.textContent = content;
+            } else {
+                const contentWrapper = document.createElement('div');
+                contentWrapper.className = 'message-content prose';
+                contentWrapper.innerHTML = contentHtml;
+                messageBubble.appendChild(contentWrapper);
+            }
             messageDiv.appendChild(messageBubble);
             messagesContainer.appendChild(messageDiv);
+            scrollToBottom();
         }
         function addTypingIndicator() {
                 </div>
             `;
             messagesContainer.appendChild(indicatorDiv);
+            scrollToBottom();
         }
         function removeTypingIndicator() {
                 indicator.remove();
             }
         }
+        function scrollToBottom() {
+            const messagesContainer = document.getElementById('chatMessages');
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+        }
+        // Handle keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            // Ctrl/Cmd + Enter to submit
+            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                document.getElementById('chatForm').dispatchEvent(new Event('submit'));
+            }
+        });
+        // Auto-resize input field
+        const messageInput = document.getElementById('messageInput');
+        messageInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
+        // Initialize scroll position
+        scrollToBottom();
     </script>
 </body>
 </html>