@chat21/chat21-web-widget 5.1.26 → 5.1.30-rc1

package/src/app/component/launcher-button/launcher-button.component.html

@@ -1,7 +1,7 @@
 <!-- tabindex="000"-->
 
 <button aflauncherbutton #aflauncherbutton id="c21-launcher-button" class="c21-button-clean scale-in-center" 
-    *ngIf="g.isLogged == true && g.isOpen == false" 
+    *ngIf="g.isOpen == false" 
     [ngClass]="{'c21-align-left' : g.align === 'left', 'c21-align-right' : g.align !== 'left'}"
     [ngStyle]="{ 'background-color': g.baloonImage? null: g.themeColor, 'bottom': g.marginY+'px!important', 'left':(g.align==='left')?g.marginX+'px!important':'', 'right':(g.align==='right')?g.marginX+'px!important':'', 'width': g.launcherWidth, 'height': g.launcherHeight, 'border-radius': g.baloonShape}"
     (click)="openCloseWidget()"

package/src/app/component/launcher-button/launcher-button.component.ts

@@ -67,8 +67,9 @@ export class LauncherButtonComponent implements OnInit, AfterViewInit {
       // this.g.isOpen = !this.g.isOpen;
       // this.g.setIsOpen(!this.g.isOpen);
       // this.appStorageService.setItem('isOpen', this.g.isOpen);
-      this.onButtonClicked.emit( this.g.isOpen );
-    }
+     
+    } 
+    this.onButtonClicked.emit( this.g.isOpen );
   }
 
 }

package/src/app/providers/global-settings.service.ts

@@ -324,6 +324,8 @@ export class GlobalSettingsService {
         }
         /** set button colors */
         this.setButtonColors();
+        // Detect mobile before loading persisted values so storage policies can depend on it.
+        this.globals.setParameter('isMobile', detectIfIsMobile(this.globals.windowContext));
 
         this.setVariableFromStorage(this.globals);
         this.setVariablesFromSettings(this.globals);
@@ -464,6 +466,10 @@ export class GlobalSettingsService {
         try {
             const variables = response.project.widget;
             if (typeof variables !== 'undefined') {
+                const hasCalloutTimer = Object.prototype.hasOwnProperty.call(variables, 'calloutTimer');
+                const hasCalloutTitle = Object.prototype.hasOwnProperty.call(variables, 'calloutTitle');
+                const hasCalloutMsg = Object.prototype.hasOwnProperty.call(variables, 'calloutMsg');
+                this.globals.hasCalloutInWidgetConfig = hasCalloutTimer || hasCalloutTitle || hasCalloutMsg;
                 for (const key of Object.keys(variables)) {
                     if (key === 'align' && variables[key] === 'left') {
                         const divWidgetContainer = globals.windowContext.document.getElementById('tiledeskdiv');
@@ -1124,6 +1130,12 @@ export class GlobalSettingsService {
         if (TEMP !== undefined) {
             globals.size = TEMP;
         } 
+
+        TEMP = tiledeskSettings['closeChatInConversation'];
+        // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > closeChatInConversation:: ', TEMP]);
+        if (TEMP !== undefined) {
+            globals.closeChatInConversation = (TEMP === true) ? true : false;
+        }
     }
 
     /**
@@ -1870,6 +1882,11 @@ export class GlobalSettingsService {
         if (TEMP) {
             globals.size = TEMP;
         }
+
+        TEMP = getParameterByName(windowContext, 'tiledesk_closeChatInConversation');
+        if (TEMP) {
+            globals.closeChatInConversation = stringToBoolean(TEMP);
+        }
         
     }
 
@@ -1882,6 +1899,15 @@ export class GlobalSettingsService {
     setVariableFromStorage(globals: Globals) {
         this.logger.debug('[GLOBAL-SET] setVariableFromStorage :::::::: SET VARIABLE ---------->', Object.keys(globals));
         for (const key of Object.keys(globals)) {
+            if (globals.isMobile === true && key === 'size') {
+                // On mobile we always open fullscreen, so legacy/persisted widget size must be ignored.
+                try {
+                    this.appStorageService.removeItem('size');
+                } catch (e) {
+                    this.logger.warn('[GLOBAL-SET] setVariableFromStorage > cannot remove size from storage', e);
+                }
+                continue;
+            }
             const val = this.appStorageService.getItem(key);
             // this.logger.debug('[GLOBAL-SET] setVariableFromStorage SET globals KEY ---------->', key);
             // this.logger.debug('[GLOBAL-SET] setVariableFromStorage SET globals VAL ---------->', val);

package/src/app/providers/translator.service.ts

@@ -302,6 +302,7 @@ export class TranslatorService {
       'CLOSED',
       'LABEL_PREVIEW',
       'MAX_ATTACHMENT',
+      'MAX_ATTACHMENT_ERROR',
       'EMOJI'
     ];
 
@@ -358,6 +359,7 @@ export class TranslatorService {
       globals.LABEL_PREVIEW = res['LABEL_PREVIEW']
       globals.LABEL_ERROR_FIELD_REQUIRED= res['LABEL_ERROR_FIELD_REQUIRED']
       globals.MAX_ATTACHMENT = res['MAX_ATTACHMENT']
+      globals.MAX_ATTACHMENT_ERROR = res['MAX_ATTACHMENT_ERROR']
       globals.EMOJI = res['EMOJI']
       
       

package/src/app/sass/_variables.scss

@@ -36,6 +36,7 @@
     
     --chat-footer-height: 64px;
     --chat-footer-logo-height: 30px;
+    --chat-footer-close-button-height: 30px;
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;
     --chat-footer-color: #1a1a1a;

package/src/app/utils/conversation-sender-classifier.ts

@@ -0,0 +1,116 @@
+import { MessageModel } from 'src/chat21-core/models/message';
+
+export type SenderKind = 'bot' | 'human' | 'system' | 'unknown';
+export type Confidence = 'high' | 'medium' | 'low';
+
+export interface SenderClassification {
+  kind: SenderKind;
+  confidence: Confidence;
+  reasons: string[];
+}
+
+export interface ConversationBadgeState {
+  /** Kind of the latest server message (including system). */
+  latestServerMessageKind: SenderKind;
+  /** Kind of the latest non-system server responder, used for Bot/Umano badge. */
+  latestNonSystemResponderKind: 'bot' | 'human' | null;
+  showBadge: boolean;
+  badgeText: string;
+}
+
+export function classifyMessageSender(msg: MessageModel | null | undefined): SenderClassification {
+  if (!msg) return { kind: 'unknown', confidence: 'low', reasons: ['msg=null'] };
+
+  const sender = (msg as any).sender;
+  const senderFullname = (msg as any).sender_fullname;
+  const senderFullnameLower = (senderFullname || '').toString().toLowerCase();
+
+  if (sender === 'system' || senderFullnameLower === 'system') {
+    return { kind: 'system', confidence: 'high', reasons: ['sender=system'] };
+  }
+
+  const chatbotId = (msg as any)?.attributes?.flowAttributes?.chatbot_id;
+  if (chatbotId) {
+    return { kind: 'bot', confidence: 'high', reasons: ['flowAttributes.chatbot_id'] };
+  }
+
+  if (sender && String(sender).includes('bot_')) {
+    return { kind: 'bot', confidence: 'medium', reasons: ['sender includes bot_'] };
+  }
+
+  if (senderFullnameLower.includes('bot')) {
+    return { kind: 'bot', confidence: 'low', reasons: ['sender_fullname includes bot'] };
+  }
+
+  return { kind: 'human', confidence: 'low', reasons: ['fallback human'] };
+}
+
+export function isHumanHandoffSystemMessage(msg: MessageModel | null | undefined, clientSenderId?: string): boolean {
+  if (!msg) return false;
+  if ((msg as any).sender !== 'system') return false;
+
+  const attrs: any = (msg as any).attributes || {};
+  const key = attrs?.messagelabel?.key;
+  const memberId = attrs?.messagelabel?.parameters?.member_id;
+
+  if (attrs?.subtype !== 'info') return false;
+  if (attrs?.updateconversation !== true) return false;
+  if (key !== 'MEMBER_JOINED_GROUP') return false;
+  if (!memberId || typeof memberId !== 'string') return false;
+
+  // Exclude system/bot/self joins.
+  if (memberId === 'system') return false;
+  if (memberId.startsWith('bot_')) return false;
+  if (clientSenderId && memberId === clientSenderId) return false;
+
+  return true;
+}
+
+function getTimestamp(msg: MessageModel | null | undefined): number {
+  const ts = msg && (msg as any).timestamp;
+  const n = ts != null ? Number(ts) : 0;
+  return Number.isFinite(n) ? n : 0;
+}
+
+function maxByTimestamp<T extends MessageModel>(items: T[]): T {
+  return items.reduce((acc, cur) => (getTimestamp(cur) >= getTimestamp(acc) ? cur : acc), items[0]);
+}
+
+function isSystemMessage(msg: MessageModel | null | undefined): boolean {
+  if (!msg) return false;
+  const sender = (msg as any).sender;
+  const senderFullname = (msg as any).sender_fullname;
+  const senderFullnameLower = (senderFullname || '').toString().toLowerCase();
+  return sender === 'system' || senderFullnameLower === 'system';
+}
+
+export function computeConversationBadgeState(messages: MessageModel[], clientSenderId?: string): ConversationBadgeState {
+  const msgs = messages || [];
+  const serverMsgs = msgs.filter(m => !!m && (!clientSenderId || (m as any).sender !== clientSenderId));
+
+  const latestServerMsg = serverMsgs.length > 0 ? maxByTimestamp(serverMsgs) : null;
+  const latestServerMessageKind = classifyMessageSender(latestServerMsg).kind;
+
+  let latestNonSystemResponderKind: 'bot' | 'human' | null = null;
+
+  // Priority rule: if the latest server message is a system handoff to a human, force "human".
+  if (isHumanHandoffSystemMessage(latestServerMsg, clientSenderId)) {
+    latestNonSystemResponderKind = 'human';
+  } else {
+    // Otherwise, use the latest non-system server message (by timestamp) as responder.
+    const nonSystemServerMsgs = serverMsgs.filter(m => !isSystemMessage(m));
+    const latestNonSystem = nonSystemServerMsgs.length > 0 ? maxByTimestamp(nonSystemServerMsgs) : null;
+    const kind = classifyMessageSender(latestNonSystem).kind;
+    if (kind === 'bot' || kind === 'human') {
+      latestNonSystemResponderKind = kind;
+    }
+  }
+
+  return {
+    latestServerMessageKind,
+    latestNonSystemResponderKind,
+    showBadge: latestNonSystemResponderKind !== null,
+    badgeText: latestNonSystemResponderKind === 'bot' ? 'Bot' : (latestNonSystemResponderKind === 'human' ? 'Umano' : ''),
+  };
+}
+

package/src/app/utils/globals.ts

@@ -222,10 +222,13 @@ export class Globals {
 
   allowedOnSpecificUrl: boolean // *******  new ********
   allowedOnSpecificUrlList: Array<string> // *******  new ********
+  hasCalloutInWidgetConfig: boolean; // *******  new ********
 
   fontFamilySource: string; // *******  new ********
 
   size: 'min' | 'max' | 'top'; // *******  new ********
+
+  closeChatInConversation: boolean; // *******  new ********
   constructor(
   ) { }
 
@@ -247,7 +250,7 @@ export class Globals {
 
     // ============ BEGIN: SET EXTERNAL PARAMETERS ==============//
     this.baseLocation = 'https://widget.tiledesk.com/v2';
-    this.autoStart = true;
+    this.autoStart = false;
     /** start Authentication and startUI */
     this.startHidden = false;
     /** show/hide all widget -> js call: showAllWidget */
@@ -438,9 +441,12 @@ export class Globals {
     this.allowedOnSpecificUrl = false
     /** set a list of pattern url able to load the widget */
     this.allowedOnSpecificUrlList = [];
+    /** true when server widget config has `callout` node */
+    this.hasCalloutInWidgetConfig = false;
     /** set widget size from 3 different positions: min, max, top */
     this.size = 'min';
-
+    /** enable to close the chat in conversation */
+    this.closeChatInConversation = false;
     // ============ END: SET EXTERNAL PARAMETERS ==============//
 
 
@@ -610,13 +616,35 @@ export class Globals {
     }
 
 
-    //customize position for 'tiledeskdiv' for mobile
+    // On mobile, force fullscreen while open regardless of stored `size`.
     if(isOpen && this.isMobile && divTiledeskWidget){
+      divTiledeskWidget.classList.remove('min-size')
+      divTiledeskWidget.classList.remove('max-size')
+      divTiledeskWidget.classList.remove('top-size')
+      divTiledeskWidget.classList.add('fullscreen')
+      divTiledeskWidget.style.left = '0px'
       divTiledeskWidget.style.right = '0px'
+      divTiledeskWidget.style.top = '0px'
       divTiledeskWidget.style.bottom = '0px'
+      divTiledeskWidget.style.width = '100%'
+      divTiledeskWidget.style.height = '100%'
+      divTiledeskWidget.style.maxWidth = 'none'
+      divTiledeskWidget.style.maxHeight = 'none'
     } else if(!isOpen && this.isMobile && divTiledeskWidget){
-      divTiledeskWidget.style.bottom = this.marginY
-      this.align === 'left'?  divTiledeskWidget.style.left = this.mobileMarginX : divTiledeskWidget.style.right = this.mobileMarginX; 
+      divTiledeskWidget.classList.remove('fullscreen')
+      divTiledeskWidget.style.removeProperty('top')
+      divTiledeskWidget.style.removeProperty('width')
+      divTiledeskWidget.style.removeProperty('height')
+      divTiledeskWidget.style.removeProperty('max-width')
+      divTiledeskWidget.style.removeProperty('max-height')
+      divTiledeskWidget.style.bottom = this.mobileMarginY
+      if (this.align === 'left') {
+        divTiledeskWidget.style.left = this.mobileMarginX
+        divTiledeskWidget.style.removeProperty('right')
+      } else {
+        divTiledeskWidget.style.right = this.mobileMarginX
+        divTiledeskWidget.style.removeProperty('left')
+      }
     }
 
     //customize position for 'tiledeskdiv' for desktop if fullscreenMode is not active

package/src/assets/i18n/en.json

@@ -16,6 +16,7 @@
     "GUEST_LABEL": "Guest",
     "ALL_AGENTS_OFFLINE_LABEL": "All operators are offline at the moment",
     "LABEL_LOADING": "Loading...",
+    "LABEL_THINKING": "thinking",
     "CALLOUT_TITLE_PLACEHOLDER": "🖐 Need Help?",
     "CALLOUT_MSG_PLACEHOLDER": "Click here and start chatting with us!",
     "CUSTOMER_SATISFACTION": "Customer satisfaction",
@@ -96,5 +97,6 @@
     "EMOJI_NOT_ELLOWED":"Emoji not allowed",
     "DOMAIN_NOT_ALLOWED":"URL contains a non-allowed domain",
     "MAX_ATTACHMENT": "Max allowed size {{FILE_SIZE_LIMIT}}Mb",
+    "MAX_ATTACHMENT_ERROR": "The file exceeds the maximum allowed size",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/es.json

@@ -16,6 +16,7 @@
     "GUEST_LABEL": "Huésped",
     "ALL_AGENTS_OFFLINE_LABEL": "Todos los operadores están desconectados en este momento.",
     "LABEL_LOADING": "Cargando...",
+    "LABEL_THINKING": "pensando",
     "CALLOUT_TITLE_PLACEHOLDER": "🖐 ¿Necesitas ayuda?",
     "CALLOUT_MSG_PLACEHOLDER": "¡Haz clic aquí y comienza a chatear con nosotros!",
     "CUSTOMER_SATISFACTION": "La satisfacción del cliente",
@@ -96,5 +97,6 @@
     "EMOJI_NOT_ELLOWED":"Emoji no permitido",
     "DOMAIN_NOT_ALLOWED":"La URL contiene un dominio no permitido",
     "MAX_ATTACHMENT": "Tamaño máximo permitido {{FILE_SIZE_LIMIT}}Mb",
+    "MAX_ATTACHMENT_ERROR": "El archivo supera el tamaño máximo permitido",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/fr.json

@@ -16,6 +16,7 @@
     "GUEST_LABEL": "Hôte",
     "ALL_AGENTS_OFFLINE_LABEL": "Tous les opérateurs sont actuellement hors ligne",
     "LABEL_LOADING": "Chargement en cours ...",
+    "LABEL_THINKING": "en train de reflechir",
     "CALLOUT_TITLE_PLACEHOLDER": "🖐 Besoin d'aide?",
     "CALLOUT_MSG_PLACEHOLDER": "Cliquez ici et commencez à discuter avec nous!",
     "CUSTOMER_SATISFACTION": "Évaluation des services",
@@ -96,5 +97,6 @@
     "EMOJI_NOT_ELLOWED":"Emoji non autorisé",
     "DOMAIN_NOT_ALLOWED":"L'URL contient un domaine non autorisé",
     "MAX_ATTACHMENT": "Taille maximale autorisée {{FILE_SIZE_LIMIT}}Mo",
+    "MAX_ATTACHMENT_ERROR": "Le fichier dépasse la taille maximale autorisée",
     "EMOJI": "Emoji"
 }

package/src/assets/i18n/it.json

@@ -16,6 +16,7 @@
     "GUEST_LABEL": "Ospite",
     "ALL_AGENTS_OFFLINE_LABEL": "Tutti gli operatori sono offline al momento",
     "LABEL_LOADING": "Caricamento...",
+    "LABEL_THINKING": "sto pensando",
     "CALLOUT_TITLE_PLACEHOLDER": "🖐 Bisogno di aiuto?",
     "CALLOUT_MSG_PLACEHOLDER": "Clicca qui e inizia a chattare con noi!",
     "CUSTOMER_SATISFACTION": "Valutazione servizio",
@@ -94,5 +95,6 @@
     "EMOJI_NOT_ELLOWED":"Emoji non consentiti",
     "DOMAIN_NOT_ALLOWED":"L'URL contiene un dominio non consentito",
     "MAX_ATTACHMENT": "Dimensione massima consentita {{FILE_SIZE_LIMIT}}Mb",
+    "MAX_ATTACHMENT_ERROR": "Il file supera la dimensione massima consentita",
     "EMOJI": "Emoji"
 }

package/src/chat21-core/providers/tiledesk/tiledesk-requests.service.ts

@@ -71,7 +71,7 @@ export class TiledeskRequestsService {
 
   public getMyRequests(): Promise<{ requests: Array<any>}> {
     this.tiledeskToken = this.appStorage.getItem('tiledeskToken')
-    const url = this.URL_TILEDESK_REQUEST + '/me?preflight=true'
+    const url = this.URL_TILEDESK_REQUEST + 'me?preflight=true'
     this.logger.log('[TILEDESK-SERVICE] - GET REQUEST url ', url);
     const httpOptions = {
       headers: new HttpHeaders({

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/iframe-style.css

@@ -13,7 +13,7 @@
     bottom: 0px;
     width: auto;   
     height: auto;
-    display: none;
+    display: block;
     z-index: 3000000000; /*999999*/; 
 }
 
@@ -84,12 +84,12 @@
     max-width: 1024px;
     max-height: 100%;
 
-    transition: 
+    /* transition: 
     width 300ms, 
     height 300ms, 
     max-height 300ms, 
     transform 300ms cubic-bezier(0, 1.2, 1, 1), 
-    opacity 300ms ease-out;
+    opacity 300ms ease-out; */
     /* per migliorare le prestazioni quando si usa transform */
     will-change: transform, opacity, width, height;
 }
@@ -175,14 +175,14 @@
 }
 
 #tiledesk-container.open #tiledeskdiv.min-size {
-    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
+    /* transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out; */
     width: var(--iframeMinWidth);
     height: var(--iframeMinHeight);
 }
 
 #tiledesk-container.open #tiledeskdiv.max-size {
     /* transition: width 1s, height 1s; */
-    transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out;
+    /* transition: width 200ms, height 200ms, max-height 200ms, transform 300ms cubic-bezier(0, 1.2, 1, 1), opacity 83ms ease-out; */
     width: var(--iframeMaxWidth);
     height: var(--iframeMaxHeight);
 }

package/deploy_amazon_prod.sh

@@ -1,41 +0,0 @@
-# npm version patch
-version=`node -e 'console.log(require("./package.json").version)'`
-echo "version $version"
-
-npm i
-
-cp src/environments/real_data/environment.prod.ts src/environments/environment.prod.ts
-
-# --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
-ng build --configuration="prod" --aot=true
-##--base-href='./v5/' --output-hashing none
-
-### SET HASHING : START ###
-cp ./src/launch_template.js ./dist/browser/launch.js
-node ./src/build_launch.js
-### SET HASHING : END ###
-
-#### FIREBASE #####
-# cd dist
-# # aws s3 sync . s3://tiledesk-widget/v5/latest/
-# aws s3 sync . s3://tiledesk-widget/v5/$version/ --cache-control max-age=300
-# aws s3 sync . s3://tiledesk-widget/v5/ --cache-control max-age=300
-# cd ..
-
-# #### MQTT #####
-cd dist/browser
-# aws s3 sync . s3://tiledesk-widget/v5/latest/
-aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=86400 --exclude='launch.js' #8days
-aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
-aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=86400 --exclude='launch.js' #8days
-aws s3 sync . s3://tiledesk-widget/v6/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
-cd ../..
-
-aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
-
-git restore src/environments/environment.prod.ts
-
-echo new version deployed $version on s3://tiledesk-widget/v6
-echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v6/index.html
-echo https://widget.tiledesk.com/v6/index.html
-echo https://widget.tiledesk.com/v6/$version/index.html