Fix: rework pre chat activity layout to rely on author entity (#5274)

* Fix: rework pre chat activity layout to rely on author entity

* Changelog

* Snapshots

* Update pre-chat activity tests

* Address PR feedback

Co-authored-by: William Wong <[email protected]>

---------

Co-authored-by: William Wong <[email protected]>

CHANGELOG.md

@@ -50,6 +50,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 
 -  Updated `useSuggestedActions` to return the activity the suggested actions originated from, in PR [#5255](https://github.com/microsoft/BotFramework-WebChat/issues/5255), by [@compulim](https://github.com/compulim)
 -  Improved focus trap implementation by preserving focus state and removing sentinels, in PR [#5243](https://github.com/microsoft/BotFramework-WebChat/pull/5243), by [@OEvgeny](https://github.com/OEvgeny)
+-  Reworked pre-chat activity layout to use author entity for improved consistency and flexibility, in PR [#5274](https://github.com/microsoft/BotFramework-WebChat/pull/5274), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

packages/core/src/types/external/OrgSchema/CreativeWork.ts

@@ -1,4 +1,4 @@
-import { lazy, parse, string, union, type ObjectEntries } from 'valibot';
+import { lazy, object, parse, string, union, type ObjectEntries } from 'valibot';
 
 import { definedTerm, type DefinedTerm } from './DefinedTerm';
 import orgSchemaProperties from './private/orgSchemaProperties';
@@ -26,7 +26,7 @@ export type CreativeWork = Thing & {
    *
    * @see https://schema.org/author
    */
-  author?: string | undefined;
+  author?: Person | string | undefined;
 
   /**
    * A citation or reference to another creative work, such as another publication, web page, scholarly article, etc.
@@ -71,13 +71,29 @@ export type CreativeWork = Thing & {
   usageInfo?: CreativeWork | undefined;
 };
 
+type Person = {
+  '@type': 'Person';
+  description?: string | undefined;
+  image?: string | undefined;
+  name?: string | undefined;
+};
+
+const person = <TEntries extends ObjectEntries>(entries?: TEntries | undefined) =>
+  object({
+    description: orgSchemaProperty(string()),
+    image: orgSchemaProperty(string()),
+    name: orgSchemaProperty(string()),
+
+    ...entries
+  });
+
 export const creativeWork = <TEntries extends ObjectEntries>(entries?: TEntries | undefined) =>
   thing({
     // For forward compatibility, we did not enforce @type must be "CreativeWork" or any other subtypes.
     // In future, if Schema.org introduced a new subtype of CreativeWork, we should still able to parse that one as a CreativeWork.
 
     abstract: orgSchemaProperty(string()),
-    author: orgSchemaProperties(string()),
+    author: orgSchemaProperty(union([person(), string()])),
     citation: orgSchemaProperties(lazy(() => creativeWork())),
     keywords: orgSchemaProperties(union([lazy(() => definedTerm()), string()])),
     pattern: orgSchemaProperty(lazy(() => definedTerm())),

packages/fluent-theme/src/components/linerActivity/private/LinerActivity.tsx

@@ -10,7 +10,7 @@ const LinerMessageActivity = ({ activity }: Props) => {
 
   return (
     <div className={classNames['liner-message-activity']} role="separator">
-      {activity.text}
+      <span className={classNames['liner-message-activity__text']}>{activity.text}</span>
     </div>
   );
 };

packages/fluent-theme/src/components/linerActivity/private/LinerMessageActivity.module.css

@@ -22,3 +22,7 @@
     min-width: 8px;
   }
 }
+
+:global(.webchat-fluent) .liner-message-activity__text {
+  text-align: center;
+}

packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.module.css

@@ -9,30 +9,44 @@
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__body {
+  align-items: center;
+  display: flex;
+  flex-flow: column nowrap;
   font-family: var(--webchat-fontFamilyBase);
   font-size: var(--webchat-fontSizeBase300);
   font-weight: var(--webchat-fontWeightRegular);
+  gap: var(--webchat-spacingVerticalXS);
   grid-area: body;
   line-height: var(--webchat-lineHeightBase300);
   text-align: center;
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__body--placeholder {
   opacity: 60%;
+
+  .pre-chat-message-activity__body-avatar {
+    filter: grayscale(1);
+  }
 }
 
-:global(.webchat-fluent) .pre-chat-message-activity__body h2 {
+:global(.webchat-fluent) .pre-chat-message-activity__body-avatar {
+  border-radius: var(--webchat-borderRadiusMedium);
+  height: 64px;
+  margin-block-end: var(--webchat-spacingVerticalM);
+}
+
+:global(.webchat-fluent) .pre-chat-message-activity__body-title {
   color: var(--webchat-colorNeutralForeground1);
   font-family: inherit;
-  font-weight: var(--webchat-fontWeightSemibold);
   font-size: var(--webchat-fontSizeHero700);
+  font-weight: var(--webchat-fontWeightSemibold);
   line-height: var(--webchat-lineHeightHero700);
-  margin: var(--webchat-spacingVerticalL) 0 0;
+  margin: 0;
 }
 
-:global(.webchat-fluent) .pre-chat-message-activity__body img {
-  border-radius: 4px;
-  height: 64px;
+:global(.webchat-fluent) .pre-chat-message-activity__body-subtitle {
+  font-size: var(--webchat-fontSizeBase300);
+  line-height: var(--webchat-lineHeightBase300);
 }
 
 :global(.webchat-fluent) .pre-chat-message-activity__toolbar {

packages/fluent-theme/src/components/preChatActivity/PreChatMessageActivity.tsx

@@ -10,29 +10,55 @@ import StarterPromptsCardAction from './StarterPromptsCardAction.js';
 
 type Props = Readonly<{ activity: WebChatActivity & { type: 'message' } }>;
 
-const { useRenderMarkdownAsHTML } = hooks;
+const { useLocalizer, useRenderMarkdownAsHTML } = hooks;
 
 const PreChatMessageActivity = ({ activity }: Props) => {
   const classNames = useStyles(styles);
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
-
-  const html = useMemo(
-    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(activity.text || '') } : { __html: '' }),
-    [activity.text, renderMarkdownAsHTML]
-  );
+  const localize = useLocalizer();
 
   const entity = getOrgSchemaMessage(activity?.entities || []);
   const isPlaceHolder = entity?.keywords?.includes('PreChatMessage') && entity.creativeWorkStatus === 'Placeholder';
+  const author = useMemo(
+    () =>
+      typeof entity?.author === 'string'
+        ? {
+            '@type': 'Person',
+            description: undefined,
+            image: undefined,
+            name: entity?.author
+          }
+        : entity?.author,
+    [entity?.author]
+  );
+
+  const html = useMemo(
+    () => (renderMarkdownAsHTML ? { __html: renderMarkdownAsHTML(author?.description || '') } : { __html: '' }),
+    [author?.description, renderMarkdownAsHTML]
+  );
 
   return (
     <div className={classNames['pre-chat-message-activity']}>
-      <div
-        className={cx(
-          classNames['pre-chat-message-activity__body'],
-          isPlaceHolder && classNames['pre-chat-message-activity__body--placeholder']
-        )}
-        dangerouslySetInnerHTML={html}
-      />
+      {author && (
+        <div
+          className={cx(
+            classNames['pre-chat-message-activity__body'],
+            isPlaceHolder && classNames['pre-chat-message-activity__body--placeholder']
+          )}
+        >
+          {author.image && (
+            <img
+              alt={localize('AVATAR_ALT', author.name)}
+              className={classNames['pre-chat-message-activity__body-avatar']}
+              src={author.image}
+            />
+          )}
+          {author.name && <h2 className={classNames['pre-chat-message-activity__body-title']}>{author.name}</h2>}
+          {author.description && (
+            <div className={classNames['pre-chat-message-activity__body-subtitle']} dangerouslySetInnerHTML={html} />
+          )}
+        </div>
+      )}
       <StarterPromptsToolbar
         cardActions={activity.suggestedActions?.actions || []}
         className={classNames['pre-chat-message-activity__toolbar']}

packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css

@@ -14,6 +14,7 @@
   overflow: hidden;
   padding: 16px 20px;
   text-align: left;
+  transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
   user-select: none;
 
   &:has(.pre-chat-message-activity__card-action-image) {

packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.tsx

@@ -51,7 +51,6 @@ const StarterPromptsCardAction = ({ className, messageBackAction }: Props) => {
               className={classNames['pre-chat-message-activity__card-action-image']}
               src={messageBackAction.image}
             />
-            // <img className="pre-chat-message-activity__card-action-image" src={messageBackAction.image} />
           )}
           <div
             className={classNames['pre-chat-message-activity__card-action-subtitle']}

packages/fluent-theme/src/components/theme/Theme.module.css

@@ -270,6 +270,12 @@
     inset: 0;
     border-radius: var(--webchat-borderRadiusSmall);
   }
+
+  :global(.liner-message-activity__text) {
+    border-radius: 20px;
+    outline-offset: 4px;
+    outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2);
+  }
 }
 
 /* Transcript filer in copilot variant */