@aws-amplify/ui 6.6.3 → 6.6.4

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 (15) hide show
  1. package/dist/esm/theme/tokens/components/aiConversation.mjs +65 -0
  2. package/dist/esm/theme/tokens/components/index.mjs +2 -0
  3. package/dist/index.js +65 -0
  4. package/dist/styles/AIConversation.css +59 -38
  5. package/dist/styles/AIConversation.layer.css +59 -38
  6. package/dist/styles/base.css +35 -0
  7. package/dist/styles/base.layer.css +35 -0
  8. package/dist/styles.css +94 -38
  9. package/dist/styles.layer.css +94 -38
  10. package/dist/theme.css +35 -0
  11. package/dist/types/theme/components/aiConverstion.d.ts +22 -0
  12. package/dist/types/theme/components/index.d.ts +3 -1
  13. package/dist/types/theme/tokens/components/aiConversation.d.ts +21 -0
  14. package/dist/types/theme/tokens/components/index.d.ts +2 -0
  15. package/package.json +1 -1
package/dist/esm/theme/tokens/components/aiConversation.mjs ADDED
@@ -0,0 +1,65 @@
1
+ const aiConversation = {
2
+ message: {
3
+ backgroundColor: { value: '{colors.background.secondary.value}' },
4
+ borderRadius: { value: '{radii.large.value}' },
5
+ gap: { value: '{space.small.value}' },
6
+ paddingBlock: { value: '{space.small.value}' },
7
+ paddingInline: { value: '{space.small.value}' },
8
+ user: {
9
+ backgroundColor: { value: '{colors.background.secondary.value}' },
10
+ },
11
+ assistant: {
12
+ backgroundColor: { value: '{colors.primary.10.value}' },
13
+ },
14
+ sender: {
15
+ gap: { value: '{space.small.value}' },
16
+ username: {
17
+ color: { value: '{colors.font.primary.value}' },
18
+ fontSize: { value: 'inherit' },
19
+ fontWeight: { value: '{fontWeights.bold.value}' },
20
+ },
21
+ timestamp: {
22
+ color: { value: '{colors.font.tertiary.value}' },
23
+ fontSize: { value: 'inherit' },
24
+ fontWeight: { value: 'inherit' },
25
+ },
26
+ },
27
+ body: { gap: { value: '{space.xs.value}' } },
28
+ },
29
+ form: {
30
+ gap: { value: '{space.small.value}' },
31
+ padding: { value: '{space.small.value}' },
32
+ },
33
+ attachment: {
34
+ borderColor: { value: '{colors.border.secondary.value}' },
35
+ borderWidth: { value: '{borderWidths.small.value}' },
36
+ borderRadius: { value: '{radii.small.value}' },
37
+ fontSize: { value: '{fontSizes.small.value}' },
38
+ paddingBlock: { value: '{space.xxxs.value}' },
39
+ paddingInline: { value: '{space.xs.value}' },
40
+ gap: { value: '{space.xs.value}' },
41
+ list: {
42
+ paddingBlockStart: { value: '{space.xs.value}' },
43
+ gap: { value: '{space.xxs.value}' },
44
+ },
45
+ name: {
46
+ color: { value: '{colors.font.primary.value}' },
47
+ fontSize: { value: '{fontSizes.small.value}' },
48
+ fontWeight: { value: '{fontWeights.normal.value}' },
49
+ },
50
+ size: {
51
+ color: { value: '{colors.font.tertiary.value}' },
52
+ fontSize: { value: '{fontSizes.small.value}' },
53
+ fontWeight: { value: '{fontWeights.normal.value}' },
54
+ },
55
+ remove: {
56
+ padding: { value: '{space.xxs.value}' },
57
+ },
58
+ image: {
59
+ width: { value: '{fontSizes.medium.value}' },
60
+ height: { value: '{fontSizes.medium.value}' },
61
+ },
62
+ },
63
+ };
64
+
65
+ export { aiConversation };
package/dist/esm/theme/tokens/components/index.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import { alert } from './alert.mjs';
2
+ import { aiConversation } from './aiConversation.mjs';
2
3
  import { autocomplete } from './autocomplete.mjs';
3
4
  import { authenticator } from './authenticator.mjs';
4
5
  import { avatar } from './avatar.mjs';
@@ -56,6 +57,7 @@ import { togglebuttongroup } from './toggleButtonGroup.mjs';
56
57
 
57
58
  const components = {
58
59
  accordion,
60
+ aiConversation,
59
61
  alert,
60
62
  authenticator,
61
63
  autocomplete,
package/dist/index.js CHANGED
@@ -5621,6 +5621,70 @@ const alert = {
5621
5621
  },
5622
5622
  };
5623
5623
 
5624
+ const aiConversation = {
5625
+ message: {
5626
+ backgroundColor: { value: '{colors.background.secondary.value}' },
5627
+ borderRadius: { value: '{radii.large.value}' },
5628
+ gap: { value: '{space.small.value}' },
5629
+ paddingBlock: { value: '{space.small.value}' },
5630
+ paddingInline: { value: '{space.small.value}' },
5631
+ user: {
5632
+ backgroundColor: { value: '{colors.background.secondary.value}' },
5633
+ },
5634
+ assistant: {
5635
+ backgroundColor: { value: '{colors.primary.10.value}' },
5636
+ },
5637
+ sender: {
5638
+ gap: { value: '{space.small.value}' },
5639
+ username: {
5640
+ color: { value: '{colors.font.primary.value}' },
5641
+ fontSize: { value: 'inherit' },
5642
+ fontWeight: { value: '{fontWeights.bold.value}' },
5643
+ },
5644
+ timestamp: {
5645
+ color: { value: '{colors.font.tertiary.value}' },
5646
+ fontSize: { value: 'inherit' },
5647
+ fontWeight: { value: 'inherit' },
5648
+ },
5649
+ },
5650
+ body: { gap: { value: '{space.xs.value}' } },
5651
+ },
5652
+ form: {
5653
+ gap: { value: '{space.small.value}' },
5654
+ padding: { value: '{space.small.value}' },
5655
+ },
5656
+ attachment: {
5657
+ borderColor: { value: '{colors.border.secondary.value}' },
5658
+ borderWidth: { value: '{borderWidths.small.value}' },
5659
+ borderRadius: { value: '{radii.small.value}' },
5660
+ fontSize: { value: '{fontSizes.small.value}' },
5661
+ paddingBlock: { value: '{space.xxxs.value}' },
5662
+ paddingInline: { value: '{space.xs.value}' },
5663
+ gap: { value: '{space.xs.value}' },
5664
+ list: {
5665
+ paddingBlockStart: { value: '{space.xs.value}' },
5666
+ gap: { value: '{space.xxs.value}' },
5667
+ },
5668
+ name: {
5669
+ color: { value: '{colors.font.primary.value}' },
5670
+ fontSize: { value: '{fontSizes.small.value}' },
5671
+ fontWeight: { value: '{fontWeights.normal.value}' },
5672
+ },
5673
+ size: {
5674
+ color: { value: '{colors.font.tertiary.value}' },
5675
+ fontSize: { value: '{fontSizes.small.value}' },
5676
+ fontWeight: { value: '{fontWeights.normal.value}' },
5677
+ },
5678
+ remove: {
5679
+ padding: { value: '{space.xxs.value}' },
5680
+ },
5681
+ image: {
5682
+ width: { value: '{fontSizes.medium.value}' },
5683
+ height: { value: '{fontSizes.medium.value}' },
5684
+ },
5685
+ },
5686
+ };
5687
+
5624
5688
  const autocomplete = {
5625
5689
  menu: {
5626
5690
  width: { value: '100%' },
@@ -8261,6 +8325,7 @@ const togglebuttongroup = {
8261
8325
 
8262
8326
  const components = {
8263
8327
  accordion,
8328
+ aiConversation,
8264
8329
  alert,
8265
8330
  authenticator,
8266
8331
  autocomplete,
package/dist/styles/AIConversation.css CHANGED
@@ -2,13 +2,18 @@
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  height: 100%;
5
+ flex: 1;
5
6
  }
6
7
  .amplify-ai-conversation__message {
7
- --content-bg: transparent;
8
+ --internal-content-bg: ;
9
+ --internal-flex-direction: ;
10
+ --internal-content-padding: ;
11
+ --internal-body-align-items: ;
8
12
  display: flex;
9
- flex-direction: var(--flex-direction);
10
- gap: var(--amplify-space-small);
11
- padding: var(--amplify-space-small);
13
+ flex-direction: var(--internal-flex-direction);
14
+ gap: var(--amplify-components-ai-conversation-message-gap);
15
+ padding-inline: var(--amplify-components-ai-conversation-message-padding-inline);
16
+ padding-block: var(--amplify-components-ai-conversation-message-padding-block);
12
17
  }
13
18
  .amplify-ai-conversation__message__list {
14
19
  display: flex;
@@ -19,89 +24,105 @@
19
24
  }
20
25
  .amplify-ai-conversation__message__sender {
21
26
  display: flex;
22
- flex-direction: var(--flex-direction);
27
+ flex-direction: var(--internal-flex-direction);
23
28
  align-items: center;
24
- height: var(--amplify-components-avatar-height);
25
- gap: var(--amplify-space-small);
29
+ min-height: var(--amplify-components-avatar-height);
30
+ gap: var(--amplify-components-ai-conversation-message-sender-gap);
26
31
  }
27
32
  .amplify-ai-conversation__message__sender__username {
28
- font-weight: bold;
33
+ color: var(--amplify-components-ai-conversation-message-sender-username-color);
34
+ font-size: var(--amplify-components-ai-conversation-message-sender-username-font-size);
35
+ font-weight: var(--amplify-components-ai-conversation-message-sender-username-font-weight);
29
36
  }
30
37
  .amplify-ai-conversation__message__sender__timestamp {
31
- color: var(--amplify-colors-font-tertiary);
32
- font-size: var(--amplify-font-sizes-small);
38
+ color: var(--amplify-components-ai-conversation-message-sender-timestamp-color);
39
+ font-size: var(--amplify-components-ai-conversation-message-sender-timestamp-font-size);
40
+ font-weight: var(--amplify-components-ai-conversation-message-sender-timestamp-font-weight);
33
41
  }
34
42
  .amplify-ai-conversation__message__body {
35
43
  display: flex;
36
44
  flex-direction: column;
37
- align-items: var(--body-align-items);
38
- gap: var(--amplify-space-xs);
45
+ align-items: var(--internal-body-align-items);
46
+ gap: var(--amplify-components-ai-conversation-message-body-gap);
39
47
  }
40
48
  .amplify-ai-conversation__message__content {
41
- background-color: var(--content-bg);
49
+ background-color: var(--internal-content-bg);
42
50
  border-radius: var(--amplify-radii-medium);
43
- padding: var(--content-padding);
51
+ padding: var(--internal-content-padding);
44
52
  }
45
53
  .amplify-ai-conversation__message__actions {
46
54
  display: flex;
47
55
  flex-direction: row;
48
56
  }
49
57
  .amplify-ai-conversation__message--bubble {
50
- --content-bg: var(--bg-color);
51
- --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
52
- --flex-direction: row-reverse;
53
- --body-align-items: flex-end;
58
+ --internal-content-bg: var(--internal-bg-color);
59
+ --internal-content-padding: var(--amplify-space-xxs)
60
+ var(--amplify-space-xs);
61
+ --internal-flex-direction: row-reverse;
62
+ --internal-body-align-items: flex-end;
54
63
  }
55
64
  .amplify-ai-conversation__message--user {
56
- --bg-color: var(--amplify-colors-background-secondary);
65
+ --internal-bg-color: var(
66
+ --amplify-components-ai-conversation-message-user-background-color
67
+ );
57
68
  }
58
69
  .amplify-ai-conversation__message--assistant {
59
- --bg-color: var(--amplify-colors-primary-10);
60
- --flex-direction: row;
61
- --body-align-items: flex-start;
70
+ --internal-bg-color: var(
71
+ --amplify-components-ai-conversation-message-assistant-background-color
72
+ );
73
+ --internal-flex-direction: row;
74
+ --internal-body-align-items: flex-start;
62
75
  }
63
76
  .amplify-ai-conversation__form {
64
77
  display: flex;
65
78
  flex-direction: row;
66
79
  align-items: flex-start;
67
- gap: var(--amplify-space-small);
80
+ gap: var(--amplify-components-ai-conversation-form-gap);
81
+ padding: var(--amplify-components-ai-conversation-form-padding);
68
82
  }
69
83
  .amplify-ai-conversation__form__dropzone {
70
84
  text-align: initial;
71
85
  border: none;
72
- padding: var(--amplify-space-xs);
86
+ padding: 0;
73
87
  }
74
88
  .amplify-ai-conversation__attachment {
75
89
  display: flex;
76
90
  flex-direction: row;
77
- padding-block: var(--amplify-space-xxxs);
78
- padding-inline: var(--amplify-space-xs);
79
- border-width: var(--amplify-border-widths-small);
80
- border-style: solid;
81
- border-color: var(--amplify-colors-border-secondary);
82
- border-radius: var(--amplify-radii-small);
83
91
  align-items: center;
84
- gap: var(--amplify-space-xs);
85
- font-size: var(--amplify-font-sizes-small);
92
+ padding-block: var(--amplify-components-ai-conversation-attachment-padding-block);
93
+ padding-inline: var(--amplify-components-ai-conversation-attachment-padding-inline);
94
+ border-width: var(--amplify-components-ai-conversation-attachment-border-width);
95
+ border-style: solid;
96
+ border-color: var(--amplify-components-ai-conversation-attachment-border-color);
97
+ border-radius: var(--amplify-components-ai-conversation-attachment-border-radius);
98
+ gap: var(--amplify-components-ai-conversation-attachment-gap);
99
+ font-size: var(--amplify-components-ai-conversation-attachment-font-size);
86
100
  }
87
101
  .amplify-ai-conversation__attachment__list {
88
102
  display: flex;
89
103
  flex-direction: row;
90
104
  flex-wrap: wrap;
91
- gap: var(--amplify-space-small);
92
- padding-block-start: var(--amplify-space-small);
105
+ gap: var(--amplify-components-ai-conversation-attachment-list-gap);
106
+ padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
93
107
  }
94
108
  .amplify-ai-conversation__attachment__image {
95
- width: 1rem;
96
- height: 1rem;
109
+ width: var(--amplify-components-ai-conversation-attachment-image-width);
110
+ height: var(--amplify-components-ai-conversation-attachment-image-height);
97
111
  -o-object-fit: cover;
98
112
  object-fit: cover;
99
113
  }
114
+ .amplify-ai-conversation__attachment__name {
115
+ color: var(--amplify-components-ai-conversation-attachment-name-color);
116
+ font-size: var(--amplify-components-ai-conversation-attachment-name-font-size);
117
+ font-weight: var(--amplify-components-ai-conversation-attachment-name-font-weight);
118
+ }
100
119
  .amplify-ai-conversation__attachment__size {
101
- color: var(--amplify-colors-font-tertiary);
120
+ color: var(--amplify-components-ai-conversation-attachment-size-color);
121
+ font-size: var(--amplify-components-ai-conversation-attachment-size-font-size);
122
+ font-weight: var(--amplify-components-ai-conversation-attachment-size-font-weight);
102
123
  }
103
124
  .amplify-ai-conversation__attachment__remove {
104
- padding: var(--amplify-space-xxs);
125
+ padding: var(--amplify-components-ai-conversation-attachment-remove-padding);
105
126
  }
106
127
  .amplify-ai-conversation__prompt {
107
128
  font-weight: normal;
package/dist/styles/AIConversation.layer.css CHANGED
@@ -3,13 +3,18 @@
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  height: 100%;
6
+ flex: 1;
6
7
  }
7
8
  .amplify-ai-conversation__message {
8
- --content-bg: transparent;
9
+ --internal-content-bg: ;
10
+ --internal-flex-direction: ;
11
+ --internal-content-padding: ;
12
+ --internal-body-align-items: ;
9
13
  display: flex;
10
- flex-direction: var(--flex-direction);
11
- gap: var(--amplify-space-small);
12
- padding: var(--amplify-space-small);
14
+ flex-direction: var(--internal-flex-direction);
15
+ gap: var(--amplify-components-ai-conversation-message-gap);
16
+ padding-inline: var(--amplify-components-ai-conversation-message-padding-inline);
17
+ padding-block: var(--amplify-components-ai-conversation-message-padding-block);
13
18
  }
14
19
  .amplify-ai-conversation__message__list {
15
20
  display: flex;
@@ -20,89 +25,105 @@
20
25
  }
21
26
  .amplify-ai-conversation__message__sender {
22
27
  display: flex;
23
- flex-direction: var(--flex-direction);
28
+ flex-direction: var(--internal-flex-direction);
24
29
  align-items: center;
25
- height: var(--amplify-components-avatar-height);
26
- gap: var(--amplify-space-small);
30
+ min-height: var(--amplify-components-avatar-height);
31
+ gap: var(--amplify-components-ai-conversation-message-sender-gap);
27
32
  }
28
33
  .amplify-ai-conversation__message__sender__username {
29
- font-weight: bold;
34
+ color: var(--amplify-components-ai-conversation-message-sender-username-color);
35
+ font-size: var(--amplify-components-ai-conversation-message-sender-username-font-size);
36
+ font-weight: var(--amplify-components-ai-conversation-message-sender-username-font-weight);
30
37
  }
31
38
  .amplify-ai-conversation__message__sender__timestamp {
32
- color: var(--amplify-colors-font-tertiary);
33
- font-size: var(--amplify-font-sizes-small);
39
+ color: var(--amplify-components-ai-conversation-message-sender-timestamp-color);
40
+ font-size: var(--amplify-components-ai-conversation-message-sender-timestamp-font-size);
41
+ font-weight: var(--amplify-components-ai-conversation-message-sender-timestamp-font-weight);
34
42
  }
35
43
  .amplify-ai-conversation__message__body {
36
44
  display: flex;
37
45
  flex-direction: column;
38
- align-items: var(--body-align-items);
39
- gap: var(--amplify-space-xs);
46
+ align-items: var(--internal-body-align-items);
47
+ gap: var(--amplify-components-ai-conversation-message-body-gap);
40
48
  }
41
49
  .amplify-ai-conversation__message__content {
42
- background-color: var(--content-bg);
50
+ background-color: var(--internal-content-bg);
43
51
  border-radius: var(--amplify-radii-medium);
44
- padding: var(--content-padding);
52
+ padding: var(--internal-content-padding);
45
53
  }
46
54
  .amplify-ai-conversation__message__actions {
47
55
  display: flex;
48
56
  flex-direction: row;
49
57
  }
50
58
  .amplify-ai-conversation__message--bubble {
51
- --content-bg: var(--bg-color);
52
- --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
53
- --flex-direction: row-reverse;
54
- --body-align-items: flex-end;
59
+ --internal-content-bg: var(--internal-bg-color);
60
+ --internal-content-padding: var(--amplify-space-xxs)
61
+ var(--amplify-space-xs);
62
+ --internal-flex-direction: row-reverse;
63
+ --internal-body-align-items: flex-end;
55
64
  }
56
65
  .amplify-ai-conversation__message--user {
57
- --bg-color: var(--amplify-colors-background-secondary);
66
+ --internal-bg-color: var(
67
+ --amplify-components-ai-conversation-message-user-background-color
68
+ );
58
69
  }
59
70
  .amplify-ai-conversation__message--assistant {
60
- --bg-color: var(--amplify-colors-primary-10);
61
- --flex-direction: row;
62
- --body-align-items: flex-start;
71
+ --internal-bg-color: var(
72
+ --amplify-components-ai-conversation-message-assistant-background-color
73
+ );
74
+ --internal-flex-direction: row;
75
+ --internal-body-align-items: flex-start;
63
76
  }
64
77
  .amplify-ai-conversation__form {
65
78
  display: flex;
66
79
  flex-direction: row;
67
80
  align-items: flex-start;
68
- gap: var(--amplify-space-small);
81
+ gap: var(--amplify-components-ai-conversation-form-gap);
82
+ padding: var(--amplify-components-ai-conversation-form-padding);
69
83
  }
70
84
  .amplify-ai-conversation__form__dropzone {
71
85
  text-align: initial;
72
86
  border: none;
73
- padding: var(--amplify-space-xs);
87
+ padding: 0;
74
88
  }
75
89
  .amplify-ai-conversation__attachment {
76
90
  display: flex;
77
91
  flex-direction: row;
78
- padding-block: var(--amplify-space-xxxs);
79
- padding-inline: var(--amplify-space-xs);
80
- border-width: var(--amplify-border-widths-small);
81
- border-style: solid;
82
- border-color: var(--amplify-colors-border-secondary);
83
- border-radius: var(--amplify-radii-small);
84
92
  align-items: center;
85
- gap: var(--amplify-space-xs);
86
- font-size: var(--amplify-font-sizes-small);
93
+ padding-block: var(--amplify-components-ai-conversation-attachment-padding-block);
94
+ padding-inline: var(--amplify-components-ai-conversation-attachment-padding-inline);
95
+ border-width: var(--amplify-components-ai-conversation-attachment-border-width);
96
+ border-style: solid;
97
+ border-color: var(--amplify-components-ai-conversation-attachment-border-color);
98
+ border-radius: var(--amplify-components-ai-conversation-attachment-border-radius);
99
+ gap: var(--amplify-components-ai-conversation-attachment-gap);
100
+ font-size: var(--amplify-components-ai-conversation-attachment-font-size);
87
101
  }
88
102
  .amplify-ai-conversation__attachment__list {
89
103
  display: flex;
90
104
  flex-direction: row;
91
105
  flex-wrap: wrap;
92
- gap: var(--amplify-space-small);
93
- padding-block-start: var(--amplify-space-small);
106
+ gap: var(--amplify-components-ai-conversation-attachment-list-gap);
107
+ padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
94
108
  }
95
109
  .amplify-ai-conversation__attachment__image {
96
- width: 1rem;
97
- height: 1rem;
110
+ width: var(--amplify-components-ai-conversation-attachment-image-width);
111
+ height: var(--amplify-components-ai-conversation-attachment-image-height);
98
112
  -o-object-fit: cover;
99
113
  object-fit: cover;
100
114
  }
115
+ .amplify-ai-conversation__attachment__name {
116
+ color: var(--amplify-components-ai-conversation-attachment-name-color);
117
+ font-size: var(--amplify-components-ai-conversation-attachment-name-font-size);
118
+ font-weight: var(--amplify-components-ai-conversation-attachment-name-font-weight);
119
+ }
101
120
  .amplify-ai-conversation__attachment__size {
102
- color: var(--amplify-colors-font-tertiary);
121
+ color: var(--amplify-components-ai-conversation-attachment-size-color);
122
+ font-size: var(--amplify-components-ai-conversation-attachment-size-font-size);
123
+ font-weight: var(--amplify-components-ai-conversation-attachment-size-font-weight);
103
124
  }
104
125
  .amplify-ai-conversation__attachment__remove {
105
- padding: var(--amplify-space-xxs);
126
+ padding: var(--amplify-components-ai-conversation-attachment-remove-padding);
106
127
  }
107
128
  .amplify-ai-conversation__prompt {
108
129
  font-weight: normal;
package/dist/styles/base.css CHANGED
@@ -25,6 +25,41 @@
25
25
  --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary);
26
26
  --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium);
27
27
  --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
28
+ --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary);
29
+ --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large);
30
+ --amplify-components-ai-conversation-message-gap: var(--amplify-space-small);
31
+ --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small);
32
+ --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small);
33
+ --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary);
34
+ --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10);
35
+ --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small);
36
+ --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary);
37
+ --amplify-components-ai-conversation-message-sender-username-font-size: inherit;
38
+ --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold);
39
+ --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary);
40
+ --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
41
+ --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
42
+ --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
43
+ --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
44
+ --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
45
+ --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
46
+ --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small);
47
+ --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small);
48
+ --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small);
49
+ --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
50
+ --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
51
+ --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
52
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs);
53
+ --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
54
+ --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
55
+ --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
56
+ --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal);
57
+ --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary);
58
+ --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small);
59
+ --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal);
60
+ --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs);
61
+ --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium);
62
+ --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium);
28
63
  --amplify-components-alert-align-items: center;
29
64
  --amplify-components-alert-justify-content: space-between;
30
65
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
package/dist/styles/base.layer.css CHANGED
@@ -26,6 +26,41 @@
26
26
  --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary);
27
27
  --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium);
28
28
  --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
29
+ --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary);
30
+ --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large);
31
+ --amplify-components-ai-conversation-message-gap: var(--amplify-space-small);
32
+ --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small);
33
+ --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small);
34
+ --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary);
35
+ --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10);
36
+ --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small);
37
+ --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary);
38
+ --amplify-components-ai-conversation-message-sender-username-font-size: inherit;
39
+ --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold);
40
+ --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary);
41
+ --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
42
+ --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
43
+ --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
44
+ --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
45
+ --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
46
+ --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
47
+ --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small);
48
+ --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small);
49
+ --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small);
50
+ --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
51
+ --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
52
+ --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
53
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs);
54
+ --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
55
+ --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
56
+ --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
57
+ --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal);
58
+ --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary);
59
+ --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small);
60
+ --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal);
61
+ --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs);
62
+ --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium);
63
+ --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium);
29
64
  --amplify-components-alert-align-items: center;
30
65
  --amplify-components-alert-justify-content: space-between;
31
66
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
package/dist/styles.css CHANGED
@@ -25,6 +25,41 @@
25
25
  --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary);
26
26
  --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium);
27
27
  --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
28
+ --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary);
29
+ --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large);
30
+ --amplify-components-ai-conversation-message-gap: var(--amplify-space-small);
31
+ --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small);
32
+ --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small);
33
+ --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary);
34
+ --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10);
35
+ --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small);
36
+ --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary);
37
+ --amplify-components-ai-conversation-message-sender-username-font-size: inherit;
38
+ --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold);
39
+ --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary);
40
+ --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
41
+ --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
42
+ --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
43
+ --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
44
+ --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
45
+ --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
46
+ --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small);
47
+ --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small);
48
+ --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small);
49
+ --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
50
+ --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
51
+ --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
52
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs);
53
+ --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
54
+ --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
55
+ --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
56
+ --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal);
57
+ --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary);
58
+ --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small);
59
+ --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal);
60
+ --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs);
61
+ --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium);
62
+ --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium);
28
63
  --amplify-components-alert-align-items: center;
29
64
  --amplify-components-alert-justify-content: space-between;
30
65
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
@@ -6568,13 +6603,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
6568
6603
  display: flex;
6569
6604
  flex-direction: column;
6570
6605
  height: 100%;
6606
+ flex: 1;
6571
6607
  }
6572
6608
  .amplify-ai-conversation__message {
6573
- --content-bg: transparent;
6609
+ --internal-content-bg: ;
6610
+ --internal-flex-direction: ;
6611
+ --internal-content-padding: ;
6612
+ --internal-body-align-items: ;
6574
6613
  display: flex;
6575
- flex-direction: var(--flex-direction);
6576
- gap: var(--amplify-space-small);
6577
- padding: var(--amplify-space-small);
6614
+ flex-direction: var(--internal-flex-direction);
6615
+ gap: var(--amplify-components-ai-conversation-message-gap);
6616
+ padding-inline: var(--amplify-components-ai-conversation-message-padding-inline);
6617
+ padding-block: var(--amplify-components-ai-conversation-message-padding-block);
6578
6618
  }
6579
6619
  .amplify-ai-conversation__message__list {
6580
6620
  display: flex;
@@ -6585,89 +6625,105 @@ html[dir=rtl] .amplify-field-group__inner-start {
6585
6625
  }
6586
6626
  .amplify-ai-conversation__message__sender {
6587
6627
  display: flex;
6588
- flex-direction: var(--flex-direction);
6628
+ flex-direction: var(--internal-flex-direction);
6589
6629
  align-items: center;
6590
- height: var(--amplify-components-avatar-height);
6591
- gap: var(--amplify-space-small);
6630
+ min-height: var(--amplify-components-avatar-height);
6631
+ gap: var(--amplify-components-ai-conversation-message-sender-gap);
6592
6632
  }
6593
6633
  .amplify-ai-conversation__message__sender__username {
6594
- font-weight: bold;
6634
+ color: var(--amplify-components-ai-conversation-message-sender-username-color);
6635
+ font-size: var(--amplify-components-ai-conversation-message-sender-username-font-size);
6636
+ font-weight: var(--amplify-components-ai-conversation-message-sender-username-font-weight);
6595
6637
  }
6596
6638
  .amplify-ai-conversation__message__sender__timestamp {
6597
- color: var(--amplify-colors-font-tertiary);
6598
- font-size: var(--amplify-font-sizes-small);
6639
+ color: var(--amplify-components-ai-conversation-message-sender-timestamp-color);
6640
+ font-size: var(--amplify-components-ai-conversation-message-sender-timestamp-font-size);
6641
+ font-weight: var(--amplify-components-ai-conversation-message-sender-timestamp-font-weight);
6599
6642
  }
6600
6643
  .amplify-ai-conversation__message__body {
6601
6644
  display: flex;
6602
6645
  flex-direction: column;
6603
- align-items: var(--body-align-items);
6604
- gap: var(--amplify-space-xs);
6646
+ align-items: var(--internal-body-align-items);
6647
+ gap: var(--amplify-components-ai-conversation-message-body-gap);
6605
6648
  }
6606
6649
  .amplify-ai-conversation__message__content {
6607
- background-color: var(--content-bg);
6650
+ background-color: var(--internal-content-bg);
6608
6651
  border-radius: var(--amplify-radii-medium);
6609
- padding: var(--content-padding);
6652
+ padding: var(--internal-content-padding);
6610
6653
  }
6611
6654
  .amplify-ai-conversation__message__actions {
6612
6655
  display: flex;
6613
6656
  flex-direction: row;
6614
6657
  }
6615
6658
  .amplify-ai-conversation__message--bubble {
6616
- --content-bg: var(--bg-color);
6617
- --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
6618
- --flex-direction: row-reverse;
6619
- --body-align-items: flex-end;
6659
+ --internal-content-bg: var(--internal-bg-color);
6660
+ --internal-content-padding: var(--amplify-space-xxs)
6661
+ var(--amplify-space-xs);
6662
+ --internal-flex-direction: row-reverse;
6663
+ --internal-body-align-items: flex-end;
6620
6664
  }
6621
6665
  .amplify-ai-conversation__message--user {
6622
- --bg-color: var(--amplify-colors-background-secondary);
6666
+ --internal-bg-color: var(
6667
+ --amplify-components-ai-conversation-message-user-background-color
6668
+ );
6623
6669
  }
6624
6670
  .amplify-ai-conversation__message--assistant {
6625
- --bg-color: var(--amplify-colors-primary-10);
6626
- --flex-direction: row;
6627
- --body-align-items: flex-start;
6671
+ --internal-bg-color: var(
6672
+ --amplify-components-ai-conversation-message-assistant-background-color
6673
+ );
6674
+ --internal-flex-direction: row;
6675
+ --internal-body-align-items: flex-start;
6628
6676
  }
6629
6677
  .amplify-ai-conversation__form {
6630
6678
  display: flex;
6631
6679
  flex-direction: row;
6632
6680
  align-items: flex-start;
6633
- gap: var(--amplify-space-small);
6681
+ gap: var(--amplify-components-ai-conversation-form-gap);
6682
+ padding: var(--amplify-components-ai-conversation-form-padding);
6634
6683
  }
6635
6684
  .amplify-ai-conversation__form__dropzone {
6636
6685
  text-align: initial;
6637
6686
  border: none;
6638
- padding: var(--amplify-space-xs);
6687
+ padding: 0;
6639
6688
  }
6640
6689
  .amplify-ai-conversation__attachment {
6641
6690
  display: flex;
6642
6691
  flex-direction: row;
6643
- padding-block: var(--amplify-space-xxxs);
6644
- padding-inline: var(--amplify-space-xs);
6645
- border-width: var(--amplify-border-widths-small);
6646
- border-style: solid;
6647
- border-color: var(--amplify-colors-border-secondary);
6648
- border-radius: var(--amplify-radii-small);
6649
6692
  align-items: center;
6650
- gap: var(--amplify-space-xs);
6651
- font-size: var(--amplify-font-sizes-small);
6693
+ padding-block: var(--amplify-components-ai-conversation-attachment-padding-block);
6694
+ padding-inline: var(--amplify-components-ai-conversation-attachment-padding-inline);
6695
+ border-width: var(--amplify-components-ai-conversation-attachment-border-width);
6696
+ border-style: solid;
6697
+ border-color: var(--amplify-components-ai-conversation-attachment-border-color);
6698
+ border-radius: var(--amplify-components-ai-conversation-attachment-border-radius);
6699
+ gap: var(--amplify-components-ai-conversation-attachment-gap);
6700
+ font-size: var(--amplify-components-ai-conversation-attachment-font-size);
6652
6701
  }
6653
6702
  .amplify-ai-conversation__attachment__list {
6654
6703
  display: flex;
6655
6704
  flex-direction: row;
6656
6705
  flex-wrap: wrap;
6657
- gap: var(--amplify-space-small);
6658
- padding-block-start: var(--amplify-space-small);
6706
+ gap: var(--amplify-components-ai-conversation-attachment-list-gap);
6707
+ padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
6659
6708
  }
6660
6709
  .amplify-ai-conversation__attachment__image {
6661
- width: 1rem;
6662
- height: 1rem;
6710
+ width: var(--amplify-components-ai-conversation-attachment-image-width);
6711
+ height: var(--amplify-components-ai-conversation-attachment-image-height);
6663
6712
  -o-object-fit: cover;
6664
6713
  object-fit: cover;
6665
6714
  }
6715
+ .amplify-ai-conversation__attachment__name {
6716
+ color: var(--amplify-components-ai-conversation-attachment-name-color);
6717
+ font-size: var(--amplify-components-ai-conversation-attachment-name-font-size);
6718
+ font-weight: var(--amplify-components-ai-conversation-attachment-name-font-weight);
6719
+ }
6666
6720
  .amplify-ai-conversation__attachment__size {
6667
- color: var(--amplify-colors-font-tertiary);
6721
+ color: var(--amplify-components-ai-conversation-attachment-size-color);
6722
+ font-size: var(--amplify-components-ai-conversation-attachment-size-font-size);
6723
+ font-weight: var(--amplify-components-ai-conversation-attachment-size-font-weight);
6668
6724
  }
6669
6725
  .amplify-ai-conversation__attachment__remove {
6670
- padding: var(--amplify-space-xxs);
6726
+ padding: var(--amplify-components-ai-conversation-attachment-remove-padding);
6671
6727
  }
6672
6728
  .amplify-ai-conversation__prompt {
6673
6729
  font-weight: normal;
package/dist/styles.layer.css CHANGED
@@ -26,6 +26,41 @@
26
26
  --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary);
27
27
  --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium);
28
28
  --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
29
+ --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary);
30
+ --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large);
31
+ --amplify-components-ai-conversation-message-gap: var(--amplify-space-small);
32
+ --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small);
33
+ --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small);
34
+ --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary);
35
+ --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10);
36
+ --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small);
37
+ --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary);
38
+ --amplify-components-ai-conversation-message-sender-username-font-size: inherit;
39
+ --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold);
40
+ --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary);
41
+ --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
42
+ --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
43
+ --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
44
+ --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
45
+ --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
46
+ --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
47
+ --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small);
48
+ --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small);
49
+ --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small);
50
+ --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
51
+ --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
52
+ --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
53
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs);
54
+ --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
55
+ --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
56
+ --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
57
+ --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal);
58
+ --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary);
59
+ --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small);
60
+ --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal);
61
+ --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs);
62
+ --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium);
63
+ --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium);
29
64
  --amplify-components-alert-align-items: center;
30
65
  --amplify-components-alert-justify-content: space-between;
31
66
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
@@ -6569,13 +6604,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
6569
6604
  display: flex;
6570
6605
  flex-direction: column;
6571
6606
  height: 100%;
6607
+ flex: 1;
6572
6608
  }
6573
6609
  .amplify-ai-conversation__message {
6574
- --content-bg: transparent;
6610
+ --internal-content-bg: ;
6611
+ --internal-flex-direction: ;
6612
+ --internal-content-padding: ;
6613
+ --internal-body-align-items: ;
6575
6614
  display: flex;
6576
- flex-direction: var(--flex-direction);
6577
- gap: var(--amplify-space-small);
6578
- padding: var(--amplify-space-small);
6615
+ flex-direction: var(--internal-flex-direction);
6616
+ gap: var(--amplify-components-ai-conversation-message-gap);
6617
+ padding-inline: var(--amplify-components-ai-conversation-message-padding-inline);
6618
+ padding-block: var(--amplify-components-ai-conversation-message-padding-block);
6579
6619
  }
6580
6620
  .amplify-ai-conversation__message__list {
6581
6621
  display: flex;
@@ -6586,89 +6626,105 @@ html[dir=rtl] .amplify-field-group__inner-start {
6586
6626
  }
6587
6627
  .amplify-ai-conversation__message__sender {
6588
6628
  display: flex;
6589
- flex-direction: var(--flex-direction);
6629
+ flex-direction: var(--internal-flex-direction);
6590
6630
  align-items: center;
6591
- height: var(--amplify-components-avatar-height);
6592
- gap: var(--amplify-space-small);
6631
+ min-height: var(--amplify-components-avatar-height);
6632
+ gap: var(--amplify-components-ai-conversation-message-sender-gap);
6593
6633
  }
6594
6634
  .amplify-ai-conversation__message__sender__username {
6595
- font-weight: bold;
6635
+ color: var(--amplify-components-ai-conversation-message-sender-username-color);
6636
+ font-size: var(--amplify-components-ai-conversation-message-sender-username-font-size);
6637
+ font-weight: var(--amplify-components-ai-conversation-message-sender-username-font-weight);
6596
6638
  }
6597
6639
  .amplify-ai-conversation__message__sender__timestamp {
6598
- color: var(--amplify-colors-font-tertiary);
6599
- font-size: var(--amplify-font-sizes-small);
6640
+ color: var(--amplify-components-ai-conversation-message-sender-timestamp-color);
6641
+ font-size: var(--amplify-components-ai-conversation-message-sender-timestamp-font-size);
6642
+ font-weight: var(--amplify-components-ai-conversation-message-sender-timestamp-font-weight);
6600
6643
  }
6601
6644
  .amplify-ai-conversation__message__body {
6602
6645
  display: flex;
6603
6646
  flex-direction: column;
6604
- align-items: var(--body-align-items);
6605
- gap: var(--amplify-space-xs);
6647
+ align-items: var(--internal-body-align-items);
6648
+ gap: var(--amplify-components-ai-conversation-message-body-gap);
6606
6649
  }
6607
6650
  .amplify-ai-conversation__message__content {
6608
- background-color: var(--content-bg);
6651
+ background-color: var(--internal-content-bg);
6609
6652
  border-radius: var(--amplify-radii-medium);
6610
- padding: var(--content-padding);
6653
+ padding: var(--internal-content-padding);
6611
6654
  }
6612
6655
  .amplify-ai-conversation__message__actions {
6613
6656
  display: flex;
6614
6657
  flex-direction: row;
6615
6658
  }
6616
6659
  .amplify-ai-conversation__message--bubble {
6617
- --content-bg: var(--bg-color);
6618
- --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
6619
- --flex-direction: row-reverse;
6620
- --body-align-items: flex-end;
6660
+ --internal-content-bg: var(--internal-bg-color);
6661
+ --internal-content-padding: var(--amplify-space-xxs)
6662
+ var(--amplify-space-xs);
6663
+ --internal-flex-direction: row-reverse;
6664
+ --internal-body-align-items: flex-end;
6621
6665
  }
6622
6666
  .amplify-ai-conversation__message--user {
6623
- --bg-color: var(--amplify-colors-background-secondary);
6667
+ --internal-bg-color: var(
6668
+ --amplify-components-ai-conversation-message-user-background-color
6669
+ );
6624
6670
  }
6625
6671
  .amplify-ai-conversation__message--assistant {
6626
- --bg-color: var(--amplify-colors-primary-10);
6627
- --flex-direction: row;
6628
- --body-align-items: flex-start;
6672
+ --internal-bg-color: var(
6673
+ --amplify-components-ai-conversation-message-assistant-background-color
6674
+ );
6675
+ --internal-flex-direction: row;
6676
+ --internal-body-align-items: flex-start;
6629
6677
  }
6630
6678
  .amplify-ai-conversation__form {
6631
6679
  display: flex;
6632
6680
  flex-direction: row;
6633
6681
  align-items: flex-start;
6634
- gap: var(--amplify-space-small);
6682
+ gap: var(--amplify-components-ai-conversation-form-gap);
6683
+ padding: var(--amplify-components-ai-conversation-form-padding);
6635
6684
  }
6636
6685
  .amplify-ai-conversation__form__dropzone {
6637
6686
  text-align: initial;
6638
6687
  border: none;
6639
- padding: var(--amplify-space-xs);
6688
+ padding: 0;
6640
6689
  }
6641
6690
  .amplify-ai-conversation__attachment {
6642
6691
  display: flex;
6643
6692
  flex-direction: row;
6644
- padding-block: var(--amplify-space-xxxs);
6645
- padding-inline: var(--amplify-space-xs);
6646
- border-width: var(--amplify-border-widths-small);
6647
- border-style: solid;
6648
- border-color: var(--amplify-colors-border-secondary);
6649
- border-radius: var(--amplify-radii-small);
6650
6693
  align-items: center;
6651
- gap: var(--amplify-space-xs);
6652
- font-size: var(--amplify-font-sizes-small);
6694
+ padding-block: var(--amplify-components-ai-conversation-attachment-padding-block);
6695
+ padding-inline: var(--amplify-components-ai-conversation-attachment-padding-inline);
6696
+ border-width: var(--amplify-components-ai-conversation-attachment-border-width);
6697
+ border-style: solid;
6698
+ border-color: var(--amplify-components-ai-conversation-attachment-border-color);
6699
+ border-radius: var(--amplify-components-ai-conversation-attachment-border-radius);
6700
+ gap: var(--amplify-components-ai-conversation-attachment-gap);
6701
+ font-size: var(--amplify-components-ai-conversation-attachment-font-size);
6653
6702
  }
6654
6703
  .amplify-ai-conversation__attachment__list {
6655
6704
  display: flex;
6656
6705
  flex-direction: row;
6657
6706
  flex-wrap: wrap;
6658
- gap: var(--amplify-space-small);
6659
- padding-block-start: var(--amplify-space-small);
6707
+ gap: var(--amplify-components-ai-conversation-attachment-list-gap);
6708
+ padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
6660
6709
  }
6661
6710
  .amplify-ai-conversation__attachment__image {
6662
- width: 1rem;
6663
- height: 1rem;
6711
+ width: var(--amplify-components-ai-conversation-attachment-image-width);
6712
+ height: var(--amplify-components-ai-conversation-attachment-image-height);
6664
6713
  -o-object-fit: cover;
6665
6714
  object-fit: cover;
6666
6715
  }
6716
+ .amplify-ai-conversation__attachment__name {
6717
+ color: var(--amplify-components-ai-conversation-attachment-name-color);
6718
+ font-size: var(--amplify-components-ai-conversation-attachment-name-font-size);
6719
+ font-weight: var(--amplify-components-ai-conversation-attachment-name-font-weight);
6720
+ }
6667
6721
  .amplify-ai-conversation__attachment__size {
6668
- color: var(--amplify-colors-font-tertiary);
6722
+ color: var(--amplify-components-ai-conversation-attachment-size-color);
6723
+ font-size: var(--amplify-components-ai-conversation-attachment-size-font-size);
6724
+ font-weight: var(--amplify-components-ai-conversation-attachment-size-font-weight);
6669
6725
  }
6670
6726
  .amplify-ai-conversation__attachment__remove {
6671
- padding: var(--amplify-space-xxs);
6727
+ padding: var(--amplify-components-ai-conversation-attachment-remove-padding);
6672
6728
  }
6673
6729
  .amplify-ai-conversation__prompt {
6674
6730
  font-weight: normal;
package/dist/theme.css CHANGED
@@ -22,6 +22,41 @@
22
22
  --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary);
23
23
  --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium);
24
24
  --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
25
+ --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary);
26
+ --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large);
27
+ --amplify-components-ai-conversation-message-gap: var(--amplify-space-small);
28
+ --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small);
29
+ --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small);
30
+ --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary);
31
+ --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10);
32
+ --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small);
33
+ --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary);
34
+ --amplify-components-ai-conversation-message-sender-username-font-size: inherit;
35
+ --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold);
36
+ --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary);
37
+ --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
38
+ --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
39
+ --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
40
+ --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
41
+ --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
42
+ --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
43
+ --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small);
44
+ --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small);
45
+ --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small);
46
+ --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
47
+ --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
48
+ --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
49
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs);
50
+ --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
51
+ --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
52
+ --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
53
+ --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal);
54
+ --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary);
55
+ --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small);
56
+ --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal);
57
+ --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs);
58
+ --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium);
59
+ --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium);
25
60
  --amplify-components-alert-align-items: center;
26
61
  --amplify-components-alert-justify-content: space-between;
27
62
  --amplify-components-alert-color: var(--amplify-colors-font-primary);
package/dist/types/theme/components/aiConverstion.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { Modifiers, ComponentStyles, Elements } from './utils';
2
+ export type AIConversationTheme<Required extends boolean = false> = ComponentStyles & Elements<{
3
+ message?: ComponentStyles & Modifiers<'user' | 'assistant' | 'bubble', Required>;
4
+ message__list?: ComponentStyles;
5
+ message__avatar?: ComponentStyles;
6
+ message__sender?: ComponentStyles;
7
+ message__sender__username?: ComponentStyles;
8
+ message__sender__timestamp?: ComponentStyles;
9
+ message__body?: ComponentStyles;
10
+ message__actions?: ComponentStyles;
11
+ form?: ComponentStyles;
12
+ form__dropzone?: ComponentStyles;
13
+ form__attatch?: ComponentStyles;
14
+ form__send?: ComponentStyles;
15
+ form_field?: ComponentStyles;
16
+ attachment?: ComponentStyles;
17
+ attachment__list?: ComponentStyles;
18
+ attachment__image?: ComponentStyles;
19
+ attachment__size?: ComponentStyles;
20
+ attachment__name?: ComponentStyles;
21
+ attachment__remove?: ComponentStyles;
22
+ }, Required>;
package/dist/types/theme/components/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { WebTokens } from '../tokens';
2
+ import { AIConversationTheme } from './aiConverstion';
2
3
  import { AccordionTheme } from './accordion';
3
4
  import { AlertTheme } from './alert';
4
5
  import { AutoCompleteTheme } from './autocomplete';
@@ -45,9 +46,10 @@ import { ToggleButtonTheme, ToggleButtonGroupTheme } from './toggleButton';
45
46
  import { ComponentTheme, BaseComponentTheme, BaseTheme } from './utils';
46
47
  export { ClassNameFunction } from '../createTheme/createComponentClasses';
47
48
  export type { ComponentTheme, BaseComponentTheme, BaseTheme };
48
- export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<AvatarTheme, 'avatar', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<FileUploaderTheme, 'fileuploader', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
49
+ export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AIConversationTheme, 'ai-conversation', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<AvatarTheme, 'avatar', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<FileUploaderTheme, 'fileuploader', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
49
50
  export type AllComponentThemes = {
50
51
  accordion: AccordionTheme;
52
+ 'ai-conversation': AIConversationTheme;
51
53
  alert: AlertTheme;
52
54
  autocomplete: AutoCompleteTheme;
53
55
  avatar: AvatarTheme;
package/dist/types/theme/tokens/components/aiConversation.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
2
+ export interface AIConversationTokens<OutputType extends OutputVariantKey> {
3
+ message?: DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'paddingBlock' | 'paddingInline' | 'gap', OutputType> & {
4
+ sender?: DesignTokenProperties<'gap', OutputType> & {
5
+ username?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight', OutputType>;
6
+ timestamp?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight', OutputType>;
7
+ };
8
+ body?: DesignTokenProperties<'gap', OutputType>;
9
+ user?: DesignTokenProperties<'backgroundColor', OutputType>;
10
+ assistant?: DesignTokenProperties<'backgroundColor', OutputType>;
11
+ };
12
+ form?: DesignTokenProperties<'gap' | 'padding', OutputType>;
13
+ attachment?: DesignTokenProperties<'borderColor' | 'borderWidth' | 'borderRadius' | 'fontSize' | 'paddingBlock' | 'paddingInline' | 'gap', OutputType> & {
14
+ list?: DesignTokenProperties<'paddingBlockStart' | 'gap', OutputType>;
15
+ image?: DesignTokenProperties<'width' | 'height', OutputType>;
16
+ size?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight', OutputType>;
17
+ name?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight', OutputType>;
18
+ remove?: DesignTokenProperties<'padding', OutputType>;
19
+ };
20
+ }
21
+ export declare const aiConversation: Required<AIConversationTokens<'default'>>;
package/dist/types/theme/tokens/components/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { AlertTokens } from './alert';
2
+ import { AIConversationTokens } from './aiConversation';
2
3
  import { AutocompleteTokens } from './autocomplete';
3
4
  import { AuthenticatorTokens } from './authenticator';
4
5
  import { AvatarTokens } from './avatar';
@@ -56,6 +57,7 @@ import { ToggleButtonGroupTokens } from './toggleButtonGroup';
56
57
  import { OutputVariantKey } from '../types/designToken';
57
58
  type BaseComponentTokens<Output extends OutputVariantKey> = {
58
59
  accordion?: AccordionTokens<Output>;
60
+ aiConversation?: AIConversationTokens<Output>;
59
61
  alert?: AlertTokens<Output>;
60
62
  authenticator?: AuthenticatorTokens<Output>;
61
63
  autocomplete?: AutocompleteTokens<Output>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.6.3",
3
+ "version": "6.6.4",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {