@chat21/chat21-web-widget 5.0.86 → 5.0.88

package/CHANGELOG.md

@@ -6,9 +6,33 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.0.88 in PROD
+
+# 5.0.87 in PROD
+
 # 5.0.86 in PROD
 
-# 5.0.85 in PROD
+# 5.0.85-rc.2
+- **added**: loading progress indicator while closing a conversation
+
+# 5.0.85-rc.1
+- **added**: hide header restart menu option if conversation is closed
+- **removed**: continueConversationBeforeTime settings property
+
+# 5.0.84 in PROD
+
+# 5.0.84-rc.4
+- **added**: checkAcceptedFile fn on dragleave event conversation-content component
+- **added**: checkAcceptedFile fn  in conversation-footer component
+
+# 5.0.84-rc.3
+- **changed**: index-dev lib order import
+
+# 5.0.84-rc.2
+- **changed**: bootstrap, jquery and font-awesome libs
+
+# 5.0.84-rc.1
+- **removed**: innerHtml from document element
 
 # 5.0.83 in PROD
 

package/package.json

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

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

@@ -93,6 +93,7 @@
 
     <dialog #mydialog>
         <chat-confirm-close
+            [conversationId]="conversationId"
             [translationMap]="translationMapCloseChatDialog"
             [stylesMap]="stylesMap"
             (onDiaglogClosed)="onCloseDialog($event)">

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

@@ -39,6 +39,7 @@ import { CustomTranslateService } from 'src/chat21-core/providers/custom-transla
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
+import { checkAcceptedFile } from 'src/app/utils/utils';
 // import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -261,7 +262,8 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     const keysCloseChatDialog= [
       'BACK', 
       'CLOSE',
-      'CLOSE_CHAT'
+      'CLOSE_CHAT',
+      'CONFIRM_CLOSE_CHAT'
     ];
 
     
@@ -990,6 +992,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
   onCloseChat(){
     this.logger.debug('[CONV-COMP] close chat with uid ', this.conversation.uid, this.conversationId)
     this.mydialog.nativeElement.showModal();
+    // this.isClosingConversation = false;
     this.isMenuShow = false
   }
   /** CALLED BY: confirm-close modal component */
@@ -1346,34 +1349,32 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       var mimeType = fileList[0].type
       this.logger.log('[CONV-COMP] ----> FILE - DROP mimeType files ', mimeType)
 
-      // if (mimeType.startsWith("image") || mimeType.startsWith("application")) {
-      // this.logger.log('[CONV-COMP] ----> FILE - DROP mimeType files: ', this.appConfigProvider.getConfig().fileUploadAccept);
-      // this.checkAcceptedFile(mimeType);
-      // const isAccepted = this.checkAcceptedFile(mimeType)
-      // this.logger.log('[CONV-COMP] > checkAcceptedFile - fileUploadAccept isAcceptFile FILE - DROP',isAccepted)
-      // if (isAccepted === true) {
       this.dropEvent = event
-      // } else {
-      //   this.logger.log( '[CONV-COMP] ----> FILE - DROP mimeType files ', mimeType,'NOT SUPPORTED FILE TYPE')
-      //   this.presentToast(this.translationsMap.get('FAILED_TO_UPLOAD_THE_FORMAT_IS_NOT_SUPPORTED'), 'danger','toast-custom-class', 5000 )
-      //   // this.presentToastOnlyImageFilesAreAllowedToDrag()
-      // }
       
     }
   }
 
   allowDrop(event: any) {
-    event.preventDefault()
-    event.stopPropagation()
+    event.preventDefault();
+    event.stopPropagation();
     this.logger.log('[CONV-COMP] ----> FILE - (dragover) allowDrop ev ', event)
     this.isHovering = true
   }
 
   drag(event){
-    event.preventDefault()
+    event.preventDefault();
+    this.logger.log('[CONV-COMP] ----> FILE - (dragleave) drag ev ', event)
+    if (event.dataTransfer && event.dataTransfer.files) {
+      const files = event.dataTransfer.files;
+      const canUploadFile = checkAcceptedFile(files[0].type, this.appConfigService.getConfig().fileUploadAccept)
+      if(!canUploadFile){
+        this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.appConfigService.getConfig().fileUploadAccept)
+        return;
+      }
+    }
     event.stopPropagation()
-    console.log('dragleave-->', event)
     this.isHovering = false
   }
 
 }
+

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

@@ -1,5 +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 { 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';
@@ -129,48 +130,56 @@ export class ConversationFooterComponent implements OnInit, OnChanges {
         
         const that = this;
         if (event.target.files && event.target.files[0]) {
-            const nameFile = event.target.files[0].name;
-            const typeFile = event.target.files[0].type;
-            const size = event.target.files[0].size
-            const reader = new FileReader();
-              that.logger.debug('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
-              reader.addEventListener('load', function () {
-                that.logger.debug('[CONV-FOOTER] addEventListener load', reader.result);
-                that.isFileSelected = true;
-                // se inizia con image
-                if (typeFile.startsWith('image') && !typeFile.includes('svg')) {
-                  const imageXLoad = new Image;
-                  that.logger.debug('[CONV-FOOTER] onload ', imageXLoad);
-                  imageXLoad.src = reader.result.toString();
-                  imageXLoad.title = nameFile;
-                  imageXLoad.onload = function () {
-                    that.logger.debug('[CONV-FOOTER] onload image');
-                    // that.arrayFilesLoad.push(imageXLoad);
-                    const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
-                    that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile, size: size };
-                    that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
-                    // SEND MESSAGE
-                    that.loadFile();
-                  };
-                } else {
-                  that.logger.debug('[CONV-FOOTER] onload file');
-                  const fileXLoad = {
-                    src: reader.result.toString(),
-                    title: nameFile
-                  };
+
+          const canUploadFile = checkAcceptedFile(event.target.files[0].type, this.fileUploadAccept)
+          if(!canUploadFile){
+            this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.fileUploadAccept)
+            this.isFilePendingToUpload = false;
+            return;
+          }
+
+          const nameFile = event.target.files[0].name;
+          const typeFile = event.target.files[0].type;
+          const size = event.target.files[0].size
+          const reader = new FileReader();
+            that.logger.debug('[CONV-FOOTER] OK preload: ', nameFile, typeFile, reader);
+            reader.addEventListener('load', function () {
+              that.logger.debug('[CONV-FOOTER] addEventListener load', reader.result);
+              that.isFileSelected = true;
+              // se inizia con image
+              if (typeFile.startsWith('image') && !typeFile.includes('svg')) {
+                const imageXLoad = new Image;
+                that.logger.debug('[CONV-FOOTER] onload ', imageXLoad);
+                imageXLoad.src = reader.result.toString();
+                imageXLoad.title = nameFile;
+                imageXLoad.onload = function () {
+                  that.logger.debug('[CONV-FOOTER] onload image');
                   // that.arrayFilesLoad.push(imageXLoad);
                   const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
-                  that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile, size: size };
+                  that.arrayFilesLoad[0] = { uid: uid, file: imageXLoad, type: typeFile, size: size };
                   that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
                   // SEND MESSAGE
                   that.loadFile();
-                }
-              }, false);
-
-              if (event.target.files[0]) {
-                reader.readAsDataURL(event.target.files[0]);
-                that.logger.debug('[CONV-FOOTER] reader-result: ', event.target.files[0]);
+                };
+              } else {
+                that.logger.debug('[CONV-FOOTER] onload file');
+                const fileXLoad = {
+                  src: reader.result.toString(),
+                  title: nameFile
+                };
+                // that.arrayFilesLoad.push(imageXLoad);
+                const uid = (new Date().getTime()).toString(36); // imageXLoad.src.substring(imageXLoad.src.length - 16);
+                that.arrayFilesLoad[0] = { uid: uid, file: fileXLoad, type: typeFile, size: size };
+                that.logger.debug('[CONV-FOOTER] OK: ', that.arrayFilesLoad[0]);
+                // SEND MESSAGE
+                that.loadFile();
               }
+            }, false);
+
+            if (event.target.files[0]) {
+              reader.readAsDataURL(event.target.files[0]);
+              that.logger.debug('[CONV-FOOTER] reader-result: ', event.target.files[0]);
+            }
         }
     }
   }

package/src/app/component/message/bubble-message/bubble-message.component.html

@@ -69,16 +69,7 @@
           [themeColor]="stylesMap.get('themeColor')"
           [foregroundColor]="stylesMap.get('foregroundColor')">
         </chat-html>
-        <!-- <p #messageEl class="message_innerhtml marked" [innerHTML]="printMessage(message, messageEl, this) | marked"></p> -->
-        <!-- <div *ngIf="isPopupUrl(message.text); then contentPopup else contentNewTab">here
-            is ignored</div>
-        <ng-template #contentPopup>
-            <p style="text-decoration: underline; padding:8px; cursor: pointer;"
-                (click)="popupUrl(g.windowContext, message.text,'windowName')">{{strip_tags(message.text)}}</p>
-        </ng-template>
-        <ng-template #contentNewTab>
-            <p #messageEl [innerHTML]="printMessage(message, messageEl, this) | linky"></p>
-        </ng-template> -->
+
       </div>
   
     </div>

package/src/app/modals/confirm-close/confirm-close.component.html

@@ -10,20 +10,20 @@
         </button>
     </div>
     <div class="content">
-        <div class="text">Are you sure you wanna close this chat?</div>
+        <div class="text">{{ translationMap?.get('CONFIRM_CLOSE_CHAT') }}</div>
         <div class="options">
 
             <!-- BUTTON CANCEL-->
-            <span class="v-align-center c21-label-button back-button" (click)="onBack()">
+            <span class="v-align-center c21-label-button back-button" [class.disabled]="isLoadingActive" (click)="onBack()">
                 {{translationMap?.get('BACK')}}
             </span> 
 
             <!-- BUTTON CLOSE-->
-            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('themeForegroundColor') }">
-                <span *ngIf="isLoadingActive" style="height: inherit; width: inherit;">
-                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" with="25" height="25"
+            <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="onConfirm()" [ngStyle]="{'background-color': stylesMap?.get('themeColor'), 'border-color': stylesMap?.get('themeColor'), 'color': stylesMap?.get('foregroundColor') }">
+                <span *ngIf="isLoadingActive" class="spinner-container">
+                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25" height="25" [ngStyle]="{'fill': stylesMap?.get('foregroundColor') }"
                         viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
-                        <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
+                        <path fill="inherit" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                         <animateTransform 
                             attributeName="transform" 
                             attributeType="XML" 

package/src/app/modals/confirm-close/confirm-close.component.scss

@@ -28,12 +28,23 @@
         }
 
         .back-button{
-            color: #777777
+            color: #777777;
+
+            &.disabled{
+                cursor: not-allowed;
+                pointer-events: none;
+                opacity: 0.6
+            }
         }
 
-    }
+        .spinner-container{
+            width: inherit;
+            height: inherit;
+            display: flex;
+            align-items: center;
+        }
 
-    
+    }
 }
 
 .c21-header-button{

package/src/app/modals/confirm-close/confirm-close.component.ts

@@ -1,4 +1,6 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, SimpleChange, SimpleChanges, ViewChild, OnDestroy } from '@angular/core';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 
 
 @Component({
@@ -7,20 +9,33 @@ import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild }
   styleUrls: ['./confirm-close.component.scss']
 })
 export class ConfirmCloseComponent implements OnInit{
-  
-  isLoadingActive: boolean = false;
+
+  @Input() isLoadingActive: boolean;
+  @Input() conversationId: string;
 
   @Input() translationMap: Map< string, string>;
   @Input() stylesMap: Map<string, string>;
   @Output() onDiaglogClosed = new EventEmitter<{type: string, data: any}>();
 
+  private logger: LoggerService = LoggerInstance.getInstance();
   constructor() { }
 
   ngOnInit(): void {
-    console.log('[CONFIRM CLOSE MODAL] onInit');
+    this.logger.log('[CONFIRM CLOSE MODAL] onInit', this.isLoadingActive, this.stylesMap);
     // this.dialog.showModal();
   }
 
+  ngOnChanges(changes: SimpleChanges){
+    if(changes && 
+      changes['conversationId'] && 
+      changes['conversationId'].previousValue !== undefined && 
+      (changes['conversationId'].previousValue !== changes['conversationId'].currentValue) &&
+      changes['conversationId'].currentValue
+    ){
+    this.isLoadingActive = false;
+  }
+  }
+
   ngAfterViewInit(){
   }
 

package/src/app/utils/utils.ts

@@ -387,3 +387,48 @@ export function getUnique(arr, comp) {
     // eliminate the dead keys & store unique objects
     .filter(e => arr[e]).map(e => arr[e]);
 }
+
+export function checkAcceptedFile(fileType, fileUploadAccept ): boolean{
+  
+  if (fileUploadAccept === '*/*') {
+    return true
+  }
+  // Dividi la stringa fileUploadAccept in un array di tipi accettati
+  const acceptedTypes = fileUploadAccept.split(',');
+
+  // Verifica se il tipo di file è accettato
+  return acceptedTypes.some((accept) => {
+    accept = accept.trim();
+    // Controlla per i tipi MIME con wildcard, come image/*
+    if (accept.endsWith('/*')) {
+      const baseMimeType = fileType.split('/')[0]; // Ottieni la parte principale del MIME type
+      return accept.replace('/*', '') === baseMimeType;
+    }
+    
+    // Controlla se l'accettazione è un MIME type esatto (come image/jpeg)
+    if (accept === fileType) {
+      return true;
+    }
+
+    // Controlla per le estensioni di file specifiche come .pdf o .txt
+    return fileType === getMimeTypeFromExtension(accept);
+  });
+
+}
+
+function getMimeTypeFromExtension(extension: string): string {
+  // Rimuovi il punto dall'estensione e ottieni il MIME type
+  const mimeTypes: { [key: string]: string } = {
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.png': 'image/png',
+      '.gif': 'image/gif',
+      '.pdf': 'application/pdf',
+      '.txt': 'text/plain',
+      '.doc': 'application/msword',
+      '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      '.wav' : 'audio/wav'
+      // Aggiungi altri tipi MIME se necessario
+  };
+  return mimeTypes[extension] || '';
+}

package/src/assets/twp/blank.html

@@ -148,6 +148,9 @@
     <meta property="og:image" content="https://tiledesk.com/wp-content/uploads/2022/12/6029654-02-min.png" />
     <meta property="og:locale" content="en">
     
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
+
 
     <script type="application/javascript">
         window.tiledeskSettings = {
@@ -307,11 +310,5 @@
     <div id="preloader">
         <div class="loader"></div>
     </div>
-
-<div>
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-</div>
 </body>
 </html>

package/src/assets/twp/chatbot-panel.html

@@ -438,10 +438,12 @@
     <meta property="og:locale" content="en">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
-
+  
     <!-- <script type="application/javascript">
         window.tiledeskSettings = {
             marginX: "100px",
@@ -592,7 +594,7 @@
         }
 
         window.onload = function() {
-            document.getElementById("tiledesk_widgetTitle").innerHTML = tiledesk_widgetTitle;
+            document.getElementById("tiledesk_widgetTitle").value = tiledesk_widgetTitle;
         }
 
 
@@ -712,15 +714,5 @@
 </script>
 
 <!-- Google Analytics -->
-
-
-
-
-<div>
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/css" rel="stylesheet" type="text/css"> -->
-</div>
 </body>
 </html>

package/src/assets/twp/index-dev.html

@@ -469,6 +469,8 @@
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
 
@@ -504,8 +506,8 @@
                 document.getElementById('events').scrollTop = document.getElementById('events').scrollHeight
             }
 
-            document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
-            document.getElementById("project_name").innerHTML = project_name;
+            document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
+            document.getElementById("project_name").value = project_name;
         });
 
         window.Tiledesk('onBeforeInit', function(event_data) {
@@ -518,7 +520,7 @@
                     
                     var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
                     document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").innerHTML = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
+                    document.getElementById("base_url").value = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
                     
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }
@@ -1444,8 +1446,8 @@
         // console.log('project_name: ', project_name);
         
         // window.onload = function() {
-        //     document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
-        //     document.getElementById("project_name").innerHTML = project_name;
+        //     document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
+        //     document.getElementById("project_name").value = project_name;
         // }
 
 
@@ -2616,15 +2618,5 @@
 </script> -->
 
 <!-- Google Analytics -->
-
-
-
-
-<div>
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/css" rel="stylesheet" type="text/css"> -->
-</div>
 </body>
 </html>

package/src/assets/twp/index.html

@@ -245,7 +245,10 @@
     <meta property="og:locale" content="en">
     
     <link rel="icon" type="image/png" href="./tiledesk_widget_files/logo-short.png">
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
+    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
+    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
 
@@ -297,7 +300,7 @@
                     
                     var enbedJs = event_data.detail.appConfigs.enbedJs? event_data.detail.appConfigs.enbedJs : false;
                     document.getElementById("enbed").style.display = enbedJs? "inline-block": "none";
-                    document.getElementById("base_url").innerHTML = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
+                    document.getElementById("base_url").value = enbedJs ? window.tiledesk.getBaseLocation() + '/launch.js': null;
                     
                     baseUrlConsole = event_data.detail.appConfigs.dashboardUrl? event_data.detail.appConfigs.dashboardUrl : baseUrlConsole;
                 }
@@ -436,8 +439,8 @@
         // console.log('project_name: ', project_name);
 
         window.onload = function() {
-            document.getElementById("project_id").innerHTML = '"' + tiledesk_projectid + '"';
-            document.getElementById("project_name").innerHTML = project_name;
+            document.getElementById("project_id").value = '"' + tiledesk_projectid + '"';
+            document.getElementById("project_name").value = project_name;
             
             if(role !== 'agent'){
                 document.getElementById("testPageButton").style.display = 'block'
@@ -629,14 +632,5 @@
 </script> -->
 
 <!-- Google Analytics -->
-
-
-
-
-<div>
-    <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
-    <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-</div>
 </body>
 </html>