Create custom.css

public/custom.css

@@ -0,0 +1,54 @@
+/* Avatar tùy chỉnh cho user và assistant */
+.message-avatar img[alt="User"] {
+    content: url('/public/user-avatar.png') !important;
+}
+
+.message-avatar img[alt="Assistant"] {
+    content: url('/public/agent-avatar.png') !important;
+}
+
+/* Hoặc sử dụng class selector */
+.user-message .message-avatar img {
+    content: url('/public/user-avatar.png') !important;
+}
+
+.assistant-message .message-avatar img {
+    content: url('/public/agent-avatar.png') !important;
+}
+
+/* Style avatar size */
+.message-avatar img {
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 50% !important;
+}
+
+/* Thay thế avatar mặc định bằng background */
+.message-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+/* User avatar */
+.user-message .message-avatar::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-image: url('/public/user-avatar.png');
+    background-size: cover;
+    background-position: center;
+}
+
+/* Assistant avatar */
+.assistant-message .message-avatar::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-image: url('/public/agent-avatar.png');
+    background-size: cover;
+    background-position: center;
+}