@hef2024/llmasaservice-ui 0.22.10 → 0.23.0
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 +632 -1
- package/dist/index.d.mts +29 -1
- package/dist/index.d.ts +29 -1
- package/dist/index.js +3905 -3488
- package/dist/index.mjs +3837 -3422
- package/package.json +1 -1
- package/src/AIChatPanel.css +365 -0
- package/src/AIChatPanel.tsx +363 -112
- package/src/ChatPanel.css +379 -3
- package/src/ChatPanel.tsx +264 -190
- package/src/components/ui/ThinkingBlock.tsx +150 -0
- package/src/components/ui/WordFadeIn.tsx +101 -0
- package/src/components/ui/index.ts +6 -0
package/dist/index.css
CHANGED
|
@@ -758,7 +758,8 @@
|
|
|
758
758
|
color: #999;
|
|
759
759
|
}
|
|
760
760
|
.reasoning-section,
|
|
761
|
-
.searching-section
|
|
761
|
+
.searching-section,
|
|
762
|
+
.thinking-section.thinking-section {
|
|
762
763
|
margin: 1rem 0;
|
|
763
764
|
padding: 0.75rem;
|
|
764
765
|
border-radius: var(--border-radius);
|
|
@@ -773,6 +774,10 @@
|
|
|
773
774
|
border-left-color: var(--searching-border-color, #28a745);
|
|
774
775
|
background-color: var(--searching-background-color, #f0fff0);
|
|
775
776
|
}
|
|
777
|
+
.thinking-section.thinking-section {
|
|
778
|
+
border-left-color: var(--thinking-border-color, #8b5cf6);
|
|
779
|
+
background-color: var(--thinking-background-color, #f5f3ff);
|
|
780
|
+
}
|
|
776
781
|
.reasoning-header,
|
|
777
782
|
.searching-header {
|
|
778
783
|
font-weight: 600;
|
|
@@ -797,6 +802,10 @@
|
|
|
797
802
|
background-color: var(--searching-background-color-dark, #1a2e1a);
|
|
798
803
|
border-left-color: var(--searching-border-color-dark, #4ade80);
|
|
799
804
|
}
|
|
805
|
+
.dark-theme .thinking-section.thinking-section {
|
|
806
|
+
background-color: var(--thinking-background-color-dark, #1e1a2e);
|
|
807
|
+
border-left-color: var(--thinking-border-color-dark, #a78bfa);
|
|
808
|
+
}
|
|
800
809
|
.dark-theme .reasoning-header,
|
|
801
810
|
.dark-theme .searching-header,
|
|
802
811
|
.dark-theme .reasoning-content,
|
|
@@ -988,6 +997,317 @@ button[data-pending=true]::after {
|
|
|
988
997
|
transform: translateY(0);
|
|
989
998
|
}
|
|
990
999
|
}
|
|
1000
|
+
.word-fade-in {
|
|
1001
|
+
animation: wordFadeIn 150ms ease-out forwards;
|
|
1002
|
+
}
|
|
1003
|
+
@keyframes wordFadeIn {
|
|
1004
|
+
from {
|
|
1005
|
+
opacity: 0;
|
|
1006
|
+
transform: translateY(2px);
|
|
1007
|
+
}
|
|
1008
|
+
to {
|
|
1009
|
+
opacity: 1;
|
|
1010
|
+
transform: translateY(0);
|
|
1011
|
+
}
|
|
1012
|
+
}
|
|
1013
|
+
.streaming-text-chunk {
|
|
1014
|
+
animation: streamingFadeIn var(--fade-duration, 400ms) ease-out forwards;
|
|
1015
|
+
}
|
|
1016
|
+
@keyframes streamingFadeIn {
|
|
1017
|
+
0% {
|
|
1018
|
+
opacity: 0;
|
|
1019
|
+
background-color: rgba(99, 102, 241, 0.2);
|
|
1020
|
+
border-radius: 2px;
|
|
1021
|
+
}
|
|
1022
|
+
30% {
|
|
1023
|
+
opacity: 0.8;
|
|
1024
|
+
background-color: rgba(99, 102, 241, 0.15);
|
|
1025
|
+
}
|
|
1026
|
+
100% {
|
|
1027
|
+
opacity: 1;
|
|
1028
|
+
background-color: transparent;
|
|
1029
|
+
}
|
|
1030
|
+
}
|
|
1031
|
+
.dark-theme .streaming-text-chunk {
|
|
1032
|
+
animation: streamingFadeInDark var(--fade-duration, 400ms) ease-out forwards;
|
|
1033
|
+
}
|
|
1034
|
+
@keyframes streamingFadeInDark {
|
|
1035
|
+
0% {
|
|
1036
|
+
opacity: 0;
|
|
1037
|
+
background-color: rgba(129, 140, 248, 0.25);
|
|
1038
|
+
border-radius: 2px;
|
|
1039
|
+
}
|
|
1040
|
+
30% {
|
|
1041
|
+
opacity: 0.8;
|
|
1042
|
+
background-color: rgba(129, 140, 248, 0.15);
|
|
1043
|
+
}
|
|
1044
|
+
100% {
|
|
1045
|
+
opacity: 1;
|
|
1046
|
+
background-color: transparent;
|
|
1047
|
+
}
|
|
1048
|
+
}
|
|
1049
|
+
.thinking-block {
|
|
1050
|
+
margin-bottom: 12px;
|
|
1051
|
+
border-radius: var(--border-radius, 8px);
|
|
1052
|
+
overflow: hidden;
|
|
1053
|
+
background-color: var(--input-background-color, #f9fafb);
|
|
1054
|
+
border: 1px solid var(--input-border-color, #e5e7eb);
|
|
1055
|
+
transition: all 0.2s ease-out;
|
|
1056
|
+
}
|
|
1057
|
+
.thinking-block--thinking {
|
|
1058
|
+
--thinking-block-accent: #8b5cf6;
|
|
1059
|
+
--thinking-block-bg: #f5f3ff;
|
|
1060
|
+
--thinking-block-text: #5b21b6;
|
|
1061
|
+
background-color: var(--thinking-block-bg);
|
|
1062
|
+
border-color: var(--thinking-block-accent);
|
|
1063
|
+
}
|
|
1064
|
+
.thinking-block--reasoning {
|
|
1065
|
+
--thinking-block-accent: #3b82f6;
|
|
1066
|
+
--thinking-block-bg: #eff6ff;
|
|
1067
|
+
--thinking-block-text: #1d4ed8;
|
|
1068
|
+
background-color: var(--thinking-block-bg);
|
|
1069
|
+
border-color: var(--thinking-block-accent);
|
|
1070
|
+
}
|
|
1071
|
+
.thinking-block--searching {
|
|
1072
|
+
--thinking-block-accent: #22c55e;
|
|
1073
|
+
--thinking-block-bg: #f0fdf4;
|
|
1074
|
+
--thinking-block-text: #166534;
|
|
1075
|
+
background-color: var(--thinking-block-bg);
|
|
1076
|
+
border-color: var(--thinking-block-accent);
|
|
1077
|
+
}
|
|
1078
|
+
.dark-theme .thinking-block--thinking {
|
|
1079
|
+
--thinking-block-bg: #1e1b2e;
|
|
1080
|
+
--thinking-block-accent: #a78bfa;
|
|
1081
|
+
--thinking-block-text: #c4b5fd;
|
|
1082
|
+
}
|
|
1083
|
+
.dark-theme .thinking-block--reasoning {
|
|
1084
|
+
--thinking-block-bg: #0c1929;
|
|
1085
|
+
--thinking-block-accent: #60a5fa;
|
|
1086
|
+
--thinking-block-text: #93c5fd;
|
|
1087
|
+
}
|
|
1088
|
+
.dark-theme .thinking-block--searching {
|
|
1089
|
+
--thinking-block-bg: #052e16;
|
|
1090
|
+
--thinking-block-accent: #4ade80;
|
|
1091
|
+
--thinking-block-text: #86efac;
|
|
1092
|
+
}
|
|
1093
|
+
.thinking-block__header {
|
|
1094
|
+
display: flex;
|
|
1095
|
+
align-items: center;
|
|
1096
|
+
justify-content: space-between;
|
|
1097
|
+
width: 100%;
|
|
1098
|
+
padding: 10px 12px;
|
|
1099
|
+
background: none;
|
|
1100
|
+
border: none;
|
|
1101
|
+
cursor: pointer;
|
|
1102
|
+
font-family: inherit;
|
|
1103
|
+
text-align: left;
|
|
1104
|
+
transition: background-color 0.15s;
|
|
1105
|
+
}
|
|
1106
|
+
.thinking-block__header:hover {
|
|
1107
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
1108
|
+
}
|
|
1109
|
+
.dark-theme .thinking-block__header:hover {
|
|
1110
|
+
background-color: rgba(255, 255, 255, 0.03);
|
|
1111
|
+
}
|
|
1112
|
+
.thinking-block__header-left {
|
|
1113
|
+
display: flex;
|
|
1114
|
+
align-items: center;
|
|
1115
|
+
gap: 8px;
|
|
1116
|
+
}
|
|
1117
|
+
.thinking-block__icon {
|
|
1118
|
+
width: 16px;
|
|
1119
|
+
height: 16px;
|
|
1120
|
+
color: var(--thinking-block-accent, var(--title-text-color));
|
|
1121
|
+
flex-shrink: 0;
|
|
1122
|
+
}
|
|
1123
|
+
.thinking-block__title {
|
|
1124
|
+
font-weight: 600;
|
|
1125
|
+
font-size: 13px;
|
|
1126
|
+
color: var(--thinking-block-text, var(--title-text-color));
|
|
1127
|
+
}
|
|
1128
|
+
.thinking-block__chevron {
|
|
1129
|
+
width: 16px;
|
|
1130
|
+
height: 16px;
|
|
1131
|
+
color: var(--thinking-block-text, var(--title-text-color));
|
|
1132
|
+
opacity: 0.6;
|
|
1133
|
+
transition: transform 0.2s ease-out;
|
|
1134
|
+
flex-shrink: 0;
|
|
1135
|
+
}
|
|
1136
|
+
.thinking-block__chevron--collapsed {
|
|
1137
|
+
transform: rotate(-90deg);
|
|
1138
|
+
}
|
|
1139
|
+
.thinking-block__streaming-indicator {
|
|
1140
|
+
display: flex;
|
|
1141
|
+
align-items: center;
|
|
1142
|
+
gap: 3px;
|
|
1143
|
+
margin-left: 4px;
|
|
1144
|
+
}
|
|
1145
|
+
.thinking-block__streaming-dot {
|
|
1146
|
+
width: 4px;
|
|
1147
|
+
height: 4px;
|
|
1148
|
+
border-radius: 50%;
|
|
1149
|
+
background-color: var(--thinking-block-accent, var(--title-text-color));
|
|
1150
|
+
animation: streamingDotPulse 1.4s ease-in-out infinite;
|
|
1151
|
+
}
|
|
1152
|
+
.thinking-block__streaming-dot:nth-child(1) {
|
|
1153
|
+
animation-delay: 0s;
|
|
1154
|
+
}
|
|
1155
|
+
.thinking-block__streaming-dot:nth-child(2) {
|
|
1156
|
+
animation-delay: 0.2s;
|
|
1157
|
+
}
|
|
1158
|
+
.thinking-block__streaming-dot:nth-child(3) {
|
|
1159
|
+
animation-delay: 0.4s;
|
|
1160
|
+
}
|
|
1161
|
+
@keyframes streamingDotPulse {
|
|
1162
|
+
0%, 60%, 100% {
|
|
1163
|
+
opacity: 0.3;
|
|
1164
|
+
transform: scale(0.8);
|
|
1165
|
+
}
|
|
1166
|
+
30% {
|
|
1167
|
+
opacity: 1;
|
|
1168
|
+
transform: scale(1);
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
.thinking-block__cursor {
|
|
1172
|
+
display: inline;
|
|
1173
|
+
color: var(--thinking-block-accent, var(--ai-chat-thinking-icon));
|
|
1174
|
+
animation: cursorBlink 0.8s step-end infinite;
|
|
1175
|
+
font-weight: bold;
|
|
1176
|
+
margin-left: 1px;
|
|
1177
|
+
}
|
|
1178
|
+
@keyframes cursorBlink {
|
|
1179
|
+
0%, 100% {
|
|
1180
|
+
opacity: 1;
|
|
1181
|
+
}
|
|
1182
|
+
50% {
|
|
1183
|
+
opacity: 0;
|
|
1184
|
+
}
|
|
1185
|
+
}
|
|
1186
|
+
.thinking-in-progress {
|
|
1187
|
+
padding: 12px 16px;
|
|
1188
|
+
margin: 8px 0;
|
|
1189
|
+
background:
|
|
1190
|
+
linear-gradient(
|
|
1191
|
+
135deg,
|
|
1192
|
+
rgba(139, 92, 246, 0.08) 0%,
|
|
1193
|
+
rgba(99, 102, 241, 0.08) 100%);
|
|
1194
|
+
border: 1px solid rgba(139, 92, 246, 0.2);
|
|
1195
|
+
border-radius: var(--border-radius, 8px);
|
|
1196
|
+
animation: thinkingPulse 2s ease-in-out infinite;
|
|
1197
|
+
}
|
|
1198
|
+
.thinking-in-progress__content {
|
|
1199
|
+
display: flex;
|
|
1200
|
+
align-items: center;
|
|
1201
|
+
gap: 8px;
|
|
1202
|
+
}
|
|
1203
|
+
.thinking-in-progress__icon {
|
|
1204
|
+
width: 16px;
|
|
1205
|
+
height: 16px;
|
|
1206
|
+
color: var(--thinking-block-accent, #8b5cf6);
|
|
1207
|
+
animation: iconSpin 2s linear infinite;
|
|
1208
|
+
}
|
|
1209
|
+
.thinking-in-progress__text {
|
|
1210
|
+
color: var(--text-color, #374151);
|
|
1211
|
+
font-size: 14px;
|
|
1212
|
+
font-weight: 500;
|
|
1213
|
+
}
|
|
1214
|
+
.thinking-in-progress__dots {
|
|
1215
|
+
display: flex;
|
|
1216
|
+
gap: 3px;
|
|
1217
|
+
margin-left: 2px;
|
|
1218
|
+
}
|
|
1219
|
+
.thinking-in-progress__dot {
|
|
1220
|
+
width: 4px;
|
|
1221
|
+
height: 4px;
|
|
1222
|
+
border-radius: 50%;
|
|
1223
|
+
background-color: var(--thinking-block-accent, #8b5cf6);
|
|
1224
|
+
animation: dotPulse 1.4s ease-in-out infinite;
|
|
1225
|
+
}
|
|
1226
|
+
.thinking-in-progress__dot:nth-child(1) {
|
|
1227
|
+
animation-delay: 0s;
|
|
1228
|
+
}
|
|
1229
|
+
.thinking-in-progress__dot:nth-child(2) {
|
|
1230
|
+
animation-delay: 0.2s;
|
|
1231
|
+
}
|
|
1232
|
+
.thinking-in-progress__dot:nth-child(3) {
|
|
1233
|
+
animation-delay: 0.4s;
|
|
1234
|
+
}
|
|
1235
|
+
@keyframes thinkingPulse {
|
|
1236
|
+
0%, 100% {
|
|
1237
|
+
opacity: 1;
|
|
1238
|
+
border-color: rgba(139, 92, 246, 0.2);
|
|
1239
|
+
}
|
|
1240
|
+
50% {
|
|
1241
|
+
opacity: 0.85;
|
|
1242
|
+
border-color: rgba(139, 92, 246, 0.4);
|
|
1243
|
+
}
|
|
1244
|
+
}
|
|
1245
|
+
@keyframes iconSpin {
|
|
1246
|
+
from {
|
|
1247
|
+
transform: rotate(0deg);
|
|
1248
|
+
}
|
|
1249
|
+
to {
|
|
1250
|
+
transform: rotate(360deg);
|
|
1251
|
+
}
|
|
1252
|
+
}
|
|
1253
|
+
@keyframes dotPulse {
|
|
1254
|
+
0%, 60%, 100% {
|
|
1255
|
+
opacity: 0.3;
|
|
1256
|
+
transform: scale(0.8);
|
|
1257
|
+
}
|
|
1258
|
+
30% {
|
|
1259
|
+
opacity: 1;
|
|
1260
|
+
transform: scale(1.1);
|
|
1261
|
+
}
|
|
1262
|
+
}
|
|
1263
|
+
.dark-theme .thinking-in-progress {
|
|
1264
|
+
background:
|
|
1265
|
+
linear-gradient(
|
|
1266
|
+
135deg,
|
|
1267
|
+
rgba(139, 92, 246, 0.12) 0%,
|
|
1268
|
+
rgba(99, 102, 241, 0.12) 100%);
|
|
1269
|
+
border-color: rgba(139, 92, 246, 0.3);
|
|
1270
|
+
}
|
|
1271
|
+
.dark-theme .thinking-in-progress__text {
|
|
1272
|
+
color: var(--text-color, #e5e7eb);
|
|
1273
|
+
}
|
|
1274
|
+
.thinking-block__content-wrapper {
|
|
1275
|
+
display: grid;
|
|
1276
|
+
grid-template-rows: 1fr;
|
|
1277
|
+
transition: grid-template-rows 0.2s ease-out;
|
|
1278
|
+
}
|
|
1279
|
+
.thinking-block--collapsed .thinking-block__content-wrapper {
|
|
1280
|
+
grid-template-rows: 0fr;
|
|
1281
|
+
}
|
|
1282
|
+
.thinking-block__content {
|
|
1283
|
+
overflow: hidden;
|
|
1284
|
+
padding: 0 12px 12px 12px;
|
|
1285
|
+
font-size: 13px;
|
|
1286
|
+
line-height: 1.6;
|
|
1287
|
+
color: var(--thinking-block-text, var(--input-text-color));
|
|
1288
|
+
white-space: pre-wrap;
|
|
1289
|
+
word-break: break-word;
|
|
1290
|
+
}
|
|
1291
|
+
.thinking-block--collapsed .thinking-block__content {
|
|
1292
|
+
padding-top: 0;
|
|
1293
|
+
padding-bottom: 0;
|
|
1294
|
+
}
|
|
1295
|
+
.thinking-block:not(.thinking-block--collapsed) {
|
|
1296
|
+
border-left-width: 3px;
|
|
1297
|
+
}
|
|
1298
|
+
.thinking-block {
|
|
1299
|
+
animation: thinkingBlockAppear 0.2s ease-out;
|
|
1300
|
+
}
|
|
1301
|
+
@keyframes thinkingBlockAppear {
|
|
1302
|
+
from {
|
|
1303
|
+
opacity: 0;
|
|
1304
|
+
transform: translateY(-4px);
|
|
1305
|
+
}
|
|
1306
|
+
to {
|
|
1307
|
+
opacity: 1;
|
|
1308
|
+
transform: translateY(0);
|
|
1309
|
+
}
|
|
1310
|
+
}
|
|
991
1311
|
|
|
992
1312
|
/* src/AIAgentPanel.css */
|
|
993
1313
|
:root {
|
|
@@ -4020,3 +4340,314 @@ button[data-pending=true]::after {
|
|
|
4020
4340
|
.dark-theme .ai-chat-email-edit-button:hover {
|
|
4021
4341
|
background-color: #374151;
|
|
4022
4342
|
}
|
|
4343
|
+
.word-fade-in {
|
|
4344
|
+
animation: wordFadeIn 150ms ease-out forwards;
|
|
4345
|
+
}
|
|
4346
|
+
@keyframes wordFadeIn {
|
|
4347
|
+
from {
|
|
4348
|
+
opacity: 0;
|
|
4349
|
+
transform: translateY(2px);
|
|
4350
|
+
}
|
|
4351
|
+
to {
|
|
4352
|
+
opacity: 1;
|
|
4353
|
+
transform: translateY(0);
|
|
4354
|
+
}
|
|
4355
|
+
}
|
|
4356
|
+
.streaming-text-chunk {
|
|
4357
|
+
animation: streamingFadeIn var(--fade-duration, 400ms) ease-out forwards;
|
|
4358
|
+
}
|
|
4359
|
+
@keyframes streamingFadeIn {
|
|
4360
|
+
0% {
|
|
4361
|
+
opacity: 0;
|
|
4362
|
+
background-color: rgba(99, 102, 241, 0.2);
|
|
4363
|
+
border-radius: 2px;
|
|
4364
|
+
}
|
|
4365
|
+
30% {
|
|
4366
|
+
opacity: 0.8;
|
|
4367
|
+
background-color: rgba(99, 102, 241, 0.15);
|
|
4368
|
+
}
|
|
4369
|
+
100% {
|
|
4370
|
+
opacity: 1;
|
|
4371
|
+
background-color: transparent;
|
|
4372
|
+
}
|
|
4373
|
+
}
|
|
4374
|
+
.dark-theme .streaming-text-chunk {
|
|
4375
|
+
animation: streamingFadeInDark var(--fade-duration, 400ms) ease-out forwards;
|
|
4376
|
+
}
|
|
4377
|
+
@keyframes streamingFadeInDark {
|
|
4378
|
+
0% {
|
|
4379
|
+
opacity: 0;
|
|
4380
|
+
background-color: rgba(129, 140, 248, 0.25);
|
|
4381
|
+
border-radius: 2px;
|
|
4382
|
+
}
|
|
4383
|
+
30% {
|
|
4384
|
+
opacity: 0.8;
|
|
4385
|
+
background-color: rgba(129, 140, 248, 0.15);
|
|
4386
|
+
}
|
|
4387
|
+
100% {
|
|
4388
|
+
opacity: 1;
|
|
4389
|
+
background-color: transparent;
|
|
4390
|
+
}
|
|
4391
|
+
}
|
|
4392
|
+
.thinking-block {
|
|
4393
|
+
margin-bottom: 12px;
|
|
4394
|
+
border-radius: 8px;
|
|
4395
|
+
overflow: hidden;
|
|
4396
|
+
background-color: var(--ai-chat-thinking-bg);
|
|
4397
|
+
border: 1px solid var(--ai-chat-thinking-border);
|
|
4398
|
+
transition: all 0.2s ease-out;
|
|
4399
|
+
}
|
|
4400
|
+
.thinking-block--thinking {
|
|
4401
|
+
--thinking-block-accent: #8b5cf6;
|
|
4402
|
+
--thinking-block-bg: #f5f3ff;
|
|
4403
|
+
--thinking-block-text: #5b21b6;
|
|
4404
|
+
background-color: var(--thinking-block-bg);
|
|
4405
|
+
border-color: var(--thinking-block-accent);
|
|
4406
|
+
}
|
|
4407
|
+
.thinking-block--reasoning {
|
|
4408
|
+
--thinking-block-accent: #3b82f6;
|
|
4409
|
+
--thinking-block-bg: #eff6ff;
|
|
4410
|
+
--thinking-block-text: #1d4ed8;
|
|
4411
|
+
background-color: var(--thinking-block-bg);
|
|
4412
|
+
border-color: var(--thinking-block-accent);
|
|
4413
|
+
}
|
|
4414
|
+
.thinking-block--searching {
|
|
4415
|
+
--thinking-block-accent: #22c55e;
|
|
4416
|
+
--thinking-block-bg: #f0fdf4;
|
|
4417
|
+
--thinking-block-text: #166534;
|
|
4418
|
+
background-color: var(--thinking-block-bg);
|
|
4419
|
+
border-color: var(--thinking-block-accent);
|
|
4420
|
+
}
|
|
4421
|
+
.dark-theme .thinking-block--thinking {
|
|
4422
|
+
--thinking-block-bg: #1e1b2e;
|
|
4423
|
+
--thinking-block-accent: #a78bfa;
|
|
4424
|
+
--thinking-block-text: #c4b5fd;
|
|
4425
|
+
}
|
|
4426
|
+
.dark-theme .thinking-block--reasoning {
|
|
4427
|
+
--thinking-block-bg: #0c1929;
|
|
4428
|
+
--thinking-block-accent: #60a5fa;
|
|
4429
|
+
--thinking-block-text: #93c5fd;
|
|
4430
|
+
}
|
|
4431
|
+
.dark-theme .thinking-block--searching {
|
|
4432
|
+
--thinking-block-bg: #052e16;
|
|
4433
|
+
--thinking-block-accent: #4ade80;
|
|
4434
|
+
--thinking-block-text: #86efac;
|
|
4435
|
+
}
|
|
4436
|
+
.thinking-block__header {
|
|
4437
|
+
display: flex;
|
|
4438
|
+
align-items: center;
|
|
4439
|
+
justify-content: space-between;
|
|
4440
|
+
width: 100%;
|
|
4441
|
+
padding: 10px 12px;
|
|
4442
|
+
background: none;
|
|
4443
|
+
border: none;
|
|
4444
|
+
cursor: pointer;
|
|
4445
|
+
font-family: inherit;
|
|
4446
|
+
text-align: left;
|
|
4447
|
+
transition: background-color 0.15s;
|
|
4448
|
+
}
|
|
4449
|
+
.thinking-block__header:hover {
|
|
4450
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
4451
|
+
}
|
|
4452
|
+
.dark-theme .thinking-block__header:hover {
|
|
4453
|
+
background-color: rgba(255, 255, 255, 0.03);
|
|
4454
|
+
}
|
|
4455
|
+
.thinking-block__header-left {
|
|
4456
|
+
display: flex;
|
|
4457
|
+
align-items: center;
|
|
4458
|
+
gap: 8px;
|
|
4459
|
+
}
|
|
4460
|
+
.thinking-block__icon {
|
|
4461
|
+
width: 16px;
|
|
4462
|
+
height: 16px;
|
|
4463
|
+
color: var(--thinking-block-accent, var(--ai-chat-thinking-icon));
|
|
4464
|
+
flex-shrink: 0;
|
|
4465
|
+
}
|
|
4466
|
+
.thinking-block__title {
|
|
4467
|
+
font-weight: 600;
|
|
4468
|
+
font-size: 13px;
|
|
4469
|
+
color: var(--thinking-block-text, var(--ai-chat-thinking-text));
|
|
4470
|
+
}
|
|
4471
|
+
.thinking-block__chevron {
|
|
4472
|
+
width: 16px;
|
|
4473
|
+
height: 16px;
|
|
4474
|
+
color: var(--thinking-block-text, var(--ai-chat-thinking-text));
|
|
4475
|
+
opacity: 0.6;
|
|
4476
|
+
transition: transform 0.2s ease-out;
|
|
4477
|
+
flex-shrink: 0;
|
|
4478
|
+
}
|
|
4479
|
+
.thinking-block__chevron--collapsed {
|
|
4480
|
+
transform: rotate(-90deg);
|
|
4481
|
+
}
|
|
4482
|
+
.thinking-block__streaming-indicator {
|
|
4483
|
+
display: flex;
|
|
4484
|
+
align-items: center;
|
|
4485
|
+
gap: 3px;
|
|
4486
|
+
margin-left: 4px;
|
|
4487
|
+
}
|
|
4488
|
+
.thinking-block__streaming-dot {
|
|
4489
|
+
width: 4px;
|
|
4490
|
+
height: 4px;
|
|
4491
|
+
border-radius: 50%;
|
|
4492
|
+
background-color: var(--thinking-block-accent, var(--ai-chat-thinking-icon));
|
|
4493
|
+
animation: streamingDotPulse 1.4s ease-in-out infinite;
|
|
4494
|
+
}
|
|
4495
|
+
.thinking-block__streaming-dot:nth-child(1) {
|
|
4496
|
+
animation-delay: 0s;
|
|
4497
|
+
}
|
|
4498
|
+
.thinking-block__streaming-dot:nth-child(2) {
|
|
4499
|
+
animation-delay: 0.2s;
|
|
4500
|
+
}
|
|
4501
|
+
.thinking-block__streaming-dot:nth-child(3) {
|
|
4502
|
+
animation-delay: 0.4s;
|
|
4503
|
+
}
|
|
4504
|
+
@keyframes streamingDotPulse {
|
|
4505
|
+
0%, 60%, 100% {
|
|
4506
|
+
opacity: 0.3;
|
|
4507
|
+
transform: scale(0.8);
|
|
4508
|
+
}
|
|
4509
|
+
30% {
|
|
4510
|
+
opacity: 1;
|
|
4511
|
+
transform: scale(1);
|
|
4512
|
+
}
|
|
4513
|
+
}
|
|
4514
|
+
.thinking-block__cursor {
|
|
4515
|
+
display: inline;
|
|
4516
|
+
color: var(--thinking-block-accent, var(--ai-chat-thinking-icon));
|
|
4517
|
+
animation: cursorBlink 0.8s step-end infinite;
|
|
4518
|
+
font-weight: bold;
|
|
4519
|
+
margin-left: 1px;
|
|
4520
|
+
}
|
|
4521
|
+
@keyframes cursorBlink {
|
|
4522
|
+
0%, 100% {
|
|
4523
|
+
opacity: 1;
|
|
4524
|
+
}
|
|
4525
|
+
50% {
|
|
4526
|
+
opacity: 0;
|
|
4527
|
+
}
|
|
4528
|
+
}
|
|
4529
|
+
.thinking-in-progress {
|
|
4530
|
+
padding: 12px 16px;
|
|
4531
|
+
margin: 8px 0;
|
|
4532
|
+
background:
|
|
4533
|
+
linear-gradient(
|
|
4534
|
+
135deg,
|
|
4535
|
+
rgba(139, 92, 246, 0.08) 0%,
|
|
4536
|
+
rgba(99, 102, 241, 0.08) 100%);
|
|
4537
|
+
border: 1px solid rgba(139, 92, 246, 0.2);
|
|
4538
|
+
border-radius: 8px;
|
|
4539
|
+
animation: thinkingPulse 2s ease-in-out infinite;
|
|
4540
|
+
}
|
|
4541
|
+
.thinking-in-progress__content {
|
|
4542
|
+
display: flex;
|
|
4543
|
+
align-items: center;
|
|
4544
|
+
gap: 8px;
|
|
4545
|
+
}
|
|
4546
|
+
.thinking-in-progress__icon {
|
|
4547
|
+
width: 16px;
|
|
4548
|
+
height: 16px;
|
|
4549
|
+
color: var(--ai-chat-thinking-icon, #8b5cf6);
|
|
4550
|
+
animation: iconSpin 2s linear infinite;
|
|
4551
|
+
}
|
|
4552
|
+
.thinking-in-progress__text {
|
|
4553
|
+
color: var(--ai-chat-text, #374151);
|
|
4554
|
+
font-size: 14px;
|
|
4555
|
+
font-weight: 500;
|
|
4556
|
+
}
|
|
4557
|
+
.thinking-in-progress__dots {
|
|
4558
|
+
display: flex;
|
|
4559
|
+
gap: 3px;
|
|
4560
|
+
margin-left: 2px;
|
|
4561
|
+
}
|
|
4562
|
+
.thinking-in-progress__dot {
|
|
4563
|
+
width: 4px;
|
|
4564
|
+
height: 4px;
|
|
4565
|
+
border-radius: 50%;
|
|
4566
|
+
background-color: var(--ai-chat-thinking-icon, #8b5cf6);
|
|
4567
|
+
animation: dotPulse 1.4s ease-in-out infinite;
|
|
4568
|
+
}
|
|
4569
|
+
.thinking-in-progress__dot:nth-child(1) {
|
|
4570
|
+
animation-delay: 0s;
|
|
4571
|
+
}
|
|
4572
|
+
.thinking-in-progress__dot:nth-child(2) {
|
|
4573
|
+
animation-delay: 0.2s;
|
|
4574
|
+
}
|
|
4575
|
+
.thinking-in-progress__dot:nth-child(3) {
|
|
4576
|
+
animation-delay: 0.4s;
|
|
4577
|
+
}
|
|
4578
|
+
@keyframes thinkingPulse {
|
|
4579
|
+
0%, 100% {
|
|
4580
|
+
opacity: 1;
|
|
4581
|
+
border-color: rgba(139, 92, 246, 0.2);
|
|
4582
|
+
}
|
|
4583
|
+
50% {
|
|
4584
|
+
opacity: 0.85;
|
|
4585
|
+
border-color: rgba(139, 92, 246, 0.4);
|
|
4586
|
+
}
|
|
4587
|
+
}
|
|
4588
|
+
@keyframes iconSpin {
|
|
4589
|
+
from {
|
|
4590
|
+
transform: rotate(0deg);
|
|
4591
|
+
}
|
|
4592
|
+
to {
|
|
4593
|
+
transform: rotate(360deg);
|
|
4594
|
+
}
|
|
4595
|
+
}
|
|
4596
|
+
@keyframes dotPulse {
|
|
4597
|
+
0%, 60%, 100% {
|
|
4598
|
+
opacity: 0.3;
|
|
4599
|
+
transform: scale(0.8);
|
|
4600
|
+
}
|
|
4601
|
+
30% {
|
|
4602
|
+
opacity: 1;
|
|
4603
|
+
transform: scale(1.1);
|
|
4604
|
+
}
|
|
4605
|
+
}
|
|
4606
|
+
.dark-theme .thinking-in-progress {
|
|
4607
|
+
background:
|
|
4608
|
+
linear-gradient(
|
|
4609
|
+
135deg,
|
|
4610
|
+
rgba(139, 92, 246, 0.12) 0%,
|
|
4611
|
+
rgba(99, 102, 241, 0.12) 100%);
|
|
4612
|
+
border-color: rgba(139, 92, 246, 0.3);
|
|
4613
|
+
}
|
|
4614
|
+
.dark-theme .thinking-in-progress__text {
|
|
4615
|
+
color: var(--ai-chat-text, #e5e7eb);
|
|
4616
|
+
}
|
|
4617
|
+
.thinking-block__content-wrapper {
|
|
4618
|
+
display: grid;
|
|
4619
|
+
grid-template-rows: 1fr;
|
|
4620
|
+
transition: grid-template-rows 0.2s ease-out;
|
|
4621
|
+
}
|
|
4622
|
+
.thinking-block--collapsed .thinking-block__content-wrapper {
|
|
4623
|
+
grid-template-rows: 0fr;
|
|
4624
|
+
}
|
|
4625
|
+
.thinking-block__content {
|
|
4626
|
+
overflow: hidden;
|
|
4627
|
+
padding: 0 12px 12px 12px;
|
|
4628
|
+
font-size: 13px;
|
|
4629
|
+
line-height: 1.6;
|
|
4630
|
+
color: var(--thinking-block-text, var(--ai-chat-thinking-text));
|
|
4631
|
+
white-space: pre-wrap;
|
|
4632
|
+
word-break: break-word;
|
|
4633
|
+
}
|
|
4634
|
+
.thinking-block--collapsed .thinking-block__content {
|
|
4635
|
+
padding-top: 0;
|
|
4636
|
+
padding-bottom: 0;
|
|
4637
|
+
}
|
|
4638
|
+
.thinking-block:not(.thinking-block--collapsed) {
|
|
4639
|
+
border-left-width: 3px;
|
|
4640
|
+
}
|
|
4641
|
+
.thinking-block {
|
|
4642
|
+
animation: thinkingBlockAppear 0.2s ease-out;
|
|
4643
|
+
}
|
|
4644
|
+
@keyframes thinkingBlockAppear {
|
|
4645
|
+
from {
|
|
4646
|
+
opacity: 0;
|
|
4647
|
+
transform: translateY(-4px);
|
|
4648
|
+
}
|
|
4649
|
+
to {
|
|
4650
|
+
opacity: 1;
|
|
4651
|
+
transform: translateY(0);
|
|
4652
|
+
}
|
|
4653
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -571,4 +571,32 @@ interface DialogFooterProps {
|
|
|
571
571
|
}
|
|
572
572
|
declare const DialogFooter: React__default.FC<DialogFooterProps>;
|
|
573
573
|
|
|
574
|
-
|
|
574
|
+
interface WordFadeInProps {
|
|
575
|
+
content: string;
|
|
576
|
+
className?: string;
|
|
577
|
+
/** Animation duration in ms */
|
|
578
|
+
animationDuration?: number;
|
|
579
|
+
}
|
|
580
|
+
/**
|
|
581
|
+
* WordFadeIn - A component that applies fade-in animation to new content chunks
|
|
582
|
+
* as they arrive during streaming. Each new chunk fades in smoothly.
|
|
583
|
+
*/
|
|
584
|
+
declare const WordFadeIn: React__default.FC<WordFadeInProps>;
|
|
585
|
+
|
|
586
|
+
type ThinkingBlockType = 'thinking' | 'reasoning' | 'searching';
|
|
587
|
+
interface ThinkingBlockProps {
|
|
588
|
+
type: ThinkingBlockType;
|
|
589
|
+
content: string;
|
|
590
|
+
isStreaming: boolean;
|
|
591
|
+
isCollapsed: boolean;
|
|
592
|
+
onToggleCollapse: () => void;
|
|
593
|
+
/** Optional custom title override */
|
|
594
|
+
title?: string;
|
|
595
|
+
}
|
|
596
|
+
/**
|
|
597
|
+
* ThinkingBlock - A collapsible block for displaying thinking/reasoning/searching content
|
|
598
|
+
* with streaming support. Content streams in naturally as it arrives.
|
|
599
|
+
*/
|
|
600
|
+
declare const ThinkingBlock: React__default.FC<ThinkingBlockProps>;
|
|
601
|
+
|
|
602
|
+
export { AIAgentPanel, type AIAgentPanelProps, _default as AIChatPanel, type AIChatPanelProps, type APIConversationSummary, type AgentContext, type AgentMetadata, AgentPanel, type AgentPanelProps, type AgentProfile, Button, type ButtonProps, ChatPanel, type ChatPanelProps, type ContextSection$1 as ContextSection, type Conversation, type ConversationGroup, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, Input, type InputProps, type MCPServer, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, ThinkingBlock, type ThinkingBlockProps, type ThinkingBlockType, Tooltip, type TooltipProps, WordFadeIn, type WordFadeInProps, useAgentRegistry, useConversationStore };
|