feat: implement chat bubble style API

Author: amanabiy

src/chat-bubble/interfaces.ts

@@ -31,8 +31,31 @@ export interface ChatBubbleProps {
    * Useful for when there are multiple consecutive messages coming from the same author.
    */
   hideAvatar?: boolean;
+
+  /**
+   * @awsuiSystem core
+   */
+  style?: ChatBubbleProps.Style;
 }
 
 export namespace ChatBubbleProps {
   export type Type = "incoming" | "outgoing";
+  export 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;
+    };
+  }
 }

src/chat-bubble/internal.tsx

@@ -7,6 +7,7 @@ import { getDataAttributes } from "../internal/base-component/get-data-attribute
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import { InternalLoadingBar } from "../loading-bar/internal";
 import { ChatBubbleProps } from "./interfaces.js";
+import { getBubbleStyle, getChatBubbleRootStyle } from "./style";
 
 import styles from "./styles.css.js";
 
@@ -20,6 +21,7 @@ export default function InternalChatBubble({
   showLoadingBar,
   hideAvatar = false,
   ariaLabel,
+  style,
   __internalRootRef = null,
   ...rest
 }: InternalChatBubbleProps) {
@@ -43,6 +45,7 @@ export default function InternalChatBubble({
       ref={__internalRootRef}
       role="group"
       aria-label={ariaLabel}
+      style={getChatBubbleRootStyle(style)}
     >
       {avatar && (
         <div ref={avatarRef} className={clsx(styles.avatar, hideAvatar && styles.hide)}>
@@ -54,12 +57,15 @@ export default function InternalChatBubble({
         className={clsx(styles["message-area"], styles[`chat-bubble-type-${type}`], {
           [styles["with-loading-bar"]]: showLoadingBar,
         })}
+        style={getBubbleStyle(style)}
       >
         <div className={styles.content}>{children}</div>
-
         {actions && <div className={styles.actions}>{actions}</div>}
-
-        {showLoadingBar && <InternalLoadingBar variant="gen-ai-masked" />}
+        {showLoadingBar && (
+          <div className={styles["loading-bar-wrapper"]}>
+            <InternalLoadingBar variant="gen-ai-masked" />
+          </div>
+        )}
       </div>
     </div>
   );

src/chat-bubble/style.tsx

@@ -0,0 +1,35 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from "../internal/environment";
+import { ChatBubbleProps } from "./interfaces";
+
+export function getChatBubbleRootStyle(style: ChatBubbleProps.Style | undefined) {
+  if (SYSTEM !== "core") {
+    return {};
+  }
+
+  return {
+    columnGap: style?.root?.columnGap,
+  };
+}
+
+export function getBubbleStyle(style: ChatBubbleProps.Style | undefined) {
+  if (SYSTEM !== "core") {
+    return {};
+  }
+
+  return {
+    background: style?.bubble?.background,
+    borderRadius: style?.bubble?.borderRadius,
+    borderStyle: style?.bubble?.borderWidth ? "solid" : undefined,
+    borderColor: style?.bubble?.borderColor,
+    borderWidth: style?.bubble?.borderWidth,
+    boxShadow: style?.bubble?.boxShadow,
+    paddingBlock: style?.bubble?.paddingBlock,
+    paddingInline: style?.bubble?.paddingInline,
+    color: style?.bubble?.color,
+    fontSize: style?.bubble?.fontSize,
+    fontWeight: style?.bubble?.fontWeight,
+    rowGap: style?.bubble?.rowGap,
+  };
+}

src/chat-bubble/styles.scss

@@ -18,6 +18,7 @@
 }
 
 .message-area {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: cs.$space-scaled-s;
@@ -30,10 +31,6 @@
   border-end-start-radius: cs.$border-radius-chat-bubble;
   border-end-end-radius: cs.$border-radius-chat-bubble;
 
-  &.with-loading-bar {
-    padding-block-end: 0;
-  }
-
   &.chat-bubble-type-outgoing {
     color: cs.$color-text-chat-bubble-outgoing;
     background-color: cs.$color-background-chat-bubble-outgoing;
@@ -45,6 +42,13 @@
   }
 }
 
+.loading-bar-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
 .avatar {
   padding-block: cs.$space-scaled-xs;