@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/preferences/preferences-section.component.scss CHANGED
@@ -1,199 +1,201 @@
1
1
  .preferences-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
- color: var(--text-color);
15
- }
16
-
17
- p {
18
- margin: 0;
19
- font-size: 1rem;
20
- color: var(--secondary-text-color);
21
- }
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
+ color: var(--db-text-primary);
15
+ }
16
+
17
+ p {
18
+ margin: 0;
19
+ font-size: 1rem;
20
+ color: var(--db-text-secondary);
22
21
  }
22
+ }
23
23
  }
24
24
 
25
25
  .profile-card {
26
- background: var(--background-color);
27
- border-radius: 16px;
28
- border: 1px solid rgba(var(--black-rgb), 0.08);
29
- padding: 32px;
26
+ background: var(--db-bg-color);
27
+ border-radius: 16px;
28
+ border: 1px solid rgba(var(--black-rgb), 0.08);
29
+ padding: 32px;
30
+ display: flex;
31
+ flex-direction: column;
32
+ gap: 32px;
33
+ box-shadow:
34
+ 0 1px 3px rgba(var(--black-rgb), 0.02),
35
+ 0 4px 12px rgba(var(--black-rgb), 0.01);
36
+
37
+ .avatar-section {
30
38
  display: flex;
31
- flex-direction: column;
32
- gap: 32px;
33
- box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
34
- 0 4px 12px rgba(var(--black-rgb), 0.01);
35
-
36
- .avatar-section {
37
- display: flex;
38
- align-items: center;
39
- gap: 24px;
40
-
41
- .letter-avatar {
42
- width: 80px;
43
- height: 80px;
44
- border-radius: 20px;
45
- background: linear-gradient(135deg, var(--primary-color), var(--primary-color-rgb));
46
- color: var(--white);
47
- display: flex;
48
- align-items: center;
49
- justify-content: center;
50
- font-size: 2rem;
51
- font-weight: 700;
52
- box-shadow: 0 8px 16px rgba(var(--primary-color-rgb), 0.3);
53
- overflow: hidden;
54
-
55
- &.has-image {
56
- background: var(--border-color);
57
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
58
- }
59
-
60
- .profile-img {
61
- width: 100%;
62
- height: 100%;
63
- object-fit: cover;
64
- }
65
- }
66
-
67
- .user-main-info {
68
- h2 {
69
- margin: 0 0 4px 0;
70
- font-size: 1.5rem;
71
- font-weight: 700;
72
- color: var(--text-color);
73
- }
74
-
75
- .role-badge {
76
- margin: 0;
77
- display: inline-block;
78
- padding: 4px 10px;
79
- background: rgba(var(--primary-color-rgb), 0.1);
80
- color: var(--primary-color);
81
- border-radius: 20px;
82
- font-size: 0.75rem;
83
- font-weight: 600;
84
- text-transform: uppercase;
85
- letter-spacing: 0.5px;
86
- }
87
- }
39
+ align-items: center;
40
+ gap: 24px;
41
+
42
+ .letter-avatar {
43
+ width: 80px;
44
+ height: 80px;
45
+ border-radius: 20px;
46
+ background: linear-gradient(135deg, var(--db-primary), var(--db-primary-rgb));
47
+ color: var(--white);
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ font-size: 2rem;
52
+ font-weight: 700;
53
+ box-shadow: 0 8px 16px rgba(var(--db-primary-rgb), 0.3);
54
+ overflow: hidden;
55
+
56
+ &.has-image {
57
+ background: var(--db-border-color);
58
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
59
+ }
60
+
61
+ .profile-img {
62
+ width: 100%;
63
+ height: 100%;
64
+ object-fit: cover;
65
+ }
88
66
  }
89
67
 
90
- .info-grid {
91
- display: grid;
92
- grid-template-columns: repeat(2, 1fr);
93
- gap: 24px;
94
-
95
- .info-item {
96
- display: flex;
97
- flex-direction: column;
98
- gap: 6px;
99
-
100
- label {
101
- font-size: 0.75rem;
102
- font-weight: 600;
103
- text-transform: uppercase;
104
- color: var(--secondary-text-color);
105
- letter-spacing: 0.5px;
106
- }
107
-
108
- .info-value {
109
- font-size: 1.05rem;
110
- font-weight: 500;
111
- color: var(--text-color);
112
- }
113
- }
68
+ .user-main-info {
69
+ h2 {
70
+ margin: 0 0 4px 0;
71
+ font-size: 1.5rem;
72
+ font-weight: 700;
73
+ color: var(--db-text-primary);
74
+ }
75
+
76
+ .role-badge {
77
+ margin: 0;
78
+ display: inline-block;
79
+ padding: 4px 10px;
80
+ background: rgba(var(--db-primary-rgb), 0.1);
81
+ color: var(--db-primary);
82
+ border-radius: 20px;
83
+ font-size: 0.75rem;
84
+ font-weight: 600;
85
+ text-transform: uppercase;
86
+ letter-spacing: 0.5px;
87
+ }
114
88
  }
89
+ }
90
+
91
+ .info-grid {
92
+ display: grid;
93
+ grid-template-columns: repeat(2, 1fr);
94
+ gap: 24px;
95
+
96
+ .info-item {
97
+ display: flex;
98
+ flex-direction: column;
99
+ gap: 6px;
100
+
101
+ label {
102
+ font-size: 0.75rem;
103
+ font-weight: 600;
104
+ text-transform: uppercase;
105
+ color: var(--db-text-secondary);
106
+ letter-spacing: 0.5px;
107
+ }
108
+
109
+ .info-value {
110
+ font-size: 1.05rem;
111
+ font-weight: 500;
112
+ color: var(--db-text-primary);
113
+ }
114
+ }
115
+ }
115
116
  }
116
117
 
117
118
  .settings-list {
118
- display: flex;
119
- flex-direction: column;
120
- background: var(--background-color);
121
- border-radius: 16px;
122
- border: 1px solid rgba(var(--black-rgb), 0.08);
123
- overflow: hidden;
124
- box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
125
- 0 4px 12px rgba(var(--black-rgb), 0.01);
119
+ display: flex;
120
+ flex-direction: column;
121
+ background: var(--db-bg-color);
122
+ border-radius: 16px;
123
+ border: 1px solid rgba(var(--black-rgb), 0.08);
124
+ overflow: hidden;
125
+ box-shadow:
126
+ 0 1px 3px rgba(var(--black-rgb), 0.02),
127
+ 0 4px 12px rgba(var(--black-rgb), 0.01);
126
128
  }
127
129
 
128
130
  .settings-row {
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: space-between;
134
+ padding: 20px 24px;
135
+ border-bottom: 1px solid rgba(var(--black-rgb), 0.04);
136
+ transition: background 0.2s ease;
137
+
138
+ &:last-child {
139
+ border-bottom: none;
140
+ }
141
+
142
+ .row-info {
129
143
  display: flex;
130
- align-items: center;
131
- justify-content: space-between;
132
- padding: 20px 24px;
133
- border-bottom: 1px solid rgba(var(--black-rgb), 0.04);
134
- transition: background 0.2s ease;
135
-
136
- &:last-child {
137
- border-bottom: none;
138
- }
139
-
140
- .row-info {
141
- display: flex;
142
- flex-direction: column;
143
- gap: 4px;
144
+ flex-direction: column;
145
+ gap: 4px;
144
146
 
145
- .row-label {
146
- font-size: 1.05rem;
147
- font-weight: 500;
148
- color: var(--text-color);
149
- }
147
+ .row-label {
148
+ font-size: 1.05rem;
149
+ font-weight: 500;
150
+ color: var(--db-text-primary);
150
151
  }
152
+ }
151
153
 
152
- .row-action {
153
- display: flex;
154
- align-items: center;
155
- gap: 16px;
156
- }
154
+ .row-action {
155
+ display: flex;
156
+ align-items: center;
157
+ gap: 16px;
158
+ }
157
159
  }
158
160
 
159
161
  .option-content,
160
162
  .selected-option-trigger {
161
- display: flex;
162
- align-items: center;
163
- gap: 12px;
164
-
165
- mat-icon {
166
- font-size: 20px;
167
- width: 20px;
168
- height: 20px;
169
- color: var(--secondary-text-color);
170
- }
171
-
172
- span {
173
- font-size: 0.95rem;
174
- }
163
+ display: flex;
164
+ align-items: center;
165
+ gap: 12px;
166
+
167
+ mat-icon {
168
+ font-size: 20px;
169
+ width: 20px;
170
+ height: 20px;
171
+ color: var(--db-text-secondary);
172
+ }
173
+
174
+ span {
175
+ font-size: 0.95rem;
176
+ }
175
177
  }
176
178
 
177
179
  .pill-btn {
178
- background: none;
179
- border: 1.5px solid rgba(var(--black-rgb), 0.15);
180
- border-radius: 100px;
181
- padding: 8px 24px;
182
- font-size: 0.9rem;
183
- font-weight: 600;
184
- color: var(--text-color);
185
- cursor: pointer;
186
- transition: all 0.2s ease;
187
-
188
- &:hover {
189
- background: rgba(var(--black-rgb), 0.05);
190
- border-color: rgba(var(--black-rgb), 0.3);
191
- }
180
+ background: none;
181
+ border: 1.5px solid rgba(var(--black-rgb), 0.15);
182
+ border-radius: 100px;
183
+ padding: 8px 24px;
184
+ font-size: 0.9rem;
185
+ font-weight: 600;
186
+ color: var(--db-text-primary);
187
+ cursor: pointer;
188
+ transition: all 0.2s ease;
189
+
190
+ &:hover {
191
+ background: rgba(var(--black-rgb), 0.05);
192
+ border-color: rgba(var(--black-rgb), 0.3);
193
+ }
192
194
  }
193
195
 
194
196
  .section-actions {
195
- display: flex;
196
- align-items: center;
197
- gap: 16px;
198
- margin-top: auto;
199
- }
197
+ display: flex;
198
+ align-items: center;
199
+ gap: 16px;
200
+ margin-top: auto;
201
+ }
package/src/lib/app/personalization/sections/terms/terms-section.component.scss CHANGED
@@ -1,74 +1,75 @@
1
1
  .terms-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
- .pane-header {
10
- h1 {
11
- margin: 0 0 8px 0;
12
- font-size: 1.75rem;
13
- font-weight: 700;
14
- color: var(--text-color);
15
- }
9
+ .pane-header {
10
+ h1 {
11
+ margin: 0 0 8px 0;
12
+ font-size: 1.75rem;
13
+ font-weight: 700;
14
+ color: var(--db-text-primary);
15
+ }
16
16
 
17
- .last-updated {
18
- margin: 0;
19
- font-size: 1rem;
20
- color: var(--secondary-text-color);
21
- }
17
+ .last-updated {
18
+ margin: 0;
19
+ font-size: 1rem;
20
+ color: var(--db-text-secondary);
22
21
  }
22
+ }
23
23
  }
24
24
 
25
25
  .terms-card {
26
- background: var(--background-color);
27
- border-radius: 16px;
28
- border: 1px solid rgba(var(--black-rgb), 0.08);
29
- padding: 32px;
30
- display: flex;
31
- flex-direction: column;
32
- gap: 32px;
33
- box-shadow: 0 1px 3px rgba(var(--black-rgb), 0.02),
34
- 0 4px 12px rgba(var(--black-rgb), 0.01);
26
+ background: var(--db-bg-color);
27
+ border-radius: 16px;
28
+ border: 1px solid rgba(var(--black-rgb), 0.08);
29
+ padding: 32px;
30
+ display: flex;
31
+ flex-direction: column;
32
+ gap: 32px;
33
+ box-shadow:
34
+ 0 1px 3px rgba(var(--black-rgb), 0.02),
35
+ 0 4px 12px rgba(var(--black-rgb), 0.01);
35
36
  }
36
37
 
37
38
  .terms-content {
38
- display: flex;
39
- flex-direction: column;
40
- gap: 24px;
39
+ display: flex;
40
+ flex-direction: column;
41
+ gap: 24px;
41
42
 
42
- section {
43
- h4 {
44
- margin: 0 0 8px 0;
45
- font-size: 1.1rem;
46
- font-weight: 600;
47
- color: var(--primary-color);
48
- }
43
+ section {
44
+ h4 {
45
+ margin: 0 0 8px 0;
46
+ font-size: 1.1rem;
47
+ font-weight: 600;
48
+ color: var(--db-primary);
49
+ }
49
50
 
50
- p {
51
- margin: 0;
52
- line-height: 1.6;
53
- font-size: 0.95rem;
54
- color: var(--text-color);
55
- }
51
+ p {
52
+ margin: 0;
53
+ line-height: 1.6;
54
+ font-size: 0.95rem;
55
+ color: var(--db-text-primary);
56
56
  }
57
+ }
57
58
 
58
- .full-terms-link {
59
- margin-top: 20px;
60
- padding-top: 20px;
61
- border-top: 1px solid rgba(var(--black-rgb), 0.05);
59
+ .full-terms-link {
60
+ margin-top: 20px;
61
+ padding-top: 20px;
62
+ border-top: 1px solid rgba(var(--black-rgb), 0.05);
62
63
 
63
- a {
64
- color: var(--primary-color);
65
- text-decoration: none;
66
- font-weight: 500;
67
- font-size: 0.95rem;
64
+ a {
65
+ color: var(--db-primary);
66
+ text-decoration: none;
67
+ font-weight: 500;
68
+ font-size: 0.95rem;
68
69
 
69
- &:hover {
70
- text-decoration: underline;
71
- }
72
- }
70
+ &:hover {
71
+ text-decoration: underline;
72
+ }
73
73
  }
74
- }
74
+ }
75
+ }
package/src/lib/doohbot.component.scss CHANGED
@@ -3,16 +3,10 @@
3
3
  @use './styles/theme' as *;
4
4
  @use './theme/index.scss' as *;
5
5
 
6
- // Global base styles (since encapsulation is None, these apply globally)
7
- html,
8
- body {
9
- height: 100%;
10
- margin: 0;
11
- color-scheme: light dark;
6
+ // Scoped base styles for the component root to prevent leaks to host
7
+ app-doohbot {
8
+ display: block;
9
+ font-family: var(--db-font, 'Roboto', 'Helvetica Neue', sans-serif);
10
+ color: var(--db-text-primary);
11
+ background-color: var(--db-bg-color);
12
12
  }
13
-
14
- body {
15
- font-family: var(--font-family, 'Roboto', 'Helvetica Neue', sans-serif);
16
- color: var(--text-color);
17
- background-color: var(--background-color);
18
- }
package/src/lib/shared/chips/chips.component.scss CHANGED
@@ -3,28 +3,28 @@
3
3
  flex-wrap: wrap;
4
4
  gap: 8px;
5
5
  padding: 10px;
6
- font: var(--font-family);
6
+ font: var(--db-font);
7
7
  justify-content: center;
8
8
  }
9
9
 
10
10
  .chip {
11
- background-color: rgba(var(--primary-color), 0.2);
12
- border: 1px solid var(--primary-color);
11
+ background-color: rgba(var(--db-primary), 0.2);
12
+ border: 1px solid var(--db-primary);
13
13
  border-radius: 16px;
14
14
  padding: 6px 12px;
15
15
  cursor: pointer;
16
- font-size: 0.9rem;
17
- font: var(--font-family);
16
+ font-size: 0.58rem;
17
+ font: var(--db-font);
18
18
  transition: background-color 0.3s ease;
19
- color: var(--text-color);
19
+ color: var(--db-text-primary);
20
20
  }
21
21
 
22
22
  .chip:hover {
23
- background-color: var(--primary-color);
23
+ background-color: var(--db-primary);
24
24
  color: var(--white);
25
25
  }
26
26
 
27
27
  .chip.active {
28
- background-color: var(--primary-color);
28
+ background-color: var(--db-primary);
29
29
  color: var(--white);
30
30
  }
package/src/lib/shared/confirmation-dialog/confirmation-dialog.component.scss ADDED
@@ -0,0 +1,24 @@
1
+ :host {
2
+ display: block;
3
+ min-width: 320px;
4
+ }
5
+
6
+ mat-dialog-content {
7
+ padding-top: 16px; // Fallback instead of undefined --space-md
8
+ color: #6b7280;
9
+ }
10
+
11
+ mat-dialog-actions {
12
+ padding: 16px 24px;
13
+ gap: 8px;
14
+
15
+ .warn-btn {
16
+ background-color: #fe0000 !important;
17
+ color: #ffffff !important;
18
+
19
+ &:hover {
20
+ background-color: #fe0000 !important;
21
+ opacity: 0.9;
22
+ }
23
+ }
24
+ }
package/src/lib/shared/dropdown-menu/dropdown-menu.component.scss CHANGED
@@ -22,9 +22,9 @@
22
22
  margin: 8px 0 0 0;
23
23
  padding: 8px 0;
24
24
  width: 180px;
25
- background: var(--background-color);
25
+ background: var(--db-bg-color);
26
26
  border-radius: 6px;
27
- box-shadow: var(--border-shadow-color);
27
+ box-shadow: var(--db-border-shadow);
28
28
  z-index: 1000;
29
29
  list-style: none;
30
30
  }
@@ -37,17 +37,17 @@
37
37
  width: 0;
38
38
  height: 0;
39
39
  border: 6px solid transparent;
40
- border-bottom-color: var(--background-color);
40
+ border-bottom-color: var(--db-bg-color);
41
41
  }
42
42
 
43
43
  .dropdown-list li a {
44
44
  display: block;
45
45
  padding: 8px 16px;
46
- color: var(--primary-color);
46
+ color: var(--db-primary);
47
47
  text-decoration: none;
48
48
  }
49
49
 
50
50
  .dropdown-list li a:hover {
51
51
  background: var(--red);
52
- color: var(--secondary-color);
52
+ color: var(--db-secondary);
53
53
  }
package/src/lib/shared/input-dialog/input-dialog.component.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .dialog-message {
6
- color: var(--secondary-text-color);
6
+ color: var(--db-text-secondary);
7
7
  margin-bottom: 20px;
8
8
  font-size: 14px;
9
9
  }
@@ -15,10 +15,10 @@
15
15
  .dialog-input {
16
16
  width: 100%;
17
17
  padding: 12px 16px;
18
- border: 1px solid var(--border-color);
18
+ border: 1px solid var(--db-border-color);
19
19
  border-radius: 8px;
20
- background: var(--background-color);
21
- color: var(--text-color);
20
+ background: var(--db-bg-color);
21
+ color: var(--db-text-primary);
22
22
  font-size: 14px;
23
23
  font-family: inherit;
24
24
  transition: all 0.2s;
@@ -26,8 +26,8 @@
26
26
 
27
27
  &:focus {
28
28
  outline: none;
29
- border-color: var(--primary-color);
30
- box-shadow: var(--border-shadow-color);
29
+ border-color: var(--db-primary);
30
+ box-shadow: var(--db-border-shadow);
31
31
  }
32
32
  }
33
33
 
@@ -52,11 +52,11 @@
52
52
  }
53
53
 
54
54
  &.primary-btn {
55
- background-color: var(--primary-color);
55
+ background-color: var(--db-primary);
56
56
  color: var(--white);
57
57
 
58
58
  &:hover {
59
- background-color: var(--primary-color);
59
+ background-color: var(--db-primary);
60
60
  }
61
61
  }
62
62