diff --git a/src/components/message-item.tsx b/src/components/message-item.tsx index cede2145..c5440d7c 100644 --- a/src/components/message-item.tsx +++ b/src/components/message-item.tsx @@ -88,10 +88,11 @@ export default function MessageItem(props: MessageItemProps) {
- You + You + -
+
{(value) => Agent: {value()}} {(value) => Model: {value()}}
diff --git a/src/styles/components.css b/src/styles/components.css index 2a19f7d9..bc94084c 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -78,10 +78,34 @@ /* Ensure Tailwind base reset on [type="button"] doesn't remove accent styles */ button.button-primary { + @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md font-medium transition-colors; + color: #fff; background-color: var(--accent-primary); - color: var(--text-inverted); + border: 1px solid var(--accent-primary); } +button.button-primary:hover:not(:disabled) { + background-color: var(--accent-hover); + border-color: var(--accent-hover); +} + +button.button-primary:focus-visible { + outline: none; + box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent-primary); +} + +button.button-primary:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Message item base styles */ + +.message-item-base { + @apply flex flex-col gap-2 p-3 w-full; +} + + [data-theme="dark"] button.button-primary { background-color: #3f3f46; color: #f5f6f8; @@ -136,7 +160,7 @@ button.button-primary { /* Message item base styles */ .message-item-base { - @apply flex flex-col gap-2 p-3 rounded-lg w-full; + @apply flex flex-col gap-2 p-3 w-full; } .assistant-message { @@ -636,11 +660,12 @@ button.button-primary { .message-stream { - @apply flex-1 min-h-0 overflow-y-auto p-4 flex flex-col gap-4; + @apply flex-1 min-h-0 overflow-y-auto flex flex-col gap-1; background-color: var(--surface-base); color: inherit; } + .message-scroll-button-wrapper { position: absolute; right: 1rem; @@ -680,15 +705,16 @@ button.button-primary { /* Tool call message wrapper */ .tool-call-message { - @apply flex flex-col gap-2 p-3 rounded-lg w-full; + @apply flex flex-col gap-2 p-3 w-full; background-color: var(--message-tool-bg); border-left: 4px solid var(--message-tool-border); color: inherit; } + .tool-call-header-label { @apply flex items-center justify-between gap-2 font-semibold text-sm; - color: var(--text-muted); + color: var(--message-tool-border); margin-bottom: 1px; } @@ -699,7 +725,7 @@ button.button-primary { .tool-call-header-button { background-color: transparent; border: 1px solid var(--border-base); - color: var(--text-muted); + color: var(--message-tool-border); padding: 0.15rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; diff --git a/src/styles/tokens.css b/src/styles/tokens.css index 5dd8465f..e9b14ded 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -27,10 +27,11 @@ --status-warning: #ff9800; /* Message-specific tokens */ - --message-user-bg: #f0f7ff; + --message-user-bg: var(--surface-secondary); --message-user-border: #2196f3; - --message-assistant-bg: #faf5ff; - --message-assistant-border: #9c27b0; + --message-assistant-bg: var(--message-tool-bg); + --message-assistant-border: #f59e0b; + --message-tool-bg: #f8f9fa; --message-tool-border: #6c757d; @@ -73,7 +74,7 @@ --border-muted: #3a3a3a; /* Text tokens */ - --text-primary: #e0e0e0; + --text-primary: #cfd4dc; --text-secondary: #999999; --text-muted: #999999; --text-inverted: #1a1a1a; @@ -88,10 +89,11 @@ --status-warning: #ff9800; /* Message-specific tokens */ - --message-user-bg: #1a2332; + --message-user-bg: #202734; --message-user-border: #42a5f5; - --message-assistant-bg: #251a2e; - --message-assistant-border: #ba68c8; + --message-assistant-bg: var(--message-tool-bg); + --message-assistant-border: #d97706; + --message-tool-bg: #212529; --message-tool-border: #adb5bd; @@ -134,7 +136,7 @@ --border-muted: #3a3a3a; /* Text tokens */ - --text-primary: #e0e0e0; + --text-primary: #cfd4dc; --text-secondary: #999999; --text-muted: #999999; --text-inverted: #1a1a1a; @@ -149,10 +151,11 @@ --status-warning: #ff9800; /* Message-specific tokens */ - --message-user-bg: #1a2332; - --message-user-border: #42a5f5; - --message-assistant-bg: #251a2e; - --message-assistant-border: #ba68c8; + --message-user-bg: #202734; + --message-user-border: #2196f3; + --message-assistant-bg: var(--message-tool-bg); + --message-assistant-border: #d97706; + --message-tool-bg: #212529; --message-tool-border: #adb5bd;