@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/chat/components/chat-message/chat-message.component.scss CHANGED
@@ -1,235 +1,235 @@
1
1
  :host {
2
- display: block;
3
- width: 100%;
2
+ display: block;
3
+ width: 100%;
4
4
  }
5
5
 
6
6
  /* Message */
7
7
  .message {
8
+ display: flex;
9
+ align-items: center;
10
+ gap: 8px;
11
+ margin-bottom: 6px;
12
+
13
+ &.user {
14
+ justify-content: flex-end;
15
+ }
16
+
17
+ &.assistant {
18
+ justify-content: flex-start;
19
+ }
20
+
21
+ /* User avatar container */
22
+ .avatar-container {
8
23
  display: flex;
24
+ flex-direction: column;
9
25
  align-items: center;
10
- gap: 8px;
11
- margin-bottom: 6px;
26
+ gap: 4px;
27
+
28
+ .user-avatar {
29
+ width: 24px;
30
+ height: 24px;
31
+ border-radius: 50%;
32
+ object-fit: cover;
33
+ border: 1px solid var(--db-border-color);
34
+ }
12
35
 
13
- &.user {
14
- justify-content: flex-end;
36
+ .user-avatar-icon {
37
+ font-size: 24px;
38
+ width: 24px;
39
+ height: 24px;
40
+ color: var(--db-text-secondary);
15
41
  }
16
42
 
17
- &.assistant {
18
- justify-content: flex-start;
43
+ /* Bot avatar */
44
+ .assistant-avatar {
45
+ width: 24px;
46
+ height: 24px;
47
+ border-radius: 50%;
48
+ object-fit: cover;
49
+ border: 1px solid var(--db-border-color);
50
+ filter: var(--db-avatar-filter);
51
+ }
52
+ }
53
+
54
+ /* Message bubbles */
55
+ .message-content {
56
+ max-width: 80%;
57
+ font-family: var(--db-font);
58
+ user-select: text;
59
+ cursor: text;
60
+
61
+ .user {
62
+ background-color: var(--db-bg-bot-msg);
63
+ color: var(--db-text-bot-msg);
64
+ align-self: flex-end;
65
+ border-radius: 20px;
66
+ padding: 10px 15px;
67
+ position: relative;
68
+ user-select: text;
69
+ cursor: text;
19
70
  }
20
71
 
21
- /* User avatar container */
22
- .avatar-container {
72
+ .assistant {
73
+ background-color: transparent;
74
+ color: var(--db-text-bot-msg);
75
+ align-self: flex-start;
76
+ border-radius: 20px;
77
+ padding: 10px 15px;
78
+ position: relative;
79
+ display: flex;
80
+ flex-direction: column;
81
+
82
+ // Apply animation only to bot messages
83
+ // animation: fadeIn 0.4s ease-out forwards;
84
+
85
+ .message-footer {
86
+ width: 100%;
87
+ margin-top: 2px;
23
88
  display: flex;
24
89
  flex-direction: column;
25
- align-items: center;
90
+ align-items: flex-start;
26
91
  gap: 4px;
27
92
 
28
- .user-avatar {
29
- width: 24px;
30
- height: 24px;
31
- border-radius: 50%;
32
- object-fit: cover;
33
- border: 1px solid var(--border-color);
34
- }
35
-
36
- /* Bot avatar */
37
- .assistant-avatar {
38
- width: 24px;
39
- height: 24px;
40
- border-radius: 50%;
41
- object-fit: cover;
42
- border: 1px solid var(--border-color);
43
- filter: var(--avatar-filter);
93
+ .footer-text {
94
+ margin: 0;
95
+ font-size: 13px;
96
+ color: var(--db-text-secondary);
97
+ font-family: var(--db-font);
98
+ font-style: italic;
44
99
  }
45
100
 
46
- /* Only placeholder gets filter */
47
- .user-avatar.placeholder {
48
- filter: var(--avatar-filter);
49
- }
50
- }
101
+ .message-actions {
102
+ display: flex;
103
+ align-items: center;
104
+ gap: 12px;
105
+ padding-top: 4px;
51
106
 
52
- /* Message bubbles */
53
- .message-content {
54
- max-width: 80%;
55
- font-family: var(--font-family);
56
- user-select: text;
57
- cursor: text;
58
-
59
- .user {
60
- background-color: var(--bot-message-color);
61
- color: var(--bot-text-color);
62
- align-self: flex-end;
63
- border-radius: 20px;
64
- padding: 10px 15px;
65
- position: relative;
66
- user-select: text;
67
- cursor: text;
68
- }
69
-
70
- .assistant {
71
- background-color: none;
72
- color: var(--bot-text-color);
73
- align-self: flex-start;
74
- border-radius: 20px;
75
- padding: 10px 15px;
76
- position: relative;
77
- display: flex;
78
- flex-direction: column;
79
-
80
- // Apply animation only to bot messages
81
- // animation: fadeIn 0.4s ease-out forwards;
82
-
83
- .message-footer {
84
- width: 100%;
85
- margin-top: 2px;
86
- display: flex;
87
- flex-direction: column;
88
- align-items: flex-start;
89
- gap: 4px;
90
-
91
- .footer-text {
92
- margin: 0;
93
- font-size: 13px;
94
- color: var(--secondary-text-color);
95
- font-family: var(--font-family);
96
- font-style: italic;
97
- }
98
-
99
- .message-actions {
100
- display: flex;
101
- align-items: center;
102
- gap: 12px;
103
- padding-top: 4px;
104
-
105
-
106
- .action-btn {
107
- background: transparent;
108
- border: none;
109
- cursor: pointer;
110
- padding: 2px;
111
- border-radius: 4px;
112
- display: flex;
113
- align-items: center;
114
- justify-content: center;
115
- color: var(--secondary-text-color);
116
- transition: all 0.2s;
117
-
118
- mat-icon {
119
- font-size: 16px;
120
- width: 16px;
121
- height: 16px;
122
- }
123
-
124
- &:hover {
125
- color: var(--text-color);
126
- }
127
- }
128
- }
129
- }
130
- }
131
- }
132
-
133
- /* User Message Wrapper */
134
- .user-message-wrapper {
135
- display: flex;
136
- flex-direction: column;
137
- align-items: flex-end;
138
- position: relative;
139
- gap: 2px;
140
-
141
- .action-btn.user-copy {
107
+ .action-btn {
142
108
  background: transparent;
143
109
  border: none;
144
110
  cursor: pointer;
145
- padding: 4px;
111
+ padding: 2px;
146
112
  border-radius: 4px;
147
113
  display: flex;
148
114
  align-items: center;
149
115
  justify-content: center;
150
- color: var(--secondary-text-color);
116
+ color: var(--db-text-secondary);
151
117
  transition: all 0.2s;
152
- opacity: 0;
153
118
 
154
119
  mat-icon {
155
- font-size: 14px;
156
- width: 14px;
157
- height: 14px;
120
+ font-size: 16px;
121
+ width: 16px;
122
+ height: 16px;
158
123
  }
159
124
 
160
125
  &:hover {
161
- color: var(--text-color);
162
- background-color: rgba(var(--black-rgb), 0.05);
126
+ color: var(--db-text-primary);
163
127
  }
128
+ }
164
129
  }
130
+ }
131
+ }
132
+ }
165
133
 
166
- &:hover .action-btn.user-copy {
167
- opacity: 1;
168
- }
169
-
170
- .message-content ::selection {
171
- background-color: color-mix(in srgb, var(--primary-color), white 60%);
172
- }
134
+ /* User Message Wrapper */
135
+ .user-message-wrapper {
136
+ display: flex;
137
+ flex-direction: column;
138
+ align-items: flex-end;
139
+ position: relative;
140
+ gap: 2px;
141
+
142
+ .action-btn.user-copy {
143
+ background: transparent;
144
+ border: none;
145
+ cursor: pointer;
146
+ padding: 4px;
147
+ border-radius: 4px;
148
+ display: flex;
149
+ align-items: center;
150
+ justify-content: center;
151
+ color: var(--db-text-secondary);
152
+ transition: all 0.2s;
153
+ opacity: 0;
154
+
155
+ mat-icon {
156
+ font-size: 14px;
157
+ width: 14px;
158
+ height: 14px;
159
+ }
160
+
161
+ &:hover {
162
+ color: var(--db-text-primary);
163
+ background-color: rgba(var(--black-rgb), 0.05);
164
+ }
165
+ }
173
166
 
174
- .message-content ::-moz-selection {
175
- background-color: color-mix(in srgb, var(--primary-color), white 60%);
176
- }
167
+ &:hover .action-btn.user-copy {
168
+ opacity: 1;
177
169
  }
178
- }
179
170
 
180
- @keyframes fadeIn {
181
- from {
182
- opacity: 0;
183
- transform: translateY(10px);
171
+ .message-content ::selection {
172
+ background-color: color-mix(in srgb, var(--db-primary), white 60%);
184
173
  }
185
174
 
186
- to {
187
- opacity: 1;
188
- transform: translateY(0);
175
+ .message-content ::-moz-selection {
176
+ background-color: color-mix(in srgb, var(--db-primary), white 60%);
189
177
  }
178
+ }
179
+ }
180
+
181
+ @keyframes fadeIn {
182
+ from {
183
+ opacity: 0;
184
+ transform: translateY(10px);
185
+ }
186
+
187
+ to {
188
+ opacity: 1;
189
+ transform: translateY(0);
190
+ }
190
191
  }
191
192
 
192
193
  /* Typing indicator */
193
194
  .typing-indicator {
194
- display: flex;
195
- align-items: center;
196
- justify-content: flex-start;
197
- gap: 4px;
198
- min-height: 20px;
199
-
200
- .thinking-text {
201
- font-size: 13px;
202
- color: var(--secondary-text-color);
203
- margin-right: 4px;
204
- font-family: var(--font-family);
205
- }
195
+ display: flex;
196
+ align-items: center;
197
+ justify-content: flex-start;
198
+ gap: 4px;
199
+ min-height: 20px;
200
+
201
+ .thinking-text {
202
+ font-size: 13px;
203
+ color: var(--db-text-secondary);
204
+ margin-right: 4px;
205
+ font-family: var(--db-font);
206
+ }
206
207
  }
207
208
 
208
209
  .typing-indicator span:not(.thinking-text) {
209
- width: 6px;
210
- height: 6px;
211
- background-color: var(--typing-indicator-color);
212
- border-radius: 50%;
213
- animation: blink 1.4s infinite both;
210
+ width: 6px;
211
+ height: 6px;
212
+ background-color: var(--db-color-typing);
213
+ border-radius: 50%;
214
+ animation: blink 1.4s infinite both;
214
215
  }
215
216
 
216
217
  .typing-indicator span:nth-child(2) {
217
- animation-delay: 0.2s;
218
+ animation-delay: 0.2s;
218
219
  }
219
220
 
220
221
  .typing-indicator span:nth-child(3) {
221
- animation-delay: 0.4s;
222
+ animation-delay: 0.4s;
222
223
  }
223
224
 
224
225
  @keyframes blink {
225
-
226
- 0%,
227
- 80%,
228
- 100% {
229
- opacity: 0.2;
230
- }
231
-
232
- 40% {
233
- opacity: 1;
234
- }
235
- }
226
+ 0%,
227
+ 80%,
228
+ 100% {
229
+ opacity: 0.2;
230
+ }
231
+
232
+ 40% {
233
+ opacity: 1;
234
+ }
235
+ }
package/src/lib/app/chat/components/chat-message-container/chat-message-container.component.scss CHANGED
@@ -11,8 +11,8 @@
11
11
  padding: 10px 15px;
12
12
  border: none;
13
13
  border-radius: 20px;
14
- background-color: var(--primary-color);
15
- color: var(--user-text-color);
14
+ background-color: var(--db-primary);
15
+ color: var(--db-bg-color);
16
16
  font-size: 1em;
17
17
  cursor: pointer;
18
18
  transition: background-color 0.2s ease;
@@ -49,7 +49,7 @@
49
49
  /* Firefox */
50
50
  .chat-messages {
51
51
  // scrollbar-width: thin;
52
- // scrollbar-color: var(--primary-color) var(--background-color);
52
+ // scrollbar-color: var(--db-primary) var(--db-bg-color);
53
53
 
54
54
  /* Message style delegates to app-chat-message */
55
55
  app-chat-message {
@@ -68,11 +68,11 @@
68
68
 
69
69
  .welcome-greeting {
70
70
  margin: 0;
71
- color: var(--text-color);
72
- font-family: var(--font-family);
71
+ color: var(--db-text-primary);
72
+ font-family: var(--db-font);
73
73
  font-size: 24px;
74
74
  font-weight: 600;
75
- background: var(--text-color);
75
+ background: var(--db-text-primary);
76
76
  -webkit-background-clip: text;
77
77
  -webkit-text-fill-color: transparent;
78
78
  background-clip: text;
@@ -86,7 +86,7 @@
86
86
  -webkit-background-clip: initial;
87
87
  -webkit-text-fill-color: initial;
88
88
  background-clip: initial;
89
- // color: var(--text-color); /*apply color here */
89
+ // color: var(--db-text-primary); /*apply color here */
90
90
  }
91
91
 
92
92
  /* Welcome screen */
@@ -102,19 +102,50 @@
102
102
 
103
103
  .welcome-screen h3 {
104
104
  margin: 0 0 5px 0;
105
- color: var(--text-color);
106
- font-family: var(--font-family);
105
+ color: var(--db-text-primary);
106
+ font-family: var(--db-font);
107
107
  font-size: 18px;
108
108
  }
109
109
 
110
110
  .welcome-screen p {
111
111
  margin: 0;
112
- color: var(--secondary-text-color);
112
+ color: var(--db-text-secondary);
113
113
  font-size: 14px;
114
- font-family: var(--font-family);
114
+ font-family: var(--db-font);
115
115
  margin-bottom: 30px;
116
116
  }
117
117
 
118
+ .loader-container {
119
+ display: flex;
120
+ flex-direction: column;
121
+ align-items: center;
122
+ justify-content: center;
123
+ height: 100%;
124
+ padding: 40px 20px;
125
+ color: var(--db-text-secondary);
126
+
127
+ p {
128
+ margin-top: 15px;
129
+ font-size: 14px;
130
+ font-weight: 500;
131
+ }
132
+ }
133
+
134
+ .loader {
135
+ width: 32px;
136
+ height: 32px;
137
+ border: 3px solid rgba(var(--db-border-color-rgb), 0.1);
138
+ border-radius: 50%;
139
+ border-top-color: var(--db-primary);
140
+ animation: spin 1s ease-in-out infinite;
141
+ }
142
+
143
+ @keyframes spin {
144
+ to {
145
+ transform: rotate(360deg);
146
+ }
147
+ }
148
+
118
149
  @keyframes fadeIn {
119
150
  from {
120
151
  opacity: 0;
@@ -143,16 +174,16 @@
143
174
 
144
175
  .thinking-text {
145
176
  font-size: 13px;
146
- color: var(--secondary-text-color);
177
+ color: var(--db-text-secondary);
147
178
  margin-right: 4px;
148
- font-family: var(--font-family);
179
+ font-family: var(--db-font);
149
180
  }
150
181
  }
151
182
 
152
183
  .typing-indicator span:not(.thinking-text) {
153
184
  width: 6px;
154
185
  height: 6px;
155
- background-color: var(--typing-indicator-color);
186
+ background-color: var(--db-color-typing);
156
187
  border-radius: 50%;
157
188
  animation: blink 1.4s infinite both;
158
189
  }
@@ -194,9 +225,9 @@
194
225
  transition: all 0.2s ease;
195
226
 
196
227
  &.primary {
197
- background: var(--primary-color);
198
- color: var(--white);
199
- border: 1px solid var(--primary-color);
228
+ background: var(--db-primary);
229
+ color: var(--db-bg-color);
230
+ border: 1px solid var(--db-primary);
200
231
 
201
232
  &:hover {
202
233
  opacity: 0.9;
@@ -210,8 +241,8 @@
210
241
 
211
242
  &.secondary {
212
243
  background: transparent;
213
- color: var(--primary-color);
214
- border: 1px solid var(--primary-color);
244
+ color: var(--db-primary);
245
+ border: 1px solid var(--db-primary);
215
246
 
216
247
  &:hover {
217
248
  opacity: 0.9;
@@ -230,8 +261,8 @@
230
261
  width: 32px;
231
262
  height: 32px;
232
263
  border-radius: 50%;
233
- background-color: var(--background-color);
234
- border: 1px solid var(--border-color);
264
+ background-color: var(--db-bg-color);
265
+ border: 1px solid var(--db-border-color);
235
266
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
236
267
  display: flex;
237
268
  align-items: center;
@@ -244,14 +275,14 @@
244
275
  font-size: 18px;
245
276
  width: 18px;
246
277
  height: 18px;
247
- color: var(--secondary-text-color);
278
+ color: var(--db-text-secondary);
248
279
  }
249
280
 
250
281
  &:hover {
251
- background-color: var(--bot-message-color);
282
+ background-color: var(--db-bg-bot-msg);
252
283
 
253
284
  mat-icon {
254
- color: var(--text-color);
285
+ color: var(--db-text-primary);
255
286
  }
256
287
  }
257
288
  }