@luckydraw/cumulus 0.27.37 → 0.27.39
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.
|
@@ -411,6 +411,29 @@
|
|
|
411
411
|
'}',
|
|
412
412
|
'.cumulus-attach-chip-remove:hover { color: #ff6666; }',
|
|
413
413
|
|
|
414
|
+
/* Interaction chip tray (blex deferred interactions) */
|
|
415
|
+
'.cumulus-chip-tray {',
|
|
416
|
+
' display: flex; flex-direction: row; flex-wrap: wrap;',
|
|
417
|
+
' gap: 0.35em; max-width: 78ch; align-self: center; width: 100%;',
|
|
418
|
+
' padding-bottom: 0.15em;',
|
|
419
|
+
'}',
|
|
420
|
+
'.cumulus-chip-tray:empty { display: none; }',
|
|
421
|
+
'.cumulus-interaction-chip {',
|
|
422
|
+
' display: inline-flex; align-items: center; gap: 0.3em;',
|
|
423
|
+
' background: #2a3a4a; border: 1px solid #3a5a7a;',
|
|
424
|
+
' border-radius: 1em; padding: 0.2em 0.55em;',
|
|
425
|
+
' font-size: 0.8em; color: #bcd; cursor: default;',
|
|
426
|
+
' max-width: 20em; overflow: hidden; white-space: nowrap;',
|
|
427
|
+
'}',
|
|
428
|
+
'.cumulus-interaction-chip-icon { flex-shrink: 0; }',
|
|
429
|
+
'.cumulus-interaction-chip-label { overflow: hidden; text-overflow: ellipsis; }',
|
|
430
|
+
'.cumulus-interaction-chip-dismiss {',
|
|
431
|
+
' flex-shrink: 0; background: none; border: none;',
|
|
432
|
+
' color: #789; font-size: 0.9em; cursor: pointer;',
|
|
433
|
+
' padding: 0 0.1em; line-height: 1;',
|
|
434
|
+
'}',
|
|
435
|
+
'.cumulus-interaction-chip-dismiss:hover { color: #ff6666; }',
|
|
436
|
+
|
|
414
437
|
/* Input row (attach btn + textarea + send btn) */
|
|
415
438
|
'.cumulus-input-row {',
|
|
416
439
|
' display: flex; flex-direction: row;',
|
|
@@ -1157,7 +1180,7 @@
|
|
|
1157
1180
|
* After innerHTML is set, find blex placeholder divs and render blocks.
|
|
1158
1181
|
* Returns array of BlockHandles for lifecycle management.
|
|
1159
1182
|
*/
|
|
1160
|
-
function renderBlexBlocks(container, blocks, inputEl) {
|
|
1183
|
+
function renderBlexBlocks(container, blocks, inputEl, chipCtx) {
|
|
1161
1184
|
if (!blocks || !blocks.length || typeof window.Blex === 'undefined') return;
|
|
1162
1185
|
var handles = [];
|
|
1163
1186
|
var placeholders = container.querySelectorAll('[data-blex-idx]');
|
|
@@ -1202,16 +1225,54 @@
|
|
|
1202
1225
|
window.Blex.renderBlock(contentBlock, ph)
|
|
1203
1226
|
.then(function (handle) {
|
|
1204
1227
|
handles.push(handle);
|
|
1205
|
-
// Wire interaction →
|
|
1228
|
+
// Wire interaction → immediate send or deferred chip tray
|
|
1206
1229
|
if (handle && handle.onInteraction && inputEl) {
|
|
1207
1230
|
handle.onInteraction(function (interaction) {
|
|
1208
|
-
if (interaction
|
|
1231
|
+
if (!interaction || !interaction.serialized) return;
|
|
1232
|
+
// Immediate interactions: inject into input (existing behavior)
|
|
1233
|
+
if (interaction.immediate !== false || !chipCtx) {
|
|
1209
1234
|
inputEl.value =
|
|
1210
1235
|
(inputEl.value ? inputEl.value + '\n' : '') + interaction.serialized;
|
|
1211
1236
|
inputEl.focus();
|
|
1212
|
-
// Trigger input event so send button updates
|
|
1213
1237
|
inputEl.dispatchEvent(new Event('input', { bubbles: true }));
|
|
1238
|
+
return;
|
|
1214
1239
|
}
|
|
1240
|
+
// Deferred interaction: add chip to tray
|
|
1241
|
+
var chip = document.createElement('span');
|
|
1242
|
+
chip.className = 'cumulus-interaction-chip';
|
|
1243
|
+
chip.setAttribute('data-testid', 'webchat-interaction-chip');
|
|
1244
|
+
if (interaction.icon) {
|
|
1245
|
+
var iconSpan = document.createElement('span');
|
|
1246
|
+
iconSpan.className = 'cumulus-interaction-chip-icon';
|
|
1247
|
+
iconSpan.textContent = interaction.icon;
|
|
1248
|
+
chip.appendChild(iconSpan);
|
|
1249
|
+
}
|
|
1250
|
+
var labelSpan = document.createElement('span');
|
|
1251
|
+
labelSpan.className = 'cumulus-interaction-chip-label';
|
|
1252
|
+
labelSpan.textContent = interaction.summary || interaction.serialized;
|
|
1253
|
+
labelSpan.setAttribute('title', interaction.serialized);
|
|
1254
|
+
chip.appendChild(labelSpan);
|
|
1255
|
+
if (interaction.revertable) {
|
|
1256
|
+
var dismiss = document.createElement('button');
|
|
1257
|
+
dismiss.className = 'cumulus-interaction-chip-dismiss';
|
|
1258
|
+
dismiss.textContent = '\u00d7';
|
|
1259
|
+
dismiss.setAttribute('title', 'Remove');
|
|
1260
|
+
dismiss.addEventListener('click', function () {
|
|
1261
|
+
// Revert the interaction in the block
|
|
1262
|
+
if (handle.revertInteraction) {
|
|
1263
|
+
handle.revertInteraction(interaction);
|
|
1264
|
+
}
|
|
1265
|
+
// Remove chip from tray and pending list
|
|
1266
|
+
var idx = chipCtx.pending.indexOf(interaction);
|
|
1267
|
+
if (idx !== -1) chipCtx.pending.splice(idx, 1);
|
|
1268
|
+
chip.parentNode && chip.parentNode.removeChild(chip);
|
|
1269
|
+
inputEl.dispatchEvent(new Event('input', { bubbles: true }));
|
|
1270
|
+
});
|
|
1271
|
+
chip.appendChild(dismiss);
|
|
1272
|
+
}
|
|
1273
|
+
chipCtx.tray.appendChild(chip);
|
|
1274
|
+
chipCtx.pending.push(interaction);
|
|
1275
|
+
inputEl.dispatchEvent(new Event('input', { bubbles: true }));
|
|
1215
1276
|
});
|
|
1216
1277
|
}
|
|
1217
1278
|
})
|
|
@@ -1729,6 +1790,12 @@
|
|
|
1729
1790
|
attachStrip.style.display = 'none';
|
|
1730
1791
|
inputArea.appendChild(attachStrip);
|
|
1731
1792
|
|
|
1793
|
+
var chipTray = document.createElement('div');
|
|
1794
|
+
chipTray.className = 'cumulus-chip-tray';
|
|
1795
|
+
chipTray.setAttribute('data-testid', 'webchat-chip-tray');
|
|
1796
|
+
inputArea.appendChild(chipTray);
|
|
1797
|
+
var pendingChips = [];
|
|
1798
|
+
|
|
1732
1799
|
var inputRow = document.createElement('div');
|
|
1733
1800
|
inputRow.className = 'cumulus-input-row';
|
|
1734
1801
|
|
|
@@ -1860,7 +1927,13 @@
|
|
|
1860
1927
|
var blexInputEl = panelEl
|
|
1861
1928
|
? panelEl.querySelector('.cumulus-input, .cumulus-standalone-input')
|
|
1862
1929
|
: null;
|
|
1863
|
-
|
|
1930
|
+
var blexChipTray = panelEl
|
|
1931
|
+
? panelEl.querySelector('.cumulus-chip-tray')
|
|
1932
|
+
: null;
|
|
1933
|
+
var blexChipCtx = blexChipTray
|
|
1934
|
+
? { tray: blexChipTray, pending: blexChipTray._pendingChips || (blexChipTray._pendingChips = []) }
|
|
1935
|
+
: null;
|
|
1936
|
+
renderBlexBlocks(el, _blexBlocks, blexInputEl, blexChipCtx);
|
|
1864
1937
|
});
|
|
1865
1938
|
}
|
|
1866
1939
|
}
|
|
@@ -2315,7 +2388,17 @@
|
|
|
2315
2388
|
}
|
|
2316
2389
|
|
|
2317
2390
|
function sendMessage() {
|
|
2318
|
-
|
|
2391
|
+
// Prepend deferred interaction chips to the message
|
|
2392
|
+
var chipTrayEl = panel.querySelector('.cumulus-chip-tray');
|
|
2393
|
+
var chipPending = chipTrayEl && chipTrayEl._pendingChips ? chipTrayEl._pendingChips : [];
|
|
2394
|
+
var chipPrefix = '';
|
|
2395
|
+
if (chipPending.length > 0) {
|
|
2396
|
+
chipPrefix = chipPending.map(function (c) { return c.serialized; }).join('\n');
|
|
2397
|
+
chipPending.length = 0;
|
|
2398
|
+
if (chipTrayEl) chipTrayEl.innerHTML = '';
|
|
2399
|
+
}
|
|
2400
|
+
var rawText = input.value.trim();
|
|
2401
|
+
var text = chipPrefix ? (chipPrefix + (rawText ? '\n' + rawText : '')) : rawText;
|
|
2319
2402
|
|
|
2320
2403
|
// Interjection: user sends while streaming
|
|
2321
2404
|
if (streaming) {
|
|
@@ -3148,6 +3231,12 @@
|
|
|
3148
3231
|
attachStrip.style.display = 'none';
|
|
3149
3232
|
inputArea.appendChild(attachStrip);
|
|
3150
3233
|
|
|
3234
|
+
// Interaction chip tray (blex deferred interactions)
|
|
3235
|
+
var chipTray = document.createElement('div');
|
|
3236
|
+
chipTray.className = 'cumulus-chip-tray';
|
|
3237
|
+
chipTray.setAttribute('data-testid', 'webchat-chip-tray');
|
|
3238
|
+
inputArea.appendChild(chipTray);
|
|
3239
|
+
|
|
3151
3240
|
// Input row
|
|
3152
3241
|
var inputRow = document.createElement('div');
|
|
3153
3242
|
inputRow.className = 'cumulus-input-row';
|
|
@@ -3254,7 +3343,13 @@
|
|
|
3254
3343
|
var blexInputEl = panelEl
|
|
3255
3344
|
? panelEl.querySelector('.cumulus-input, .cumulus-standalone-input')
|
|
3256
3345
|
: null;
|
|
3257
|
-
|
|
3346
|
+
var blexChipTray = panelEl
|
|
3347
|
+
? panelEl.querySelector('.cumulus-chip-tray')
|
|
3348
|
+
: null;
|
|
3349
|
+
var blexChipCtx = blexChipTray
|
|
3350
|
+
? { tray: blexChipTray, pending: blexChipTray._pendingChips || (blexChipTray._pendingChips = []) }
|
|
3351
|
+
: null;
|
|
3352
|
+
renderBlexBlocks(el, _blexBlocks, blexInputEl, blexChipCtx);
|
|
3258
3353
|
});
|
|
3259
3354
|
}
|
|
3260
3355
|
}
|
|
@@ -3604,7 +3699,16 @@
|
|
|
3604
3699
|
|
|
3605
3700
|
// ── Send message for this panel ──
|
|
3606
3701
|
function sendPanelMessage() {
|
|
3607
|
-
|
|
3702
|
+
// Prepend deferred interaction chips to the message
|
|
3703
|
+
var chipPending = chipTray._pendingChips || [];
|
|
3704
|
+
var chipPrefix = '';
|
|
3705
|
+
if (chipPending.length > 0) {
|
|
3706
|
+
chipPrefix = chipPending.map(function (c) { return c.serialized; }).join('\n');
|
|
3707
|
+
chipPending.length = 0;
|
|
3708
|
+
chipTray.innerHTML = '';
|
|
3709
|
+
}
|
|
3710
|
+
var rawText = inputEl.value.trim();
|
|
3711
|
+
var text = chipPrefix ? (chipPrefix + (rawText ? '\n' + rawText : '')) : rawText;
|
|
3608
3712
|
|
|
3609
3713
|
// ── Interjection: user sends while streaming ──
|
|
3610
3714
|
// Freeze partial response, send the new message — server aborts the old stream
|