botframework-webchat-component 4.18.2 → 4.19.0

package/src/ActivityFeedback/providers/useActivityFeedbackHooks.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import ActivityFeedbackContext, { type ActivityFeedbackContextType } from './private/ActivityFeedbackContext';
+
+export default function useActivityFeedbackHooks(): ActivityFeedbackContextType {
+  return useContext(ActivityFeedbackContext);
+}

package/src/ActivityStatus/AbsoluteTime.tsx

@@ -0,0 +1,37 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { hooks } from 'botframework-webchat-api';
+import React, { Fragment } from 'react';
+import { boolean, date, number, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
+
+import ScreenReaderText from '../ScreenReaderText';
+
+const { useDateFormatter, useLocalizer } = hooks;
+
+const absoluteTimePropsSchema = pipe(
+  object({
+    hide: optional(boolean(), false),
+    value: union([date(), number(), string()])
+  }),
+  readonly()
+);
+
+type AbsoluteTimeProps = InferInput<typeof absoluteTimePropsSchema>;
+
+const AbsoluteTime = (props: AbsoluteTimeProps) => {
+  const { hide, value } = validateProps(absoluteTimePropsSchema, props);
+
+  const localize = useLocalizer();
+  const formatDate = useDateFormatter();
+
+  const absoluteTime = formatDate(value);
+
+  return (
+    <Fragment>
+      <ScreenReaderText text={localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', absoluteTime)} />
+      {!hide && <span aria-hidden={true}>{absoluteTime}</span>}
+    </Fragment>
+  );
+};
+
+export default AbsoluteTime;
+export { absoluteTimePropsSchema, type AbsoluteTimeProps };

package/src/ActivityStatus/ActivityStatus.module.css

@@ -0,0 +1,31 @@
+:global(.webchat) .activity-status {
+  color: var(--webchat__color--timestamp);
+  font-family: var(--webchat__font--primary);
+  font-size: var(--webchat__font-size--small);
+  margin-block-start: calc(var(--webchat__padding--regular) / 2);
+
+  &.activity-status--slotted {
+    display: inline-flex;
+    gap: 4px;
+  }
+}
+
+:global(.webchat) .activity-status-slot {
+  display: contents;
+
+  &:not(:first-child)::before {
+    content: '|';
+  }
+
+  &:empty {
+    display: none;
+  }
+}
+
+:global(.webchat) .activity-status__originator {
+  align-items: center;
+
+  &.activity-status__originator--has-link {
+    color: var(--webchat__color--accent);
+  }
+}

package/src/ActivityStatus/OthersActivityStatus.tsx

@@ -1,30 +1,31 @@
-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 { 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 dereferenceBlankNodes from '../Utils/JSONLinkedData/dereferenceBlankNodes';
-import Feedback from './private/Feedback/Feedback';
 import Originator from './private/Originator';
-import Slotted from './Slotted';
+import StatusSlot from './StatusSlot';
 import Timestamp from './Timestamp';
 
-type Props = Readonly<{ activity: WebChatActivity }>;
+import styles from './ActivityStatus.module.css';
+
+const { useStyleOptions } = hooks;
+
+type Props = Readonly<{ activity: WebChatActivity; className?: string | undefined; slotted?: boolean }>;
 
 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 }: Props) => {
-  const [{ sendStatus }] = useStyleSet();
+const OthersActivityStatus = memo(({ activity, className, slotted }: Props) => {
+  const [{ feedbackActionsPlacement }] = useStyleOptions();
+  const classNames = useStyles(styles);
   const { timestamp } = activity;
   const graph = useMemo(() => dereferenceBlankNodes(activity.entities || []), [activity.entities]);
 
@@ -33,43 +34,28 @@ const OthersActivityStatus = memo(({ activity }: Props) => {
   const claimInterpreter = useMemo<OrgSchemaProject | undefined>(() => {
     try {
       if (messageThing) {
-        return parseClaim((messageThing?.citation || [])[0])?.claimInterpreter;
+        return parse(orgSchemaClaimSchema, messageThing?.citation[0]).claimInterpreter[0];
       }
 
-      const [firstClaim] = graph.filter(({ type }) => type === 'https://schema.org/Claim').map(parseClaim);
+      const [firstClaim] = graph
+        .filter(({ type }) => type === 'https://schema.org/Claim')
+        .map(claim => parse(orgSchemaClaimSchema, claim));
 
       if (firstClaim) {
         warnRootLevelThings();
 
-        return firstClaim?.claimInterpreter;
+        return firstClaim?.claimInterpreter[0];
       }
 
-      const replyAction = parseAction(graph.find(({ type }) => type === 'https://schema.org/ReplyAction'));
+      const replyAction = parse(
+        orgSchemaActionSchema,
+        graph.find(({ type }) => type === 'https://schema.org/ReplyAction')
+      );
 
       if (replyAction) {
         warnRootLevelThings();
 
-        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));
+        return replyAction?.provider[0];
       }
     } catch {
       // Intentionally left blank.
@@ -77,17 +63,30 @@ const OthersActivityStatus = memo(({ activity }: Props) => {
   }, [graph, messageThing]);
 
   return (
-    <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
+      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>
+    </span>
   );
 });
 

package/src/ActivityStatus/SelfActivityStatus.tsx

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

package/src/ActivityStatus/SendStatus/SendStatus.tsx

@@ -1,28 +1,34 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC, useCallback } from 'react';
-import type { WebChatActivity } from 'botframework-webchat-core';
+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 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 type { SendStatus as SendStatusType } from '../../types/internal/SendStatus';
+import styles from '../ActivityStatus.module.css';
 
 const { useLocalizer, usePostActivity } = hooks;
 
-type SendStatusProps = {
-  activity: WebChatActivity;
-  sendStatus: SendStatusType;
-};
+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);
 
-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);
@@ -35,7 +41,7 @@ const SendStatus: FC<SendStatusProps> = ({ activity, sendStatus }) => {
 
   return (
     <React.Fragment>
-      <span className={classNames('webchat__activity-status', 'webchat__activity-status--sending', sendStatusStyleSet)}>
+      <span className={classNames['activity-status']}>
         {sendStatus === SENDING ? (
           sendingText
         ) : sendStatus === SEND_FAILED ? (
@@ -46,13 +52,7 @@ const SendStatus: FC<SendStatusProps> = ({ activity, sendStatus }) => {
       </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 SendStatus;
+export default memo(SendStatus);
+export { sendStatusPropsSchema, type SendStatusProps };

package/src/ActivityStatus/StatusSlot.tsx

@@ -0,0 +1,17 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import React, { memo, ReactNode } from 'react';
+import cx from 'classnames';
+
+import styles from './ActivityStatus.module.css';
+
+type Props = Readonly<{ className?: string; children?: ReactNode | undefined }>;
+
+const StatusSlot = ({ children, className }: Props) => {
+  const classNames = useStyles(styles);
+
+  return <span className={cx(classNames['activity-status-slot'], className)}>{children}</span>;
+};
+
+StatusSlot.displayName = 'StatusSlot';
+
+export default memo(StatusSlot);

package/src/ActivityStatus/Timestamp.tsx

@@ -1,24 +1,29 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import React, { memo } from 'react';
+import { date, number, object, pipe, readonly, string, union, type InferInput } from 'valibot';
 
 import AbsoluteTime from './AbsoluteTime';
 import RelativeTime from './private/RelativeTime';
 
 const { useStyleOptions } = hooks;
 
-type TimestampProps = {
-  timestamp: string;
-};
+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);
 
-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 Timestamp;
+export default memo(Timestamp);
+export { timestampPropsSchema, type TimestampProps };

package/src/ActivityStatus/private/Originator.tsx

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

package/src/ActivityStatus/private/RelativeTime.tsx

@@ -0,0 +1,43 @@
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { hooks } from 'botframework-webchat-api';
+import React, { Fragment } from 'react';
+import { date, number, object, pipe, readonly, string, union, type InferInput } from 'valibot';
+
+import ScreenReaderText from '../../ScreenReaderText';
+import useForceRenderAtInterval from '../../hooks/internal/useForceRenderAtInterval';
+
+const { useDateFormatter, useLocalizer, usePonyfill, useRelativeTimeFormatter } = hooks;
+
+const TIMER_INTERVAL = 60000;
+
+const relativeTimePropsSchema = pipe(
+  object({
+    value: union([date(), number(), string()])
+  }),
+  readonly()
+);
+
+type RelativeTimeProps = InferInput<typeof relativeTimePropsSchema>;
+
+const RelativeTime = (props: RelativeTimeProps) => {
+  const { value } = validateProps(relativeTimePropsSchema, props);
+
+  const [{ Date }] = usePonyfill();
+  const formatDate = useDateFormatter();
+  const formatRelativeTime = useRelativeTimeFormatter();
+  const localize = useLocalizer();
+
+  const dateValue = new Date(value);
+
+  useForceRenderAtInterval(dateValue, TIMER_INTERVAL);
+
+  return (
+    <Fragment>
+      <ScreenReaderText text={localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', formatDate(dateValue))} />
+      <span aria-hidden={true}>{formatRelativeTime(dateValue)}</span>
+    </Fragment>
+  );
+};
+
+export default RelativeTime;
+export { relativeTimePropsSchema, type RelativeTimeProps };

package/src/Assets/TypingAnimation.js

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import React from 'react';
 
 import ScreenReaderText from '../ScreenReaderText';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import testIds from '../testIds';
 import useStyleSet from '../hooks/useStyleSet';
 
 const { useDirection, useLocalizer } = hooks;
@@ -31,6 +32,7 @@ const TypingAnimation = () => {
           rootClassName,
           typingAnimationStyleSet + ''
         )}
+        data-testid={testIds.typingIndicator}
       />
     </React.Fragment>
   );

package/src/Attachment/AudioContent.tsx

@@ -1,17 +1,24 @@
-import PropTypes from 'prop-types';
-import React, { FC } from 'react';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-type AudioContentProps = {
-  alt?: string;
-  autoPlay?: boolean;
-  loop?: boolean;
-  poster?: string;
-  src: string;
-};
+const audioContentPropsSchema = pipe(
+  object({
+    alt: optional(string()),
+    autoPlay: optional(boolean()),
+    loop: optional(boolean()),
+    poster: optional(string()),
+    src: string()
+  }),
+  readonly()
+);
 
-const AudioContent: FC<AudioContentProps> = ({ alt, autoPlay, loop, src }) => {
+type AudioContentProps = InferInput<typeof audioContentPropsSchema>;
+
+function AudioContent(props: AudioContentProps) {
+  const { alt, autoPlay = false, loop = false, src } = validateProps(audioContentPropsSchema, props);
   const [{ audioContent: audioContentStyleSet }] = useStyleSet();
 
   return (
@@ -24,23 +31,7 @@ const AudioContent: FC<AudioContentProps> = ({ alt, autoPlay, loop, src }) => {
       src={src}
     />
   );
-};
-
-AudioContent.defaultProps = {
-  alt: '',
-  autoPlay: false,
-  loop: false,
-  poster: ''
-};
-
-AudioContent.propTypes = {
-  alt: PropTypes.string,
-  autoPlay: PropTypes.bool,
-  loop: PropTypes.bool,
-  // We will keep the "poster" prop for #3315.
-  // eslint-disable-next-line react/no-unused-prop-types
-  poster: PropTypes.string,
-  src: PropTypes.string.isRequired
-};
+}
 
-export default AudioContent;
+export default memo(AudioContent);
+export { audioContentPropsSchema, type AudioContentProps };