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

package/CHANGELOG.md

@@ -6,24 +6,125 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
-# 5.1.0-rc.8
+# 5.1.0
+
+# 5.1.0-rc33
+- **changed**: updated "marked library" from 4.0.16 to 16.3.0 - enabled list and table
+
+# 5.1.0-rc32
+- **bug-fixed**: overlay--popup
+
+# 5.1.0-rc31
+- **bug-fixed**: fixed the text area css
+
+# 5.1.0-rc30
+- **changed**: left-aligned buttons with variable widths, like UIPath
+- **changed**: input text area, CSS changed, like ChatGPT style
+- **changed**: increased chatbot width in top-size view with maximum width like UIPath
+- **changed**: added dark screen in top-size view
+
+# 5.1.0-rc29
+- **bug-fixed**: Bug fix for vertical position of widget ball
+
+# 5.1.0-rc28
+- **changed**: added buttons to change widget size in header 
+- **bug-fixed**: fixed bug widget's balloon position when closed 
+
+# 5.1.0-rc27
+- **bug-fixed**: minor fix on avatar image and textarea style 
+
+# 5.1.0-rc26
+- **added**: buttons attachments aligned to bubble message
+- **changed**: enable new textarea style if width is grather than 688px
+- **bug-fixed**: fullscreenMode is not enabled (css class override fullscreen style)
+
+# 5.1.0-rc25
+- **added**: allowedUploadExtentions property from api call
+
+# 5.1.0-rc24
+- **added**: size tiledeskSettings property
+
+# 5.1.0-rc23
+- **added**: hideHeaderConversation tiledeskSettings property
+
+# 5.1.0-rc22
+- **changed**: footer UI if fullscreenMode is enabled
+- **changed**: buttons alignment if fullscreenMode is enabled
+- **changed**: animation while increase/descrease widget size
+
+# 5.1.0-rc21
+- **bug-fixed**: shadow is visible while decrease widget size
+
+# 5.1.0-rc20
+- **added**: fontFamilySource settings variable
+- **added**: --font-family-bubble-message as variable to manage custom font
+- **removed**: fontSize and fontFamily as input property in bubble-message component
+
+# 5.1.0-rc19
+- **added**: ability to maximize, minimize and fullscreen the widget window
+- **added**: variable for font-family attribute css value
+
+# 5.0.102
+- **bug-fixed**: cannot add message if array is empty
+
+# 5.0.101
+- **bug-fixed**: removed private note msgs
+
+# 5.1.0-rc18
+- **bug-fixed**: allowedOnSpecificUrl 
+
+# 5.1.0-rc17
+- **added**: allowedOnSpecificUrl and allowedOnSpecificUrlList to manage list of pattern url to allow to load the widget
+
+# 5.1.0-rc16
+- **added**: hideOnSpecificUrlList replaced in favour of hideOnSpecificDomainList
+
+# 5.1.0-rc15
+# 5.1.0-rc14
+- **added**: ability to hide widget on selected domains based on hideOnSpecificDomainList variable
+
+# 5.1.0-rc13
+- **added**: ability to manage embedded chatbot-panel.html page into an iframe and hide some elements
+
+# 5.1.0-rc12
+- **added**: ability to get all my request from Tiledesk API
+
+# 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-rc.7
+# 5.1.0-rc7
 - **added**: ability to allows emoji after message is sent
 
-# 5.1.0-rc.6
+# 5.1.0-rc6
 - **removed**: hideRestartConversationOptionsMenu
 
-# 5.1.0-rc.5
-# 5.1.0-rc.4
+# 5.1.0-rc5
+# 5.1.0-rc4
 - **bug-fixed**: Dockerfile for angular 18
 
-# 5.1.0-rc.3
+# 5.1.0-rc3
 - **added**: angular 18
 
-# 5.1.0-rc.2
+# 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
 

package/angular.json

@@ -24,7 +24,7 @@
             "index": "src/index.html",
             "polyfills": [
               "src/polyfills.ts",
-              "@angular/localize/init",
+              "@angular/localize/init"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
@@ -51,7 +51,7 @@
             ],
             "scripts": [
               "src/assets/js/mqtt/4.2.6/mqtt.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"
             ],
             "extractLicenses": false,
             "allowedCommonJsDependencies": [

package/deploy_beta.sh

@@ -4,6 +4,16 @@ 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
 current_branch=$(git rev-parse --abbrev-ref HEAD)
 remote_name=$(git config --get branch.$current_branch.remote)

package/deploy_prod.sh

@@ -13,6 +13,15 @@ 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)
+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"
+
 if [ "$version" != "" ]; then
     git tag -a "$version" -m "`git log -1 --format=%s`"
     echo "Created a new tag, $version"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0-rc8",
+  "version": "5.1.0",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {
@@ -39,7 +39,7 @@
     "file-saver": "^2.0.5",
     "firebase": "^8.6.7",
     "humanize-duration-ts": "^2.1.1",
-    "marked": "^4.0.16",
+    "marked": "^16.3.0",
     "ngx-logger": "^5.0.11",
     "replace": "^1.2.2",
     "rxjs": "^7.8.2",

package/src/app/app.component.html

@@ -11,13 +11,19 @@
         [archivedConversations]="archivedConversations"
         [hideSettings]="g.hideSettings"
         [stylesMap]="styleMapConversation"
+        [size]="g.size"
+        [fullscreenMode]="g.fullscreenMode"
+        [hideHeaderConversationOptionsMenu]="g.hideHeaderConversationOptionsMenu"
+        [isButtonsDisabled]="isButtonsDisabled"
+        [translationMap]="translationMap"
         (onNewConversation)="onNewConversation()" 
         (onConversationSelected)="onSelectedConversation($event)"
         (onOpenAllConvesations)="onOpenAllConversation()"
         (onCloseWidget)="onCloseWidget()" 
         (onSignOut)="onSignOut()"
         (onImageLoaded)="onImageLoaded($event)"
-        (onConversationLoaded)="onConversationLoaded($event)">
+        (onConversationLoaded)="onConversationLoaded($event)"
+        (onMenuOptionClick)="onMenuOptionClick($event)">
       </chat-home>
     </div>
 

package/src/app/app.component.scss

@@ -43,7 +43,6 @@ input, select:focus, textarea {
 
 :host {
     --button-in-msg-background-color:  --black;
-    --button-in-msg-font-size: 15px;
 }
 
 
@@ -57,6 +56,7 @@ body {
 
 
 
+
 // .btn-new-conversation:hover{
 //     -webkit-animation: jello-horizontal 0.8s 0.1s both;
 // 	        animation: jello-horizontal 0.8s 0.1s both;
@@ -134,39 +134,6 @@ textarea::placeholder {
     font-weight: 300;
   }
 
-  .msg_container{
-    .button-in-msg {
-        color: white!important;
-        background:  var(--button-in-msg-background-color) !important;
-
-        position: relative;
-        max-width: 300px;
-        min-width: inherit;
-        padding: 8px 16px;
-        cursor: auto;
-        border: 1px solid rgb(255, 255, 255);
-        border-radius: 20px!important;
-        margin: 3px;
-        overflow: hidden;
-        font-family: 'Muli', sans-serif;
-        font-size: 15px;
-        -o-text-overflow: ellipsis;
-        text-overflow: ellipsis;
-        white-space: normal;
-        letter-spacing: -0.24px;
-        -webkit-font-smoothing: antialiased;
-        .message_innerhtml{
-            // padding: 0px 14px!important;
-        }
-        p{
-            font-size: var(--button-in-msg-font-size)!important;
-            font-family: 'Muli', sans-serif!important;
-            font-weight: normal!important;
-        }
-    }
-    
-}
-
 
 // TOOLTIP: start
 .tooltip-container {
@@ -282,6 +249,10 @@ chat-root {
         cursor: pointer;
     }
 
+    table {
+        color: inherit;
+    }
+
     textarea,
     textarea:visited,
     textarea:focus,
@@ -307,7 +278,7 @@ chat-root {
         position: absolute;
         width: 100%;
         height: 100%;
-        font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
+        font-family: var(--font-family-bubble-message);
         font-size: 10px;
         text-align: left;
         background-color: transparent;
@@ -507,59 +478,7 @@ chat-root {
                 }
             }
         }
-         /* LOADING */
-        /*http://tobiasahlin.com/spinkit/*/
-        #chat21-spinner {
-            display: none;
-            width: 70px;
-            min-height: 20px;
-            margin: 20px auto 0;
-            text-align: center;
-        }
-        #chat21-spinner.active {
-            display: block;
-        }
-        #chat21-spinner > div {
-            width: 12px;
-            height: 12px;
-            background-color: var(--blue);
-            border-radius: 100%;
-            display: inline-block;
-            -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-            animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-        }
-        #chat21-spinner .chat21-bounce1 {
-            -webkit-animation-delay: -0.32s;
-            animation-delay: -0.32s;
-        }
-        #chat21-spinner .chat21-bounce2 {
-            -webkit-animation-delay: -0.16s;
-            animation-delay: -0.16s;
-        }
-        #chat21-spinner span {
-            display: block;
-            margin: 0.5em 0 0 0;
-            color: var(--black);
-            /* text-transform: uppercase; */
-            font-family: 'Roboto', sans-serif;
-            -webkit-animation: pulse 2000ms linear infinite;
-            -moz-animation: pulse 2000ms linear infinite;
-            animation: pulse 2000ms linear infinite;
-            text-align: center;
-        }
-        @-webkit-keyframes sk-bouncedelay {
-            0%, 80%, 100% { -webkit-transform: scale(0) }
-            40% { -webkit-transform: scale(1.0) }
-        }
-        @keyframes sk-bouncedelay {
-            0%, 80%, 100% { 
-            -webkit-transform: scale(0);
-            transform: scale(0);
-            } 40% { 
-            -webkit-transform: scale(1.0);
-            transform: scale(1.0);
-            }
-        }
+        
         // ========= END: GENERIC CSS ========= //
    
         /* CSS BOX CONTAINER */
@@ -601,16 +520,6 @@ chat-root {
             border-radius: 16px;
         }
 
-        .chat21-fullscreen {
-            width: 100%;
-            height: 100%;
-            right: 0px;
-            left: 0px;
-            bottom: 0px;
-            border-radius: 0px;
-            max-height: none;
-        }
-
 
         /***************************
         ******** PAGE MODAL ********
@@ -682,7 +591,7 @@ chat-root {
     .c21-header {
         overflow: hidden;
         width: 100%;
-        height: 52px;
+        height: var(--chat-header-height);
         position: relative;
         margin: 0;
         padding: 0;
@@ -703,7 +612,7 @@ chat-root {
 
         .c21-header-container{
             position: relative;
-            height: 52px;
+            height: 100%;
             width: 100%;
             margin: 0 auto;
 
@@ -722,7 +631,7 @@ chat-root {
                     // margin: 0 10px 0 10px;
                     width: 35px;//40px;
                     height: 35px;//40px;
-                    margin: 9px; //6px;
+                    margin: 9px 0px; //6px;
                     padding: 0px;
                     border-radius: 8px;
 
@@ -774,7 +683,7 @@ chat-root {
     }
     .c21-body {
         position: absolute;
-        top: 52px;
+        top: var(--chat-header-height);
         bottom: 0;
         left: 0;
         right: 0;

package/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnDestroy,
 import { environment } from 'src/environments/environment';
 import { Subscription } from 'rxjs/internal/Subscription';
 import { v4 as uuidv4 } from 'uuid';
+import { HEADER_MENU_OPTION } from './utils/constants';
 //COMPONENTS
 import { EyeeyeCatcherCardComponent } from './component/eyeeye-catcher-card/eyeeye-catcher-card.component';
 //MODELS
@@ -66,7 +67,6 @@ interface MessageObj {
   // providers: [AgentAvailabilityService, TranslatorService]
 })
 export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
-  
 
   // ========= begin:: sottoscrizioni ======= //
   subscriptions: Subscription[] = []; /** */
@@ -100,6 +100,8 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
   
   @ViewChild(EyeeyeCatcherCardComponent, { static: false }) eyeeyeCatcherCardComponent: EyeeyeCatcherCardComponent
   styleMapConversation: Map<string, string> = new Map();
+  translationMap: Map<string, string> = new Map();
+  isButtonsDisabled: boolean = true;
   marginBottom: number;
   
   forceDisconnect: boolean = false;
@@ -129,7 +131,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
     public imageRepoService: ImageRepoService,
     public typingService: TypingService,
     public presenceService: PresenceService,
-    public uploadService: UploadService 
+    public uploadService: UploadService
   ){}
 
     ngOnInit(): void {
@@ -139,6 +141,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
     ngAfterViewInit(): void {
         this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
+        
+        // Initialize translation map and enable buttons
+        const keys = ['MAXIMIZE', 'MINIMIZE', 'CENTER', 'BUTTON_CLOSE_TO_ICON'];
+        this.translationMap = this.translateService.translateLanguage(keys);
+        this.isButtonsDisabled = false;
+        
         this.ngZone.run(() => {
             const that = this;
             const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
@@ -262,6 +270,14 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 this.tabTitle = this.g.windowContext.window.document.title
                 this.appStorageService.initialize(environment.storage_prefix, this.g.persistence, this.g.projectid)
                 
+                //check if allowed to load
+                let canLoad = this.globalSettingsService.manageLoadingDomains();
+                if(!canLoad){
+                    console.error('[Check canLoad] Widget is not able to load on this domain!!!')
+                    this.hideWidget()
+                    this.disposeWidget();
+                }
+
                 //set visibility
                 if((this.g.isMobile && !this.g.displayOnMobile) || (!this.g.isMobile && !this.g.displayOnDesktop)){
                     this.disposeWidget()
@@ -1980,6 +1996,43 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.signOut();
     }
 
+    onMenuOptionClick(event: string) {
+        this.logger.debug('[APP-COMP] onMenuOptionClick', event);
+        switch(event) {
+            case HEADER_MENU_OPTION.MAXIMIZE:
+                this.onWidgetSizeChange('max');
+                break;
+            case HEADER_MENU_OPTION.MINIMIZE:
+                this.onWidgetSizeChange('min');
+                break;
+            case HEADER_MENU_OPTION.TOP:
+                this.onWidgetSizeChange('top');
+                break;
+        }
+    }
+
+    onWidgetSizeChange(mode: 'min' | 'max' | 'top') {
+        var tiledeskDiv = this.g.windowContext.window.document.getElementById('tiledeskdiv');
+        this.g.size = mode 
+        const parent = tiledeskDiv.parentElement as HTMLElement | null;
+        if(mode==='max'){
+            tiledeskDiv.classList.add('max-size')
+            tiledeskDiv.classList.remove('min-size')
+            tiledeskDiv.classList.remove('top-size')
+            if(parent) parent.classList.remove('overlay--popup');
+        } else if(mode==='min'){
+            tiledeskDiv.classList.add('min-size')
+            tiledeskDiv.classList.remove('max-size')
+            tiledeskDiv.classList.remove('top-size')
+            if(parent) parent.classList.remove('overlay--popup');
+        } else if(mode=== 'top'){
+            tiledeskDiv.classList.add('top-size')
+            tiledeskDiv.classList.remove('max-size')
+            tiledeskDiv.classList.remove('min-size')
+            if(parent) parent.classList.add('overlay--popup');
+        }
+    }
+
     /**
      * MODAL RATING WIDGET:
      * close modal page
@@ -2110,6 +2163,12 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
 
         this.el.nativeElement.style.setProperty('--button-in-msg-background-color', this.g.bubbleSentBackground)
         this.el.nativeElement.style.setProperty('--button-in-msg-font-size', this.g.buttonFontSize)
+        this.el.nativeElement.style.setProperty('--button-in-msg-font-family', this.g.fontFamily)
+
+        this.el.nativeElement.style.setProperty('--chat-header-height', this.g.hideHeaderConversation? '0px': null)
+        this.el.nativeElement.style.setProperty('--font-size-bubble-message', this.g.fontSize)
+        this.el.nativeElement.style.setProperty('--font-family-bubble-message', this.g.fontFamily)
+        
     }
 
 

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

@@ -8,6 +8,7 @@
 
     <!-- HEADER -->
     <chat-conversation-header
+        *ngIf="!g?.hideHeaderConversation"
         [idConversation]= "conversationWith"
         [senderId]="senderId"
         [soundEnabled]="g?.soundEnabled"
@@ -18,6 +19,8 @@
         [hideHeaderConversationOptionsMenu]="g?.hideHeaderConversationOptionsMenu"
         [hideSignOutOptionMenu]="(!g?.singleConversation || !g?.showLogoutOption)"
         [hideChatDetailOptionMenu]="(!g?.isDevMode)"
+        [fullscreenMode]="g?.fullscreenMode"
+        [size]="g?.size"
         [stylesMap]="stylesMap"
         [translationMap]="translationMapHeader"
         [widgetTitle]="g?.project?.widgetTitle"
@@ -135,8 +138,7 @@
             (onAfterSendMessage)="onAfterSendMessageFN($event)"
             (onChangeTextArea)="onChangeTextArea($event)"
             (onAttachmentFileButtonClicked)="onAttachmentFileButtonClicked($event)"
-            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)"
-            (onBackButton)="onBackButton($event)">
+            (onNewConversationButtonClicked)="onNewConversationButtonClickedFN($event)">
         </chat-conversation-footer>
 
     </div>

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

@@ -1,8 +1,6 @@
 // $f21ico-schedule: image-url('f21ico-schedule.svg', false, false);
 // $f21ico-done: image-url('../assets/images/f21ico-done.svg', false, false);
 // $f21ico-done_all: image-url('../assets/images/f21ico-done_all.svg', false, false);
-// @import 'src/app/sass/variables';
-// @import '../../../sass/normalize.css';
 
 :host {
     --themeColor: var(--bck-msg-sent);
@@ -60,7 +58,7 @@
             font-weight: 500;
             line-height: 22px;
 
-            font-family: Mulish, sans-serif;
+            font-family: var(--font-family-powered-by);
             letter-spacing: -0.24px;
             -webkit-font-smoothing: antialiased;
 
@@ -91,16 +89,13 @@
     left: 0px;
     right: 0px;
     margin: 0px;
+    margin: 12px 8px;
     // padding: 0;
     
     // box-shadow: 0 -1px 0px 0px $trasp-light-gray;
     background: white;
     min-height: 40px;
 
-    &.maximize-width{
-        padding: 8px 0px;
-    }
-
     &.hideFooterReply{
         padding: 0px;
     }
@@ -186,4 +181,72 @@ dialog:-internal-dialog-in-top-layer{
             }
         }
     }
+}
+
+@media(min-width:688px){
+    
+    #chat21-footer{
+        left: 20%;
+        right: 20%;
+        margin: 12px 0px 30px;
+    }
+
+    :host-context(#chat21-conversations.full-screen-mode){
+        --button-in-msg-padding: 10px 16px;
+        
+        chat-conversation-content ::ng-deep{
+            .attachment_container,
+            .buttons-wrapper {
+                justify-content: flex-start;
+            }
+    
+            .button-in-message{
+                padding: 14px 22px !important
+            }
+
+            chat-message-attachment {
+                margin: auto 20px auto 10px; //0 20px 4px 10px;
+                margin-left: calc( var(--avatar-width) + 10px )
+
+            }
+    
+        }
+     
+    }
+
+    chat-conversation-footer ::ng-deep {
+        .textarea-container {
+            padding: 8px 24px;
+            background-color: var(--chat-footer-background-color);
+            border-radius: 28px;
+
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 0px solid #e5e7eb;
+            border-radius: 2rem;
+            background-color: #ffffff;
+            box-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #0000000a)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #0000009e));
+            transition: border-color 0.2s 
+            ease, box-shadow 0.2s 
+            ease;
+
+            .visible-text-area {
+                background-color: #ffffff;
+            }
+        }
+        #hiddenFooter,
+        #emoji-mart-container {
+            bottom: calc(100% + 6px);
+        }
+    }
+
+
+
+    ::ng-deep .chat21-sheet-content{
+        bottom: calc(var(--chat-footer-logo-height) + var(--chat-footer-height) + 34px)!important;
+    }
+    
 }