@huyooo/ai-chat-frontend-react 0.2.7 → 0.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.css +90 -58
  2. package/dist/index.css.map +1 -1
  3. package/dist/style.css +75 -36
  4. package/package.json +3 -3
  5. package/src/components/header/ChatHeader.css +1 -1
  6. package/src/components/input/ImagePreviewModal.css +1 -1
  7. package/src/components/input/at-views/AtViewStyles.css +16 -16
  8. package/src/components/message/parts/ToolCallPart.css +6 -4
  9. package/src/components/message/parts/ToolResultPart.css +1 -1
  10. package/src/components/message/tool-results/tool-results.css +3 -1
  11. package/src/styles.css +75 -36
package/dist/style.css CHANGED
@@ -15,31 +15,39 @@
15
15
  color-scheme: light;
16
16
 
17
17
  /* ai-chat 专用变量（保持兼容） */
18
- --chat-bg: #f5f5f5;
19
- --chat-header-bg: #ffffff;
20
- --chat-input-bg: #f3f4f6;
21
- --chat-dropdown-bg: #ffffff;
22
- --chat-muted: #e5e7eb;
23
- --chat-muted-hover: #d1d5db;
24
- --chat-border: #e5e7eb;
25
- --chat-text: #374151;
26
- --chat-text-muted: #6b7280;
27
- --chat-primary: #2563eb;
28
- --chat-primary-hover: #1d4ed8;
29
- --chat-destructive: #ef4444;
30
- --chat-destructive-hover: #dc2626;
31
- --chat-success: #22c55e;
32
- --chat-code-bg: #f3f4f6;
33
- --chat-code-text: #374151;
34
- --chat-scrollbar: rgba(0, 0, 0, 0.2);
35
- --chat-scrollbar-hover: rgba(0, 0, 0, 0.3);
18
+ /* Cursor 官网（Light）白色主题：暖白底 + 橙色强调 */
19
+ --chat-bg: #f7f7f4;
20
+ /* header 与主背景同步，用底部分割线表达层级 */
21
+ --chat-header-bg: var(--chat-bg);
22
+ --chat-input-bg: #f0efeb;
23
+ --chat-dropdown-bg: #f2f1ed;
24
+ --chat-muted: #ebeae5;
25
+ --chat-muted-hover: #e6e5e0;
26
+ --chat-border: #26251e1a;
27
+ --chat-text: #26251eeb;
28
+ --chat-text-muted: #26251e99;
29
+ /* 主色：light/dark 保持一致（蓝） */
30
+ --chat-primary: #54a9ff;
31
+ /* hover：比主色更深一档，保持可感知的交互反馈 */
32
+ --chat-primary-hover: #2f90ff;
33
+ --chat-destructive: #cf2d56;
34
+ --chat-destructive-hover: #b3003f;
35
+ --chat-success: #1f8a65;
36
+ --chat-code-bg: #f2f1ed;
37
+ --chat-code-text: #26251eeb;
38
+ --chat-scrollbar: rgba(38, 37, 30, 0.2);
39
+ --chat-scrollbar-hover: rgba(38, 37, 30, 0.3);
40
+ /* 悬浮圆形按钮（如 scroll-to-bottom）在浅色下更像 macOS：白底+阴影 */
41
+ --chat-fab-bg: #ffffff;
42
+ --chat-fab-bg-hover: var(--chat-input-bg);
43
+ --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
36
44
  }
37
45
 
38
46
  /* 默认跟随系统暗色 */
39
47
  @media (prefers-color-scheme: dark) {
40
48
  :root {
41
49
  color-scheme: dark;
42
- /* 旧版暗色（恢复以前的好看风格） */
50
+ /* 旧版暗色（深灰底：你更喜欢的观感） */
43
51
  --chat-bg: #1e1e1e;
44
52
  --chat-header-bg: #1e1e1e;
45
53
  --chat-input-bg: #2d2d2d;
@@ -49,26 +57,53 @@
49
57
  --chat-border: #333;
50
58
  --chat-text: #ccc;
51
59
  --chat-text-muted: #888;
52
- --chat-primary: #2563eb;
53
- --chat-primary-hover: #1d4ed8;
54
- --chat-destructive: #ef4444;
55
- --chat-destructive-hover: #dc2626;
56
- --chat-success: #22c55e;
60
+ /* 主色：light/dark 保持一致（蓝） */
61
+ --chat-primary: #54a9ff;
62
+ --chat-primary-hover: #2f90ff;
63
+ --chat-destructive: #cf2d56;
64
+ --chat-destructive-hover: #e33b67;
65
+ --chat-success: #1f8a65;
57
66
  --chat-code-bg: #1f2937;
58
67
  --chat-code-text: #e5e7eb;
59
68
  --chat-scrollbar: rgba(255, 255, 255, 0.2);
60
69
  --chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
70
+ /* 暗色下保持融入背景 */
71
+ --chat-fab-bg: var(--chat-muted);
72
+ --chat-fab-bg-hover: var(--chat-muted-hover);
73
+ --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
61
74
  }
62
75
  }
63
76
 
64
77
  /* 显式浅色/暗色覆盖系统 */
65
78
  :root[data-theme="light"] {
66
79
  color-scheme: light;
80
+ /* 显式 light 必须覆盖 prefers-color-scheme: dark 的变量 */
81
+ --chat-bg: #f7f7f4;
82
+ --chat-header-bg: var(--chat-bg);
83
+ --chat-input-bg: #f0efeb;
84
+ --chat-dropdown-bg: #f2f1ed;
85
+ --chat-muted: #ebeae5;
86
+ --chat-muted-hover: #e6e5e0;
87
+ --chat-border: #26251e1a;
88
+ --chat-text: #26251eeb;
89
+ --chat-text-muted: #26251e99;
90
+ --chat-primary: #54a9ff;
91
+ --chat-primary-hover: #2f90ff;
92
+ --chat-destructive: #cf2d56;
93
+ --chat-destructive-hover: #b3003f;
94
+ --chat-success: #1f8a65;
95
+ --chat-code-bg: #f2f1ed;
96
+ --chat-code-text: #26251eeb;
97
+ --chat-scrollbar: rgba(38, 37, 30, 0.2);
98
+ --chat-scrollbar-hover: rgba(38, 37, 30, 0.3);
99
+ --chat-fab-bg: #ffffff;
100
+ --chat-fab-bg-hover: var(--chat-input-bg);
101
+ --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
67
102
  }
68
103
 
69
104
  :root[data-theme="dark"] {
70
105
  color-scheme: dark;
71
- /* 旧版暗色（恢复以前的好看风格） */
106
+ /* 旧版暗色（深灰底：你更喜欢的观感） */
72
107
  --chat-bg: #1e1e1e;
73
108
  --chat-header-bg: #1e1e1e;
74
109
  --chat-input-bg: #2d2d2d;
@@ -78,15 +113,19 @@
78
113
  --chat-border: #333;
79
114
  --chat-text: #ccc;
80
115
  --chat-text-muted: #888;
81
- --chat-primary: #2563eb;
82
- --chat-primary-hover: #1d4ed8;
83
- --chat-destructive: #ef4444;
84
- --chat-destructive-hover: #dc2626;
85
- --chat-success: #22c55e;
116
+ /* 主色：light/dark 保持一致（蓝） */
117
+ --chat-primary: #54a9ff;
118
+ --chat-primary-hover: #2f90ff;
119
+ --chat-destructive: #cf2d56;
120
+ --chat-destructive-hover: #e33b67;
121
+ --chat-success: #1f8a65;
86
122
  --chat-code-bg: #1f2937;
87
123
  --chat-code-text: #e5e7eb;
88
124
  --chat-scrollbar: rgba(255, 255, 255, 0.2);
89
125
  --chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
126
+ --chat-fab-bg: var(--chat-muted);
127
+ --chat-fab-bg-hover: var(--chat-muted-hover);
128
+ --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
90
129
  }
91
130
 
92
131
  /* 统一滚动条样式 - 任何需要自定义滚动条的元素添加此类 */
@@ -144,18 +183,18 @@
144
183
  width: 32px;
145
184
  height: 32px;
146
185
  border-radius: 50%;
147
- background: var(--chat-bubble-bg, #2d2d2d);
148
- border: 1px solid var(--chat-border, #3d3d3d);
149
- color: var(--chat-text-secondary, #888);
186
+ background: var(--chat-fab-bg, var(--chat-muted));
187
+ border: 1px solid var(--chat-border);
188
+ color: var(--chat-text-muted);
150
189
  cursor: pointer;
151
190
  transition: all 0.2s ease;
152
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
191
+ box-shadow: var(--chat-fab-shadow, 0 2px 8px rgba(0, 0, 0, 0.3));
153
192
  z-index: 10;
154
193
  pointer-events: auto;
155
194
  }
156
195
 
157
196
  .scroll-to-bottom-btn:hover {
158
- background: var(--chat-bubble-bg-hover, #3a3a3a);
159
- color: var(--chat-text, #e0e0e0);
197
+ background: var(--chat-fab-bg-hover, var(--chat-muted-hover));
198
+ color: var(--chat-text);
160
199
  transform: scale(1.1);
161
200
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@huyooo/ai-chat-frontend-react",
3
- "version": "0.2.7",
3
+ "version": "0.2.11",
4
4
  "description": "AI Chat Frontend - React components with adapter pattern",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -32,8 +32,8 @@
32
32
  "react-dom": ">=18.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@huyooo/ai-chat-bridge-electron": "^0.2.7",
36
- "@huyooo/ai-chat-shared": "^0.2.7",
35
+ "@huyooo/ai-chat-bridge-electron": "^0.2.11",
36
+ "@huyooo/ai-chat-shared": "^0.2.11",
37
37
  "@iconify/react": "^5.0.2"
38
38
  },
39
39
  "devDependencies": {
package/src/components/header/ChatHeader.css CHANGED
@@ -5,7 +5,7 @@
5
5
  .chat-header {
6
6
  display: flex;
7
7
  align-items: center;
8
- height: 40px;
8
+ height: 48px;
9
9
  padding: 0 12px;
10
10
  background: var(--chat-header-bg, #1e1e1e);
11
11
  border-bottom: 1px solid var(--chat-border, #333);
package/src/components/input/ImagePreviewModal.css CHANGED
@@ -73,7 +73,7 @@
73
73
  display: flex;
74
74
  align-items: center;
75
75
  justify-content: center;
76
- height: 40px;
76
+ height: 48px;
77
77
  padding: 0 12px;
78
78
  background: rgba(255, 255, 255, 0.1);
79
79
  border: none;
package/src/components/input/at-views/AtViewStyles.css CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  .at-view-section-title {
9
9
  font-size: 11px;
10
- color: #888;
10
+ color: var(--chat-text-muted, #888);
11
11
  padding: 6px 8px 4px;
12
12
  text-transform: uppercase;
13
13
  letter-spacing: 0.5px;
@@ -25,8 +25,8 @@
25
25
  height: 22px;
26
26
  border-radius: 4px;
27
27
  background: transparent;
28
- border: 1px solid rgba(255, 255, 255, 0.1);
29
- color: #999;
28
+ border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
29
+ color: var(--chat-text-muted, #999);
30
30
  cursor: pointer;
31
31
  display: flex;
32
32
  align-items: center;
@@ -34,15 +34,15 @@
34
34
  }
35
35
 
36
36
  .at-view-pathbtn:hover {
37
- background: rgba(255, 255, 255, 0.06);
38
- color: #ccc;
37
+ background: var(--chat-muted-hover, rgba(255, 255, 255, 0.06));
38
+ color: var(--chat-text, #ccc);
39
39
  }
40
40
 
41
41
  .at-view-pathtext {
42
42
  flex: 1;
43
43
  min-width: 0;
44
44
  font-size: 11px;
45
- color: #777;
45
+ color: var(--chat-text-muted, #777);
46
46
  white-space: nowrap;
47
47
  overflow: hidden;
48
48
  text-overflow: ellipsis;
@@ -64,12 +64,12 @@
64
64
  border: 1px solid transparent;
65
65
  background: transparent;
66
66
  cursor: pointer;
67
- color: #ccc;
67
+ color: var(--chat-text, #ccc);
68
68
  width: 100%;
69
69
  }
70
70
 
71
71
  .at-view-item:hover {
72
- background: rgba(255, 255, 255, 0.06);
72
+ background: var(--chat-muted-hover, rgba(255, 255, 255, 0.06));
73
73
  }
74
74
 
75
75
  .at-view-item.active {
@@ -78,13 +78,13 @@
78
78
  }
79
79
 
80
80
  .at-view-item-icon {
81
- color: #999;
81
+ color: var(--chat-text-muted, #999);
82
82
  flex-shrink: 0;
83
83
  }
84
84
 
85
85
  .at-view-item-name {
86
86
  font-size: 13px;
87
- color: #ddd;
87
+ color: var(--chat-text, #ddd);
88
88
  flex-shrink: 0;
89
89
  max-width: 160px;
90
90
  overflow: hidden;
@@ -94,7 +94,7 @@
94
94
 
95
95
  .at-view-item-path {
96
96
  font-size: 11px;
97
- color: #555;
97
+ color: var(--chat-text-muted, #555);
98
98
  min-width: 0;
99
99
  overflow: hidden;
100
100
  text-overflow: ellipsis;
@@ -104,7 +104,7 @@
104
104
 
105
105
  .at-view-empty {
106
106
  padding: 12px 10px;
107
- color: #666;
107
+ color: var(--chat-text-muted, #666);
108
108
  font-size: 12px;
109
109
  text-align: center;
110
110
  }
@@ -120,24 +120,24 @@
120
120
  }
121
121
 
122
122
  .at-placeholder-icon {
123
- color: #555;
123
+ color: var(--chat-text-muted, #555);
124
124
  margin-bottom: 12px;
125
125
  }
126
126
 
127
127
  .at-placeholder-title {
128
128
  font-size: 14px;
129
129
  font-weight: 500;
130
- color: #888;
130
+ color: var(--chat-text-muted, #888);
131
131
  margin-bottom: 8px;
132
132
  }
133
133
 
134
134
  .at-placeholder-desc {
135
135
  font-size: 13px;
136
- color: #666;
136
+ color: var(--chat-text-muted, #666);
137
137
  margin-bottom: 4px;
138
138
  }
139
139
 
140
140
  .at-placeholder-hint {
141
141
  font-size: 11px;
142
- color: #555;
142
+ color: var(--chat-text-muted, #555);
143
143
  }
package/src/components/message/parts/ToolCallPart.css CHANGED
@@ -31,12 +31,13 @@
31
31
  .command-code {
32
32
  display: block;
33
33
  padding: 10px;
34
- background: rgba(0, 0, 0, 0.3);
34
+ /* 浅色主题下 rgba(0,0,0,0.3) 会显得“脏黑”，这里统一走 code token */
35
+ background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
35
36
  border: 1px solid var(--chat-border, #333);
36
37
  border-radius: 6px;
37
38
  font-family: "Monaco", "Menlo", "Courier New", monospace;
38
39
  font-size: 13px;
39
- color: var(--chat-text, #ccc);
40
+ color: var(--chat-code-text, var(--chat-text, #ccc));
40
41
  white-space: pre-wrap;
41
42
  word-break: break-all;
42
43
  overflow-x: auto;
@@ -60,12 +61,13 @@
60
61
  .result-content {
61
62
  display: block;
62
63
  padding: 10px;
63
- background: rgba(0, 0, 0, 0.3);
64
+ /* 浅色主题下 rgba(0,0,0,0.3) 会显得“脏黑”，这里统一走 code token */
65
+ background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
64
66
  border: 1px solid var(--chat-border, #333);
65
67
  border-radius: 6px;
66
68
  font-family: "Monaco", "Menlo", "Courier New", monospace;
67
69
  font-size: 13px;
68
- color: var(--chat-text, #ccc);
70
+ color: var(--chat-code-text, var(--chat-text, #ccc));
69
71
  white-space: pre-wrap;
70
72
  word-break: break-all;
71
73
  overflow-x: auto;
package/src/components/message/parts/ToolResultPart.css CHANGED
@@ -62,7 +62,7 @@
62
62
  margin: 0;
63
63
  font-size: 12px;
64
64
  font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
65
- color: var(--chat-text-muted, #999);
65
+ color: var(--chat-code-text, var(--chat-text-muted, #999));
66
66
  white-space: pre-wrap;
67
67
  word-break: break-word;
68
68
  }
package/src/components/message/tool-results/tool-results.css CHANGED
@@ -14,11 +14,13 @@
14
14
  padding: 8px;
15
15
  font-size: 13px;
16
16
  line-height: 1.5;
17
- color: var(--chat-text-muted, #999);
17
+ color: var(--chat-code-text, var(--chat-text, #999));
18
18
  font-family: "SF Mono", Monaco, monospace;
19
19
  white-space: pre-wrap;
20
20
  word-break: break-word;
21
21
  overflow-x: auto;
22
+ background: var(--chat-code-bg);
23
+ border-top: 1px solid var(--chat-border);
22
24
  }
23
25
 
24
26
  /* 天气卡片 */
package/src/styles.css CHANGED
@@ -15,31 +15,39 @@
15
15
  color-scheme: light;
16
16
 
17
17
  /* ai-chat 专用变量（保持兼容） */
18
- --chat-bg: #f5f5f5;
19
- --chat-header-bg: #ffffff;
20
- --chat-input-bg: #f3f4f6;
21
- --chat-dropdown-bg: #ffffff;
22
- --chat-muted: #e5e7eb;
23
- --chat-muted-hover: #d1d5db;
24
- --chat-border: #e5e7eb;
25
- --chat-text: #374151;
26
- --chat-text-muted: #6b7280;
27
- --chat-primary: #2563eb;
28
- --chat-primary-hover: #1d4ed8;
29
- --chat-destructive: #ef4444;
30
- --chat-destructive-hover: #dc2626;
31
- --chat-success: #22c55e;
32
- --chat-code-bg: #f3f4f6;
33
- --chat-code-text: #374151;
34
- --chat-scrollbar: rgba(0, 0, 0, 0.2);
35
- --chat-scrollbar-hover: rgba(0, 0, 0, 0.3);
18
+ /* Cursor 官网（Light）白色主题：暖白底 + 橙色强调 */
19
+ --chat-bg: #f7f7f4;
20
+ /* header 与主背景同步，用底部分割线表达层级 */
21
+ --chat-header-bg: var(--chat-bg);
22
+ --chat-input-bg: #f0efeb;
23
+ --chat-dropdown-bg: #f2f1ed;
24
+ --chat-muted: #ebeae5;
25
+ --chat-muted-hover: #e6e5e0;
26
+ --chat-border: #26251e1a;
27
+ --chat-text: #26251eeb;
28
+ --chat-text-muted: #26251e99;
29
+ /* 主色：light/dark 保持一致（蓝） */
30
+ --chat-primary: #54a9ff;
31
+ /* hover：比主色更深一档，保持可感知的交互反馈 */
32
+ --chat-primary-hover: #2f90ff;
33
+ --chat-destructive: #cf2d56;
34
+ --chat-destructive-hover: #b3003f;
35
+ --chat-success: #1f8a65;
36
+ --chat-code-bg: #f2f1ed;
37
+ --chat-code-text: #26251eeb;
38
+ --chat-scrollbar: rgba(38, 37, 30, 0.2);
39
+ --chat-scrollbar-hover: rgba(38, 37, 30, 0.3);
40
+ /* 悬浮圆形按钮（如 scroll-to-bottom）在浅色下更像 macOS：白底+阴影 */
41
+ --chat-fab-bg: #ffffff;
42
+ --chat-fab-bg-hover: var(--chat-input-bg);
43
+ --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
36
44
  }
37
45
 
38
46
  /* 默认跟随系统暗色 */
39
47
  @media (prefers-color-scheme: dark) {
40
48
  :root {
41
49
  color-scheme: dark;
42
- /* 旧版暗色（恢复以前的好看风格） */
50
+ /* 旧版暗色（深灰底：你更喜欢的观感） */
43
51
  --chat-bg: #1e1e1e;
44
52
  --chat-header-bg: #1e1e1e;
45
53
  --chat-input-bg: #2d2d2d;
@@ -49,26 +57,53 @@
49
57
  --chat-border: #333;
50
58
  --chat-text: #ccc;
51
59
  --chat-text-muted: #888;
52
- --chat-primary: #2563eb;
53
- --chat-primary-hover: #1d4ed8;
54
- --chat-destructive: #ef4444;
55
- --chat-destructive-hover: #dc2626;
56
- --chat-success: #22c55e;
60
+ /* 主色：light/dark 保持一致（蓝） */
61
+ --chat-primary: #54a9ff;
62
+ --chat-primary-hover: #2f90ff;
63
+ --chat-destructive: #cf2d56;
64
+ --chat-destructive-hover: #e33b67;
65
+ --chat-success: #1f8a65;
57
66
  --chat-code-bg: #1f2937;
58
67
  --chat-code-text: #e5e7eb;
59
68
  --chat-scrollbar: rgba(255, 255, 255, 0.2);
60
69
  --chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
70
+ /* 暗色下保持融入背景 */
71
+ --chat-fab-bg: var(--chat-muted);
72
+ --chat-fab-bg-hover: var(--chat-muted-hover);
73
+ --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
61
74
  }
62
75
  }
63
76
 
64
77
  /* 显式浅色/暗色覆盖系统 */
65
78
  :root[data-theme="light"] {
66
79
  color-scheme: light;
80
+ /* 显式 light 必须覆盖 prefers-color-scheme: dark 的变量 */
81
+ --chat-bg: #f7f7f4;
82
+ --chat-header-bg: var(--chat-bg);
83
+ --chat-input-bg: #f0efeb;
84
+ --chat-dropdown-bg: #f2f1ed;
85
+ --chat-muted: #ebeae5;
86
+ --chat-muted-hover: #e6e5e0;
87
+ --chat-border: #26251e1a;
88
+ --chat-text: #26251eeb;
89
+ --chat-text-muted: #26251e99;
90
+ --chat-primary: #54a9ff;
91
+ --chat-primary-hover: #2f90ff;
92
+ --chat-destructive: #cf2d56;
93
+ --chat-destructive-hover: #b3003f;
94
+ --chat-success: #1f8a65;
95
+ --chat-code-bg: #f2f1ed;
96
+ --chat-code-text: #26251eeb;
97
+ --chat-scrollbar: rgba(38, 37, 30, 0.2);
98
+ --chat-scrollbar-hover: rgba(38, 37, 30, 0.3);
99
+ --chat-fab-bg: #ffffff;
100
+ --chat-fab-bg-hover: var(--chat-input-bg);
101
+ --chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
67
102
  }
68
103
 
69
104
  :root[data-theme="dark"] {
70
105
  color-scheme: dark;
71
- /* 旧版暗色（恢复以前的好看风格） */
106
+ /* 旧版暗色（深灰底：你更喜欢的观感） */
72
107
  --chat-bg: #1e1e1e;
73
108
  --chat-header-bg: #1e1e1e;
74
109
  --chat-input-bg: #2d2d2d;
@@ -78,15 +113,19 @@
78
113
  --chat-border: #333;
79
114
  --chat-text: #ccc;
80
115
  --chat-text-muted: #888;
81
- --chat-primary: #2563eb;
82
- --chat-primary-hover: #1d4ed8;
83
- --chat-destructive: #ef4444;
84
- --chat-destructive-hover: #dc2626;
85
- --chat-success: #22c55e;
116
+ /* 主色：light/dark 保持一致（蓝） */
117
+ --chat-primary: #54a9ff;
118
+ --chat-primary-hover: #2f90ff;
119
+ --chat-destructive: #cf2d56;
120
+ --chat-destructive-hover: #e33b67;
121
+ --chat-success: #1f8a65;
86
122
  --chat-code-bg: #1f2937;
87
123
  --chat-code-text: #e5e7eb;
88
124
  --chat-scrollbar: rgba(255, 255, 255, 0.2);
89
125
  --chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
126
+ --chat-fab-bg: var(--chat-muted);
127
+ --chat-fab-bg-hover: var(--chat-muted-hover);
128
+ --chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
90
129
  }
91
130
 
92
131
  /* 统一滚动条样式 - 任何需要自定义滚动条的元素添加此类 */
@@ -144,18 +183,18 @@
144
183
  width: 32px;
145
184
  height: 32px;
146
185
  border-radius: 50%;
147
- background: var(--chat-bubble-bg, #2d2d2d);
148
- border: 1px solid var(--chat-border, #3d3d3d);
149
- color: var(--chat-text-secondary, #888);
186
+ background: var(--chat-fab-bg, var(--chat-muted));
187
+ border: 1px solid var(--chat-border);
188
+ color: var(--chat-text-muted);
150
189
  cursor: pointer;
151
190
  transition: all 0.2s ease;
152
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
191
+ box-shadow: var(--chat-fab-shadow, 0 2px 8px rgba(0, 0, 0, 0.3));
153
192
  z-index: 10;
154
193
  pointer-events: auto;
155
194
  }
156
195
 
157
196
  .scroll-to-bottom-btn:hover {
158
- background: var(--chat-bubble-bg-hover, #3a3a3a);
159
- color: var(--chat-text, #e0e0e0);
197
+ background: var(--chat-fab-bg-hover, var(--chat-muted-hover));
198
+ color: var(--chat-text);
160
199
  transform: scale(1.1);
161
200
  }