@chat21/chat21-ionic 3.4.3 → 3.4.4-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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,10 @@
1
1
  # chat21-ionic ver 3.0
2
2
 
3
+
4
+ ### 3.4.4-rc.1
5
+ - added: voice channel icon in conversation-list and conversation-detail header
6
+ - changed: sidebar structure
7
+
3
8
  ### 3.4.3 in PROD
4
9
 
5
10
  ### 3.4.3-rc.1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@chat21/chat21-ionic",
3
3
  "author": "Tiledesk SRL",
4
- "version": "3.4.3",
4
+ "version": "3.4.4-rc.1",
5
5
  "license": "MIT License",
6
6
  "homepage": "https://tiledesk.com/",
7
7
  "repository": {
@@ -112,6 +112,7 @@
112
112
  <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.MESSENGER" >
113
113
  <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.WHATSAPP" >
114
114
  <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel === CHANNEL_TYPE.TELEGRAM" >
115
+ <img class="channel-icon" src="assets/images/channel_icons/voice.svg" *ngIf="conversation?.attributes && conversation?.attributes?.request_channel && conversation?.attributes?.request_channel.startsWith(CHANNEL_TYPE.VOICE)" >
115
116
  <span *ngIf="conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.project_name}}</span>
116
117
  <span *ngIf="!conversation?.attributes?.project_name" class="truncate">{{conversation?.attributes?.projectId}}</span>
117
118
  </div>
@@ -50,6 +50,7 @@
50
50
  <img class="channel-icon" src="assets/images/channel_icons/messenger-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.MESSENGER" >
51
51
  <img class="channel-icon" src="assets/images/channel_icons/whatsapp-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.WHATSAPP" >
52
52
  <img class="channel-icon" src="assets/images/channel_icons/telegram-logo.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel === CHANNEL_TYPE.TELEGRAM" >
53
+ <img class="channel-icon" src="assets/images/channel_icons/voice.svg" *ngIf="conversationAvatar?.request_channel && conversationAvatar?.request_channel.startsWith(CHANNEL_TYPE.VOICE)" >
53
54
  <span *ngIf="conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.project_name}}</span>
54
55
  <span *ngIf="!conversationAvatar?.project_name" class="truncate">{{conversationAvatar?.projectId}}</span>
55
56
  </div>
@@ -41,44 +41,40 @@
41
41
 
42
42
  <div class="sidebar-wrapper">
43
43
 
44
- <!-- [ngClass]="{'is-desktop-menu' : IS_MOBILE_MENU === false, 'is-mobile-menu' : IS_MOBILE_MENU === true }" -->
45
- <!-- padding-bottom: 65px; -->
46
- <ul class="nav">
44
+ <div class="nav-custom sidebar-up">
47
45
 
48
46
  <!-- ------------------------------------------- -->
49
47
  <!-- CHAT -->
50
48
  <!-- ------------------------------------------- -->
51
- <li class="item-active" matTooltipClass="custom-mat-tooltip" matTooltip="Chat"
49
+ <div class="item-active" matTooltipClass="custom-mat-tooltip" matTooltip="Chat"
52
50
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
53
- <!-- <i class="material-icons sidebar-icons">chat</i> -->
54
- <span id="openchat-span">
55
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23 21" xml:space="preserve" width="20" height="20">
56
- <path d="M11.5,0.5C5.8,0.5,1.3,5,1.3,10.5c0,1.8,0.5,3.5,1.4,5l-0.8,4.3l4.4-0.8c1.5,0.9,3.3,1.4,5.3,1.4
57
- c5.7,0,10.2-4.5,10.2-10S17.2,0.5,11.5,0.5z M11.5,17.2c-2.5,0-4.6-1.3-5.7-2.6c0.6-0.2,0.8-0.8,1.4-1c0.7,0.9,2.5,2.1,4.4,2.1
58
- c1.9,0,3.6-1.2,4.2-2.1c0.5,0.2,0.9,0.6,1.4,0.9C16.1,15.8,14,17.2,11.5,17.2z" />
59
- </svg>
60
- </span>
61
- </li>
51
+ <!-- <i class="material-icons sidebar-icons">chat</i> -->
52
+ <span id="openchat-span">
53
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23 21" xml:space="preserve" width="20" height="20">
54
+ <path d="M11.5,0.5C5.8,0.5,1.3,5,1.3,10.5c0,1.8,0.5,3.5,1.4,5l-0.8,4.3l4.4-0.8c1.5,0.9,3.3,1.4,5.3,1.4
55
+ c5.7,0,10.2-4.5,10.2-10S17.2,0.5,11.5,0.5z M11.5,17.2c-2.5,0-4.6-1.3-5.7-2.6c0.6-0.2,0.8-0.8,1.4-1c0.7,0.9,2.5,2.1,4.4,2.1
56
+ c1.9,0,3.6-1.2,4.2-2.1c0.5,0.2,0.9,0.6,1.4,0.9C16.1,15.8,14,17.2,11.5,17.2z" />
57
+ </svg>
58
+ </span>
59
+ </div>
62
60
 
63
61
  <!-- ------------------------------------------- -->
64
62
  <!-- HOME (click)="goToHome()"" -->
65
63
  <!-- ------------------------------------------- -->
66
-
67
- <li matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
64
+ <div matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
68
65
  matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
69
66
  <a target="_self" href="{{ dashboard_home_url }}" class="customAncor">
70
67
  <i class="material-icons sidebar-icons">
71
68
  home
72
69
  </i>
73
70
  </a>
74
- </li>
75
-
71
+ </div>
76
72
 
77
73
  <!-- ---------------------------------- -->
78
74
  <!-- Bot (click)="goToBots()" -->
79
75
  <!-- ---------------------------------- -->
80
76
  <ng-container *ngIf="USER_ROLE !== 'agent'">
81
- <li id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="Bots"
77
+ <div id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip" matTooltip="Bots"
82
78
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
83
79
  <a target="_self" href="{{ dashboard_bots_url }}" id="bot-anchor" #botbtn class="customAncor">
84
80
  <span class="bot-icon-wpr">
@@ -99,63 +95,49 @@
99
95
  </svg>
100
96
  </span>
101
97
  </a>
102
- </li>
98
+ </div>
103
99
  </ng-container>
104
100
 
105
101
  <!-- ------------------------------------------- -->
106
102
  <!-- Conversations (MONITOR) (click)="goToConversations()" -->
107
103
  <!-- ------------------------------------------- -->
108
104
  <!-- <ng-container *ngIf="USER_ROLE !== 'agent'"> -->
109
- <li matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
110
- #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
111
- <a target="_self" href="{{ dashboard_convs_url }}" class="customAncor">
112
- <!-- <i class="material-icons sidebar-icons">forum</i> -->
113
- <span class="realtime-icon-wpr" >
114
- <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
115
- viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 30px;height: 30px;margin-top: 5px;">
116
- <path d="M17.9,11.6l-1.4,1.9l-3.2-5.6l-1-2l-0.2,0.2l-3.7,6.4l-3-4.8L2.7,9.9v2.4l2.4-1.8L9,16.2l3.3-6.2l4,6.7l2.7-3.3
117
- l0.9,0c0.5-0.7,1-1.4,1.4-2L17.9,11.6z"/>
118
- </svg>
119
- </span>
120
-
121
- </a>
122
- </li>
105
+ <div matTooltipClass="custom-mat-tooltip" matTooltip="Monitor"
106
+ #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
107
+ <a target="_self" href="{{ dashboard_convs_url }}" class="customAncor">
108
+ <!-- <i class="material-icons sidebar-icons">forum</i> -->
109
+ <span class="realtime-icon-wpr" >
110
+ <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
111
+ viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 30px;height: 30px;margin-top: 5px;">
112
+ <path d="M17.9,11.6l-1.4,1.9l-3.2-5.6l-1-2l-0.2,0.2l-3.7,6.4l-3-4.8L2.7,9.9v2.4l2.4-1.8L9,16.2l3.3-6.2l4,6.7l2.7-3.3
113
+ l0.9,0c0.5-0.7,1-1.4,1.4-2L17.9,11.6z"/>
114
+ </svg>
115
+ </span>
116
+
117
+ </a>
118
+ </div>
123
119
  <!-- </ng-container> -->
124
120
 
121
+ </div>
122
+
123
+ <div class="nav-custom sidebar-bottom">
124
+
125
125
  <!-- ------------------------------------------- -->
126
126
  <!-- CONTACTS (LEADS) (click)="goToContacts()" -->
127
127
  <!-- ------------------------------------------- -->
128
- <li matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
128
+ <div matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
129
129
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
130
130
  <a target="_self" href="{{ dashboard_contacts_url }}" class="customAncor">
131
131
  <i class="material-icons sidebar-icons">contacts</i>
132
132
  </a>
133
- </li>
133
+ </div>
134
134
 
135
- <!-- ------------------------------------------- -->
136
- <!-- APPS (click)="goToAppStore()" -->
137
- <!-- ------------------------------------------- -->
138
- <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
139
- <li matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}"
140
- #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
141
- <a target="_self" href="{{ dashboard_app_url }}" class="customAncor">
142
- <!-- <i class="material-icons sidebar-icons">apps</i> -->
143
- <!-- <i class="material-icons sidebar-icons">dashboard_customize</i> -->
144
- <span class="dashboard-customize-icon-wpr">
145
- <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
146
- viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px;">
147
- <path d="M3,3h8v8H3V3z M13,3h8v8h-8V3z M3,13h8v8H3V13z M18,13h-2v3h-3v2h3v3h2v-3h3v-2h-3V13z"/>
148
- </svg>
149
- </span>
150
- </a>
151
- </li>
152
- </ng-container>
153
135
 
154
136
  <!-- ------------------------------------------- -->
155
137
  <!-- ANALYTICS (click)="goToAnalytics()" -->
156
138
  <!-- ------------------------------------------- -->
157
139
  <ng-container *ngIf="isVisibleANA && USER_ROLE !== 'agent'">
158
- <li matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
140
+ <div matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"
159
141
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" >
160
142
  <a target="_self" href="{{ dashboard_analytics_url }}" class="customAncor">
161
143
  <!-- <i class="material-icons sidebar-icons">trending_up</i> -->
@@ -168,67 +150,53 @@
168
150
  </svg>
169
151
  </span>
170
152
  </a>
171
- </li>
153
+ </div>
172
154
  </ng-container>
173
155
 
174
156
  <!-- ------------------------------------------- -->
175
157
  <!-- ACTIVITIES (click)="goToActivities()" -->
176
158
  <!-- ------------------------------------------- -->
177
159
  <ng-container *ngIf="isVisibleACT">
178
- <li *ngIf="USER_ROLE !== 'agent'" matTooltipClass="custom-mat-tooltip"
160
+ <div *ngIf="USER_ROLE !== 'agent'" matTooltipClass="custom-mat-tooltip"
179
161
  matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
180
162
  <a target="_self" href="{{ dashboard_activities_url }}" class="customAncor">
181
163
  <i class="material-icons sidebar-icons">assignment</i>
182
164
  </a>
183
- </li>
165
+ </div>
184
166
  </ng-container>
185
167
 
186
-
187
168
  <!-- ------------------------------------------- -->
188
169
  <!-- REQUESTS HISTORY (click)="goToHistory()" -->
189
170
  <!-- ------------------------------------------- -->
190
- <li matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
171
+ <div matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
191
172
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
192
173
  <a target="_self" href="{{ dashboard_history_url }}" class="customAncor">
193
174
  <i class="material-icons sidebar-icons">history</i>
194
175
  </a>
195
- </li>
176
+ </div>
196
177
 
197
178
  <!-- ----------------------------------------------------------------------------------- -->
198
179
  <!-- SETTINGS // old: goToSettings_CannedResponses() *ngIf="USER_ROLE !== 'agent'" (click)="goToWidgetSetUpOrToCannedResponses()" -->
199
180
  <!-- ----------------------------------------------------------------------------------- -->
200
- <li *ngIf="USER_ROLE !== 'agent'" matTooltipClass="custom-mat-tooltip"
181
+ <div *ngIf="USER_ROLE !== 'agent'" matTooltipClass="custom-mat-tooltip"
201
182
  matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
202
183
  <a target="_self" href="{{ dashboard_settings_url }}" class="customAncor">
203
184
  <i class="material-icons sidebar-icons">settings</i>
204
185
  </a>
205
- </li>
206
-
207
-
208
-
209
- <!-- [_prjct_profile_name]="_prjct_profile_name" [plan_subscription_is_active]="plan_subscription_is_active"
210
- [plan_name]="plan_name"
211
- [plan_type]="plan_type"
212
- [isVisiblePAY]="isVisiblePAY"
213
- [prjct_name]="prjct_name" -->
214
- <!-- HAS_CLICKED_OPEN_USER_DETAIL {{ HAS_CLICKED_OPEN_USER_DETAIL }} -->
215
- <!-- [HAS_CLICKED_OPEN_USER_DETAIL]='HAS_CLICKED_OPEN_USER_DETAIL' -->
216
- <!-- tabindex="-1" style="z-index: 20001;" -->
217
-
186
+ </div>
218
187
 
219
- <!-- <app-sidebar-user-details
220
- (onCloseUserDetailsSidebar)='onCloseUserDetailsSidebar($event)'>
221
- </app-sidebar-user-details> -->
222
188
 
223
- </ul>
189
+ <div matTooltipClass="custom-mat-tooltip" [matTooltip]="BRAND_BASE_INFO['COMPANY_NAME']" class="logoBrand"
190
+ #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
191
+ <!-- ------------------------------------------- -->
192
+ <!-- LOGO BRAND (click)="goToOfficialSite()" -->
193
+ <!-- ------------------------------------------- -->
194
+ <a target="_blank" href="{{ tiledesk_url }}" class="customAncor">
195
+ <img [src]="LOGOS_ITEMS['COMPANY_LOGO_NO_TEXT'].icon">
196
+ </a>
197
+ </div>
224
198
 
225
- <div matTooltipClass="custom-mat-tooltip" [matTooltip]="BRAND_BASE_INFO['COMPANY_NAME']" class="logoBrand"
226
- #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
227
- <!-- ------------------------------------------- -->
228
- <!-- LOGO BRAND (click)="goToOfficialSite()" -->
229
- <!-- ------------------------------------------- -->
230
- <a target="_blank" href="{{ tiledesk_url }}" class="customAncor">
231
- <img [src]="LOGOS_ITEMS['COMPANY_LOGO_NO_TEXT'].icon">
232
- </a>
233
199
  </div>
200
+
201
+
234
202
  </div>
@@ -21,10 +21,6 @@
21
21
  }
22
22
 
23
23
  .logoBrand{
24
- position: absolute;
25
- bottom: 0;
26
- display: flex;
27
- justify-content: center;
28
24
  width: 100%;
29
25
  height: 60px;
30
26
 
@@ -46,7 +42,7 @@ svg ellipse {
46
42
  fill: var(--sidebar-icon-color);
47
43
  }
48
44
 
49
- li > a >i {
45
+ div > a > i {
50
46
  // font-size: 20px;
51
47
  // float: left;
52
48
  // margin-right: 15px;
@@ -63,7 +59,8 @@ svg:hover path,
63
59
  svg:hover ellipse {
64
60
  fill: var(--sidebar-hover-icon-color);
65
61
  }
66
- li:hover > a > i {
62
+
63
+ div:hover > a > i {
67
64
  // background-color: #eee;
68
65
  color: var(--sidebar-hover-icon-color);
69
66
  }
@@ -97,4 +94,32 @@ li:hover > a > i {
97
94
  // #sidebar_wrapper::-webkit-scrollbar-thumb {
98
95
  // background-color: #3c485b;
99
96
  // border-radius: 3px;
100
- // }
97
+ // }
98
+
99
+
100
+
101
+ .nav-custom{
102
+ display: flex;
103
+ align-items: center;
104
+ flex-direction: column;
105
+
106
+ > div {
107
+ height: 40px;
108
+ width: 60px;
109
+ margin-top: 5px;
110
+ margin-bottom: 5px;
111
+ display: flex;
112
+ align-items: center;
113
+ justify-content: center;
114
+ }
115
+
116
+ }
117
+
118
+ .sidebar-up{
119
+ position: absolute;
120
+ top: 0;
121
+ }
122
+ .sidebar-bottom{
123
+ position: absolute;
124
+ bottom: 0;
125
+ }
@@ -27,8 +27,8 @@ export class SidebarComponent implements OnInit {
27
27
 
28
28
  USER_ROLE: string = 'agent'
29
29
  SIDEBAR_IS_SMALL = true
30
- IS_AVAILABLE: boolean;
31
- IS_INACTIVE: boolean;
30
+ IS_AVAILABLE: boolean = false;
31
+ IS_INACTIVE: boolean = true;
32
32
  IS_BUSY: boolean;
33
33
  isVisibleAPP: boolean;
34
34
  isVisibleANA: boolean;
@@ -1134,7 +1134,8 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
1134
1134
  attributes['request_channel'] === TYPE_MSG_FORM ||
1135
1135
  attributes['request_channel'] === CHANNEL_TYPE.WHATSAPP ||
1136
1136
  attributes['request_channel'] === CHANNEL_TYPE.MESSENGER ||
1137
- attributes['request_channel'] === CHANNEL_TYPE.TELEGRAM))
1137
+ attributes['request_channel'] === CHANNEL_TYPE.TELEGRAM ||
1138
+ attributes['request_channel'] === CHANNEL_TYPE.VOICE))
1138
1139
 
1139
1140
  if ((msg && msg.trim() !== '') || type !== TYPE_MSG_TEXT) {
1140
1141
 
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15" height="15" width="15">
2
+ <path fill="#000" d="M3.8,2.7c0,.6.2,1.3.3,1.9l-.9.9c-.3-.9-.5-1.8-.6-2.8h1.1M11,11.5c.6.2,1.3.3,1.9.3v1.1c-1,0-1.9-.3-2.8-.5l.9-.9M4.5,1.2H2c-.4,0-.7.3-.7.7,0,6.8,5.5,12.4,12.4,12.4s.7-.3.7-.7v-2.5c0-.4-.3-.7-.7-.7-.9,0-1.8-.1-2.6-.4,0,0-.2,0-.2,0-.2,0-.4,0-.5.2l-1.6,1.6c-2.1-1.1-3.8-2.7-4.8-4.8l1.6-1.6c.2-.2.3-.5.2-.7-.3-.8-.4-1.7-.4-2.6s-.3-.7-.7-.7Z"/>
3
+ </svg>
@@ -50,7 +50,8 @@ export enum CHANNEL_TYPE {
50
50
  FORM = 'form',
51
51
  MESSENGER = 'messenger',
52
52
  WHATSAPP = 'whatsapp',
53
- TELEGRAM = 'telegram'
53
+ TELEGRAM = 'telegram',
54
+ VOICE = 'voice',
54
55
  }
55
56
 
56
57
  // TYPES MESSAGES
package/src/global.scss CHANGED
@@ -319,7 +319,7 @@ select:-webkit-autofill:focus {
319
319
 
320
320
  .sidebar .sidebar-wrapper {
321
321
  position: relative;
322
- height: calc(100vh - 35px);
322
+ height: calc(100vh - 60px);
323
323
  overflow: auto;
324
324
  width: 60px;
325
325
  z-index: 4;