+
{(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;