botframework-webchat-fluent-theme 4.18.1-main.20240830.4534802 → 4.18.1-main.20240831.f4058ce

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-fluent-theme",
-  "version": "4.18.1-main.20240830.4534802",
+  "version": "4.18.1-main.20240831.f4058ce",
   "description": "Fluent theme for Bot Framework Web Chat",
   "main": "./dist/botframework-webchat-fluent-theme.js",
   "types": "./dist/botframework-webchat-fluent-theme.d.ts",
@@ -69,9 +69,9 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "botframework-webchat-api": "4.18.1-main.20240830.4534802",
-    "botframework-webchat-component": "4.18.1-main.20240830.4534802",
-    "botframework-webchat-core": "4.18.1-main.20240830.4534802",
+    "botframework-webchat-api": "4.18.1-main.20240831.f4058ce",
+    "botframework-webchat-component": "4.18.1-main.20240831.f4058ce",
+    "botframework-webchat-core": "4.18.1-main.20240831.f4058ce",
     "classnames": "2.5.1",
     "inject-meta-tag": "0.0.1",
     "math-random": "2.0.1",

package/src/components/activity/ActivityDecorator.tsx

@@ -11,7 +11,7 @@ function ActivityDecorator({ activity, children }: Readonly<{ activity: WebChatA
   const variants = useVariants();
   const variantClassName = useVariantClassName(styles);
 
-  const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role !== 'user' && !!children;
+  const shouldRenderHeader = variants.includes('copilot') && activity?.from?.role === 'bot' && !!children;
 
   return (
     <div className={cx(classNames['activity-decorator'], variantClassName)}>

package/src/components/linerActivity/index.ts

@@ -0,0 +1,2 @@
+export { default as isLinerMessageActivity } from './private/isLinerMessageActivity';
+export { default as LinerMessageActivity } from './private/LinerActivity';

package/src/components/linerActivity/private/LinerActivity.tsx

@@ -0,0 +1,20 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo } from 'react';
+import { useStyles } from '../../../styles/index.js';
+import styles from './LinerMessageActivity.module.css';
+
+type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
+
+const LinerMessageActivity = ({ activity }: Props) => {
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['liner-message-activity']} role="separator">
+      {activity.text}
+    </div>
+  );
+};
+
+LinerMessageActivity.displayName = 'LinerMessageActivity';
+
+export default memo(LinerMessageActivity);

package/src/components/linerActivity/private/LinerMessageActivity.module.css

@@ -0,0 +1,24 @@
+
+:global(.webchat-fluent) .liner-message-activity {
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--webchat-colorNeutralForeground3);
+  display: flex;
+  flex-direction: row;
+  font-family: var(--webchat__font--primary);
+  font-size: var(--webchat-fontSizeBase200);
+  font-weight: var(--webchat-fontWeightRegular);
+  gap: var(--webchat-spacingHorizontalM);
+  line-height: var(--webchat-lineHeightBase200);
+  padding: var(--webchat-spacingVerticalSNudge) var(--webchat-spacingHorizontalM);
+  text-align: center;
+  width: 100%;
+
+  &::before, &::after {
+    border-top: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2);
+    content: "";
+    display: flex;
+    flex: auto;
+    min-width: 8px;
+  }
+}

package/src/components/linerActivity/private/isLinerMessageActivity.ts

@@ -0,0 +1,7 @@
+import { type WebChatActivity } from 'botframework-webchat-core';
+
+export default function isLinerMessageActivity(
+  activity: undefined | WebChatActivity
+): activity is WebChatActivity & { type: 'message'; from: { role: 'channel' } } {
+  return !!(activity && activity.from.role === 'channel' && activity.type === 'message' && 'text' in activity);
+}

package/src/components/theme/Theme.module.css

@@ -272,6 +272,12 @@
   }
 }
 
+/* Transcript filer in copilot variant */
+:global(.webchat-fluent).theme.variant-copilot :global(.webchat__basic-transcript .webchat__basic-transcript__filler) {
+  /* No filler unless pre-chat activity, see next rule */
+  flex-grow: 0;
+}
+
 /* Transcript with a single pre-chat activity */
 :global(.webchat-fluent).theme :global(.webchat__basic-transcript:has(.webchat__basic-transcript__activity:only-child):has(.pre-chat-message-activity) .webchat__basic-transcript__filler) {
   /* limit grow to half of the size to center the activity */

package/src/private/FluentThemeProvider.tsx

@@ -9,6 +9,7 @@ import { TelephoneKeypadProvider } from '../components/telephoneKeypad';
 import { WebChatTheme } from '../components/theme';
 import VariantComposer, { VariantList } from './VariantComposer';
 import { FluentThemeDecorator } from '../components/decorator';
+import { isLinerMessageActivity, LinerMessageActivity } from '../components/linerActivity';
 
 const { ThemeProvider } = Components;
 
@@ -20,9 +21,12 @@ const activityMiddleware: readonly ActivityMiddleware[] = Object.freeze([
     (...args) => {
       const activity = args[0]?.activity;
 
-      if (activity && isPreChatMessageActivity(activity)) {
+      if (isPreChatMessageActivity(activity)) {
         return () => <PreChatMessageActivity activity={activity} />;
       }
+      if (isLinerMessageActivity(activity)) {
+        return () => <LinerMessageActivity activity={activity} />;
+      }
 
       const renderActivity = next(...args);