Update static/index.html

static/index.html

@@ -11,6 +11,7 @@
             --bg-secondary: #12142B;
             --accent-primary: #7B68EE;
             --accent-secondary: #00D4FF;
+            --accent-tertiary: #FF69B4;
             --text-primary: #E2E8F0;
             --text-secondary: #94A3B8;
             --border-light: rgba(255, 255, 255, 0.08);
@@ -251,6 +252,10 @@
         .message.ai {
             border-left: 4px solid var(--accent-primary);
         }
+         .message.img {
+            border-left: 4px solid var(--accent-tertiary);
+        }
+      
 
         ::-webkit-scrollbar {
             width: 8px;
@@ -401,12 +406,16 @@ document.addEventListener('DOMContentLoaded', () => {
                 addMessage(htmlContent, 'ai', true);
             } else if (message.type === 'image') {
                 const img = document.createElement('img');
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `message img`;
                 if (img){
                 img.src = `data:image/png;base64,${message.image}`; // Set Base64 as the image source
                 img.alt = 'Generated Image';
                 img.style.width = '100%';
-                messages.appendChild(img);}
-                else{
+                
+                messageDiv.appendChild(img);
+                messages.appendChild(messageDiv);
+                } else{
                     const htmlContent = "The generated image might be inappropraite"; // Convert markdown to HTML
                 addMessage(htmlContent, 'ai', true);
                 }
@@ -501,6 +510,8 @@ document.addEventListener('DOMContentLoaded', () => {
         messages.appendChild(messageDiv);
         messages.scrollTop = messages.scrollHeight;
     }
+
+    
 });