diff --git a/dashboard/src/style.css b/dashboard/src/style.css index f0df474..da40f43 100644 --- a/dashboard/src/style.css +++ b/dashboard/src/style.css @@ -336,14 +336,14 @@ body { .message-bubble.user .message-container { align-items: flex-end; width: fit-content; - max-width: 70%; + max-width: 80%; } .message-bubble.assistant .message-container { align-items: flex-start; flex: 1 1 auto; - width: 90%; - max-width: 90%; + width: 80%; + max-width: 80%; min-width: 0; } @@ -354,7 +354,7 @@ body { .avatar { width: 32px; height: 32px; - border-radius: 8px; + border-radius: 50%; display: flex; align-items: center; justify-content: center; diff --git a/dashboard/src/views/ConversationView.vue b/dashboard/src/views/ConversationView.vue index 7978734..4e5f41f 100644 --- a/dashboard/src/views/ConversationView.vue +++ b/dashboard/src/views/ConversationView.vue @@ -80,7 +80,7 @@ />
-
Luxx
+
Luxx
{ .chat-message { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; } .chat-message.user { flex-direction: row-reverse; } .chat-message.streaming { opacity: 0.9; } -.chat-message.streaming .message-avatar { animation: pulse 1.5s ease-in-out infinite; } +.chat-message.streaming .avatar { animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } -.message-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .message-content { max-width: 80%; width: 80%; } .chat-message.user .message-content { max-width: 80%; width: auto; } .message-text { padding: 0.65rem 0.9rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; background: var(--bg-secondary); color: var(--text-primary); word-break: break-word; }