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

package/src/ActivityStatus/private/RelativeTime.js

@@ -0,0 +1,31 @@
+import { hooks } from 'botframework-webchat-api';
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+
+import ScreenReaderText from '../../ScreenReaderText';
+import useForceRenderAtInterval from '../../hooks/internal/useForceRenderAtInterval';
+
+const { useDateFormatter, useLocalizer, useRelativeTimeFormatter } = hooks;
+
+const TIMER_INTERVAL = 60000;
+
+const RelativeTime = ({ value }) => {
+  const formatDate = useDateFormatter();
+  const formatRelativeTime = useRelativeTimeFormatter();
+  const localize = useLocalizer();
+
+  useForceRenderAtInterval(value, TIMER_INTERVAL);
+
+  return (
+    <Fragment>
+      <ScreenReaderText text={localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', formatDate(value))} />
+      <span aria-hidden={true}>{formatRelativeTime(value)}</span>
+    </Fragment>
+  );
+};
+
+RelativeTime.propTypes = {
+  value: PropTypes.string.isRequired
+};
+
+export default RelativeTime;

package/src/Assets/TypingAnimation.js

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

package/src/Attachment/Assets/DownloadIcon.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const ICON_SIZE_FACTOR = 22;
+
+const DownloadIcon = ({ className, size }) => (
+  <svg
+    className={className}
+    focusable={false}
+    height={ICON_SIZE_FACTOR * size}
+    role="presentation"
+    viewBox="0 0 31.8 46"
+    width={ICON_SIZE_FACTOR * size}
+  >
+    <path d="M26.8,23.8l-10.9,11L5,23.8l1.6-1.6l8.2,8.3V5H17v25.5l8.2-8.3L26.8,23.8z M5.8,41v-2.2H26V41H5.8z" />
+  </svg>
+);
+
+DownloadIcon.defaultProps = {
+  className: '',
+  size: 1
+};
+
+DownloadIcon.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.number
+};
+
+export default DownloadIcon;

package/src/Attachment/AudioContent.tsx

@@ -1,24 +1,17 @@
-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 PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const audioContentPropsSchema = pipe(
-  object({
-    alt: optional(string()),
-    autoPlay: optional(boolean()),
-    loop: optional(boolean()),
-    poster: optional(string()),
-    src: string()
-  }),
-  readonly()
-);
+type AudioContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
 
-type AudioContentProps = InferInput<typeof audioContentPropsSchema>;
-
-function AudioContent(props: AudioContentProps) {
-  const { alt, autoPlay = false, loop = false, src } = validateProps(audioContentPropsSchema, props);
+const AudioContent: FC<AudioContentProps> = ({ alt, autoPlay, loop, src }) => {
   const [{ audioContent: audioContentStyleSet }] = useStyleSet();
 
   return (
@@ -31,7 +24,23 @@ function AudioContent(props: AudioContentProps) {
       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 memo(AudioContent);
-export { audioContentPropsSchema, type AudioContentProps };
+export default AudioContent;

package/src/Attachment/FileContent.tsx

@@ -1,12 +1,11 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
-import React, { memo } from 'react';
-import { boolean, number, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import DownloadIcon from './Assets/DownloadIcon';
 import useStyleSet from '../hooks/useStyleSet';
-import { ComponentIcon } from '../Icon';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
 const { useByteFormatter, useDirection, useLocalizer } = hooks;
 
@@ -25,31 +24,17 @@ const ROOT_STYLE = {
   }
 };
 
-// TODO: Consider using `useSanitizeHrefCallback`, which underlying use `sanitize-html` or whatever in HTML content transformer.
 const ALLOWED_PROTOCOLS = ['blob:', 'data:', 'http:', 'https:'];
 
 function isAllowedProtocol(url) {
   try {
     return ALLOWED_PROTOCOLS.includes(new URL(url).protocol);
-  } catch {
+  } catch (err) {
     return false;
   }
 }
 
-const fileContentBadgePropsSchema = pipe(
-  object({
-    downloadIcon: optional(boolean()),
-    fileName: string(),
-    size: optional(number())
-  }),
-  readonly()
-);
-
-type FileContentBadgeProps = InferInput<typeof fileContentBadgePropsSchema>;
-
-const FileContentBadge = (props: FileContentBadgeProps) => {
-  const { downloadIcon = false, fileName, size } = validateProps(fileContentBadgePropsSchema, props);
-
+const FileContentBadge = ({ downloadIcon, fileName, size }) => {
   const [direction] = useDirection();
   const formatByte = useByteFormatter();
 
@@ -62,34 +47,37 @@ const FileContentBadge = (props: FileContentBadgeProps) => {
         {!!localizedSize && <div className="webchat__fileContent__size">{localizedSize}</div>}
       </div>
       {downloadIcon && (
-        <ComponentIcon
-          appearance="text"
+        <DownloadIcon
           className={classNames(
             'webchat__fileContent__downloadIcon',
             direction === 'rtl' && 'webchat__fileContent__downloadIcon--rtl'
           )}
-          icon="download"
+          size={1.5}
         />
       )}
     </React.Fragment>
   );
 };
 
-type FileContentProps = InferInput<typeof fileContentPropsSchema>;
+FileContentBadge.defaultProps = {
+  downloadIcon: false,
+  size: undefined
+};
 
-const fileContentPropsSchema = pipe(
-  object({
-    className: optional(string()),
-    fileName: string(),
-    href: optional(string()),
-    size: optional(number())
-  }),
-  readonly()
-);
+FileContentBadge.propTypes = {
+  downloadIcon: PropTypes.bool,
+  fileName: PropTypes.string.isRequired,
+  size: PropTypes.number
+};
 
-function FileContent(props: FileContentProps) {
-  const { className, href, fileName, size } = validateProps(fileContentPropsSchema, props);
+type FileContentProps = {
+  className?: string;
+  fileName: string;
+  href?: string;
+  size?: number;
+};
 
+const FileContent: FC<FileContentProps> = ({ className, href, fileName, size }) => {
   const [{ fileContent: fileContentStyleSet }] = useStyleSet();
   const localize = useLocalizer();
   const localizeBytes = useByteFormatter();
@@ -97,10 +85,10 @@ function FileContent(props: FileContentProps) {
 
   const localizedSize = typeof size === 'number' && localizeBytes(size);
 
-  const sanitizedHref = href && isAllowedProtocol(href) ? href : undefined;
+  href = href && isAllowedProtocol(href) ? href : undefined;
 
   const alt = localize(
-    sanitizedHref
+    href
       ? localizedSize
         ? 'FILE_CONTENT_DOWNLOADABLE_WITH_SIZE_ALT'
         : 'FILE_CONTENT_DOWNLOADABLE_ALT'
@@ -112,15 +100,15 @@ function FileContent(props: FileContentProps) {
   );
 
   return (
-    <div className={classNames('webchat__fileContent', rootClassName, fileContentStyleSet + '', className)}>
-      {sanitizedHref ? (
-        // URL is sanitized.
-        // eslint-disable-next-line react/forbid-elements
+    <div
+      className={classNames('webchat__fileContent', rootClassName, fileContentStyleSet + '', (className || '') + '')}
+    >
+      {href ? (
         <a
           aria-label={alt}
           className="webchat__fileContent__buttonLink"
           download={fileName}
-          href={sanitizedHref}
+          href={href}
           rel="noopener noreferrer"
           target="_blank"
         >
@@ -131,7 +119,19 @@ function FileContent(props: FileContentProps) {
       )}
     </div>
   );
-}
+};
+
+FileContent.defaultProps = {
+  className: '',
+  href: undefined,
+  size: undefined
+};
+
+FileContent.propTypes = {
+  className: PropTypes.string,
+  fileName: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  size: PropTypes.number
+};
 
-export default memo(FileContent);
-export { fileContentPropsSchema, type FileContentProps };
+export default FileContent;

package/src/Attachment/HTMLVideoContent.tsx

@@ -1,25 +1,17 @@
-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 PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
 import useStyleSet from '../hooks/useStyleSet';
 
-const htmlVideoContentPropsSchema = pipe(
-  object({
-    alt: optional(string()),
-    autoPlay: optional(boolean()),
-    loop: optional(boolean()),
-    poster: optional(string()),
-    src: string()
-  }),
-  readonly()
-);
-
-type HTMLVideoContentProps = InferInput<typeof htmlVideoContentPropsSchema>;
-
-function HTMLVideoContent(props: HTMLVideoContentProps) {
-  const { alt, autoPlay = false, loop = false, poster, src } = validateProps(htmlVideoContentPropsSchema, props);
+type HTMLVideoContentProps = {
+  alt?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  poster?: string;
+  src: string;
+};
 
+const HTMLVideoContent: FC<HTMLVideoContentProps> = ({ alt, autoPlay, loop, poster, src }) => {
   const [{ videoContent: videoContentStyleSet }] = useStyleSet();
 
   return (
@@ -33,7 +25,21 @@ function HTMLVideoContent(props: HTMLVideoContentProps) {
       src={src}
     />
   );
-}
+};
+
+HTMLVideoContent.defaultProps = {
+  alt: '',
+  autoPlay: false,
+  loop: false,
+  poster: ''
+};
+
+HTMLVideoContent.propTypes = {
+  alt: PropTypes.string,
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  poster: PropTypes.string,
+  src: PropTypes.string.isRequired
+};
 
-export default memo(HTMLVideoContent);
-export { htmlVideoContentPropsSchema, type HTMLVideoContentProps };
+export default HTMLVideoContent;

package/src/Attachment/ImageAttachment.js

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import ImageContent from './ImageContent';
+import readDataURIToBlob from '../Utils/readDataURIToBlob';
+
+const ImageAttachment = ({ attachment }) => {
+  let imageURL = attachment.thumbnailUrl || attachment.contentUrl;
+
+  // To support Content Security Policy, data URI cannot be used.
+  // We need to parse the data URI into a blob: URL.
+  const blob = readDataURIToBlob(imageURL);
+
+  if (blob) {
+    imageURL = URL.createObjectURL(blob);
+  }
+
+  return <ImageContent alt={attachment.name} src={imageURL} />;
+};
+
+ImageAttachment.propTypes = {
+  // Either attachment.contentUrl or attachment.thumbnailUrl must be specified.
+  attachment: PropTypes.oneOfType([
+    PropTypes.shape({
+      contentUrl: PropTypes.string.isRequired,
+      name: PropTypes.string,
+      thumbnailUrl: PropTypes.string
+    }),
+    PropTypes.shape({
+      contentUrl: PropTypes.string,
+      name: PropTypes.string,
+      thumbnailUrl: PropTypes.string.isRequired
+    })
+  ]).isRequired
+};
+
+export default ImageAttachment;

package/src/Attachment/ImageContent.tsx

@@ -1,15 +1,29 @@
-import React, { memo } from 'react';
-
-import FixedWidthImage from '../Utils/FixedWidthImage';
-
-const ImageContent = memo(
-  ({
-    alt,
-    src
-  }: Readonly<{
-    alt?: string;
-    src: string;
-  }>) => <FixedWidthImage alt={alt || ''} src={src} />
-);
+import { hooks } from 'botframework-webchat-api';
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
+
+import CroppedImage from '../Utils/CroppedImage';
+
+const { useStyleOptions } = hooks;
+
+type ImageContentProps = {
+  alt?: string;
+  src: string;
+};
+
+const ImageContent: FC<ImageContentProps> = ({ alt, src }) => {
+  const [{ bubbleImageHeight }] = useStyleOptions();
+
+  return <CroppedImage alt={alt} height={bubbleImageHeight} src={src} width="100%" />;
+};
+
+ImageContent.defaultProps = {
+  alt: ''
+};
+
+ImageContent.propTypes = {
+  alt: PropTypes.string,
+  src: PropTypes.string.isRequired
+};
 
 export default ImageContent;

package/src/Attachment/Text/TextAttachment.tsx

@@ -1,44 +1,20 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import React, { memo } from 'react';
-import { any, custom, is, object, optional, pipe, readonly, startsWith, string, type InferInput } from 'valibot';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, type FC } from 'react';
 
+import { type WebChatAttachment } from '../private/types/WebChatAttachment';
 import TextContent from './TextContent';
 
-const directLineAttachmentSchema = pipe(
-  object({
-    content: optional(string()),
-    contentType: string(),
-    contentUrl: optional(string()),
-    name: optional(string()),
-    thumbnailUrl: optional(string())
-  }),
-  readonly()
-);
+type Props = Readonly<{
+  activity: WebChatActivity;
+  attachment: WebChatAttachment & {
+    contentType: `text/${string}`;
+  };
+}>;
 
-const textAttachmentPropsSchema = pipe(
-  object({
-    activity: any(),
-    attachment: pipe(
-      object({
-        ...directLineAttachmentSchema.entries,
-        contentType: custom<`text/${string}`>(value => is(pipe(string(), startsWith('text/')), value))
-      }),
-      readonly()
-    )
-  }),
-  readonly()
-);
+const TextAttachment: FC<Props> = memo(({ activity, attachment: { content, contentType } }: Props) => (
+  <TextContent activity={activity} contentType={contentType} text={content} />
+));
 
-type TextAttachmentProps = InferInput<typeof textAttachmentPropsSchema>;
+TextAttachment.displayName = 'TextAttachment';
 
-function TextAttachment(props: TextAttachmentProps) {
-  const {
-    activity,
-    attachment: { content, contentType }
-  } = validateProps(textAttachmentPropsSchema, props);
-
-  return <TextContent activity={activity} contentType={contentType} text={content} />;
-}
-
-export default memo(TextAttachment);
-export { textAttachmentPropsSchema, type TextAttachmentProps };
+export default TextAttachment;

package/src/Attachment/Text/TextContent.tsx

@@ -1,54 +1,30 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import { hooks } from 'botframework-webchat-api';
-import React, { memo, useMemo } from 'react';
+import React, { type FC, memo } from 'react';
 
-import { any, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
-import useRenderMarkdownAsHTML from '../../hooks/useRenderMarkdownAsHTML';
-import isAIGeneratedActivity from './private/isAIGeneratedActivity';
 import MarkdownTextContent from './private/MarkdownTextContent';
 import PlainTextContent from './private/PlainTextContent';
+import useRenderMarkdownAsHTML from '../../hooks/useRenderMarkdownAsHTML';
 
-import styles from './TextContent.module.css';
-
-const { useLocalizer } = hooks;
-
-const textContentPropsSchema = pipe(
-  object({
-    activity: any(),
-    contentType: optional(string()),
-    text: string()
-  }),
-  readonly()
-);
-
-type TextContentProps = InferInput<typeof textContentPropsSchema>;
+import { type WebChatActivity } from 'botframework-webchat-core';
 
-function TextContent(props: TextContentProps) {
-  const { activity, contentType = 'text/plain', text } = validateProps(textContentPropsSchema, props);
+type Props = Readonly<{
+  activity: WebChatActivity;
+  contentType?: string;
+  text: string;
+}>;
 
-  const classNames = useStyles(styles);
+const TextContent: FC<Props> = memo(({ activity, contentType = 'text/plain', text }: Props) => {
   const supportMarkdown = !!useRenderMarkdownAsHTML('message activity');
-  const localize = useLocalizer();
-
-  const generatedBadge = useMemo(
-    () =>
-      isAIGeneratedActivity(activity) && (
-        <div className={classNames['text-content__generated-badge']}>{localize('ACTIVITY_CONTENT_CAUTION')}</div>
-      ),
-    [activity, classNames, localize]
-  );
 
   return text ? (
     contentType === 'text/markdown' && supportMarkdown ? (
-      <MarkdownTextContent activity={activity} markdown={text}>
-        {generatedBadge}
-      </MarkdownTextContent>
+      <MarkdownTextContent activity={activity} markdown={text} />
     ) : (
-      <PlainTextContent text={text}>{generatedBadge}</PlainTextContent>
+      <PlainTextContent text={text} />
     )
   ) : null;
-}
+});
+
+TextContent.defaultProps = { contentType: 'text/plain' };
+TextContent.displayName = 'TextContent';
 
-export default memo(TextContent);
-export { textContentPropsSchema, type TextContentProps };
+export default TextContent;

package/src/Attachment/Text/private/CitationModalContent.tsx

@@ -1,46 +1,39 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
-import React, { Fragment, memo, useMemo } from 'react';
-import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+import classNames from 'classnames';
+import React, { Fragment, memo } from 'react';
 
 import useRenderMarkdownAsHTML from '../../../hooks/useRenderMarkdownAsHTML';
+import useStyleSet from '../../../hooks/useStyleSet';
 
-import styles from './CitationModal.module.css';
+type Props = Readonly<{
+  headerText?: string;
+  markdown: string;
+}>;
 
-const citationModalContentPropsSchema = pipe(
-  object({
-    headerText: optional(string()),
-    markdown: string()
-  }),
-  readonly()
-);
-
-type CitationModalContentProps = InferInput<typeof citationModalContentPropsSchema>;
-
-function CitationModalContent(props: CitationModalContentProps) {
-  const { headerText, markdown } = validateProps(citationModalContentPropsSchema, props);
-
-  const classNames = useStyles(styles);
+const CitationModalContent = memo(({ headerText, markdown }: Props) => {
+  const [{ renderMarkdown: renderMarkdownStyleSet }] = useStyleSet();
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML('citation modal');
-  const html = useMemo(() => ({ __html: renderMarkdownAsHTML(markdown) }), [markdown, renderMarkdownAsHTML]);
 
   return (
     <Fragment>
-      {headerText && <h2 className={classNames['citation-modal-dialog__header']}>{headerText}</h2>}
+      {headerText && <h2 className="webchat__citation-modal-dialog__header">{headerText}</h2>}
       {renderMarkdownAsHTML ? (
         <div
-          className={cx(classNames['citation-modal-dialog__body'], 'render-markdown')}
+          className={classNames(
+            'webchat__citation-modal-dialog__body',
+            'webchat__render-markdown',
+            renderMarkdownStyleSet + ''
+          )}
           // The content rendered by `renderMarkdownAsHTML` is sanitized.
           // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={html}
+          dangerouslySetInnerHTML={{ __html: renderMarkdownAsHTML(markdown) }}
         />
       ) : (
-        <div className="render-markdown">{markdown}</div>
+        <div className={classNames('webchat__render-markdown', renderMarkdownStyleSet + '')}>{markdown}</div>
       )}
     </Fragment>
   );
-}
+});
+
+CitationModalContent.displayName = 'CitationModalContent';
 
-export default memo(CitationModalContent);
-export { citationModalContentPropsSchema, type CitationModalContentProps };
+export default CitationModalContent;