@aws-amplify/ui 6.3.0 → 6.4.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.
- package/dist/esm/theme/tokens/components/avatar.mjs +49 -0
- package/dist/esm/theme/tokens/components/fileuploader.mjs +97 -0
- package/dist/esm/theme/tokens/components/index.mjs +4 -0
- package/dist/esm/types/primitives/componentClassName.mjs +25 -0
- package/dist/index.js +171 -0
- package/dist/styles/AIConversation.css +108 -0
- package/dist/styles/AIConversation.layer.css +110 -0
- package/dist/styles/FileUploader.css +138 -0
- package/dist/styles/FileUploader.layer.css +140 -0
- package/dist/styles/avatar.css +111 -0
- package/dist/styles/avatar.layer.css +113 -0
- package/dist/styles/base.css +90 -0
- package/dist/styles/base.layer.css +90 -0
- package/dist/styles.css +450 -0
- package/dist/styles.layer.css +450 -0
- package/dist/theme.css +90 -0
- package/dist/types/theme/components/avatar.d.ts +5 -0
- package/dist/types/theme/components/index.d.ts +5 -1
- package/dist/types/theme/tokens/components/avatar.d.ts +14 -0
- package/dist/types/theme/tokens/components/fileuploader.d.ts +24 -0
- package/dist/types/theme/tokens/components/index.d.ts +4 -0
- package/dist/types/types/primitives/componentClassName.d.ts +25 -0
- package/package.json +1 -1
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
const avatar = {
|
|
2
|
+
// Default styles
|
|
3
|
+
color: { value: '{colors.font.tertiary.value}' },
|
|
4
|
+
lineHeight: { value: 1 },
|
|
5
|
+
fontWeight: { value: '{fontWeights.semibold.value}' },
|
|
6
|
+
fontSize: { value: '{fontSizes.small.value}' },
|
|
7
|
+
textAlign: { value: 'center' },
|
|
8
|
+
width: { value: '{fontSizes.xxl.value}' },
|
|
9
|
+
height: { value: '{fontSizes.xxl.value}' },
|
|
10
|
+
backgroundColor: { value: '{colors.background.tertiary}' },
|
|
11
|
+
borderRadius: { value: '100%' },
|
|
12
|
+
borderColor: { value: '{colors.border.primary.value}' },
|
|
13
|
+
borderWidth: { value: '{borderWidths.medium.value}' },
|
|
14
|
+
// Color Theme Variations
|
|
15
|
+
info: {
|
|
16
|
+
color: { value: '{colors.font.info.value}' },
|
|
17
|
+
backgroundColor: { value: '{colors.background.info.value}' },
|
|
18
|
+
borderColor: { value: '{colors.border.info.value}' },
|
|
19
|
+
},
|
|
20
|
+
warning: {
|
|
21
|
+
color: { value: '{colors.font.warning.value}' },
|
|
22
|
+
backgroundColor: { value: '{colors.background.warning.value}' },
|
|
23
|
+
borderColor: { value: '{colors.border.warning.value}' },
|
|
24
|
+
},
|
|
25
|
+
success: {
|
|
26
|
+
color: { value: '{colors.font.success.value}' },
|
|
27
|
+
backgroundColor: { value: '{colors.background.success.value}' },
|
|
28
|
+
borderColor: { value: '{colors.border.success.value}' },
|
|
29
|
+
},
|
|
30
|
+
error: {
|
|
31
|
+
color: { value: '{colors.font.error.value}' },
|
|
32
|
+
backgroundColor: { value: '{colors.background.error.value}' },
|
|
33
|
+
borderColor: { value: '{colors.border.error.value}' },
|
|
34
|
+
},
|
|
35
|
+
// Sizes
|
|
36
|
+
small: {
|
|
37
|
+
fontSize: { value: '{fontSizes.xs.value}' },
|
|
38
|
+
width: { value: '{fontSizes.xl.value}' },
|
|
39
|
+
height: { value: '{fontSizes.xl.value}' },
|
|
40
|
+
},
|
|
41
|
+
// medium is the default size
|
|
42
|
+
large: {
|
|
43
|
+
fontSize: { value: '{fontSizes.medium.value}' },
|
|
44
|
+
width: { value: '{fontSizes.xxxl.value}' },
|
|
45
|
+
height: { value: '{fontSizes.xxxl.value}' },
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { avatar };
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
const fileuploader = {
|
|
2
|
+
dropzone: {
|
|
3
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
4
|
+
borderRadius: { value: '{radii.small}' },
|
|
5
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
6
|
+
borderStyle: { value: 'dashed' },
|
|
7
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
8
|
+
gap: { value: '{space.small}' },
|
|
9
|
+
paddingBlock: { value: '{space.xl}' },
|
|
10
|
+
paddingInline: { value: '{space.large}' },
|
|
11
|
+
textAlign: { value: 'center' },
|
|
12
|
+
_active: {
|
|
13
|
+
backgroundColor: { value: '{colors.primary.10}' },
|
|
14
|
+
borderRadius: {
|
|
15
|
+
value: '{components.fileuploader.dropzone.borderRadius}',
|
|
16
|
+
},
|
|
17
|
+
borderColor: { value: '{colors.border.pressed}' },
|
|
18
|
+
borderStyle: {
|
|
19
|
+
value: '{components.fileuploader.dropzone.borderStyle}',
|
|
20
|
+
},
|
|
21
|
+
borderWidth: { value: '{borderWidths.medium}' },
|
|
22
|
+
},
|
|
23
|
+
icon: {
|
|
24
|
+
color: { value: '{colors.border.primary}' },
|
|
25
|
+
fontSize: { value: '{fontSizes.xxl}' },
|
|
26
|
+
},
|
|
27
|
+
text: {
|
|
28
|
+
color: { value: '{colors.font.tertiary}' },
|
|
29
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
30
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
file: {
|
|
34
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
35
|
+
borderRadius: { value: '{radii.small}' },
|
|
36
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
37
|
+
borderStyle: { value: 'solid' },
|
|
38
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
39
|
+
paddingBlock: { value: '{space.xs}' },
|
|
40
|
+
paddingInline: { value: '{space.small}' },
|
|
41
|
+
gap: { value: '{space.small}' },
|
|
42
|
+
alignItems: { value: 'baseline' },
|
|
43
|
+
name: {
|
|
44
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
45
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
46
|
+
color: { value: '{colors.font.primary}' },
|
|
47
|
+
},
|
|
48
|
+
size: {
|
|
49
|
+
fontSize: { value: '{fontSizes.small}' },
|
|
50
|
+
fontWeight: { value: '{fontWeights.normal}' },
|
|
51
|
+
color: { value: '{colors.font.tertiary}' },
|
|
52
|
+
},
|
|
53
|
+
image: {
|
|
54
|
+
width: { value: '{space.xxl}' },
|
|
55
|
+
height: { value: '{space.xxl}' },
|
|
56
|
+
backgroundColor: { value: '{colors.background.secondary}' },
|
|
57
|
+
color: { value: '{colors.font.tertiary}' },
|
|
58
|
+
borderRadius: { value: '{radii.small}' },
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
filelist: {
|
|
62
|
+
flexDirection: { value: 'column' },
|
|
63
|
+
gap: { value: '{space.small}' },
|
|
64
|
+
},
|
|
65
|
+
loader: {
|
|
66
|
+
strokeLinecap: { value: 'round' },
|
|
67
|
+
strokeEmpty: { value: '{colors.border.secondary}' },
|
|
68
|
+
strokeFilled: { value: '{components.loader.strokeFilled}' },
|
|
69
|
+
strokeWidth: { value: '{borderWidths.large}' },
|
|
70
|
+
},
|
|
71
|
+
previewer: {
|
|
72
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
73
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
74
|
+
borderStyle: { value: 'solid' },
|
|
75
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
76
|
+
borderRadius: { value: '{radii.small}' },
|
|
77
|
+
paddingBlock: { value: '{space.zero}' },
|
|
78
|
+
paddingInline: { value: '{space.zero}' },
|
|
79
|
+
maxHeight: { value: '40rem' },
|
|
80
|
+
maxWidth: { value: 'auto' },
|
|
81
|
+
text: {
|
|
82
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
83
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
84
|
+
color: { value: '{colors.font.primary}' },
|
|
85
|
+
},
|
|
86
|
+
body: {
|
|
87
|
+
paddingBlock: { value: '{space.medium}' },
|
|
88
|
+
paddingInline: { value: '{space.medium}' },
|
|
89
|
+
gap: { value: '{space.small}' },
|
|
90
|
+
},
|
|
91
|
+
footer: {
|
|
92
|
+
justifyContent: { value: 'flex-end' },
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
export { fileuploader };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { alert } from './alert.mjs';
|
|
2
2
|
import { autocomplete } from './autocomplete.mjs';
|
|
3
3
|
import { authenticator } from './authenticator.mjs';
|
|
4
|
+
import { avatar } from './avatar.mjs';
|
|
4
5
|
import { badge } from './badge.mjs';
|
|
5
6
|
import { breadcrumbs } from './breadcrumbs.mjs';
|
|
6
7
|
import { button } from './button.mjs';
|
|
@@ -18,6 +19,7 @@ import { fieldcontrol } from './fieldControl.mjs';
|
|
|
18
19
|
import { fieldgroup } from './fieldGroup.mjs';
|
|
19
20
|
import { fieldset } from './fieldset.mjs';
|
|
20
21
|
import { fieldmessages } from './fieldMessages.mjs';
|
|
22
|
+
import { fileuploader } from './fileuploader.mjs';
|
|
21
23
|
import { flex } from './flex.mjs';
|
|
22
24
|
import { heading } from './heading.mjs';
|
|
23
25
|
import { highlightmatch } from './highlightMatch.mjs';
|
|
@@ -57,6 +59,7 @@ const components = {
|
|
|
57
59
|
alert,
|
|
58
60
|
authenticator,
|
|
59
61
|
autocomplete,
|
|
62
|
+
avatar,
|
|
60
63
|
badge,
|
|
61
64
|
breadcrumbs,
|
|
62
65
|
button,
|
|
@@ -73,6 +76,7 @@ const components = {
|
|
|
73
76
|
fieldgroup,
|
|
74
77
|
fieldmessages,
|
|
75
78
|
fieldset,
|
|
79
|
+
fileuploader,
|
|
76
80
|
flex,
|
|
77
81
|
heading,
|
|
78
82
|
icon,
|
|
@@ -17,6 +17,31 @@ const ComponentClassName = {
|
|
|
17
17
|
AutocompleteMenuLoading: 'amplify-autocomplete__menu--loading',
|
|
18
18
|
AutocompleteMenuOption: 'amplify-autocomplete__menu__option',
|
|
19
19
|
AutocompleteMenuOptions: 'amplify-autocomplete__menu__options',
|
|
20
|
+
Avatar: 'amplify-avatar',
|
|
21
|
+
AvatarIcon: 'amplify-avatar__icon',
|
|
22
|
+
AvatarImage: 'amplify-avatar__image',
|
|
23
|
+
AIConversation: 'amplify-ai-conversation',
|
|
24
|
+
AIConversationAttachment: 'amplify-ai-conversation__attachment',
|
|
25
|
+
AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
|
|
26
|
+
AIConversationAttachmentImage: 'amplify-ai-conversation__attachment__image',
|
|
27
|
+
AIConversationAttachmentName: 'amplify-ai-conversation__attachment__name',
|
|
28
|
+
AIConversationAttachmentSize: 'amplify-ai-conversation__attachment__size',
|
|
29
|
+
AIConversationAttachmentRemove: 'amplify-ai-conversation__attachment__remove',
|
|
30
|
+
AIConversationForm: 'amplify-ai-conversation__form',
|
|
31
|
+
AIConversationFormAttach: 'amplify-ai-conversation__form__attach',
|
|
32
|
+
AIConversationFormSend: 'amplify-ai-conversation__form__send',
|
|
33
|
+
AIConversationFormField: 'amplify-ai-conversation__form__field',
|
|
34
|
+
AIConversationFormDropzone: 'amplify-ai-conversation__form__dropzone',
|
|
35
|
+
AIConversationMessage: 'amplify-ai-conversation__message',
|
|
36
|
+
AIConversationMessageAvatar: 'amplify-ai-conversation__message__avatar',
|
|
37
|
+
AIConversationMessageSender: 'amplify-ai-conversation__message__sender',
|
|
38
|
+
AIConversationMessageSenderUsername: 'amplify-ai-conversation__message__sender__username',
|
|
39
|
+
AIConversationMessageSenderTimestamp: 'amplify-ai-conversation__message__sender__timestamp',
|
|
40
|
+
AIConversationMessageBody: 'amplify-ai-conversation__message__body',
|
|
41
|
+
AIConversationMessageContent: 'amplify-ai-conversation__message__content',
|
|
42
|
+
AIConversationMessageActions: 'amplify-ai-conversation__message__actions',
|
|
43
|
+
AIConversationMessageList: 'amplify-ai-conversation__message__list',
|
|
44
|
+
AIConversationPrompt: 'amplify-ai-conversation__prompt',
|
|
20
45
|
Badge: 'amplify-badge',
|
|
21
46
|
Breadcrumbs: 'amplify-breadcrumbs',
|
|
22
47
|
BreadcrumbsList: 'amplify-breadcrumbs__list',
|
package/dist/index.js
CHANGED
|
@@ -2868,6 +2868,31 @@ const ComponentClassName = {
|
|
|
2868
2868
|
AutocompleteMenuLoading: 'amplify-autocomplete__menu--loading',
|
|
2869
2869
|
AutocompleteMenuOption: 'amplify-autocomplete__menu__option',
|
|
2870
2870
|
AutocompleteMenuOptions: 'amplify-autocomplete__menu__options',
|
|
2871
|
+
Avatar: 'amplify-avatar',
|
|
2872
|
+
AvatarIcon: 'amplify-avatar__icon',
|
|
2873
|
+
AvatarImage: 'amplify-avatar__image',
|
|
2874
|
+
AIConversation: 'amplify-ai-conversation',
|
|
2875
|
+
AIConversationAttachment: 'amplify-ai-conversation__attachment',
|
|
2876
|
+
AIConversationAttachmentList: 'amplify-ai-conversation__attachment__list',
|
|
2877
|
+
AIConversationAttachmentImage: 'amplify-ai-conversation__attachment__image',
|
|
2878
|
+
AIConversationAttachmentName: 'amplify-ai-conversation__attachment__name',
|
|
2879
|
+
AIConversationAttachmentSize: 'amplify-ai-conversation__attachment__size',
|
|
2880
|
+
AIConversationAttachmentRemove: 'amplify-ai-conversation__attachment__remove',
|
|
2881
|
+
AIConversationForm: 'amplify-ai-conversation__form',
|
|
2882
|
+
AIConversationFormAttach: 'amplify-ai-conversation__form__attach',
|
|
2883
|
+
AIConversationFormSend: 'amplify-ai-conversation__form__send',
|
|
2884
|
+
AIConversationFormField: 'amplify-ai-conversation__form__field',
|
|
2885
|
+
AIConversationFormDropzone: 'amplify-ai-conversation__form__dropzone',
|
|
2886
|
+
AIConversationMessage: 'amplify-ai-conversation__message',
|
|
2887
|
+
AIConversationMessageAvatar: 'amplify-ai-conversation__message__avatar',
|
|
2888
|
+
AIConversationMessageSender: 'amplify-ai-conversation__message__sender',
|
|
2889
|
+
AIConversationMessageSenderUsername: 'amplify-ai-conversation__message__sender__username',
|
|
2890
|
+
AIConversationMessageSenderTimestamp: 'amplify-ai-conversation__message__sender__timestamp',
|
|
2891
|
+
AIConversationMessageBody: 'amplify-ai-conversation__message__body',
|
|
2892
|
+
AIConversationMessageContent: 'amplify-ai-conversation__message__content',
|
|
2893
|
+
AIConversationMessageActions: 'amplify-ai-conversation__message__actions',
|
|
2894
|
+
AIConversationMessageList: 'amplify-ai-conversation__message__list',
|
|
2895
|
+
AIConversationPrompt: 'amplify-ai-conversation__prompt',
|
|
2871
2896
|
Badge: 'amplify-badge',
|
|
2872
2897
|
Breadcrumbs: 'amplify-breadcrumbs',
|
|
2873
2898
|
BreadcrumbsList: 'amplify-breadcrumbs__list',
|
|
@@ -5563,6 +5588,54 @@ const authenticator = {
|
|
|
5563
5588
|
},
|
|
5564
5589
|
};
|
|
5565
5590
|
|
|
5591
|
+
const avatar = {
|
|
5592
|
+
// Default styles
|
|
5593
|
+
color: { value: '{colors.font.tertiary.value}' },
|
|
5594
|
+
lineHeight: { value: 1 },
|
|
5595
|
+
fontWeight: { value: '{fontWeights.semibold.value}' },
|
|
5596
|
+
fontSize: { value: '{fontSizes.small.value}' },
|
|
5597
|
+
textAlign: { value: 'center' },
|
|
5598
|
+
width: { value: '{fontSizes.xxl.value}' },
|
|
5599
|
+
height: { value: '{fontSizes.xxl.value}' },
|
|
5600
|
+
backgroundColor: { value: '{colors.background.tertiary}' },
|
|
5601
|
+
borderRadius: { value: '100%' },
|
|
5602
|
+
borderColor: { value: '{colors.border.primary.value}' },
|
|
5603
|
+
borderWidth: { value: '{borderWidths.medium.value}' },
|
|
5604
|
+
// Color Theme Variations
|
|
5605
|
+
info: {
|
|
5606
|
+
color: { value: '{colors.font.info.value}' },
|
|
5607
|
+
backgroundColor: { value: '{colors.background.info.value}' },
|
|
5608
|
+
borderColor: { value: '{colors.border.info.value}' },
|
|
5609
|
+
},
|
|
5610
|
+
warning: {
|
|
5611
|
+
color: { value: '{colors.font.warning.value}' },
|
|
5612
|
+
backgroundColor: { value: '{colors.background.warning.value}' },
|
|
5613
|
+
borderColor: { value: '{colors.border.warning.value}' },
|
|
5614
|
+
},
|
|
5615
|
+
success: {
|
|
5616
|
+
color: { value: '{colors.font.success.value}' },
|
|
5617
|
+
backgroundColor: { value: '{colors.background.success.value}' },
|
|
5618
|
+
borderColor: { value: '{colors.border.success.value}' },
|
|
5619
|
+
},
|
|
5620
|
+
error: {
|
|
5621
|
+
color: { value: '{colors.font.error.value}' },
|
|
5622
|
+
backgroundColor: { value: '{colors.background.error.value}' },
|
|
5623
|
+
borderColor: { value: '{colors.border.error.value}' },
|
|
5624
|
+
},
|
|
5625
|
+
// Sizes
|
|
5626
|
+
small: {
|
|
5627
|
+
fontSize: { value: '{fontSizes.xs.value}' },
|
|
5628
|
+
width: { value: '{fontSizes.xl.value}' },
|
|
5629
|
+
height: { value: '{fontSizes.xl.value}' },
|
|
5630
|
+
},
|
|
5631
|
+
// medium is the default size
|
|
5632
|
+
large: {
|
|
5633
|
+
fontSize: { value: '{fontSizes.medium.value}' },
|
|
5634
|
+
width: { value: '{fontSizes.xxxl.value}' },
|
|
5635
|
+
height: { value: '{fontSizes.xxxl.value}' },
|
|
5636
|
+
},
|
|
5637
|
+
};
|
|
5638
|
+
|
|
5566
5639
|
const badge = {
|
|
5567
5640
|
// Default styles
|
|
5568
5641
|
color: { value: '{colors.font.primary.value}' },
|
|
@@ -6800,6 +6873,102 @@ const fieldmessages = {
|
|
|
6800
6873
|
},
|
|
6801
6874
|
};
|
|
6802
6875
|
|
|
6876
|
+
const fileuploader = {
|
|
6877
|
+
dropzone: {
|
|
6878
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
6879
|
+
borderRadius: { value: '{radii.small}' },
|
|
6880
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
6881
|
+
borderStyle: { value: 'dashed' },
|
|
6882
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
6883
|
+
gap: { value: '{space.small}' },
|
|
6884
|
+
paddingBlock: { value: '{space.xl}' },
|
|
6885
|
+
paddingInline: { value: '{space.large}' },
|
|
6886
|
+
textAlign: { value: 'center' },
|
|
6887
|
+
_active: {
|
|
6888
|
+
backgroundColor: { value: '{colors.primary.10}' },
|
|
6889
|
+
borderRadius: {
|
|
6890
|
+
value: '{components.fileuploader.dropzone.borderRadius}',
|
|
6891
|
+
},
|
|
6892
|
+
borderColor: { value: '{colors.border.pressed}' },
|
|
6893
|
+
borderStyle: {
|
|
6894
|
+
value: '{components.fileuploader.dropzone.borderStyle}',
|
|
6895
|
+
},
|
|
6896
|
+
borderWidth: { value: '{borderWidths.medium}' },
|
|
6897
|
+
},
|
|
6898
|
+
icon: {
|
|
6899
|
+
color: { value: '{colors.border.primary}' },
|
|
6900
|
+
fontSize: { value: '{fontSizes.xxl}' },
|
|
6901
|
+
},
|
|
6902
|
+
text: {
|
|
6903
|
+
color: { value: '{colors.font.tertiary}' },
|
|
6904
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
6905
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
6906
|
+
},
|
|
6907
|
+
},
|
|
6908
|
+
file: {
|
|
6909
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
6910
|
+
borderRadius: { value: '{radii.small}' },
|
|
6911
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
6912
|
+
borderStyle: { value: 'solid' },
|
|
6913
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
6914
|
+
paddingBlock: { value: '{space.xs}' },
|
|
6915
|
+
paddingInline: { value: '{space.small}' },
|
|
6916
|
+
gap: { value: '{space.small}' },
|
|
6917
|
+
alignItems: { value: 'baseline' },
|
|
6918
|
+
name: {
|
|
6919
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
6920
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
6921
|
+
color: { value: '{colors.font.primary}' },
|
|
6922
|
+
},
|
|
6923
|
+
size: {
|
|
6924
|
+
fontSize: { value: '{fontSizes.small}' },
|
|
6925
|
+
fontWeight: { value: '{fontWeights.normal}' },
|
|
6926
|
+
color: { value: '{colors.font.tertiary}' },
|
|
6927
|
+
},
|
|
6928
|
+
image: {
|
|
6929
|
+
width: { value: '{space.xxl}' },
|
|
6930
|
+
height: { value: '{space.xxl}' },
|
|
6931
|
+
backgroundColor: { value: '{colors.background.secondary}' },
|
|
6932
|
+
color: { value: '{colors.font.tertiary}' },
|
|
6933
|
+
borderRadius: { value: '{radii.small}' },
|
|
6934
|
+
},
|
|
6935
|
+
},
|
|
6936
|
+
filelist: {
|
|
6937
|
+
flexDirection: { value: 'column' },
|
|
6938
|
+
gap: { value: '{space.small}' },
|
|
6939
|
+
},
|
|
6940
|
+
loader: {
|
|
6941
|
+
strokeLinecap: { value: 'round' },
|
|
6942
|
+
strokeEmpty: { value: '{colors.border.secondary}' },
|
|
6943
|
+
strokeFilled: { value: '{components.loader.strokeFilled}' },
|
|
6944
|
+
strokeWidth: { value: '{borderWidths.large}' },
|
|
6945
|
+
},
|
|
6946
|
+
previewer: {
|
|
6947
|
+
backgroundColor: { value: '{colors.background.primary}' },
|
|
6948
|
+
borderColor: { value: '{colors.border.primary}' },
|
|
6949
|
+
borderStyle: { value: 'solid' },
|
|
6950
|
+
borderWidth: { value: '{borderWidths.small}' },
|
|
6951
|
+
borderRadius: { value: '{radii.small}' },
|
|
6952
|
+
paddingBlock: { value: '{space.zero}' },
|
|
6953
|
+
paddingInline: { value: '{space.zero}' },
|
|
6954
|
+
maxHeight: { value: '40rem' },
|
|
6955
|
+
maxWidth: { value: 'auto' },
|
|
6956
|
+
text: {
|
|
6957
|
+
fontSize: { value: '{fontSizes.medium}' },
|
|
6958
|
+
fontWeight: { value: '{fontWeights.bold}' },
|
|
6959
|
+
color: { value: '{colors.font.primary}' },
|
|
6960
|
+
},
|
|
6961
|
+
body: {
|
|
6962
|
+
paddingBlock: { value: '{space.medium}' },
|
|
6963
|
+
paddingInline: { value: '{space.medium}' },
|
|
6964
|
+
gap: { value: '{space.small}' },
|
|
6965
|
+
},
|
|
6966
|
+
footer: {
|
|
6967
|
+
justifyContent: { value: 'flex-end' },
|
|
6968
|
+
},
|
|
6969
|
+
},
|
|
6970
|
+
};
|
|
6971
|
+
|
|
6803
6972
|
const flex = {
|
|
6804
6973
|
gap: { value: '{space.medium.value}' },
|
|
6805
6974
|
justifyContent: { value: 'normal' },
|
|
@@ -7983,6 +8152,7 @@ const components = {
|
|
|
7983
8152
|
alert,
|
|
7984
8153
|
authenticator,
|
|
7985
8154
|
autocomplete,
|
|
8155
|
+
avatar,
|
|
7986
8156
|
badge,
|
|
7987
8157
|
breadcrumbs,
|
|
7988
8158
|
button,
|
|
@@ -7999,6 +8169,7 @@ const components = {
|
|
|
7999
8169
|
fieldgroup,
|
|
8000
8170
|
fieldmessages,
|
|
8001
8171
|
fieldset,
|
|
8172
|
+
fileuploader,
|
|
8002
8173
|
flex,
|
|
8003
8174
|
heading,
|
|
8004
8175
|
icon,
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
.amplify-ai-conversation {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
height: 100%;
|
|
5
|
+
}
|
|
6
|
+
.amplify-ai-conversation__message {
|
|
7
|
+
--content-bg: transparent;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: var(--flex-direction);
|
|
10
|
+
gap: var(--amplify-space-small);
|
|
11
|
+
padding: var(--amplify-space-small);
|
|
12
|
+
}
|
|
13
|
+
.amplify-ai-conversation__message__list {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
}
|
|
17
|
+
.amplify-ai-conversation__message__avatar {
|
|
18
|
+
flex-shrink: 0;
|
|
19
|
+
}
|
|
20
|
+
.amplify-ai-conversation__message__sender {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: var(--flex-direction);
|
|
23
|
+
align-items: center;
|
|
24
|
+
height: var(--amplify-components-avatar-height);
|
|
25
|
+
gap: var(--amplify-space-small);
|
|
26
|
+
}
|
|
27
|
+
.amplify-ai-conversation__message__sender__username {
|
|
28
|
+
font-weight: bold;
|
|
29
|
+
}
|
|
30
|
+
.amplify-ai-conversation__message__sender__timestamp {
|
|
31
|
+
color: var(--amplify-colors-font-tertiary);
|
|
32
|
+
font-size: var(--amplify-font-sizes-small);
|
|
33
|
+
}
|
|
34
|
+
.amplify-ai-conversation__message__body {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
align-items: var(--body-align-items);
|
|
38
|
+
gap: var(--amplify-space-xs);
|
|
39
|
+
}
|
|
40
|
+
.amplify-ai-conversation__message__content {
|
|
41
|
+
background-color: var(--content-bg);
|
|
42
|
+
border-radius: var(--amplify-radii-medium);
|
|
43
|
+
padding: var(--content-padding);
|
|
44
|
+
}
|
|
45
|
+
.amplify-ai-conversation__message__actions {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
}
|
|
49
|
+
.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;
|
|
54
|
+
}
|
|
55
|
+
.amplify-ai-conversation__message--user {
|
|
56
|
+
--bg-color: var(--amplify-colors-background-secondary);
|
|
57
|
+
}
|
|
58
|
+
.amplify-ai-conversation__message--assistant {
|
|
59
|
+
--bg-color: var(--amplify-colors-primary-10);
|
|
60
|
+
--flex-direction: row;
|
|
61
|
+
--body-align-items: flex-start;
|
|
62
|
+
}
|
|
63
|
+
.amplify-ai-conversation__form {
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: row;
|
|
66
|
+
align-items: flex-start;
|
|
67
|
+
gap: var(--amplify-space-small);
|
|
68
|
+
}
|
|
69
|
+
.amplify-ai-conversation__form__dropzone {
|
|
70
|
+
text-align: initial;
|
|
71
|
+
border: none;
|
|
72
|
+
padding: var(--amplify-space-xs);
|
|
73
|
+
}
|
|
74
|
+
.amplify-ai-conversation__attachment {
|
|
75
|
+
display: flex;
|
|
76
|
+
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
|
+
align-items: center;
|
|
84
|
+
gap: var(--amplify-space-xs);
|
|
85
|
+
font-size: var(--amplify-font-sizes-small);
|
|
86
|
+
}
|
|
87
|
+
.amplify-ai-conversation__attachment__list {
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: row;
|
|
90
|
+
flex-wrap: wrap;
|
|
91
|
+
gap: var(--amplify-space-small);
|
|
92
|
+
padding-block-start: var(--amplify-space-small);
|
|
93
|
+
}
|
|
94
|
+
.amplify-ai-conversation__attachment__image {
|
|
95
|
+
width: 1rem;
|
|
96
|
+
height: 1rem;
|
|
97
|
+
-o-object-fit: cover;
|
|
98
|
+
object-fit: cover;
|
|
99
|
+
}
|
|
100
|
+
.amplify-ai-conversation__attachment__size {
|
|
101
|
+
color: var(--amplify-colors-font-tertiary);
|
|
102
|
+
}
|
|
103
|
+
.amplify-ai-conversation__attachment__remove {
|
|
104
|
+
padding: var(--amplify-space-xxs);
|
|
105
|
+
}
|
|
106
|
+
.amplify-ai-conversation__prompt {
|
|
107
|
+
font-weight: normal;
|
|
108
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
@layer amplify.components {
|
|
2
|
+
.amplify-ai-conversation {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
height: 100%;
|
|
6
|
+
}
|
|
7
|
+
.amplify-ai-conversation__message {
|
|
8
|
+
--content-bg: transparent;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: var(--flex-direction);
|
|
11
|
+
gap: var(--amplify-space-small);
|
|
12
|
+
padding: var(--amplify-space-small);
|
|
13
|
+
}
|
|
14
|
+
.amplify-ai-conversation__message__list {
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
}
|
|
18
|
+
.amplify-ai-conversation__message__avatar {
|
|
19
|
+
flex-shrink: 0;
|
|
20
|
+
}
|
|
21
|
+
.amplify-ai-conversation__message__sender {
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: var(--flex-direction);
|
|
24
|
+
align-items: center;
|
|
25
|
+
height: var(--amplify-components-avatar-height);
|
|
26
|
+
gap: var(--amplify-space-small);
|
|
27
|
+
}
|
|
28
|
+
.amplify-ai-conversation__message__sender__username {
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
}
|
|
31
|
+
.amplify-ai-conversation__message__sender__timestamp {
|
|
32
|
+
color: var(--amplify-colors-font-tertiary);
|
|
33
|
+
font-size: var(--amplify-font-sizes-small);
|
|
34
|
+
}
|
|
35
|
+
.amplify-ai-conversation__message__body {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
align-items: var(--body-align-items);
|
|
39
|
+
gap: var(--amplify-space-xs);
|
|
40
|
+
}
|
|
41
|
+
.amplify-ai-conversation__message__content {
|
|
42
|
+
background-color: var(--content-bg);
|
|
43
|
+
border-radius: var(--amplify-radii-medium);
|
|
44
|
+
padding: var(--content-padding);
|
|
45
|
+
}
|
|
46
|
+
.amplify-ai-conversation__message__actions {
|
|
47
|
+
display: flex;
|
|
48
|
+
flex-direction: row;
|
|
49
|
+
}
|
|
50
|
+
.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;
|
|
55
|
+
}
|
|
56
|
+
.amplify-ai-conversation__message--user {
|
|
57
|
+
--bg-color: var(--amplify-colors-background-secondary);
|
|
58
|
+
}
|
|
59
|
+
.amplify-ai-conversation__message--assistant {
|
|
60
|
+
--bg-color: var(--amplify-colors-primary-10);
|
|
61
|
+
--flex-direction: row;
|
|
62
|
+
--body-align-items: flex-start;
|
|
63
|
+
}
|
|
64
|
+
.amplify-ai-conversation__form {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: row;
|
|
67
|
+
align-items: flex-start;
|
|
68
|
+
gap: var(--amplify-space-small);
|
|
69
|
+
}
|
|
70
|
+
.amplify-ai-conversation__form__dropzone {
|
|
71
|
+
text-align: initial;
|
|
72
|
+
border: none;
|
|
73
|
+
padding: var(--amplify-space-xs);
|
|
74
|
+
}
|
|
75
|
+
.amplify-ai-conversation__attachment {
|
|
76
|
+
display: flex;
|
|
77
|
+
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
|
+
align-items: center;
|
|
85
|
+
gap: var(--amplify-space-xs);
|
|
86
|
+
font-size: var(--amplify-font-sizes-small);
|
|
87
|
+
}
|
|
88
|
+
.amplify-ai-conversation__attachment__list {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: row;
|
|
91
|
+
flex-wrap: wrap;
|
|
92
|
+
gap: var(--amplify-space-small);
|
|
93
|
+
padding-block-start: var(--amplify-space-small);
|
|
94
|
+
}
|
|
95
|
+
.amplify-ai-conversation__attachment__image {
|
|
96
|
+
width: 1rem;
|
|
97
|
+
height: 1rem;
|
|
98
|
+
-o-object-fit: cover;
|
|
99
|
+
object-fit: cover;
|
|
100
|
+
}
|
|
101
|
+
.amplify-ai-conversation__attachment__size {
|
|
102
|
+
color: var(--amplify-colors-font-tertiary);
|
|
103
|
+
}
|
|
104
|
+
.amplify-ai-conversation__attachment__remove {
|
|
105
|
+
padding: var(--amplify-space-xxs);
|
|
106
|
+
}
|
|
107
|
+
.amplify-ai-conversation__prompt {
|
|
108
|
+
font-weight: normal;
|
|
109
|
+
}
|
|
110
|
+
}
|