@chat21/chat21-web-widget 5.1.0-rc1 → 5.1.0-rc11

package/CHANGELOG.md

@@ -6,8 +6,49 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-# 5.1.0-rc1
-- **added**: angular v17
+# 5.1.0-rc11
+- **bug-fixed**: removed private note msgs
+
+# 5.1.0-rc10
+- **bug-fixed**: minor fix allowed urls
+
+# 5.1.0-rc9
+- **bug-fixed**: minor fix allowed urls
+
+# 5.1.0-rc8
+- **added**: ability to filter on urls attached to message textarea 
+
+# 5.1.0-rc7
+- **added**: ability to allows emoji after message is sent
+
+# 5.1.0-rc6
+- **removed**: hideRestartConversationOptionsMenu
+
+# 5.1.0-rc5
+# 5.1.0-rc4
+- **bug-fixed**: Dockerfile for angular 18
+
+# 5.1.0-rc3
+- **added**: angular 18
+
+# 5.1.0-rc2
+- **added**: angular 17
+# 5.0.99
+
+# 5.0.99-rc1
+- **bug-fixed**: audio duration not showed in mobile browser
+
+# 5.0.98
+- **bug-fixed**: meta info not rendered correctly
+
+# 5.0.97
+
+# 5.0.96
+
+# 5.0.95
+- **bug-fixed**: first message is fired twice ( from /event and from /messages with hiddenMesage)
+
+# 5.0.94
 
 # 5.0.94-rc7
 - **added**: touchstart and touchend events for mobile mic footer button

package/Dockerfile

@@ -1,7 +1,7 @@
 ### STAGE 1: Build ###
 
 # We label our stage as ‘builder’
-FROM node:18.20.8-alpine AS builder
+FROM node:20.12.2-alpine3.19 as builder
 
 COPY package.json package-lock.json ./
 
@@ -15,7 +15,7 @@ COPY . .
 
 ## Build the angular app in production mode and store the artifacts in dist folder
 
-RUN npm run ng build -- --configuration="prod" --output-path=dist --base-href="./" --output-hashing=none --build-optimizer=false --vendor-chunk
+RUN npx ng build --configuration="prod" --output-path=dist --base-href=./ --output-hashing=none
 
 
 ### STAGE 2: Setup ###
@@ -29,7 +29,7 @@ COPY nginx.conf /etc/nginx/nginx.conf
 RUN rm -rf /usr/share/nginx/html/*
 
 ## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
-COPY --from=builder /ng-app/dist /usr/share/nginx/html
+COPY --from=builder /ng-app/dist/browser /usr/share/nginx/html
 
 RUN echo "Chat21 Web Widget Started!!"
 

package/angular.json

@@ -15,13 +15,17 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist",
+            "outputPath": {
+              "base": "dist"
+            },
             "baseHref":"/",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts",
+              "@angular/localize/init",
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/assets",
@@ -39,7 +43,8 @@
               "src/environments/real_data/widget-config-mqtt.json",
               "src/environments/real_data/widget-config-docker.json",
               "src/environments/real_data/widget-config-native-mqtt.json",
-              "src/environments/real_data/widget-config-native-prod.json"
+              "src/environments/real_data/widget-config-native-prod.json",
+              "src/environments/real_data/widget-config-aws-stage.json"
             ],
             "styles": [
               "src/app/sass/styles.scss"
@@ -47,11 +52,8 @@
             "scripts": [
               "src/assets/js/mqtt/4.2.6/mqtt.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js",
-              "node_modules/popper.js/dist/umd/popper.min.js"
             ],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "allowedCommonJsDependencies": [
               "rxjs-compat",
               "idb",
@@ -61,7 +63,13 @@
             ],
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "."
+              ]
+            }
           },
           "configurations": {
             "prod": {
@@ -77,8 +85,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -104,8 +110,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": true,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -124,13 +128,13 @@
           },
           "configurations": {
             "prod": {
-              "browserTarget": "widget:build:prod"
+              "buildTarget": "widget:build:prod"
             },
             "pre": {
-              "browserTarget": "widget:build:pre"
+              "buildTarget": "widget:build:pre"
             },
             "development": {
-              "browserTarget": "widget:build:development"
+              "buildTarget": "widget:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -138,7 +142,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "widget:build"
+            "buildTarget": "widget:build"
           }
         },
         "test": {

package/deploy_amazon_beta.sh

@@ -2,14 +2,8 @@
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
-npm i
+ng build --configuration="pre" --aot=true --base-href
 
-ng build --configuration="pre" --aot=true --base-href --build-optimizer=true
-
-### SET HASHING : START ###
-cp ./src/launch_template.js ./dist/launch.js
-node ./src/build_launch.js
-### SET HASHING : END ###
 
 # ########## --->>>> NATIVE-MQTT folder START <<<<<------ ########## #
 
@@ -30,10 +24,11 @@ node ./src/build_launch.js
 
 # ########## --->>>> FIREBASE folder START <<<<<------ ########## #
 cd dist
-aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control max-age=300 --exclude='launch.js' #7days
-aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
-aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control max-age=300 --exclude='launch.js' #7days
-aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control "no-store,no-cache,private" --exclude='*' --include='launch.js'
+aws s3 sync . s3://tiledesk-widget-pre/v5/$version/ --cache-control max-age=300
+aws s3 sync . s3://tiledesk-widget-pre/v5/ --cache-control max-age=300
+cd ..
+
+#aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
 cd ..
 
 aws  cloudfront create-invalidation --distribution-id E2V5O0YPR61V8P --paths "/*"

package/deploy_amazon_prod.sh

@@ -3,13 +3,7 @@ version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
 
 # --build-optimizer=false if localstorage is disabled (webview) appears https://github.com/firebase/angularfire/issues/970
-ng build --configuration="prod" --aot=true   --build-optimizer=true --vendor-chunk=true
-##--base-href='./v5/' --output-hashing none
-
-### SET HASHING : START ###
-cp ./src/launch_template.js ./dist/launch.js
-node ./src/build_launch.js
-### SET HASHING : END ###
+ng build --configuration="prod" --aot=true
 
 #### FIREBASE #####
 # cd dist
@@ -21,12 +15,11 @@ node ./src/build_launch.js
 # #### MQTT #####
 cd dist
 # 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'
+aws s3 sync . s3://tiledesk-widget/v6/$version/ --cache-control max-age=300
+aws s3 sync . s3://tiledesk-widget/v6/ --cache-control max-age=300
 cd ..
 
+
 aws  cloudfront create-invalidation --distribution-id E3EJDWEHY08CZZ --paths "/*"
 echo new version deployed $version on s3://tiledesk-widget/v5
 echo available on https://s3.eu-west-1.amazonaws.com/tiledesk-widget/v5/index.html

package/deploy_beta.sh

@@ -1,6 +1,17 @@
 # npm version prerelease --preid=beta
 version=`node -e 'console.log(require("./package.json").version)'`
 echo "version $version"
+echo "____________WIDGET-V5______________"
+echo "CREATING TAG ON GIT FOR version: $version"
+
+# Get curent branch name
+current_branch=$(git rev-parse --abbrev-ref HEAD)
+remote_name=$(git config --get branch.$current_branch.remote)
+
+## Push commit to git
+git add .
+git commit -m "version added: ### $version"
+git push "$remote_name" "$current_branch"
 
 
 # Get curent branch name

package/deploy_prod.sh

@@ -1,8 +1,17 @@
-# npm version patch
+# npm version prerelease --preid=beta
 version=`node -e 'console.log(require("./package.json").version)'`
-ECHO "____________WIDGET-V5______________"
+echo "version $version"
+echo "____________WIDGET-V5______________"
 echo "CREATING TAG ON GIT FOR version: $version"
-# echo "version $version"
+
+# Get curent branch name
+current_branch=$(git rev-parse --abbrev-ref HEAD)
+remote_name=$(git config --get branch.$current_branch.remote)
+
+## Push commit to git
+git add .
+git commit -m "version added: ### $version"
+git push "$remote_name" "$current_branch"
 
 # Get curent branch name
 current_branch=$(git rev-parse --abbrev-ref HEAD)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0-rc1",
+  "version": "5.1.0-rc11",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -19,20 +19,19 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "^17.3.12",
+    "@angular/animations": "^18.2.13",
     "@angular/cdk": "^17.3.10",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/forms": "^17.3.12",
-    "@angular/localize": "^17.3.12",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
-    "@angular/router": "^17.3.12",
-    "@ctrl/ngx-emoji-mart": "^7.1.0",
-    "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^4.0.0",
-    "@popperjs/core": "^2.11.5",
+    "@angular/common": "^18.2.13",
+    "@angular/compiler": "^18.2.13",
+    "@angular/core": "^18.2.13",
+    "@angular/forms": "^18.2.13",
+    "@angular/localize": "^18.2.13",
+    "@angular/platform-browser": "^18.2.13",
+    "@angular/platform-browser-dynamic": "^18.2.13",
+    "@angular/router": "^18.2.13",
+    "@ctrl/ngx-emoji-mart": "^9.2.0",
+    "@ngx-translate/core": "^16.0.4",
+    "@ngx-translate/http-loader": "^16.0.1",
     "@types/marked": "^4.0.3",
     "accept-language-parser": "^1.5.0",
     "bootstrap": "^5.1.3",
@@ -42,19 +41,18 @@
     "humanize-duration-ts": "^2.1.1",
     "marked": "^4.0.16",
     "ngx-logger": "^5.0.11",
-    "popper.js": "^1.16.1",
     "replace": "^1.2.2",
-    "rxjs": "~6.5.1",
+    "rxjs": "^7.8.2",
     "source-map-explorer": "^2.5.3",
     "tslib": "^2.0.0",
     "uuid": "^8.3.2",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.17",
-    "@angular/cli": "^17.3.17",
-    "@angular/compiler-cli": "^17.3.12",
-    "@angular/language-service": "^17.3.12",
+    "@angular-devkit/build-angular": "^18.2.19",
+    "@angular/cli": "^18.2.19",
+    "@angular/compiler-cli": "^18.2.13",
+    "@angular/language-service": "^18.2.13",
     "@types/jasmine": "^3.6.11",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",

package/src/app/app.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { GlobalSettingsService } from './providers/global-settings.service';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
 import { TranslatorService } from './providers/translator.service';
 import { TranslateModule } from '@ngx-translate/core';
@@ -23,6 +23,7 @@ import { ChatManager } from 'src/chat21-core/providers/chat-manager';
 import { NGXLogger } from 'ngx-logger';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
  
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -32,12 +33,12 @@ describe('AppComponent', () => {
   
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        HttpClientTestingModule,
-        TranslateModule.forRoot(),
-      ],
-      providers:[
+    declarations: [
+        AppComponent
+    ],
+    imports: [RouterTestingModule,
+        TranslateModule.forRoot()],
+    providers: [
         Triggerhandler,
         GlobalSettingsService,
         AppStorageService,
@@ -54,12 +55,11 @@ describe('AppComponent', () => {
         ImageRepoService,
         TypingService,
         PresenceService,
-        UploadService
-      ],
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
+        UploadService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting()
+    ]
+}).compileComponents();
   }));
 
   beforeEach(() => {

package/src/app/app.module.ts

@@ -54,7 +54,7 @@ import { AppConfigService } from './providers/app-config.service';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { environment } from 'src/environments/environment';
 
@@ -303,21 +303,18 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     NetworkOfflineComponent,
     ConfirmCloseComponent
   ],
-  imports: [
-    BrowserModule,
+  imports: [BrowserModule,
     BrowserAnimationsModule,
-    // AppRoutingModule,
-    HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     PickerModule,
     TranslateModule.forRoot(//),
     {
-      // loader: {
-      //   provide: TranslateLoader,
-      //   useFactory: (createTranslateLoader),
-      //   deps: [HttpClient]
-      // }
+    // loader: {
+    //   provide: TranslateLoader,
+    //   useFactory: (createTranslateLoader),
+    //   deps: [HttpClient]
+    // }
     }),
     LoggerModule.forRoot({
       level: NgxLoggerLevel.DEBUG,
@@ -349,7 +346,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     {
       provide: MessagingAuthService,
       useFactory: authenticationFactory,
-      deps: [HttpClient, AppConfigService, Chat21Service, AppStorageService ]
+      deps: [HttpClient, AppConfigService, Chat21Service, AppStorageService]
     },
     {
       provide: ConversationsHandlerService,
@@ -389,7 +386,7 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     {
       provide: UploadService,
       useFactory: uploadFactory,
-      deps: [HttpClient, AppConfigService, AppStorageService ]
+      deps: [HttpClient, AppConfigService, AppStorageService]
     },
     TiledeskAuthService,
     TiledeskRequestsService,
@@ -398,7 +395,8 @@ export function uploadFactory(http: HttpClient, appConfig: AppConfigService, app
     Triggerhandler,
     WaitingService,
     ScriptService,
-    BrandService
+    BrandService,
+    provideHttpClient(withInterceptorsFromDi())
   ],
   bootstrap: [AppComponent]
 })

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

@@ -15,7 +15,6 @@
         [hideHeaderCloseButton]="g?.hideHeaderCloseButton"
         [hideHeaderBackButton]="g?.singleConversation"
         [hideCloseConversationOptionMenu]="(isConversationArchived || g?.hideCloseConversationOptionMenu)"
-        [hideRestartConversationOptionsMenu]="(isConversationArchived || (!g?.singleConversation && !hideTextAreaContent) || g?.hideRestartConversationOptionsMenu)"
         [hideHeaderConversationOptionsMenu]="g?.hideHeaderConversationOptionsMenu"
         [hideSignOutOptionMenu]="(!g?.singleConversation || !g?.showLogoutOption)"
         [hideChatDetailOptionMenu]="(!g?.isDevMode)"
@@ -113,7 +112,7 @@
             [attributes]="g?.attributes"
             [senderId]="senderId"
             [tenant]="g?.tenant"
-            [projectid]="g?.projectid"
+            [project]="g?.project"
             [channelType]="g?.channelType"
             [userFullname]="g?.userFullname"
             [userEmail]="g?.userEmail"

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

@@ -1,7 +1,7 @@
 import { TiledeskRequestsService } from './../../../../chat21-core/providers/tiledesk/tiledesk-requests.service';
 import { StarRatingWidgetService } from './../../../providers/star-rating-widget.service';
 import { StarRatingWidgetComponent } from './../../star-rating-widget/star-rating-widget.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 import { Triggerhandler } from './../../../../chat21-core/utils/triggerHandler';
 import { AppComponent } from './../../../app.component';
@@ -13,7 +13,6 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ConversationComponent } from './conversation.component';
 import { GlobalSettingsService } from '../../../providers/global-settings.service';
-import { SettingsSaverService } from '../../../providers/settings-saver.service';
 import { TranslatorService } from '../../../providers/translator.service';
 
 import { AppStorageService } from '../../../../chat21-core/providers/abstract/app-storage.service';
@@ -33,6 +32,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { NGXLogger } from 'ngx-logger';
 import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 describe('ConversationComponent', () => {
   let component: ConversationComponent;
@@ -43,18 +43,15 @@ describe('ConversationComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ConversationComponent ],
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot(),
-      ],
-      providers: [
+    declarations: [ConversationComponent],
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [TranslateModule.forRoot()],
+    providers: [
         Globals,
         AppConfigService,
         AppComponent,
         { provide: ElementRef, useClass: MockElementRef },
         GlobalSettingsService,
-        SettingsSaverService,
         Triggerhandler,
         TranslatorService,
         AppConfigService,
@@ -72,10 +69,11 @@ describe('ConversationComponent', () => {
         UploadService,
         StarRatingWidgetService,
         TiledeskRequestsService,
-        NGXLogger
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
+        NGXLogger,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting()
+    ]
+})
     .compileComponents();
   }));
 

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

@@ -118,7 +118,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
 
   // devo inserirle nel globals
   subscriptions: Array<any> = [];
-  private unsubscribe$: Subject<any> = new Subject<any>();
+  private unsubscribe$: Subject<void> = new Subject<void>();
   showMessageWelcome: boolean;
 
   // ========= begin::agent availability
@@ -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-audio-recorder/conversation-audio-recorder.component.scss

@@ -74,6 +74,7 @@ button {
     display: inline-flex;
     justify-content: center;
     align-items: center;
+    padding: 0px;
   }
   
   .mic-button svg {

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"/>