@aws-amplify/ui-react 6.2.2 → 6.3.1

package/dist/internal.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Field = require('./Field-d47a49dc.js');
+var Field = require('./Field-4b189104.js');
 var React = require('react');
 var Storage = require('aws-amplify/storage');
 var ui = require('@aws-amplify/ui');
@@ -90,6 +90,26 @@ const FilterChildren = ({ allowedFilters, children = null, targetFilter, }) => {
     return showContent ? React__default["default"].createElement(React__default["default"].Fragment, null, children) : null;
 };
 
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+const IconAssistant = (props) => {
+    const { className, ...rest } = props;
+    return (React__namespace.createElement(Field.View, { as: "span", width: "1em", height: "1em", className: ui.classNames(ui.ComponentClassName.Icon, className), ...rest },
+        React__namespace.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.8548 1.40981C12.693 0.801759 11.3069 0.801759 10.1451 1.40981L2.14518 5.59679C0.826447 6.28698 0 7.65232 0 9.14075V16.8593C0 18.3477 0.826447 19.713 2.14518 20.4032L10.1451 24.5902C11.3069 25.1982 12.693 25.1982 13.8548 24.5902L21.8547 20.4032C23.1735 19.713 23.9999 18.3477 23.9999 16.8592V9.14075C23.9999 7.65232 23.1735 6.28698 21.8547 5.59679L13.8548 1.40981ZM12.9258 6.05676C12.5872 5.22732 11.4127 5.22732 11.0741 6.05676L9.42869 10.0877C9.31871 10.3572 9.0968 10.5653 8.82088 10.6579L4.665 12.0519C3.7557 12.3569 3.7557 13.6431 4.665 13.9481L8.82088 15.3421C9.0968 15.4347 9.31871 15.6428 9.42869 15.9123L11.0741 19.9432C11.4127 20.7727 12.5872 20.7727 12.9258 19.9432L14.5712 15.9123C14.6812 15.6428 14.9031 15.4347 15.179 15.3421L19.3349 13.9481C20.2442 13.6431 20.2442 12.3569 19.3349 12.0519L15.179 10.6579C14.9031 10.5653 14.6812 10.3572 14.5712 10.0877L12.9258 6.05676Z", fill: "currentColor" }))));
+};
+
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+const IconAttach = (props) => {
+    const { className, ...rest } = props;
+    return (React__namespace.createElement(Field.View, { as: "span", width: "1em", height: "1em", className: ui.classNames(ui.ComponentClassName.Icon, className), ...rest },
+        React__namespace.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.3928 1.93491L4.23565 11.8583C2.3257 13.7243 2.3257 16.7379 4.23565 18.6039C6.161 20.4849 9.29378 20.4849 11.2191 18.6039L21.2003 8.85257C22.3571 7.72235 22.3571 5.86149 21.2003 4.73128C20.0748 3.63171 18.2753 3.63857 17.1582 4.74668L7.17456 14.6503C6.86543 14.9523 6.8654 15.4303 7.17454 15.7323C7.49908 16.0494 8.03642 16.0494 8.36095 15.7323L18.338 5.98493L19.9926 7.67849L10.0155 17.4259C8.77102 18.6417 6.76446 18.6417 5.51997 17.4259C4.26127 16.1962 4.26007 14.1915 5.51637 12.9603L15.4908 3.06578C17.5259 1.04696 20.8044 1.03447 22.8548 3.03772C24.9625 5.09681 24.9625 8.48703 22.8548 10.5461L12.8737 20.2975C10.0284 23.0773 5.42639 23.0773 2.58108 20.2975C-0.279632 17.5026 -0.279632 12.9596 2.58108 10.1647L12.7383 0.241356L14.3928 1.93491Z", fill: "currentColor" }))));
+};
+
 /**
  * @internal For internal Amplify UI use only. May be removed in a future release.
  */
@@ -118,6 +138,16 @@ const IconFile = (props) => {
             React__namespace.createElement("path", { d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z", fill: "currentColor" }))));
 };
 
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+const IconSend = (props) => {
+    const { className, ...rest } = props;
+    return (React__namespace.createElement(Field.View, { as: "span", width: "1em", height: "1em", className: ui.classNames(ui.ComponentClassName.Icon, className), ...rest },
+        React__namespace.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.34374 0.774436C1.72319 0.451324 2.26162 0.393083 2.70138 0.627584L23.173 11.544C23.5704 11.7559 23.8177 12.1704 23.8155 12.6207C23.8133 13.071 23.5618 13.4831 23.1624 13.691L2.69073 24.3477C2.24914 24.5776 1.71196 24.5144 1.33575 24.1884C0.959534 23.8624 0.820634 23.3396 0.98539 22.8698L4.58366 12.6099L0.982433 2.09133C0.821002 1.61982 0.964295 1.09755 1.34374 0.774436ZM6.72819 13.8281L4.29043 20.779L17.6432 13.8281H6.72819ZM17.7477 11.4013H6.735L4.27542 4.21725L17.7477 11.4013Z", fill: "currentColor" }))));
+};
+
 /**
  * @internal For internal Amplify UI use only. May be removed in a future release.
  */
@@ -771,6 +801,268 @@ const PrimitiveCatalog = {
             }
         }
     },
+    "Avatar": {
+        "properties": {
+            "src": {
+                "type": "string"
+            },
+            "alt": {
+                "type": "string"
+            },
+            "variation": {
+                "type": "string"
+            },
+            "colorTheme": {
+                "type": "string"
+            },
+            "size": {
+                "type": "string"
+            },
+            "isDisabled": {
+                "type": "boolean"
+            },
+            "id": {
+                "type": "string"
+            },
+            "children": {
+                "type": "string"
+            },
+            "className": {
+                "type": "string"
+            },
+            "testId": {
+                "type": "string"
+            },
+            "inert": {
+                "type": "boolean"
+            },
+            "alignSelf": {
+                "type": "string"
+            },
+            "backgroundColor": {
+                "type": "string"
+            },
+            "backgroundImage": {
+                "type": "string"
+            },
+            "border": {
+                "type": "string"
+            },
+            "borderColor": {
+                "type": "string"
+            },
+            "borderWidth": {
+                "type": "string"
+            },
+            "borderStyle": {
+                "type": "string"
+            },
+            "borderRadius": {
+                "type": "string"
+            },
+            "bottom": {
+                "type": "string"
+            },
+            "boxShadow": {
+                "type": "string"
+            },
+            "color": {
+                "type": "string"
+            },
+            "display": {
+                "type": "string"
+            },
+            "fontFamily": {
+                "type": "string"
+            },
+            "fontSize": {
+                "type": "string"
+            },
+            "fontStyle": {
+                "type": "string"
+            },
+            "fontWeight": {
+                "type": "string"
+            },
+            "height": {
+                "type": "string"
+            },
+            "left": {
+                "type": "string"
+            },
+            "letterSpacing": {
+                "type": "string"
+            },
+            "lineHeight": {
+                "type": "string"
+            },
+            "margin": {
+                "type": "string"
+            },
+            "marginBlock": {
+                "type": "string"
+            },
+            "marginBlockEnd": {
+                "type": "string"
+            },
+            "marginBlockStart": {
+                "type": "string"
+            },
+            "marginBottom": {
+                "type": "string"
+            },
+            "marginInline": {
+                "type": "string"
+            },
+            "marginInlineEnd": {
+                "type": "string"
+            },
+            "marginInlineStart": {
+                "type": "string"
+            },
+            "marginLeft": {
+                "type": "string"
+            },
+            "marginRight": {
+                "type": "string"
+            },
+            "marginTop": {
+                "type": "string"
+            },
+            "maxHeight": {
+                "type": "string"
+            },
+            "maxWidth": {
+                "type": "string"
+            },
+            "minHeight": {
+                "type": "string"
+            },
+            "minWidth": {
+                "type": "string"
+            },
+            "opacity": {
+                "type": "string"
+            },
+            "overflow": {
+                "type": "string"
+            },
+            "padding": {
+                "type": "string"
+            },
+            "paddingBlock": {
+                "type": "string"
+            },
+            "paddingBlockEnd": {
+                "type": "string"
+            },
+            "paddingBlockStart": {
+                "type": "string"
+            },
+            "paddingBottom": {
+                "type": "string"
+            },
+            "paddingInline": {
+                "type": "string"
+            },
+            "paddingInlineEnd": {
+                "type": "string"
+            },
+            "paddingInlineStart": {
+                "type": "string"
+            },
+            "paddingLeft": {
+                "type": "string"
+            },
+            "paddingRight": {
+                "type": "string"
+            },
+            "paddingTop": {
+                "type": "string"
+            },
+            "position": {
+                "type": "string"
+            },
+            "right": {
+                "type": "string"
+            },
+            "textAlign": {
+                "type": "string"
+            },
+            "textDecoration": {
+                "type": "string"
+            },
+            "textTransform": {
+                "type": "string"
+            },
+            "top": {
+                "type": "string"
+            },
+            "transform": {
+                "type": "string"
+            },
+            "transformOrigin": {
+                "type": "string"
+            },
+            "width": {
+                "type": "string"
+            },
+            "whiteSpace": {
+                "type": "string"
+            },
+            "flex": {
+                "type": "string"
+            },
+            "order": {
+                "type": "string"
+            },
+            "grow": {
+                "type": "string"
+            },
+            "shrink": {
+                "type": "string"
+            },
+            "basis": {
+                "type": "string"
+            },
+            "area": {
+                "type": "string"
+            },
+            "column": {
+                "type": "string"
+            },
+            "columnEnd": {
+                "type": "string"
+            },
+            "columnSpan": {
+                "type": "string"
+            },
+            "columnStart": {
+                "type": "string"
+            },
+            "row": {
+                "type": "string"
+            },
+            "rowEnd": {
+                "type": "string"
+            },
+            "rowSpan": {
+                "type": "string"
+            },
+            "rowStart": {
+                "type": "string"
+            },
+            "ariaLabel": {
+                "type": "string"
+            },
+            "ariaValuetext": {
+                "type": "string"
+            },
+            "role": {
+                "type": "string"
+            }
+        }
+    },
     "Badge": {
         "properties": {
             "variation": {
@@ -1841,10 +2133,10 @@ const PrimitiveCatalog = {
             "rowGap": {
                 "type": "string"
             },
-            "size": {
+            "variation": {
                 "type": "string"
             },
-            "variation": {
+            "size": {
                 "type": "string"
             }
         }
@@ -3982,10 +4274,10 @@ const PrimitiveCatalog = {
             "type": {
                 "type": "string"
             },
-            "size": {
+            "variation": {
                 "type": "string"
             },
-            "variation": {
+            "size": {
                 "type": "string"
             }
         }
@@ -7478,10 +7770,10 @@ const PrimitiveCatalog = {
             "type": {
                 "type": "string"
             },
-            "size": {
+            "variation": {
                 "type": "string"
             },
-            "variation": {
+            "size": {
                 "type": "string"
             },
             "direction": {
@@ -7767,10 +8059,10 @@ const PrimitiveCatalog = {
             "type": {
                 "type": "string"
             },
-            "size": {
+            "variation": {
                 "type": "string"
             },
-            "variation": {
+            "size": {
                 "type": "string"
             },
             "direction": {
@@ -8997,13 +9289,13 @@ const PrimitiveCatalog = {
             "type": {
                 "type": "string"
             },
+            "variation": {
+                "type": "string"
+            },
             "size": {
                 "type": "string",
                 "priority": true
             },
-            "variation": {
-                "type": "string"
-            },
             "descriptiveText": {
                 "type": "string",
                 "priority": true
@@ -9382,10 +9674,10 @@ const PrimitiveCatalog = {
             "aria-valuenow": {
                 "type": "number"
             },
-            "alt": {
+            "src": {
                 "type": "string"
             },
-            "src": {
+            "alt": {
                 "type": "string"
             },
             "accept": {
@@ -10618,6 +10910,9 @@ const PrimitiveCatalog = {
             "orientation": {
                 "type": "string"
             },
+            "autoScroll": {
+                "type": "string"
+            },
             "isDisabled": {
                 "type": "boolean"
             },
@@ -13131,6 +13426,9 @@ const PrimitiveCatalog = {
     },
     "TextAreaField": {
         "properties": {
+            "autoResize": {
+                "type": "boolean"
+            },
             "descriptiveText": {
                 "type": "string",
                 "priority": true
@@ -14071,10 +14369,10 @@ const PrimitiveCatalog = {
             "type": {
                 "type": "string"
             },
-            "size": {
+            "variation": {
                 "type": "string"
             },
-            "variation": {
+            "size": {
                 "type": "string"
             },
             "direction": {
@@ -14384,10 +14682,10 @@ const PrimitiveCatalog = {
             "rowGap": {
                 "type": "string"
             },
-            "size": {
+            "variation": {
                 "type": "string"
             },
-            "variation": {
+            "size": {
                 "type": "string"
             }
         }
@@ -16398,6 +16696,7 @@ exports.IconMenu = Field.IconMenu;
 exports.IconRemove = Field.IconRemove;
 exports.IconSearch = Field.IconSearch;
 exports.IconStar = Field.IconStar;
+exports.IconUser = Field.IconUser;
 exports.IconVisibility = Field.IconVisibility;
 exports.IconVisibilityOff = Field.IconVisibilityOff;
 exports.IconWarning = Field.IconWarning;
@@ -16407,9 +16706,12 @@ exports.useDeprecationWarning = Field.useDeprecationWarning;
 exports.useDropZone = Field.useDropZone;
 exports.useIcons = Field.useIcons;
 exports.FilterChildren = FilterChildren;
+exports.IconAssistant = IconAssistant;
+exports.IconAttach = IconAttach;
 exports.IconCheckCircleOutline = IconCheckCircleOutline;
 exports.IconEdit = IconEdit;
 exports.IconFile = IconFile;
+exports.IconSend = IconSend;
 exports.IconUpload = IconUpload;
 exports.PrimitiveCatalog = PrimitiveCatalog;
 exports.useStorageURL = useStorageURL;

package/dist/styles/AIConversation.css

@@ -0,0 +1,108 @@
+.amplify-ai-conversation {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.amplify-ai-conversation__message {
+  --content-bg: transparent;
+  display: flex;
+  flex-direction: var(--flex-direction);
+  gap: var(--amplify-space-small);
+  padding: var(--amplify-space-small);
+}
+.amplify-ai-conversation__message__list {
+  display: flex;
+  flex-direction: column;
+}
+.amplify-ai-conversation__message__avatar {
+  flex-shrink: 0;
+}
+.amplify-ai-conversation__message__sender {
+  display: flex;
+  flex-direction: var(--flex-direction);
+  align-items: center;
+  height: var(--amplify-components-avatar-height);
+  gap: var(--amplify-space-small);
+}
+.amplify-ai-conversation__message__sender__username {
+  font-weight: bold;
+}
+.amplify-ai-conversation__message__sender__timestamp {
+  color: var(--amplify-colors-font-tertiary);
+  font-size: var(--amplify-font-sizes-small);
+}
+.amplify-ai-conversation__message__body {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--body-align-items);
+  gap: var(--amplify-space-xs);
+}
+.amplify-ai-conversation__message__content {
+  background-color: var(--content-bg);
+  border-radius: var(--amplify-radii-medium);
+  padding: var(--content-padding);
+}
+.amplify-ai-conversation__message__actions {
+  display: flex;
+  flex-direction: row;
+}
+.amplify-ai-conversation__message--bubble {
+  --content-bg: var(--bg-color);
+  --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
+  --flex-direction: row-reverse;
+  --body-align-items: flex-end;
+}
+.amplify-ai-conversation__message--user {
+  --bg-color: var(--amplify-colors-background-secondary);
+}
+.amplify-ai-conversation__message--assistant {
+  --bg-color: var(--amplify-colors-primary-10);
+  --flex-direction: row;
+  --body-align-items: flex-start;
+}
+.amplify-ai-conversation__form {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--amplify-space-small);
+}
+.amplify-ai-conversation__form__dropzone {
+  text-align: initial;
+  border: none;
+  padding: var(--amplify-space-xs);
+}
+.amplify-ai-conversation__attachment {
+  display: flex;
+  flex-direction: row;
+  padding-block: var(--amplify-space-xxxs);
+  padding-inline: var(--amplify-space-xs);
+  border-width: var(--amplify-border-widths-small);
+  border-style: solid;
+  border-color: var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  align-items: center;
+  gap: var(--amplify-space-xs);
+  font-size: var(--amplify-font-sizes-small);
+}
+.amplify-ai-conversation__attachment__list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--amplify-space-small);
+  padding-block-start: var(--amplify-space-small);
+}
+.amplify-ai-conversation__attachment__image {
+  width: 1rem;
+  height: 1rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.amplify-ai-conversation__attachment__size {
+  color: var(--amplify-colors-font-tertiary);
+}
+.amplify-ai-conversation__attachment__remove {
+  padding: var(--amplify-space-xxs);
+}
+.amplify-ai-conversation__prompt {
+  font-weight: normal;
+}

package/dist/styles/AIConversation.layer.css

@@ -0,0 +1,110 @@
+@layer amplify.components {
+.amplify-ai-conversation {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.amplify-ai-conversation__message {
+  --content-bg: transparent;
+  display: flex;
+  flex-direction: var(--flex-direction);
+  gap: var(--amplify-space-small);
+  padding: var(--amplify-space-small);
+}
+.amplify-ai-conversation__message__list {
+  display: flex;
+  flex-direction: column;
+}
+.amplify-ai-conversation__message__avatar {
+  flex-shrink: 0;
+}
+.amplify-ai-conversation__message__sender {
+  display: flex;
+  flex-direction: var(--flex-direction);
+  align-items: center;
+  height: var(--amplify-components-avatar-height);
+  gap: var(--amplify-space-small);
+}
+.amplify-ai-conversation__message__sender__username {
+  font-weight: bold;
+}
+.amplify-ai-conversation__message__sender__timestamp {
+  color: var(--amplify-colors-font-tertiary);
+  font-size: var(--amplify-font-sizes-small);
+}
+.amplify-ai-conversation__message__body {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--body-align-items);
+  gap: var(--amplify-space-xs);
+}
+.amplify-ai-conversation__message__content {
+  background-color: var(--content-bg);
+  border-radius: var(--amplify-radii-medium);
+  padding: var(--content-padding);
+}
+.amplify-ai-conversation__message__actions {
+  display: flex;
+  flex-direction: row;
+}
+.amplify-ai-conversation__message--bubble {
+  --content-bg: var(--bg-color);
+  --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
+  --flex-direction: row-reverse;
+  --body-align-items: flex-end;
+}
+.amplify-ai-conversation__message--user {
+  --bg-color: var(--amplify-colors-background-secondary);
+}
+.amplify-ai-conversation__message--assistant {
+  --bg-color: var(--amplify-colors-primary-10);
+  --flex-direction: row;
+  --body-align-items: flex-start;
+}
+.amplify-ai-conversation__form {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--amplify-space-small);
+}
+.amplify-ai-conversation__form__dropzone {
+  text-align: initial;
+  border: none;
+  padding: var(--amplify-space-xs);
+}
+.amplify-ai-conversation__attachment {
+  display: flex;
+  flex-direction: row;
+  padding-block: var(--amplify-space-xxxs);
+  padding-inline: var(--amplify-space-xs);
+  border-width: var(--amplify-border-widths-small);
+  border-style: solid;
+  border-color: var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  align-items: center;
+  gap: var(--amplify-space-xs);
+  font-size: var(--amplify-font-sizes-small);
+}
+.amplify-ai-conversation__attachment__list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--amplify-space-small);
+  padding-block-start: var(--amplify-space-small);
+}
+.amplify-ai-conversation__attachment__image {
+  width: 1rem;
+  height: 1rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.amplify-ai-conversation__attachment__size {
+  color: var(--amplify-colors-font-tertiary);
+}
+.amplify-ai-conversation__attachment__remove {
+  padding: var(--amplify-space-xxs);
+}
+.amplify-ai-conversation__prompt {
+  font-weight: normal;
+}
+}