add new arrow to bubble message

src/app/components/message/layout/Bubble.tsx

@@ -1,17 +1,41 @@
 import React, { ReactNode } from 'react';
 import classNames from 'classnames';
-import { Box, as } from 'folds';
+import { Box, ContainerColor as TContainerColor, as, color } from 'folds';
 import * as css from './layout.css';
+import { ContainerColor } from '../../../styles/ContainerColor.css';
+
+type BubbleArrowProps = {
+  variant: TContainerColor;
+};
+function BubbleLeftArrow({ variant }: BubbleArrowProps) {
+  return (
+    <svg
+      className={css.BubbleLeftArrow}
+      width="9"
+      height="8"
+      viewBox="0 0 9 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 8V0L0 0L8 8H9Z"
+        fill={color[variant].Container}
+      />
+    </svg>
+  );
+}
 
 type BubbleLayoutProps = {
-  self?: boolean;
   hideBubble?: boolean;
   before?: ReactNode;
+  header?: ReactNode;
 };
 
 export const BubbleLayout = as<'div', BubbleLayoutProps>(
-  ({ self, hideBubble, before, children, ...props }, ref) => (
+  ({ hideBubble, before, header, children, ...props }, ref) => (
-    <Box direction={self ? 'RowReverse' : 'Row'} gap="300" {...props} ref={ref}>
+    <Box gap="200" {...props} ref={ref}>
       <Box className={css.BubbleBefore} shrink="No">
         {before}
       </Box>
@@ -19,15 +43,12 @@ export const BubbleLayout = as<'div', BubbleLayoutProps>(
         className={
           hideBubble
             ? undefined
-            : classNames(
+            : classNames(css.BubbleContent, before ? css.BubbleContentArrowLeft : undefined)
-                css.BubbleContent,
-                before ? css.BubbleContentArrow : undefined,
-                before && self ? css.BubbleContentArrowRight : undefined,
-                before && !self ? css.BubbleContentArrowLeft : undefined
-              )
         }
         direction="Column"
       >
+        {!hideBubble && before ? <BubbleLeftArrow variant="SurfaceVariant" /> : null}
+        {header}
         {children}
       </Box>
     </Box>

src/app/components/message/layout/layout.css.ts

@@ -133,12 +133,10 @@ export const ModernBefore = style({
   minWidth: toRem(36),
 });
 
-export const BubbleBefore = style([
+export const BubbleBefore = style({
-  ModernBefore,
+  minWidth: toRem(24),
-  {
+  marginLeft: config.space.S300,
-    minWidth: toRem(24),
+});
-  },
-]);
 
 export const BubbleContent = style({
   maxWidth: toRem(800),
@@ -149,36 +147,18 @@ export const BubbleContent = style({
   position: 'relative',
 });
 
-export const BubbleContentArrow = style({
-  selectors: {
-    '&::before': {
-      content: '',
-      display: 'inline-block',
-      background: 'inherit',
-      width: toRem(8),
-      height: toRem(8),
-      position: 'absolute',
-      top: toRem(12.5),
-      zIndex: 1,
-      transform: 'rotateZ(45deg)',
-    },
-  },
-});
-
 export const BubbleContentArrowLeft = style({
-  selectors: {
+  borderTopLeftRadius: 0,
-    '&::before': {
-      left: toRem(-4),
-    },
-  },
 });
 
-export const BubbleContentArrowRight = style({
+export const BubbleLeftArrow = style({
-  selectors: {
+  width: toRem(9),
-    '&::before': {
+  height: toRem(8),
-      right: toRem(-4),
+
-    },
+  position: 'absolute',
-  },
+  top: 0,
+  left: toRem(-8),
+  zIndex: 1,
 });
 
 export const Username = style({