@aws-amplify/ui 6.6.2 → 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 (29) hide show
  1. package/dist/esm/index.mjs +4 -2
  2. package/dist/esm/theme/createTheme/constants.mjs +8 -0
  3. package/dist/esm/theme/createTheme/resolveObject.mjs +133 -0
  4. package/dist/esm/theme/createTheme/utils.mjs +2 -30
  5. package/dist/esm/theme/tokens/components/aiConversation.mjs +65 -0
  6. package/dist/esm/theme/tokens/components/index.mjs +2 -0
  7. package/dist/esm/utils/references.mjs +70 -0
  8. package/dist/esm/utils/utils.mjs +18 -1
  9. package/dist/index.js +288 -29
  10. package/dist/styles/AIConversation.css +59 -38
  11. package/dist/styles/AIConversation.layer.css +59 -38
  12. package/dist/styles/base.css +35 -0
  13. package/dist/styles/base.layer.css +35 -0
  14. package/dist/styles.css +94 -38
  15. package/dist/styles.layer.css +94 -38
  16. package/dist/theme.css +35 -0
  17. package/dist/types/theme/components/aiConverstion.d.ts +22 -0
  18. package/dist/types/theme/components/index.d.ts +3 -1
  19. package/dist/types/theme/createTheme/constants.d.ts +9 -0
  20. package/dist/types/theme/createTheme/index.d.ts +2 -1
  21. package/dist/types/theme/createTheme/resolveObject.d.ts +24 -0
  22. package/dist/types/theme/createTheme/utils.d.ts +1 -7
  23. package/dist/types/theme/index.d.ts +1 -1
  24. package/dist/types/theme/tokens/components/aiConversation.d.ts +21 -0
  25. package/dist/types/theme/tokens/components/index.d.ts +2 -0
  26. package/dist/types/utils/index.d.ts +1 -0
  27. package/dist/types/utils/references.d.ts +15 -0
  28. package/dist/types/utils/utils.d.ts +1 -0
  29. package/package.json +1 -1
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;