Update flare-ui/src/app/components/chat/chat.component.scss

flare-ui/src/app/components/chat/chat.component.scss

@@ -20,6 +20,16 @@
     width: 100%;
     margin-bottom: 16px;
   }
+
+  .tts-checkbox {
+    margin-bottom: 8px;
+  }
+
+  .tts-hint {
+    color: #666;
+    font-size: 12px;
+    margin-bottom: 16px;
+  }
 }
 
 .chat-card {
@@ -34,6 +44,25 @@
     .spacer {
       flex: 1;
     }
+
+    .tts-indicator {
+      color: #4caf50;
+      margin-right: 8px;
+    }
+  }
+}
+
+.waveform-container {
+  background-color: #f0f0f0;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 116px;
+
+  canvas {
+    border-radius: 4px;
+    background-color: #f0f0f0;
   }
 }
 
@@ -84,16 +113,30 @@
     margin-top: 4px;
   }
 
-  .bubble {
+  .msg-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
     max-width: 70%;
-    padding: 12px 16px;
-    border-radius: 16px;
-    line-height: 1.5;
-    word-wrap: break-word;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    
-    // Animation for new messages
-    animation: slideIn 0.3s ease-out;
+
+    .bubble {
+      padding: 12px 16px;
+      border-radius: 16px;
+      line-height: 1.5;
+      word-wrap: break-word;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      animation: slideIn 0.3s ease-out;
+    }
+
+    .play-button {
+      margin-top: 4px;
+      
+      mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
+    }
   }
 }