@chat21/chat21-ionic 3.4.9 → 3.4.10-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 (10) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/package.json +1 -1
  3. package/src/app/app.component.ts +3 -3
  4. package/src/app/components/navbar/navbar.component.html +14 -12
  5. package/src/app/components/navbar/navbar.component.scss +13 -10
  6. package/src/app/components/sidebar/sidebar.component.html +54 -37
  7. package/src/app/components/sidebar/sidebar.component.scss +33 -8
  8. package/src/app/components/sidebar/sidebar.component.ts +17 -0
  9. package/src/global.scss +1 -1
  10. package/src/variables.scss +9 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # chat21-ionic ver 3.0
2
2
 
3
+ ### 3.4.10-rc.1
4
+ - changed: sidebar and navbar UI aligned with dashboard component
5
+
3
6
  ### 3.4.9 in PROD
4
7
 
5
8
  ### 3.4.9-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.9",
4
+ "version": "3.4.10-rc.1",
5
5
  "license": "MIT License",
6
6
  "homepage": "https://tiledesk.com/",
7
7
  "repository": {
package/src/app/app.component.ts CHANGED
@@ -1233,9 +1233,9 @@ export class AppComponent implements OnInit {
1233
1233
  }
1234
1234
 
1235
1235
  goToDashboardLogin(){
1236
- // let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
1237
- // const myWindow = window.open(DASHBOARD_URL, '_self');
1238
- // myWindow.focus();
1236
+ let DASHBOARD_URL = this.appConfigProvider.getConfig().dashboardUrl + '#/login'
1237
+ const myWindow = window.open(DASHBOARD_URL, '_self');
1238
+ myWindow.focus();
1239
1239
  }
1240
1240
 
1241
1241
 
package/src/app/components/navbar/navbar.component.html CHANGED
@@ -6,9 +6,19 @@
6
6
  <div class="navbar-right">
7
7
  <!-- test site -->
8
8
  <ng-container *ngIf="project">
9
- <button class="btn simulate-visitor-btn btn-success-no-boxshadow " (click)="testWidgetPage()">
9
+ <button class="btn simulate-visitor-btn" (click)="testWidgetPage()">
10
10
  <i class="material-icons">play_arrow</i>
11
- {{translationsMap?.get('NAVBAR.SIMULATE_VISITOR')}}
11
+ <!-- {{translationsMap?.get('NAVBAR.SIMULATE_VISITOR')}} -->
12
+ </button>
13
+ </ng-container>
14
+
15
+ <!-- Sound on / off -->
16
+ <ng-container *ngIf="project">
17
+ <button class="btn volume" style="cursor: pointer;" *ngIf="isSoundEnabled" (click)="onClickSound('disabled')">
18
+ <i class="material-icons">volume_up</i>
19
+ </button>
20
+ <button class="btn volume" style="cursor: pointer;" *ngIf="!isSoundEnabled" (click)="onClickSound('enabled')">
21
+ <i class="material-icons">volume_off</i>
12
22
  </button>
13
23
  </ng-container>
14
24
 
@@ -16,8 +26,8 @@
16
26
  <ng-container *ngIf="project">
17
27
  <li>
18
28
  <button class="btn dropdown-toggle project-dropdown" (click)="openDropdownProjects = !openDropdownProjects">
19
- <i class="material-icons" style="margin-right: 3px;">keyboard_arrow_down</i>
20
29
  <span class="project-dropdown" style="text-transform: none"> {{ project?.id_project?.name }} </span>
30
+ <i class="material-icons" style="margin-right: 3px;">arrow_drop_down</i>
21
31
  </button>
22
32
  <div class="ripple-container"></div>
23
33
  <div id="navbar_dropdown" class="dropdown-menu" [ngClass]="{'open': openDropdownProjects}">
@@ -85,15 +95,7 @@
85
95
  </li>
86
96
  </ng-container>
87
97
 
88
- <!-- Sound on / off -->
89
- <ng-container *ngIf="project">
90
- <button class="btn volume" style="cursor: pointer;" *ngIf="isSoundEnabled" (click)="onClickSound('disabled')">
91
- <i class="material-icons">volume_up</i>
92
- </button>
93
- <button class="btn volume" style="cursor: pointer;" *ngIf="!isSoundEnabled" (click)="onClickSound('enabled')">
94
- <i class="material-icons">volume_off</i>
95
- </button>
96
- </ng-container>
98
+
97
99
  </div>
98
100
  </div>
99
101
  </ion-navbar>
package/src/app/components/navbar/navbar.component.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  padding-bottom: 5px;
5
5
  border-bottom: 1px solid var(--border-color-base);
6
6
  -webkit-font-smoothing: auto;
7
+ font-weight: 300;
7
8
  }
8
9
 
9
10
  .navbar{
@@ -57,15 +58,15 @@ ion-navbar{
57
58
 
58
59
  .simulate-visitor-btn{
59
60
  font-size: 12px;
60
- padding: 0px 11px 0px 4px !important;
61
+ padding: 0px 15px !important;
61
62
  max-height: 24px;
62
- border-radius: 30px;
63
63
  font-family: 'Poppins';
64
64
 
65
65
  box-shadow: unset;
66
66
  text-transform: none;
67
- background: var(--simulate-btn-background);
68
- color: var(--simulate-btn-color);
67
+ background: transparent;
68
+ border: unset;
69
+ color: inherit;
69
70
 
70
71
  }
71
72
 
@@ -83,10 +84,8 @@ ion-navbar{
83
84
 
84
85
  .dropdown-toggle, .volume{
85
86
  background-color: transparent;
86
- color: var(--icon-color);
87
-
87
+ color: inherit;
88
88
  padding: 0px 15px;
89
- font-weight: 400;
90
89
  }
91
90
 
92
91
  .project-dropdown {
@@ -94,7 +93,11 @@ ion-navbar{
94
93
  white-space: nowrap;
95
94
  overflow: hidden;
96
95
  text-overflow: ellipsis;
97
- font-size: 12px;
96
+ font-family: var(--header-font-family);
97
+
98
+ .material-icons{
99
+ font-size: 20px;
100
+ }
98
101
  }
99
102
 
100
103
  li{
@@ -122,11 +125,11 @@ li{
122
125
  background-color: var(--dropdown-menu-background);
123
126
  -webkit-background-clip: padding-box;
124
127
  background-clip: padding-box;
125
- }
126
- .dropdown-menu{
128
+ color: inherit;
127
129
  max-height: 240px;
128
130
  overflow-y: auto;
129
131
  }
132
+
130
133
  .dropdown-menu:not(.open){
131
134
  margin-top: -20px;
132
135
  opacity: 0;
package/src/app/components/sidebar/sidebar.component.html CHANGED
@@ -49,13 +49,9 @@
49
49
  <div class="item-active" matTooltipClass="custom-mat-tooltip" matTooltip="Chat"
50
50
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
51
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" />
52
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" fill="none">
53
+ <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z" />
57
54
  </svg>
58
- </span>
59
55
  </div>
60
56
 
61
57
  <!-- ------------------------------------------- -->
@@ -64,12 +60,32 @@
64
60
  <div matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
65
61
  matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
66
62
  <a target="_self" href="{{ dashboard_home_url }}" class="customAncor">
67
- <i class="material-icons sidebar-icons">
68
- home
69
- </i>
63
+ <span>
64
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
65
+ <path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" />
66
+ </svg>
67
+ </span>
70
68
  </a>
71
69
  </div>
72
70
 
71
+ <!-- -------------------------------------------------------- -->
72
+ <!-- @ Knowledge Bases -->
73
+ <!-- -------------------------------------------------------- -->
74
+ <ng-container *ngIf="USER_ROLE !== 'agent' && isVisibleKNB">
75
+ <div id="bot-anchor-wpr" matTooltipClass="custom-mat-tooltip"
76
+ matTooltip="Knowledge Bases" #tooltip="matTooltip" matTooltipPosition='right'
77
+ matTooltipHideDelay="100" routerLinkActive="item-active">
78
+ <a target="_self" href="{{ dashboard_knb_url }}" class="customAncor">
79
+ <span>
80
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
81
+ <path d="M390-120q-51 0-88-35.5T260-241q-60-8-100-53t-40-106q0-21 5.5-41.5T142-480q-11-18-16.5-38t-5.5-42q0-61 40-105.5t99-52.5q3-51 41-86.5t90-35.5q26 0 48.5 10t41.5 27q18-17 41-27t49-10q52 0 89.5 35t40.5 86q59 8 99.5 53T840-560q0 22-5.5 42T818-480q11 18 16.5 38.5T840-400q0 62-40.5 106.5T699-241q-5 50-41.5 85.5T570-120q-25 0-48.5-9.5T480-156q-19 17-42 26.5t-48 9.5Zm130-590v460q0 21 14.5 35.5T570-200q20 0 34.5-16t15.5-36q-21-8-38.5-21.5T550-306q-10-14-7.5-30t16.5-26q14-10 30-7.5t26 16.5q11 16 28 24.5t37 8.5q33 0 56.5-23.5T760-400q0-5-.5-10t-2.5-10q-17 10-36.5 15t-40.5 5q-17 0-28.5-11.5T640-440q0-17 11.5-28.5T680-480q33 0 56.5-23.5T760-560q0-33-23.5-56T680-640q-11 18-28.5 31.5T613-587q-16 6-31-1t-20-23q-5-16 1.5-31t22.5-20q15-5 24.5-18t9.5-30q0-21-14.5-35.5T570-760q-21 0-35.5 14.5T520-710Zm-80 460v-460q0-21-14.5-35.5T390-760q-21 0-35.5 14.5T340-710q0 16 9 29.5t24 18.5q16 5 23 20t2 31q-6 16-21 23t-31 1q-21-8-38.5-21.5T279-640q-32 1-55.5 24.5T200-560q0 33 23.5 56.5T280-480q17 0 28.5 11.5T320-440q0 17-11.5 28.5T280-400q-21 0-40.5-5T203-420q-2 5-2.5 10t-.5 10q0 33 23.5 56.5T280-320q20 0 37-8.5t28-24.5q10-14 26-16.5t30 7.5q14 10 16.5 26t-7.5 30q-14 19-32 33t-39 22q1 20 16 35.5t35 15.5q21 0 35.5-14.5T440-250Zm40-230Z" />
82
+ </svg>
83
+ </span>
84
+ </a>
85
+ </div>
86
+ </ng-container>
87
+
88
+
73
89
  <!-- ---------------------------------- -->
74
90
  <!-- Bot (click)="goToBots()" -->
75
91
  <!-- ---------------------------------- -->
@@ -78,20 +94,8 @@
78
94
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
79
95
  <a target="_self" href="{{ dashboard_bots_url }}" id="bot-anchor" #botbtn class="customAncor">
80
96
  <span class="bot-icon-wpr">
81
- <svg xmlns="http://www.w3.org/2000/svg"
82
- xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" width="25" height="25"
83
- style="enable-background:new 0 0 30 30;" xml:space="preserve">
84
- <g>
85
- <path d="M24.6,12.6c-0.1,0-0.2,0-0.3,0c-1.6-2.9-4.5-5.8-9.2-5.8c-4.7,0-7.6,2.9-9.2,5.8c-0.2,0-0.4-0.1-0.6-0.1
86
- c-2,0-3.5,2.3-3.5,5c0,2.8,1.6,5,3.5,5c0.1,0,0.3,0,0.4,0c2.3,3.6,7,3.9,9.4,3.9c2.3,0,6.9-0.5,9.2-3.9c0.1,0,0.1,0,0.2,0
87
- c2,0,3.5-2.3,3.5-5C28.1,14.8,26.6,12.6,24.6,12.6z M22,21.1c0,0-7.8,2.3-14.3-0.1c0,0-0.8-4.1-0.5-7.2c0,0,8.1-3.2,15.6,0.3
88
- C22.8,14.1,23.3,19.1,22,21.1z" />
89
- <ellipse cx="11.9" cy="17.4" rx="0.7" ry="1.4" />
90
- <ellipse cx="18.1" cy="17.4" rx="0.7" ry="1.4" />
91
- <path d="M14.5,5.3v1.1h1V5.3c0.3-0.2,0.5-0.5,0.5-0.8c0-0.5-0.4-0.9-1-0.9c-0.5,0-0.9,0.4-0.9,0.9
92
- C14.1,4.8,14.2,5.1,14.5,5.3z" />
93
- </g>
94
-
97
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
98
+ <path d="M151.33-370.67q-46.66 0-79-32.47Q40-435.61 40-482t32.47-78.86q32.47-32.47 78.86-32.47V-702q0-27 19.84-46.83Q191-768.67 218-768.67h150.67q0-46.66 32.47-79Q433.61-880 480-880t78.86 32.47q32.47 32.47 32.47 78.86H742q27 0 46.83 19.84Q808.67-729 808.67-702v108.67q46.66 0 79 32.47Q920-528.39 920-482t-32.47 78.86q-32.47 32.47-78.86 32.47v184q0 27-19.84 46.84Q769-120 742-120H218q-27 0-46.83-19.83-19.84-19.84-19.84-46.84v-184ZM348.82-464q19.51 0 33.01-13.66 13.5-13.65 13.5-33.16 0-19.51-13.65-33.01-13.66-13.5-33.17-13.5t-33.01 13.65Q302-530.02 302-510.51t13.66 33.01q13.65 13.5 33.16 13.5Zm262.67 0q19.51 0 33.01-13.66 13.5-13.65 13.5-33.16 0-19.51-13.66-33.01-13.65-13.5-33.16-13.5-19.51 0-33.01 13.65-13.5 13.66-13.5 33.17t13.65 33.01q13.66 13.5 33.17 13.5ZM314.67-283.33h330.66V-350H314.67v66.67ZM218-186.67h524V-702H218v515.33Zm262-258Z" />
95
99
  </svg>
96
100
  </span>
97
101
  </a>
@@ -106,14 +110,11 @@
106
110
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
107
111
  <a target="_self" href="{{ dashboard_convs_url }}" class="customAncor">
108
112
  <!-- <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"/>
113
+ <span>
114
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
115
+ <path d="M480-80 360-642l-88 402H80v-80h128l113-520h79l122 572 78-332h80l72 280h128v80H690l-48-188-82 348h-80Z" />
114
116
  </svg>
115
117
  </span>
116
-
117
118
  </a>
118
119
  </div>
119
120
  </ng-container>
@@ -129,7 +130,9 @@
129
130
  <div matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}"
130
131
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
131
132
  <a target="_self" href="{{ dashboard_contacts_url }}" class="customAncor">
132
- <i class="material-icons sidebar-icons">contacts</i>
133
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
134
+ <path d="M160-40v-80h640v80H160Zm0-800v-80h640v80H160Zm320 400q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm70-80q45-56 109-88t141-32q77 0 141 32t109 88h70v-480H160v480h70Zm118 0h264q-29-20-62.5-30T480-280q-36 0-69.5 10T348-240Zm132-280q-17 0-28.5-11.5T440-560q0-17 11.5-28.5T480-600q17 0 28.5 11.5T520-560q0 17-11.5 28.5T480-520Zm0 40Z" />
135
+ </svg>
133
136
  </a>
134
137
  </div>
135
138
  </ng-container>
@@ -146,9 +149,8 @@
146
149
  <!-- <i class="material-icons sidebar-icons"> analytics </i> -->
147
150
  <!-- <i class="material-icons sidebar-icons"> bar_chart </i> -->
148
151
  <span class="bar-chart-icon-wpr">
149
- <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"
150
- viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;height: 20px">
151
- <path d="M5,9.2h3V19H5V9.2z M10.6,5h2.8v14h-2.8V5z M16.2,13H19v6h-2.8V13z"/>
152
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
153
+ <path d="M80-120v-80h800v80H80Zm40-120v-280h120v280H120Zm200 0v-480h120v480H320Zm200 0v-360h120v360H520Zm200 0v-600h120v600H720Z" />
152
154
  </svg>
153
155
  </span>
154
156
  </a>
@@ -162,7 +164,9 @@
162
164
  <div *ngIf="USER_ROLE !== 'agent'" matTooltipClass="custom-mat-tooltip"
163
165
  matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
164
166
  <a target="_self" href="{{ dashboard_activities_url }}" class="customAncor">
165
- <i class="material-icons sidebar-icons">assignment</i>
167
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
168
+ <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h168q13-36 43.5-58t68.5-22q38 0 68.5 22t43.5 58h168q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm80-80h280v-80H280v80Zm0-160h400v-80H280v80Zm0-160h400v-80H280v80Zm200-190q13 0 21.5-8.5T510-820q0-13-8.5-21.5T480-850q-13 0-21.5 8.5T450-820q0 13 8.5 21.5T480-790ZM200-200v-560 560Z" />
169
+ </svg>
166
170
  </a>
167
171
  </div>
168
172
  </ng-container>
@@ -173,7 +177,9 @@
173
177
  <div matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"
174
178
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
175
179
  <a target="_self" href="{{ dashboard_history_url }}" class="customAncor">
176
- <i class="material-icons sidebar-icons">history</i>
180
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
181
+ <path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z" />
182
+ </svg>
177
183
  </a>
178
184
  </div>
179
185
 
@@ -183,10 +189,21 @@
183
189
  <div *ngIf="USER_ROLE !== 'agent'" matTooltipClass="custom-mat-tooltip"
184
190
  matTooltip="{{ settings_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
185
191
  <a target="_self" href="{{ dashboard_settings_url }}" class="customAncor">
186
- <i class="material-icons sidebar-icons">settings</i>
192
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="24px" height="24px" fill="none">
193
+ <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" />
194
+ </svg>
187
195
  </a>
188
196
  </div>
189
197
 
198
+ <div class="sidebar-separator">
199
+ <!-- <i class="material-symbols-outlined sidebar-icons">
200
+ check_indeterminate_small
201
+ </i> -->
202
+ <svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px" viewBox="0 -960 960 960" fill="none">
203
+ <path d="M240-440v-80h480v80H240Z" />
204
+ </svg>
205
+ </div>
206
+
190
207
 
191
208
  <div matTooltipClass="custom-mat-tooltip" [matTooltip]="BRAND_BASE_INFO['COMPANY_NAME']" class="logoBrand"
192
209
  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
@@ -201,4 +218,4 @@
201
218
  </div>
202
219
 
203
220
 
204
- </div>
221
+ </div>
package/src/app/components/sidebar/sidebar.component.scss CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  .logo {
19
19
  min-height: 60px;
20
- width: 60px; // for SMALL SIDEBAR
20
+ width: var(--sidebar-width); // for SMALL SIDEBAR
21
21
  }
22
22
 
23
23
  .logoBrand{
@@ -53,16 +53,29 @@ div > a > i {
53
53
  color: var(--sidebar-icon-color);
54
54
  }
55
55
 
56
-
57
-
58
56
  svg:hover path,
59
57
  svg:hover ellipse {
60
58
  fill: var(--sidebar-hover-icon-color);
61
59
  }
62
60
 
63
- div:hover > a > i {
64
- // background-color: #eee;
65
- color: var(--sidebar-hover-icon-color);
61
+ .nav-custom > div:not(.sidebar-separator):hover {
62
+ background-color: var(--sidebar-background-item-hover);
63
+ & > a > i {
64
+ // background-color: #eee;
65
+ color: var(--sidebar-hover-icon-color);
66
+ }
67
+
68
+ & path,
69
+ ellipse {
70
+ fill: var(--sidebar-hover-icon-color);
71
+ }
72
+ }
73
+
74
+
75
+
76
+
77
+ .item-active {
78
+ background-color: var(--sidebar-background-item-hover);
66
79
  }
67
80
 
68
81
  .item-active svg path,
@@ -104,17 +117,29 @@ div:hover > a > i {
104
117
  flex-direction: column;
105
118
 
106
119
  > div {
107
- height: 40px;
108
- width: 60px;
120
+ height: 50px;
121
+ width: 50px;
109
122
  margin-top: 5px;
110
123
  margin-bottom: 5px;
111
124
  display: flex;
112
125
  align-items: center;
113
126
  justify-content: center;
127
+ border-radius: var(--sidebar-background-item-border-radius);
114
128
  }
115
129
 
116
130
  }
117
131
 
132
+ .sidebar-separator{
133
+ height: unset !important;
134
+ width: unset !important;
135
+ }
136
+
137
+ .sidebar-separator > svg > path,
138
+ .sidebar-separator:hover > svg > path {
139
+ fill: var(--sidebar-inactive-icon);
140
+ }
141
+
142
+
118
143
  // .sidebar-up{
119
144
  // position: absolute;
120
145
  // top: 0;
package/src/app/components/sidebar/sidebar.component.ts CHANGED
@@ -35,6 +35,7 @@ export class SidebarComponent implements OnInit {
35
35
  isVisibleACT: boolean;
36
36
  isVisibleMON: boolean;
37
37
  isVisibleCNT: boolean;
38
+ isVisibleKNB: boolean;
38
39
  photo_profile_URL: string;
39
40
  project_id: string;
40
41
  DASHBOARD_URL: string;
@@ -52,6 +53,7 @@ export class SidebarComponent implements OnInit {
52
53
  USER_PHOTO_PROFILE_EXIST: boolean;
53
54
  currentUser: any;
54
55
  dashboard_home_url: string;
56
+ dashboard_knb_url: string;
55
57
  dashboard_bots_url: string;
56
58
  dashboard_convs_url: string;
57
59
  dashboard_contacts_url: string;
@@ -101,6 +103,7 @@ export class SidebarComponent implements OnInit {
101
103
 
102
104
  buildURLs(USER_ROLE) {
103
105
  this.dashboard_home_url = this.DASHBOARD_URL + this.project_id + '/home'
106
+ this.dashboard_knb_url = this.DASHBOARD_URL + this.project_id + '/knowledge-bases'
104
107
  this.dashboard_bots_url = this.DASHBOARD_URL + this.project_id + '/bots'
105
108
  this.dashboard_convs_url = this.DASHBOARD_URL + this.project_id + '/wsrequests'
106
109
  this.dashboard_contacts_url = this.DASHBOARD_URL + this.project_id + '/contacts'
@@ -318,6 +321,15 @@ export class SidebarComponent implements OnInit {
318
321
  this.isVisibleCNT = true;
319
322
  }
320
323
  }
324
+
325
+ if (key.includes("KNB")) {
326
+ let lbs = key.split(":");
327
+ if (lbs[1] === "F") {
328
+ this.isVisibleKNB = false;
329
+ } else {
330
+ this.isVisibleKNB = true;
331
+ }
332
+ }
321
333
 
322
334
  });
323
335
 
@@ -338,12 +350,17 @@ export class SidebarComponent implements OnInit {
338
350
  this.isVisibleCNT = false;
339
351
  }
340
352
 
353
+ if (!this.public_Key.includes("KNB")) {
354
+ this.isVisibleKNB = false;
355
+ }
356
+
341
357
  } else {
342
358
  this.isVisibleANA = false;
343
359
  this.isVisibleACT = false;
344
360
  this.isVisibleAPP = false;
345
361
  this.isVisibleMON = false;
346
362
  this.isVisibleCNT = false;
363
+ this.isVisibleKNB = false;
347
364
  }
348
365
 
349
366
 
package/src/global.scss CHANGED
@@ -324,7 +324,7 @@ select:-webkit-autofill:focus {
324
324
  display: flex;
325
325
  flex-direction: column;
326
326
  justify-content: space-between;
327
- width: 60px;
327
+ width: var(--sidebar-width);
328
328
  z-index: 4;
329
329
 
330
330
  transition-property: top, bottom, width;
package/src/variables.scss CHANGED
@@ -16,7 +16,7 @@ body {
16
16
  --padding-conversation-detail: 10px;
17
17
  --border-radius-item: 16px;
18
18
  --border-radius-content: 16px;
19
- --sidebar-width: 60px;
19
+ --sidebar-width: 70px;
20
20
 
21
21
  --bubble-blue: rgb(0, 153, 255);
22
22
 
@@ -115,6 +115,7 @@ body {
115
115
 
116
116
 
117
117
  // ***** Navbar: start ***** //
118
+ --header-font-family: "Poppins", "Roboto", "Arial", sans-serif;
118
119
  --text-base-color: #555;
119
120
  --navbar-background: #ffffff;
120
121
  --nav-bar-heigth: 60px;
@@ -124,8 +125,8 @@ body {
124
125
  --dropdown-menu-background: #fff;
125
126
  --dropdown-menu-color: #333;
126
127
  --dropdown-menu-item-color: #0f0e0e;
127
- --dropdown-menu-selected-background: #4285f4;
128
- --dropdown-menu-selected-color: #eee;
128
+ --dropdown-menu-selected-background: #eee;
129
+ --dropdown-menu-selected-color: #4285f4;
129
130
  --dropdown-menu-hover-background: #3ea9f5;
130
131
  --dropdown-menu-hover-color: #fff;
131
132
  --dropdown-divider-color: rgba(0,0,0,.12);
@@ -136,9 +137,12 @@ body {
136
137
  --sidebar-background-color: #1e2129;
137
138
  --sidebar-header-background: #2d323e;
138
139
  --sidebar-color: #fff;
139
- --sidebar-icon-color: #647491;
140
+ --sidebar-icon-color: #fff;
140
141
  --sidebar-hover-icon-color: #a9afbb;
141
- --sidebar-active-icon: #fff;
142
+ --sidebar-background-item-hover : rgba(248, 248, 248, 0.251);
143
+ --sidebar-background-item-border-radius: 12px;
144
+ --sidebar-active-icon: #3ea9f5;
145
+ --sidebar-inactive-icon: #647491;
142
146
  --sidebar-user-detail-color: #a9afbb;
143
147
  --sidebar-user-detail-profile-color: #00d5ff;
144
148
  --sidebar-user-detail-select-background: #2d323e;