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

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

@@ -1,13 +1,40 @@
+.chat-container {
+  height: 100%;
+  padding: 24px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
 .start-wrapper {
   display: flex;
   justify-content: center;
-  padding: 24px;
+  align-items: center;
+  min-height: 400px;
+
+  mat-card {
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .project-select {
+    width: 100%;
+    margin-bottom: 16px;
+  }
 }
 
 .chat-card {
+  height: calc(100vh - 200px);
   display: flex;
   flex-direction: column;
-  height: 100%;
+  
+  mat-card-header {
+    background-color: #f5f5f5;
+    padding: 16px;
+    
+    .spacer {
+      flex: 1;
+    }
+  }
 }
 
 .chat-history {
@@ -15,18 +42,27 @@
   overflow-y: auto;
   padding: 16px;
   background: #fafafa;
+  min-height: 300px;
 }
 
 .msg-row {
   display: flex;
-  margin: 6px 0;
+  align-items: flex-start;
+  margin: 12px 0;
+  gap: 8px;
 
   &.me {
     justify-content: flex-end;
+    flex-direction: row-reverse;
 
     .bubble {
-      background: #d0f0ff;
-      color: #000;
+      background: #3f51b5;
+      color: white;
+      border-bottom-right-radius: 4px;
+    }
+
+    .msg-icon {
+      color: #3f51b5;
     }
   }
 
@@ -34,25 +70,91 @@
     justify-content: flex-start;
 
     .bubble {
-      background: #eeeeee;
+      background: #e8eaf6;
       color: #000;
+      border-bottom-left-radius: 4px;
+    }
+
+    .msg-icon {
+      color: #7986cb;
     }
   }
 
+  .msg-icon {
+    margin-top: 4px;
+  }
+
   .bubble {
     max-width: 70%;
-    padding: 8px 12px;
+    padding: 12px 16px;
     border-radius: 16px;
-    line-height: 1.4;
+    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;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
 .input-row {
   display: flex;
-  padding: 8px 16px;
+  padding: 16px;
+  gap: 12px;
+  align-items: flex-start;
+  background-color: #fff;
 
   .flex-1 {
     flex: 1;
   }
+
+  .send-button {
+    margin-top: 8px;
+  }
+}
+
+// Loading state
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 20px;
 }
+
+// Error state
+.error-message {
+  color: #f44336;
+  padding: 16px;
+  text-align: center;
+  background-color: #ffebee;
+  border-radius: 4px;
+  margin: 16px;
+}
+
+// Scrollbar styling
+.chat-history::-webkit-scrollbar {
+  width: 8px;
+}
+
+.chat-history::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.chat-history::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+.chat-history::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}