Update index.html

index.html

@@ -86,7 +86,16 @@
             min-width: 95%;
             max-width: 95%;
         }
+        #chat-messages img{
+            min-width: 80%;
+            width: 80%;
+        }
     }
+    #chat-messages img{
+            width: 40%;
+            margin-left: 7px;
+            
+        }
     </style>
     
     
@@ -109,7 +118,7 @@
     
     <div class="bg-gray-200 px-4 py-3 flex items-center" id="ic">
         <input id="user-input" type="text" autocomplete="off" placeholder="Type your message..." class="flex-1 py-2 px-2 rounded-lg focus:outline-none focus:ring focus:ring-cyan-400 bg-gray-200 text-gray-300">
-        <button onclick="sendMessage()" class="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg" id='btn'>Send</button>
+        <button id='btn' onclick="sendMessage()" class="ml-4 bg-blue-600 text-white px-4 py-2 rounded-lg">Send</button>
     </div>
 
     
@@ -138,7 +147,7 @@
     document.getElementById('userCount').innerText = `Online Users: ${onlineUsersCount}`    
 });
         function sendMessage() {
-          document.getElementById('btn').disabled = true
+            document.getElementById('btn').disabled = true
             var message = userInput.value;
             if(message.length>1200){
                 alert('messsage lenght exceeds 1200 chracters!!')
@@ -155,8 +164,9 @@
         userInput.addEventListener("keypress", function(event) {
       if (event.keyCode === 13) { 
         if(!document.getElementById('btn').disabled){
-          sendMessage();
+            sendMessage();
         }
+        
       }
     });
   
@@ -180,10 +190,17 @@
 });
        
 socket.on('response', function(data) {
+    if(data.img!=null || data.img!=undefined){
+        var img = document.createElement('img');
+        img.src = 'data:image/jpeg;base64,' + data.img;
+        messages.appendChild(img);
+    }
+    else{
+
+    console.log(data.response); 
     var currentMessage = messages.lastChild;
     if (data.response === 'complete') {
         currentMessage = null;
-      document.getElementById('btn').disabled = false
     } else {
         if (!currentMessage || !currentMessage.classList.contains('ai-response')) {
             currentMessage = document.createElement('p');
@@ -205,7 +222,23 @@ socket.on('response', function(data) {
         currentMessage.appendChild(responseText);
         
         }
+
+    }   
+});
+
+
+
+
+socket.on('image', function(data) {
+    if (data.image) {
+        var img = document.createElement('img');
+        img.src = 'data:image/jpeg;base64,' + data.image;
+        document.body.appendChild(img); // Or append to a specific container
+    }
 });
+
+
+
     </script>
 </body>