MODIFIED: chatbot UI for handling code snippet in the chat

AquibPy · Apr 24, 2024 · 80ce7cd · 80ce7cd
1 parent 39ad014
commit 80ce7cd
Showing 1 changed file with 58 additions and 43 deletions.
diff --git a/templates/index.html b/templates/index.html
@@ -183,22 +183,31 @@
 
     /* Message bubbles */
     .message-bubble {
-      max-width: 70%;
-      margin-bottom: 10px;
-      padding: 10px;
-      border-radius: 20px;
+    max-width: 70%;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 20px;
+    word-wrap: break-word; /* Added to ensure long lines wrap within the bubble */
+    white-space: pre-wrap; /* Added to preserve line breaks in preformatted text */
     }
 
     .user-message-bubble {
-      background-color: #007bff;
-      color: white;
-      align-self: flex-end;
+    background-color: #007bff;
+    color: white;
+    align-self: flex-end;
     }
 
     .bot-message-bubble {
-      background-color: #f2f2f2;
-      color: black;
-      align-self: flex-start;
+    background-color: #f2f2f2;
+    color: black;
+    align-self: flex-start;
+    }
+
+    /* Style for preformatted code blocks */
+    .bot-message-bubble pre,
+    .user-message-bubble pre {
+    margin: 0; /* Remove default margins */
+    white-space: pre-wrap; /* Preserve line breaks */
     }
   </style>
 </head>
@@ -221,54 +230,60 @@ <h1>Chat with LLAMA 3 🦙🦙🦙</h1>
 
   <script>
     async function sendMessage() {
-      var messageInput = document.getElementById("message");
-      var message = messageInput.value.trim();
+    var messageInput = document.getElementById("message");
+    var message = messageInput.value.trim();
 
-      if (!message) {
+    if (!message) {
         displayErrorMessage("Please enter a message.");
         return;
-      }
+    }
 
-      // Create a new message bubble for the user's message
-      var userMessageBubble = document.createElement('div');
-      userMessageBubble.classList.add('user-message-bubble', 'message-bubble');
-      userMessageBubble.textContent = message;
-      document.getElementById("result").appendChild(userMessageBubble);
+    // Create a new message bubble for the user's message
+    var userMessageBubble = document.createElement('div');
+    userMessageBubble.classList.add('user-message-bubble', 'message-bubble');
+    userMessageBubble.textContent = message;
+    document.getElementById("result").appendChild(userMessageBubble);
 
-      var response = await fetch('https://llm-pgc4.onrender.com/stream_chat', {
+    var response = await fetch('https://llm-pgc4.onrender.com/stream_chat', {
         method: 'POST',
         headers: {
-          'Content-Type': 'application/x-www-form-urlencoded'
+            'Content-Type': 'application/x-www-form-urlencoded'
         },
         body: 'message=' + encodeURIComponent(message)
-      });
-      var reader = response.body.getReader();
-      var decoder = new TextDecoder('utf-8');
-      var botMessageBubble = document.createElement('div');
-      botMessageBubble.classList.add('bot-message-bubble', 'message-bubble'); // Create a single bubble for bot's response
-      document.getElementById("result").appendChild(botMessageBubble); // Append the bot's message bubble to the result container
+    });
+    var reader = response.body.getReader();
+    var decoder = new TextDecoder('utf-8');
+
+    // Create a container for the bot's response
+    var botResponseContainer = document.createElement('div');
+    botResponseContainer.classList.add('bot-message-bubble', 'message-bubble');
+
+    var botMessageBubble = document.createElement('div');
+    botMessageBubble.classList.add('bot-response'); // Add a class to style markdown content
+    botResponseContainer.appendChild(botMessageBubble); // Append the bot's message bubble to the container
+    document.getElementById("result").appendChild(botResponseContainer); // Append the container to the result container
 
-      var botResponse = ''; // Initialize botResponse variable
+    var botResponse = ''; // Initialize botResponse variable
 
-      async function readStream() {
+    async function readStream() {
         while (true) {
-          const { done, value } = await reader.read();
-          if (done) {
-            break;
-          }
-          const chunk = decoder.decode(value, { stream: true });
-          botResponse += chunk; // Append the current chunk to the bot response
-          botMessageBubble.innerHTML = marked(botResponse); // Parse Markdown and update the bot message bubble with the current response
-          var chatContainer = document.getElementById("result");
-          chatContainer.scrollTop = chatContainer.scrollHeight; // Scroll to the bottom of the chat container
+            const { done, value } = await reader.read();
+            if (done) {
+                break;
+            }
+            const chunk = decoder.decode(value, { stream: true });
+            botResponse += chunk; // Append the current chunk to the bot response
+            botMessageBubble.innerHTML = marked(botResponse); // Parse Markdown and update the bot message bubble with the current response
+            var chatContainer = document.getElementById("result");
+            chatContainer.scrollTop = chatContainer.scrollHeight; // Scroll to the bottom of the chat container
         }
-      }
+    }
 
-      readStream().catch(error => {
+    readStream().catch(error => {
         console.error('Error reading response stream:', error);
-      });
-      messageInput.value = '';
-    }
+    });
+    messageInput.value = '';
+}
 
     function toggleDarkMode() {
       var body = document.body;