@huyooo/ai-chat-frontend-react 0.2.11 → 0.2.13
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 +94 -25
- package/dist/index.css.map +1 -1
- package/dist/index.js +558 -114
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/input/AtFilePicker.css +19 -19
- package/src/components/input/ChatInput.css +81 -1
- package/src/components/input/ChatInput.tsx +65 -18
- package/src/components/input/DropdownSelector.css +11 -5
- package/src/hooks/useVoiceInput.ts +454 -0
- package/src/hooks/useVoiceToTextInput.ts +87 -0
package/dist/index.css
CHANGED
|
@@ -889,8 +889,10 @@
|
|
|
889
889
|
display: flex;
|
|
890
890
|
align-items: center;
|
|
891
891
|
gap: 4px;
|
|
892
|
-
|
|
893
|
-
|
|
892
|
+
height: 28px;
|
|
893
|
+
padding: 0 8px;
|
|
894
|
+
background: rgba(0, 0, 0, 0.04);
|
|
895
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 6%, transparent);
|
|
894
896
|
border: none;
|
|
895
897
|
border-radius: 6px;
|
|
896
898
|
font-size: 14px;
|
|
@@ -899,7 +901,8 @@
|
|
|
899
901
|
transition: all 0.15s;
|
|
900
902
|
}
|
|
901
903
|
.dropdown-selector:hover:not(.disabled) {
|
|
902
|
-
background:
|
|
904
|
+
background: rgba(0, 0, 0, 0.06);
|
|
905
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
|
|
903
906
|
color: var(--chat-text, #ccc);
|
|
904
907
|
}
|
|
905
908
|
.dropdown-selector.disabled {
|
|
@@ -956,11 +959,13 @@
|
|
|
956
959
|
white-space: nowrap;
|
|
957
960
|
}
|
|
958
961
|
.dropdown-selector .dropdown-item:hover {
|
|
959
|
-
background: rgba(
|
|
962
|
+
background: rgba(0, 0, 0, 0.06);
|
|
963
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
|
|
960
964
|
color: var(--chat-text, #ccc);
|
|
961
965
|
}
|
|
962
966
|
.dropdown-selector .dropdown-item.active {
|
|
963
|
-
background: rgba(
|
|
967
|
+
background: rgba(0, 0, 0, 0.08);
|
|
968
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 14%, transparent);
|
|
964
969
|
color: var(--chat-text, #fff);
|
|
965
970
|
}
|
|
966
971
|
.dropdown-selector .check-icon {
|
|
@@ -1484,6 +1489,52 @@
|
|
|
1484
1489
|
}
|
|
1485
1490
|
.input-right .icon-btn:hover {
|
|
1486
1491
|
color: var(--chat-text, #ccc);
|
|
1492
|
+
background: rgba(0, 0, 0, 0.06);
|
|
1493
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
|
|
1494
|
+
}
|
|
1495
|
+
.input-right .voice-btn {
|
|
1496
|
+
display: flex;
|
|
1497
|
+
align-items: center;
|
|
1498
|
+
justify-content: center;
|
|
1499
|
+
width: 28px;
|
|
1500
|
+
height: 28px;
|
|
1501
|
+
background: transparent;
|
|
1502
|
+
border: none;
|
|
1503
|
+
border-radius: 6px;
|
|
1504
|
+
color: var(--chat-text-muted, #666);
|
|
1505
|
+
cursor: pointer;
|
|
1506
|
+
transition: all 0.15s;
|
|
1507
|
+
}
|
|
1508
|
+
.input-right .voice-btn:hover {
|
|
1509
|
+
color: var(--chat-text, #ccc);
|
|
1510
|
+
background: rgba(0, 0, 0, 0.06);
|
|
1511
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
|
|
1512
|
+
}
|
|
1513
|
+
.input-right .voice-btn.connecting {
|
|
1514
|
+
color: #f59e0b;
|
|
1515
|
+
background: transparent;
|
|
1516
|
+
}
|
|
1517
|
+
.input-right .voice-btn.connecting:hover {
|
|
1518
|
+
color: #f59e0b;
|
|
1519
|
+
background: rgba(0, 0, 0, 0.06);
|
|
1520
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
|
|
1521
|
+
}
|
|
1522
|
+
.input-right .voice-btn .spin {
|
|
1523
|
+
animation: spin 1s linear infinite;
|
|
1524
|
+
}
|
|
1525
|
+
.input-right .voice-btn:disabled {
|
|
1526
|
+
opacity: 0.5;
|
|
1527
|
+
cursor: not-allowed;
|
|
1528
|
+
}
|
|
1529
|
+
.input-right .voice-btn.recording {
|
|
1530
|
+
color: #ef4444;
|
|
1531
|
+
background: transparent;
|
|
1532
|
+
animation: none;
|
|
1533
|
+
}
|
|
1534
|
+
.input-right .voice-btn.recording:hover {
|
|
1535
|
+
color: #ef4444;
|
|
1536
|
+
background: rgba(0, 0, 0, 0.06);
|
|
1537
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
|
|
1487
1538
|
}
|
|
1488
1539
|
.toggle-btn {
|
|
1489
1540
|
display: flex;
|
|
@@ -1500,9 +1551,18 @@
|
|
|
1500
1551
|
}
|
|
1501
1552
|
.toggle-btn:hover {
|
|
1502
1553
|
color: var(--chat-text, #ccc);
|
|
1554
|
+
background: rgba(0, 0, 0, 0.06);
|
|
1555
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
|
|
1503
1556
|
}
|
|
1504
1557
|
.toggle-btn.active {
|
|
1505
|
-
color: var(--chat-
|
|
1558
|
+
color: var(--chat-primary, #54a9ff);
|
|
1559
|
+
background: rgba(84, 169, 255, 0.14);
|
|
1560
|
+
background: color-mix(in srgb, var(--chat-primary, #54a9ff) 14%, transparent);
|
|
1561
|
+
}
|
|
1562
|
+
.toggle-btn.active:hover {
|
|
1563
|
+
color: var(--chat-primary-hover, #2f90ff);
|
|
1564
|
+
background: rgba(84, 169, 255, 0.2);
|
|
1565
|
+
background: color-mix(in srgb, var(--chat-primary, #54a9ff) 20%, transparent);
|
|
1506
1566
|
}
|
|
1507
1567
|
.send-btn {
|
|
1508
1568
|
display: flex;
|
|
@@ -1519,6 +1579,15 @@
|
|
|
1519
1579
|
}
|
|
1520
1580
|
.send-btn:hover {
|
|
1521
1581
|
color: var(--chat-text, #ccc);
|
|
1582
|
+
background: rgba(0, 0, 0, 0.06);
|
|
1583
|
+
background: color-mix(in srgb, var(--chat-text, #ccc) 10%, transparent);
|
|
1584
|
+
}
|
|
1585
|
+
.send-btn:disabled {
|
|
1586
|
+
opacity: 0.5;
|
|
1587
|
+
cursor: not-allowed;
|
|
1588
|
+
}
|
|
1589
|
+
.send-btn:disabled:hover {
|
|
1590
|
+
color: var(--chat-text-muted, #666);
|
|
1522
1591
|
}
|
|
1523
1592
|
|
|
1524
1593
|
/* src/components/input/at-views/AtViewStyles.css */
|
|
@@ -1650,9 +1719,9 @@
|
|
|
1650
1719
|
position: fixed;
|
|
1651
1720
|
width: 332px;
|
|
1652
1721
|
background: var(--chat-dropdown-bg, #252526);
|
|
1653
|
-
border: 1px solid rgba(
|
|
1722
|
+
border: 1px solid var(--chat-border, rgba(0, 0, 0, 0.12));
|
|
1654
1723
|
border-radius: 10px;
|
|
1655
|
-
box-shadow: 0
|
|
1724
|
+
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
|
|
1656
1725
|
z-index: 99999;
|
|
1657
1726
|
display: flex;
|
|
1658
1727
|
flex-direction: column;
|
|
@@ -1663,7 +1732,7 @@
|
|
|
1663
1732
|
align-items: center;
|
|
1664
1733
|
gap: 8px;
|
|
1665
1734
|
padding: 10px 12px;
|
|
1666
|
-
border-bottom: 1px solid rgba(
|
|
1735
|
+
border-bottom: 1px solid var(--chat-border, rgba(0, 0, 0, 0.12));
|
|
1667
1736
|
}
|
|
1668
1737
|
.at-picker-back {
|
|
1669
1738
|
width: 24px;
|
|
@@ -1674,16 +1743,16 @@
|
|
|
1674
1743
|
background: transparent;
|
|
1675
1744
|
border: none;
|
|
1676
1745
|
border-radius: 4px;
|
|
1677
|
-
color: #888;
|
|
1746
|
+
color: var(--chat-text-muted, #888);
|
|
1678
1747
|
cursor: pointer;
|
|
1679
1748
|
flex-shrink: 0;
|
|
1680
1749
|
}
|
|
1681
1750
|
.at-picker-back:hover {
|
|
1682
|
-
background: rgba(
|
|
1683
|
-
color: #
|
|
1751
|
+
background: var(--chat-muted-hover, rgba(0, 0, 0, 0.06));
|
|
1752
|
+
color: var(--chat-text, #26251eeb);
|
|
1684
1753
|
}
|
|
1685
1754
|
.at-picker-search-icon {
|
|
1686
|
-
color: #
|
|
1755
|
+
color: var(--chat-text-muted, #888);
|
|
1687
1756
|
flex-shrink: 0;
|
|
1688
1757
|
}
|
|
1689
1758
|
.at-picker-search {
|
|
@@ -1691,7 +1760,7 @@
|
|
|
1691
1760
|
background: transparent;
|
|
1692
1761
|
border: none;
|
|
1693
1762
|
outline: none;
|
|
1694
|
-
color: #
|
|
1763
|
+
color: var(--chat-text, #26251eeb);
|
|
1695
1764
|
font-size: 13px;
|
|
1696
1765
|
}
|
|
1697
1766
|
.at-picker-body {
|
|
@@ -1710,7 +1779,7 @@
|
|
|
1710
1779
|
.at-picker-recent {
|
|
1711
1780
|
padding-bottom: 6px;
|
|
1712
1781
|
margin-bottom: 6px;
|
|
1713
|
-
border-bottom: 1px solid rgba(
|
|
1782
|
+
border-bottom: 1px solid var(--chat-border, rgba(0, 0, 0, 0.12));
|
|
1714
1783
|
}
|
|
1715
1784
|
.at-picker-list {
|
|
1716
1785
|
display: flex;
|
|
@@ -1727,23 +1796,23 @@
|
|
|
1727
1796
|
border: 1px solid transparent;
|
|
1728
1797
|
background: transparent;
|
|
1729
1798
|
cursor: pointer;
|
|
1730
|
-
color: #
|
|
1799
|
+
color: var(--chat-text, #26251eeb);
|
|
1731
1800
|
width: 100%;
|
|
1732
1801
|
}
|
|
1733
1802
|
.at-picker-item:hover {
|
|
1734
|
-
background: rgba(
|
|
1803
|
+
background: var(--chat-muted-hover, rgba(0, 0, 0, 0.06));
|
|
1735
1804
|
}
|
|
1736
1805
|
.at-picker-item.active {
|
|
1737
|
-
background: rgba(
|
|
1738
|
-
border-color:
|
|
1806
|
+
background: var(--chat-muted-hover, rgba(0, 0, 0, 0.06));
|
|
1807
|
+
border-color: var(--chat-primary, #54a9ff);
|
|
1739
1808
|
}
|
|
1740
1809
|
.at-picker-item-icon {
|
|
1741
|
-
color: #
|
|
1810
|
+
color: var(--chat-text-muted, #888);
|
|
1742
1811
|
flex-shrink: 0;
|
|
1743
1812
|
}
|
|
1744
1813
|
.at-picker-item-name {
|
|
1745
1814
|
font-size: 13px;
|
|
1746
|
-
color: #
|
|
1815
|
+
color: var(--chat-text, #26251eeb);
|
|
1747
1816
|
flex-shrink: 0;
|
|
1748
1817
|
max-width: 160px;
|
|
1749
1818
|
overflow: hidden;
|
|
@@ -1752,7 +1821,7 @@
|
|
|
1752
1821
|
}
|
|
1753
1822
|
.at-picker-item-path {
|
|
1754
1823
|
font-size: 11px;
|
|
1755
|
-
color: #
|
|
1824
|
+
color: var(--chat-text-muted, #888);
|
|
1756
1825
|
min-width: 0;
|
|
1757
1826
|
overflow: hidden;
|
|
1758
1827
|
text-overflow: ellipsis;
|
|
@@ -1764,13 +1833,13 @@
|
|
|
1764
1833
|
max-width: none;
|
|
1765
1834
|
}
|
|
1766
1835
|
.at-picker-chevron {
|
|
1767
|
-
color: #
|
|
1836
|
+
color: var(--chat-text-muted, #888);
|
|
1768
1837
|
flex-shrink: 0;
|
|
1769
1838
|
}
|
|
1770
1839
|
.at-picker-footer {
|
|
1771
1840
|
padding: 8px 12px;
|
|
1772
|
-
border-top: 1px solid rgba(
|
|
1773
|
-
color: #
|
|
1841
|
+
border-top: 1px solid var(--chat-border, rgba(0, 0, 0, 0.12));
|
|
1842
|
+
color: var(--chat-text-muted, #888);
|
|
1774
1843
|
font-size: 11px;
|
|
1775
1844
|
}
|
|
1776
1845
|
|