botframework-webchat-component 4.18.1-main.20260518.2a3d1d3 → 4.18.2

package/src/ActivityStatus/OthersActivityStatus.tsx

@@ -1,31 +1,30 @@
-import { warnOnce } from '@msinternal/botframework-webchat-base/utils';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import { hooks } from 'botframework-webchat-api';
-import { getOrgSchemaMessage, type WebChatActivity } from 'botframework-webchat-core';
-import { orgSchemaActionSchema, orgSchemaClaimSchema, OrgSchemaProject } from 'botframework-webchat-core/org-schema.js';
-import cx from 'classnames';
-import React, { memo, useMemo } from 'react';
-import { parse } from 'valibot';
-
-import ActivityFeedback from '../ActivityFeedback/ActivityFeedback';
+import {
+  getOrgSchemaMessage,
+  OrgSchemaAction,
+  OrgSchemaProject,
+  parseAction,
+  parseClaim,
+  warnOnce,
+  type WebChatActivity
+} from 'botframework-webchat-core';
+import classNames from 'classnames';
+import React, { memo, useMemo, type ReactNode } from 'react';
+
+import useStyleSet from '../hooks/useStyleSet';
 import dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes';
+import Feedback from './private/Feedback/Feedback';
 import Originator from './private/Originator';
-import StatusSlot from './StatusSlot';
+import Slotted from './Slotted';
 import Timestamp from './Timestamp';
 
-import styles from './ActivityStatus.module.css';
-
-const { useStyleOptions } = hooks;
-
-type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined; slotted?: boolean }>;
+type Props = Readonly<{ activity: WebChatActivity }>;
 
 const warnRootLevelThings = warnOnce(
   'Root-level things are being deprecated, please relate all things to `entities[@id=""]` instead. This feature will be removed in 2025-03-06.'
 );
 
-const OthersActivityStatus = memo(({ activity, className, slotted }: Props) => {
-  const [{ feedbackActionsPlacement }] = useStyleOptions();
-  const classNames = useStyles(styles);
+const OthersActivityStatus = memo(({ activity }: Props) => {
+  const [{ sendStatus }] = useStyleSet();
   const { timestamp } = activity;
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
 
@@ -34,28 +33,43 @@ const OthersActivityStatus = memo(({ activity, className, slotted }: Props) => {
   const claimInterpreter = useMemo<OrgSchemaProject | undefined>(() => {
     try {
       if (messageThing) {
-        return parse(orgSchemaClaimSchema, messageThing?.citation[0]).claimInterpreter[0];
+        return parseClaim((messageThing?.citation || [])[0])?.claimInterpreter;
       }
 
-      const [firstClaim] = graph
-        .filter(({ type }) => type === 'https://schema.org/Claim')
-        .map(claim => parse(orgSchemaClaimSchema, claim));
+      const [firstClaim] = graph.filter(({ type }) => type === 'https://schema.org/Claim').map(parseClaim);
 
       if (firstClaim) {
         warnRootLevelThings();
 
-        return firstClaim?.claimInterpreter[0];
+        return firstClaim?.claimInterpreter;
       }
 
-      const replyAction = parse(
-        orgSchemaActionSchema,
-        graph.find(({ type }) => type === 'https://schema.org/ReplyAction')
-      );
+      const replyAction = parseAction(graph.find(({ type }) => type === 'https://schema.org/ReplyAction'));
 
       if (replyAction) {
         warnRootLevelThings();
 
-        return replyAction?.provider[0];
+        return replyAction?.provider;
+      }
+    } catch {
+      // Intentionally left blank.
+    }
+  }, [graph, messageThing]);
+
+  const feedbackActions = useMemo<ReadonlySet<OrgSchemaAction> | undefined>(() => {
+    try {
+      const reactActions = (messageThing?.potentialAction || []).filter(
+        ({ '@type': type }) => type === 'LikeAction' || type === 'DislikeAction'
+      );
+
+      if (reactActions.length) {
+        return Object.freeze(new Set(reactActions));
+      }
+
+      const voteActions = graph.filter(({ type }) => type === 'https://schema.org/VoteAction').map(parseAction);
+
+      if (voteActions.length) {
+        return Object.freeze(new Set(voteActions));
       }
     } catch {
       // Intentionally left blank.
@@ -63,30 +77,17 @@ const OthersActivityStatus = memo(({ activity, className, slotted }: Props) => {
   }, [graph, messageThing]);
 
   return (
-    <span
-      className={cx(classNames['activity-status'], { [classNames['activity-status--slotted']]: slotted }, className)}
-    >
-      {timestamp && (
-        <StatusSlot>
-          <Timestamp key="timestamp" timestamp={timestamp} />
-        </StatusSlot>
-      )}
-      {claimInterpreter && (
-        <StatusSlot>
-          <Originator
-            key="originator"
-            name={claimInterpreter.name[0]}
-            slogan={claimInterpreter.slogan[0]}
-            url={claimInterpreter.url[0]}
-          />
-        </StatusSlot>
-      )}
-      {feedbackActionsPlacement === 'activity-status' && (
-        <StatusSlot>
-          <ActivityFeedback activity={activity} key="feedback" />
-        </StatusSlot>
+    <Slotted className={classNames('webchat__activity-status', sendStatus + '')}>
+      {useMemo<ReactNode[]>(
+        () =>
+          [
+            timestamp && <Timestamp key="timestamp" timestamp={timestamp} />,
+            claimInterpreter && <Originator key="originator" project={claimInterpreter} />,
+            feedbackActions?.size && <Feedback actions={feedbackActions} key="feedback" />
+          ].filter(Boolean),
+        [claimInterpreter, timestamp, feedbackActions]
       )}
-    </span>
+    </Slotted>
   );
 });
 

package/src/ActivityStatus/SelfActivityStatus.tsx

@@ -1,24 +1,21 @@
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { type WebChatActivity } from 'botframework-webchat-core';
-import cx from 'classnames';
+import classNames from 'classnames';
 import React, { memo } from 'react';
 
+import Slotted from './Slotted';
 import Timestamp from './Timestamp';
+import useStyleSet from '../hooks/useStyleSet';
 
-import styleClassNames from './ActivityStatus.module.css';
+type Props = Readonly<{ activity: WebChatActivity }>;
 
-type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined; slotted?: boolean }>;
-
-const SelftActivityStatus = memo(({ activity, className, slotted }: Props) => {
-  const classNames = useStyles(styleClassNames);
+const SelftActivityStatus = memo(({ activity }: Props) => {
+  const [{ sendStatus }] = useStyleSet();
   const { timestamp } = activity;
 
   return timestamp ? (
-    <span
-      className={cx(classNames['activity-status'], { [classNames['activity-status--slotted']]: slotted }, className)}
-    >
+    <Slotted className={classNames('webchat__activity-status', 'webchat__activity-status--self', sendStatus + '')}>
       <Timestamp timestamp={timestamp} />
-    </span>
+    </Slotted>
   ) : null;
 });
 

package/src/ActivityStatus/SendStatus/SendStatus.tsx

@@ -1,34 +1,28 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import React, { memo, useCallback } from 'react';
-import { any, literal, object, pipe, readonly, union, type InferInput } from 'valibot';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { FC, useCallback } from 'react';
+import type { WebChatActivity } from 'botframework-webchat-core';
 
-import useFocus from '../../hooks/useFocus';
 import { SENDING, SEND_FAILED, SENT } from '../../types/internal/SendStatus';
 import SendFailedRetry from './private/SendFailedRetry';
+import useFocus from '../../hooks/useFocus';
+import useStyleSet from '../../hooks/useStyleSet';
 
-import styles from '../ActivityStatus.module.css';
+import type { SendStatus as SendStatusType } from '../../types/internal/SendStatus';
 
 const { useLocalizer, usePostActivity } = hooks;
 
-const sendStatusPropsSchema = pipe(
-  object({
-    activity: any(),
-    sendStatus: union([literal(SENDING), literal(SEND_FAILED), literal(SENT)])
-  }),
-  readonly()
-);
-
-type SendStatusProps = InferInput<typeof sendStatusPropsSchema>;
-
-function SendStatus(props: SendStatusProps) {
-  const { activity, sendStatus } = validateProps(sendStatusPropsSchema, props);
+type SendStatusProps = {
+  activity: WebChatActivity;
+  sendStatus: SendStatusType;
+};
 
+const SendStatus: FC<SendStatusProps> = ({ activity, sendStatus }) => {
+  const [{ sendStatus: sendStatusStyleSet }] = useStyleSet();
   const focus = useFocus();
   const localize = useLocalizer();
   const postActivity = usePostActivity();
-  const classNames = useStyles(styles);
 
   const handleRetryClick = useCallback(() => {
     postActivity(activity);
@@ -41,7 +35,7 @@ function SendStatus(props: SendStatusProps) {
 
   return (
     <React.Fragment>
-      <span className={classNames['activity-status']}>
+      <span className={classNames('webchat__activity-status', 'webchat__activity-status--sending', sendStatusStyleSet)}>
         {sendStatus === SENDING ? (
           sendingText
         ) : sendStatus === SEND_FAILED ? (
@@ -52,7 +46,13 @@ function SendStatus(props: SendStatusProps) {
       </span>
     </React.Fragment>
   );
-}
+};
+
+SendStatus.propTypes = {
+  activity: PropTypes.any.isRequired,
+  // PropTypes cannot fully capture TypeScript types.
+  // @ts-ignore
+  sendStatus: PropTypes.oneOf([SENDING, SEND_FAILED, SENT]).isRequired
+};
 
-export default memo(SendStatus);
-export { sendStatusPropsSchema, type SendStatusProps };
+export default SendStatus;

package/src/ActivityStatus/Slotted.tsx

@@ -0,0 +1,26 @@
+import React, { Children, Fragment, memo, type PropsWithChildren } from 'react';
+import classNames from 'classnames';
+
+type Props = Readonly<PropsWithChildren<{ className?: string }>>;
+
+const Slotted = memo(({ children, className }: Props) => (
+  <span className={classNames('webchat__activity-status--slotted', className)}>
+    {Children.map(children, (child, index) =>
+      // TODO: We may be able to do this in pure CSS, say, :not(:first-child)::before { content: '|' }.
+      index ? (
+        <Fragment>
+          <span className="webchat__activity-status__slot-pipe" role="presentation">
+            {'|'}
+          </span>
+          {child}
+        </Fragment>
+      ) : (
+        child
+      )
+    )}
+  </span>
+));
+
+Slotted.displayName = 'SlottedActivityStatus';
+
+export default Slotted;

package/src/ActivityStatus/Timestamp.tsx

@@ -1,29 +1,24 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import React, { memo } from 'react';
-import { date, number, object, pipe, readonly, string, union, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
 import AbsoluteTime from './AbsoluteTime';
 import RelativeTime from './private/RelativeTime';
 
 const { useStyleOptions } = hooks;
 
-const timestampPropsSchema = pipe(
-  object({
-    timestamp: union([date(), number(), string()]) // TODO: Should limit to `Date`.
-  }),
-  readonly()
-);
-
-type TimestampProps = InferInput<typeof timestampPropsSchema>;
-
-function Timestamp(props: TimestampProps) {
-  const { timestamp } = validateProps(timestampPropsSchema, props);
+type TimestampProps = {
+  timestamp: string;
+};
 
+const Timestamp: FC<TimestampProps> = ({ timestamp }) => {
   const [{ timestampFormat }] = useStyleOptions();
 
   return timestampFormat === 'relative' ? <RelativeTime value={timestamp} /> : <AbsoluteTime value={timestamp} />;
-}
+};
+
+Timestamp.propTypes = {
+  timestamp: PropTypes.string.isRequired
+};
 
-export default memo(Timestamp);
-export { timestampPropsSchema, type TimestampProps };
+export default Timestamp;

package/src/ActivityStatus/private/Feedback/Feedback.tsx

@@ -0,0 +1,60 @@
+import { hooks } from 'botframework-webchat-api';
+import { type OrgSchemaAction } from 'botframework-webchat-core';
+import React, { Fragment, memo, useEffect, useState, type PropsWithChildren } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import FeedbackVoteButton from './private/VoteButton';
+
+const { usePonyfill, usePostActivity } = hooks;
+
+type Props = Readonly<
+  PropsWithChildren<{
+    actions: ReadonlySet<OrgSchemaAction>;
+  }>
+>;
+
+const DEBOUNCE_TIMEOUT = 500;
+
+const Feedback = memo(({ actions }: Props) => {
+  const [{ clearTimeout, setTimeout }] = usePonyfill();
+  const [selectedAction, setSelectedAction] = useState<OrgSchemaAction | undefined>();
+  const postActivity = usePostActivity();
+
+  const postActivityRef = useRefFrom(postActivity);
+
+  useEffect(() => {
+    if (!selectedAction) {
+      return;
+    }
+
+    const timeout = setTimeout(
+      () =>
+        // TODO: We should update this to use W3C Hydra.1
+        postActivityRef.current({
+          entities: [selectedAction],
+          name: 'webchat:activity-status/feedback',
+          type: 'event'
+        } as any),
+      DEBOUNCE_TIMEOUT
+    );
+
+    return () => clearTimeout(timeout);
+  }, [clearTimeout, postActivityRef, selectedAction, setTimeout]);
+
+  return (
+    <Fragment>
+      {Array.from(actions).map((action, index) => (
+        <FeedbackVoteButton
+          action={action}
+          key={action['@id'] || index}
+          onClick={setSelectedAction}
+          pressed={selectedAction === action}
+        />
+      ))}
+    </Fragment>
+  );
+});
+
+Feedback.displayName = 'ActivityStatusFeedback';
+
+export default Feedback;

package/src/ActivityStatus/private/Feedback/private/ThumbButton.Image.tsx

@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+
+import ThumbDislike16Filled from './icons/ThumbDislike16Filled';
+import ThumbDislike16Regular from './icons/ThumbDislike16Regular';
+import ThumbLike16Filled from './icons/ThumbLike16Filled';
+import ThumbLike16Regular from './icons/ThumbLike16Regular';
+
+type Props = Readonly<{
+  className?: string;
+  direction: 'down' | 'up';
+  filled?: boolean;
+}>;
+
+const ThumbButtonImage = memo(({ className, direction, filled = false }: Props) =>
+  direction === 'down' ? (
+    filled ? (
+      <ThumbDislike16Filled className={className} />
+    ) : (
+      <ThumbDislike16Regular className={className} />
+    )
+  ) : filled ? (
+    <ThumbLike16Filled className={className} />
+  ) : (
+    <ThumbLike16Regular className={className} />
+  )
+);
+
+ThumbButtonImage.displayName = 'ThumbButtonImage';
+
+export default ThumbButtonImage;

package/src/ActivityStatus/private/Feedback/private/ThumbButton.tsx

@@ -0,0 +1,54 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import React, { memo } from 'react';
+
+import ThumbButtonImage from './ThumbButton.Image';
+import useStyleSet from '../../../../hooks/useStyleSet';
+
+const { useLocalizer } = hooks;
+
+type Props = Readonly<{
+  direction: 'down' | 'up';
+  onClick?: () => void;
+  pressed?: boolean;
+}>;
+
+const ThumbButton = memo(({ direction, onClick, pressed }: Props) => {
+  const [{ thumbButton }] = useStyleSet();
+  const localize = useLocalizer();
+
+  const title = localize(direction === 'down' ? 'VOTE_DISLIKE_ALT' : 'VOTE_LIKE_ALT');
+
+  return (
+    <button
+      aria-label={title}
+      aria-pressed={pressed}
+      className={classNames(
+        'webchat__thumb-button',
+        { 'webchat__thumb-button--is-pressed': pressed },
+        thumbButton + ''
+      )}
+      onClick={onClick}
+      title={title}
+      type="button"
+    >
+      <ThumbButtonImage
+        className={classNames('webchat__thumb-button__image', {
+          'webchat__thumb-button__image--is-down': direction === 'down'
+        })}
+        direction={direction}
+      />
+      <ThumbButtonImage
+        className={classNames('webchat__thumb-button__image', 'webchat__thumb-button__image--is-filled', {
+          'webchat__thumb-button__image--is-down': direction === 'down'
+        })}
+        direction={direction}
+        filled={true}
+      />
+    </button>
+  );
+});
+
+ThumbButton.displayName = 'ThumbButton';
+
+export default ThumbButton;

package/src/ActivityStatus/private/Feedback/private/VoteButton.tsx

@@ -0,0 +1,36 @@
+import { onErrorResumeNext, parseVoteAction, type OrgSchemaAction } from 'botframework-webchat-core';
+import React, { memo, useCallback, useMemo } from 'react';
+import { useRefFrom } from 'use-ref-from';
+
+import ThumbsButton from './ThumbButton';
+
+type Props = Readonly<{
+  action: OrgSchemaAction;
+  onClick?: (action: OrgSchemaAction) => void;
+  pressed: boolean;
+}>;
+
+const FeedbackVoteButton = memo(({ action, onClick, pressed }: Props) => {
+  const onClickRef = useRefFrom(onClick);
+  const voteActionRef = useRefFrom(action);
+
+  const direction = useMemo(() => {
+    if (
+      action['@type'] === 'DislikeAction' ||
+      (action['@type'] === 'VoteAction' &&
+        onErrorResumeNext(() => parseVoteAction(action))?.actionOption === 'downvote')
+    ) {
+      return 'down';
+    }
+
+    return 'up';
+  }, [action]);
+
+  const handleClick = useCallback(() => onClickRef.current?.(voteActionRef.current), [onClickRef, voteActionRef]);
+
+  return <ThumbsButton direction={direction} onClick={handleClick} pressed={pressed} />;
+});
+
+FeedbackVoteButton.displayName = 'FeedbackVoteButton';
+
+export default FeedbackVoteButton;

package/src/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Filled.tsx

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+
+type Props = Readonly<{ className?: string }>;
+
+const ThumbDislike16Filled = memo(({ className }: Props) => (
+  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M13.0939 4.61984C12.716 2.60391 10.6934 1.34358 8.71713 1.89254L3.76706 3.26756C3.03196 3.47175 2.47706 4.07638 2.33656 4.82627L2.11258 6.02165C1.94781 6.90105 2.5733 7.6693 3.26989 7.95815C3.5248 8.06386 3.81627 8.21111 4.1232 8.41574C5.80215 9.53503 6.60359 11.0523 7.13855 12.3413C7.23478 12.5731 7.32706 12.8106 7.41614 13.0399C7.56235 13.4162 7.69994 13.7703 7.83227 14.041C7.94336 14.2683 8.07685 14.4964 8.2515 14.6716C8.43773 14.8585 8.68676 14.9995 9.00016 14.9995C9.35735 14.9995 9.66579 14.8763 9.91159 14.6602C10.1473 14.453 10.3051 14.179 10.4137 13.8989C10.6282 13.3453 10.6952 12.648 10.7032 12.0058C10.7114 11.3524 10.6585 10.705 10.6045 10.2249C10.5955 10.1452 10.5865 10.0698 10.5776 9.99952H11.0903C12.6557 9.99952 13.836 8.57733 13.5475 7.03879L13.0939 4.61984Z"
+      fill="currentcolor"
+    />
+  </svg>
+));
+
+ThumbDislike16Filled.displayName = 'ThumbDislike16Filled';
+
+export default ThumbDislike16Filled;

package/src/ActivityStatus/private/Feedback/private/icons/ThumbDislike16Regular.tsx

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+
+type Props = Readonly<{ className?: string }>;
+
+const ThumbDislike16Regular = memo(({ className }: Props) => (
+  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10.5776 9.99952C10.5944 10.133 10.6119 10.2848 10.6283 10.45C10.7019 11.1893 10.7593 12.2428 10.6146 13.1274C10.5427 13.5666 10.4137 14.0141 10.1727 14.3636C9.91609 14.7357 9.52604 14.9995 9.00016 14.9995C8.48357 14.9995 8.16907 14.6298 7.97616 14.3084C7.78384 13.9879 7.61527 13.553 7.44271 13.1078L7.42958 13.0739C6.88287 11.6637 6.13522 9.75708 4.1232 8.41574C3.81627 8.21111 3.5248 8.06386 3.26989 7.95815C2.5733 7.6693 1.94781 6.90105 2.11258 6.02165L2.33656 4.82627C2.47706 4.07638 3.03196 3.47175 3.76706 3.26756L8.71713 1.89254C10.6934 1.34358 12.716 2.60391 13.0939 4.61984L13.5475 7.03879C13.836 8.57733 12.6557 9.99952 11.0903 9.99952H10.5776ZM12.1111 4.80413C11.8411 3.36418 10.3964 2.46395 8.98478 2.85605L4.03471 4.23107C3.66715 4.33317 3.38971 4.63549 3.31945 5.01043L3.09548 6.20582C3.04235 6.48935 3.2566 6.87007 3.65293 7.03442C3.96222 7.16268 4.31198 7.33974 4.67791 7.58369C6.9648 9.10828 7.80648 11.2795 8.35387 12.6916L8.36197 12.7124C8.55151 13.2014 8.69067 13.5556 8.83359 13.7938C8.90275 13.909 8.95439 13.9644 8.98519 13.9886C8.99329 13.995 8.99862 13.9981 9.00124 13.9995C9.14311 13.9992 9.24643 13.9453 9.3495 13.7959C9.46849 13.6233 9.56579 13.3445 9.62769 12.966C9.75044 12.2154 9.70484 11.2689 9.63323 10.549C9.60484 10.2636 9.57314 10.0209 9.54862 9.85016C9.53637 9.76485 9.52595 9.69769 9.51867 9.65235L9.51029 9.60123L9.50819 9.58884L9.50772 9.58609C9.48227 9.44064 9.52236 9.29093 9.61735 9.17788C9.66884 9.11659 9.73358 9.06935 9.8056 9.03892C9.86646 9.01321 9.93252 8.99952 10.0002 8.99952H11.0903C12.0295 8.99952 12.7377 8.1462 12.5646 7.22308L12.1111 4.80413Z"
+      fill="currentcolor"
+    />
+  </svg>
+));
+
+ThumbDislike16Regular.displayName = 'ThumbDislike16Regular';
+
+export default ThumbDislike16Regular;

package/src/ActivityStatus/private/Feedback/private/icons/ThumbLike16Filled.tsx

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+
+type Props = Readonly<{ className?: string }>;
+
+const ThumbLike16Filled = memo(({ className }: Props) => (
+  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M9.5806 1.0516C8.83006 0.843 8.24411 1.40248 8.03494 1.92332C7.79411 2.52303 7.58243 2.94395 7.32941 3.44707C7.17287 3.75833 7.00052 4.10106 6.79565 4.53704C6.32141 5.54625 5.84755 6.19347 5.5035 6.58154C5.33128 6.77579 5.19093 6.90585 5.09835 6.98435C5.05204 7.02362 5.01761 7.05005 4.99704 7.0652L4.9809 7.07684L3.109 8.18119C2.27244 8.67473 1.91142 9.69797 2.25304 10.6072L2.77304 11.9912C2.98944 12.5671 3.45891 13.0114 4.04591 13.1958L9.40179 14.8781C10.7365 15.2974 12.1555 14.5397 12.5497 13.1973L13.9139 8.55127C14.29 7.2705 13.3298 5.9878 11.9949 5.9878H10.6099C10.6759 5.76117 10.7434 5.50906 10.8047 5.24751C10.9361 4.68641 11.0478 4.04484 11.0375 3.51008C11.028 3.01293 10.9778 2.49126 10.7735 2.04807C10.5544 1.57258 10.1709 1.21566 9.5806 1.0516ZM4.9768 7.07969L4.97492 7.08097L4.9768 7.07969Z"
+      fill="currentcolor"
+    />
+  </svg>
+));
+
+ThumbLike16Filled.displayName = 'ThumbLike16Filled';
+
+export default ThumbLike16Filled;

package/src/ActivityStatus/private/Feedback/private/icons/ThumbLike16Regular.tsx

@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+
+type Props = Readonly<{ className?: string }>;
+
+const ThumbLike16Regular = memo(({ className }: Props) => (
+  <svg className={className} fill="none" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.03494 1.92332C8.24411 1.40248 8.83006 0.843 9.5806 1.0516C10.1709 1.21566 10.5544 1.57258 10.7735 2.04807C10.9778 2.49126 11.028 3.01293 11.0375 3.51008C11.0478 4.04484 10.9361 4.68641 10.8047 5.24751C10.7434 5.50906 10.6759 5.76117 10.6099 5.9878H11.9949C13.3298 5.9878 14.29 7.2705 13.9139 8.55127L12.5497 13.1973C12.1555 14.5397 10.7365 15.2974 9.40179 14.8781L4.04591 13.1958C3.45891 13.0114 2.98944 12.5671 2.77304 11.9912L2.25304 10.6072C1.91142 9.69797 2.27244 8.67473 3.109 8.18119L4.98089 7.07684C4.98462 7.07423 4.99002 7.07037 4.99704 7.0652C5.01761 7.05005 5.05204 7.02362 5.09835 6.98435C5.19093 6.90585 5.33128 6.77579 5.5035 6.58154C5.84755 6.19347 6.32141 5.54625 6.79565 4.53704C7.00052 4.10106 7.17287 3.75833 7.32941 3.44707C7.58243 2.94395 7.79411 2.52303 8.03494 1.92332ZM5.51946 7.91969C5.51378 7.92334 5.50805 7.9269 5.50224 7.93032L3.61713 9.04247C3.19885 9.28924 3.01834 9.80086 3.18915 10.2555L3.70914 11.6394C3.81735 11.9274 4.05208 12.1496 4.34558 12.2418L9.70146 13.9241C10.5023 14.1756 11.3537 13.721 11.5902 12.9156L12.9544 8.26953C13.1424 7.62915 12.6623 6.9878 11.9949 6.9878H9.92587C9.76349 6.9878 9.61122 6.90894 9.51751 6.77632C9.42381 6.64369 9.40035 6.47382 9.4546 6.32077C9.55458 6.03869 9.70672 5.54998 9.83103 5.01941C9.95711 4.48125 10.0456 3.93709 10.0377 3.52931C10.0287 3.061 9.97907 2.71335 9.86536 2.46667C9.76654 2.25227 9.61384 2.09874 9.31282 2.01508C9.26971 2.0031 9.21948 2.0066 9.15353 2.04989C9.08149 2.09718 9.00781 2.18417 8.96291 2.29598C8.70922 2.92772 8.46651 3.41157 8.19787 3.94711C8.04311 4.25564 7.87974 4.58133 7.7007 4.96233C7.18681 6.05594 6.66067 6.78372 6.25176 7.24494C6.04749 7.47534 5.87312 7.6385 5.74509 7.74707C5.68109 7.80133 5.62875 7.84188 5.59013 7.87034C5.57082 7.88456 5.55495 7.89575 5.54277 7.90411L5.5273 7.91456L5.52171 7.91823L5.51946 7.91969ZM4.97612 7.08018L4.97492 7.08097L4.97612 7.08018Z"
+      fill="currentcolor"
+    />
+  </svg>
+));
+
+ThumbLike16Regular.displayName = 'ThumbLike16Regular';
+
+export default ThumbLike16Regular;

package/src/ActivityStatus/private/Originator.tsx

@@ -1,50 +1,27 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
+import { type OrgSchemaProject } from 'botframework-webchat-core';
 import React, { memo } from 'react';
-import { object, pipe, readonly, string, undefinedable, type InferInput } from 'valibot';
 
-import useSanitizeHrefCallback from '../../hooks/internal/useSanitizeHrefCallback';
+type Props = Readonly<{ project: OrgSchemaProject }>;
 
-import styles from '../ActivityStatus.module.css';
+const Originator = memo(({ project }: Props) => {
+  const { name, slogan, url } = project;
 
-const originatorPropsSchema = pipe(
-  object({
-    name: undefinedable(string()),
-    slogan: undefinedable(string()),
-    url: undefinedable(string())
-  }),
-  readonly()
-);
-
-type OriginatorProps = InferInput<typeof originatorPropsSchema>;
-
-// Regular function is better for React function component.
-// eslint-disable-next-line prefer-arrow-callback
-const Originator = memo(function Originator(props: OriginatorProps) {
-  const { name, slogan, url } = validateProps(originatorPropsSchema, props);
-
-  const sanitizeHref = useSanitizeHrefCallback();
-  const classNames = useStyles(styles);
-
-  const { sanitizedHref } = sanitizeHref(url);
   const text = slogan || name;
 
-  return sanitizedHref ? (
-    // Link is sanitized.
-    // eslint-disable-next-line react/forbid-elements
+  return url ? (
     <a
-      className={cx(classNames['activity-status__originator'], classNames['activity-status__originator--has-link'])}
-      href={sanitizedHref}
+      className="webchat__activity-status__originator webchat__activity-status__originator--has-link"
+      href={url}
       rel="noopener noreferrer"
       target="_blank"
     >
       {text}
     </a>
   ) : (
-    <span className={classNames['activity-status__originator']}>{text}</span>
+    <span className="webchat__activity-status__originator">{text}</span>
   );
 });
 
+Originator.displayName = 'Originator';
+
 export default Originator;
-export { originatorPropsSchema, type OriginatorProps };