@akropolys/kiku 1.2.4 → 1.4.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.d.mts +59 -4
- package/dist/index.d.ts +59 -4
- package/dist/index.js +968 -559
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +939 -532
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +407 -1
- package/dist/styles.css.map +1 -1
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -713,7 +713,9 @@
|
|
|
713
713
|
}
|
|
714
714
|
.hsk-cb-user-msg {
|
|
715
715
|
display: flex;
|
|
716
|
-
|
|
716
|
+
flex-direction: column;
|
|
717
|
+
align-items: flex-end;
|
|
718
|
+
gap: 6px;
|
|
717
719
|
margin-bottom: 20px;
|
|
718
720
|
}
|
|
719
721
|
.hsk-cb-user-bubble {
|
|
@@ -1042,6 +1044,149 @@
|
|
|
1042
1044
|
color: var(--hsk-chat-muted, #bbb);
|
|
1043
1045
|
margin-top: 10px;
|
|
1044
1046
|
}
|
|
1047
|
+
.hsk-cb-img-strip {
|
|
1048
|
+
display: flex;
|
|
1049
|
+
flex-wrap: wrap;
|
|
1050
|
+
gap: 8px;
|
|
1051
|
+
padding: 0 0 10px 0;
|
|
1052
|
+
animation: hsk-msg-in .2s ease-out both;
|
|
1053
|
+
}
|
|
1054
|
+
.hsk-cb-img-thumb-wrap {
|
|
1055
|
+
position: relative;
|
|
1056
|
+
width: 72px;
|
|
1057
|
+
height: 72px;
|
|
1058
|
+
flex-shrink: 0;
|
|
1059
|
+
}
|
|
1060
|
+
.hsk-cb-img-thumb {
|
|
1061
|
+
width: 100%;
|
|
1062
|
+
height: 100%;
|
|
1063
|
+
object-fit: cover;
|
|
1064
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1065
|
+
border: 1.5px solid var(--hsk-chat-divide, rgba(0,0,0,.12));
|
|
1066
|
+
display: block;
|
|
1067
|
+
}
|
|
1068
|
+
.hsk-cb-img-thumb-remove {
|
|
1069
|
+
position: absolute;
|
|
1070
|
+
top: -6px;
|
|
1071
|
+
right: -6px;
|
|
1072
|
+
width: 18px;
|
|
1073
|
+
height: 18px;
|
|
1074
|
+
border-radius: 50%;
|
|
1075
|
+
background: #ef4444;
|
|
1076
|
+
color: #fff;
|
|
1077
|
+
border: none;
|
|
1078
|
+
font-size: 12px;
|
|
1079
|
+
line-height: 1;
|
|
1080
|
+
display: flex;
|
|
1081
|
+
align-items: center;
|
|
1082
|
+
justify-content: center;
|
|
1083
|
+
cursor: pointer;
|
|
1084
|
+
padding: 0;
|
|
1085
|
+
font-family: inherit;
|
|
1086
|
+
transition: transform .1s;
|
|
1087
|
+
}
|
|
1088
|
+
.hsk-cb-img-thumb-remove:hover {
|
|
1089
|
+
transform: scale(1.15);
|
|
1090
|
+
}
|
|
1091
|
+
.hsk-cb-attach-btn {
|
|
1092
|
+
width: 32px;
|
|
1093
|
+
height: 32px;
|
|
1094
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1095
|
+
border: 1.5px solid var(--hsk-chat-divide, rgba(0,0,0,.12));
|
|
1096
|
+
background: none;
|
|
1097
|
+
color: var(--hsk-chat-muted, #888);
|
|
1098
|
+
cursor: pointer;
|
|
1099
|
+
display: flex;
|
|
1100
|
+
align-items: center;
|
|
1101
|
+
justify-content: center;
|
|
1102
|
+
flex-shrink: 0;
|
|
1103
|
+
transition:
|
|
1104
|
+
border-color .15s,
|
|
1105
|
+
color .15s,
|
|
1106
|
+
background .15s;
|
|
1107
|
+
font-family: inherit;
|
|
1108
|
+
}
|
|
1109
|
+
.hsk-cb-attach-btn:hover {
|
|
1110
|
+
border-color: var(--hsk-primary);
|
|
1111
|
+
color: var(--hsk-primary);
|
|
1112
|
+
background: rgba(255, 106, 51, .06);
|
|
1113
|
+
}
|
|
1114
|
+
.hsk-cb-attach-btn:disabled {
|
|
1115
|
+
opacity: .35;
|
|
1116
|
+
cursor: not-allowed;
|
|
1117
|
+
}
|
|
1118
|
+
.hsk-cb-mic-btn {
|
|
1119
|
+
position: relative;
|
|
1120
|
+
width: 32px;
|
|
1121
|
+
height: 32px;
|
|
1122
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1123
|
+
border: 1.5px solid var(--hsk-chat-divide, rgba(0,0,0,.12));
|
|
1124
|
+
background: none;
|
|
1125
|
+
color: var(--hsk-chat-muted, #888);
|
|
1126
|
+
cursor: pointer;
|
|
1127
|
+
display: flex;
|
|
1128
|
+
align-items: center;
|
|
1129
|
+
justify-content: center;
|
|
1130
|
+
flex-shrink: 0;
|
|
1131
|
+
transition:
|
|
1132
|
+
border-color .15s,
|
|
1133
|
+
color .15s,
|
|
1134
|
+
background .15s;
|
|
1135
|
+
font-family: inherit;
|
|
1136
|
+
overflow: visible;
|
|
1137
|
+
}
|
|
1138
|
+
.hsk-cb-mic-btn:hover {
|
|
1139
|
+
border-color: var(--hsk-primary);
|
|
1140
|
+
color: var(--hsk-primary);
|
|
1141
|
+
background: rgba(255, 106, 51, .06);
|
|
1142
|
+
}
|
|
1143
|
+
.hsk-cb-mic-btn:disabled {
|
|
1144
|
+
opacity: .35;
|
|
1145
|
+
cursor: not-allowed;
|
|
1146
|
+
}
|
|
1147
|
+
.hsk-cb-mic-btn--listening {
|
|
1148
|
+
border-color: #ef4444;
|
|
1149
|
+
color: #ef4444;
|
|
1150
|
+
background: rgba(239, 68, 68, .08);
|
|
1151
|
+
}
|
|
1152
|
+
.hsk-cb-mic-btn--processing {
|
|
1153
|
+
border-color: var(--hsk-primary);
|
|
1154
|
+
color: var(--hsk-primary);
|
|
1155
|
+
opacity: .7;
|
|
1156
|
+
}
|
|
1157
|
+
.hsk-cb-mic-pulse {
|
|
1158
|
+
position: absolute;
|
|
1159
|
+
inset: -4px;
|
|
1160
|
+
border-radius: inherit;
|
|
1161
|
+
border: 2px solid #ef4444;
|
|
1162
|
+
animation: hsk-mic-pulse 1.1s ease-out infinite;
|
|
1163
|
+
pointer-events: none;
|
|
1164
|
+
}
|
|
1165
|
+
@keyframes hsk-mic-pulse {
|
|
1166
|
+
0% {
|
|
1167
|
+
transform: scale(1);
|
|
1168
|
+
opacity: .8;
|
|
1169
|
+
}
|
|
1170
|
+
100% {
|
|
1171
|
+
transform: scale(1.55);
|
|
1172
|
+
opacity: 0;
|
|
1173
|
+
}
|
|
1174
|
+
}
|
|
1175
|
+
.hsk-cb-user-imgs {
|
|
1176
|
+
display: flex;
|
|
1177
|
+
flex-wrap: wrap;
|
|
1178
|
+
gap: 6px;
|
|
1179
|
+
justify-content: flex-end;
|
|
1180
|
+
max-width: 72%;
|
|
1181
|
+
}
|
|
1182
|
+
.hsk-cb-user-img-thumb {
|
|
1183
|
+
width: 80px;
|
|
1184
|
+
height: 80px;
|
|
1185
|
+
object-fit: cover;
|
|
1186
|
+
border-radius: var(--hsk-border-radius, 0px);
|
|
1187
|
+
border: 2px solid rgba(255, 255, 255, .3);
|
|
1188
|
+
display: block;
|
|
1189
|
+
}
|
|
1045
1190
|
.hsk-cb-error {
|
|
1046
1191
|
margin: 8px 0;
|
|
1047
1192
|
padding: 10px 14px;
|
|
@@ -4153,5 +4298,266 @@
|
|
|
4153
4298
|
background: #1a1a1b !important;
|
|
4154
4299
|
}
|
|
4155
4300
|
}
|
|
4301
|
+
.kiku-voice-btn {
|
|
4302
|
+
position: relative;
|
|
4303
|
+
display: inline-flex;
|
|
4304
|
+
align-items: center;
|
|
4305
|
+
justify-content: center;
|
|
4306
|
+
width: 36px;
|
|
4307
|
+
height: 36px;
|
|
4308
|
+
border-radius: 50%;
|
|
4309
|
+
border: none;
|
|
4310
|
+
background: transparent;
|
|
4311
|
+
color: var(--hsk-text-muted, #888);
|
|
4312
|
+
cursor: pointer;
|
|
4313
|
+
transition: color 0.2s, background 0.2s;
|
|
4314
|
+
flex-shrink: 0;
|
|
4315
|
+
}
|
|
4316
|
+
.kiku-voice-btn:hover {
|
|
4317
|
+
background: var(--hsk-hover-bg, rgba(0,0,0,0.06));
|
|
4318
|
+
color: var(--hsk-primary, #6c47ff);
|
|
4319
|
+
}
|
|
4320
|
+
.kiku-voice-btn--active {
|
|
4321
|
+
color: #ef4444;
|
|
4322
|
+
background: rgba(239, 68, 68, 0.1);
|
|
4323
|
+
}
|
|
4324
|
+
.kiku-voice-btn:disabled {
|
|
4325
|
+
opacity: 0.4;
|
|
4326
|
+
cursor: not-allowed;
|
|
4327
|
+
}
|
|
4328
|
+
.kiku-voice-ripple {
|
|
4329
|
+
position: absolute;
|
|
4330
|
+
inset: -4px;
|
|
4331
|
+
border-radius: 50%;
|
|
4332
|
+
border: 2px solid #ef4444;
|
|
4333
|
+
animation: kiku-voice-pulse 1.2s ease-out infinite;
|
|
4334
|
+
pointer-events: none;
|
|
4335
|
+
}
|
|
4336
|
+
@keyframes kiku-voice-pulse {
|
|
4337
|
+
0% {
|
|
4338
|
+
transform: scale(1);
|
|
4339
|
+
opacity: 1;
|
|
4340
|
+
}
|
|
4341
|
+
100% {
|
|
4342
|
+
transform: scale(1.6);
|
|
4343
|
+
opacity: 0;
|
|
4344
|
+
}
|
|
4345
|
+
}
|
|
4346
|
+
.kiku-vs-btn {
|
|
4347
|
+
display: inline-flex;
|
|
4348
|
+
align-items: center;
|
|
4349
|
+
justify-content: center;
|
|
4350
|
+
width: 36px;
|
|
4351
|
+
height: 36px;
|
|
4352
|
+
border-radius: 50%;
|
|
4353
|
+
border: none;
|
|
4354
|
+
background: transparent;
|
|
4355
|
+
color: var(--hsk-text-muted, #888);
|
|
4356
|
+
cursor: pointer;
|
|
4357
|
+
transition: color 0.2s, background 0.2s;
|
|
4358
|
+
flex-shrink: 0;
|
|
4359
|
+
}
|
|
4360
|
+
.kiku-vs-btn:hover {
|
|
4361
|
+
background: var(--hsk-hover-bg, rgba(0,0,0,0.06));
|
|
4362
|
+
color: var(--hsk-primary, #6c47ff);
|
|
4363
|
+
}
|
|
4364
|
+
.kiku-vs-btn--loading {
|
|
4365
|
+
opacity: 0.6;
|
|
4366
|
+
pointer-events: none;
|
|
4367
|
+
}
|
|
4368
|
+
@keyframes kiku-vs-rotate {
|
|
4369
|
+
from {
|
|
4370
|
+
transform: rotate(0deg);
|
|
4371
|
+
}
|
|
4372
|
+
to {
|
|
4373
|
+
transform: rotate(360deg);
|
|
4374
|
+
}
|
|
4375
|
+
}
|
|
4376
|
+
.kiku-vs-spin {
|
|
4377
|
+
animation: kiku-vs-rotate 0.8s linear infinite;
|
|
4378
|
+
}
|
|
4379
|
+
.kiku-style-tags {
|
|
4380
|
+
display: flex;
|
|
4381
|
+
flex-wrap: wrap;
|
|
4382
|
+
gap: 4px;
|
|
4383
|
+
margin-top: 6px;
|
|
4384
|
+
}
|
|
4385
|
+
.kiku-style-tag {
|
|
4386
|
+
display: inline-flex;
|
|
4387
|
+
align-items: center;
|
|
4388
|
+
gap: 3px;
|
|
4389
|
+
padding: 2px 8px;
|
|
4390
|
+
border-radius: 99px;
|
|
4391
|
+
background: var(--hsk-primary-alpha, rgba(108,71,255,0.1));
|
|
4392
|
+
color: var(--hsk-primary, #6c47ff);
|
|
4393
|
+
font-size: 11px;
|
|
4394
|
+
font-weight: 500;
|
|
4395
|
+
white-space: nowrap;
|
|
4396
|
+
}
|
|
4397
|
+
.kiku-vs-preview-banner {
|
|
4398
|
+
display: flex;
|
|
4399
|
+
align-items: center;
|
|
4400
|
+
gap: 10px;
|
|
4401
|
+
padding: 10px 14px;
|
|
4402
|
+
background: var(--hsk-surface, #f9f9f9);
|
|
4403
|
+
border-radius: 10px;
|
|
4404
|
+
margin-bottom: 12px;
|
|
4405
|
+
border: 1px solid var(--hsk-border, #e5e5e5);
|
|
4406
|
+
}
|
|
4407
|
+
.kiku-vs-preview-img {
|
|
4408
|
+
width: 44px;
|
|
4409
|
+
height: 44px;
|
|
4410
|
+
object-fit: cover;
|
|
4411
|
+
border-radius: 8px;
|
|
4412
|
+
flex-shrink: 0;
|
|
4413
|
+
}
|
|
4414
|
+
.kiku-vs-preview-info {
|
|
4415
|
+
flex: 1;
|
|
4416
|
+
min-width: 0;
|
|
4417
|
+
}
|
|
4418
|
+
.kiku-vs-preview-label {
|
|
4419
|
+
font-size: 11px;
|
|
4420
|
+
color: var(--hsk-text-muted, #888);
|
|
4421
|
+
margin-bottom: 2px;
|
|
4422
|
+
}
|
|
4423
|
+
.kiku-vs-preview-palette {
|
|
4424
|
+
font-size: 13px;
|
|
4425
|
+
font-weight: 600;
|
|
4426
|
+
color: var(--hsk-text, #1a1a1a);
|
|
4427
|
+
white-space: nowrap;
|
|
4428
|
+
overflow: hidden;
|
|
4429
|
+
text-overflow: ellipsis;
|
|
4430
|
+
}
|
|
4431
|
+
.kiku-voice-btn {
|
|
4432
|
+
position: relative;
|
|
4433
|
+
display: inline-flex;
|
|
4434
|
+
align-items: center;
|
|
4435
|
+
justify-content: center;
|
|
4436
|
+
width: 36px;
|
|
4437
|
+
height: 36px;
|
|
4438
|
+
border-radius: 50%;
|
|
4439
|
+
border: none;
|
|
4440
|
+
background: transparent;
|
|
4441
|
+
color: var(--hsk-text-muted, #888);
|
|
4442
|
+
cursor: pointer;
|
|
4443
|
+
transition: color 0.2s, background 0.2s;
|
|
4444
|
+
flex-shrink: 0;
|
|
4445
|
+
}
|
|
4446
|
+
.kiku-voice-btn:hover {
|
|
4447
|
+
background: var(--hsk-hover-bg, rgba(0,0,0,0.06));
|
|
4448
|
+
color: var(--hsk-primary, #ff6a33);
|
|
4449
|
+
}
|
|
4450
|
+
.kiku-voice-btn--active {
|
|
4451
|
+
color: #ef4444;
|
|
4452
|
+
background: rgba(239, 68, 68, 0.1);
|
|
4453
|
+
}
|
|
4454
|
+
.kiku-voice-btn:disabled {
|
|
4455
|
+
opacity: 0.4;
|
|
4456
|
+
cursor: not-allowed;
|
|
4457
|
+
}
|
|
4458
|
+
.kiku-voice-ripple {
|
|
4459
|
+
position: absolute;
|
|
4460
|
+
inset: -4px;
|
|
4461
|
+
border-radius: 50%;
|
|
4462
|
+
border: 2px solid #ef4444;
|
|
4463
|
+
animation: kiku-voice-pulse 1.2s ease-out infinite;
|
|
4464
|
+
pointer-events: none;
|
|
4465
|
+
}
|
|
4466
|
+
@keyframes kiku-voice-pulse {
|
|
4467
|
+
0% {
|
|
4468
|
+
transform: scale(1);
|
|
4469
|
+
opacity: 1;
|
|
4470
|
+
}
|
|
4471
|
+
100% {
|
|
4472
|
+
transform: scale(1.7);
|
|
4473
|
+
opacity: 0;
|
|
4474
|
+
}
|
|
4475
|
+
}
|
|
4476
|
+
.kiku-vs-btn {
|
|
4477
|
+
display: inline-flex;
|
|
4478
|
+
align-items: center;
|
|
4479
|
+
justify-content: center;
|
|
4480
|
+
width: 36px;
|
|
4481
|
+
height: 36px;
|
|
4482
|
+
border-radius: 50%;
|
|
4483
|
+
border: none;
|
|
4484
|
+
background: transparent;
|
|
4485
|
+
color: var(--hsk-text-muted, #888);
|
|
4486
|
+
cursor: pointer;
|
|
4487
|
+
transition: color 0.2s, background 0.2s;
|
|
4488
|
+
flex-shrink: 0;
|
|
4489
|
+
}
|
|
4490
|
+
.kiku-vs-btn:hover {
|
|
4491
|
+
background: var(--hsk-hover-bg, rgba(0,0,0,0.06));
|
|
4492
|
+
color: var(--hsk-primary, #ff6a33);
|
|
4493
|
+
}
|
|
4494
|
+
.kiku-vs-btn--loading {
|
|
4495
|
+
opacity: 0.6;
|
|
4496
|
+
pointer-events: none;
|
|
4497
|
+
}
|
|
4498
|
+
@keyframes kiku-vs-rotate {
|
|
4499
|
+
from {
|
|
4500
|
+
transform: rotate(0deg);
|
|
4501
|
+
}
|
|
4502
|
+
to {
|
|
4503
|
+
transform: rotate(360deg);
|
|
4504
|
+
}
|
|
4505
|
+
}
|
|
4506
|
+
.kiku-vs-spin {
|
|
4507
|
+
animation: kiku-vs-rotate 0.8s linear infinite;
|
|
4508
|
+
}
|
|
4509
|
+
.kiku-style-tags {
|
|
4510
|
+
display: flex;
|
|
4511
|
+
flex-wrap: wrap;
|
|
4512
|
+
gap: 4px;
|
|
4513
|
+
margin-top: 6px;
|
|
4514
|
+
}
|
|
4515
|
+
.kiku-style-tag {
|
|
4516
|
+
display: inline-flex;
|
|
4517
|
+
align-items: center;
|
|
4518
|
+
gap: 3px;
|
|
4519
|
+
padding: 2px 8px;
|
|
4520
|
+
border-radius: 99px;
|
|
4521
|
+
background: rgba(255, 106, 51, 0.1);
|
|
4522
|
+
color: var(--hsk-primary, #ff6a33);
|
|
4523
|
+
font-size: 11px;
|
|
4524
|
+
font-weight: 500;
|
|
4525
|
+
white-space: nowrap;
|
|
4526
|
+
}
|
|
4527
|
+
.kiku-vs-preview-banner {
|
|
4528
|
+
display: flex;
|
|
4529
|
+
align-items: center;
|
|
4530
|
+
gap: 10px;
|
|
4531
|
+
padding: 10px 14px;
|
|
4532
|
+
background: var(--hsk-surface, #f9f9f9);
|
|
4533
|
+
border-radius: 10px;
|
|
4534
|
+
margin-bottom: 12px;
|
|
4535
|
+
border: 1px solid var(--hsk-border, #e5e5e5);
|
|
4536
|
+
animation: hsk-msg-in 0.22s ease-out both;
|
|
4537
|
+
}
|
|
4538
|
+
.kiku-vs-preview-img {
|
|
4539
|
+
width: 44px;
|
|
4540
|
+
height: 44px;
|
|
4541
|
+
object-fit: cover;
|
|
4542
|
+
border-radius: 8px;
|
|
4543
|
+
flex-shrink: 0;
|
|
4544
|
+
}
|
|
4545
|
+
.kiku-vs-preview-info {
|
|
4546
|
+
flex: 1;
|
|
4547
|
+
min-width: 0;
|
|
4548
|
+
}
|
|
4549
|
+
.kiku-vs-preview-label {
|
|
4550
|
+
font-size: 11px;
|
|
4551
|
+
color: var(--hsk-text-muted, #888);
|
|
4552
|
+
margin-bottom: 2px;
|
|
4553
|
+
}
|
|
4554
|
+
.kiku-vs-preview-palette {
|
|
4555
|
+
font-size: 13px;
|
|
4556
|
+
font-weight: 600;
|
|
4557
|
+
color: var(--hsk-text, #1a1a1a);
|
|
4558
|
+
white-space: nowrap;
|
|
4559
|
+
overflow: hidden;
|
|
4560
|
+
text-overflow: ellipsis;
|
|
4561
|
+
}
|
|
4156
4562
|
}
|
|
4157
4563
|
/*# sourceMappingURL=styles.css.map */
|