Update app.py

app.py

@@ -708,7 +708,7 @@ def index():
 
         function updateCharCount() {
             const count = messageInput.value.length;
-            charCount.textContent = ${count}/1000;
+            charCount.textContent = `${count}/1000`;
         }
 
         async function handleSubmit(e) {
@@ -752,13 +752,13 @@ def index():
             }
             
             const messageDiv = document.createElement('div');
-            messageDiv.className = message ${role};
+            messageDiv.className = `message ${role}`;
             
             const messageContent = document.createElement('div');
             messageContent.className = 'message-content';
             
             const avatar = document.createElement('div');
-            avatar.className = avatar ${role};
+            avatar.className = `avatar ${role}`;
             
             if (role === 'user') {
                 avatar.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>';
@@ -770,11 +770,11 @@ def index():
             bubble.className = 'message-bubble';
             
             if (role === 'user') {
-                bubble.innerHTML = <div class="message-text">${content}</div>;
+                bubble.innerHTML = `<div class="message-text">${content}</div>`;
                 messageContent.appendChild(bubble);
                 messageContent.appendChild(avatar);
             } else {
-                bubble.innerHTML = <div class="message-formatted">${formatMessageContent(content)}</div>;
+                bubble.innerHTML = `<div class="message-formatted">${formatMessageContent(content)}</div>`;
                 messageContent.appendChild(avatar);
                 messageContent.appendChild(bubble);
             }
@@ -787,22 +787,26 @@ def index():
         }
 
         function formatMessageContent(content) {
-            return content.split('\\n').map(line => {
+            return content.split('\n').map(line => {
                 if (line.trim().startsWith('•') || line.trim().startsWith('-')) {
-                    return <div style="display: flex; align-items: flex-start; margin-bottom: 0.375rem;">
+                    return ` 
+                    <div style="display: flex; align-items: flex-start; margin-bottom: 0.375rem;">
                         <span style="color: #16a34a; margin-right: 0.5rem; margin-top: 0.125rem; font-size: 0.875rem; font-weight: 500;">•</span>
-                        <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^[•-]\\s*/, '')}</span>
-                    </div>;
-                } else if (/^\\d+\\./.test(line.trim())) {
-                    const match = line.match(/^\\d+\\./);
-                    return <div style="display: flex; align-items: flex-start; margin-bottom: 0.375rem;">
+                        <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^[•-]\s*/, '')}</span>
+                    </div>
+                    `;
+                } else if (/^\d+\./.test(line.trim())) {
+                    const match = line.match(/^\d+\./);
+                    return ` 
+                    <div style="display: flex; align-items: flex-start; margin-bottom: 0.375rem;">
                         <span style="color: #16a34a; margin-right: 0.5rem; font-weight: 600; font-size: 0.875rem;">${match ? match[0] : ''}</span>
-                        <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^\\d+\\.\\s*/, '')}</span>
-                    </div>;
+                        <span style="font-size: 0.875rem; line-height: 1.5;">${line.replace(/^\d+\.\s*/, '')}</span>
+                    </div>
+                    `;
                 } else if (line.trim() === '') {
                     return '<br>';
                 } else {
-                    return <p style="margin-bottom: 0.375rem; font-size: 0.875rem; line-height: 1.5;">${line}</p>;
+                    return `<p style="margin-bottom: 0.375rem; font-size: 0.875rem; line-height: 1.5;">${line}</p>`;
                 }
             }).join('');
         }