@huyooo/ai-chat-frontend-react 0.2.6 → 0.2.10
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.
- package/dist/index.css +185 -24
- package/dist/index.css.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/style.css +115 -12
- package/package.json +3 -3
- package/src/components/header/ChatHeader.css +1 -1
- package/src/components/input/ImagePreviewModal.css +1 -1
- package/src/components/input/at-views/AtViewStyles.css +16 -16
- package/src/components/message/parts/ToolCallPart.css +6 -4
- package/src/components/message/parts/ToolResultPart.css +1 -1
- package/src/components/message/tool-results/tool-results.css +3 -1
- package/src/index.ts +3 -0
- package/src/styles.css +115 -12
package/dist/index.css
CHANGED
|
@@ -1,10 +1,169 @@
|
|
|
1
1
|
@import "@huyooo/ai-chat-shared/styles";
|
|
2
2
|
|
|
3
|
+
/* src/styles.css */
|
|
4
|
+
:root {
|
|
5
|
+
color-scheme: light;
|
|
6
|
+
--chat-bg: #f7f7f4;
|
|
7
|
+
--chat-header-bg: var(--chat-bg);
|
|
8
|
+
--chat-input-bg: #f0efeb;
|
|
9
|
+
--chat-dropdown-bg: #f2f1ed;
|
|
10
|
+
--chat-muted: #ebeae5;
|
|
11
|
+
--chat-muted-hover: #e6e5e0;
|
|
12
|
+
--chat-border: #26251e1a;
|
|
13
|
+
--chat-text: #26251eeb;
|
|
14
|
+
--chat-text-muted: #26251e99;
|
|
15
|
+
--chat-primary: #54a9ff;
|
|
16
|
+
--chat-primary-hover: #2f90ff;
|
|
17
|
+
--chat-destructive: #cf2d56;
|
|
18
|
+
--chat-destructive-hover: #b3003f;
|
|
19
|
+
--chat-success: #1f8a65;
|
|
20
|
+
--chat-code-bg: #f2f1ed;
|
|
21
|
+
--chat-code-text: #26251eeb;
|
|
22
|
+
--chat-scrollbar: rgba(38, 37, 30, 0.2);
|
|
23
|
+
--chat-scrollbar-hover: rgba(38, 37, 30, 0.3);
|
|
24
|
+
--chat-fab-bg: #ffffff;
|
|
25
|
+
--chat-fab-bg-hover: var(--chat-input-bg);
|
|
26
|
+
--chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
|
|
27
|
+
}
|
|
28
|
+
@media (prefers-color-scheme: dark) {
|
|
29
|
+
:root {
|
|
30
|
+
color-scheme: dark;
|
|
31
|
+
--chat-bg: #1e1e1e;
|
|
32
|
+
--chat-header-bg: #1e1e1e;
|
|
33
|
+
--chat-input-bg: #2d2d2d;
|
|
34
|
+
--chat-dropdown-bg: #252526;
|
|
35
|
+
--chat-muted: #2d2d2d;
|
|
36
|
+
--chat-muted-hover: #3c3c3c;
|
|
37
|
+
--chat-border: #333;
|
|
38
|
+
--chat-text: #ccc;
|
|
39
|
+
--chat-text-muted: #888;
|
|
40
|
+
--chat-primary: #54a9ff;
|
|
41
|
+
--chat-primary-hover: #2f90ff;
|
|
42
|
+
--chat-destructive: #cf2d56;
|
|
43
|
+
--chat-destructive-hover: #e33b67;
|
|
44
|
+
--chat-success: #1f8a65;
|
|
45
|
+
--chat-code-bg: #1f2937;
|
|
46
|
+
--chat-code-text: #e5e7eb;
|
|
47
|
+
--chat-scrollbar: rgba(255, 255, 255, 0.2);
|
|
48
|
+
--chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
|
|
49
|
+
--chat-fab-bg: var(--chat-muted);
|
|
50
|
+
--chat-fab-bg-hover: var(--chat-muted-hover);
|
|
51
|
+
--chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
:root[data-theme=light] {
|
|
55
|
+
color-scheme: light;
|
|
56
|
+
--chat-bg: #f7f7f4;
|
|
57
|
+
--chat-header-bg: var(--chat-bg);
|
|
58
|
+
--chat-input-bg: #f0efeb;
|
|
59
|
+
--chat-dropdown-bg: #f2f1ed;
|
|
60
|
+
--chat-muted: #ebeae5;
|
|
61
|
+
--chat-muted-hover: #e6e5e0;
|
|
62
|
+
--chat-border: #26251e1a;
|
|
63
|
+
--chat-text: #26251eeb;
|
|
64
|
+
--chat-text-muted: #26251e99;
|
|
65
|
+
--chat-primary: #54a9ff;
|
|
66
|
+
--chat-primary-hover: #2f90ff;
|
|
67
|
+
--chat-destructive: #cf2d56;
|
|
68
|
+
--chat-destructive-hover: #b3003f;
|
|
69
|
+
--chat-success: #1f8a65;
|
|
70
|
+
--chat-code-bg: #f2f1ed;
|
|
71
|
+
--chat-code-text: #26251eeb;
|
|
72
|
+
--chat-scrollbar: rgba(38, 37, 30, 0.2);
|
|
73
|
+
--chat-scrollbar-hover: rgba(38, 37, 30, 0.3);
|
|
74
|
+
--chat-fab-bg: #ffffff;
|
|
75
|
+
--chat-fab-bg-hover: var(--chat-input-bg);
|
|
76
|
+
--chat-fab-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
|
|
77
|
+
}
|
|
78
|
+
:root[data-theme=dark] {
|
|
79
|
+
color-scheme: dark;
|
|
80
|
+
--chat-bg: #1e1e1e;
|
|
81
|
+
--chat-header-bg: #1e1e1e;
|
|
82
|
+
--chat-input-bg: #2d2d2d;
|
|
83
|
+
--chat-dropdown-bg: #252526;
|
|
84
|
+
--chat-muted: #2d2d2d;
|
|
85
|
+
--chat-muted-hover: #3c3c3c;
|
|
86
|
+
--chat-border: #333;
|
|
87
|
+
--chat-text: #ccc;
|
|
88
|
+
--chat-text-muted: #888;
|
|
89
|
+
--chat-primary: #54a9ff;
|
|
90
|
+
--chat-primary-hover: #2f90ff;
|
|
91
|
+
--chat-destructive: #cf2d56;
|
|
92
|
+
--chat-destructive-hover: #e33b67;
|
|
93
|
+
--chat-success: #1f8a65;
|
|
94
|
+
--chat-code-bg: #1f2937;
|
|
95
|
+
--chat-code-text: #e5e7eb;
|
|
96
|
+
--chat-scrollbar: rgba(255, 255, 255, 0.2);
|
|
97
|
+
--chat-scrollbar-hover: rgba(255, 255, 255, 0.3);
|
|
98
|
+
--chat-fab-bg: var(--chat-muted);
|
|
99
|
+
--chat-fab-bg-hover: var(--chat-muted-hover);
|
|
100
|
+
--chat-fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
101
|
+
}
|
|
102
|
+
.chat-scrollbar::-webkit-scrollbar {
|
|
103
|
+
width: 6px;
|
|
104
|
+
}
|
|
105
|
+
.chat-scrollbar::-webkit-scrollbar-track {
|
|
106
|
+
background: transparent;
|
|
107
|
+
}
|
|
108
|
+
.chat-scrollbar::-webkit-scrollbar-thumb {
|
|
109
|
+
background: var(--chat-scrollbar, rgba(255, 255, 255, 0.2));
|
|
110
|
+
border-radius: 3px;
|
|
111
|
+
}
|
|
112
|
+
.chat-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
113
|
+
background: var(--chat-scrollbar-hover, rgba(255, 255, 255, 0.3));
|
|
114
|
+
}
|
|
115
|
+
.chat-panel {
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: column;
|
|
118
|
+
width: 100%;
|
|
119
|
+
height: 100%;
|
|
120
|
+
background: var(--chat-bg, #1e1e1e);
|
|
121
|
+
overflow: hidden;
|
|
122
|
+
}
|
|
123
|
+
.messages-wrapper {
|
|
124
|
+
flex: 1;
|
|
125
|
+
min-height: 0;
|
|
126
|
+
position: relative;
|
|
127
|
+
display: flex;
|
|
128
|
+
flex-direction: column;
|
|
129
|
+
}
|
|
130
|
+
.messages-container {
|
|
131
|
+
flex: 1;
|
|
132
|
+
min-height: 0;
|
|
133
|
+
overflow-y: auto;
|
|
134
|
+
padding: 12px;
|
|
135
|
+
scroll-behavior: smooth;
|
|
136
|
+
}
|
|
137
|
+
.scroll-to-bottom-btn {
|
|
138
|
+
position: absolute;
|
|
139
|
+
bottom: 16px;
|
|
140
|
+
right: 16px;
|
|
141
|
+
display: flex;
|
|
142
|
+
align-items: center;
|
|
143
|
+
justify-content: center;
|
|
144
|
+
width: 32px;
|
|
145
|
+
height: 32px;
|
|
146
|
+
border-radius: 50%;
|
|
147
|
+
background: var(--chat-fab-bg, var(--chat-muted));
|
|
148
|
+
border: 1px solid var(--chat-border);
|
|
149
|
+
color: var(--chat-text-muted);
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
transition: all 0.2s ease;
|
|
152
|
+
box-shadow: var(--chat-fab-shadow, 0 2px 8px rgba(0, 0, 0, 0.3));
|
|
153
|
+
z-index: 10;
|
|
154
|
+
pointer-events: auto;
|
|
155
|
+
}
|
|
156
|
+
.scroll-to-bottom-btn:hover {
|
|
157
|
+
background: var(--chat-fab-bg-hover, var(--chat-muted-hover));
|
|
158
|
+
color: var(--chat-text);
|
|
159
|
+
transform: scale(1.1);
|
|
160
|
+
}
|
|
161
|
+
|
|
3
162
|
/* src/components/header/ChatHeader.css */
|
|
4
163
|
.chat-header {
|
|
5
164
|
display: flex;
|
|
6
165
|
align-items: center;
|
|
7
|
-
height:
|
|
166
|
+
height: 48px;
|
|
8
167
|
padding: 0 12px;
|
|
9
168
|
background: var(--chat-header-bg, #1e1e1e);
|
|
10
169
|
border-bottom: 1px solid var(--chat-border, #333);
|
|
@@ -902,7 +1061,7 @@
|
|
|
902
1061
|
.command-code {
|
|
903
1062
|
display: block;
|
|
904
1063
|
padding: 10px;
|
|
905
|
-
background: rgba(0, 0, 0, 0.3);
|
|
1064
|
+
background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
|
|
906
1065
|
border: 1px solid var(--chat-border, #333);
|
|
907
1066
|
border-radius: 6px;
|
|
908
1067
|
font-family:
|
|
@@ -911,7 +1070,7 @@
|
|
|
911
1070
|
"Courier New",
|
|
912
1071
|
monospace;
|
|
913
1072
|
font-size: 13px;
|
|
914
|
-
color: var(--chat-text, #ccc);
|
|
1073
|
+
color: var(--chat-code-text, var(--chat-text, #ccc));
|
|
915
1074
|
white-space: pre-wrap;
|
|
916
1075
|
word-break: break-all;
|
|
917
1076
|
overflow-x: auto;
|
|
@@ -931,7 +1090,7 @@
|
|
|
931
1090
|
.result-content {
|
|
932
1091
|
display: block;
|
|
933
1092
|
padding: 10px;
|
|
934
|
-
background: rgba(0, 0, 0, 0.3);
|
|
1093
|
+
background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
|
|
935
1094
|
border: 1px solid var(--chat-border, #333);
|
|
936
1095
|
border-radius: 6px;
|
|
937
1096
|
font-family:
|
|
@@ -940,7 +1099,7 @@
|
|
|
940
1099
|
"Courier New",
|
|
941
1100
|
monospace;
|
|
942
1101
|
font-size: 13px;
|
|
943
|
-
color: var(--chat-text, #ccc);
|
|
1102
|
+
color: var(--chat-code-text, var(--chat-text, #ccc));
|
|
944
1103
|
white-space: pre-wrap;
|
|
945
1104
|
word-break: break-all;
|
|
946
1105
|
overflow-x: auto;
|
|
@@ -1125,7 +1284,7 @@
|
|
|
1125
1284
|
Monaco,
|
|
1126
1285
|
"Cascadia Code",
|
|
1127
1286
|
monospace;
|
|
1128
|
-
color: var(--chat-text-muted, #999);
|
|
1287
|
+
color: var(--chat-code-text, var(--chat-text-muted, #999));
|
|
1129
1288
|
white-space: pre-wrap;
|
|
1130
1289
|
word-break: break-word;
|
|
1131
1290
|
}
|
|
@@ -1369,7 +1528,7 @@
|
|
|
1369
1528
|
}
|
|
1370
1529
|
.at-view-section-title {
|
|
1371
1530
|
font-size: 11px;
|
|
1372
|
-
color: #888;
|
|
1531
|
+
color: var(--chat-text-muted, #888);
|
|
1373
1532
|
padding: 6px 8px 4px;
|
|
1374
1533
|
text-transform: uppercase;
|
|
1375
1534
|
letter-spacing: 0.5px;
|
|
@@ -1385,22 +1544,22 @@
|
|
|
1385
1544
|
height: 22px;
|
|
1386
1545
|
border-radius: 4px;
|
|
1387
1546
|
background: transparent;
|
|
1388
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
1389
|
-
color: #999;
|
|
1547
|
+
border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
|
|
1548
|
+
color: var(--chat-text-muted, #999);
|
|
1390
1549
|
cursor: pointer;
|
|
1391
1550
|
display: flex;
|
|
1392
1551
|
align-items: center;
|
|
1393
1552
|
justify-content: center;
|
|
1394
1553
|
}
|
|
1395
1554
|
.at-view-pathbtn:hover {
|
|
1396
|
-
background: rgba(255, 255, 255, 0.06);
|
|
1397
|
-
color: #ccc;
|
|
1555
|
+
background: var(--chat-muted-hover, rgba(255, 255, 255, 0.06));
|
|
1556
|
+
color: var(--chat-text, #ccc);
|
|
1398
1557
|
}
|
|
1399
1558
|
.at-view-pathtext {
|
|
1400
1559
|
flex: 1;
|
|
1401
1560
|
min-width: 0;
|
|
1402
1561
|
font-size: 11px;
|
|
1403
|
-
color: #777;
|
|
1562
|
+
color: var(--chat-text-muted, #777);
|
|
1404
1563
|
white-space: nowrap;
|
|
1405
1564
|
overflow: hidden;
|
|
1406
1565
|
text-overflow: ellipsis;
|
|
@@ -1420,23 +1579,23 @@
|
|
|
1420
1579
|
border: 1px solid transparent;
|
|
1421
1580
|
background: transparent;
|
|
1422
1581
|
cursor: pointer;
|
|
1423
|
-
color: #ccc;
|
|
1582
|
+
color: var(--chat-text, #ccc);
|
|
1424
1583
|
width: 100%;
|
|
1425
1584
|
}
|
|
1426
1585
|
.at-view-item:hover {
|
|
1427
|
-
background: rgba(255, 255, 255, 0.06);
|
|
1586
|
+
background: var(--chat-muted-hover, rgba(255, 255, 255, 0.06));
|
|
1428
1587
|
}
|
|
1429
1588
|
.at-view-item.active {
|
|
1430
1589
|
background: rgba(59, 130, 246, 0.15);
|
|
1431
1590
|
border-color: rgba(59, 130, 246, 0.3);
|
|
1432
1591
|
}
|
|
1433
1592
|
.at-view-item-icon {
|
|
1434
|
-
color: #999;
|
|
1593
|
+
color: var(--chat-text-muted, #999);
|
|
1435
1594
|
flex-shrink: 0;
|
|
1436
1595
|
}
|
|
1437
1596
|
.at-view-item-name {
|
|
1438
1597
|
font-size: 13px;
|
|
1439
|
-
color: #ddd;
|
|
1598
|
+
color: var(--chat-text, #ddd);
|
|
1440
1599
|
flex-shrink: 0;
|
|
1441
1600
|
max-width: 160px;
|
|
1442
1601
|
overflow: hidden;
|
|
@@ -1445,7 +1604,7 @@
|
|
|
1445
1604
|
}
|
|
1446
1605
|
.at-view-item-path {
|
|
1447
1606
|
font-size: 11px;
|
|
1448
|
-
color: #555;
|
|
1607
|
+
color: var(--chat-text-muted, #555);
|
|
1449
1608
|
min-width: 0;
|
|
1450
1609
|
overflow: hidden;
|
|
1451
1610
|
text-overflow: ellipsis;
|
|
@@ -1454,7 +1613,7 @@
|
|
|
1454
1613
|
}
|
|
1455
1614
|
.at-view-empty {
|
|
1456
1615
|
padding: 12px 10px;
|
|
1457
|
-
color: #666;
|
|
1616
|
+
color: var(--chat-text-muted, #666);
|
|
1458
1617
|
font-size: 12px;
|
|
1459
1618
|
text-align: center;
|
|
1460
1619
|
}
|
|
@@ -1467,23 +1626,23 @@
|
|
|
1467
1626
|
text-align: center;
|
|
1468
1627
|
}
|
|
1469
1628
|
.at-placeholder-icon {
|
|
1470
|
-
color: #555;
|
|
1629
|
+
color: var(--chat-text-muted, #555);
|
|
1471
1630
|
margin-bottom: 12px;
|
|
1472
1631
|
}
|
|
1473
1632
|
.at-placeholder-title {
|
|
1474
1633
|
font-size: 14px;
|
|
1475
1634
|
font-weight: 500;
|
|
1476
|
-
color: #888;
|
|
1635
|
+
color: var(--chat-text-muted, #888);
|
|
1477
1636
|
margin-bottom: 8px;
|
|
1478
1637
|
}
|
|
1479
1638
|
.at-placeholder-desc {
|
|
1480
1639
|
font-size: 13px;
|
|
1481
|
-
color: #666;
|
|
1640
|
+
color: var(--chat-text-muted, #666);
|
|
1482
1641
|
margin-bottom: 4px;
|
|
1483
1642
|
}
|
|
1484
1643
|
.at-placeholder-hint {
|
|
1485
1644
|
font-size: 11px;
|
|
1486
|
-
color: #555;
|
|
1645
|
+
color: var(--chat-text-muted, #555);
|
|
1487
1646
|
}
|
|
1488
1647
|
|
|
1489
1648
|
/* src/components/input/AtFilePicker.css */
|
|
@@ -1681,7 +1840,7 @@
|
|
|
1681
1840
|
display: flex;
|
|
1682
1841
|
align-items: center;
|
|
1683
1842
|
justify-content: center;
|
|
1684
|
-
height:
|
|
1843
|
+
height: 48px;
|
|
1685
1844
|
padding: 0 12px;
|
|
1686
1845
|
background: rgba(255, 255, 255, 0.1);
|
|
1687
1846
|
border: none;
|
|
@@ -2428,7 +2587,7 @@
|
|
|
2428
2587
|
padding: 8px;
|
|
2429
2588
|
font-size: 13px;
|
|
2430
2589
|
line-height: 1.5;
|
|
2431
|
-
color: var(--chat-text-
|
|
2590
|
+
color: var(--chat-code-text, var(--chat-text, #999));
|
|
2432
2591
|
font-family:
|
|
2433
2592
|
"SF Mono",
|
|
2434
2593
|
Monaco,
|
|
@@ -2436,6 +2595,8 @@
|
|
|
2436
2595
|
white-space: pre-wrap;
|
|
2437
2596
|
word-break: break-word;
|
|
2438
2597
|
overflow-x: auto;
|
|
2598
|
+
background: var(--chat-code-bg);
|
|
2599
|
+
border-top: 1px solid var(--chat-border);
|
|
2439
2600
|
}
|
|
2440
2601
|
.weather-card {
|
|
2441
2602
|
background:
|