@chat21/chat21-web-widget 5.1.33 → 5.1.34-rc1

package/src/chat21-core/utils/utils-message.ts

@@ -6,9 +6,11 @@ import {
   MESSAGE_TYPE_MINE,
   MESSAGE_TYPE_OTHERS,
   MAX_WIDTH_IMAGES,
+  MIN_WIDTH_IMAGES,
   INFO_MESSAGE_TYPE,
   CHANNEL_TYPE,
-  MESSAGE_TYPE_PRIVATE
+  MESSAGE_TYPE_PRIVATE,
+  TYPE_MSG_URL_PREVIEW
 } from '../../chat21-core/utils/constants';
 /** */
 export function isCarousel(message: any) {
@@ -48,6 +50,20 @@ export function isAudio(message: any) {
   return false;
 }
 
+export function isJsonSources(message: any) {
+  if (message && message.type && message.type === 'url_preview') {
+    return true;
+  }
+  return false;
+}
+
+export function isAudioTTS(message: any) {
+  if (message && message.type && message.type === 'tts' && message.metadata && message.metadata.src && message.metadata.type.includes('audio') ) {
+    return true;
+  }
+  return false;
+}
+
 /** */
 export function isInfo(message: any) {
     if (message && message.attributes && (message.attributes.subtype === 'info' || message.attributes.subtype === 'info/support')) {
@@ -91,10 +107,19 @@ export function isSameSender(messages, senderId, index):boolean{
 }
 
 export function isLastMessage(messages, idMessage):boolean {
-  if (idMessage === messages[messages.length - 1].uid) {
-    return true;
-  }
-  return false;
+  // url_preview messages are auxiliary (citations card): they must not "steal"
+  // last-message status from the preceding interactive message, otherwise its
+  // text/action buttons would disappear as soon as a url_preview arrives.
+  const interactive = (messages || []).filter((m: any) => !isUrlPreviewMessage(m));
+  const last = interactive[interactive.length - 1] || messages[messages.length - 1];
+  return !!last && idMessage === last.uid;
+}
+
+function isUrlPreviewMessage(m: any): boolean {
+  if (!m) return false;
+  return m.type === TYPE_MSG_URL_PREVIEW
+    || m.metadata?.type === TYPE_MSG_URL_PREVIEW
+    || m.attributes?.type === TYPE_MSG_URL_PREVIEW;
 }
 
 export function isFirstMessage(messages, senderId, index):boolean{
@@ -314,7 +339,21 @@ export function commandToMessage(msg: MessageModel, conversation: ConversationMo
   message.type = msg['type']
   message.isSender = isSender(message.sender, currentUserId)
   message.attributes = { ...conversation.attributes, ...msg['attributes']}
-  
 
   return message as MessageModel
 }
+
+export function calcImageSize(metadata: any): { width: number; height: number } {
+  const size = { width: metadata.width, height: metadata.height };
+  if (!metadata.width) return size;
+  if (metadata.width <= 55) {
+    const ratio = metadata.width / metadata.height;
+    size.width = MIN_WIDTH_IMAGES;
+    size.height = MIN_WIDTH_IMAGES / ratio;
+  } else if (metadata.width > MAX_WIDTH_IMAGES) {
+    const ratio = metadata.width / metadata.height;
+    size.width = MAX_WIDTH_IMAGES;
+    size.height = MAX_WIDTH_IMAGES / ratio;
+  }
+  return size;
+}

package/src/chat21-core/utils/utils.ts

@@ -773,6 +773,11 @@ export function isAllowedUrlInText(text: string, allowedUrls: string[]) {
   return nonWhitelistedDomains.length === 0;
 }
 
+// function extractUrls(text: string): string[] {
+//   const urlRegex = /https?:\/\/[^\s]+/g;
+//   return text.match(urlRegex) || [];
+// }
+
 function extractUrls(text: string): string[] {
   // Rileva URL con o senza protocollo (http/https)
   const urlRegex = /\b((https?:\/\/)?(www\.)?[a-z0-9.-]+\.[a-z]{2,})(\/[^\s]*)?/gi;
@@ -787,5 +792,3 @@ function extractUrls(text: string): string[] {
 }
 
 
-
-

package/src/widget-config-template.json

@@ -24,5 +24,8 @@
     "dashboardUrl": "${DASHBOARD_URL}",
     "authPersistence": "${AUTH_PERSISTENCE}",
     "enbedJs": "${ENBED_JS}",
-    "brandSrc": "${BRAND_SRC}"
+    "brandSrc": "${BRAND_SRC}",
+    "closeChatInConversation": "${CLOSE_CHAT_IN_CONVERSATION}",
+    "voiceProxyWsUrl": "${VOICE_PROXY_WS_URL}",
+    "voiceProxyApiBaseUrl": "${VOICE_PROXY_API_BASE_URL}"
 }

package/src/widget-config.json

@@ -24,6 +24,9 @@
     "dashboardUrl": "http://localhost:4500/",
     "authPersistence": "LOCAL",
     "enbedJs": true,
-    "brandSrc": "${BRAND_SRC}"
+    "brandSrc": "${BRAND_SRC}",
+    "voiceProxyWsUrl": "wss://localhost:3000/speech/ws/voice",
+    "voiceProxyApiBaseUrl": "https://localhost:3000/speech/api",
+    "closeChatInConversation": false
     
 }

package/tests/widget-form-rich.spec.ts

@@ -0,0 +1,67 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const BASE_QUERY =
+  'tiledesk_projectid=65c5f17ab4e95a0013a0181a&tiledesk_isLogEnabled=true&tiledesk_open=true';
+
+function widgetFrame(page: Page) {
+  return page.frameLocator('#tiledeskiframe');
+}
+
+test.describe('Widget TWP — form / testi / allegati / reparti', () => {
+  test.beforeEach(({ page }) => {
+    page.setDefaultNavigationTimeout(120_000);
+  });
+
+  test('dopo nuova conversazione compare conversazione, prechat o selezione reparto', async ({ page }) => {
+    await page.goto(`/assets/twp/index.html?${BASE_QUERY}`);
+    await expect(page.locator('#tiledeskiframe')).toBeAttached({ timeout: 120_000 });
+    const w = widgetFrame(page);
+    await w.locator('#c21-app-list-conversations .c21-button-primary').first().click({ timeout: 120_000 });
+    await expect(
+      w.locator('chat-conversation, chat-selection-department, chat-prechat-form').first(),
+    ).toBeVisible({ timeout: 120_000 });
+  });
+
+  test('se compare la modale reparti, elenco pulsanti e click impostano flusso', async ({ page }) => {
+    await page.goto(`/assets/twp/index.html?${BASE_QUERY}`);
+    const w = widgetFrame(page);
+    await w.locator('#c21-app-list-conversations .c21-button-primary').first().click({ timeout: 120_000 });
+    const panel = w.locator('#chat21-selection-department');
+    try {
+      await panel.waitFor({ state: 'visible', timeout: 25_000 });
+    } catch {
+      test.skip();
+    }
+    await expect(panel).toHaveAttribute('role', 'dialog');
+    const deptButtons = panel.locator('.c21-button-department');
+    await expect(deptButtons.first()).toBeVisible();
+    const count = await deptButtons.count();
+    expect(count).toBeGreaterThan(0);
+    await deptButtons.first().click();
+    await expect(w.locator('chat-conversation').first()).toBeAttached({ timeout: 120_000 });
+  });
+
+  test('con prechat attivato da URL può comparire textarea o form (best-effort)', async ({ page }) => {
+    await page.goto(`/assets/twp/index.html?${BASE_QUERY}&tiledesk_preChatForm=true`);
+    const w = widgetFrame(page);
+    await w.locator('#c21-app-list-conversations .c21-button-primary').first().click({ timeout: 120_000 });
+    const prechat = w.locator('chat-prechat-form');
+    const textarea = w.locator('textarea#c21-prechat-notes, textarea.form-control, chat-form-textarea textarea');
+    await expect(prechat.or(textarea.first())).toBeVisible({ timeout: 120_000 });
+  });
+
+  test('messaggio in conversazione: area testo o bubble visibile nel frame', async ({ page }) => {
+    await page.goto(`/assets/twp/index.html?${BASE_QUERY}`);
+    const w = widgetFrame(page);
+    await w.locator('#c21-app-list-conversations .c21-button-primary').first().click({ timeout: 120_000 });
+    await expect(
+      w.locator('chat-conversation, chat-prechat-form, chat-selection-department').first(),
+    ).toBeVisible({ timeout: 120_000 });
+    const conv = w.locator('chat-conversation');
+    if (await conv.isVisible().catch(() => false)) {
+      await expect(
+        conv.locator('.message_innerhtml, chat-text, textarea, [contenteditable]').first(),
+      ).toBeVisible({ timeout: 60_000 });
+    }
+  });
+});

package/tests/widget-index-dev-settings.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Pagina dev: campi testo + pulsante "Test this setting" chiamano onClick* e scrivono su window.tiledeskSettings.
+ * Verifica che i valori fake restino coerenti con quanto impostato nel codice inline della pagina.
+ */
+test.describe('index-dev.html tiledeskSettings da input', () => {
+  test.beforeEach(({ page }) => {
+    page.setDefaultNavigationTimeout(120_000);
+  });
+
+  test('marginX / marginY / welcomeTitle aggiornano window.tiledeskSettings', async ({ page }) => {
+    await page.goto(
+      'http://127.0.0.1:4203/assets/twp/index-dev.html?tiledesk_projectid=65c5f17ab4e95a0013a0181a&tiledesk_isLogEnabled=true',
+    );
+    const out = await page.evaluate(() => {
+      const mx = document.querySelector('#marginX') as HTMLInputElement;
+      const my = document.querySelector('#marginY') as HTMLInputElement;
+      const wt = document.querySelector('#welcomeTitle') as HTMLInputElement;
+      mx.value = '11px';
+      my.value = '22px';
+      wt.value = 'Titolo fake';
+      (window as any).onClickMarginX();
+      (window as any).onClickMarginY();
+      (window as any).onClickWelcomeTitle();
+      const s = (window as any).tiledeskSettings;
+      return { marginX: s.marginX, marginY: s.marginY, welcomeTitle: s.welcomeTitle };
+    });
+    expect(out.marginX).toBe('11px');
+    expect(out.marginY).toBe('22px');
+    expect(out.welcomeTitle).toBe('Titolo fake');
+  });
+
+  test('calloutTitle / widgetTitle / departmentID aggiornano tiledeskSettings', async ({ page }) => {
+    await page.goto(
+      'http://127.0.0.1:4203/assets/twp/index-dev.html?tiledesk_projectid=65c5f17ab4e95a0013a0181a&tiledesk_isLogEnabled=true',
+    );
+    const out = await page.evaluate(() => {
+      (document.querySelector('#calloutTitle') as HTMLInputElement).value = 'Callout FAKE';
+      (document.querySelector('#widgetTitle') as HTMLInputElement).value = 'Widget FAKE';
+      (document.querySelector('#departmentID') as HTMLInputElement).value = 'dep-xyz';
+      (window as any).onClickCalloutTitle();
+      (window as any).onClickWidgetTitle();
+      (window as any).onClickDepartmentId();
+      const s = (window as any).tiledeskSettings;
+      return { calloutTitle: s.calloutTitle, widgetTitle: s.widgetTitle, departmentID: s.departmentID };
+    });
+    expect(out.calloutTitle).toBe('Callout FAKE');
+    expect(out.widgetTitle).toBe('Widget FAKE');
+    expect(out.departmentID).toBe('dep-xyz');
+  });
+});

package/tests/widget-twp-iframe.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect, type Page } from '@playwright/test';
+
+/**
+ * Pagina host: `src/assets/twp/index.html` carica `launch.js` e crea `#tiledeskiframe`
+ * (vedi `src/launch.js`). L’app Angular gira nel frame; `tiledesk_open=true` viene letto
+ * dal parent via `GlobalSettingsService` (`tiledesk_open` → `globals.isOpen`).
+ */
+const TWP_QUERY =
+  'tiledesk_projectid=65c5f17ab4e95a0013a0181a&tiledesk_isLogEnabled=true&tiledesk_open=true';
+
+function widgetFrame(page: Page) {
+  return page.frameLocator('#tiledeskiframe');
+}
+
+test.describe('Widget TWP (host + iframe)', () => {
+  test.beforeEach(({ page }) => {
+    page.setDefaultNavigationTimeout(120_000);
+  });
+
+  test('mostra home e lista conversazioni nel frame con widget già aperto', async ({ page }) => {
+    await page.goto(`/assets/twp/index.html?${TWP_QUERY}`);
+    await expect(page.locator('#tiledeskiframe')).toBeAttached({ timeout: 120_000 });
+    const w = widgetFrame(page);
+    await expect(w.locator('#chat21-home-component')).toBeVisible({ timeout: 120_000 });
+    await expect(w.locator('#c21-app-list-conversations')).toBeVisible();
+  });
+
+  test('click su CTA primaria apre conversazione, reparto o prechat', async ({ page }) => {
+    await page.goto(`/assets/twp/index.html?${TWP_QUERY}`);
+    await expect(page.locator('#tiledeskiframe')).toBeAttached({ timeout: 120_000 });
+    const w = widgetFrame(page);
+    const primary = w.locator('#c21-app-list-conversations .c21-button-primary').first();
+    await expect(primary).toBeVisible({ timeout: 120_000 });
+    await primary.click();
+    await expect(
+      w.locator('chat-conversation, chat-selection-department, chat-prechat-form').first(),
+    ).toBeVisible({ timeout: 120_000 });
+  });
+});

package/tsconfig.json

@@ -23,6 +23,11 @@
       "dom"
     ],
     "resolveJsonModule": true,
+    "paths": {
+      "onnxruntime-web/wasm": [
+        "src/app/shims/onnxruntime-web-wasm.ts"
+      ]
+    }
   },
   "skipLibCheck": true,
   "angularCompilerOptions": {