@huyooo/ai-chat-frontend-react 0.2.7 → 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.
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/index.css CHANGED
@@ -3,24 +3,27 @@
3
3
  /* src/styles.css */
4
4
  :root {
5
5
  color-scheme: light;
6
- --chat-bg: #f5f5f5;
7
- --chat-header-bg: #ffffff;
8
- --chat-input-bg: #f3f4f6;
9
- --chat-dropdown-bg: #ffffff;
10
- --chat-muted: #e5e7eb;
11
- --chat-muted-hover: #d1d5db;
12
- --chat-border: #e5e7eb;
13
- --chat-text: #374151;
14
- --chat-text-muted: #6b7280;
15
- --chat-primary: #2563eb;
16
- --chat-primary-hover: #1d4ed8;
17
- --chat-destructive: #ef4444;
18
- --chat-destructive-hover: #dc2626;
19
- --chat-success: #22c55e;
20
- --chat-code-bg: #f3f4f6;
21
- --chat-code-text: #374151;
22
- --chat-scrollbar: rgba(0, 0, 0, 0.2);
23
- --chat-scrollbar-hover: rgba(0, 0, 0, 0.3);
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);
24
27
  }
25
28
  @media (prefers-color-scheme: dark) {
26
29
  :root {
@@ -34,19 +37,43 @@
34
37
  --chat-border: #333;
35
38
  --chat-text: #ccc;
36
39
  --chat-text-muted: #888;
37
- --chat-primary: #2563eb;
38
- --chat-primary-hover: #1d4ed8;
39
- --chat-destructive: #ef4444;
40
- --chat-destructive-hover: #dc2626;
41
- --chat-success: #22c55e;
40
+ --chat-primary: #54a9ff;
41
+ --chat-primary-hover: #2f90ff;
42
+ --chat-destructive: #cf2d56;
43
+ --chat-destructive-hover: #e33b67;
44
+ --chat-success: #1f8a65;
42
45
  --chat-code-bg: #1f2937;
43
46
  --chat-code-text: #e5e7eb;
44
47
  --chat-scrollbar: rgba(255, 255, 255, 0.2);
45
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);
46
52
  }
47
53
  }
48
54
  :root[data-theme=light] {
49
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);
50
77
  }
51
78
  :root[data-theme=dark] {
52
79
  color-scheme: dark;
@@ -59,15 +86,18 @@
59
86
  --chat-border: #333;
60
87
  --chat-text: #ccc;
61
88
  --chat-text-muted: #888;
62
- --chat-primary: #2563eb;
63
- --chat-primary-hover: #1d4ed8;
64
- --chat-destructive: #ef4444;
65
- --chat-destructive-hover: #dc2626;
66
- --chat-success: #22c55e;
89
+ --chat-primary: #54a9ff;
90
+ --chat-primary-hover: #2f90ff;
91
+ --chat-destructive: #cf2d56;
92
+ --chat-destructive-hover: #e33b67;
93
+ --chat-success: #1f8a65;
67
94
  --chat-code-bg: #1f2937;
68
95
  --chat-code-text: #e5e7eb;
69
96
  --chat-scrollbar: rgba(255, 255, 255, 0.2);
70
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);
71
101
  }
72
102
  .chat-scrollbar::-webkit-scrollbar {
73
103
  width: 6px;
@@ -114,18 +144,18 @@
114
144
  width: 32px;
115
145
  height: 32px;
116
146
  border-radius: 50%;
117
- background: var(--chat-bubble-bg, #2d2d2d);
118
- border: 1px solid var(--chat-border, #3d3d3d);
119
- color: var(--chat-text-secondary, #888);
147
+ background: var(--chat-fab-bg, var(--chat-muted));
148
+ border: 1px solid var(--chat-border);
149
+ color: var(--chat-text-muted);
120
150
  cursor: pointer;
121
151
  transition: all 0.2s ease;
122
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
152
+ box-shadow: var(--chat-fab-shadow, 0 2px 8px rgba(0, 0, 0, 0.3));
123
153
  z-index: 10;
124
154
  pointer-events: auto;
125
155
  }
126
156
  .scroll-to-bottom-btn:hover {
127
- background: var(--chat-bubble-bg-hover, #3a3a3a);
128
- color: var(--chat-text, #e0e0e0);
157
+ background: var(--chat-fab-bg-hover, var(--chat-muted-hover));
158
+ color: var(--chat-text);
129
159
  transform: scale(1.1);
130
160
  }
131
161
 
@@ -133,7 +163,7 @@
133
163
  .chat-header {
134
164
  display: flex;
135
165
  align-items: center;
136
- height: 40px;
166
+ height: 48px;
137
167
  padding: 0 12px;
138
168
  background: var(--chat-header-bg, #1e1e1e);
139
169
  border-bottom: 1px solid var(--chat-border, #333);
@@ -1031,7 +1061,7 @@
1031
1061
  .command-code {
1032
1062
  display: block;
1033
1063
  padding: 10px;
1034
- background: rgba(0, 0, 0, 0.3);
1064
+ background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
1035
1065
  border: 1px solid var(--chat-border, #333);
1036
1066
  border-radius: 6px;
1037
1067
  font-family:
@@ -1040,7 +1070,7 @@
1040
1070
  "Courier New",
1041
1071
  monospace;
1042
1072
  font-size: 13px;
1043
- color: var(--chat-text, #ccc);
1073
+ color: var(--chat-code-text, var(--chat-text, #ccc));
1044
1074
  white-space: pre-wrap;
1045
1075
  word-break: break-all;
1046
1076
  overflow-x: auto;
@@ -1060,7 +1090,7 @@
1060
1090
  .result-content {
1061
1091
  display: block;
1062
1092
  padding: 10px;
1063
- background: rgba(0, 0, 0, 0.3);
1093
+ background: var(--chat-code-bg, rgba(0, 0, 0, 0.3));
1064
1094
  border: 1px solid var(--chat-border, #333);
1065
1095
  border-radius: 6px;
1066
1096
  font-family:
@@ -1069,7 +1099,7 @@
1069
1099
  "Courier New",
1070
1100
  monospace;
1071
1101
  font-size: 13px;
1072
- color: var(--chat-text, #ccc);
1102
+ color: var(--chat-code-text, var(--chat-text, #ccc));
1073
1103
  white-space: pre-wrap;
1074
1104
  word-break: break-all;
1075
1105
  overflow-x: auto;
@@ -1254,7 +1284,7 @@
1254
1284
  Monaco,
1255
1285
  "Cascadia Code",
1256
1286
  monospace;
1257
- color: var(--chat-text-muted, #999);
1287
+ color: var(--chat-code-text, var(--chat-text-muted, #999));
1258
1288
  white-space: pre-wrap;
1259
1289
  word-break: break-word;
1260
1290
  }
@@ -1498,7 +1528,7 @@
1498
1528
  }
1499
1529
  .at-view-section-title {
1500
1530
  font-size: 11px;
1501
- color: #888;
1531
+ color: var(--chat-text-muted, #888);
1502
1532
  padding: 6px 8px 4px;
1503
1533
  text-transform: uppercase;
1504
1534
  letter-spacing: 0.5px;
@@ -1514,22 +1544,22 @@
1514
1544
  height: 22px;
1515
1545
  border-radius: 4px;
1516
1546
  background: transparent;
1517
- border: 1px solid rgba(255, 255, 255, 0.1);
1518
- color: #999;
1547
+ border: 1px solid var(--chat-border, rgba(255, 255, 255, 0.1));
1548
+ color: var(--chat-text-muted, #999);
1519
1549
  cursor: pointer;
1520
1550
  display: flex;
1521
1551
  align-items: center;
1522
1552
  justify-content: center;
1523
1553
  }
1524
1554
  .at-view-pathbtn:hover {
1525
- background: rgba(255, 255, 255, 0.06);
1526
- color: #ccc;
1555
+ background: var(--chat-muted-hover, rgba(255, 255, 255, 0.06));
1556
+ color: var(--chat-text, #ccc);
1527
1557
  }
1528
1558
  .at-view-pathtext {
1529
1559
  flex: 1;
1530
1560
  min-width: 0;
1531
1561
  font-size: 11px;
1532
- color: #777;
1562
+ color: var(--chat-text-muted, #777);
1533
1563
  white-space: nowrap;
1534
1564
  overflow: hidden;
1535
1565
  text-overflow: ellipsis;
@@ -1549,23 +1579,23 @@
1549
1579
  border: 1px solid transparent;
1550
1580
  background: transparent;
1551
1581
  cursor: pointer;
1552
- color: #ccc;
1582
+ color: var(--chat-text, #ccc);
1553
1583
  width: 100%;
1554
1584
  }
1555
1585
  .at-view-item:hover {
1556
- background: rgba(255, 255, 255, 0.06);
1586
+ background: var(--chat-muted-hover, rgba(255, 255, 255, 0.06));
1557
1587
  }
1558
1588
  .at-view-item.active {
1559
1589
  background: rgba(59, 130, 246, 0.15);
1560
1590
  border-color: rgba(59, 130, 246, 0.3);
1561
1591
  }
1562
1592
  .at-view-item-icon {
1563
- color: #999;
1593
+ color: var(--chat-text-muted, #999);
1564
1594
  flex-shrink: 0;
1565
1595
  }
1566
1596
  .at-view-item-name {
1567
1597
  font-size: 13px;
1568
- color: #ddd;
1598
+ color: var(--chat-text, #ddd);
1569
1599
  flex-shrink: 0;
1570
1600
  max-width: 160px;
1571
1601
  overflow: hidden;
@@ -1574,7 +1604,7 @@
1574
1604
  }
1575
1605
  .at-view-item-path {
1576
1606
  font-size: 11px;
1577
- color: #555;
1607
+ color: var(--chat-text-muted, #555);
1578
1608
  min-width: 0;
1579
1609
  overflow: hidden;
1580
1610
  text-overflow: ellipsis;
@@ -1583,7 +1613,7 @@
1583
1613
  }
1584
1614
  .at-view-empty {
1585
1615
  padding: 12px 10px;
1586
- color: #666;
1616
+ color: var(--chat-text-muted, #666);
1587
1617
  font-size: 12px;
1588
1618
  text-align: center;
1589
1619
  }
@@ -1596,23 +1626,23 @@
1596
1626
  text-align: center;
1597
1627
  }
1598
1628
  .at-placeholder-icon {
1599
- color: #555;
1629
+ color: var(--chat-text-muted, #555);
1600
1630
  margin-bottom: 12px;
1601
1631
  }
1602
1632
  .at-placeholder-title {
1603
1633
  font-size: 14px;
1604
1634
  font-weight: 500;
1605
- color: #888;
1635
+ color: var(--chat-text-muted, #888);
1606
1636
  margin-bottom: 8px;
1607
1637
  }
1608
1638
  .at-placeholder-desc {
1609
1639
  font-size: 13px;
1610
- color: #666;
1640
+ color: var(--chat-text-muted, #666);
1611
1641
  margin-bottom: 4px;
1612
1642
  }
1613
1643
  .at-placeholder-hint {
1614
1644
  font-size: 11px;
1615
- color: #555;
1645
+ color: var(--chat-text-muted, #555);
1616
1646
  }
1617
1647
 
1618
1648
  /* src/components/input/AtFilePicker.css */
@@ -1810,7 +1840,7 @@
1810
1840
  display: flex;
1811
1841
  align-items: center;
1812
1842
  justify-content: center;
1813
- height: 40px;
1843
+ height: 48px;
1814
1844
  padding: 0 12px;
1815
1845
  background: rgba(255, 255, 255, 0.1);
1816
1846
  border: none;
@@ -2557,7 +2587,7 @@
2557
2587
  padding: 8px;
2558
2588
  font-size: 13px;
2559
2589
  line-height: 1.5;
2560
- color: var(--chat-text-muted, #999);
2590
+ color: var(--chat-code-text, var(--chat-text, #999));
2561
2591
  font-family:
2562
2592
  "SF Mono",
2563
2593
  Monaco,
@@ -2565,6 +2595,8 @@
2565
2595
  white-space: pre-wrap;
2566
2596
  word-break: break-word;
2567
2597
  overflow-x: auto;
2598
+ background: var(--chat-code-bg);
2599
+ border-top: 1px solid var(--chat-border);
2568
2600
  }
2569
2601
  .weather-card {
2570
2602
  background: