@aws-amplify/ui 6.6.2 → 6.6.4

package/dist/index.js

@@ -316,6 +316,23 @@ function splitObject(obj, predicate) {
     });
     return [left, right];
 }
+const cloneDeep = (obj) => {
+    if (obj === null || obj === undefined || typeof obj !== 'object') {
+        return obj;
+    }
+    if (obj instanceof Array) {
+        return obj.reduce((arr, item, i) => {
+            arr[i] = cloneDeep(item);
+            return arr;
+        }, []);
+    }
+    if (obj instanceof Object) {
+        return Object.keys(obj || {}).reduce((cpObj, key) => {
+            cpObj[key] = cloneDeep(obj[key]);
+            return cpObj;
+        }, {});
+    }
+};
 
 /**
  * @example
@@ -448,6 +465,79 @@ function humanFileSize(bytes, si = false, dp = 1) {
     return bytes.toFixed(dp) + ' ' + units[unit];
 }
 
+const OPTIONS = {
+    openingCharacter: '{',
+    closingCharacter: '}',
+    separator: '.',
+};
+const REFERENCE_REGEX = /\{([^}]+)\}/g;
+
+/**
+ * Checks if the value uses a value reference.
+ * @param {string} value
+ * @returns {boolean} - True, if the value uses a value reference
+ */
+function usesReference(value) {
+    const regex = new RegExp(REFERENCE_REGEX);
+    if (typeof value === 'string') {
+        return regex.test(value);
+    }
+    if (typeof value === 'object') {
+        let hasReference = false;
+        // iterate over each property in the object,
+        // if any element passes the regex test,
+        // the whole thing should be true
+        for (const key in value) {
+            if (has(value, key)) {
+                const element = value[key];
+                let reference = usesReference(element);
+                if (reference) {
+                    hasReference = true;
+                    break;
+                }
+            }
+        }
+        return hasReference;
+    }
+    return false;
+}
+function resolveReference(path, obj) {
+    let ref = obj;
+    if (!Array.isArray(path)) {
+        return;
+    }
+    for (let i = 0; i < path.length; i++) {
+        // Check for undefined as 0 is a valid, truthy value
+        if (typeof ref[path[i]] !== 'undefined') {
+            ref = ref[path[i]];
+        }
+        else {
+            // set the reference as undefined if we don't find anything
+            ref = undefined;
+            break;
+        }
+    }
+    return ref;
+}
+/**
+ * Returns the path from a path name be splitting the name by a given separator.
+ */
+function getPathFromName(pathName) {
+    if (typeof pathName !== 'string') {
+        throw new Error('Getting path from name failed. Name must be a string');
+    }
+    return pathName.split(OPTIONS.separator);
+}
+/**
+ * Returns the paths name be joining its parts with a given separator.
+ */
+function getName(path) {
+    if (!path || !(path instanceof Array)) {
+        throw new Error('Getting name for path failed. Path must be an array');
+    }
+    return path.join(OPTIONS.separator);
+}
+
 /**
  * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
  * xstate events.
@@ -5531,6 +5621,70 @@ const alert = {
     },
 };
 
+const aiConversation = {
+    message: {
+        backgroundColor: { value: '{colors.background.secondary.value}' },
+        borderRadius: { value: '{radii.large.value}' },
+        gap: { value: '{space.small.value}' },
+        paddingBlock: { value: '{space.small.value}' },
+        paddingInline: { value: '{space.small.value}' },
+        user: {
+            backgroundColor: { value: '{colors.background.secondary.value}' },
+        },
+        assistant: {
+            backgroundColor: { value: '{colors.primary.10.value}' },
+        },
+        sender: {
+            gap: { value: '{space.small.value}' },
+            username: {
+                color: { value: '{colors.font.primary.value}' },
+                fontSize: { value: 'inherit' },
+                fontWeight: { value: '{fontWeights.bold.value}' },
+            },
+            timestamp: {
+                color: { value: '{colors.font.tertiary.value}' },
+                fontSize: { value: 'inherit' },
+                fontWeight: { value: 'inherit' },
+            },
+        },
+        body: { gap: { value: '{space.xs.value}' } },
+    },
+    form: {
+        gap: { value: '{space.small.value}' },
+        padding: { value: '{space.small.value}' },
+    },
+    attachment: {
+        borderColor: { value: '{colors.border.secondary.value}' },
+        borderWidth: { value: '{borderWidths.small.value}' },
+        borderRadius: { value: '{radii.small.value}' },
+        fontSize: { value: '{fontSizes.small.value}' },
+        paddingBlock: { value: '{space.xxxs.value}' },
+        paddingInline: { value: '{space.xs.value}' },
+        gap: { value: '{space.xs.value}' },
+        list: {
+            paddingBlockStart: { value: '{space.xs.value}' },
+            gap: { value: '{space.xxs.value}' },
+        },
+        name: {
+            color: { value: '{colors.font.primary.value}' },
+            fontSize: { value: '{fontSizes.small.value}' },
+            fontWeight: { value: '{fontWeights.normal.value}' },
+        },
+        size: {
+            color: { value: '{colors.font.tertiary.value}' },
+            fontSize: { value: '{fontSizes.small.value}' },
+            fontWeight: { value: '{fontWeights.normal.value}' },
+        },
+        remove: {
+            padding: { value: '{space.xxs.value}' },
+        },
+        image: {
+            width: { value: '{fontSizes.medium.value}' },
+            height: { value: '{fontSizes.medium.value}' },
+        },
+    },
+};
+
 const autocomplete = {
     menu: {
         width: { value: '100%' },
@@ -8171,6 +8325,7 @@ const togglebuttongroup = {
 
 const components = {
     accordion,
+    aiConversation,
     alert,
     authenticator,
     autocomplete,
@@ -8649,35 +8804,6 @@ function deepExtend(objects, collision, path) {
     }
     return target;
 }
-/**
- * Checks if the value uses a value reference.
- * @param {string} value
- * @returns {boolean} - True, if the value uses a value reference
- */
-function usesReference(value) {
-    const regex = new RegExp('\\{([^}]+)\\}', 'g');
-    if (typeof value === 'string') {
-        return regex.test(value);
-    }
-    if (typeof value === 'object') {
-        let hasReference = false;
-        // iterate over each property in the object,
-        // if any element passes the regex test,
-        // the whole thing should be true
-        for (const key in value) {
-            if (has(value, key)) {
-                const element = value[key];
-                let reference = usesReference(element);
-                if (reference) {
-                    hasReference = true;
-                    break;
-                }
-            }
-        }
-        return hasReference;
-    }
-    return false;
-}
 
 function addVars(selector, vars) {
     if (!vars)
@@ -9059,6 +9185,132 @@ function createGlobalCSS(css) {
     return cssText;
 }
 
+const DEFAULTS = {
+    ignoreKeys: ['original'],
+};
+function resolveObject(object) {
+    const foundCirc = {};
+    const clone = cloneDeep(object); // This object will be edited
+    const currentContext = []; // To maintain the context to be able to test for circular definitions
+    if (typeof object === 'object') {
+        return traverseObject({
+            slice: clone,
+            fullObj: clone,
+            currentContext,
+            foundCirc,
+        });
+    }
+    else {
+        throw new Error('Please pass an object in');
+    }
+}
+/**
+ * Recursively traverses an object (slice) to resolve and uses
+ * compileValue to replace any string references found within it
+ */
+function traverseObject({ slice, fullObj, currentContext, foundCirc, }) {
+    for (let key in slice) {
+        if (!has(slice, key)) {
+            continue;
+        }
+        const prop = slice[key];
+        // We want to check for ignoredKeys, this is to
+        // skip over attributes that should not be
+        // mutated, like a copy of the original property.
+        if (DEFAULTS.ignoreKeys && DEFAULTS.ignoreKeys.indexOf(key) !== -1) {
+            continue;
+        }
+        currentContext.push(key);
+        if (typeof prop === 'object') {
+            traverseObject({ currentContext, slice: prop, fullObj, foundCirc });
+        }
+        else {
+            if (typeof prop === 'string' && prop.indexOf('{') > -1) {
+                slice[key] = compileValue({
+                    value: prop,
+                    stack: [getName(currentContext)],
+                    foundCirc,
+                    fullObj,
+                });
+            }
+        }
+        currentContext.pop();
+    }
+    return fullObj;
+}
+/**
+ * Resolves references in a value, performing recursive lookups when references are nested.
+ * value: The string that may contain references (e.g., {color.border.light}) that need to be replaced
+ * stack: keeps track of the current chain of references to detect circular references
+ * foundCirc: stores any detected circular references
+ * fullObj: The full object where references are looked up, essentially the source of all values
+ */
+function compileValue({ value, stack, foundCirc, fullObj }) {
+    let toRet = value, ref;
+    const regex = new RegExp(REFERENCE_REGEX);
+    // Replace the reference inline, but don't replace the whole string because
+    // references can be part of the value such as "1px solid {color.border.light}"
+    value.replace(regex, function (match, variable) {
+        variable = variable.trim();
+        // Find what the value is referencing
+        const pathName = getPathFromName(variable);
+        const refHasValue = pathName[pathName.length - 1] === 'value';
+        stack.push(variable);
+        ref = resolveReference(pathName, fullObj);
+        // If the reference doesn't end in 'value'
+        // and
+        // the reference points to someplace that has a `value` attribute
+        // we should take the '.value' of the reference
+        // per the W3C draft spec where references do not have .value
+        // https://design-tokens.github.io/community-group/format/#aliases-references
+        if (!refHasValue && ref && has(ref, 'value')) {
+            ref = ref.value;
+        }
+        if (typeof ref !== 'undefined') {
+            if (typeof ref === 'string' || typeof ref === 'number') {
+                toRet = value.replace(match, ref);
+                // Recursive, therefore we can compute multi-layer variables like a = b, b = c, eventually a = c
+                if (usesReference(toRet)) {
+                    var reference = toRet.slice(1, -1);
+                    // Compare to found circular references
+                    if (has(foundCirc, reference)) ;
+                    else if (stack.indexOf(reference) !== -1) {
+                        // If the current stack already contains the current reference, we found a new circular reference
+                        // chop down only the circular part, save it to our circular reference info, and spit out an error
+                        // Get the position of the existing reference in the stack
+                        var stackIndexReference = stack.indexOf(reference);
+                        // Get the portion of the stack that starts at the circular reference and brings you through until the end
+                        var circStack = stack.slice(stackIndexReference);
+                        // For all the references in this list, add them to the list of references that end up in a circular reference
+                        circStack.forEach(function (key) {
+                            foundCirc[key] = true;
+                        });
+                        // Add our found circular reference to the end of the cycle
+                        circStack.push(reference);
+                    }
+                    else {
+                        toRet = compileValue({ value: toRet, stack, foundCirc, fullObj });
+                    }
+                }
+                // if evaluated value is a number and equal to the reference, we want to keep the type
+                if (typeof ref === 'number' && ref.toString() === toRet) {
+                    toRet = ref;
+                }
+            }
+            else {
+                // if evaluated value is not a string or number, we want to keep the type
+                toRet = ref;
+            }
+        }
+        else {
+            toRet = ref;
+        }
+        stack.pop(variable);
+        return toRet;
+    });
+    return toRet;
+}
+
 const darkModeTokens = {
     colors: {
         red: {
@@ -9204,6 +9456,7 @@ exports.changePassword = changePassword;
 exports.classNameModifier = classNameModifier;
 exports.classNameModifierByFlag = classNameModifierByFlag;
 exports.classNames = classNames;
+exports.cloneDeep = cloneDeep;
 exports.countryDialCodes = countryDialCodes;
 exports.createAuthenticatorMachine = createAuthenticatorMachine;
 exports.createComponentCSS = createComponentCSS;
@@ -9211,6 +9464,7 @@ exports.createComponentClasses = createComponentClasses;
 exports.createGlobalCSS = createGlobalCSS;
 exports.createTheme = createTheme;
 exports.cssNameTransform = cssNameTransform;
+exports.deepExtend = deepExtend;
 exports.defaultAuthHubHandler = defaultAuthHubHandler;
 exports.defaultDarkModeOverride = defaultDarkModeOverride;
 exports.defaultFormFieldOptions = defaultFormFieldOptions;
@@ -9230,8 +9484,10 @@ exports.getErrors = getErrors;
 exports.getFormDataFromEvent = getFormDataFromEvent;
 exports.getFormFields = getFormFields;
 exports.getLogger = getLogger;
+exports.getName = getName;
 exports.getNextServiceContextFacade = getNextServiceContextFacade;
 exports.getNextServiceFacade = getNextServiceFacade;
+exports.getPathFromName = getPathFromName;
 exports.getPrimaryAlias = getPrimaryAlias;
 exports.getSendEventAliases = getSendEventAliases;
 exports.getServiceContextFacade = getServiceContextFacade;
@@ -9262,6 +9518,8 @@ exports.noop = noop;
 exports.reactNativeDarkTokens = reactNativeDarkTokens;
 exports.reactNativeTokens = reactNativeTokens;
 exports.removeOrderKeys = removeOrderKeys;
+exports.resolveObject = resolveObject;
+exports.resolveReference = resolveReference;
 exports.runFieldValidators = runFieldValidators;
 exports.sanitizeNamespaceImport = sanitizeNamespaceImport;
 exports.setFormOrder = setFormOrder;
@@ -9275,3 +9533,4 @@ exports.templateJoin = templateJoin;
 exports.translate = translate;
 exports.translations = translations;
 exports.trimValues = trimValues;
+exports.usesReference = usesReference;

package/dist/styles/AIConversation.css

@@ -2,13 +2,18 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  flex: 1;
 }
 .amplify-ai-conversation__message {
-  --content-bg: transparent;
+  --internal-content-bg: ;
+  --internal-flex-direction: ;
+  --internal-content-padding: ;
+  --internal-body-align-items: ;
   display: flex;
-  flex-direction: var(--flex-direction);
-  gap: var(--amplify-space-small);
-  padding: var(--amplify-space-small);
+  flex-direction: var(--internal-flex-direction);
+  gap: var(--amplify-components-ai-conversation-message-gap);
+  padding-inline: var(--amplify-components-ai-conversation-message-padding-inline);
+  padding-block: var(--amplify-components-ai-conversation-message-padding-block);
 }
 .amplify-ai-conversation__message__list {
   display: flex;
@@ -19,89 +24,105 @@
 }
 .amplify-ai-conversation__message__sender {
   display: flex;
-  flex-direction: var(--flex-direction);
+  flex-direction: var(--internal-flex-direction);
   align-items: center;
-  height: var(--amplify-components-avatar-height);
-  gap: var(--amplify-space-small);
+  min-height: var(--amplify-components-avatar-height);
+  gap: var(--amplify-components-ai-conversation-message-sender-gap);
 }
 .amplify-ai-conversation__message__sender__username {
-  font-weight: bold;
+  color: var(--amplify-components-ai-conversation-message-sender-username-color);
+  font-size: var(--amplify-components-ai-conversation-message-sender-username-font-size);
+  font-weight: var(--amplify-components-ai-conversation-message-sender-username-font-weight);
 }
 .amplify-ai-conversation__message__sender__timestamp {
-  color: var(--amplify-colors-font-tertiary);
-  font-size: var(--amplify-font-sizes-small);
+  color: var(--amplify-components-ai-conversation-message-sender-timestamp-color);
+  font-size: var(--amplify-components-ai-conversation-message-sender-timestamp-font-size);
+  font-weight: var(--amplify-components-ai-conversation-message-sender-timestamp-font-weight);
 }
 .amplify-ai-conversation__message__body {
   display: flex;
   flex-direction: column;
-  align-items: var(--body-align-items);
-  gap: var(--amplify-space-xs);
+  align-items: var(--internal-body-align-items);
+  gap: var(--amplify-components-ai-conversation-message-body-gap);
 }
 .amplify-ai-conversation__message__content {
-  background-color: var(--content-bg);
+  background-color: var(--internal-content-bg);
   border-radius: var(--amplify-radii-medium);
-  padding: var(--content-padding);
+  padding: var(--internal-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;
+  --internal-content-bg: var(--internal-bg-color);
+  --internal-content-padding: var(--amplify-space-xxs)
+    var(--amplify-space-xs);
+  --internal-flex-direction: row-reverse;
+  --internal-body-align-items: flex-end;
 }
 .amplify-ai-conversation__message--user {
-  --bg-color: var(--amplify-colors-background-secondary);
+  --internal-bg-color: var(
+    --amplify-components-ai-conversation-message-user-background-color
+  );
 }
 .amplify-ai-conversation__message--assistant {
-  --bg-color: var(--amplify-colors-primary-10);
-  --flex-direction: row;
-  --body-align-items: flex-start;
+  --internal-bg-color: var(
+    --amplify-components-ai-conversation-message-assistant-background-color
+  );
+  --internal-flex-direction: row;
+  --internal-body-align-items: flex-start;
 }
 .amplify-ai-conversation__form {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: var(--amplify-space-small);
+  gap: var(--amplify-components-ai-conversation-form-gap);
+  padding: var(--amplify-components-ai-conversation-form-padding);
 }
 .amplify-ai-conversation__form__dropzone {
   text-align: initial;
   border: none;
-  padding: var(--amplify-space-xs);
+  padding: 0;
 }
 .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);
+  padding-block: var(--amplify-components-ai-conversation-attachment-padding-block);
+  padding-inline: var(--amplify-components-ai-conversation-attachment-padding-inline);
+  border-width: var(--amplify-components-ai-conversation-attachment-border-width);
+  border-style: solid;
+  border-color: var(--amplify-components-ai-conversation-attachment-border-color);
+  border-radius: var(--amplify-components-ai-conversation-attachment-border-radius);
+  gap: var(--amplify-components-ai-conversation-attachment-gap);
+  font-size: var(--amplify-components-ai-conversation-attachment-font-size);
 }
 .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);
+  gap: var(--amplify-components-ai-conversation-attachment-list-gap);
+  padding-block-start: var(--amplify-components-ai-conversation-attachment-padding-block-start);
 }
 .amplify-ai-conversation__attachment__image {
-  width: 1rem;
-  height: 1rem;
+  width: var(--amplify-components-ai-conversation-attachment-image-width);
+  height: var(--amplify-components-ai-conversation-attachment-image-height);
   -o-object-fit: cover;
      object-fit: cover;
 }
+.amplify-ai-conversation__attachment__name {
+  color: var(--amplify-components-ai-conversation-attachment-name-color);
+  font-size: var(--amplify-components-ai-conversation-attachment-name-font-size);
+  font-weight: var(--amplify-components-ai-conversation-attachment-name-font-weight);
+}
 .amplify-ai-conversation__attachment__size {
-  color: var(--amplify-colors-font-tertiary);
+  color: var(--amplify-components-ai-conversation-attachment-size-color);
+  font-size: var(--amplify-components-ai-conversation-attachment-size-font-size);
+  font-weight: var(--amplify-components-ai-conversation-attachment-size-font-weight);
 }
 .amplify-ai-conversation__attachment__remove {
-  padding: var(--amplify-space-xxs);
+  padding: var(--amplify-components-ai-conversation-attachment-remove-padding);
 }
 .amplify-ai-conversation__prompt {
   font-weight: normal;