From 51c3c6b57737f87854b42ba0be9f5319154d126f Mon Sep 17 00:00:00 2001 From: inubimambo Date: Sat, 12 Jul 2025 13:11:17 +0800 Subject: [PATCH] Improve chat output and formatting --- public/css/style.css | 143 +++++++++++++++++++++++++++++++++++++++++++ views/chat.ejs | 85 ++++++++++++++++++++++++- 2 files changed, 225 insertions(+), 3 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 9a91bdc..bf733b4 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -614,3 +614,146 @@ body { border-radius: 0.75rem; overflow: hidden; } + +/* Enhanced Chat Message Formatting */ +.message-text { + line-height: 1.6; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.message-text h3, +.message-text h4, +.message-text h5 { + color: inherit; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.message-text h3 { + font-size: 1.1rem; + border-bottom: 1px solid rgba(0,0,0,0.1); + padding-bottom: 0.25rem; +} + +.message-text h4 { + font-size: 1.05rem; +} + +.message-text h5 { + font-size: 1rem; +} + +/* Code formatting */ +.message-text .code-block { + background-color: #f8f9fa; + border: 1px solid #e9ecef; + border-radius: 0.375rem; + padding: 0.75rem; + margin: 0.5rem 0; + font-family: 'Courier New', monospace; + font-size: 0.875rem; + white-space: pre-wrap; + overflow-x: auto; + max-width: 100%; +} + +.message-text .inline-code { + background-color: #f8f9fa; + border: 1px solid #e9ecef; + border-radius: 0.25rem; + padding: 0.125rem 0.25rem; + font-family: 'Courier New', monospace; + font-size: 0.875rem; + color: #d63384; +} + +/* List formatting */ +.message-text .formatted-list { + margin: 0.5rem 0; + padding-left: 1.5rem; +} + +.message-text .formatted-list li { + margin-bottom: 0.25rem; + line-height: 1.5; +} + +.message-text ul.formatted-list { + list-style-type: disc; +} + +.message-text ol.formatted-list { + list-style-type: decimal; +} + +.message-text .bullet-item, +.message-text .list-item { + display: list-item; +} + +/* Bold and italic text */ +.message-text strong { + font-weight: 600; +} + +.message-text em { + font-style: italic; +} + +/* Paragraph spacing */ +.message-text br + br { + display: block; + margin: 0.5rem 0; + content: ""; +} + +/* Special styling for bot messages */ +.bot-message .message-text .code-block { + background-color: #f1f3f4; + border-color: #dadce0; +} + +.bot-message .message-text .inline-code { + background-color: #f1f3f4; + border-color: #dadce0; + color: #1a73e8; +} + +/* Special styling for user messages */ +.user-message .message-text .code-block { + background-color: rgba(255,255,255,0.1); + border-color: rgba(255,255,255,0.2); + color: #ffffff; +} + +.user-message .message-text .inline-code { + background-color: rgba(255,255,255,0.1); + border-color: rgba(255,255,255,0.2); + color: #ffffff; +} + +.user-message .message-text h3, +.user-message .message-text h4, +.user-message .message-text h5 { + color: #ffffff; + border-color: rgba(255,255,255,0.3); +} + +/* Responsive adjustments for mobile */ +@media (max-width: 768px) { + .message-text .code-block { + font-size: 0.8rem; + padding: 0.5rem; + } + + .message-text .formatted-list { + padding-left: 1.2rem; + } + + .message-text h3, + .message-text h4, + .message-text h5 { + font-size: 0.95rem; + } +} diff --git a/views/chat.ejs b/views/chat.ejs index 156b7c1..9c4e1e2 100644 --- a/views/chat.ejs +++ b/views/chat.ejs @@ -94,6 +94,22 @@ document.addEventListener('DOMContentLoaded', function() { function addWelcomeMessage() { const messageDiv = document.createElement('div'); messageDiv.className = 'chat-message bot-message mb-3'; + const welcomeText = `Hello! I'm **EduCat AI**, your study assistant. I can help you with: + +• Questions about your notes and study materials +• Study techniques and academic strategies +• Explanations of complex concepts +• Creating study plans and schedules + +I support **rich formatting** in my responses including: +- **Bold text** and *italic text* +- \`Code snippets\` and code blocks +- Numbered lists and bullet points +- Headers and structured content + +How can I assist you today?`; + const formattedWelcome = formatMessage(welcomeText, true); + messageDiv.innerHTML = `
@@ -101,7 +117,7 @@ document.addEventListener('DOMContentLoaded', function() {
-

Hello! I'm EduCat AI, your study assistant. I can help you with questions about your notes, study techniques, and academic topics. How can I assist you today?

+
${formattedWelcome}
Just now
@@ -125,18 +141,81 @@ document.addEventListener('DOMContentLoaded', function() { sendToAI(message); } + function formatMessage(text, isBot = false) { + if (!isBot) { + // For user messages, just escape HTML and preserve basic formatting + return text.replace(/&/g, '&') + .replace(//g, '>') + .replace(/\n/g, '
'); + } + + // For bot messages, apply rich formatting + let formatted = text + // Escape HTML first + .replace(/&/g, '&') + .replace(//g, '>'); + + // Convert markdown-style formatting + // Bold text **text** or __text__ + formatted = formatted.replace(/\*\*(.*?)\*\*/g, '$1'); + formatted = formatted.replace(/__(.*?)__/g, '$1'); + + // Italic text *text* or _text_ + formatted = formatted.replace(/(?$1'); + formatted = formatted.replace(/(?$1'); + + // Code blocks ```code``` + formatted = formatted.replace(/```([\s\S]*?)```/g, '
$1
'); + + // Inline code `code` + formatted = formatted.replace(/`([^`]+)`/g, '$1'); + + // Headers + formatted = formatted.replace(/^### (.*$)/gm, '
$1
'); + formatted = formatted.replace(/^## (.*$)/gm, '

$1

'); + formatted = formatted.replace(/^# (.*$)/gm, '

$1

'); + + // Convert bullet points and numbered lists + // Handle bullet points: - item, * item, • item + formatted = formatted.replace(/^[\s]*[-*•]\s+(.+)$/gm, '
  • $1
    • '); + + // Handle numbered lists: 1. item, 2. item, etc. + formatted = formatted.replace(/^[\s]*\d+\.\s+(.+)$/gm, '
  • $1
    • '); + + // Wrap consecutive list items in proper list containers + formatted = formatted.replace(/(
  • .*?<\/li>)(?:\s*
  • .*?<\/li>)*/gs, function(match) { + return '
      ' + match + '
    '; + }); + + formatted = formatted.replace(/(
  • .*?<\/li>)(?:\s*
  • .*?<\/li>)*/gs, function(match) { + return '
      ' + match.replace(/class="numbered-item"/g, 'class="list-item"') + '
    '; + }); + + // Convert line breaks to
    but not inside 
     or list tags
+        let parts = formatted.split(/(||)/);
+        for (let i = 0; i < parts.length; i += 2) {
+            parts[i] = parts[i].replace(/\n\s*\n/g, '

    ').replace(/\n/g, '
    ');
+        }
+        formatted = parts.join('');
+        
+        return formatted;
+    }
+
     function addMessageToChat(sender, message, withScroll = true) {
         const messageDiv = document.createElement('div');
         messageDiv.className = `chat-message ${sender}-message mb-3`;
         
         const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+        const formattedMessage = formatMessage(message, sender === 'bot');
         
         if (sender === 'user') {
             messageDiv.innerHTML = `
                 
    
                     
    
                         
    
-                            
    ${message}
    
+                            
    ${formattedMessage}
    
                         
    
                         ${time}
                     
    
@@ -153,7 +232,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     
    
                     
    
                         
    
-                            
    ${message}
    
+                            
    ${formattedMessage}
    
                         
    
                         ${time}