@aws-amplify/ui 6.6.5 → 6.6.6

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 (13) hide show
  1. package/dist/esm/theme/createTheme/defineComponentTheme.mjs +0 -1
  2. package/dist/esm/theme/tokens/components/aiConversation.mjs +1 -0
  3. package/dist/index.js +1 -1
  4. package/dist/styles/AIConversation.css +11 -0
  5. package/dist/styles/AIConversation.layer.css +11 -0
  6. package/dist/styles/base.css +1 -0
  7. package/dist/styles/base.layer.css +1 -0
  8. package/dist/styles.css +12 -0
  9. package/dist/styles.layer.css +12 -0
  10. package/dist/theme.css +1 -0
  11. package/dist/types/theme/createTheme/defineComponentTheme.d.ts +0 -1
  12. package/dist/types/theme/tokens/components/aiConversation.d.ts +1 -0
  13. package/package.json +1 -1
package/dist/esm/theme/createTheme/defineComponentTheme.mjs CHANGED
@@ -6,7 +6,6 @@ import { createComponentClasses } from './createComponentClasses.mjs';
6
6
  * to both completely customize built-in components and
7
7
  * build your own components!
8
8
  *
9
- * @experimental
10
9
  *
11
10
  * ```ts
12
11
  * // built-in component styling
package/dist/esm/theme/tokens/components/aiConversation.mjs CHANGED
@@ -25,6 +25,7 @@ const aiConversation = {
25
25
  },
26
26
  },
27
27
  body: { gap: { value: '{space.xs.value}' } },
28
+ actions: { gap: { value: '{space.xs.value}' } },
28
29
  },
29
30
  form: {
30
31
  gap: { value: '{space.small.value}' },
package/dist/index.js CHANGED
@@ -5667,6 +5667,7 @@ const aiConversation = {
5667
5667
  },
5668
5668
  },
5669
5669
  body: { gap: { value: '{space.xs.value}' } },
5670
+ actions: { gap: { value: '{space.xs.value}' } },
5670
5671
  },
5671
5672
  form: {
5672
5673
  gap: { value: '{space.small.value}' },
@@ -9142,7 +9143,6 @@ function modifierClassnames({ className, modifiers, }) {
9142
9143
  * to both completely customize built-in components and
9143
9144
  * build your own components!
9144
9145
  *
9145
- * @experimental
9146
9146
  *
9147
9147
  * ```ts
9148
9148
  * // built-in component styling
package/dist/styles/AIConversation.css CHANGED
@@ -41,6 +41,7 @@
41
41
  }
42
42
  .amplify-ai-conversation__message__body {
43
43
  display: flex;
44
+ flex: 1;
44
45
  flex-direction: column;
45
46
  align-items: var(--internal-body-align-items);
46
47
  gap: var(--amplify-components-ai-conversation-message-body-gap);
@@ -49,10 +50,20 @@
49
50
  background-color: var(--internal-content-bg);
50
51
  border-radius: var(--amplify-radii-medium);
51
52
  padding: var(--internal-content-padding);
53
+ display: flex;
54
+ flex-direction: column;
55
+ gap: var(--amplify-space-small);
56
+ }
57
+ .amplify-ai-conversation__message__text {
58
+ display: block;
59
+ }
60
+ .amplify-ai-conversation__message__image {
61
+ max-width: 25%;
52
62
  }
53
63
  .amplify-ai-conversation__message__actions {
54
64
  display: flex;
55
65
  flex-direction: row;
66
+ gap: var(--amplify-components-ai-conversation-message-actions-gap);
56
67
  }
57
68
  .amplify-ai-conversation__message--bubble {
58
69
  --internal-content-bg: var(--internal-bg-color);
package/dist/styles/AIConversation.layer.css CHANGED
@@ -42,6 +42,7 @@
42
42
  }
43
43
  .amplify-ai-conversation__message__body {
44
44
  display: flex;
45
+ flex: 1;
45
46
  flex-direction: column;
46
47
  align-items: var(--internal-body-align-items);
47
48
  gap: var(--amplify-components-ai-conversation-message-body-gap);
@@ -50,10 +51,20 @@
50
51
  background-color: var(--internal-content-bg);
51
52
  border-radius: var(--amplify-radii-medium);
52
53
  padding: var(--internal-content-padding);
54
+ display: flex;
55
+ flex-direction: column;
56
+ gap: var(--amplify-space-small);
57
+ }
58
+ .amplify-ai-conversation__message__text {
59
+ display: block;
60
+ }
61
+ .amplify-ai-conversation__message__image {
62
+ max-width: 25%;
53
63
  }
54
64
  .amplify-ai-conversation__message__actions {
55
65
  display: flex;
56
66
  flex-direction: row;
67
+ gap: var(--amplify-components-ai-conversation-message-actions-gap);
57
68
  }
58
69
  .amplify-ai-conversation__message--bubble {
59
70
  --internal-content-bg: var(--internal-bg-color);
package/dist/styles/base.css CHANGED
@@ -40,6 +40,7 @@
40
40
  --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
41
41
  --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
42
42
  --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
43
+ --amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs);
43
44
  --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
44
45
  --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
45
46
  --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
package/dist/styles/base.layer.css CHANGED
@@ -41,6 +41,7 @@
41
41
  --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
42
42
  --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
43
43
  --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
44
+ --amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs);
44
45
  --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
45
46
  --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
46
47
  --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
package/dist/styles.css CHANGED
@@ -40,6 +40,7 @@
40
40
  --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
41
41
  --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
42
42
  --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
43
+ --amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs);
43
44
  --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
44
45
  --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
45
46
  --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
@@ -6642,6 +6643,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
6642
6643
  }
6643
6644
  .amplify-ai-conversation__message__body {
6644
6645
  display: flex;
6646
+ flex: 1;
6645
6647
  flex-direction: column;
6646
6648
  align-items: var(--internal-body-align-items);
6647
6649
  gap: var(--amplify-components-ai-conversation-message-body-gap);
@@ -6650,10 +6652,20 @@ html[dir=rtl] .amplify-field-group__inner-start {
6650
6652
  background-color: var(--internal-content-bg);
6651
6653
  border-radius: var(--amplify-radii-medium);
6652
6654
  padding: var(--internal-content-padding);
6655
+ display: flex;
6656
+ flex-direction: column;
6657
+ gap: var(--amplify-space-small);
6658
+ }
6659
+ .amplify-ai-conversation__message__text {
6660
+ display: block;
6661
+ }
6662
+ .amplify-ai-conversation__message__image {
6663
+ max-width: 25%;
6653
6664
  }
6654
6665
  .amplify-ai-conversation__message__actions {
6655
6666
  display: flex;
6656
6667
  flex-direction: row;
6668
+ gap: var(--amplify-components-ai-conversation-message-actions-gap);
6657
6669
  }
6658
6670
  .amplify-ai-conversation__message--bubble {
6659
6671
  --internal-content-bg: var(--internal-bg-color);
package/dist/styles.layer.css CHANGED
@@ -41,6 +41,7 @@
41
41
  --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
42
42
  --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
43
43
  --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
44
+ --amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs);
44
45
  --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
45
46
  --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
46
47
  --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
@@ -6643,6 +6644,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
6643
6644
  }
6644
6645
  .amplify-ai-conversation__message__body {
6645
6646
  display: flex;
6647
+ flex: 1;
6646
6648
  flex-direction: column;
6647
6649
  align-items: var(--internal-body-align-items);
6648
6650
  gap: var(--amplify-components-ai-conversation-message-body-gap);
@@ -6651,10 +6653,20 @@ html[dir=rtl] .amplify-field-group__inner-start {
6651
6653
  background-color: var(--internal-content-bg);
6652
6654
  border-radius: var(--amplify-radii-medium);
6653
6655
  padding: var(--internal-content-padding);
6656
+ display: flex;
6657
+ flex-direction: column;
6658
+ gap: var(--amplify-space-small);
6659
+ }
6660
+ .amplify-ai-conversation__message__text {
6661
+ display: block;
6662
+ }
6663
+ .amplify-ai-conversation__message__image {
6664
+ max-width: 25%;
6654
6665
  }
6655
6666
  .amplify-ai-conversation__message__actions {
6656
6667
  display: flex;
6657
6668
  flex-direction: row;
6669
+ gap: var(--amplify-components-ai-conversation-message-actions-gap);
6658
6670
  }
6659
6671
  .amplify-ai-conversation__message--bubble {
6660
6672
  --internal-content-bg: var(--internal-bg-color);
package/dist/theme.css CHANGED
@@ -37,6 +37,7 @@
37
37
  --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit;
38
38
  --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit;
39
39
  --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs);
40
+ --amplify-components-ai-conversation-message-actions-gap: var(--amplify-space-xs);
40
41
  --amplify-components-ai-conversation-form-gap: var(--amplify-space-small);
41
42
  --amplify-components-ai-conversation-form-padding: var(--amplify-space-small);
42
43
  --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary);
package/dist/types/theme/createTheme/defineComponentTheme.d.ts CHANGED
@@ -13,7 +13,6 @@ type CreateComponentThemeProps<TokensType extends WebTokens = WebTokens, ThemeTy
13
13
  * to both completely customize built-in components and
14
14
  * build your own components!
15
15
  *
16
- * @experimental
17
16
  *
18
17
  * ```ts
19
18
  * // built-in component styling
package/dist/types/theme/tokens/components/aiConversation.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface AIConversationTokens<OutputType extends OutputVariantKey> {
5
5
  username?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight', OutputType>;
6
6
  timestamp?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight', OutputType>;
7
7
  };
8
+ actions?: DesignTokenProperties<'gap', OutputType>;
8
9
  body?: DesignTokenProperties<'gap', OutputType>;
9
10
  user?: DesignTokenProperties<'backgroundColor', OutputType>;
10
11
  assistant?: DesignTokenProperties<'backgroundColor', OutputType>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.6.5",
3
+ "version": "6.6.6",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {