feat: loading animation and style fixes

Author: OEvgeny

packages/component/src/Activity/StackedLayout.module.css

@@ -108,12 +108,28 @@
     margin-block: calc(var(--webchat__padding--regular) + 1px);
     place-self: start;
     font-size: 1.1em;
+    display: grid;
+    grid-template-areas: "message-status-icon";
+
+    > * {
+      grid-area: message-status-icon;
+    }
   }
 
-  .stacked-layout__message-status-complete-icon {
+  .stacked-layout__message-status-unset-icon,
+  .stacked-layout__message-status-complete-icon,
+  .stacked-layout__message-status-loader {
     visibility: hidden;
   }
 
+  .stacked-layout__message-status--unset .stacked-layout__message-status-unset-icon {
+    visibility: unset;
+  }
+
+  .stacked-layout__message-status--incomplete .stacked-layout__message-status-loader {
+    visibility: unset;
+  }
+
   .stacked-layout__message-status--final .stacked-layout__message-status-complete-icon {
     visibility: unset;
   }
@@ -177,17 +193,23 @@
     .stacked-layout__bubble {
       grid-template: 'content' 1fr / 1fr;
     }
+    
     .stacked-layout__message-status {
       display: none;
     }
-    &:has(.stacked-layout__message-status--final) .stacked-layout__bubble {
-      grid-template:
-        'status content'
-        'status content'
-        / min-content auto;
-    }
-    &:has(.stacked-layout__message-status--final) .stacked-layout__message-status {
-      display: flex;
+    
+    &:has(.stacked-layout__message-status--final), 
+    &:has(.stacked-layout__message-status--incomplete) {
+      .stacked-layout__bubble {
+        grid-template:
+          'status content'
+          'status content'
+          / min-content auto;
+      }
+
+      .stacked-layout__message-status {
+        display: grid;
+      }
     }
   }
 }

packages/component/src/Activity/StackedLayout.tsx

@@ -24,6 +24,7 @@ import { useGetLogicalGroupKey } from '../providers/ActivityLogicalGrouping';
 
 import styles from './StackedLayout.module.css';
 import { ComponentIcon } from '../Icon';
+import MessageStatusLoader from './private/MessageStatusLoader';
 
 const { useAvatarForBot, useAvatarForUser, useLocalizer, useGetKeyByActivity, useStyleOptions } = hooks;
 
@@ -167,14 +168,23 @@ const StackedLayout = ({
       showStatus && (
         <div
           className={cx(classNames['stacked-layout__message-status'], {
-            [classNames['stacked-layout__message-status--final']]: messageThing?.creativeWorkStatus === 'published'
+            [classNames['stacked-layout__message-status--unset']]: !messageThing?.creativeWorkStatus,
+            [classNames['stacked-layout__message-status--final']]: messageThing?.creativeWorkStatus === 'published',
+            [classNames['stacked-layout__message-status--incomplete']]:
+              messageThing?.creativeWorkStatus === 'incomplete'
           })}
         >
+          <ComponentIcon
+            appearance="text"
+            className={classNames['stacked-layout__message-status-unset-icon']}
+            icon="unchecked-circle"
+          />
           <ComponentIcon
             appearance="text"
             className={classNames['stacked-layout__message-status-complete-icon']}
             icon="checkmark-circle"
           />
+          <MessageStatusLoader className={classNames['stacked-layout__message-status-loader']} />
         </div>
       ),
     [classNames, messageThing?.creativeWorkStatus, showStatus]

packages/component/src/Activity/private/MessageStatusLoader.module.css

@@ -0,0 +1,14 @@
+
+:global(.webchat) .message-status-loader {
+  --webchat__component-icon--mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='3'/></svg>");
+  animation: message-status-loader__pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes message-status-loader__pulse {
+  0%, 100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 1;
+  }
+}

packages/component/src/Activity/private/MessageStatusLoader.tsx

@@ -0,0 +1,13 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+
+import styles from './MessageStatusLoader.module.css';
+import { ComponentIcon } from '../../Icon';
+
+function MessageStatusLoader({ className }: Readonly<{ className?: string | undefined }>) {
+  const classNames = useStyles(styles);
+  return <ComponentIcon appearance="text" className={cx(classNames['message-status-loader'], className)} />;
+}
+
+export default memo(MessageStatusLoader);

packages/component/src/Icon/ComponentIcon.module.css

@@ -0,0 +1,5 @@
+:global(.webchat) .part-grouping-activity {
+  .part-grouping-activity__activities {
+    padding-block-start: 0;
+  }
+}

packages/component/src/Middleware/ActivityGrouping/ui/PartGrouping/private/PartGroupingActivity.module.css

@@ -1,4 +1,5 @@
 import { reactNode } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
 import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
 import React, { memo, useCallback, useMemo, useState, type MouseEventHandler } from 'react';
@@ -37,6 +38,8 @@ import isZeroOrPositive from '../../../../../Utils/isZeroOrPositive';
 import { android } from '../../../../../Utils/detectBrowser';
 import TranscriptActivityList from '../../../../../Transcript/TranscriptFocus/TranscriptActivityList';
 
+import styles from './PartGroupingActivity.module.css';
+
 const { useAvatarForBot, useStyleOptions, useGetKeyByActivity } = hooks;
 
 const partGroupingActivityPropsSchema = pipe(
@@ -65,8 +68,9 @@ const partGroupingFocusableActivityPropsSchema = pipe(
       transform(value => value as WebChatActivity),
       readonly()
     ),
-    groupKey: string(),
-    children: optional(reactNode())
+    children: optional(reactNode()),
+    className: optional(string()),
+    groupKey: string()
   }),
   readonly()
 );
@@ -75,7 +79,7 @@ type FocusablePartGroupingActivityProps = InferOutput<typeof partGroupingFocusab
 
 function FocusablePartGroupingActivity(props: FocusablePartGroupingActivityProps) {
   const [activeDescendantId] = useActiveDescendantId();
-  const { activity, children, groupKey } = parse(partGroupingFocusableActivityPropsSchema, props);
+  const { activity, children, className, groupKey } = parse(partGroupingFocusableActivityPropsSchema, props);
 
   const getGroupDescendantIdByActivityKey = useGetGroupDescendantIdByActivityKey();
   const focusByGroupKey = useFocusByGroupKey();
@@ -114,6 +118,7 @@ function FocusablePartGroupingActivity(props: FocusablePartGroupingActivityProps
 
   return (
     <TranscriptFocusContent
+      className={className}
       focused={isActiveDescendant}
       onMouseDownCapture={handleMouseDownCapture}
       ref={groupCallbackRef}
@@ -134,6 +139,7 @@ function FocusablePartGroupingActivity(props: FocusablePartGroupingActivityProps
 }
 
 function PartGroupingActivity(props: PartGroupingActivityProps) {
+  const classNames = useStyles(styles);
   const { activities, children } = parse(partGroupingActivityPropsSchema, props);
   const getKeyByActivity = useGetKeyByActivity();
   const [isGroupOpen, setIsGroupOpen] = useState(true);
@@ -175,7 +181,11 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
   const topAlignedCallout = isZeroOrPositive(bubbleNubOffset);
 
   return (
-    <FocusablePartGroupingActivity activity={firstActivity} groupKey={groupKey}>
+    <FocusablePartGroupingActivity
+      activity={firstActivity}
+      className={classNames['part-grouping-activity']}
+      groupKey={groupKey}
+    >
       <StackedLayoutRoot
         hideAvatar={hasAvatar && !showAvatar}
         isGroup={true}
@@ -184,7 +194,9 @@ function PartGroupingActivity(props: PartGroupingActivityProps) {
       >
         <StackedLayoutMain avatar={showAvatar && renderAvatar && renderAvatar()}>
           <CollapsibleGrouping isOpen={isGroupOpen} onToggle={setIsGroupOpen} title={currentMessage?.abstract || ''}>
-            <TranscriptActivityList>{children}</TranscriptActivityList>
+            <TranscriptActivityList className={classNames['part-grouping-activity__activities']}>
+              {children}
+            </TranscriptActivityList>
           </CollapsibleGrouping>
         </StackedLayoutMain>
         {renderActivityStatus && <StackedLayoutStatus>{renderActivityStatus({ hideTimestamp })}</StackedLayoutStatus>}