feat: fluent styles for part grouping

Author: OEvgeny

packages/fluent-theme/src/components/activity/ActivityDecorator.module.css

@@ -7,82 +7,6 @@
   padding-block-end: var(--webchat-spacingVerticalXL);
 }
 
-/* Stacked layout */
-:global(.webchat-fluent) .activity-decorator :global(.stacked-layout) {
-  display: flex;
-  flex-flow: column nowrap;
-  margin-inline: var(--webchat-spacingHorizontalMNudge);
-
-  :global(.stacked-layout__title) {
-    font-size: var(--webchat-fontSizeBase400);
-    line-height: var(--webchat-lineHeightBase400);
-    color: var(--webchat-colorNeutralForeground4);
-    margin: var(--webchat__bubble--block-padding) var(--webchat__bubble--inline-padding);
-  }
-
-  :global(.stacked-layout__attachment-row) {
-    margin-block-start: var(--webchat-spacingVerticalMNudge);
-  }
-
-  &:global(.stacked-layout--no-message .stacked-layout__attachment-row) {
-    margin-block-start: 0;
-  }
-}
-
-/* Stacked layout which has message bubble */
-:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .stacked-layout__content:has(.webchat__bubble)) {
-  max-width: 100%;
-  overflow: visible;
-}
-
-/* Message status */
-:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .stacked-layout__status) {
-  font-size: var(--webchat__font-size--small);
-  line-height: var(--webchat__line-height--small);
-}
-
-/* Message bubble */
-:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble) {
-  max-width: min(var(--webchat__bubble--max-width), 100%);
-  min-width: var(--webchat__bubble--min-width);
-  overflow: visible;
-
-  /* Ensure activity loader doesn't have bubble and shadow */
-  &:has(:global(.activity-loader)) :global(.webchat__bubble__content) {
-    background: transparent;
-    box-shadow: none;
-  }
-}
-
-/* Message bubble content */
-:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .webchat__bubble__content) {
-  background-color: var(--webchat__bubble--background-color);
-  border-radius: var(--webchat__bubble--border-radius);
-  border-width: 0;
-  box-shadow: var(--webchat__bubble--box-shadow);
-  box-sizing: border-box;
-  color: var(--webchat-colorNeutralForeground1);
-  max-width: 100%;
-  min-height: var(--webchat__bubble--min-height);
-}
-
-/* Message bubble text content */
-:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .webchat__text-content) {
-  font-size: var(--webchat__font-size--medium);
-  line-height: var(--webchat__line-height--medium);
-  min-height: auto;
-  padding-block: var(--webchat__bubble--block-padding);
-  padding-inline: var(--webchat__bubble--inline-padding);
-
-  &:empty {
-    padding-block-end: 0;
-  }
-
-  + :global(.webchat__text-content) {
-    margin-top: calc(var(--webchat__bubble--block-padding) * -1);
-  }
-}
-
 /* Message bubble text content generated badge */
 :global(.webchat-fluent)
   .activity-decorator
@@ -123,66 +47,6 @@
   color: var(--webchat-colorBrandForegroundLink);
 }
 
-/* Message bubble collapsible content */
-:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .collapsible-content) {
-  :global(.collapsible-content__summary) {
-    margin-block: var(--webchat__bubble--block-padding);
-    margin-inline: var(--webchat__bubble--inline-padding);
-
-    &:focus-visible {
-      border-radius: var(--webchat-borderRadiusSmall);
-      outline-offset: 4px;
-      outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
-    }
-  }
-
-  :global(.collapsible-content__content) {
-    margin-block: 0 var(--webchat__bubble--block-padding);
-  }
-
-  :global(.collapsible-content__content .stacked-layout__attachment-list) {
-    gap: var(--webchat-spacingVerticalS);
-  }
-
-  :global(.collapsible-content__content .stacked-layout__attachment-row) {
-    margin: 0;
-  }
-
-  :global(.collapsible-content__content .stacked-layout__attachment-row .webchat__text-content) {
-    padding-block: 0;
-  }
-}
-
-/* Message bubble code block content */
-:global(.webchat-fluent) .activity-decorator :global(.stacked-layout .webchat__bubble .code-block-content) {
-  border-radius: var(--webchat-borderRadiusXLarge);
-  border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1);
-  font-size: var(--webchat-fontSizeBase300);
-  font-weight: var(--webchat-fontWeightRegular);
-  margin-block: 0;
-  margin-inline: var(--webchat__bubble--inline-padding);
-
-  :global(.code-block-content__header) {
-    padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalL);
-  }
-
-  :global(.code-block-content__code-block) {
-    padding-block: var(--webchat-spacingVerticalM);
-    padding-inline: var(--webchat-spacingHorizontalL) var(--webchat-spacingHorizontalS);
-  }
-
-  :global(.webchat__code-block-copy-button) {
-    --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1);
-    --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3);
-
-    margin-block-start: var(--webchat-spacingVerticalM);
-    margin-inline-end: var(--webchat-spacingHorizontalL);
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
-}
-
 /* Markdown links and citation links */
 :global(.webchat-fluent)
   .activity-decorator

packages/fluent-theme/src/components/activity/PartGroupingDecorator.tsx

@@ -28,14 +28,19 @@ function PartGroupingDecorator(props: PartGroupingDecoratorProps) {
     [activity, restActivities.length]
   );
 
+  const isFromUser = activity?.from?.role === 'user';
+  const isFromBot = activity?.from?.role === 'bot';
+
   const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role === 'bot';
 
   return (
     <div
       className={cx(
         classNames['part-grouping-decorator'],
         {
-          [classNames['part-grouping-decorator--group']]: isInGroup
+          [classNames['part-grouping-decorator--group']]: isInGroup,
+          [classNames['part-grouping-decorator--from-user']]: isFromUser,
+          [classNames['part-grouping-decorator--from-bot']]: isFromBot
         },
         variantClassName
       )}