@adzen/doohbot 1.0.6 → 1.0.7

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 (41) hide show
  1. package/fesm2022/adzen-doohbot.mjs +1557 -1191
  2. package/fesm2022/adzen-doohbot.mjs.map +1 -1
  3. package/index.d.ts +83 -108
  4. package/index.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/src/lib/app/chat/components/chat-button/chat-button.component.scss +43 -9
  7. package/src/lib/app/chat/components/chat-footer/chat-footer.component.scss +3 -3
  8. package/src/lib/app/chat/components/chat-header/chat-header.component.scss +29 -11
  9. package/src/lib/app/chat/components/{chat-history-sidebar/chat-history-sidebar.component.scss → chat-history/chat-history.component.scss} +46 -34
  10. package/src/lib/app/chat/components/chat-input/chat-input.component.scss +44 -21
  11. package/src/lib/app/chat/components/chat-message/chat-message.component.scss +178 -178
  12. package/src/lib/app/chat/components/chat-message-container/chat-message-container.component.scss +55 -24
  13. package/src/lib/app/chat/components/chat-window/chat-window.component.scss +282 -21
  14. package/src/lib/app/login/login-form.component.scss +24 -24
  15. package/src/lib/app/personalization/personalization-dialog.component.scss +17 -17
  16. package/src/lib/app/personalization/sections/account/account-section.component.scss +167 -166
  17. package/src/lib/app/personalization/sections/instruction/instruction-section.component.scss +47 -46
  18. package/src/lib/app/personalization/sections/preferences/preferences-section.component.scss +172 -170
  19. package/src/lib/app/personalization/sections/terms/terms-section.component.scss +58 -57
  20. package/src/lib/doohbot.component.scss +6 -12
  21. package/src/lib/shared/chips/chips.component.scss +8 -8
  22. package/src/lib/shared/confirmation-dialog/confirmation-dialog.component.scss +24 -0
  23. package/src/lib/shared/dropdown-menu/dropdown-menu.component.scss +5 -5
  24. package/src/lib/shared/input-dialog/input-dialog.component.scss +8 -8
  25. package/src/lib/shared/notification-banner/notification-banner.component.scss +342 -0
  26. package/src/lib/shared/snackbar/snackbar.component.scss +3 -3
  27. package/src/lib/styles/_theme.scss +101 -45
  28. package/src/lib/styles/material-override.scss +36 -26
  29. package/src/lib/styles/utility.scss +64 -12
  30. package/src/lib/theme/index.scss +7 -7
  31. package/src/lib/theme/palettes/aqua.scss +76 -62
  32. package/src/lib/theme/palettes/candy.scss +75 -61
  33. package/src/lib/theme/palettes/doohbot.scss +21 -7
  34. package/src/lib/theme/palettes/forest.scss +75 -61
  35. package/src/lib/theme/palettes/midnight.scss +75 -61
  36. package/src/lib/theme/palettes/slate.scss +75 -61
  37. package/src/lib/theme/palettes/sunset.scss +75 -61
  38. package/src/lib/shared/dialog/dialog.component.scss +0 -90
  39. package/src/lib/shared/menu-item/menu-item.component.scss +0 -0
  40. package/src/lib/theme/themes.scss +0 -7
  41. package/src/lib/theme/tokens/semantic.scss +0 -102
package/src/lib/app/personalization/sections/account/account-section.component.scss CHANGED
@@ -1,209 +1,210 @@
1
1
  .account-container {
2
- padding: 32px 48px;
3
- display: flex;
4
- flex-direction: column;
5
- gap: 48px;
6
- box-sizing: border-box;
7
- animation: fadeIn 0.3s ease-out;
2
+ padding: 32px 48px;
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 48px;
6
+ box-sizing: border-box;
7
+ animation: fadeIn 0.3s ease-out;
8
8
  }
9
9
 
10
10
  .settings-list {
11
- display: flex;
12
- flex-direction: column;
13
- background: var(--background-color);
14
- border-radius: 16px;
15
- border: 1px solid rgba(var(--black-rgb), 0.08);
16
- overflow: hidden;
17
- box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
18
- 0 4px 12px rgba(var(--black-rgb), 0.01);
11
+ display: flex;
12
+ flex-direction: column;
13
+ background: var(--db-bg-color);
14
+ border-radius: 16px;
15
+ border: 1px solid rgba(var(--black-rgb), 0.08);
16
+ overflow: hidden;
17
+ box-shadow:
18
+ 0 1px 3px rgba(var(--black-rgb), 0.02),
19
+ 0 4px 12px rgba(var(--black-rgb), 0.01);
19
20
  }
20
21
 
21
22
  .settings-row {
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: space-between;
26
+ padding: 20px 24px;
27
+ border-bottom: 1px solid rgba(var(--black-rgb), 0.04);
28
+ transition: background 0.2s ease;
29
+
30
+ &.clickable {
31
+ cursor: pointer;
32
+
33
+ &:hover {
34
+ background: rgba(var(--black-rgb), 0.04);
35
+ }
36
+ }
37
+
38
+ &.no-border {
39
+ border-bottom: none;
40
+ }
41
+
42
+ .row-info {
22
43
  display: flex;
23
- align-items: center;
24
- justify-content: space-between;
25
- padding: 20px 24px;
26
- border-bottom: 1px solid rgba(var(--black-rgb), 0.04);
27
- transition: background 0.2s ease;
44
+ flex-direction: column;
45
+ gap: 4px;
28
46
 
29
- &.clickable {
30
- cursor: pointer;
47
+ .row-label {
48
+ font-size: 1.05rem;
49
+ font-weight: 500;
50
+ color: var(--db-text-primary);
51
+ }
31
52
 
32
- &:hover {
33
- background: rgba(var(--black-rgb), 0.04);
34
- }
53
+ .row-sublabel {
54
+ font-size: 0.9rem;
55
+ color: var(--db-text-secondary);
35
56
  }
36
57
 
37
- &.no-border {
38
- border-bottom: none;
58
+ .danger-text {
59
+ color: var(--warn-color);
60
+ }
61
+ }
62
+
63
+ .row-action {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 16px;
67
+
68
+ .status-text {
69
+ font-size: 0.95rem;
70
+ color: var(--db-text-secondary);
39
71
  }
40
72
 
41
- .row-info {
42
- display: flex;
43
- flex-direction: column;
44
- gap: 4px;
45
-
46
- .row-label {
47
- font-size: 1.05rem;
48
- font-weight: 500;
49
- color: var(--text-color);
50
- }
51
-
52
- .row-sublabel {
53
- font-size: 0.9rem;
54
- color: var(--secondary-text-color);
55
- }
56
-
57
- .danger-text {
58
- color: var(--warn-color);
59
- }
73
+ .chevron {
74
+ color: var(--db-text-secondary);
75
+ font-size: 20px;
60
76
  }
61
77
 
62
- .row-action {
63
- display: flex;
64
- align-items: center;
65
- gap: 16px;
66
-
67
- .status-text {
68
- font-size: 0.95rem;
69
- color: var(--secondary-text-color);
70
- }
71
-
72
- .chevron {
73
- color: var(--secondary-text-color);
74
- font-size: 20px;
75
- }
76
-
77
- .org-id {
78
- font-family: 'Space Mono', monospace;
79
- padding: 4px 12px;
80
- background: rgba(var(--primary-rgb), 0.05);
81
- border-radius: 6px;
82
- font-size: 0.9rem;
83
- color: var(--primary-color);
84
- }
78
+ .org-id {
79
+ font-family: 'Space Mono', monospace;
80
+ padding: 4px 12px;
81
+ background: rgba(var(--db-primary-rgb), 0.05);
82
+ border-radius: 6px;
83
+ font-size: 0.9rem;
84
+ color: var(--db-primary);
85
85
  }
86
+ }
86
87
  }
87
88
 
88
89
  .pill-btn {
89
- background: none;
90
- border: 1.5px solid rgba(var(--black-rgb), 0.15);
91
- border-radius: 100px;
92
- padding: 8px 24px;
93
- font-size: 0.9rem;
94
- font-weight: 600;
95
- color: var(--text-color);
96
- cursor: pointer;
97
- transition: all 0.2s ease;
90
+ background: none;
91
+ border: 1.5px solid rgba(var(--black-rgb), 0.15);
92
+ border-radius: 100px;
93
+ padding: 8px 24px;
94
+ font-size: 0.9rem;
95
+ font-weight: 600;
96
+ color: var(--db-text-primary);
97
+ cursor: pointer;
98
+ transition: all 0.2s ease;
99
+
100
+ &:hover {
101
+ background: rgba(var(--black-rgb), 0.05);
102
+ border-color: rgba(var(--black-rgb), 0.3);
103
+ }
104
+
105
+ &.danger {
106
+ color: var(--warn-color);
107
+ border-color: rgba(var(--warn-rgb), 0.3);
98
108
 
99
109
  &:hover {
100
- background: rgba(var(--black-rgb), 0.05);
101
- border-color: rgba(var(--black-rgb), 0.3);
110
+ background: rgba(var(--warn-rgb), 0.05);
111
+ border-color: var(--warn-color);
102
112
  }
113
+ }
103
114
 
104
- &.danger {
105
- color: var(--warn-color);
106
- border-color: rgba(var(--warn-rgb), 0.3);
115
+ &.danger-filled {
116
+ background: transparent;
117
+ color: var(--db-text-primary);
118
+ border: var(--red);
107
119
 
108
- &:hover {
109
- background: rgba(var(--warn-rgb), 0.05);
110
- border-color: var(--warn-color);
111
- }
112
- }
113
-
114
- &.danger-filled {
115
- background: transparent;
116
- color: var(--text-color);
117
- border: var(--red);
118
-
119
- &:hover {
120
- background: var(--red);
121
- box-shadow: 0 4px 12px rgba(var(--warn-rgb), 0.2);
122
- }
120
+ &:hover {
121
+ background: var(--red);
122
+ box-shadow: 0 4px 12px rgba(var(--warn-rgb), 0.2);
123
123
  }
124
+ }
124
125
  }
125
126
 
126
127
  .sessions-section {
127
- display: flex;
128
- flex-direction: column;
129
- gap: 20px;
130
-
131
- h3 {
132
- margin: 0;
133
- font-size: 1.25rem;
134
- font-weight: 700;
135
- color: var(--text-color);
136
- }
128
+ display: flex;
129
+ flex-direction: column;
130
+ gap: 20px;
131
+
132
+ h3 {
133
+ margin: 0;
134
+ font-size: 1.25rem;
135
+ font-weight: 700;
136
+ color: var(--db-text-primary);
137
+ }
137
138
  }
138
139
 
139
140
  .sessions-table-container {
140
- border: 1px solid rgba(var(--black-rgb), 0.05);
141
- border-radius: 16px;
142
- background: rgba(var(--black-rgb), 0.01);
143
- overflow: hidden;
141
+ border: 1px solid rgba(var(--black-rgb), 0.05);
142
+ border-radius: 16px;
143
+ background: rgba(var(--black-rgb), 0.01);
144
+ overflow: hidden;
144
145
  }
145
146
 
146
147
  .sessions-table {
147
- width: 100%;
148
- border-collapse: collapse;
149
- text-align: left;
150
-
151
- th {
152
- padding: 16px 20px;
153
- background: rgba(var(--black-rgb), 0.03);
154
- font-size: 0.8rem;
155
- font-weight: 700;
156
- color: var(--secondary-text-color);
157
- text-transform: uppercase;
158
- letter-spacing: 0.05em;
159
- }
160
-
161
- td {
162
- padding: 20px;
163
- border-top: 1px solid rgba(var(--black-rgb), 0.05);
164
- font-size: 0.95rem;
165
- color: var(--text-color);
166
- }
167
-
168
- tr.current {
169
- background: rgba(var(--primary-rgb), 0.03);
170
- }
171
-
172
- .action-cell {
173
- text-align: right;
174
- padding-right: 12px;
175
- color: var(--secondary-text-color);
176
- }
148
+ width: 100%;
149
+ border-collapse: collapse;
150
+ text-align: left;
151
+
152
+ th {
153
+ padding: 16px 20px;
154
+ background: rgba(var(--black-rgb), 0.03);
155
+ font-size: 0.8rem;
156
+ font-weight: 700;
157
+ color: var(--db-text-secondary);
158
+ text-transform: uppercase;
159
+ letter-spacing: 0.05em;
160
+ }
161
+
162
+ td {
163
+ padding: 20px;
164
+ border-top: 1px solid rgba(var(--black-rgb), 0.05);
165
+ font-size: 0.95rem;
166
+ color: var(--db-text-primary);
167
+ }
168
+
169
+ tr.current {
170
+ background: rgba(var(--db-primary-rgb), 0.03);
171
+ }
172
+
173
+ .action-cell {
174
+ text-align: right;
175
+ padding-right: 12px;
176
+ color: var(--db-text-secondary);
177
+ }
177
178
  }
178
179
 
179
180
  .device-cell {
181
+ display: flex;
182
+ align-items: center;
183
+ gap: 16px;
184
+
185
+ mat-icon {
186
+ font-size: 24px;
187
+ color: var(--db-text-secondary);
188
+ }
189
+
190
+ .device-info {
180
191
  display: flex;
181
- align-items: center;
182
- gap: 16px;
192
+ flex-direction: column;
193
+ gap: 4px;
183
194
 
184
- mat-icon {
185
- font-size: 24px;
186
- color: var(--secondary-text-color);
195
+ .device-name {
196
+ font-weight: 600;
187
197
  }
188
198
 
189
- .device-info {
190
- display: flex;
191
- flex-direction: column;
192
- gap: 4px;
193
-
194
- .device-name {
195
- font-weight: 600;
196
- }
197
-
198
- .current-badge {
199
- font-size: 0.7rem;
200
- color: var(--primary-color);
201
- background: rgba(var(--primary-rgb), 0.1);
202
- padding: 2px 8px;
203
- border-radius: 4px;
204
- width: fit-content;
205
- font-weight: 700;
206
- text-transform: uppercase;
207
- }
199
+ .current-badge {
200
+ font-size: 0.7rem;
201
+ color: var(--db-primary);
202
+ background: rgba(var(--db-primary-rgb), 0.1);
203
+ padding: 2px 8px;
204
+ border-radius: 4px;
205
+ width: fit-content;
206
+ font-weight: 700;
207
+ text-transform: uppercase;
208
208
  }
209
- }
209
+ }
210
+ }
package/src/lib/app/personalization/sections/instruction/instruction-section.component.scss CHANGED
@@ -1,63 +1,64 @@
1
1
  .instruction-container {
2
- padding: 32px 48px;
3
- display: flex;
4
- flex-direction: column;
5
- gap: 48px;
6
- box-sizing: border-box;
7
- animation: fadeIn 0.3s ease-out;
8
-
9
- .pane-header {
10
- h1 {
11
- margin: 0 0 8px 0;
12
- font-size: 1.75rem;
13
- font-weight: 700;
14
- }
15
-
16
- p {
17
- margin: 0;
18
- font-size: 1rem;
19
- color: var(--secondary-text-color);
20
- }
2
+ padding: 32px 48px;
3
+ display: flex;
4
+ flex-direction: column;
5
+ gap: 48px;
6
+ box-sizing: border-box;
7
+ animation: fadeIn 0.3s ease-out;
8
+
9
+ .pane-header {
10
+ h1 {
11
+ margin: 0 0 8px 0;
12
+ font-size: 1.75rem;
13
+ font-weight: 700;
21
14
  }
15
+
16
+ p {
17
+ margin: 0;
18
+ font-size: 1rem;
19
+ color: var(--db-text-secondary);
20
+ }
21
+ }
22
22
  }
23
23
 
24
24
  .instruction-card {
25
- display: flex;
26
- flex-direction: column;
27
- gap: 32px;
28
- background: var(--background-color);
29
- border-radius: 16px;
30
- border: 1px solid rgba(var(--black-rgb), 0.08);
31
- padding: 32px;
32
- box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
33
- 0 4px 12px rgba(var(--black-rgb), 0.01);
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 32px;
28
+ background: var(--db-bg-color);
29
+ border-radius: 16px;
30
+ border: 1px solid rgba(var(--black-rgb), 0.08);
31
+ padding: 32px;
32
+ box-shadow:
33
+ 0 1px 3px rgba(var(--black-rgb), 0.02),
34
+ 0 4px 12px rgba(var(--black-rgb), 0.01);
34
35
  }
35
36
 
36
37
  .instruction-fields {
38
+ display: flex;
39
+ flex-direction: column;
40
+ gap: 32px;
41
+
42
+ .field-item {
37
43
  display: flex;
38
44
  flex-direction: column;
39
- gap: 32px;
40
-
41
- .field-item {
42
- display: flex;
43
- flex-direction: column;
44
- gap: 12px;
45
-
46
- label {
47
- font-size: 1rem;
48
- font-weight: 600;
49
- color: var(--text-color);
50
- }
45
+ gap: 12px;
46
+
47
+ label {
48
+ font-size: 1rem;
49
+ font-weight: 600;
50
+ color: var(--db-text-primary);
51
51
  }
52
+ }
52
53
  }
53
54
 
54
55
  .full-width {
55
- width: 100%;
56
+ width: 100%;
56
57
  }
57
58
 
58
59
  .section-actions {
59
- display: flex;
60
- align-items: center;
61
- gap: 16px;
62
- margin-top: auto;
63
- }
60
+ display: flex;
61
+ align-items: center;
62
+ gap: 16px;
63
+ margin-top: auto;
64
+ }