@cloudscape-design/chat-components 1.0.80 → 1.0.82

package/avatar/index.d.ts

@@ -1,7 +1,3 @@
 import { AvatarProps } from "./interfaces";
 export type { AvatarProps };
-export default function Avatar({
-  color,
-  iconName,
-  ...props
-}: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export default function Avatar({ color, iconName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/avatar/index.js

@@ -1,18 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
-
-import CoreComponent from './internal-do-not-use-core';
-import { applyDisplayName } from '../internal/utils/apply-display-name';
-import { validateProps } from '@cloudscape-design/component-toolkit/internal';
-
-
-
-const Avatar = (props) => {
-    validateProps('Avatar', props, ["style"], {}, 'console');
-    return React.createElement(CoreComponent, props);
-};
-
-
-applyDisplayName(Avatar, 'Avatar');
-export default Avatar;
+import useBaseComponent from "../internal/base-component/use-base-component";
+import { applyDisplayName } from "../internal/utils/apply-display-name";
+import InternalAvatar from "./internal";
+export default function Avatar({ color = "default", iconName = "user-profile", ...props }) {
+    const baseComponentProps = useBaseComponent("Avatar", { props: { color, iconName } });
+    return _jsx(InternalAvatar, { color: color, iconName: iconName, ...props, ...baseComponentProps });
+}
+applyDisplayName(Avatar, "Avatar");
+//# sourceMappingURL=index.js.map

package/avatar/interfaces.d.ts

@@ -1,82 +1,81 @@
-/// <reference types="react" />
 import { IconProps } from "@cloudscape-design/components/icon";
 export interface AvatarProps {
-  /**
-   * Determines the color of the avatar.
-   * Use `gen-ai` for AI assistants and `default` otherwise.
-   */
-  color?: AvatarProps.Color;
-  /**
-   * The text content shown in the avatar's tooltip.
-   *
-   * When you use this property, make sure to include it in the `ariaLabel`.
-   */
-  tooltipText?: string;
-  /**
-   * The text content shown directly in the avatar's body.
-   * Can be 1 or 2 symbols long, every subsequent symbol is ignored.
-   * Use it to define initials that uniquely identify the avatar's owner.
-   */
-  initials?: string;
-  /**
-   * When set to true, a loading indicator is shown in avatar.
-   */
-  loading?: boolean;
-  /**
-   * Text to describe the avatar for assistive technology.
-   * When more than one avatar is used, provide a unique label for each.
-   * For example, "Avatar of John Doe" or "Avatar of generative AI assistant".
-   *
-   * If `tooltipText` is used make sure to include it in the `ariaLabel`.
-   */
-  ariaLabel: string;
-  /**
-   * Specifies the icon to be displayed as Avatar.
-   * Use `gen-ai` icon for AI assistants. By default `user-profile` icon is used.
-   *
-   * If you set both `iconName` and `initials`, `initials` will take precedence.
-   */
-  iconName?: IconProps.Name;
-  /**
-   * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon can't be an SVG.
-   * @deprecated Use `iconSvg` or `imgUrl` instead.
-   */
-  iconUrl?: string;
-  /**
-   * Specifies the SVG of a custom icon.
-   * Use this property if the icon you want isn't available.
-   */
-  iconSvg?: React.ReactNode;
-  /**
-   * Specifies the URL of a custom image. If you set both `iconUrl` and `imgUrl`, `imgUrl` will take precedence.
-   */
-  imgUrl?: string;
-  /**
-   * @awsuiSystem core
-   */
-
-  /**
-   * Defines the width and height of the avatar.
-   * This value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.
-   * The default and minimum width value is 28px.
-   */
-  width?: number;
+    /**
+     * Determines the color of the avatar.
+     * Use `gen-ai` for AI assistants and `default` otherwise.
+     */
+    color?: AvatarProps.Color;
+    /**
+     * The text content shown in the avatar's tooltip.
+     *
+     * When you use this property, make sure to include it in the `ariaLabel`.
+     */
+    tooltipText?: string;
+    /**
+     * The text content shown directly in the avatar's body.
+     * Can be 1 or 2 symbols long, every subsequent symbol is ignored.
+     * Use it to define initials that uniquely identify the avatar's owner.
+     */
+    initials?: string;
+    /**
+     * When set to true, a loading indicator is shown in avatar.
+     */
+    loading?: boolean;
+    /**
+     * Text to describe the avatar for assistive technology.
+     * When more than one avatar is used, provide a unique label for each.
+     * For example, "Avatar of John Doe" or "Avatar of generative AI assistant".
+     *
+     * If `tooltipText` is used make sure to include it in the `ariaLabel`.
+     */
+    ariaLabel: string;
+    /**
+     * Specifies the icon to be displayed as Avatar.
+     * Use `gen-ai` icon for AI assistants. By default `user-profile` icon is used.
+     *
+     * If you set both `iconName` and `initials`, `initials` will take precedence.
+     */
+    iconName?: IconProps.Name;
+    /**
+     * Specifies the URL of a custom icon. Use this property if the icon you want isn't available, and your custom icon can't be an SVG.
+     * @deprecated Use `iconSvg` or `imgUrl` instead.
+     */
+    iconUrl?: string;
+    /**
+     * Specifies the SVG of a custom icon.
+     * Use this property if the icon you want isn't available.
+     */
+    iconSvg?: React.ReactNode;
+    /**
+     * Specifies the URL of a custom image. If you set both `iconUrl` and `imgUrl`, `imgUrl` will take precedence.
+     */
+    imgUrl?: string;
+    /**
+     * @awsuiSystem core
+     */
+    style?: AvatarProps.Style;
+    /**
+     * Defines the width and height of the avatar.
+     * This value corresponds to the `width` CSS-property and will center and crop images using `object-fit: cover`.
+     * The default and minimum width value is 28px.
+     */
+    width?: number;
 }
 export declare namespace AvatarProps {
-  type Color = "default" | "gen-ai";
-  interface Style {
-    root?: {
-      background?: string;
-      borderColor?: string;
-      borderRadius?: string;
-      borderWidth?: string;
-      boxShadow?: string;
-      color?: string;
-      focusRing?: {
-        borderColor?: string;
-        borderRadius?: string;
-        borderWidth?: string;
-      };
-    };
-  }
-}
+    type Color = "default" | "gen-ai";
+    interface Style {
+        root?: {
+            background?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            borderWidth?: string;
+            boxShadow?: string;
+            color?: string;
+            focusRing?: {
+                borderColor?: string;
+                borderRadius?: string;
+                borderWidth?: string;
+            };
+        };
+    }
+}

package/avatar/internal.d.ts

@@ -1,18 +1,5 @@
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import { AvatarProps } from "./interfaces.js";
-export interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {}
-export default function InternalAvatar({
-  color,
-  tooltipText,
-  initials,
-  loading,
-  ariaLabel,
-  iconName,
-  iconSvg,
-  iconUrl,
-  imgUrl,
-  style,
-  width,
-  __internalRootRef,
-  ...rest
-}: InternalAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {
+}
+export default function InternalAvatar({ color, tooltipText, initials, loading, ariaLabel, iconName, iconSvg, iconUrl, imgUrl, style, width, __internalRootRef, ...rest }: InternalAvatarProps): import("react/jsx-runtime").JSX.Element;

package/avatar/internal.js

@@ -52,8 +52,6 @@ export default function InternalAvatar({ color, tooltipText, initials, loading =
             setShowTooltip(false);
         },
     };
-    return (_jsxs("div", { ...getDataAttributes(rest), ref: mergedRef, tabIndex: 0, className: clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials }), role: "img", "aria-label": ariaLabel, ...tooltipAttributes, style: { [customCssProps.avatarSize]: `${computedSize}px`, ...getRootStyles(style) }, children: [showTooltip && tooltipText && (_jsx(Tooltip, { className: styles.tooltip, value: tooltipText, trackRef: handleRef, 
-                // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages
-                contentAttributes: { onPointerDown: () => setShowTooltip(false) } })), _jsx("div", { className: styles.content, "aria-hidden": "true", style: getContentStyles(style), children: _jsx(AvatarContent, { color: color, ariaLabel: ariaLabel, initials: initials, loading: loading, iconName: iconName, iconSvg: iconSvg, iconUrl: iconUrl, imgUrl: imgUrl, style: style, width: computedSize }) })] }));
+    return (_jsxs("div", { ...getDataAttributes(rest), ref: mergedRef, tabIndex: 0, className: clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials }), role: "img", "aria-label": ariaLabel, ...tooltipAttributes, style: { [customCssProps.avatarSize]: `${computedSize}px`, ...getRootStyles(style) }, children: [showTooltip && tooltipText && _jsx(Tooltip, { className: styles.tooltip, value: tooltipText, trackRef: handleRef }), _jsx("div", { className: styles.content, "aria-hidden": "true", style: getContentStyles(style), children: _jsx(AvatarContent, { color: color, ariaLabel: ariaLabel, initials: initials, loading: loading, iconName: iconName, iconSvg: iconSvg, iconUrl: iconUrl, imgUrl: imgUrl, style: style, width: computedSize }) })] }));
 }
 //# sourceMappingURL=internal.js.map

package/avatar/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/avatar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs, warnOnce } from \"@cloudscape-design/component-toolkit/internal\";\nimport Icon from \"@cloudscape-design/components/icon\";\nimport Tooltip from \"@cloudscape-design/components/internal/tooltip-do-not-use\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport customCssProps from \"../internal/generated/custom-css-properties\";\nimport { AvatarProps } from \"./interfaces.js\";\nimport LoadingDots from \"./loading-dots\";\nimport { getContentStyles, getImageStyles, getRootStyles } from \"./style\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {}\n\nconst AvatarContent = ({\n  color,\n  loading,\n  initials,\n  iconName,\n  iconSvg,\n  iconUrl,\n  ariaLabel,\n  width,\n  imgUrl,\n  style,\n}: AvatarProps) => {\n  if (loading) {\n    return <LoadingDots color={color} width={width} style={style} />;\n  }\n\n  if (imgUrl) {\n    return <img className={styles.image} src={imgUrl} style={getImageStyles(style)} />;\n  }\n\n  if (initials) {\n    const letters = initials.length > 2 ? initials.slice(0, 2) : initials;\n\n    if (initials.length > 2) {\n      warnOnce(\"Avatar\", `\"initials\" is longer than 2 characters. Only the first two characters are shown.`);\n    }\n\n    return <span className={styles.initials}>{letters}</span>;\n  }\n\n  return <Icon name={iconName} svg={iconSvg} url={iconUrl} alt={ariaLabel} size=\"inherit\" />;\n};\n\nexport default function InternalAvatar({\n  color,\n  tooltipText,\n  initials,\n  loading = false,\n  ariaLabel,\n  iconName,\n  iconSvg,\n  iconUrl,\n  imgUrl,\n  style,\n  width = 28,\n  __internalRootRef = null,\n  ...rest\n}: InternalAvatarProps) {\n  const handleRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const mergedRef = useMergeRefs(handleRef, __internalRootRef);\n  const computedSize = width < 28 ? 28 : width;\n\n  const tooltipAttributes = {\n    onFocus: () => {\n      setShowTooltip(true);\n    },\n    onBlur: () => {\n      setShowTooltip(false);\n    },\n    onMouseEnter: () => {\n      setShowTooltip(true);\n    },\n    onMouseLeave: () => {\n      setShowTooltip(false);\n    },\n    onTouchStart: () => {\n      setShowTooltip(true);\n    },\n    onTouchEnd: () => {\n      setShowTooltip(false);\n    },\n  };\n\n  return (\n    <div\n      {...getDataAttributes(rest)}\n      ref={mergedRef}\n      tabIndex={0}\n      className={clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials })}\n      role=\"img\"\n      aria-label={ariaLabel}\n      {...tooltipAttributes}\n      style={{ [customCssProps.avatarSize]: `${computedSize}px`, ...getRootStyles(style) }}\n    >\n      {showTooltip && tooltipText && (\n        <Tooltip\n          className={styles.tooltip}\n          value={tooltipText}\n          trackRef={handleRef}\n          // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages\n          contentAttributes={{ onPointerDown: () => setShowTooltip(false) }}\n        />\n      )}\n\n      {/* aria-hidden is added so that screen readers focus only the parent div */}\n      {/* when it is not hidden, it becomes unstable in JAWS */}\n      <div className={styles.content} aria-hidden=\"true\" style={getContentStyles(style)}>\n        <AvatarContent\n          color={color}\n          ariaLabel={ariaLabel}\n          initials={initials}\n          loading={loading}\n          iconName={iconName}\n          iconSvg={iconSvg}\n          iconUrl={iconUrl}\n          imgUrl={imgUrl}\n          style={style}\n          width={computedSize}\n        />\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/avatar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useMergeRefs, warnOnce } from \"@cloudscape-design/component-toolkit/internal\";\nimport Icon from \"@cloudscape-design/components/icon\";\nimport Tooltip from \"@cloudscape-design/components/internal/tooltip-do-not-use\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport customCssProps from \"../internal/generated/custom-css-properties\";\nimport { AvatarProps } from \"./interfaces.js\";\nimport LoadingDots from \"./loading-dots\";\nimport { getContentStyles, getImageStyles, getRootStyles } from \"./style\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface InternalAvatarProps extends AvatarProps, InternalBaseComponentProps {}\n\nconst AvatarContent = ({\n  color,\n  loading,\n  initials,\n  iconName,\n  iconSvg,\n  iconUrl,\n  ariaLabel,\n  width,\n  imgUrl,\n  style,\n}: AvatarProps) => {\n  if (loading) {\n    return <LoadingDots color={color} width={width} style={style} />;\n  }\n\n  if (imgUrl) {\n    return <img className={styles.image} src={imgUrl} style={getImageStyles(style)} />;\n  }\n\n  if (initials) {\n    const letters = initials.length > 2 ? initials.slice(0, 2) : initials;\n\n    if (initials.length > 2) {\n      warnOnce(\"Avatar\", `\"initials\" is longer than 2 characters. Only the first two characters are shown.`);\n    }\n\n    return <span className={styles.initials}>{letters}</span>;\n  }\n\n  return <Icon name={iconName} svg={iconSvg} url={iconUrl} alt={ariaLabel} size=\"inherit\" />;\n};\n\nexport default function InternalAvatar({\n  color,\n  tooltipText,\n  initials,\n  loading = false,\n  ariaLabel,\n  iconName,\n  iconSvg,\n  iconUrl,\n  imgUrl,\n  style,\n  width = 28,\n  __internalRootRef = null,\n  ...rest\n}: InternalAvatarProps) {\n  const handleRef = useRef<HTMLDivElement>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n\n  const mergedRef = useMergeRefs(handleRef, __internalRootRef);\n  const computedSize = width < 28 ? 28 : width;\n\n  const tooltipAttributes = {\n    onFocus: () => {\n      setShowTooltip(true);\n    },\n    onBlur: () => {\n      setShowTooltip(false);\n    },\n    onMouseEnter: () => {\n      setShowTooltip(true);\n    },\n    onMouseLeave: () => {\n      setShowTooltip(false);\n    },\n    onTouchStart: () => {\n      setShowTooltip(true);\n    },\n    onTouchEnd: () => {\n      setShowTooltip(false);\n    },\n  };\n\n  return (\n    <div\n      {...getDataAttributes(rest)}\n      ref={mergedRef}\n      tabIndex={0}\n      className={clsx(styles.root, styles[`avatar-color-${color}`], { [styles.initials]: initials })}\n      role=\"img\"\n      aria-label={ariaLabel}\n      {...tooltipAttributes}\n      style={{ [customCssProps.avatarSize]: `${computedSize}px`, ...getRootStyles(style) }}\n    >\n      {showTooltip && tooltipText && <Tooltip className={styles.tooltip} value={tooltipText} trackRef={handleRef} />}\n\n      {/* aria-hidden is added so that screen readers focus only the parent div */}\n      {/* when it is not hidden, it becomes unstable in JAWS */}\n      <div className={styles.content} aria-hidden=\"true\" style={getContentStyles(style)}>\n        <AvatarContent\n          color={color}\n          ariaLabel={ariaLabel}\n          initials={initials}\n          loading={loading}\n          iconName={iconName}\n          iconSvg={iconSvg}\n          iconUrl={iconUrl}\n          imgUrl={imgUrl}\n          style={style}\n          width={computedSize}\n        />\n      </div>\n    </div>\n  );\n}\n"]}

package/avatar/loading-dots/index.d.ts

@@ -1,12 +1,8 @@
 import { AvatarProps } from "../interfaces.js";
 interface LoadingDotsProps {
-  color?: string;
-  style?: AvatarProps.Style;
-  width?: number;
+    color?: string;
+    style?: AvatarProps.Style;
+    width?: number;
 }
-export default function LoadingDots({
-  color,
-  width,
-  style
-}: LoadingDotsProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function LoadingDots({ color, width, style }: LoadingDotsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/avatar/style.d.ts

@@ -2,4 +2,4 @@ import { AvatarProps } from "./interfaces";
 export declare function getRootStyles(style: AvatarProps.Style | undefined): {};
 export declare function getContentStyles(style: AvatarProps.Style | undefined): {};
 export declare function getImageStyles(style: AvatarProps.Style | undefined): {};
-export declare function getLoadingDotsStyle(style: AvatarProps.Style | undefined): {};
+export declare function getLoadingDotsStyle(style: AvatarProps.Style | undefined): {};

package/chat-bubble/index.d.ts

@@ -1,8 +1,3 @@
 import { ChatBubbleProps } from "./interfaces";
 export type { ChatBubbleProps };
-export default function ChatBubble({
-  type,
-  hideAvatar,
-  showLoadingBar,
-  ...props
-}: ChatBubbleProps): import("react/jsx-runtime").JSX.Element;
+export default function ChatBubble({ type, hideAvatar, showLoadingBar, ...props }: ChatBubbleProps): import("react/jsx-runtime").JSX.Element;

package/chat-bubble/interfaces.d.ts

@@ -1,29 +1,50 @@
-/// <reference types="react" />
 export interface ChatBubbleProps {
-  /** Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/). */
-  avatar: React.ReactNode;
-  /** Defines the type of the chat bubble and sets its color accordingly.  */
-  type: ChatBubbleProps.Type;
-  /** Content of the chat bubble */
-  children: React.ReactNode;
-  /** Actions slot of the chat bubble, placed at the footer. Use [button group](/components/button-group/). */
-  actions?: React.ReactNode;
-  /**
-   * Adds a loading bar to the bottom of the chat bubble. This property should only be used for Generative AI loading state.
-   * If avatar is being used, set its `loading` state to true.
-   */
-  showLoadingBar?: boolean;
-  /**
-   * Adds aria-label to the chat bubble container. Use this to provide a unique accessible name for each chat bubble on the page.
-   * For example, "John Doe at 3:42:10am".
-   */
-  ariaLabel: string;
-  /**
-   * Hides the avatar while preserving its space.
-   * Useful for when there are multiple consecutive messages coming from the same author.
-   */
-  hideAvatar?: boolean;
+    /** Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/). */
+    avatar: React.ReactNode;
+    /** Defines the type of the chat bubble and sets its color accordingly.  */
+    type: ChatBubbleProps.Type;
+    /** Content of the chat bubble */
+    children: React.ReactNode;
+    /** Actions slot of the chat bubble, placed at the footer. Use [button group](/components/button-group/). */
+    actions?: React.ReactNode;
+    /**
+     * Adds a loading bar to the bottom of the chat bubble. This property should only be used for Generative AI loading state.
+     * If avatar is being used, set its `loading` state to true.
+     */
+    showLoadingBar?: boolean;
+    /**
+     * Adds aria-label to the chat bubble container. Use this to provide a unique accessible name for each chat bubble on the page.
+     * For example, "John Doe at 3:42:10am".
+     */
+    ariaLabel: string;
+    /**
+     * Hides the avatar while preserving its space.
+     * Useful for when there are multiple consecutive messages coming from the same author.
+     */
+    hideAvatar?: boolean;
+    /**
+     * @awsuiSystem core
+     */
+    style?: ChatBubbleProps.Style;
 }
 export declare namespace ChatBubbleProps {
-  type Type = "incoming" | "outgoing";
-}
+    type Type = "incoming" | "outgoing";
+    interface Style {
+        root?: {
+            columnGap?: string;
+        };
+        bubble?: {
+            background?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            borderWidth?: string;
+            boxShadow?: string;
+            color?: string;
+            fontSize?: string;
+            fontWeight?: string;
+            rowGap?: string;
+            paddingBlock?: string;
+            paddingInline?: string;
+        };
+    }
+}

package/chat-bubble/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/chat-bubble/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ChatBubbleProps {\n  /** Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/). */\n  avatar: React.ReactNode;\n\n  /** Defines the type of the chat bubble and sets its color accordingly.  */\n  type: ChatBubbleProps.Type;\n\n  /** Content of the chat bubble */\n  children: React.ReactNode;\n\n  /** Actions slot of the chat bubble, placed at the footer. Use [button group](/components/button-group/). */\n  actions?: React.ReactNode;\n\n  /**\n   * Adds a loading bar to the bottom of the chat bubble. This property should only be used for Generative AI loading state.\n   * If avatar is being used, set its `loading` state to true.\n   */\n  showLoadingBar?: boolean;\n\n  /**\n   * Adds aria-label to the chat bubble container. Use this to provide a unique accessible name for each chat bubble on the page.\n   * For example, \"John Doe at 3:42:10am\".\n   */\n  ariaLabel: string;\n\n  /**\n   * Hides the avatar while preserving its space.\n   * Useful for when there are multiple consecutive messages coming from the same author.\n   */\n  hideAvatar?: boolean;\n}\n\nexport namespace ChatBubbleProps {\n  export type Type = \"incoming\" | \"outgoing\";\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/chat-bubble/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface ChatBubbleProps {\n  /** Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/). */\n  avatar: React.ReactNode;\n\n  /** Defines the type of the chat bubble and sets its color accordingly.  */\n  type: ChatBubbleProps.Type;\n\n  /** Content of the chat bubble */\n  children: React.ReactNode;\n\n  /** Actions slot of the chat bubble, placed at the footer. Use [button group](/components/button-group/). */\n  actions?: React.ReactNode;\n\n  /**\n   * Adds a loading bar to the bottom of the chat bubble. This property should only be used for Generative AI loading state.\n   * If avatar is being used, set its `loading` state to true.\n   */\n  showLoadingBar?: boolean;\n\n  /**\n   * Adds aria-label to the chat bubble container. Use this to provide a unique accessible name for each chat bubble on the page.\n   * For example, \"John Doe at 3:42:10am\".\n   */\n  ariaLabel: string;\n\n  /**\n   * Hides the avatar while preserving its space.\n   * Useful for when there are multiple consecutive messages coming from the same author.\n   */\n  hideAvatar?: boolean;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: ChatBubbleProps.Style;\n}\n\nexport namespace ChatBubbleProps {\n  export type Type = \"incoming\" | \"outgoing\";\n  export interface Style {\n    root?: {\n      columnGap?: string;\n    };\n    bubble?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: string;\n      color?: string;\n      fontSize?: string;\n      fontWeight?: string;\n      rowGap?: string;\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n  }\n}\n"]}

package/chat-bubble/internal.d.ts

@@ -1,14 +1,5 @@
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import { ChatBubbleProps } from "./interfaces.js";
-export interface InternalChatBubbleProps extends ChatBubbleProps, InternalBaseComponentProps {}
-export default function InternalChatBubble({
-  type,
-  children,
-  avatar,
-  actions,
-  showLoadingBar,
-  hideAvatar,
-  ariaLabel,
-  __internalRootRef,
-  ...rest
-}: InternalChatBubbleProps): import("react/jsx-runtime").JSX.Element;
+export interface InternalChatBubbleProps extends ChatBubbleProps, InternalBaseComponentProps {
+}
+export default function InternalChatBubble({ type, children, avatar, actions, showLoadingBar, hideAvatar, ariaLabel, style, __internalRootRef, ...rest }: InternalChatBubbleProps): import("react/jsx-runtime").JSX.Element;

package/chat-bubble/internal.js

@@ -5,8 +5,9 @@ import { useEffect, useRef } from "react";
 import clsx from "clsx";
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { InternalLoadingBar } from "../loading-bar/internal";
+import { getBubbleStyle, getChatBubbleRootStyle } from "./style";
 import styles from "./styles.css.js";
-export default function InternalChatBubble({ type, children, avatar, actions, showLoadingBar, hideAvatar = false, ariaLabel, __internalRootRef = null, ...rest }) {
+export default function InternalChatBubble({ type, children, avatar, actions, showLoadingBar, hideAvatar = false, ariaLabel, style, __internalRootRef = null, ...rest }) {
     const avatarRef = useRef(null);
     useEffect(() => {
         // We have to do this because `inert` isn't properly supported until
@@ -18,8 +19,6 @@ export default function InternalChatBubble({ type, children, avatar, actions, sh
             avatarRef.current.inert = hideAvatar;
         }
     }, [hideAvatar]);
-    return (_jsxs("div", { className: styles.root, ...getDataAttributes(rest), ref: __internalRootRef, role: "group", "aria-label": ariaLabel, children: [avatar && (_jsx("div", { ref: avatarRef, className: clsx(styles.avatar, hideAvatar && styles.hide), children: avatar })), _jsxs("div", { className: clsx(styles["message-area"], styles[`chat-bubble-type-${type}`], {
-                    [styles["with-loading-bar"]]: showLoadingBar,
-                }), children: [_jsx("div", { className: styles.content, children: children }), actions && _jsx("div", { className: styles.actions, children: actions }), showLoadingBar && _jsx(InternalLoadingBar, { variant: "gen-ai-masked" })] })] }));
+    return (_jsxs("div", { className: styles.root, ...getDataAttributes(rest), ref: __internalRootRef, role: "group", "aria-label": ariaLabel, style: getChatBubbleRootStyle(style), children: [avatar && (_jsx("div", { ref: avatarRef, className: clsx(styles.avatar, hideAvatar && styles.hide), children: avatar })), _jsxs("div", { className: clsx(styles["message-area"], styles[`chat-bubble-type-${type}`]), style: getBubbleStyle(style), children: [_jsx("div", { className: styles.content, children: children }), actions && _jsx("div", { className: styles.actions, children: actions }), showLoadingBar && (_jsx("div", { className: styles["loading-bar-wrapper"], children: _jsx(InternalLoadingBar, { variant: "gen-ai-masked" }) }))] })] }));
 }
 //# sourceMappingURL=internal.js.map

package/chat-bubble/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/chat-bubble/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAEnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,iBAAiB,GAAG,IAAI,EACxB,GAAG,IAAI,EACiB;IACxB,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,oEAAoE;QACpE,yEAAyE;QACzE,qEAAqE;QACrE,mEAAmE;QACnE,iDAAiD;QACjD,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,eACE,SAAS,EAAE,MAAM,CAAC,IAAI,KAClB,iBAAiB,CAAC,IAAI,CAAC,EAC3B,GAAG,EAAE,iBAAiB,EACtB,IAAI,EAAC,OAAO,gBACA,SAAS,aAEpB,MAAM,IAAI,CACT,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC,YAC3E,MAAM,GACH,CACP,EAED,eACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,oBAAoB,IAAI,EAAE,CAAC,EAAE;oBAC1E,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAAE,cAAc;iBAC7C,CAAC,aAEF,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,QAAQ,GAAO,EAE/C,OAAO,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAO,EAE1D,cAAc,IAAI,KAAC,kBAAkB,IAAC,OAAO,EAAC,eAAe,GAAG,IAC7D,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { InternalLoadingBar } from \"../loading-bar/internal\";\nimport { ChatBubbleProps } from \"./interfaces.js\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface InternalChatBubbleProps extends ChatBubbleProps, InternalBaseComponentProps {}\n\nexport default function InternalChatBubble({\n  type,\n  children,\n  avatar,\n  actions,\n  showLoadingBar,\n  hideAvatar = false,\n  ariaLabel,\n  __internalRootRef = null,\n  ...rest\n}: InternalChatBubbleProps) {\n  const avatarRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    // We have to do this because `inert` isn't properly supported until\n    // React 19 and this seems much more maintainable than version detection.\n    // `inert` is better than `hidden` because it also blocks pointer and\n    // focus events as well as hiding the contents from screen readers.\n    // https://github.com/facebook/react/issues/17157\n    if (avatarRef.current) {\n      avatarRef.current.inert = hideAvatar;\n    }\n  }, [hideAvatar]);\n\n  return (\n    <div\n      className={styles.root}\n      {...getDataAttributes(rest)}\n      ref={__internalRootRef}\n      role=\"group\"\n      aria-label={ariaLabel}\n    >\n      {avatar && (\n        <div ref={avatarRef} className={clsx(styles.avatar, hideAvatar && styles.hide)}>\n          {avatar}\n        </div>\n      )}\n\n      <div\n        className={clsx(styles[\"message-area\"], styles[`chat-bubble-type-${type}`], {\n          [styles[\"with-loading-bar\"]]: showLoadingBar,\n        })}\n      >\n        <div className={styles.content}>{children}</div>\n\n        {actions && <div className={styles.actions}>{actions}</div>}\n\n        {showLoadingBar && <InternalLoadingBar variant=\"gen-ai-masked\" />}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/chat-bubble/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAEnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEjE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,cAAc,EACd,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,iBAAiB,GAAG,IAAI,EACxB,GAAG,IAAI,EACiB;IACxB,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,oEAAoE;QACpE,yEAAyE;QACzE,qEAAqE;QACrE,mEAAmE;QACnE,iDAAiD;QACjD,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC;SACtC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,eACE,SAAS,EAAE,MAAM,CAAC,IAAI,KAClB,iBAAiB,CAAC,IAAI,CAAC,EAC3B,GAAG,EAAE,iBAAiB,EACtB,IAAI,EAAC,OAAO,gBACA,SAAS,EACrB,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,aAEnC,MAAM,IAAI,CACT,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC,YAC3E,MAAM,GACH,CACP,EAED,eAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,oBAAoB,IAAI,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,aAC5G,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,QAAQ,GAAO,EAC/C,OAAO,IAAI,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAO,EAC1D,cAAc,IAAI,CACjB,cAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAC3C,KAAC,kBAAkB,IAAC,OAAO,EAAC,eAAe,GAAG,GAC1C,CACP,IACG,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport { InternalLoadingBar } from \"../loading-bar/internal\";\nimport { ChatBubbleProps } from \"./interfaces.js\";\nimport { getBubbleStyle, getChatBubbleRootStyle } from \"./style\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface InternalChatBubbleProps extends ChatBubbleProps, InternalBaseComponentProps {}\n\nexport default function InternalChatBubble({\n  type,\n  children,\n  avatar,\n  actions,\n  showLoadingBar,\n  hideAvatar = false,\n  ariaLabel,\n  style,\n  __internalRootRef = null,\n  ...rest\n}: InternalChatBubbleProps) {\n  const avatarRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    // We have to do this because `inert` isn't properly supported until\n    // React 19 and this seems much more maintainable than version detection.\n    // `inert` is better than `hidden` because it also blocks pointer and\n    // focus events as well as hiding the contents from screen readers.\n    // https://github.com/facebook/react/issues/17157\n    if (avatarRef.current) {\n      avatarRef.current.inert = hideAvatar;\n    }\n  }, [hideAvatar]);\n\n  return (\n    <div\n      className={styles.root}\n      {...getDataAttributes(rest)}\n      ref={__internalRootRef}\n      role=\"group\"\n      aria-label={ariaLabel}\n      style={getChatBubbleRootStyle(style)}\n    >\n      {avatar && (\n        <div ref={avatarRef} className={clsx(styles.avatar, hideAvatar && styles.hide)}>\n          {avatar}\n        </div>\n      )}\n\n      <div className={clsx(styles[\"message-area\"], styles[`chat-bubble-type-${type}`])} style={getBubbleStyle(style)}>\n        <div className={styles.content}>{children}</div>\n        {actions && <div className={styles.actions}>{actions}</div>}\n        {showLoadingBar && (\n          <div className={styles[\"loading-bar-wrapper\"]}>\n            <InternalLoadingBar variant=\"gen-ai-masked\" />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/chat-bubble/style.d.ts

@@ -0,0 +1,33 @@
+import { ChatBubbleProps } from "./interfaces";
+export declare function getChatBubbleRootStyle(style: ChatBubbleProps.Style | undefined): {
+    columnGap?: undefined;
+} | {
+    columnGap: string | undefined;
+};
+export declare function getBubbleStyle(style: ChatBubbleProps.Style | undefined): {
+    background?: undefined;
+    borderColor?: undefined;
+    borderRadius?: undefined;
+    borderStyle?: undefined;
+    borderWidth?: undefined;
+    boxShadow?: undefined;
+    color?: undefined;
+    fontSize?: undefined;
+    fontWeight?: undefined;
+    paddingBlock?: undefined;
+    paddingInline?: undefined;
+    rowGap?: undefined;
+} | {
+    background: string | undefined;
+    borderColor: string | undefined;
+    borderRadius: string | undefined;
+    borderStyle: string | undefined;
+    borderWidth: string | undefined;
+    boxShadow: string | undefined;
+    color: string | undefined;
+    fontSize: string | undefined;
+    fontWeight: string | undefined;
+    paddingBlock: string | undefined;
+    paddingInline: string | undefined;
+    rowGap: string | undefined;
+};

package/chat-bubble/style.js

@@ -0,0 +1,33 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from "../internal/environment";
+export function getChatBubbleRootStyle(style) {
+    var _a;
+    if (SYSTEM !== "core") {
+        return {};
+    }
+    return {
+        columnGap: (_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.columnGap,
+    };
+}
+export function getBubbleStyle(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    if (SYSTEM !== "core") {
+        return {};
+    }
+    return {
+        background: (_a = style === null || style === void 0 ? void 0 : style.bubble) === null || _a === void 0 ? void 0 : _a.background,
+        borderColor: (_b = style === null || style === void 0 ? void 0 : style.bubble) === null || _b === void 0 ? void 0 : _b.borderColor,
+        borderRadius: (_c = style === null || style === void 0 ? void 0 : style.bubble) === null || _c === void 0 ? void 0 : _c.borderRadius,
+        borderStyle: ((_d = style === null || style === void 0 ? void 0 : style.bubble) === null || _d === void 0 ? void 0 : _d.borderWidth) ? "solid" : undefined,
+        borderWidth: (_e = style === null || style === void 0 ? void 0 : style.bubble) === null || _e === void 0 ? void 0 : _e.borderWidth,
+        boxShadow: (_f = style === null || style === void 0 ? void 0 : style.bubble) === null || _f === void 0 ? void 0 : _f.boxShadow,
+        color: (_g = style === null || style === void 0 ? void 0 : style.bubble) === null || _g === void 0 ? void 0 : _g.color,
+        fontSize: (_h = style === null || style === void 0 ? void 0 : style.bubble) === null || _h === void 0 ? void 0 : _h.fontSize,
+        fontWeight: (_j = style === null || style === void 0 ? void 0 : style.bubble) === null || _j === void 0 ? void 0 : _j.fontWeight,
+        paddingBlock: (_k = style === null || style === void 0 ? void 0 : style.bubble) === null || _k === void 0 ? void 0 : _k.paddingBlock,
+        paddingInline: (_l = style === null || style === void 0 ? void 0 : style.bubble) === null || _l === void 0 ? void 0 : _l.paddingInline,
+        rowGap: (_m = style === null || style === void 0 ? void 0 : style.bubble) === null || _m === void 0 ? void 0 : _m.rowGap,
+    };
+}
+//# sourceMappingURL=style.js.map

package/chat-bubble/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/chat-bubble/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGjD,MAAM,UAAU,sBAAsB,CAAC,KAAwC;;IAC7E,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,SAAS,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,SAAS;KAClC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAwC;;IACrE,IAAI,MAAM,KAAK,MAAM,EAAE;QACrB,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,UAAU,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,UAAU;QACrC,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW;QACvC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,YAAY;QACzC,WAAW,EAAE,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW,EAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;QAC7D,WAAW,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,WAAW;QACvC,SAAS,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,SAAS;QACnC,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK;QAC3B,QAAQ,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,QAAQ;QACjC,UAAU,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,UAAU;QACrC,YAAY,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,YAAY;QACzC,aAAa,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,aAAa;QAC3C,MAAM,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,MAAM;KAC9B,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from \"../internal/environment\";\nimport { ChatBubbleProps } from \"./interfaces\";\n\nexport function getChatBubbleRootStyle(style: ChatBubbleProps.Style | undefined) {\n  if (SYSTEM !== \"core\") {\n    return {};\n  }\n\n  return {\n    columnGap: style?.root?.columnGap,\n  };\n}\n\nexport function getBubbleStyle(style: ChatBubbleProps.Style | undefined) {\n  if (SYSTEM !== \"core\") {\n    return {};\n  }\n\n  return {\n    background: style?.bubble?.background,\n    borderColor: style?.bubble?.borderColor,\n    borderRadius: style?.bubble?.borderRadius,\n    borderStyle: style?.bubble?.borderWidth ? \"solid\" : undefined,\n    borderWidth: style?.bubble?.borderWidth,\n    boxShadow: style?.bubble?.boxShadow,\n    color: style?.bubble?.color,\n    fontSize: style?.bubble?.fontSize,\n    fontWeight: style?.bubble?.fontWeight,\n    paddingBlock: style?.bubble?.paddingBlock,\n    paddingInline: style?.bubble?.paddingInline,\n    rowGap: style?.bubble?.rowGap,\n  };\n}\n"]}

package/chat-bubble/styles.css.js

@@ -1,14 +1,14 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_cdujn_4xote_11",
-  "message-area": "awsui_message-area_cdujn_4xote_45",
-  "with-loading-bar": "awsui_with-loading-bar_cdujn_4xote_57",
-  "chat-bubble-type-outgoing": "awsui_chat-bubble-type-outgoing_cdujn_4xote_60",
-  "chat-bubble-type-incoming": "awsui_chat-bubble-type-incoming_cdujn_4xote_64",
-  "avatar": "awsui_avatar_cdujn_4xote_69",
-  "hide": "awsui_hide_cdujn_4xote_72",
-  "content": "awsui_content_cdujn_4xote_76",
-  "actions": "awsui_actions_cdujn_4xote_80"
+  "root": "awsui_root_cdujn_dsdl4_11",
+  "message-area": "awsui_message-area_cdujn_dsdl4_45",
+  "chat-bubble-type-outgoing": "awsui_chat-bubble-type-outgoing_cdujn_dsdl4_58",
+  "chat-bubble-type-incoming": "awsui_chat-bubble-type-incoming_cdujn_dsdl4_62",
+  "loading-bar-wrapper": "awsui_loading-bar-wrapper_cdujn_dsdl4_67",
+  "avatar": "awsui_avatar_cdujn_dsdl4_74",
+  "hide": "awsui_hide_cdujn_dsdl4_77",
+  "content": "awsui_content_cdujn_dsdl4_81",
+  "actions": "awsui_actions_cdujn_dsdl4_85"
 };
   

package/chat-bubble/styles.scoped.css

@@ -8,7 +8,7 @@
 */
 /* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
-.awsui_root_cdujn_4xote_11:not(#\9) {
+.awsui_root_cdujn_dsdl4_11:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -42,7 +42,8 @@
   line-height: var(--line-height-heading-m-uoaqdh, 22px);
 }
 
-.awsui_message-area_cdujn_4xote_45:not(#\9) {
+.awsui_message-area_cdujn_dsdl4_45:not(#\9) {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--space-scaled-s-8ozaad, 12px);
@@ -54,29 +55,33 @@
   border-end-start-radius: var(--border-radius-chat-bubble-haafsg, 8px);
   border-end-end-radius: var(--border-radius-chat-bubble-haafsg, 8px);
 }
-.awsui_message-area_cdujn_4xote_45.awsui_with-loading-bar_cdujn_4xote_57:not(#\9) {
-  padding-block-end: 0;
-}
-.awsui_message-area_cdujn_4xote_45.awsui_chat-bubble-type-outgoing_cdujn_4xote_60:not(#\9) {
+.awsui_message-area_cdujn_dsdl4_45.awsui_chat-bubble-type-outgoing_cdujn_dsdl4_58:not(#\9) {
   color: var(--color-text-chat-bubble-outgoing-f3r63s, #0f141a);
   background-color: var(--color-background-chat-bubble-outgoing-ay6nj3, transparent);
 }
-.awsui_message-area_cdujn_4xote_45.awsui_chat-bubble-type-incoming_cdujn_4xote_64:not(#\9) {
+.awsui_message-area_cdujn_dsdl4_45.awsui_chat-bubble-type-incoming_cdujn_dsdl4_62:not(#\9) {
   color: var(--color-text-chat-bubble-incoming-od0yh8, #0f141a);
   background-color: var(--color-background-chat-bubble-incoming-j38cew, #f6f6f9);
 }
 
-.awsui_avatar_cdujn_4xote_69:not(#\9) {
+.awsui_loading-bar-wrapper_cdujn_dsdl4_67:not(#\9) {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inline-size: 100%;
+}
+
+.awsui_avatar_cdujn_dsdl4_74:not(#\9) {
   padding-block: var(--space-scaled-xs-xwoogq, 8px);
 }
-.awsui_avatar_cdujn_4xote_69.awsui_hide_cdujn_4xote_72:not(#\9) {
+.awsui_avatar_cdujn_dsdl4_74.awsui_hide_cdujn_dsdl4_77:not(#\9) {
   opacity: 0;
 }
 
-.awsui_content_cdujn_4xote_76:not(#\9) {
+.awsui_content_cdujn_dsdl4_81:not(#\9) {
   /* Used in test utils */
 }
 
-.awsui_actions_cdujn_4xote_80:not(#\9) {
+.awsui_actions_cdujn_dsdl4_85:not(#\9) {
   /* Used in test utils */
 }