@aws-amplify/ui-react 6.2.1 → 6.3.0

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 (47) hide show
  1. package/dist/{Field-d47a49dc.js → Field-4b189104.js} +11 -0
  2. package/dist/esm/PrimitiveCatalog.mjs +285 -17
  3. package/dist/esm/components/AccountSettings/ChangePassword/ChangePassword.mjs +1 -0
  4. package/dist/esm/components/AccountSettings/ChangePassword/defaults.mjs +1 -0
  5. package/dist/esm/components/AccountSettings/DeleteUser/DeleteUser.mjs +1 -0
  6. package/dist/esm/components/AccountSettings/DeleteUser/defaults.mjs +1 -0
  7. package/dist/esm/components/AccountSettings/shared/Defaults.mjs +1 -0
  8. package/dist/esm/index.mjs +1 -0
  9. package/dist/esm/internal.mjs +4 -0
  10. package/dist/esm/primitives/Avatar/Avatar.mjs +23 -0
  11. package/dist/esm/primitives/Icon/icons/IconAssistant.mjs +15 -0
  12. package/dist/esm/primitives/Icon/icons/IconAttach.mjs +15 -0
  13. package/dist/esm/primitives/Icon/icons/IconSend.mjs +15 -0
  14. package/dist/esm/primitives/Icon/icons/IconUser.mjs +15 -0
  15. package/dist/esm/primitives/ScrollView/ScrollView.mjs +21 -1
  16. package/dist/esm/primitives/TextArea/AutoresizeTextarea.mjs +19 -0
  17. package/dist/esm/primitives/TextArea/useAutoresizeTextarea.mjs +28 -0
  18. package/dist/esm/primitives/TextAreaField/TextAreaField.mjs +3 -2
  19. package/dist/esm/primitives/index.mjs +1 -0
  20. package/dist/esm/version.mjs +1 -1
  21. package/dist/index.js +98 -28
  22. package/dist/internal.js +320 -18
  23. package/dist/styles/AIConversation.css +108 -0
  24. package/dist/styles/AIConversation.layer.css +110 -0
  25. package/dist/styles/avatar.css +111 -0
  26. package/dist/styles/avatar.layer.css +113 -0
  27. package/dist/styles/base.css +29 -0
  28. package/dist/styles/base.layer.css +29 -0
  29. package/dist/styles.css +250 -0
  30. package/dist/styles.layer.css +250 -0
  31. package/dist/types/primitives/Avatar/Avatar.d.ts +6 -0
  32. package/dist/types/primitives/Avatar/index.d.ts +2 -0
  33. package/dist/types/primitives/Avatar/types.d.ts +36 -0
  34. package/dist/types/primitives/Icon/context/IconsContext.d.ts +2 -0
  35. package/dist/types/primitives/Icon/icons/IconAssistant.d.ts +5 -0
  36. package/dist/types/primitives/Icon/icons/IconAttach.d.ts +5 -0
  37. package/dist/types/primitives/Icon/icons/IconSend.d.ts +5 -0
  38. package/dist/types/primitives/Icon/icons/IconUser.d.ts +5 -0
  39. package/dist/types/primitives/Icon/icons/index.d.ts +4 -0
  40. package/dist/types/primitives/TextArea/AutoresizeTextarea.d.ts +3 -0
  41. package/dist/types/primitives/TextArea/index.d.ts +1 -0
  42. package/dist/types/primitives/TextArea/useAutoresizeTextarea.d.ts +1 -0
  43. package/dist/types/primitives/components.d.ts +1 -0
  44. package/dist/types/primitives/types/scrollView.d.ts +5 -0
  45. package/dist/types/primitives/types/textAreaField.d.ts +7 -0
  46. package/dist/types/version.d.ts +1 -1
  47. package/package.json +3 -3
package/dist/styles/avatar.css ADDED
@@ -0,0 +1,111 @@
1
+ .amplify-avatar {
2
+ --avatar-color: var(--amplify-components-avatar-color);
3
+ --avatar-background-color: var(--amplify-components-avatar-background-color);
4
+ --avatar-filled-background-color: var(--amplify-components-avatar-color);
5
+ --avatar-filled-color: var(--amplify-components-avatar-background-color);
6
+ --avatar-border-color: var(--amplify-components-avatar-border-color);
7
+ --avatar-size: var(--amplify-components-avatar-width);
8
+ --amplify-components-icon-height: 100%;
9
+ display: inline-flex;
10
+ align-items: center;
11
+ justify-content: center;
12
+ color: var(--avatar-color);
13
+ background-color: var(--avatar-background-color);
14
+ font-weight: var(--amplify-components-avatar-font-weight);
15
+ font-size: var(--amplify-components-avatar-font-size);
16
+ width: var(--amplify-components-avatar-width);
17
+ height: var(--amplify-components-avatar-height);
18
+ overflow: hidden;
19
+ border-radius: var(--amplify-components-avatar-border-radius);
20
+ }
21
+ .amplify-avatar--filled {
22
+ background-color: var(--avatar-filled-background-color);
23
+ color: var(--avatar-filled-color);
24
+ }
25
+ .amplify-avatar--outlined {
26
+ border-width: var(--amplify-components-avatar-border-width);
27
+ border-style: solid;
28
+ padding: var(--amplify-components-avatar-border-width);
29
+ border-color: var(--avatar-border-color);
30
+ background-color: transparent;
31
+ color: var(--avatar-color);
32
+ }
33
+ .amplify-avatar--small {
34
+ --avatar-size: var(--amplify-components-avatar-small-width);
35
+ width: var(--amplify-components-avatar-small-width);
36
+ height: var(--amplify-components-avatar-small-height);
37
+ font-size: var(--amplify-components-avatar-small-font-size);
38
+ }
39
+ .amplify-avatar--large {
40
+ --avatar-size: var(--amplify-components-avatar-large-width);
41
+ width: var(--amplify-components-avatar-large-width);
42
+ height: var(--amplify-components-avatar-large-height);
43
+ font-size: var(--amplify-components-avatar-large-font-size);
44
+ }
45
+ .amplify-avatar--warning {
46
+ --avatar-border-color: var(
47
+ --amplify-components-avatar-warning-border-color
48
+ );
49
+ --avatar-background-color: var(
50
+ --amplify-components-avatar-warning-background-color
51
+ );
52
+ --avatar-color: var(--amplify-components-avatar-warning-color);
53
+ --avatar-filled-background-color: var(
54
+ --amplify-components-avatar-warning-color
55
+ );
56
+ --avatar-filled-color: var(
57
+ --amplify-components-avatar-warning-background-color
58
+ );
59
+ }
60
+ .amplify-avatar--error {
61
+ --avatar-border-color: var(--amplify-components-avatar-error-border-color);
62
+ --avatar-background-color: var(
63
+ --amplify-components-avatar-error-background-color
64
+ );
65
+ --avatar-color: var(--amplify-components-avatar-error-color);
66
+ --avatar-filled-background-color: var(
67
+ --amplify-components-avatar-error-color
68
+ );
69
+ --avatar-filled-color: var(
70
+ --amplify-components-avatar-error-background-color
71
+ );
72
+ }
73
+ .amplify-avatar--info {
74
+ --avatar-border-color: var(--amplify-components-avatar-info-border-color);
75
+ --avatar-background-color: var(
76
+ --amplify-components-avatar-info-background-color
77
+ );
78
+ --avatar-color: var(--amplify-components-avatar-info-color);
79
+ --avatar-filled-background-color: var(
80
+ --amplify-components-avatar-info-color
81
+ );
82
+ --avatar-filled-color: var(
83
+ --amplify-components-avatar-info-background-color
84
+ );
85
+ }
86
+ .amplify-avatar--success {
87
+ --avatar-border-color: var(
88
+ --amplify-components-avatar-success-border-color
89
+ );
90
+ --avatar-background-color: var(
91
+ --amplify-components-avatar-success-background-color
92
+ );
93
+ --avatar-color: var(--amplify-components-avatar-success-color);
94
+ --avatar-filled-background-color: var(
95
+ --amplify-components-avatar-success-color
96
+ );
97
+ --avatar-filled-color: var(
98
+ --amplify-components-avatar-success-background-color
99
+ );
100
+ }
101
+ .amplify-avatar__icon {
102
+ display: flex;
103
+ font-size: calc(var(--avatar-size) * 0.6);
104
+ }
105
+ .amplify-avatar__image {
106
+ width: 100%;
107
+ height: 100%;
108
+ -o-object-fit: cover;
109
+ object-fit: cover;
110
+ display: block;
111
+ }
package/dist/styles/avatar.layer.css ADDED
@@ -0,0 +1,113 @@
1
+ @layer amplify.components {
2
+ .amplify-avatar {
3
+ --avatar-color: var(--amplify-components-avatar-color);
4
+ --avatar-background-color: var(--amplify-components-avatar-background-color);
5
+ --avatar-filled-background-color: var(--amplify-components-avatar-color);
6
+ --avatar-filled-color: var(--amplify-components-avatar-background-color);
7
+ --avatar-border-color: var(--amplify-components-avatar-border-color);
8
+ --avatar-size: var(--amplify-components-avatar-width);
9
+ --amplify-components-icon-height: 100%;
10
+ display: inline-flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ color: var(--avatar-color);
14
+ background-color: var(--avatar-background-color);
15
+ font-weight: var(--amplify-components-avatar-font-weight);
16
+ font-size: var(--amplify-components-avatar-font-size);
17
+ width: var(--amplify-components-avatar-width);
18
+ height: var(--amplify-components-avatar-height);
19
+ overflow: hidden;
20
+ border-radius: var(--amplify-components-avatar-border-radius);
21
+ }
22
+ .amplify-avatar--filled {
23
+ background-color: var(--avatar-filled-background-color);
24
+ color: var(--avatar-filled-color);
25
+ }
26
+ .amplify-avatar--outlined {
27
+ border-width: var(--amplify-components-avatar-border-width);
28
+ border-style: solid;
29
+ padding: var(--amplify-components-avatar-border-width);
30
+ border-color: var(--avatar-border-color);
31
+ background-color: transparent;
32
+ color: var(--avatar-color);
33
+ }
34
+ .amplify-avatar--small {
35
+ --avatar-size: var(--amplify-components-avatar-small-width);
36
+ width: var(--amplify-components-avatar-small-width);
37
+ height: var(--amplify-components-avatar-small-height);
38
+ font-size: var(--amplify-components-avatar-small-font-size);
39
+ }
40
+ .amplify-avatar--large {
41
+ --avatar-size: var(--amplify-components-avatar-large-width);
42
+ width: var(--amplify-components-avatar-large-width);
43
+ height: var(--amplify-components-avatar-large-height);
44
+ font-size: var(--amplify-components-avatar-large-font-size);
45
+ }
46
+ .amplify-avatar--warning {
47
+ --avatar-border-color: var(
48
+ --amplify-components-avatar-warning-border-color
49
+ );
50
+ --avatar-background-color: var(
51
+ --amplify-components-avatar-warning-background-color
52
+ );
53
+ --avatar-color: var(--amplify-components-avatar-warning-color);
54
+ --avatar-filled-background-color: var(
55
+ --amplify-components-avatar-warning-color
56
+ );
57
+ --avatar-filled-color: var(
58
+ --amplify-components-avatar-warning-background-color
59
+ );
60
+ }
61
+ .amplify-avatar--error {
62
+ --avatar-border-color: var(--amplify-components-avatar-error-border-color);
63
+ --avatar-background-color: var(
64
+ --amplify-components-avatar-error-background-color
65
+ );
66
+ --avatar-color: var(--amplify-components-avatar-error-color);
67
+ --avatar-filled-background-color: var(
68
+ --amplify-components-avatar-error-color
69
+ );
70
+ --avatar-filled-color: var(
71
+ --amplify-components-avatar-error-background-color
72
+ );
73
+ }
74
+ .amplify-avatar--info {
75
+ --avatar-border-color: var(--amplify-components-avatar-info-border-color);
76
+ --avatar-background-color: var(
77
+ --amplify-components-avatar-info-background-color
78
+ );
79
+ --avatar-color: var(--amplify-components-avatar-info-color);
80
+ --avatar-filled-background-color: var(
81
+ --amplify-components-avatar-info-color
82
+ );
83
+ --avatar-filled-color: var(
84
+ --amplify-components-avatar-info-background-color
85
+ );
86
+ }
87
+ .amplify-avatar--success {
88
+ --avatar-border-color: var(
89
+ --amplify-components-avatar-success-border-color
90
+ );
91
+ --avatar-background-color: var(
92
+ --amplify-components-avatar-success-background-color
93
+ );
94
+ --avatar-color: var(--amplify-components-avatar-success-color);
95
+ --avatar-filled-background-color: var(
96
+ --amplify-components-avatar-success-color
97
+ );
98
+ --avatar-filled-color: var(
99
+ --amplify-components-avatar-success-background-color
100
+ );
101
+ }
102
+ .amplify-avatar__icon {
103
+ display: flex;
104
+ font-size: calc(var(--avatar-size) * 0.6);
105
+ }
106
+ .amplify-avatar__image {
107
+ width: 100%;
108
+ height: 100%;
109
+ -o-object-fit: cover;
110
+ object-fit: cover;
111
+ display: block;
112
+ }
113
+ }
package/dist/styles/base.css CHANGED
@@ -83,6 +83,35 @@
83
83
  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
84
84
  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
85
85
  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
86
+ --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
87
+ --amplify-components-avatar-line-height: 1;
88
+ --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
89
+ --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
90
+ --amplify-components-avatar-text-align: center;
91
+ --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
92
+ --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
93
+ --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
94
+ --amplify-components-avatar-border-radius: 100%;
95
+ --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
96
+ --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
97
+ --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
98
+ --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
99
+ --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
100
+ --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
101
+ --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
102
+ --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
103
+ --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
104
+ --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
105
+ --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
106
+ --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
107
+ --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
108
+ --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
109
+ --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
110
+ --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
111
+ --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
112
+ --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
113
+ --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
114
+ --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
86
115
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
87
116
  --amplify-components-badge-line-height: 1;
88
117
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
package/dist/styles/base.layer.css CHANGED
@@ -84,6 +84,35 @@
84
84
  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
85
85
  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
86
86
  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
87
+ --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
88
+ --amplify-components-avatar-line-height: 1;
89
+ --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
90
+ --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
91
+ --amplify-components-avatar-text-align: center;
92
+ --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
93
+ --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
94
+ --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
95
+ --amplify-components-avatar-border-radius: 100%;
96
+ --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
97
+ --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
98
+ --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
99
+ --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
100
+ --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
101
+ --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
102
+ --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
103
+ --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
104
+ --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
105
+ --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
106
+ --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
107
+ --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
108
+ --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
109
+ --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
110
+ --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
111
+ --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
112
+ --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
113
+ --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
114
+ --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
115
+ --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
87
116
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
88
117
  --amplify-components-badge-line-height: 1;
89
118
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
package/dist/styles.css CHANGED
@@ -83,6 +83,35 @@
83
83
  --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
84
84
  --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
85
85
  --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
86
+ --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
87
+ --amplify-components-avatar-line-height: 1;
88
+ --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
89
+ --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
90
+ --amplify-components-avatar-text-align: center;
91
+ --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
92
+ --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
93
+ --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
94
+ --amplify-components-avatar-border-radius: 100%;
95
+ --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
96
+ --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
97
+ --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
98
+ --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
99
+ --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
100
+ --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
101
+ --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
102
+ --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
103
+ --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
104
+ --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
105
+ --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
106
+ --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
107
+ --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
108
+ --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
109
+ --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
110
+ --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
111
+ --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
112
+ --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
113
+ --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
114
+ --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
86
115
  --amplify-components-badge-color: var(--amplify-colors-font-primary);
87
116
  --amplify-components-badge-line-height: 1;
88
117
  --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
@@ -3421,6 +3450,118 @@ strong.amplify-text {
3421
3450
  gap: var(--amplify-space-medium);
3422
3451
  }
3423
3452
 
3453
+ .amplify-avatar {
3454
+ --avatar-color: var(--amplify-components-avatar-color);
3455
+ --avatar-background-color: var(--amplify-components-avatar-background-color);
3456
+ --avatar-filled-background-color: var(--amplify-components-avatar-color);
3457
+ --avatar-filled-color: var(--amplify-components-avatar-background-color);
3458
+ --avatar-border-color: var(--amplify-components-avatar-border-color);
3459
+ --avatar-size: var(--amplify-components-avatar-width);
3460
+ --amplify-components-icon-height: 100%;
3461
+ display: inline-flex;
3462
+ align-items: center;
3463
+ justify-content: center;
3464
+ color: var(--avatar-color);
3465
+ background-color: var(--avatar-background-color);
3466
+ font-weight: var(--amplify-components-avatar-font-weight);
3467
+ font-size: var(--amplify-components-avatar-font-size);
3468
+ width: var(--amplify-components-avatar-width);
3469
+ height: var(--amplify-components-avatar-height);
3470
+ overflow: hidden;
3471
+ border-radius: var(--amplify-components-avatar-border-radius);
3472
+ }
3473
+ .amplify-avatar--filled {
3474
+ background-color: var(--avatar-filled-background-color);
3475
+ color: var(--avatar-filled-color);
3476
+ }
3477
+ .amplify-avatar--outlined {
3478
+ border-width: var(--amplify-components-avatar-border-width);
3479
+ border-style: solid;
3480
+ padding: var(--amplify-components-avatar-border-width);
3481
+ border-color: var(--avatar-border-color);
3482
+ background-color: transparent;
3483
+ color: var(--avatar-color);
3484
+ }
3485
+ .amplify-avatar--small {
3486
+ --avatar-size: var(--amplify-components-avatar-small-width);
3487
+ width: var(--amplify-components-avatar-small-width);
3488
+ height: var(--amplify-components-avatar-small-height);
3489
+ font-size: var(--amplify-components-avatar-small-font-size);
3490
+ }
3491
+ .amplify-avatar--large {
3492
+ --avatar-size: var(--amplify-components-avatar-large-width);
3493
+ width: var(--amplify-components-avatar-large-width);
3494
+ height: var(--amplify-components-avatar-large-height);
3495
+ font-size: var(--amplify-components-avatar-large-font-size);
3496
+ }
3497
+ .amplify-avatar--warning {
3498
+ --avatar-border-color: var(
3499
+ --amplify-components-avatar-warning-border-color
3500
+ );
3501
+ --avatar-background-color: var(
3502
+ --amplify-components-avatar-warning-background-color
3503
+ );
3504
+ --avatar-color: var(--amplify-components-avatar-warning-color);
3505
+ --avatar-filled-background-color: var(
3506
+ --amplify-components-avatar-warning-color
3507
+ );
3508
+ --avatar-filled-color: var(
3509
+ --amplify-components-avatar-warning-background-color
3510
+ );
3511
+ }
3512
+ .amplify-avatar--error {
3513
+ --avatar-border-color: var(--amplify-components-avatar-error-border-color);
3514
+ --avatar-background-color: var(
3515
+ --amplify-components-avatar-error-background-color
3516
+ );
3517
+ --avatar-color: var(--amplify-components-avatar-error-color);
3518
+ --avatar-filled-background-color: var(
3519
+ --amplify-components-avatar-error-color
3520
+ );
3521
+ --avatar-filled-color: var(
3522
+ --amplify-components-avatar-error-background-color
3523
+ );
3524
+ }
3525
+ .amplify-avatar--info {
3526
+ --avatar-border-color: var(--amplify-components-avatar-info-border-color);
3527
+ --avatar-background-color: var(
3528
+ --amplify-components-avatar-info-background-color
3529
+ );
3530
+ --avatar-color: var(--amplify-components-avatar-info-color);
3531
+ --avatar-filled-background-color: var(
3532
+ --amplify-components-avatar-info-color
3533
+ );
3534
+ --avatar-filled-color: var(
3535
+ --amplify-components-avatar-info-background-color
3536
+ );
3537
+ }
3538
+ .amplify-avatar--success {
3539
+ --avatar-border-color: var(
3540
+ --amplify-components-avatar-success-border-color
3541
+ );
3542
+ --avatar-background-color: var(
3543
+ --amplify-components-avatar-success-background-color
3544
+ );
3545
+ --avatar-color: var(--amplify-components-avatar-success-color);
3546
+ --avatar-filled-background-color: var(
3547
+ --amplify-components-avatar-success-color
3548
+ );
3549
+ --avatar-filled-color: var(
3550
+ --amplify-components-avatar-success-background-color
3551
+ );
3552
+ }
3553
+ .amplify-avatar__icon {
3554
+ display: flex;
3555
+ font-size: calc(var(--avatar-size) * 0.6);
3556
+ }
3557
+ .amplify-avatar__image {
3558
+ width: 100%;
3559
+ height: 100%;
3560
+ -o-object-fit: cover;
3561
+ object-fit: cover;
3562
+ display: block;
3563
+ }
3564
+
3424
3565
  .amplify-breadcrumbs__list {
3425
3566
  display: flex;
3426
3567
  flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
@@ -6184,6 +6325,115 @@ html[dir=rtl] .amplify-field-group__inner-start {
6184
6325
  gap: var(--amplify-space-small);
6185
6326
  }
6186
6327
 
6328
+ .amplify-ai-conversation {
6329
+ display: flex;
6330
+ flex-direction: column;
6331
+ height: 100%;
6332
+ }
6333
+ .amplify-ai-conversation__message {
6334
+ --content-bg: transparent;
6335
+ display: flex;
6336
+ flex-direction: var(--flex-direction);
6337
+ gap: var(--amplify-space-small);
6338
+ padding: var(--amplify-space-small);
6339
+ }
6340
+ .amplify-ai-conversation__message__list {
6341
+ display: flex;
6342
+ flex-direction: column;
6343
+ }
6344
+ .amplify-ai-conversation__message__avatar {
6345
+ flex-shrink: 0;
6346
+ }
6347
+ .amplify-ai-conversation__message__sender {
6348
+ display: flex;
6349
+ flex-direction: var(--flex-direction);
6350
+ align-items: center;
6351
+ height: var(--amplify-components-avatar-height);
6352
+ gap: var(--amplify-space-small);
6353
+ }
6354
+ .amplify-ai-conversation__message__sender__username {
6355
+ font-weight: bold;
6356
+ }
6357
+ .amplify-ai-conversation__message__sender__timestamp {
6358
+ color: var(--amplify-colors-font-tertiary);
6359
+ font-size: var(--amplify-font-sizes-small);
6360
+ }
6361
+ .amplify-ai-conversation__message__body {
6362
+ display: flex;
6363
+ flex-direction: column;
6364
+ align-items: var(--body-align-items);
6365
+ gap: var(--amplify-space-xs);
6366
+ }
6367
+ .amplify-ai-conversation__message__content {
6368
+ background-color: var(--content-bg);
6369
+ border-radius: var(--amplify-radii-medium);
6370
+ padding: var(--content-padding);
6371
+ }
6372
+ .amplify-ai-conversation__message__actions {
6373
+ display: flex;
6374
+ flex-direction: row;
6375
+ }
6376
+ .amplify-ai-conversation__message--bubble {
6377
+ --content-bg: var(--bg-color);
6378
+ --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
6379
+ --flex-direction: row-reverse;
6380
+ --body-align-items: flex-end;
6381
+ }
6382
+ .amplify-ai-conversation__message--user {
6383
+ --bg-color: var(--amplify-colors-background-secondary);
6384
+ }
6385
+ .amplify-ai-conversation__message--assistant {
6386
+ --bg-color: var(--amplify-colors-primary-10);
6387
+ --flex-direction: row;
6388
+ --body-align-items: flex-start;
6389
+ }
6390
+ .amplify-ai-conversation__form {
6391
+ display: flex;
6392
+ flex-direction: row;
6393
+ align-items: flex-start;
6394
+ gap: var(--amplify-space-small);
6395
+ }
6396
+ .amplify-ai-conversation__form__dropzone {
6397
+ text-align: initial;
6398
+ border: none;
6399
+ padding: var(--amplify-space-xs);
6400
+ }
6401
+ .amplify-ai-conversation__attachment {
6402
+ display: flex;
6403
+ flex-direction: row;
6404
+ padding-block: var(--amplify-space-xxxs);
6405
+ padding-inline: var(--amplify-space-xs);
6406
+ border-width: var(--amplify-border-widths-small);
6407
+ border-style: solid;
6408
+ border-color: var(--amplify-colors-border-secondary);
6409
+ border-radius: var(--amplify-radii-small);
6410
+ align-items: center;
6411
+ gap: var(--amplify-space-xs);
6412
+ font-size: var(--amplify-font-sizes-small);
6413
+ }
6414
+ .amplify-ai-conversation__attachment__list {
6415
+ display: flex;
6416
+ flex-direction: row;
6417
+ flex-wrap: wrap;
6418
+ gap: var(--amplify-space-small);
6419
+ padding-block-start: var(--amplify-space-small);
6420
+ }
6421
+ .amplify-ai-conversation__attachment__image {
6422
+ width: 1rem;
6423
+ height: 1rem;
6424
+ -o-object-fit: cover;
6425
+ object-fit: cover;
6426
+ }
6427
+ .amplify-ai-conversation__attachment__size {
6428
+ color: var(--amplify-colors-font-tertiary);
6429
+ }
6430
+ .amplify-ai-conversation__attachment__remove {
6431
+ padding: var(--amplify-space-xxs);
6432
+ }
6433
+ .amplify-ai-conversation__prompt {
6434
+ font-weight: normal;
6435
+ }
6436
+
6187
6437
  .amplify-label-start {
6188
6438
  flex-direction: row;
6189
6439
  }