@aws-amplify/ui 6.9.0 → 6.9.1

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 (17) hide show
  1. package/dist/esm/theme/tokens/components/aiConversation.mjs +2 -1
  2. package/dist/esm/types/primitives/componentClassName.mjs +1 -0
  3. package/dist/index.js +3 -1
  4. package/dist/styles/AIConversation.css +10 -1
  5. package/dist/styles/AIConversation.layer.css +10 -1
  6. package/dist/styles/base.css +2 -1
  7. package/dist/styles/base.layer.css +2 -1
  8. package/dist/styles/textArea.css +1 -0
  9. package/dist/styles/textArea.layer.css +1 -0
  10. package/dist/styles/textAreaField.css +1 -0
  11. package/dist/styles/textAreaField.layer.css +1 -0
  12. package/dist/styles.css +14 -2
  13. package/dist/styles.layer.css +14 -2
  14. package/dist/theme.css +2 -1
  15. package/dist/types/theme/tokens/components/aiConversation.d.ts +1 -1
  16. package/dist/types/types/primitives/componentClassName.d.ts +1 -0
  17. package/package.json +1 -1
package/dist/esm/theme/tokens/components/aiConversation.mjs CHANGED
@@ -40,7 +40,8 @@ const aiConversation = {
40
40
  paddingInline: { value: '{space.xs.value}' },
41
41
  gap: { value: '{space.xs.value}' },
42
42
  list: {
43
- paddingBlockStart: { value: '{space.xs.value}' },
43
+ padding: { value: '{space.xs.value}' },
44
+ paddingBlockStart: { value: '0' },
44
45
  gap: { value: '{space.xxs.value}' },
45
46
  },
46
47
  name: {
package/dist/esm/types/primitives/componentClassName.mjs CHANGED
@@ -22,6 +22,7 @@ const ComponentClassName = {
22
22
  AvatarImage: 'amplify-avatar__image',
23
23
  AvatarLoader: 'amplify-avatar__loader',
24
24
  AIConversation: 'amplify-ai-conversation',
25
+ AIConversationScrollView: 'amplify-ai-conversation__scrollview',
25
26
  AIConversationAttachment: 'amplify-ai-conversation__attachment',
26
27
  AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
27
28
  AIConversationAttachmentImage: 'amplify-ai-conversation__attachment__image',
package/dist/index.js CHANGED
@@ -3031,6 +3031,7 @@ const ComponentClassName = {
3031
3031
  AvatarImage: 'amplify-avatar__image',
3032
3032
  AvatarLoader: 'amplify-avatar__loader',
3033
3033
  AIConversation: 'amplify-ai-conversation',
3034
+ AIConversationScrollView: 'amplify-ai-conversation__scrollview',
3034
3035
  AIConversationAttachment: 'amplify-ai-conversation__attachment',
3035
3036
  AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
3036
3037
  AIConversationAttachmentImage: 'amplify-ai-conversation__attachment__image',
@@ -5714,7 +5715,8 @@ const aiConversation = {
5714
5715
  paddingInline: { value: '{space.xs.value}' },
5715
5716
  gap: { value: '{space.xs.value}' },
5716
5717
  list: {
5717
- paddingBlockStart: { value: '{space.xs.value}' },
5718
+ padding: { value: '{space.xs.value}' },
5719
+ paddingBlockStart: { value: '0' },
5718
5720
  gap: { value: '{space.xxs.value}' },
5719
5721
  },
5720
5722
  name: {
package/dist/styles/AIConversation.css CHANGED
@@ -84,16 +84,24 @@
84
84
  --internal-flex-direction: row;
85
85
  --internal-body-align-items: flex-start;
86
86
  }
87
+ .amplify-ai-conversation__scrollview {
88
+ flex: 1 0 50%;
89
+ }
87
90
  .amplify-ai-conversation__form {
88
91
  display: flex;
89
92
  flex-direction: row;
90
93
  align-items: flex-start;
94
+ padding: var(--amplify-components-ai-conversation-form-padding);
91
95
  gap: var(--amplify-components-ai-conversation-form-gap);
96
+ max-height: 100%;
97
+ overflow: hidden;
92
98
  }
93
99
  .amplify-ai-conversation__form__dropzone {
94
100
  text-align: initial;
95
101
  border: none;
96
- padding: var(--amplify-components-ai-conversation-form-padding);
102
+ padding: 0;
103
+ display: grid;
104
+ overflow: hidden;
97
105
  }
98
106
  .amplify-ai-conversation__form__error {
99
107
  padding: 0;
@@ -118,6 +126,7 @@
118
126
  flex-direction: row;
119
127
  flex-wrap: wrap;
120
128
  gap: var(--amplify-components-ai-conversation-attachment-list-gap);
129
+ padding: var(--amplify-components-ai-conversation-attachment-list-padding);
121
130
  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
122
131
  }
123
132
  .amplify-ai-conversation__attachment__image {
package/dist/styles/AIConversation.layer.css CHANGED
@@ -85,16 +85,24 @@
85
85
  --internal-flex-direction: row;
86
86
  --internal-body-align-items: flex-start;
87
87
  }
88
+ .amplify-ai-conversation__scrollview {
89
+ flex: 1 0 50%;
90
+ }
88
91
  .amplify-ai-conversation__form {
89
92
  display: flex;
90
93
  flex-direction: row;
91
94
  align-items: flex-start;
95
+ padding: var(--amplify-components-ai-conversation-form-padding);
92
96
  gap: var(--amplify-components-ai-conversation-form-gap);
97
+ max-height: 100%;
98
+ overflow: hidden;
93
99
  }
94
100
  .amplify-ai-conversation__form__dropzone {
95
101
  text-align: initial;
96
102
  border: none;
97
- padding: var(--amplify-components-ai-conversation-form-padding);
103
+ padding: 0;
104
+ display: grid;
105
+ overflow: hidden;
98
106
  }
99
107
  .amplify-ai-conversation__form__error {
100
108
  padding: 0;
@@ -119,6 +127,7 @@
119
127
  flex-direction: row;
120
128
  flex-wrap: wrap;
121
129
  gap: var(--amplify-components-ai-conversation-attachment-list-gap);
130
+ padding: var(--amplify-components-ai-conversation-attachment-list-padding);
122
131
  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
123
132
  }
124
133
  .amplify-ai-conversation__attachment__image {
package/dist/styles/base.css CHANGED
@@ -50,7 +50,8 @@
50
50
  --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
51
51
  --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
52
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);
53
+ --amplify-components-ai-conversation-attachment-list-padding: var(--amplify-space-xs);
54
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: 0;
54
55
  --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
55
56
  --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
56
57
  --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
package/dist/styles/base.layer.css CHANGED
@@ -51,7 +51,8 @@
51
51
  --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
52
52
  --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
53
53
  --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
54
- --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs);
54
+ --amplify-components-ai-conversation-attachment-list-padding: var(--amplify-space-xs);
55
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: 0;
55
56
  --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
56
57
  --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
57
58
  --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
package/dist/styles/textArea.css CHANGED
@@ -21,6 +21,7 @@
21
21
  -moz-user-select: text;
22
22
  user-select: text;
23
23
  white-space: pre-wrap;
24
+ max-height: 100%;
24
25
  }
25
26
  .amplify-textarea:focus {
26
27
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
package/dist/styles/textArea.layer.css CHANGED
@@ -22,6 +22,7 @@
22
22
  -moz-user-select: text;
23
23
  user-select: text;
24
24
  white-space: pre-wrap;
25
+ max-height: 100%;
25
26
  }
26
27
  .amplify-textarea:focus {
27
28
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
package/dist/styles/textAreaField.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .amplify-textareafield {
2
+ max-height: 100%;
2
3
  flex-direction: column;
3
4
  --amplify-components-fieldcontrol-color: var(
4
5
  --amplify-components-textareafield-color
package/dist/styles/textAreaField.layer.css CHANGED
@@ -1,5 +1,6 @@
1
1
  @layer amplify.components {
2
2
  .amplify-textareafield {
3
+ max-height: 100%;
3
4
  flex-direction: column;
4
5
  --amplify-components-fieldcontrol-color: var(
5
6
  --amplify-components-textareafield-color
package/dist/styles.css CHANGED
@@ -50,7 +50,8 @@
50
50
  --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
51
51
  --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
52
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);
53
+ --amplify-components-ai-conversation-attachment-list-padding: var(--amplify-space-xs);
54
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: 0;
54
55
  --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
55
56
  --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
56
57
  --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
@@ -3077,6 +3078,7 @@ strong.amplify-text {
3077
3078
  -moz-user-select: text;
3078
3079
  user-select: text;
3079
3080
  white-space: pre-wrap;
3081
+ max-height: 100%;
3080
3082
  }
3081
3083
  .amplify-textarea:focus {
3082
3084
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -5802,6 +5804,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5802
5804
  }
5803
5805
 
5804
5806
  .amplify-textareafield {
5807
+ max-height: 100%;
5805
5808
  flex-direction: column;
5806
5809
  --amplify-components-fieldcontrol-color: var(
5807
5810
  --amplify-components-textareafield-color
@@ -6837,16 +6840,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
6837
6840
  --internal-flex-direction: row;
6838
6841
  --internal-body-align-items: flex-start;
6839
6842
  }
6843
+ .amplify-ai-conversation__scrollview {
6844
+ flex: 1 0 50%;
6845
+ }
6840
6846
  .amplify-ai-conversation__form {
6841
6847
  display: flex;
6842
6848
  flex-direction: row;
6843
6849
  align-items: flex-start;
6850
+ padding: var(--amplify-components-ai-conversation-form-padding);
6844
6851
  gap: var(--amplify-components-ai-conversation-form-gap);
6852
+ max-height: 100%;
6853
+ overflow: hidden;
6845
6854
  }
6846
6855
  .amplify-ai-conversation__form__dropzone {
6847
6856
  text-align: initial;
6848
6857
  border: none;
6849
- padding: var(--amplify-components-ai-conversation-form-padding);
6858
+ padding: 0;
6859
+ display: grid;
6860
+ overflow: hidden;
6850
6861
  }
6851
6862
  .amplify-ai-conversation__form__error {
6852
6863
  padding: 0;
@@ -6871,6 +6882,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
6871
6882
  flex-direction: row;
6872
6883
  flex-wrap: wrap;
6873
6884
  gap: var(--amplify-components-ai-conversation-attachment-list-gap);
6885
+ padding: var(--amplify-components-ai-conversation-attachment-list-padding);
6874
6886
  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
6875
6887
  }
6876
6888
  .amplify-ai-conversation__attachment__image {
package/dist/styles.layer.css CHANGED
@@ -51,7 +51,8 @@
51
51
  --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
52
52
  --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
53
53
  --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
54
- --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs);
54
+ --amplify-components-ai-conversation-attachment-list-padding: var(--amplify-space-xs);
55
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: 0;
55
56
  --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
56
57
  --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
57
58
  --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
@@ -3078,6 +3079,7 @@ strong.amplify-text {
3078
3079
  -moz-user-select: text;
3079
3080
  user-select: text;
3080
3081
  white-space: pre-wrap;
3082
+ max-height: 100%;
3081
3083
  }
3082
3084
  .amplify-textarea:focus {
3083
3085
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -5803,6 +5805,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
5803
5805
  }
5804
5806
 
5805
5807
  .amplify-textareafield {
5808
+ max-height: 100%;
5806
5809
  flex-direction: column;
5807
5810
  --amplify-components-fieldcontrol-color: var(
5808
5811
  --amplify-components-textareafield-color
@@ -6838,16 +6841,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
6838
6841
  --internal-flex-direction: row;
6839
6842
  --internal-body-align-items: flex-start;
6840
6843
  }
6844
+ .amplify-ai-conversation__scrollview {
6845
+ flex: 1 0 50%;
6846
+ }
6841
6847
  .amplify-ai-conversation__form {
6842
6848
  display: flex;
6843
6849
  flex-direction: row;
6844
6850
  align-items: flex-start;
6851
+ padding: var(--amplify-components-ai-conversation-form-padding);
6845
6852
  gap: var(--amplify-components-ai-conversation-form-gap);
6853
+ max-height: 100%;
6854
+ overflow: hidden;
6846
6855
  }
6847
6856
  .amplify-ai-conversation__form__dropzone {
6848
6857
  text-align: initial;
6849
6858
  border: none;
6850
- padding: var(--amplify-components-ai-conversation-form-padding);
6859
+ padding: 0;
6860
+ display: grid;
6861
+ overflow: hidden;
6851
6862
  }
6852
6863
  .amplify-ai-conversation__form__error {
6853
6864
  padding: 0;
@@ -6872,6 +6883,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
6872
6883
  flex-direction: row;
6873
6884
  flex-wrap: wrap;
6874
6885
  gap: var(--amplify-components-ai-conversation-attachment-list-gap);
6886
+ padding: var(--amplify-components-ai-conversation-attachment-list-padding);
6875
6887
  padding-block-start: var(--amplify-components-ai-conversation-attachment-list-padding-block-start);
6876
6888
  }
6877
6889
  .amplify-ai-conversation__attachment__image {
package/dist/theme.css CHANGED
@@ -47,7 +47,8 @@
47
47
  --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs);
48
48
  --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs);
49
49
  --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs);
50
- --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs);
50
+ --amplify-components-ai-conversation-attachment-list-padding: var(--amplify-space-xs);
51
+ --amplify-components-ai-conversation-attachment-list-padding-block-start: 0;
51
52
  --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs);
52
53
  --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary);
53
54
  --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small);
package/dist/types/theme/tokens/components/aiConversation.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface AIConversationTokens<OutputType extends OutputVariantKey> {
12
12
  };
13
13
  form?: DesignTokenProperties<'gap' | 'padding', OutputType>;
14
14
  attachment?: DesignTokenProperties<'borderColor' | 'borderWidth' | 'borderRadius' | 'fontSize' | 'paddingBlock' | 'paddingInline' | 'gap', OutputType> & {
15
- list?: DesignTokenProperties<'paddingBlockStart' | 'gap', OutputType>;
15
+ list?: DesignTokenProperties<'paddingBlockStart' | 'padding' | 'gap', OutputType>;
16
16
  image?: DesignTokenProperties<'width' | 'height', OutputType>;
17
17
  size?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight', OutputType>;
18
18
  name?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight', OutputType>;
package/dist/types/types/primitives/componentClassName.d.ts CHANGED
@@ -22,6 +22,7 @@ export declare const ComponentClassName: {
22
22
  readonly AvatarImage: "amplify-avatar__image";
23
23
  readonly AvatarLoader: "amplify-avatar__loader";
24
24
  readonly AIConversation: "amplify-ai-conversation";
25
+ readonly AIConversationScrollView: "amplify-ai-conversation__scrollview";
25
26
  readonly AIConversationAttachment: "amplify-ai-conversation__attachment";
26
27
  readonly AIConversationAttachmentList: "amplify-ai-conversation__attachment__list";
27
28
  readonly AIConversationAttachmentImage: "amplify-ai-conversation__attachment__image";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.9.0",
3
+ "version": "6.9.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {