Spaces:

Docfile
/

Chatm

Running

App Files Files Community

Docfile commited on Feb 19

Commit

7ddeafc

verified ·

1 Parent(s): c54f02a

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +122 -40

templates/index.html CHANGED Viewed

@@ -9,51 +9,66 @@
 </head>
 <body class="bg-gray-100 h-screen">
     <div class="container mx-auto p-4 h-full flex flex-col">
-        <div class="bg-white rounded-lg shadow-lg p-6 h-full flex flex-col">
-            <!-- Header -->
-            <div class="flex justify-between items-center mb-6">
-                <h1 class="text-2xl font-bold">Mariam AI</h1>
-                <div class="flex space-x-4">
-                    <label class="flex items-center">
-                        <input type="checkbox" id="webSearchToggle" class="mr-2">
-                        Activer la recherche web
-                    </label>
-                    <button onclick="clearChat()" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
-                        Effacer le chat
                     </button>
                 </div>
             </div>
-            <!-- File Upload -->
-            <div class="mb-4">
-                <input type="file" id="fileUpload" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt,.mp3,.mp4">
-                <label for="fileUpload" class="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
-                    Télécharger un fichier
-                </label>
-                <span id="fileName" class="ml-2 text-gray-600"></span>
-            </div>
-            <!-- Chat Messages -->
-            <div id="chatMessages" class="flex-1 overflow-y-auto mb-4 space-y-4">
-                {% for message in messages %}
-                <div class="flex {% if message.role == 'user' %}justify-end{% endif %}">
-                    <div class="max-w-3/4 p-3 rounded-lg {% if message.role == 'user' %}bg-blue-500 text-white{% else %}bg-gray-200{% endif %}">
-                        {{ message.content }}
                     </div>
                 </div>
-                {% endfor %}
-            </div>
-            <!-- Input Area -->
-            <div class="border-t pt-4">
-                <div class="flex space-x-4">
-                    <input type="text" id="messageInput"
-                           class="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                           placeholder="Écrivez votre message...">
-                    <button onclick="sendMessage()"
-                            class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition duration-200">
-                        Envoyer
-                    </button>
                 </div>
             </div>
         </div>
@@ -65,6 +80,52 @@
         const webSearchToggle = document.getElementById('webSearchToggle');
         const fileUpload = document.getElementById('fileUpload');
         const fileName = document.getElementById('fileName');
         function addMessage(content, isUser = false) {
             const messageDiv = document.createElement('div');
@@ -77,12 +138,24 @@
             messageDiv.appendChild(innerDiv);
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
         async function sendMessage() {
             const message = messageInput.value.trim();
             if (!message) return;
             addMessage(message, true);
             messageInput.value = '';
@@ -94,7 +167,8 @@
                     },
                     body: JSON.stringify({
                         message: message,
-                        web_search: webSearchToggle.checked
                     })
                 });
@@ -143,12 +217,20 @@
         async function clearChat() {
             try {
                 await fetch('/clear_chat', { method: 'POST' });
-                chatMessages.innerHTML = '';
-                location.reload();
             } catch (error) {
                 alert(`Erreur: ${error.message}`);
             }
         }
     </script>
 </body>
 </html>

 </head>
 <body class="bg-gray-100 h-screen">
     <div class="container mx-auto p-4 h-full flex flex-col">
+        <!-- Sidebar for conversations -->
+        <div class="grid grid-cols-4 gap-4 h-full">
+            <div class="bg-white rounded-lg shadow-lg p-4">
+                <div class="flex flex-col h-full">
+                    <button onclick="startNewConversation()" class="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mb-4">
+                        Nouvelle conversation
                     </button>
+                    <div id="conversationsList" class="flex-1 overflow-y-auto space-y-2">
+                        <!-- Conversations will be listed here -->
+                    </div>
                 </div>
             </div>
+            <!-- Main chat area -->
+            <div class="col-span-3 bg-white rounded-lg shadow-lg p-6 flex flex-col">
+                <!-- Header -->
+                <div class="flex justify-between items-center mb-6">
+                    <h1 class="text-2xl font-bold">Mariam AI</h1>
+                    <div class="flex space-x-4">
+                        <label class="flex items-center">
+                            <input type="checkbox" id="webSearchToggle" class="mr-2">
+                            Activer la recherche web
+                        </label>
+                        <button onclick="clearChat()" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">
+                            Effacer le chat
+                        </button>
+                    </div>
+                </div>
+                <!-- File Upload -->
+                <div class="mb-4">
+                    <input type="file" id="fileUpload" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.txt,.mp3,.mp4">
+                    <label for="fileUpload" class="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
+                        Télécharger un fichier
+                    </label>
+                    <span id="fileName" class="ml-2 text-gray-600"></span>
+                </div>
+                <!-- Chat Messages with improved scrolling -->
+                <div id="chatMessages" class="flex-1 overflow-y-auto mb-4 space-y-4 bg-gray-50 p-4 rounded-lg">
+                    {% for message in messages %}
+                    <div class="flex {% if message.role == 'user' %}justify-end{% endif %}">
+                        <div class="max-w-3/4 p-3 rounded-lg {% if message.role == 'user' %}bg-blue-500 text-white{% else %}bg-gray-200{% endif %}">
+                            {{ message.content }}
+                        </div>
                     </div>
+                    {% endfor %}
                 </div>
+                <!-- Input Area -->
+                <div class="border-t pt-4">
+                    <div class="flex space-x-4">
+                        <input type="text" id="messageInput"
+                               class="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                               placeholder="Écrivez votre message...">
+                        <button onclick="sendMessage()"
+                                class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition duration-200">
+                            Envoyer
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
         const webSearchToggle = document.getElementById('webSearchToggle');
         const fileUpload = document.getElementById('fileUpload');
         const fileName = document.getElementById('fileName');
+        const conversationsList = document.getElementById('conversationsList');
+        let conversations = [];
+        let currentConversationId = null;
+        function startNewConversation() {
+            const conversationId = Date.now().toString();
+            const conversation = {
+                id: conversationId,
+                title: `Conversation ${conversations.length + 1}`,
+                messages: []
+            };
+            conversations.push(conversation);
+            currentConversationId = conversationId;
+            updateConversationsList();
+            clearChatMessages();
+        }
+        function updateConversationsList() {
+            conversationsList.innerHTML = '';
+            conversations.forEach(conv => {
+                const convDiv = document.createElement('div');
+                convDiv.className = `p-2 rounded cursor-pointer ${conv.id === currentConversationId ? 'bg-blue-100' : 'hover:bg-gray-100'}`;
+                convDiv.onclick = () => loadConversation(conv.id);
+                convDiv.textContent = conv.title;
+                conversationsList.appendChild(convDiv);
+            });
+        }
+        function loadConversation(conversationId) {
+            currentConversationId = conversationId;
+            const conversation = conversations.find(c => c.id === conversationId);
+            updateConversationsList();
+            if (conversation) {
+                clearChatMessages();
+                conversation.messages.forEach(msg => {
+                    addMessage(msg.content, msg.isUser);
+                });
+            }
+        }
+        function clearChatMessages() {
+            chatMessages.innerHTML = '';
+        }
         function addMessage(content, isUser = false) {
             const messageDiv = document.createElement('div');
             messageDiv.appendChild(innerDiv);
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
+            // Save message to current conversation
+            if (currentConversationId) {
+                const conversation = conversations.find(c => c.id === currentConversationId);
+                if (conversation) {
+                    conversation.messages.push({ content, isUser });
+                }
+            }
         }
         async function sendMessage() {
             const message = messageInput.value.trim();
             if (!message) return;
+            if (!currentConversationId) {
+                startNewConversation();
+            }
             addMessage(message, true);
             messageInput.value = '';
                     },
                     body: JSON.stringify({
                         message: message,
+                        web_search: webSearchToggle.checked,
+                        conversation_id: currentConversationId
                     })
                 });
         async function clearChat() {
             try {
                 await fetch('/clear_chat', { method: 'POST' });
+                if (currentConversationId) {
+                    const conversation = conversations.find(c => c.id === currentConversationId);
+                    if (conversation) {
+                        conversation.messages = [];
+                    }
+                }
+                clearChatMessages();
             } catch (error) {
                 alert(`Erreur: ${error.message}`);
             }
         }
+        // Start with a new conversation
+        startNewConversation();
     </script>
 </body>
 </html>