@qfei-design/make-ai-assistant 0.2.12 → 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/styles.css CHANGED
@@ -936,24 +936,44 @@
936
936
  }
937
937
 
938
938
  .make-ai-assistant__process {
939
- background: var(--make-ai-internal-surface);
940
- border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 88%, transparent);
941
- border-radius: 10px;
939
+ background: color-mix(in srgb, var(--make-ai-internal-surface) 94%, var(--make-ai-internal-accent-soft));
940
+ border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 14%, var(--make-ai-internal-border));
941
+ border-radius: 14px;
942
+ box-shadow: 0 1px 2px color-mix(in srgb, var(--make-ai-internal-text) 5%, transparent);
943
+ box-sizing: border-box;
942
944
  color: var(--make-ai-internal-text-secondary);
943
945
  font-size: var(--make-ai-internal-font-size-meta);
944
946
  line-height: var(--make-ai-internal-line-height-meta);
947
+ margin: 4px auto;
945
948
  overflow: hidden;
946
949
  overflow-wrap: anywhere;
950
+ transition: border-color 160ms ease, box-shadow 160ms ease;
951
+ width: min(calc(100% - 16px), 720px);
952
+ }
953
+
954
+ .make-ai-assistant__process:hover,
955
+ .make-ai-assistant__process:focus-within {
956
+ border-color: color-mix(in srgb, var(--make-ai-internal-accent) 30%, var(--make-ai-internal-border));
957
+ box-shadow: 0 6px 18px color-mix(in srgb, var(--make-ai-internal-accent) 10%, transparent);
947
958
  }
948
959
 
949
960
  .make-ai-assistant__process summary {
950
961
  align-items: center;
951
962
  cursor: pointer;
952
963
  display: flex;
953
- gap: 8px;
964
+ gap: 10px;
954
965
  list-style: none;
955
- min-height: 32px;
956
- padding: 7px 9px;
966
+ min-height: 48px;
967
+ padding: 10px 12px;
968
+ }
969
+
970
+ .make-ai-assistant__process summary:hover {
971
+ background: color-mix(in srgb, var(--make-ai-internal-accent-soft) 62%, transparent);
972
+ }
973
+
974
+ .make-ai-assistant__process summary:focus-visible {
975
+ outline: 2px solid var(--make-ai-internal-accent);
976
+ outline-offset: -2px;
957
977
  }
958
978
 
959
979
  .make-ai-assistant__process summary::-webkit-details-marker {
@@ -976,49 +996,134 @@
976
996
  transform: rotate(225deg);
977
997
  }
978
998
 
999
+ .make-ai-assistant__process[open] summary {
1000
+ border-bottom: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 76%, transparent);
1001
+ }
1002
+
1003
+ .make-ai-assistant__process-summary {
1004
+ align-items: center;
1005
+ display: flex;
1006
+ flex: 1;
1007
+ gap: 10px;
1008
+ min-width: 0;
1009
+ }
1010
+
1011
+ .make-ai-assistant__process-indicator {
1012
+ align-items: center;
1013
+ background: color-mix(in srgb, var(--make-ai-internal-accent) 12%, var(--make-ai-internal-surface));
1014
+ border-radius: 8px;
1015
+ display: inline-flex;
1016
+ flex: 0 0 auto;
1017
+ height: 26px;
1018
+ justify-content: center;
1019
+ width: 26px;
1020
+ }
1021
+
1022
+ .make-ai-assistant__process-indicator::before {
1023
+ background: var(--make-ai-internal-accent);
1024
+ border-radius: 50%;
1025
+ box-shadow: 0 0 0 4px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent);
1026
+ content: "";
1027
+ height: 6px;
1028
+ width: 6px;
1029
+ }
1030
+
1031
+ .make-ai-assistant__process-copy {
1032
+ display: grid;
1033
+ gap: 1px;
1034
+ min-width: 0;
1035
+ }
1036
+
1037
+ .make-ai-assistant__process-title {
1038
+ color: var(--make-ai-internal-text);
1039
+ font-size: var(--make-ai-internal-font-size-ui);
1040
+ font-weight: 700;
1041
+ line-height: var(--make-ai-internal-line-height-ui);
1042
+ }
1043
+
1044
+ .make-ai-assistant__process .make-ai-assistant__process-latest {
1045
+ color: var(--make-ai-internal-text-secondary);
1046
+ display: block;
1047
+ flex: 0 1 auto;
1048
+ font-size: var(--make-ai-internal-font-size-meta);
1049
+ line-height: var(--make-ai-internal-line-height-meta);
1050
+ min-height: 0;
1051
+ overflow: hidden;
1052
+ text-overflow: ellipsis;
1053
+ white-space: nowrap;
1054
+ }
1055
+
979
1056
  .make-ai-assistant__process-count {
980
- color: color-mix(in srgb, var(--make-ai-internal-text-secondary) 78%, var(--make-ai-internal-bg));
1057
+ background: var(--make-ai-internal-surface-strong);
1058
+ border: 1px solid color-mix(in srgb, var(--make-ai-internal-border) 82%, transparent);
1059
+ border-radius: 999px;
1060
+ color: var(--make-ai-internal-text-secondary);
981
1061
  flex: 0 0 auto;
982
1062
  font-size: var(--make-ai-internal-font-size-caption);
983
- margin-left: auto;
1063
+ font-variant-numeric: tabular-nums;
1064
+ font-weight: 650;
1065
+ padding: 3px 7px;
1066
+ white-space: nowrap;
984
1067
  }
985
1068
 
986
1069
  .make-ai-assistant__process ol {
1070
+ background: color-mix(in srgb, var(--make-ai-internal-surface) 82%, transparent);
987
1071
  display: grid;
988
- gap: 6px;
1072
+ gap: 8px;
989
1073
  list-style: none;
990
1074
  margin: 0;
991
- padding: 0 10px 10px 12px;
1075
+ padding: 11px 14px 13px;
992
1076
  }
993
1077
 
994
1078
  .make-ai-assistant__process li {
995
1079
  align-items: flex-start;
996
1080
  display: flex;
997
- gap: 8px;
1081
+ gap: 10px;
998
1082
  min-width: 0;
1083
+ position: relative;
999
1084
  }
1000
1085
 
1001
1086
  .make-ai-assistant__process li > span:first-child {
1002
- background: var(--make-ai-internal-border);
1087
+ background: var(--make-ai-internal-surface);
1088
+ border: 2px solid color-mix(in srgb, var(--make-ai-internal-border) 88%, transparent);
1003
1089
  border-radius: 50%;
1090
+ box-sizing: border-box;
1004
1091
  flex: 0 0 auto;
1005
- height: 6px;
1006
- margin-top: 7px;
1007
- width: 6px;
1092
+ height: 10px;
1093
+ margin-top: 4px;
1094
+ position: relative;
1095
+ width: 10px;
1096
+ }
1097
+
1098
+ .make-ai-assistant__process li:not(:last-child)::after {
1099
+ background: color-mix(in srgb, var(--make-ai-internal-border) 78%, transparent);
1100
+ bottom: -12px;
1101
+ content: "";
1102
+ left: 4px;
1103
+ position: absolute;
1104
+ top: 14px;
1105
+ width: 2px;
1008
1106
  }
1009
1107
 
1010
1108
  .make-ai-assistant__process li[data-step-active] > span:first-child {
1011
1109
  background: var(--make-ai-internal-accent);
1110
+ border-color: var(--make-ai-internal-accent);
1111
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--make-ai-internal-accent) 14%, transparent);
1012
1112
  }
1013
1113
 
1014
1114
  .make-ai-assistant__process li > span:last-child {
1015
- color: var(--make-ai-internal-text);
1016
- font-size: var(--make-ai-internal-font-size-body);
1017
- line-height: var(--make-ai-internal-line-height-body);
1115
+ color: var(--make-ai-internal-text-secondary);
1116
+ font-size: var(--make-ai-internal-font-size-meta);
1117
+ line-height: var(--make-ai-internal-line-height-meta);
1018
1118
  min-width: 0;
1019
1119
  overflow-wrap: anywhere;
1020
1120
  }
1021
1121
 
1122
+ .make-ai-assistant__process li[data-step-active] > span:last-child {
1123
+ color: var(--make-ai-internal-text);
1124
+ font-weight: 600;
1125
+ }
1126
+
1022
1127
  .make-ai-assistant__reply-actions {
1023
1128
  align-items: center;
1024
1129
  color: var(--make-ai-internal-text-secondary);
@@ -1040,7 +1145,8 @@
1040
1145
  }
1041
1146
 
1042
1147
  .make-ai-assistant__reply-copy,
1043
- .make-ai-assistant__reply-regenerate {
1148
+ .make-ai-assistant__reply-regenerate,
1149
+ .make-ai-assistant__reply-feedback-action {
1044
1150
  align-items: center;
1045
1151
  border: 1px solid transparent;
1046
1152
  display: inline-flex;
@@ -1051,7 +1157,8 @@
1051
1157
  }
1052
1158
 
1053
1159
  .make-ai-assistant__reply-copy svg,
1054
- .make-ai-assistant__reply-regenerate svg {
1160
+ .make-ai-assistant__reply-regenerate svg,
1161
+ .make-ai-assistant__reply-feedback-action svg {
1055
1162
  fill: none;
1056
1163
  height: 15px;
1057
1164
  stroke: currentColor;
@@ -1061,6 +1168,11 @@
1061
1168
  width: 15px;
1062
1169
  }
1063
1170
 
1171
+ .make-ai-assistant__reply-feedback-action {
1172
+ height: 28px;
1173
+ width: 28px;
1174
+ }
1175
+
1064
1176
  .make-ai-assistant__reply-action[data-tooltip]::after,
1065
1177
  .make-ai-assistant__send[data-tooltip]::after {
1066
1178
  background: var(--make-ai-internal-overlay);
@@ -1092,7 +1204,9 @@
1092
1204
  }
1093
1205
 
1094
1206
  .make-ai-assistant__reply-copy:hover,
1095
- .make-ai-assistant__reply-regenerate:hover {
1207
+ .make-ai-assistant__reply-regenerate:hover,
1208
+ .make-ai-assistant__reply-feedback-action:hover,
1209
+ .make-ai-assistant__reply-feedback-action[aria-pressed="true"] {
1096
1210
  background: var(--make-ai-internal-surface);
1097
1211
  border-color: color-mix(in srgb, var(--make-ai-internal-accent) 18%, var(--make-ai-internal-border));
1098
1212
  color: var(--make-ai-internal-accent);
@@ -1784,13 +1898,21 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
1784
1898
 
1785
1899
  .make-ai-assistant__conversation-row {
1786
1900
  align-items: center;
1901
+ border-radius: 8px;
1787
1902
  display: flex;
1788
1903
  gap: 2px;
1789
1904
  min-width: 0;
1905
+ padding: 2px;
1790
1906
  }
1791
1907
 
1792
- .make-ai-assistant__conversation-row > button:first-child {
1908
+ .make-ai-assistant__conversation-row:hover,
1909
+ .make-ai-assistant__conversation-row:focus-within {
1910
+ background: var(--make-ai-internal-surface-strong);
1911
+ }
1912
+
1913
+ .make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-select {
1793
1914
  align-items: center;
1915
+ background: transparent;
1794
1916
  border-color: transparent;
1795
1917
  display: flex;
1796
1918
  flex: 1;
@@ -1802,7 +1924,8 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
1802
1924
  text-align: left;
1803
1925
  }
1804
1926
 
1805
- .make-ai-assistant__conversation-row > button:first-child svg,
1927
+ .make-ai-assistant__conversation-row-select svg,
1928
+ .make-ai-assistant__conversation-row-action svg,
1806
1929
  .make-ai-assistant__conversation-new svg {
1807
1930
  fill: none;
1808
1931
  flex: 0 0 auto;
@@ -1814,28 +1937,106 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
1814
1937
  width: 16px;
1815
1938
  }
1816
1939
 
1817
- .make-ai-assistant__conversation-row > button:first-child span {
1940
+ .make-ai-assistant__conversation-row-select span {
1818
1941
  min-width: 0;
1819
1942
  overflow: hidden;
1820
1943
  text-overflow: ellipsis;
1821
1944
  white-space: nowrap;
1822
1945
  }
1823
1946
 
1824
- .make-ai-assistant__conversation-row > button[aria-pressed="true"] {
1947
+ .make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-select[aria-pressed="true"] {
1825
1948
  background: var(--make-ai-internal-accent-soft);
1826
1949
  color: var(--make-ai-internal-accent);
1827
1950
  }
1828
1951
 
1829
- .make-ai-assistant__conversation-row > button:last-child {
1952
+ .make-ai-assistant__conversation-row-actions {
1953
+ align-items: center;
1954
+ display: flex;
1955
+ flex: 0 0 auto;
1956
+ gap: 2px;
1957
+ }
1958
+
1959
+ .make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-pin,
1960
+ .make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-action {
1830
1961
  background: transparent;
1831
1962
  border-color: transparent;
1832
1963
  color: var(--make-ai-internal-text-secondary);
1833
1964
  flex: 0 0 auto;
1834
1965
  height: 30px;
1835
1966
  padding: 0;
1967
+ position: relative;
1836
1968
  width: 30px;
1837
1969
  }
1838
1970
 
1971
+ .make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-action {
1972
+ opacity: 0;
1973
+ pointer-events: none;
1974
+ transform: scale(.9);
1975
+ transition: opacity 120ms ease, transform 120ms ease;
1976
+ }
1977
+
1978
+ .make-ai-assistant__conversation-row:hover .make-ai-assistant__conversation-row-action,
1979
+ .make-ai-assistant__conversation-row:focus-within .make-ai-assistant__conversation-row-action,
1980
+ .make-ai-assistant__conversation-row[data-editing] .make-ai-assistant__conversation-row-action {
1981
+ opacity: 1;
1982
+ pointer-events: auto;
1983
+ transform: scale(1);
1984
+ }
1985
+
1986
+ .make-ai-assistant__conversation-row-action--danger:hover {
1987
+ color: var(--make-ai-internal-danger);
1988
+ }
1989
+
1990
+ .make-ai-assistant__conversation-tooltip {
1991
+ background: var(--make-ai-internal-overlay);
1992
+ border-radius: 8px;
1993
+ box-shadow: 0 8px 18px var(--make-ai-internal-overlay-shadow);
1994
+ color: var(--make-ai-internal-on-overlay);
1995
+ font-size: var(--make-ai-internal-font-size-meta);
1996
+ font-weight: 600;
1997
+ line-height: var(--make-ai-internal-line-height-meta);
1998
+ max-width: calc(100vw - 16px);
1999
+ padding: 6px 8px;
2000
+ pointer-events: none;
2001
+ position: fixed;
2002
+ transform: translate(-50%, -100%);
2003
+ z-index: calc(var(--make-ai-internal-z-index) + 3);
2004
+ }
2005
+
2006
+ .make-ai-assistant__conversation-tooltip[data-placement="below"] {
2007
+ transform: translate(-50%, 0);
2008
+ }
2009
+
2010
+ .make-ai-assistant__conversation-row-title-input {
2011
+ background: var(--make-ai-internal-surface);
2012
+ border: 1px solid var(--make-ai-internal-border);
2013
+ border-radius: 6px;
2014
+ color: inherit;
2015
+ flex: 1;
2016
+ font: inherit;
2017
+ min-width: 0;
2018
+ padding: 6px;
2019
+ }
2020
+
2021
+ .make-ai-assistant__conversation-delete-confirmation {
2022
+ align-items: center;
2023
+ display: flex;
2024
+ flex: 1 1 0;
2025
+ gap: 2px;
2026
+ min-width: 0;
2027
+ overflow: hidden;
2028
+ }
2029
+
2030
+ .make-ai-assistant__conversation-delete-confirmation > span {
2031
+ color: var(--make-ai-internal-text-secondary);
2032
+ flex: 1 1 0;
2033
+ min-width: 0;
2034
+ overflow: hidden;
2035
+ padding-left: 4px;
2036
+ text-overflow: ellipsis;
2037
+ white-space: nowrap;
2038
+ }
2039
+
1839
2040
  .make-ai-assistant__conversation-more,
1840
2041
  .make-ai-assistant__conversation-refresh {
1841
2042
  background: transparent !important;
@@ -1848,28 +2049,15 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
1848
2049
  width: 100%;
1849
2050
  }
1850
2051
 
1851
- .make-ai-assistant__conversation-management {
2052
+ .make-ai-assistant__conversation-history-actions {
1852
2053
  border-top: 1px solid var(--make-ai-internal-border);
1853
2054
  margin-top: 8px;
1854
2055
  padding: 8px 7px 0;
1855
2056
  }
1856
2057
 
1857
- .make-ai-assistant__conversation-management summary {
2058
+ .make-ai-assistant__conversation-history-actions p {
1858
2059
  color: var(--make-ai-internal-text-secondary);
1859
- cursor: pointer;
1860
- }
1861
-
1862
- .make-ai-assistant__conversation-actions {
1863
- align-items: center;
1864
- display: flex;
1865
- flex-wrap: wrap;
1866
- gap: 6px;
1867
- padding-top: 8px;
1868
- }
1869
-
1870
- .make-ai-assistant__conversation-actions input {
1871
- flex: 1;
1872
- min-width: 100px;
2060
+ margin: 6px 0 0;
1873
2061
  }
1874
2062
 
1875
2063
  .make-ai-assistant__conversation-error {
@@ -1901,7 +2089,6 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
1901
2089
  }
1902
2090
 
1903
2091
  .make-ai-assistant__conversation-controls button,
1904
- .make-ai-assistant__feedback button,
1905
2092
  .make-ai-assistant__attachment button {
1906
2093
  background: var(--make-ai-internal-surface);
1907
2094
  border: 1px solid var(--make-ai-internal-border);
@@ -1911,12 +2098,21 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
1911
2098
  font: inherit;
1912
2099
  padding: 4px 8px;
1913
2100
  }
1914
- .make-ai-assistant__feedback { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--make-ai-internal-font-size-meta); }
1915
- .make-ai-assistant__feedback button[aria-pressed="true"] { color: var(--make-ai-internal-accent); border-color: var(--make-ai-internal-accent); }
1916
- .make-ai-assistant__feedback form { display: grid; flex-basis: 100%; gap: 6px; }
2101
+ .make-ai-assistant__feedback { align-items: center; display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--make-ai-internal-font-size-meta); }
2102
+ .make-ai-assistant__reply-feedback-action { color: inherit; }
2103
+ .make-ai-assistant__reply-feedback-action[aria-pressed="true"] { color: var(--make-ai-internal-accent); }
2104
+ .make-ai-assistant__feedback-text-action {
2105
+ background: var(--make-ai-internal-surface);
2106
+ border: 1px solid var(--make-ai-internal-border);
2107
+ border-radius: 6px;
2108
+ color: inherit;
2109
+ cursor: pointer;
2110
+ font: inherit;
2111
+ padding: 4px 8px;
2112
+ }
2113
+ .make-ai-assistant__feedback form { display: grid; flex-basis: 100%; gap: 6px; min-width: min(100%, 240px); }
1917
2114
  .make-ai-assistant__feedback input,
1918
- .make-ai-assistant__feedback textarea,
1919
- .make-ai-assistant__conversation-actions input { border: 1px solid var(--make-ai-internal-border); border-radius: 6px; color: inherit; font: inherit; padding: 6px; width: 100%; }
2115
+ .make-ai-assistant__feedback textarea { border: 1px solid var(--make-ai-internal-border); border-radius: 6px; color: inherit; font: inherit; padding: 6px; width: 100%; }
1920
2116
  .make-ai-assistant__attachment { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--make-ai-internal-border); border-radius: 8px; font-size: var(--make-ai-internal-font-size-meta); }
1921
2117
  .make-ai-assistant__attachment img,
1922
2118
  .make-ai-assistant__attachment video { max-height: 260px; max-width: 100%; object-fit: contain; }
@@ -1997,9 +2193,9 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
1997
2193
 
1998
2194
  .make-ai-assistant__attachment-drafts {
1999
2195
  font-size: var(--make-ai-internal-font-size-meta);
2000
- max-height: 140px;
2196
+ max-height: 156px;
2001
2197
  overflow: auto;
2002
- padding-bottom: 8px;
2198
+ padding: 4px 0 8px;
2003
2199
  }
2004
2200
 
2005
2201
  .make-ai-assistant__attachment-drafts ul {
@@ -2015,11 +2211,13 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
2015
2211
  align-items: center;
2016
2212
  background: var(--make-ai-internal-surface);
2017
2213
  border: 1px solid var(--make-ai-internal-border);
2018
- border-radius: 8px;
2214
+ border-radius: 10px;
2019
2215
  display: flex;
2020
2216
  flex-wrap: wrap;
2021
- gap: 4px;
2022
- padding: 5px 7px;
2217
+ gap: 8px;
2218
+ min-height: 64px;
2219
+ padding: 5px 28px 5px 5px;
2220
+ position: relative;
2023
2221
  }
2024
2222
 
2025
2223
  .make-ai-assistant__attachment-drafts button {
@@ -2030,12 +2228,116 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
2030
2228
  padding: 2px 4px;
2031
2229
  }
2032
2230
 
2231
+ .make-ai-assistant__attachment-draft-preview,
2232
+ .make-ai-assistant__attachment-draft-file {
2233
+ background: var(--make-ai-internal-surface-strong);
2234
+ border: 1px solid color-mix(in srgb, var(--make-ai-internal-accent) 14%, var(--make-ai-internal-border));
2235
+ border-radius: 7px;
2236
+ flex: 0 0 auto;
2237
+ height: 52px;
2238
+ object-fit: cover;
2239
+ width: 52px;
2240
+ }
2241
+
2242
+ .make-ai-assistant__attachment-draft-file {
2243
+ align-items: center;
2244
+ color: var(--make-ai-internal-text-secondary);
2245
+ display: inline-flex;
2246
+ justify-content: center;
2247
+ }
2248
+
2249
+ .make-ai-assistant__attachment-draft-file svg {
2250
+ fill: none;
2251
+ height: 24px;
2252
+ stroke: currentColor;
2253
+ stroke-linecap: round;
2254
+ stroke-linejoin: round;
2255
+ stroke-width: 1.6;
2256
+ width: 24px;
2257
+ }
2258
+
2259
+ .make-ai-assistant__attachment-draft-details {
2260
+ display: grid;
2261
+ gap: 3px;
2262
+ min-width: 0;
2263
+ }
2264
+
2265
+ .make-ai-assistant__attachment-draft-name {
2266
+ color: var(--make-ai-internal-text);
2267
+ max-width: 152px;
2268
+ overflow: hidden;
2269
+ text-overflow: ellipsis;
2270
+ white-space: nowrap;
2271
+ }
2272
+
2273
+ .make-ai-assistant__attachment-draft-status {
2274
+ color: var(--make-ai-internal-text-secondary);
2275
+ }
2276
+
2277
+ .make-ai-assistant__attachment-drafts li[data-status="failed"] .make-ai-assistant__attachment-draft-status {
2278
+ color: var(--make-ai-internal-danger);
2279
+ }
2280
+
2281
+ .make-ai-assistant__attachment-draft-remove {
2282
+ align-items: center;
2283
+ border-radius: 50%;
2284
+ cursor: pointer;
2285
+ display: inline-flex;
2286
+ height: 20px;
2287
+ justify-content: center;
2288
+ opacity: 0;
2289
+ pointer-events: none;
2290
+ position: absolute;
2291
+ right: 4px;
2292
+ top: 4px;
2293
+ transform: scale(.86);
2294
+ transition: opacity 120ms ease, transform 120ms ease;
2295
+ width: 20px;
2296
+ }
2297
+
2298
+ .make-ai-assistant__attachment-drafts .make-ai-assistant__attachment-draft-remove {
2299
+ background: color-mix(in srgb, var(--make-ai-internal-overlay) 82%, transparent);
2300
+ border: 0;
2301
+ color: var(--make-ai-internal-on-overlay);
2302
+ padding: 0;
2303
+ }
2304
+
2305
+ .make-ai-assistant__attachment-draft-remove svg {
2306
+ fill: none;
2307
+ height: 13px;
2308
+ stroke: currentColor;
2309
+ stroke-linecap: round;
2310
+ stroke-width: 2;
2311
+ width: 13px;
2312
+ }
2313
+
2314
+ .make-ai-assistant__attachment-drafts li:hover .make-ai-assistant__attachment-draft-remove,
2315
+ .make-ai-assistant__attachment-drafts li:focus-within .make-ai-assistant__attachment-draft-remove {
2316
+ opacity: 1;
2317
+ pointer-events: auto;
2318
+ transform: scale(1);
2319
+ }
2320
+
2033
2321
  .make-ai-assistant__conversation-controls button:focus-visible,
2034
2322
  .make-ai-assistant__feedback button:focus-visible,
2035
2323
  .make-ai-assistant__attachment button:focus-visible,
2036
2324
  .make-ai-assistant__attachment-composer button:focus-visible,
2037
2325
  .make-ai-assistant__attachment-drafts button:focus-visible { outline: 2px solid var(--make-ai-internal-accent); outline-offset: 2px; }
2038
2326
 
2327
+ @media (hover: none), (pointer: coarse) {
2328
+ .make-ai-assistant__attachment-draft-remove {
2329
+ opacity: 1;
2330
+ pointer-events: auto;
2331
+ transform: scale(1);
2332
+ }
2333
+
2334
+ .make-ai-assistant__conversation-row .make-ai-assistant__conversation-row-action {
2335
+ opacity: 1;
2336
+ pointer-events: auto;
2337
+ transform: scale(1);
2338
+ }
2339
+ }
2340
+
2039
2341
  @media (prefers-reduced-motion: reduce) {
2040
2342
  .make-ai-assistant__drawer,
2041
2343
  .make-ai-assistant__launcher-orbit,
@@ -2050,6 +2352,9 @@ button.make-ai-artifact__record:hover { background: var(--make-ai-internal-accen
2050
2352
  .make-ai-assistant__drawer-resize-handle::after,
2051
2353
  .make-ai-assistant__reply-action[data-tooltip]::after,
2052
2354
  .make-ai-assistant__send[data-tooltip]::after,
2355
+ .make-ai-assistant__conversation-row-action,
2356
+ .make-ai-assistant__attachment-draft-remove,
2357
+ .make-ai-assistant__process,
2053
2358
  .make-ai-assistant__process summary::after {
2054
2359
  transition: none;
2055
2360
  }
@@ -32,9 +32,9 @@ JSON 回调返回服务端裸对象,204 返回 void,内容返回 Uint8Array
32
32
 
33
33
  输入和重试保存稳定 UUID。多个输入可能对应同一 responseId;面板控制器在响应维度保持一个订阅,关闭面板继续保留当前 UI,切会话/身份或卸载只释放本地连接。停止按钮调用 cancelResponse,并等待终态;完成与取消竞争时接受服务端最终结果。
34
34
 
35
- 输出按 itemId/partId 归并,完整 done 文本覆盖增量。中间模型活动放在过程区域,不能充当最终可反馈消息。response.completed 后读取历史对账,切换到持久助手 messageId,再开放反馈。点踩说明提交失败保留表单,重新提交复用未知结果的原意图;撤销用 rating=none。
35
+ 输出按 itemId/partId 归并,完整 done 文本覆盖增量。中间模型活动放在过程区域,不能充当最终可反馈消息。response.completed 后读取历史对账,切换到持久助手 messageId,再开放反馈;复制、喜欢和不喜欢以图标按钮并列展示,悬浮或聚焦时显示对应文本提示。点踩说明提交失败保留表单,重新提交复用未知结果的原意图;撤销用 rating=none。
36
36
 
37
- 文件选择、拖拽和粘贴共用一个“上传文件或图片”入口和上传队列;前端不按 `modelInputKinds` 过滤或拒绝媒体类型。分段大小读 partSize,重试先查 completedParts,未 ready 的附件不能发送;服务端根据消息 parts 和实际模型能力决定是否接受。暂停/移除只影响本地任务和草稿,当前没有远程上传取消接口。提供 `readContent` 时,附件卡片可鉴权下载和受控预览;未提供时仅展示附件元数据,不执行 HTML/SVG/脚本。
37
+ 文件选择、拖拽和粘贴共用一个“上传文件或图片”入口和上传队列;前端不按 `modelInputKinds` 过滤或拒绝媒体类型。安全的本地位图图片会在输入框上方显示缩略图,悬浮或键盘聚焦时显示右上角移除图标;移除、清空、切换对话和卸载都会释放对应 Object URL。SVG 不生成缩略图。分段大小读 partSize,重试先查 completedParts,未 ready 的附件不能发送;服务端根据消息 parts 和实际模型能力决定是否接受。暂停/移除只影响本地任务和草稿,当前没有远程上传取消接口。提供 `readContent` 时,附件卡片可鉴权下载和受控预览;未提供时仅展示附件元数据,不执行 HTML/SVG/脚本。
38
38
 
39
39
  ## 流式事件与恢复
40
40
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qfei-design/make-ai-assistant",
3
- "version": "0.2.12",
3
+ "version": "0.2.13",
4
4
  "description": "Platform-wide Make AI Assistant contracts, React shell, and context-aware artifact templates.",
5
5
  "type": "module",
6
6
  "sideEffects": [