@chat21/chat21-web-widget 5.0.56 → 5.0.57-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +0 -3
  3. package/package.json +1 -1
  4. package/src/app/component/conversation-detail/conversation/conversation.component.html +7 -2
  5. package/src/app/component/conversation-detail/conversation/conversation.component.scss +51 -3
  6. package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html +82 -93
  7. package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss +75 -60
  8. package/src/app/component/last-message/last-message.component.ts +2 -0
  9. package/src/app/component/message/bubble-message/bubble-message.component.ts +2 -0
  10. package/src/app/component/message/image/image.component.html +1 -0
  11. package/src/app/providers/global-settings.service.ts +18 -1
  12. package/src/app/utils/globals.ts +2 -0
  13. package/src/chat21-core/providers/abstract/typing.service.ts +2 -2
  14. package/src/chat21-core/providers/firebase/firebase-presence.service.ts +4 -4
  15. package/src/chat21-core/providers/mqtt/mqtt-presence.service.ts +25 -11
  16. package/src/chat21-core/utils/utils-message.ts +2 -2
  17. package/src/widget-config-template.json +0 -1
  18. package/src/widget-config.json +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # chat21-web-widget ver 5.0
2
2
 
3
+ ### 5.0.57-rc.1
4
+ - added: fileUploadAccept as a tiledesk property
5
+ - added: tiledesk logo during conversation
6
+ - added: presence manger on mqtt service
7
+ - changed: new conversation-footer UI
8
+ - removed: fileUploadAccept from envs and template
9
+
3
10
  ### 5.0.56 in PROD
4
11
 
5
12
  ### 5.0.56-rc.6
package/README.md CHANGED
@@ -72,7 +72,6 @@ export const environment = {
72
72
  remoteTranslationsUrl: 'https://<YOUR_REMOTE_TRANSLATIONS_URL>/',
73
73
  chatEngine: "mqtt", // OR YOUR CUSTOM CHAT ENGINE
74
74
  updloaEngine: "native", // OR YOUR CUSTOM UPLOAD ENGINE
75
- fileUploadAccept:"*/*",
76
75
  logLevel: '<YOUR-PREFERRED-LOG-LEVEL-NUMBER>',
77
76
  firebaseConfig: {
78
77
  apiKey: '123ABC..',
@@ -103,8 +102,6 @@ export const environment = {
103
102
  * `logLevel`: The Tiledesk web-widget supports 4 log levels. The order is as follows:
104
103
  `Error < Warn < Info < Debug`
105
104
 
106
- * `fileUploadAccept`: The Tiledesk web-widget allows you to manage the type of files that can be uploaded. By default, all file types are accepted.
107
-
108
105
  ### RUN in dev
109
106
 
110
107
  Run the app with `ng serve`
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@chat21/chat21-web-widget",
3
3
  "author": "Tiledesk SRL",
4
- "version": "5.0.56",
4
+ "version": "5.0.57-rc.1",
5
5
  "license": "MIT",
6
6
  "homepage": "https://www.tiledesk.com",
7
7
  "repository": {
package/src/app/component/conversation-detail/conversation/conversation.component.html CHANGED
@@ -92,12 +92,17 @@
92
92
  </chat-conversation-attachment-preview>
93
93
 
94
94
  <!-- FOOTER -->
95
- <div id="chat21-footer" [class.maximize-width]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)" [class.hideFooterReply]="hideFooterTextReply">
95
+ <!-- [class.maximize-width]="(g?.singleConversation && hideTextAreaContent) || (isConversationArchived && !g?.allowReopen)" -->
96
+ <div id="chat21-footer">
96
97
  <div *ngIf="showBadgeScroollToBottom" id="chat21-buttonToBottom" (click)="scrollToBottom()">
97
98
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M24 24H0V0h24v24z"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
98
99
  <div *ngIf="messagesBadgeCount!=0" id="chat21-divBudge" class="c21-divBudge">{{messagesBadgeCount}}</div>
99
100
  </div>
100
101
 
102
+ <!-- <div id="hiddenFooter" *ngIf="!hideTextAreaContent" class="fade-in-bottom">
103
+ <div tabindex="-1" class="c21-powered-by" [innerHTML]="g.poweredBy"></div>
104
+ </div> -->
105
+
101
106
  <chat-conversation-footer
102
107
  [conversationWith]="conversationWith"
103
108
  [attributes]="g?.attributes"
@@ -115,7 +120,7 @@
115
120
  [isMobile]="g?.isMobile"
116
121
  [isEmojiiPickerShow]="isEmojiiPickerShow"
117
122
  [footerMessagePlaceholder]="footerMessagePlaceholder"
118
- [fileUploadAccept]="appConfigService?.getConfig().fileUploadAccept"
123
+ [fileUploadAccept]="g?.fileUploadAccept"
119
124
  [dropEvent]="dropEvent"
120
125
  [poweredBy]="g?.poweredBy"
121
126
  [stylesMap]="stylesMap"
package/src/app/component/conversation-detail/conversation/conversation.component.scss CHANGED
@@ -29,6 +29,56 @@
29
29
  }
30
30
 
31
31
  /* ================== CSS chat21-footer ==================== */
32
+
33
+ #hiddenFooter{
34
+ .c21-powered-by {
35
+ height: 40px;
36
+ text-align: center;
37
+ padding: 0;
38
+ // margin: 5px 0;
39
+ // position: absolute;
40
+ color: var(--gray);
41
+ // top: 0;
42
+ // left: 20px; //60px;
43
+ // right: 60px;
44
+ display: flex;
45
+ align-items: center;
46
+ justify-content: center;
47
+
48
+ &::ng-deep a {
49
+ text-decoration: none;
50
+ cursor: pointer;
51
+ display: inline-block;
52
+ color: var(--gray);
53
+ font-size: 1.1em;
54
+ font-weight: 500;
55
+ line-height: 22px;
56
+
57
+ font-family: Mulish, sans-serif;
58
+ letter-spacing: -0.24px;
59
+ -webkit-font-smoothing: antialiased;
60
+
61
+ span {
62
+ display: inline-block;
63
+ position: relative;
64
+ top: 2px;
65
+ }
66
+
67
+ img {
68
+ width: 80px; //60px;
69
+ height: auto;
70
+ max-height: 40px;
71
+ position: relative;
72
+ vertical-align: middle;
73
+ object-fit: contain;
74
+ }
75
+ }
76
+ b{
77
+ font-weight: bolder;
78
+ }
79
+ }
80
+ }
81
+
32
82
  #chat21-footer {
33
83
  position: fixed;
34
84
  bottom: 0px;
@@ -36,9 +86,7 @@
36
86
  right: 0px;
37
87
  margin: 0px;
38
88
  // padding: 0;
39
- padding: 8px 34px;
40
- padding-left: 70px;
41
- padding-right: 45px;
89
+
42
90
  // box-shadow: 0 -1px 0px 0px $trasp-light-gray;
43
91
  background: white;
44
92
  min-height: 40px;
package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html CHANGED
@@ -1,70 +1,64 @@
1
- <div id="floating-container" *ngIf="hideTextAreaContent" class="fade-in-bottom" start-focus-chat21-conversation-component>
2
- <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
3
- <span class="v-align-center">
4
- <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
5
- <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}"/>
6
- </svg>
7
- </span>
8
- <span class="v-align-center c21-label-button">
9
- {{translationMap?.get('LABEL_START_NW_CONV')}}
10
- </span>
11
- <div class="clear"></div>
12
- </button>
13
- <button *ngIf="showContinueConversationButton" tabindex="1040" class="c21-button-primary" (click)="onContinueConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
14
- <span class="v-align-center c21-label-button">
15
- {{translationMap?.get('CONTINUE')}}
16
- </span>
17
- <div class="clear"></div>
18
- </button>
19
- </div>
1
+ <div class="textarea-container" *ngIf="!hideTextAreaContent && !hideTextReply">
2
+
3
+ <div class="icons-container">
4
+ <!-- ICON ATTACHMENT -->
5
+ <label *ngIf="showAttachmentButton == true" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
6
+ <span class="v-align-center">
7
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" transform="rotate(45)">
8
+ <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
9
+ </svg>
10
+ </span>
11
+ <input
12
+ [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
13
+ tabindex="1503"
14
+ type="file"
15
+ aria-label="seleziona allegato"
16
+ [accept]="fileUploadAccept"
17
+ name="chat21-file"
18
+ id="chat21-file"
19
+ #chat21_file
20
+ class="inputfile"
21
+ [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
22
+ (change)="detectFiles($event)"/>
23
+ </label>
24
+ <!-- ICON EMOJII -->
25
+ <label tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
26
+ <span class="v-align-center">
27
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" >
28
+ <path d="M0 0h24v24H0V0z" fill="none"/>
29
+ <circle cx="15.5" cy="9.5" r="1.5"/>
30
+ <circle cx="8.5" cy="9.5" r="1.5"/>
31
+ <path d="M12 16c-1.48 0-2.75-.81-3.45-2H6.88c.8 2.05 2.79 3.5 5.12 3.5s4.32-1.45 5.12-3.5h-1.67c-.7 1.19-1.97 2-3.45 2zm-.01-14C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
32
+ </svg>
33
+ </span>
34
+ </label>
35
+ </div>
20
36
 
21
- <div id="hiddenFooter" *ngIf="hideTextReply && !hideTextAreaContent" class="fade-in-bottom">
22
- <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy"></div>
23
- </div>
24
37
 
25
- <div class="visible-text-area" *ngIf="!hideTextAreaContent && !hideTextReply" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
26
- <!-- isFilePendingToUpload || -->
27
- <textarea
28
- [attr.disabled] = "(hideTextReply)? true : null"
29
- [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
30
- start-focus-chat21-conversation-component
31
- inputTextArea
32
- #textbox
33
- tabindex="1501"
34
- aria-labelledby="altTextArea"
35
- rows="1"
36
- id="chat21-main-message-context"
37
- class='f21textarea c21-button-clean'
38
- [(ngModel)]="textInputTextArea"
39
- (ngModelChange)="onTextAreaChange()"
40
- (keypress)="onkeypress($event)"
41
- (keydown)="onkeydown($event)"
42
- (paste)="onPaste($event)">
43
- </textarea>
44
38
 
45
- </div>
46
- <!-- -->
47
- <div #div_attached *ngIf="!hideTextAreaContent && !hideTextReply">
48
- <!-- ICON ATTACHMENT -->
49
- <label *ngIf="showAttachmentButton == true" tabindex="1502" aria-label="allegati" for="chat21-file" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-start-upload-doc">
50
- <span class="v-align-center">
51
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" transform="rotate(45)">
52
- <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z" />
53
- </svg>
54
- </span>
55
- <input
56
- [attr.disabled] = "(isFilePendingToUpload || isConversationArchived || hideTextReply)? true : null"
57
- tabindex="1503"
58
- type="file"
59
- aria-label="seleziona allegato"
60
- [accept]="fileUploadAccept"
61
- name="chat21-file"
62
- id="chat21-file"
63
- #chat21_file
64
- class="inputfile"
65
- [ngStyle]="{'display': 'block', height:'1px', width:'1px', overflow: 'hidden' }"
66
- (change)="detectFiles($event)"/>
67
- </label>
39
+
40
+ <div class="visible-text-area" [class.disabled] = "( isConversationArchived || hideTextReply)? true : null">
41
+ <!-- isFilePendingToUpload || -->
42
+ <textarea
43
+ [attr.disabled] = "(hideTextReply)? true : null"
44
+ [attr.placeholder] ="(footerMessagePlaceholder)? footerMessagePlaceholder : translationMap?.get('LABEL_PLACEHOLDER')"
45
+ start-focus-chat21-conversation-component
46
+ inputTextArea
47
+ #textbox
48
+ tabindex="1501"
49
+ aria-labelledby="altTextArea"
50
+ rows="1"
51
+ id="chat21-main-message-context"
52
+ class='f21textarea c21-button-clean'
53
+ [(ngModel)]="textInputTextArea"
54
+ (ngModelChange)="onTextAreaChange()"
55
+ (keypress)="onkeypress($event)"
56
+ (keydown)="onkeydown($event)"
57
+ (paste)="onPaste($event)">
58
+ </textarea>
59
+
60
+ </div>
61
+
68
62
  <!-- ICON SEND -->
69
63
  <div tabindex="-1" class="chat21-textarea-button" [class.active]="textInputTextArea && !hideTextReply" id="chat21-button-send" (click)="onSendPressed($event)">
70
64
  <span class="v-align-center">
@@ -73,38 +67,13 @@
73
67
  </svg>
74
68
  </span>
75
69
  </div>
76
- <!-- ICON EMOJII -->
77
- <label tabindex="1504" aria-label="emojii" for="chat21-emojii" class="chat21-textarea-button" [class.active]="!isFilePendingToUpload && !hideTextReply" id="chat21-emoticon-picker" (click)="onEmojiiPickerClicked()">
78
- <span class="v-align-center">
79
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" >
80
- <path d="M0 0h24v24H0V0z" fill="none"/>
81
- <circle cx="15.5" cy="9.5" r="1.5"/>
82
- <circle cx="8.5" cy="9.5" r="1.5"/>
83
- <path d="M12 16c-1.48 0-2.75-.81-3.45-2H6.88c.8 2.05 2.79 3.5 5.12 3.5s4.32-1.45 5.12-3.5h-1.67c-.7 1.19-1.97 2-3.45 2zm-.01-14C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
84
- </svg>
85
- </span>
86
- </label>
87
70
  </div>
88
71
 
72
+ <div id="hiddenFooter" *ngIf="!hideTextAreaContent" class="fade-in-bottom"
73
+ [class.hideTextReply]="hideTextReply">
74
+ <div tabindex="-1" class="c21-powered-by" [innerHTML]="poweredBy"></div>
75
+ </div>
89
76
 
90
- <!-- <div #div_mic *ngIf="g.showMicButton" id="playbutton">
91
- <button *ngIf="!isRecording" tabindex="1502" aria-label="microfono" for="chat21-file" [class.active]="true" class="chat21-textarea-button c21-button-clean" id="chat21-start-mic" (click)="toggleRecording($event)">
92
- <span class="v-align-center">
93
- <svg aria-label="registra traccia audio" xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': g.themeColor}" width="24" height="24" viewBox="0 0 28 28">
94
- <path d="M12,14c1.66,0,3-1.34,3-3V5c0-1.66-1.34-3-3-3S9,3.34,9,5v6C9,12.66,10.34,14,12,14z"/>
95
- <path d="M17,11c0,2.76-2.24,5-5,5s-5-2.24-5-5H5c0,3.53,2.61,6.43,6,6.92V21h2v-3.08c3.39-0.49,6-3.39,6-6.92H17z"/>
96
- </svg>
97
- </span>
98
- </button>
99
- <button *ngIf="isRecording" tabindex="1502" aria-label="stop registrazione" for="chat21-file" [class.active]="true" class="chat21-textarea-button c21-button-clean " id="chat21-start-mic" (click)="toggleRecording($event)" autofocus>
100
- <span class="v-align-center">
101
- <svg aria-label="termina registrazione" xmlns="http://www.w3.org/2000/svg" [ngStyle]="{'fill': g.themeColor}" width="24" height="24" viewBox="0 0 28 28">
102
- <path d="M0 0h24v24H0z" fill="none"/>
103
- <path d="M6 6h12v12H6z"/>
104
- </svg>
105
- </span>
106
- </button>
107
- </div> -->
108
77
 
109
78
  <div [style.visibility]="isEmojiiPickerShow?'visible':'hidden'" class="emoji-container">
110
79
  <emoji-mart id="emoji-mart"
@@ -120,3 +89,23 @@
120
89
  (emojiSelect)="addEmoji($event)">
121
90
  </emoji-mart>
122
91
  </div>
92
+
93
+ <div id="floating-container" *ngIf="hideTextAreaContent" class="fade-in-bottom" start-focus-chat21-conversation-component>
94
+ <button tabindex="1040" aflistconv #aflistconv class="c21-button-primary" (click)="openNewConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
95
+ <span class="v-align-center">
96
+ <svg [ngStyle]="{'fill': 'yellow' }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
97
+ <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" [ngStyle]="{'fill': stylesMap?.get('foregroundColor')}"/>
98
+ </svg>
99
+ </span>
100
+ <span class="v-align-center c21-label-button">
101
+ {{translationMap?.get('LABEL_START_NW_CONV')}}
102
+ </span>
103
+ <div class="clear"></div>
104
+ </button>
105
+ <button *ngIf="showContinueConversationButton" tabindex="1040" class="c21-button-primary" (click)="onContinueConversation()" [ngStyle]="{'background-color': stylesMap.get('themeColor'), 'border-color': stylesMap.get('themeColor'), 'color': stylesMap?.get('foregroundColor')}">
106
+ <span class="v-align-center c21-label-button">
107
+ {{translationMap?.get('CONTINUE')}}
108
+ </span>
109
+ <div class="clear"></div>
110
+ </button>
111
+ </div>
package/src/app/component/conversation-detail/conversation-footer/conversation-footer.component.scss CHANGED
@@ -1,6 +1,25 @@
1
1
  // @import 'src/app/sass/variables';
2
2
 
3
+ .textarea-container{
4
+ // padding: 8px 34px;
5
+ // padding-left: 70px;
6
+ // padding-right: 45px;
7
+ display: flex;
8
+ width: 100%;
9
+ align-items: center;
10
+ gap: 10px;
11
+ justify-content: space-between;
12
+ }
13
+
14
+ .icons-container{
15
+ display: flex;
16
+ align-self: flex-end;
17
+ margin-left: 8px
18
+ }
19
+
3
20
  .visible-text-area {
21
+ width: 70%;
22
+ margin: 8px 0px;
4
23
  pointer-events: auto;
5
24
  border-radius: var(--chat-footer-border-radius);
6
25
  background-color: var(--chat-footer-background-color);
@@ -12,6 +31,26 @@
12
31
  .chat21-textarea-button {
13
32
  fill: var(--icon-fill-color);
14
33
  pointer-events: auto;
34
+
35
+ height: var(--chat-footer-height);
36
+ bottom: 22px;
37
+ opacity: 0.3;
38
+ cursor: initial;
39
+ &.active {
40
+ opacity: 1;
41
+ cursor: pointer;
42
+ }
43
+ }
44
+
45
+ .chat21-textarea-button span svg:hover {
46
+ background: rgba(240,240,240,0.4)!important;
47
+ opacity: 1!important;
48
+ transition: all .45s ease-in-out 0s!important;
49
+ -moz-transition: all .45s ease-in-out 0s!important;
50
+ -webkit-transition: all .45s ease-in-out 0s!important;
51
+ padding: 0px;
52
+ margin: 0px;
53
+ border-radius: 50%;
15
54
  }
16
55
 
17
56
  textarea,
@@ -107,13 +146,6 @@ textarea:active{
107
146
  }
108
147
  }
109
148
 
110
- textarea,
111
- textarea:visited,
112
- textarea:focus,
113
- textarea:hover,
114
- textarea:active{
115
- all: unset;
116
- }
117
149
 
118
150
  #chat21-main-message-context {
119
151
  overflow: hidden;
@@ -152,53 +184,14 @@ textarea:active{
152
184
  }
153
185
  }
154
186
 
155
- .chat21-textarea-button {
156
- position: absolute;
157
- display: block;
158
- height: var(--chat-footer-height);
159
- bottom: 22px;
160
- opacity: 0.3;
161
- cursor: initial;
162
- &.active {
163
- opacity: 1;
164
- cursor: pointer;
165
- }
166
- }
167
-
168
- .chat21-textarea-button span svg:hover {
169
- background: rgba(240,240,240,0.4)!important;
170
- opacity: 1!important;
171
- transition: all .45s ease-in-out 0s!important;
172
- -moz-transition: all .45s ease-in-out 0s!important;
173
- -webkit-transition: all .45s ease-in-out 0s!important;
174
- padding: 0px;
175
- margin: 0px;
176
- border-radius: 50%;
177
- }
178
-
179
- .chat21-back-button{
180
- position: absolute;
181
- display: block;
182
- height: var(--chat-footer-height);
183
- cursor: pointer;
184
- }
185
-
186
- .chat21-back-button span svg:hover {
187
- background: rgba(240,240,240,0.4)!important;
188
- opacity: 1!important;
189
- transition: all .45s ease-in-out 0s!important;
190
- -moz-transition: all .45s ease-in-out 0s!important;
191
- -webkit-transition: all .45s ease-in-out 0s!important;
192
- padding: 0px;
193
- margin: 0px;
194
- border-radius: 50%;
195
- }
196
-
197
-
198
187
  #chat21-button-send {
199
- right: 8px;
200
- bottom: 0;
188
+ // right: 8px;
189
+ // bottom: 0;
190
+ display: flex;
191
+ align-self: flex-end;
192
+ margin: 0 8px
201
193
  }
194
+
202
195
  #chat21-file{
203
196
  left: 8px;
204
197
  bottom: 0;
@@ -212,10 +205,8 @@ textarea:active{
212
205
  left: 8px;
213
206
  bottom: 0;
214
207
  }
215
- #chat21-back-button{
216
- left: 8px;
217
- bottom: 0;
218
- }
208
+
209
+
219
210
 
220
211
  #floating-container{
221
212
  width: 100%; //not 100% due to vertical scroll bar
@@ -231,6 +222,7 @@ textarea:active{
231
222
  box-shadow: none;
232
223
  vertical-align: top;
233
224
  text-align: center;
225
+ padding: 8px 0px;
234
226
 
235
227
  .c21-label-button {
236
228
  margin-left: 8px;
@@ -253,10 +245,27 @@ textarea:active{
253
245
 
254
246
 
255
247
  #hiddenFooter{
248
+ // position: absolute;
249
+ bottom: 100%;
250
+ width: 100%;
251
+ display: flex;
252
+ align-items: center;
253
+ justify-content: center;
254
+ position: absolute;
255
+ box-shadow: inset 0px -22px 16px -15px rgba(0,0,0,0.1);
256
+ &.hideTextReply{
257
+ height: var(--chat-footer-height);
258
+ position: unset;
259
+ box-shadow: none;
260
+ .c21-powered-by{
261
+ background-color: var(--chat-footer-background-color);
262
+
263
+ }
264
+ }
256
265
  .c21-powered-by {
257
- height: 40px;
266
+ // height: 40px;
258
267
  text-align: center;
259
- padding: 0;
268
+ // padding: 0;
260
269
  // margin: 5px 0;
261
270
  // position: absolute;
262
271
  color: var(--gray);
@@ -267,6 +276,12 @@ textarea:active{
267
276
  align-items: center;
268
277
  justify-content: center;
269
278
 
279
+
280
+
281
+ // background: white;
282
+ border-radius: 16px;
283
+ padding: 1px 8px;
284
+
270
285
  &::ng-deep a {
271
286
  text-decoration: none;
272
287
  cursor: pointer;
@@ -287,7 +302,7 @@ textarea:active{
287
302
  }
288
303
 
289
304
  img {
290
- width: 80px; //60px;
305
+ width: 60px; //60px;
291
306
  height: auto;
292
307
  max-height: 40px;
293
308
  position: relative;
@@ -311,7 +326,7 @@ textarea:active{
311
326
  height: 312px;
312
327
  position: absolute;
313
328
  overflow: hidden;
314
- width: 93%;
329
+ width: 89%;
315
330
  bottom: 100%;
316
331
  z-index: 10;
317
332
  left: 10px;
package/src/app/component/last-message/last-message.component.ts CHANGED
@@ -150,10 +150,12 @@ export class LastMessageComponent implements OnInit, AfterViewInit, OnDestroy {
150
150
  setTimeout(() => {
151
151
  if(this.messageListWRP.get(this.messages.length-1)){
152
152
  let height = getComputedStyle(this.messageListWRP.get(this.messages.length-1).nativeElement).height
153
+ // console.log('heightttttt--<', height, this.messages[this.messages.length-1])
153
154
  this.g.setWidgetPreviewContainerSize(0, +height.substring(0, height.length-2))
154
155
  }
155
156
  }, 50);
156
157
  }
158
+
157
159
  isSameSender(senderId: string, index: number){
158
160
  return isSameSender(this.messages, senderId, index)
159
161
  }
package/src/app/component/message/bubble-message/bubble-message.component.ts CHANGED
@@ -99,6 +99,8 @@ export class BubbleMessageComponent implements OnInit {
99
99
  height: metadata.height
100
100
  };
101
101
 
102
+ // console.log('sizeeeeeeee--<', sizeImage, metadata)
103
+
102
104
  if (metadata.width && metadata.width < MAX_WIDTH_IMAGES) {
103
105
  if (metadata.width <= 55) {
104
106
  const ratio = (metadata['width'] / metadata['height']);
package/src/app/component/message/image/image.component.html CHANGED
@@ -3,6 +3,7 @@
3
3
  <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width , 'height': height }"></div>
4
4
  <img
5
5
  class="message-contentX message-content-imageX"
6
+ [alt]="metadata?.name"
6
7
  [ngClass]="{'isLoadingImage': loading}"
7
8
  [ngStyle] = "{ 'width': width, 'height': height }"
8
9
  [src]="metadata.src"
package/src/app/providers/global-settings.service.ts CHANGED
@@ -503,6 +503,9 @@ export class GlobalSettingsService {
503
503
  if (variables.hasOwnProperty('themeColorOpacity')) {
504
504
  globals['themeColorOpacity'] = variables['themeColorOpacity'];
505
505
  }
506
+ if (variables.hasOwnProperty('fileUploadAccept')) {
507
+ globals['fileUploadAccept'] = variables['fileUploadAccept'];
508
+ }
506
509
 
507
510
  }
508
511
  }
@@ -1009,7 +1012,12 @@ export class GlobalSettingsService {
1009
1012
  // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > telegramUsername:: ', TEMP]);
1010
1013
  if (TEMP !== undefined) {
1011
1014
  globals.telegramUsername = TEMP;
1012
- }
1015
+ }
1016
+ TEMP = tiledeskSettings['fileUploadAccept'];
1017
+ // this.logger.debug('[GLOBAL-SET] setVariablesFromSettings > telegramUsername:: ', TEMP]);
1018
+ if (TEMP !== undefined) {
1019
+ globals.fileUploadAccept = TEMP;
1020
+ }
1013
1021
  }
1014
1022
 
1015
1023
  /**
@@ -1272,6 +1280,10 @@ export class GlobalSettingsService {
1272
1280
  if (TEMP !== null) {
1273
1281
  this.globals.participants = TEMP.split(',').map(key => { return key.trim()});
1274
1282
  }
1283
+ TEMP = el.nativeElement.getAttribute('fileUploadAccept');
1284
+ if (TEMP !== null) {
1285
+ this.globals.fileUploadAccept = TEMP;
1286
+ }
1275
1287
 
1276
1288
  }
1277
1289
 
@@ -1709,6 +1721,11 @@ export class GlobalSettingsService {
1709
1721
  if (TEMP) {
1710
1722
  globals.participants = TEMP.split(',').map(key => { return key.trim()});
1711
1723
  }
1724
+
1725
+ TEMP = getParameterByName(windowContext, 'tiledesk_fileUploadAccept');
1726
+ if (TEMP) {
1727
+ globals.fileUploadAccept = TEMP;
1728
+ }
1712
1729
  }
1713
1730
 
1714
1731
  /**
package/src/app/utils/globals.ts CHANGED
@@ -211,6 +211,7 @@ export class Globals {
211
211
  whatsappNumber: string; // ******* new ********
212
212
  messangerPageTitle: string; // ******* new ********
213
213
  telegramUsername: string; // ******* new ********
214
+ fileUploadAccept: string; // ******* new ********
214
215
  constructor(
215
216
  ) { }
216
217
 
@@ -385,6 +386,7 @@ export class Globals {
385
386
  /**enable user to set a facebook messanger page to chat with */
386
387
  this.telegramUsername = ''
387
388
  /**enable user to set a telegram number to chat with */
389
+ this.fileUploadAccept = "image/*,.pdf,.txt"
388
390
 
389
391
  this.showWaitTime = true;
390
392
 
package/src/chat21-core/providers/abstract/typing.service.ts CHANGED
@@ -9,8 +9,8 @@ import { BehaviorSubject } from 'rxjs';
9
9
  export abstract class TypingService {
10
10
 
11
11
  // BehaviorSubject
12
- BSIsTyping: BehaviorSubject<any>;
13
- BSSetTyping: BehaviorSubject<any>;
12
+ abstract BSIsTyping: BehaviorSubject<any>;
13
+ abstract BSSetTyping: BehaviorSubject<any>;
14
14
 
15
15
  // params
16
16
  // private DEFAULT_TENANT: string = environment.firebaseConfig.tenant;
package/src/chat21-core/providers/firebase/firebase-presence.service.ts CHANGED
@@ -148,6 +148,10 @@ export class FirebasePresenceService extends PresenceService {
148
148
  });
149
149
  }
150
150
 
151
+ public imHere(){
152
+ //NOT IMPLEMENTED FOR FIREBASE ENGINE
153
+ }
154
+
151
155
  /**
152
156
  * removePresence
153
157
  * richiamato prima del logout
@@ -186,8 +190,4 @@ export class FirebasePresenceService extends PresenceService {
186
190
  return connectionsRef;
187
191
  }
188
192
 
189
- public imHere(){
190
- //NOT IMPLEMENTED FOR FIREBASE ENGINE
191
- }
192
-
193
193
  }
package/src/chat21-core/providers/mqtt/mqtt-presence.service.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Chat21Service } from 'src/chat21-core/providers/mqtt/chat-service';
2
- import { Injectable } from '@angular/core';
2
+ import { Inject, Injectable, Optional } from '@angular/core';
3
3
  import { BehaviorSubject, Observable } from 'rxjs';
4
4
 
5
5
  // firebase
@@ -32,7 +32,8 @@ export class MQTTPresenceService extends PresenceService {
32
32
  private logger: LoggerService = LoggerInstance.getInstance();
33
33
 
34
34
  constructor(
35
- public chat21Service: Chat21Service
35
+ public chat21Service: Chat21Service,
36
+ @Optional() @Inject('webSocketService') public webSocketService?: any,
36
37
  ) {
37
38
  super();
38
39
  }
@@ -45,7 +46,20 @@ export class MQTTPresenceService extends PresenceService {
45
46
  }
46
47
 
47
48
  userIsOnline(userid: string): Observable<any> {
48
- return this.BSIsOnline
49
+ const that = this;
50
+ let local_BSIsOnline = new BehaviorSubject<any>(null);
51
+ this.webSocketService.wsRequesterStatus$.subscribe((data: any) => {
52
+ this.logger.log('[NATIVEPresenceSERVICE] $subs to wsService - data ', data, userid);
53
+ if (data && data.presence && data.presence.status === 'online' ) {
54
+ that.BSIsOnline.next({ uid: data.uuid_user, isOnline: true });
55
+ local_BSIsOnline.next({ uid: data.uuid_user, isOnline: true });
56
+ } else {
57
+ that.BSIsOnline.next({ uid: data.uuid_user, isOnline: false });
58
+ local_BSIsOnline.next({ uid: data.uuid_user, isOnline: false });
59
+ }
60
+ });
61
+
62
+ return local_BSIsOnline
49
63
  }
50
64
 
51
65
  lastOnlineForUser(userid: string) {
@@ -53,14 +67,6 @@ export class MQTTPresenceService extends PresenceService {
53
67
  }
54
68
 
55
69
  public setPresence(userid: string): void {
56
-
57
- }
58
-
59
- /**
60
- * removePresence
61
- * richiamato prima del logout
62
- */
63
- public removePresence(): void {
64
70
 
65
71
  }
66
72
 
@@ -71,4 +77,12 @@ export class MQTTPresenceService extends PresenceService {
71
77
  }, 2000);
72
78
  }
73
79
 
80
+ /**
81
+ * removePresence
82
+ * richiamato prima del logout
83
+ */
84
+ public removePresence(): void {
85
+
86
+ }
87
+
74
88
  }
package/src/chat21-core/utils/utils-message.ts CHANGED
@@ -243,9 +243,9 @@ export function commandToMessage(msg: MessageModel, conversation: ConversationMo
243
243
  message.timestamp = conversation.timestamp
244
244
  message.metadata = msg['metadata']
245
245
  message.channel_type = conversation.channel_type
246
- message.type = msg.type
246
+ message.type = msg['type']
247
247
  message.isSender = isSender(message.sender, currentUserId)
248
- message.attributes = { ...conversation.attributes, ...msg.attributes}
248
+ message.attributes = { ...conversation.attributes, ...msg['attributes']}
249
249
 
250
250
  return message as MessageModel
251
251
  }
package/src/widget-config-template.json CHANGED
@@ -2,7 +2,6 @@
2
2
  "chatEngine": "${CHAT21_ENGINE}",
3
3
  "uploadEngine": "${UPLOAD_ENGINE}",
4
4
  "pushEngine": "${PUSH_ENGINE}",
5
- "fileUploadAccept":"${FILE_UPLOAD_ACCEPT}",
6
5
  "logLevel": "${LOG_LEVEL}" ,
7
6
  "remoteTranslationsUrl": "${TRANSLATIONS_URL}",
8
7
  "firebaseConfig": {
package/src/widget-config.json CHANGED
@@ -2,7 +2,6 @@
2
2
  "chatEngine": "mqtt",
3
3
  "uploadEngine": "native",
4
4
  "pushEngine":"none",
5
- "fileUploadAccept":"*/*",
6
5
  "logLevel":"INFO",
7
6
  "remoteTranslationsUrl": "http://localhost:3000/",
8
7
  "firebaseConfig": {