@aws-amplify/ui 6.6.4 → 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 (17) 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/esm/utils/setUserAgent/constants.mjs +14 -2
  4. package/dist/esm/utils/setUserAgent/setUserAgent.mjs +8 -1
  5. package/dist/index.js +20 -1
  6. package/dist/styles/AIConversation.css +11 -0
  7. package/dist/styles/AIConversation.layer.css +11 -0
  8. package/dist/styles/base.css +1 -0
  9. package/dist/styles/base.layer.css +1 -0
  10. package/dist/styles.css +12 -0
  11. package/dist/styles.layer.css +12 -0
  12. package/dist/theme.css +1 -0
  13. package/dist/types/theme/createTheme/defineComponentTheme.d.ts +0 -1
  14. package/dist/types/theme/tokens/components/aiConversation.d.ts +1 -0
  15. package/dist/types/utils/setUserAgent/constants.d.ts +2 -1
  16. package/dist/types/utils/setUserAgent/setUserAgent.d.ts +2 -2
  17. package/package.json +2 -2
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/esm/utils/setUserAgent/constants.mjs CHANGED
@@ -1,5 +1,17 @@
1
- import { AuthAction, Category, StorageAction, InAppMessagingAction, GeoAction } from '@aws-amplify/core/internals/utils';
1
+ import { Category, AiAction, AuthAction, StorageAction, InAppMessagingAction, GeoAction } from '@aws-amplify/core/internals/utils';
2
2
 
3
+ const AI_INPUT_BASE = {
4
+ category: Category.AI,
5
+ apis: [
6
+ AiAction.CreateConversation,
7
+ AiAction.DeleteConversation,
8
+ AiAction.ListConversations,
9
+ AiAction.UpdateConversation,
10
+ AiAction.OnMessage,
11
+ AiAction.SendMessage,
12
+ AiAction.Generation,
13
+ ],
14
+ };
3
15
  const ACCOUNT_SETTINGS_INPUT_BASE = {
4
16
  apis: [AuthAction.DeleteUser, AuthAction.UpdatePassword],
5
17
  category: Category.Auth,
@@ -44,4 +56,4 @@ const STORAGE_MANAGER_INPUT_BASE = {
44
56
  category: Category.Storage,
45
57
  };
46
58
 
47
- export { ACCOUNT_SETTINGS_INPUT_BASE, AUTHENTICATOR_INPUT_BASE, FILE_UPLOADER_BASE_INPUT, IN_APP_MESSAGING_INPUT_BASE, LOCATION_SEARCH_INPUT_BASE, MAP_VIEW_INPUT_BASE, STORAGE_MANAGER_INPUT_BASE };
59
+ export { ACCOUNT_SETTINGS_INPUT_BASE, AI_INPUT_BASE, AUTHENTICATOR_INPUT_BASE, FILE_UPLOADER_BASE_INPUT, IN_APP_MESSAGING_INPUT_BASE, LOCATION_SEARCH_INPUT_BASE, MAP_VIEW_INPUT_BASE, STORAGE_MANAGER_INPUT_BASE };
package/dist/esm/utils/setUserAgent/setUserAgent.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { setCustomUserAgent } from '@aws-amplify/core/internals/utils';
2
- import { STORAGE_MANAGER_INPUT_BASE, MAP_VIEW_INPUT_BASE, LOCATION_SEARCH_INPUT_BASE, IN_APP_MESSAGING_INPUT_BASE, FILE_UPLOADER_BASE_INPUT, ACCOUNT_SETTINGS_INPUT_BASE, AUTHENTICATOR_INPUT_BASE } from './constants.mjs';
2
+ import { STORAGE_MANAGER_INPUT_BASE, MAP_VIEW_INPUT_BASE, LOCATION_SEARCH_INPUT_BASE, IN_APP_MESSAGING_INPUT_BASE, FILE_UPLOADER_BASE_INPUT, ACCOUNT_SETTINGS_INPUT_BASE, AUTHENTICATOR_INPUT_BASE, AI_INPUT_BASE } from './constants.mjs';
3
3
  import { noop } from '../utils.mjs';
4
4
 
5
5
  /**
@@ -15,6 +15,13 @@ import { noop } from '../utils.mjs';
15
15
  const setUserAgent = ({ componentName, packageName, version, }) => {
16
16
  const packageData = [`ui-${packageName}`, version];
17
17
  switch (componentName) {
18
+ case 'AIConversation': {
19
+ setCustomUserAgent({
20
+ ...AI_INPUT_BASE,
21
+ additionalDetails: [[componentName], packageData],
22
+ });
23
+ break;
24
+ }
18
25
  case 'Authenticator': {
19
26
  setCustomUserAgent({
20
27
  ...AUTHENTICATOR_INPUT_BASE,
package/dist/index.js CHANGED
@@ -36,6 +36,18 @@ const getActorContext$1 = (state) => {
36
36
  return getActorState(state)?.context;
37
37
  };
38
38
 
39
+ const AI_INPUT_BASE = {
40
+ category: utils.Category.AI,
41
+ apis: [
42
+ utils.AiAction.CreateConversation,
43
+ utils.AiAction.DeleteConversation,
44
+ utils.AiAction.ListConversations,
45
+ utils.AiAction.UpdateConversation,
46
+ utils.AiAction.OnMessage,
47
+ utils.AiAction.SendMessage,
48
+ utils.AiAction.Generation,
49
+ ],
50
+ };
39
51
  const ACCOUNT_SETTINGS_INPUT_BASE = {
40
52
  apis: [utils.AuthAction.DeleteUser, utils.AuthAction.UpdatePassword],
41
53
  category: utils.Category.Auth,
@@ -347,6 +359,13 @@ const cloneDeep = (obj) => {
347
359
  const setUserAgent = ({ componentName, packageName, version, }) => {
348
360
  const packageData = [`ui-${packageName}`, version];
349
361
  switch (componentName) {
362
+ case 'AIConversation': {
363
+ utils.setCustomUserAgent({
364
+ ...AI_INPUT_BASE,
365
+ additionalDetails: [[componentName], packageData],
366
+ });
367
+ break;
368
+ }
350
369
  case 'Authenticator': {
351
370
  utils.setCustomUserAgent({
352
371
  ...AUTHENTICATOR_INPUT_BASE,
@@ -5648,6 +5667,7 @@ const aiConversation = {
5648
5667
  },
5649
5668
  },
5650
5669
  body: { gap: { value: '{space.xs.value}' } },
5670
+ actions: { gap: { value: '{space.xs.value}' } },
5651
5671
  },
5652
5672
  form: {
5653
5673
  gap: { value: '{space.small.value}' },
@@ -9123,7 +9143,6 @@ function modifierClassnames({ className, modifiers, }) {
9123
9143
  * to both completely customize built-in components and
9124
9144
  * build your own components!
9125
9145
  *
9126
- * @experimental
9127
9146
  *
9128
9147
  * ```ts
9129
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/dist/types/utils/setUserAgent/constants.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { AuthUserAgentInput, GeoUserAgentInput, InAppMessagingUserAgentInput, StorageUserAgentInput } from '@aws-amplify/core/internals/utils';
1
+ import { AuthUserAgentInput, GeoUserAgentInput, InAppMessagingUserAgentInput, StorageUserAgentInput, AiUserAgentInput } from '@aws-amplify/core/internals/utils';
2
+ export declare const AI_INPUT_BASE: Omit<AiUserAgentInput, 'additionalDetails'>;
2
3
  export declare const ACCOUNT_SETTINGS_INPUT_BASE: Omit<AuthUserAgentInput, 'additionalDetails'>;
3
4
  export declare const AUTHENTICATOR_INPUT_BASE: Omit<AuthUserAgentInput, 'additionalDetails'>;
4
5
  export declare const FILE_UPLOADER_BASE_INPUT: Omit<StorageUserAgentInput, 'additionalDetails'>;
package/dist/types/utils/setUserAgent/setUserAgent.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export type PackageName = 'angular' | 'react' | 'react-auth' | 'react-geo' | 'react-liveness' | 'react-native' | 'react-native-auth' | 'react-notifications' | 'react-storage' | 'vue';
2
- export type ComponentName = 'Authenticator' | 'ChangePassword' | 'DeleteUser' | 'FaceLivenessDetector' | 'FileUploader' | 'InAppMessaging' | 'LocationSearch' | 'MapView' | 'StorageManager' | 'StorageImage';
1
+ export type PackageName = 'angular' | 'react' | 'react-ai' | 'react-auth' | 'react-geo' | 'react-liveness' | 'react-native' | 'react-native-auth' | 'react-notifications' | 'react-storage' | 'vue';
2
+ export type ComponentName = 'AIConversation' | 'Authenticator' | 'ChangePassword' | 'DeleteUser' | 'FaceLivenessDetector' | 'FileUploader' | 'InAppMessaging' | 'LocationSearch' | 'MapView' | 'StorageManager' | 'StorageImage';
3
3
  export type Version = `${string}.${string}.${string}`;
4
4
  export interface SetUserAgentOptions {
5
5
  componentName: ComponentName;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.6.4",
3
+ "version": "6.6.6",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -50,7 +50,7 @@
50
50
  },
51
51
  "peerDependencies": {
52
52
  "@aws-amplify/core": "*",
53
- "aws-amplify": "^6.6.0",
53
+ "aws-amplify": "^6.6.5",
54
54
  "xstate": "^4.33.6"
55
55
  },
56
56
  "peerDependenciesMeta": {