@chat21/chat21-web-widget 5.1.0-rc7 → 5.1.0-rc8

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc.8
+- **added**: ability to filter on urls attached to message textarea 
+
 # 5.1.0-rc.7
 - **added**: ability to allows emoji after message is sent
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0-rc7",
+  "version": "5.1.0-rc8",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -231,7 +231,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       'LABEL_PLACEHOLDER',
       'GUEST_LABEL',
       'LABEL_START_NW_CONV',
-      'CONTINUE'
+      'CONTINUE',
+      'EMOJI_NOT_ELLOWED',
+      'DOMAIN_NOT_ALLOWED'
     ];
 
     const keysContent = [

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html

@@ -1,7 +1,23 @@
-<!-- LOGO-->
-<div id="hiddenFooter" *ngIf="!hideTextAreaContent && poweredBy" class="fade-in-bottom" 
-    [class.hideTextReply]="hideTextReply">
-    <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
+<div class="footerContainerAlert">
+    <!-- LOGO-->
+    <div id="hiddenFooter" *ngIf="!hideTextAreaContent && poweredBy" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
+        <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy" (click)="managePoweredBy($event)"></div>
+    </div>
+
+    <!-- ALERT EMOJI & URLS -->
+    <div id="textAlert" *ngIf="!hideTextAreaContent && showAlertEmoji" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
+        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" version="1.1" viewBox="0 0 110 135">
+            <path d="M55,25.8c-23,0-41.7,18.7-41.7,41.7s18.7,41.7,41.7,41.7,41.7-18.7,41.7-41.7-18.7-41.7-41.7-41.7ZM55,91.5c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2,6.2,2.8,6.2,6.2-2.8,6.2-6.2,6.2ZM60.3,70.1c-.2,2.8-2.5,4.9-5.3,4.9s-5.1-2.2-5.3-4.9l-1.6-22.3c-.3-4,2.9-7.4,6.9-7.4s7.2,3.4,6.9,7.4l-1.6,22.3Z"/>
+          </svg>
+        <div tabindex="-1" class="alertText">{{translationMap.get('EMOJI_NOT_ELLOWED')}}</div>
+    </div>
+
+    <div id="textAlert" *ngIf="!hideTextAreaContent && showAlertUrl" class="fade-in-bottom" [class.hideTextReply]="hideTextReply">
+        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" version="1.1" viewBox="0 0 110 135">
+            <path d="M55,25.8c-23,0-41.7,18.7-41.7,41.7s18.7,41.7,41.7,41.7,41.7-18.7,41.7-41.7-18.7-41.7-41.7-41.7ZM55,91.5c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2,6.2,2.8,6.2,6.2-2.8,6.2-6.2,6.2ZM60.3,70.1c-.2,2.8-2.5,4.9-5.3,4.9s-5.1-2.2-5.3-4.9l-1.6-22.3c-.3-4,2.9-7.4,6.9-7.4s7.2,3.4,6.9,7.4l-1.6,22.3Z"/>
+          </svg>
+        <div tabindex="-1" class="alertText">{{translationMap.get('DOMAIN_NOT_ALLOWED')}}</div>
+    </div>
 </div>
 
 <!-- TEXTAREA + ICONS: conv active-->
@@ -44,7 +60,7 @@
 
 
 
-    <div *ngIf="!isStopRec" class="visible-text-area"  [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
+    <div *ngIf="!isStopRec" class="visible-text-area" [class.hasError]="showAlertEmoji || showAlertUrl" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
         <!-- isFilePendingToUpload || -->
       <textarea 
         [attr.disabled] = "(hideTextReply)? true : null"
@@ -67,7 +83,7 @@
     </div>
 
     <!-- ICON SEND -->
-    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
+    <div *ngIf="(textInputTextArea !== '' && !isStopRec) || !showAudioRecorderFooterButton" tabindex="-1" class="chat21-textarea-button" [class.disabled]="showAlertEmoji || showAlertUrl" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
         <span class="v-align-center">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="24" width="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
                 <path d="M1.8,18.9V1.7L22,10.3L1.8,18.9z M3.9,15.6l12.6-5.4L3.9,4.9v3.7l6.4,1.6l-6.4,1.6V15.6z M3.9,15.6V4.9v7V15.6z"/>

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss

@@ -39,6 +39,9 @@
     &.disabled {
         background-color: rgb(232, 233, 237);
     }
+    &.hasError{
+        box-shadow: 0 0 0 1px var(--chat-footer-border-color-error) inset;
+    }
 }
 
 .chat21-textarea-button {
@@ -52,6 +55,12 @@
         opacity: 1;
         cursor: pointer;
     }
+    &.disabled{
+        opacity: 0.3 !important;
+        pointer-events: none !important;
+        cursor: not-allowed !important;
+
+    }
 }
 
 .chat21-textarea-button span svg:hover {
@@ -273,16 +282,18 @@ textarea:active{
 
 }
 
+.footerContainerAlert{
+    position: relative;
+}
 
 #hiddenFooter{
-    // position: absolute;
+    position: absolute;
     bottom: 100%;
     width: 100%;
     height: var(--chat-footer-logo-height);
     display: flex;
     align-items: center;
     justify-content: center;
-    // position: absolute;
     // box-shadow: inset 0px -22px 16px -15px rgba(0,0,0,0.1);
     &.hideTextReply{
         height: var(--chat-footer-height);
@@ -344,6 +355,37 @@ textarea:active{
     }
 }
 
+#textAlert{
+    bottom: 100%;
+    width: 100%;
+    height: var(--chat-footer-logo-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--content-background-color);
+    position: absolute;
+    svg{
+        fill: var(--chat-footer-border-color-error);
+    }
+    // box-shadow: inset 0px -22px 16px -15px rgba(0,0,0,0.1);
+    div.alertText{
+        color: var(--dark-gray);
+        font-size: 1.2em;
+        font-weight: 500;
+        line-height: 22px;
+        font-family: Mulish, sans-serif;
+        letter-spacing: 0.24px;
+        -webkit-font-smoothing: antialiased;
+        padding: 4px 12px;
+        color: var(--chat-footer-border-color-error);
+    }
+    &.hideTextReply{
+        height: var(--chat-footer-height);
+        position: unset;
+        box-shadow: none;
+    }
+}
+
 .fade-in-bottom {
     -webkit-animation: fade-in-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.0s;
     animation: fade-in-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.0s;
@@ -367,4 +409,4 @@ textarea:active{
     // left: 10px;
     border: none;
     margin: -2px -2px 0px;
-}
+}

package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts

@@ -1,6 +1,6 @@
 import { Component, ComponentFactoryResolver, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { Globals } from 'src/app/utils/globals';
-import { checkAcceptedFile } from 'src/app/utils/utils';
+import { checkAcceptedFile, isEmoji, isAllowedUrlInText } from 'src/app/utils/utils';
 import { MessageModel } from 'src/chat21-core/models/message';
 import { UploadModel } from 'src/chat21-core/models/upload';
 import { ConversationHandlerService } from 'src/chat21-core/providers/abstract/conversation-handler.service';
@@ -82,6 +82,9 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     include: [ 'recent', 'people', 'nature', 'activity', 'flags']
   }
 
+  showAlertEmoji: boolean = false
+  showAlertUrl: boolean = false;
+
   convertColorToRGBA = convertColorToRGBA;
   private logger: LoggerService = LoggerInstance.getInstance()
   constructor(private chatManager: ChatManager,
@@ -321,7 +324,7 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
     this.onEmojiiPickerShow.emit(false)
     this.logger.log('[CONV-FOOTER] SEND MESSAGE: ', msg, type, metadata, additional_attributes);
 
-    msg = this.checkForEmojii(msg)
+
     if (msg && msg.trim() !== '' || type === TYPE_MSG_IMAGE || type === TYPE_MSG_FILE ) {
 
       // msg = htmlEntities(msg);
@@ -519,9 +522,30 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   checkForEmojii(text){
     //remove emojii only if "emojii" exist and is set to false
     if(this.project && this.project.settings?.allow_send_emoji === false){
-      return findAndRemoveEmoji(text)
+      this.showAlertEmoji = isEmoji(text);
+      if(this.showAlertEmoji){
+        return false
+      }
+      this.showAlertEmoji = false;
+      return true
     }
-    return text
+    this.showAlertEmoji = false;
+    return true
+  }
+
+  checkForUrlDomain(text){
+    if(this.project && this.project.settings?.allowed_urls === true){
+      this.showAlertUrl = !isAllowedUrlInText(text, this.project.settings?.allowed_urls_list);
+      if(this.showAlertUrl){
+        return false
+      }
+      this.showAlertUrl = false
+      return true
+    }
+    this.showAlertUrl = false
+    return true
+
+
   }
 
   
@@ -529,6 +553,17 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
   onTextAreaChange(){
     this.resizeInputField()
     this.setWritingMessages(this.textInputTextArea)
+
+    let check = this.checkForEmojii(this.textInputTextArea)
+    if(!check){
+      return;
+    }
+
+    let checkUrlDomain = this.checkForUrlDomain(this.textInputTextArea)
+    if(!checkUrlDomain){
+      return
+    }
+
   }
 
   onSendPressed(event) {
@@ -597,6 +632,13 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
 
   addEmoji(event){
     this.onEmojiiPickerShow.emit(false); //de-activate emojii picker on select
+
+    let check = this.checkForEmojii(this.textInputTextArea)
+    console.log('chekkkkkkk', check)
+    if(!check){
+      return;
+    }
+
     this.textInputTextArea = this.textInputTextArea.trimStart() + event.emoji.native + " "
     this.setFocusOnId('chat21-main-message-context')
   }

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

@@ -93,6 +93,7 @@ export class GlobalSettingsService {
                     project['trialDaysLeft'],
                     project['trialExpired'],
                     project['updatedAt'],
+                    project['settings'],
                     project['versions']
                 );
             }

package/src/app/sass/_variables.scss

@@ -31,8 +31,13 @@
     --chat-footer-border-radius: 16px;
     --chat-footer-background-color: #f6f7fb;
     --chat-footer-color: #1a1a1a;
+    --chat-footer-border-color-error: #aa0404;
 
-    --icon-fill-color: #5f6368
+    --icon-fill-color: #5f6368;
+
+
+    --content-background-color: #fff;
+    --content-text-color: var(--black);
 }
 
 $trasp-black:rgba(0,0,0,0.8);

package/src/app/utils/utils.ts

@@ -210,6 +210,44 @@ export function isEmoji(str: string) {
   }
 }
 
+export function isAllowedUrlInText(text: string, allowedUrls: string[]): boolean {
+  // Regex per trovare URL o domini nudi nel testo
+  const urlRegex = /https?:\/\/[^\s]+|www\.[^\s]+|(?:\b[\w-]+\.)+[a-z]{2,}(\/[^\s]*)?/gi;
+  const foundUrls = text.match(urlRegex);
+
+  if (!foundUrls) {
+    return true; // Nessun URL => testo ammesso
+  }
+
+  // Normalizza dominio: rimuove schema, www., slash finali
+  const normalize = (url: string) =>
+    url
+      .replace(/^https?:\/\//i, '')
+      .replace(/^www\./i, '')
+      .replace(/\/$/, '')
+      .toLowerCase();
+
+  // Normalizza tutti gli allowed pattern per confronto
+  const normalizedAllowedPatterns = allowedUrls.map(pattern =>
+    pattern
+      .replace(/^https?:\/\//i, '')
+      .replace(/^www\./i, '')
+      .replace(/\/$/, '')
+      .toLowerCase()
+      .replace(/\./g, '\\.')
+      .replace(/\//g, '\\/')
+      .replace(/\*/g, '.*')
+  );
+
+  return foundUrls.every(rawUrl => {
+    const url = normalize(rawUrl);
+    return normalizedAllowedPatterns.some(pattern => {
+      const regex = new RegExp(`^${pattern}$`, 'i');
+      return regex.test(url);
+    });
+  });
+}
+  
 export function setColorFromString(str: string) {
   const arrayBckColor = ['#fba76f', '#80d066', '#73cdd0', '#ecd074', '#6fb1e4', '#f98bae'];
   let num = 0;

package/src/assets/i18n/en.json

@@ -91,5 +91,7 @@
 
     "LABEL_PREVIEW": "Preview",
     "SWITCH_TO": "Or switch to:",
-    "CONNECTION_NETWORK_ERROR": "Our apologies. There was some trouble connecting to network"
+    "CONNECTION_NETWORK_ERROR": "Our apologies. There was some trouble connecting to network",
+    "EMOJI_NOT_ELLOWED":"Emoji not allowed",
+    "DOMAIN_NOT_ALLOWED":"Domain not allowed"
 }