Spaces:

Docfile
/

Chatm

Running

App Files Files Community

Docfile commited on Apr 4

Commit

b81fd4a

verified ·

1 Parent(s): 0b3c9ac

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +180 -21

templates/index.html CHANGED Viewed

@@ -333,6 +333,90 @@
     }
     pre:hover .code-copy-btn { opacity: 0.7; }
     pre:hover .code-copy-btn:hover { opacity: 1; }
   </style>
 </head>
 <body class="bg-gray-50 text-gray-900 antialiased">
@@ -451,23 +535,25 @@
           </div>
         </div>
       </div>
-      <!-- Formulaire de chat -->
       <form id="chat-form" class="p-3 sm:p-4 bg-white dark:bg-gray-900">
         <div class="relative">
-          <input
-            type="text"
             id="prompt"
             name="prompt"
-            class="chat-input w-full pl-4 pr-12 py-3 rounded-full border focus:outline-none text-sm sm:text-base"
             placeholder="Posez votre question à Mariam..."
-            autocomplete="off">
-          <button
-            type="submit"
-            id="send-button"
-            class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-300 text-white rounded-full p-2 transition focus:outline-none focus:ring-2 focus:ring-primary-400"
-            title="Envoyer le message">
-            <i class="fa-solid fa-paper-plane"></i>
-          </button>
         </div>
         <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
           Appuyez sur <kbd class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-700">Entrée</kbd> pour envoyer • <kbd class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-700">Shift+Entrée</kbd> pour une nouvelle ligne
@@ -526,6 +612,23 @@
       themeToggleBtn.addEventListener('click', toggleTheme);
       initializeTheme();
       // Défilement vers le bas
       function scrollToBottom(smooth = true) {
         setTimeout(() => {
@@ -588,6 +691,22 @@
           `;
         }
         messageWrapper.innerHTML = html;
         chatMessages.insertBefore(messageWrapper, loadingIndicator);
         scrollToBottom();
       }
@@ -713,6 +832,25 @@
       }
       clearFileButton.addEventListener('click', clearFileInput);
       // Soumission du formulaire
       chatForm.addEventListener('submit', async (e) => {
         e.preventDefault();
@@ -746,6 +884,7 @@
         formData.append('advanced_reasoning', useAdvanced);
         showLoading(true);
         promptInput.value = '';
         clearFileInput();
         advancedToggle.checked = false;
         if (useAdvanced) startAdvancedCooldownTimer();
@@ -819,17 +958,37 @@
         });
       });
-      promptInput.addEventListener('keydown', (e) => {
-        if (isComposing) return;
-        if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault();
-          if (!sendButton.disabled) chatForm.dispatchEvent(new Event('submit'));
-        }
       });
-      promptInput.addEventListener('compositionstart', () => { isComposing = true; });
-      promptInput.addEventListener('compositionend', () => { isComposing = false; });
-      loadChatHistory();
       const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
       prefersDarkScheme.addEventListener('change', (e) => {
         if (!localStorage.theme) {

     }
     pre:hover .code-copy-btn { opacity: 0.7; }
     pre:hover .code-copy-btn:hover { opacity: 1; }
+    /* Styles pour améliorer les tableaux Markdown */
+    .prose table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1rem 0;
+      overflow-x: auto;
+      display: block;
+    }
+    .prose table th,
+    .prose table td {
+      border: 1px solid #e2e8f0;
+      padding: 0.5rem 0.75rem;
+      text-align: left;
+    }
+    .dark .prose table th,
+    .dark .prose table td {
+      border-color: #334155;
+    }
+    .prose table thead {
+      background-color: #f8fafc;
+      font-weight: 600;
+    }
+    .dark .prose table thead {
+      background-color: #1e293b;
+    }
+    .prose table tbody tr:nth-child(even) {
+      background-color: #f8fafc;
+    }
+    .dark .prose table tbody tr:nth-child(even) {
+      background-color: #1e293b;
+    }
+    /* Pour le textarea qui s'adapte au contenu */
+    .chat-textarea {
+      resize: none;
+      min-height: 40px;
+      max-height: 200px;
+      overflow-y: auto;
+      line-height: 1.5;
+      width: 100%;
+      border-radius: 9999px;
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+    }
+    /* Ajustements pour le responsive */
+    @media (max-width: 640px) {
+      .message-bubble {
+        max-width: 90%;
+        padding: 0.75rem 0.875rem;
+      }
+      .chat-textarea {
+        max-height: 120px;
+        font-size: 0.95rem;
+        padding-top: 0.625rem;
+        padding-bottom: 0.625rem;
+      }
+      .prose table {
+        font-size: 0.85rem;
+      }
+      .prose table th,
+      .prose table td {
+        padding: 0.375rem 0.5rem;
+      }
+      .send-button-wrapper {
+        top: 0;
+        right: 0;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding-right: 0.5rem;
+      }
+    }
   </style>
 </head>
 <body class="bg-gray-50 text-gray-900 antialiased">
           </div>
         </div>
       </div>
+      <!-- Formulaire de chat avec textarea au lieu d'input -->
       <form id="chat-form" class="p-3 sm:p-4 bg-white dark:bg-gray-900">
         <div class="relative">
+          <textarea
             id="prompt"
             name="prompt"
+            class="chat-input chat-textarea w-full pl-4 pr-12 py-3 rounded-full border focus:outline-none text-sm sm:text-base"
             placeholder="Posez votre question à Mariam..."
+            autocomplete="off"
+            rows="1"></textarea>
+          <div class="send-button-wrapper absolute right-2 top-1/2 transform -translate-y-1/2">
+            <button
+              type="submit"
+              id="send-button"
+              class="bg-primary-500 hover:bg-primary-600 disabled:bg-primary-300 text-white rounded-full p-2 transition focus:outline-none focus:ring-2 focus:ring-primary-400"
+              title="Envoyer le message">
+              <i class="fa-solid fa-paper-plane"></i>
+            </button>
+          </div>
         </div>
         <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
           Appuyez sur <kbd class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-700">Entrée</kbd> pour envoyer • <kbd class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-700">Shift+Entrée</kbd> pour une nouvelle ligne
       themeToggleBtn.addEventListener('click', toggleTheme);
       initializeTheme();
+      // Fonction pour ajuster la hauteur du textarea
+      function adjustTextareaHeight(textarea) {
+        textarea.style.height = 'auto';
+        const newHeight = Math.min(200, textarea.scrollHeight);
+        textarea.style.height = newHeight + 'px';
+        // Ajuste la position du bouton d'envoi
+        const sendButtonWrapper = document.querySelector('.send-button-wrapper');
+        if (sendButtonWrapper) {
+          if (window.innerWidth <= 640) {
+            sendButtonWrapper.style.top = '';
+          } else {
+            sendButtonWrapper.style.top = (newHeight / 2) + 'px';
+          }
+        }
+      }
       // Défilement vers le bas
       function scrollToBottom(smooth = true) {
         setTimeout(() => {
           `;
         }
         messageWrapper.innerHTML = html;
+        // Activer les boutons de copie sur les nouveaux messages
+        const copyBtns = messageWrapper.querySelectorAll('.copy-btn');
+        copyBtns.forEach(btn => {
+          btn.addEventListener('click', function() {
+            const textToCopy = this.closest('.message-bubble').querySelector('.prose').innerText;
+            navigator.clipboard.writeText(textToCopy).then(() => {
+              const originalText = this.innerHTML;
+              this.innerHTML = '<i class="fa-solid fa-check mr-1"></i> Copié';
+              setTimeout(() => {
+                this.innerHTML = originalText;
+              }, 2000);
+            });
+          });
+        });
         chatMessages.insertBefore(messageWrapper, loadingIndicator);
         scrollToBottom();
       }
       }
       clearFileButton.addEventListener('click', clearFileInput);
+      // Événements pour le textarea
+      promptInput.addEventListener('input', function() {
+        adjustTextareaHeight(this);
+      });
+      promptInput.addEventListener('keydown', (e) => {
+        if (isComposing) return;
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          if (!sendButton.disabled) chatForm.dispatchEvent(new Event('submit'));
+        } else if (e.key === 'Enter' && e.shiftKey) {
+          // Laisser le comportement par défaut (nouvelle ligne)
+          setTimeout(() => adjustTextareaHeight(promptInput), 0);
+        }
+      });
+      promptInput.addEventListener('compositionstart', () => { isComposing = true; });
+      promptInput.addEventListener('compositionend', () => { isComposing = false; });
       // Soumission du formulaire
       chatForm.addEventListener('submit', async (e) => {
         e.preventDefault();
         formData.append('advanced_reasoning', useAdvanced);
         showLoading(true);
         promptInput.value = '';
+        promptInput.style.height = 'auto'; // Réinitialiser la hauteur du textarea
         clearFileInput();
         advancedToggle.checked = false;
         if (useAdvanced) startAdvancedCooldownTimer();
         });
       });
+      // Init
+      loadChatHistory();
+      adjustTextareaHeight(promptInput);
+      // Gérer les changements de taille de l'écran
+      window.addEventListener('resize', () => {
+        adjustTextareaHeight(promptInput);
       });
+      // Observer pour les tableaux Markdown et ajouter une classe spéciale si nécessaire
+      const observeMarkdownTables = () => {
+        const observer = new MutationObserver(mutations => {
+          mutations.forEach(mutation => {
+            if (mutation.type === 'childList') {
+              const tables = document.querySelectorAll('.prose table:not(.markdown-enhanced)');
+              tables.forEach(table => {
+                table.classList.add('markdown-enhanced');
+                const wrapper = document.createElement('div');
+                wrapper.className = 'overflow-x-auto';
+                table.parentNode.insertBefore(wrapper, table);
+                wrapper.appendChild(table);
+              });
+            }
+          });
+        });
+        observer.observe(chatMessages, { childList: true, subtree: true });
+      };
+      observeMarkdownTables();
       const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
       prefersDarkScheme.addEventListener('change', (e) => {
         if (!localStorage.theme) {