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

package/src/ConnectivityStatus/Connecting.js

@@ -0,0 +1,72 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+import ScreenReaderText from '../ScreenReaderText';
+import SpinnerAnimation from './Assets/SpinnerAnimation';
+import useForceRender from '../hooks/internal/useForceRender';
+import useStyleSet from '../hooks/useStyleSet';
+import useTimer from '../hooks/internal/useTimer';
+import WarningNotificationIcon from './Assets/WarningNotificationIcon';
+
+const { useDirection, useLocalizer, usePonyfill, useStyleOptions } = hooks;
+
+const ConnectivityStatusConnecting = ({ reconnect }) => {
+  const [{ Date }] = usePonyfill();
+  const [{ slowConnectionAfter }] = useStyleOptions();
+  const [
+    { connectivityNotification: connectivityNotificationStyleSet, warningNotification: warningNotificationStyleSet }
+  ] = useStyleSet();
+  const [direction] = useDirection();
+  const [initialRenderAt] = useState(() => Date.now());
+  const forceRender = useForceRender();
+  const localize = useLocalizer();
+
+  const initialConnectionText = localize('CONNECTIVITY_STATUS_ALT_CONNECTING');
+  const interruptedConnectionText = localize('CONNECTIVITY_STATUS_ALT_RECONNECTING');
+  const slowConnectionText = localize('CONNECTIVITY_STATUS_ALT_SLOW_CONNECTION');
+
+  useTimer(initialRenderAt + slowConnectionAfter, forceRender);
+
+  const now = Date.now();
+  const slow = now >= initialRenderAt + slowConnectionAfter;
+
+  return slow ? (
+    <React.Fragment>
+      <ScreenReaderText text={localize('CONNECTIVITY_STATUS_ALT', slowConnectionText)} />
+      <div
+        aria-hidden={true}
+        className={classNames('webchat__connectivityStatus', warningNotificationStyleSet + '')}
+        dir={direction}
+      >
+        <WarningNotificationIcon />
+        {slowConnectionText}
+      </div>
+    </React.Fragment>
+  ) : (
+    <React.Fragment>
+      <ScreenReaderText
+        text={localize('CONNECTIVITY_STATUS_ALT', reconnect ? interruptedConnectionText : initialConnectionText)}
+      />
+      <div
+        aria-hidden={true}
+        className={classNames('webchat__connectivityStatus', connectivityNotificationStyleSet + '')}
+        dir={direction}
+      >
+        <SpinnerAnimation />
+        {reconnect ? interruptedConnectionText : initialConnectionText}
+      </div>
+    </React.Fragment>
+  );
+};
+
+ConnectivityStatusConnecting.defaultProps = {
+  reconnect: false
+};
+
+ConnectivityStatusConnecting.propTypes = {
+  reconnect: PropTypes.bool
+};
+
+export default ConnectivityStatusConnecting;

package/src/Dictation.js

@@ -1,9 +1,9 @@
 import { hooks } from 'botframework-webchat-api';
 // TODO: [P1] #3350 No import from internal, we need to move setDictateState from bf-wc-core (Redux) to React Context.
-import { useSetDictateState } from 'botframework-webchat-api/internal.js';
+import { useSetDictateState } from 'botframework-webchat-api/internal';
 import { Constants } from 'botframework-webchat-core';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { Composer as DictateComposer } from 'react-dictate-button';
 
 import useResumeAudioContext from './hooks/internal/useResumeAudioContext';
@@ -11,17 +11,17 @@ import useSettableDictateAbortable from './hooks/internal/useSettableDictateAbor
 import useWebSpeechPonyfill from './hooks/useWebSpeechPonyfill';
 
 const {
+  useActivities,
   useDictateInterims,
   useDictateState,
+  useDisabled,
   useEmitTypingIndicator,
   useLanguage,
   useSendBoxValue,
   useSendTypingIndicator,
   useShouldSpeakIncomingActivity,
   useStopDictate,
-  useStyleOptions,
-  useSubmitSendBox,
-  useUIState
+  useSubmitSendBox
 } = hooks;
 
 const {
@@ -34,21 +34,28 @@ const Dictation = ({ onError }) => {
   const [, setSendBox] = useSendBoxValue();
   const [, setShouldSpeakIncomingActivity] = useShouldSpeakIncomingActivity();
   const [{ SpeechGrammarList, SpeechRecognition } = {}] = useWebSpeechPonyfill();
-  const [{ speechRecognitionContinuous }] = useStyleOptions();
+  const [activities] = useActivities();
   const [dictateState] = useDictateState();
+  const [disabled] = useDisabled();
   const [sendTypingIndicator] = useSendTypingIndicator();
   const [speechLanguage] = useLanguage('speech');
-  const [uiState] = useUIState();
   const emitTypingIndicator = useEmitTypingIndicator();
   const resumeAudioContext = useResumeAudioContext();
   const setDictateState = useSetDictateState();
   const stopDictate = useStopDictate();
   const submitSendBox = useSubmitSendBox();
 
+  const numSpeakingActivities = useMemo(
+    () => activities.filter(({ channelData: { speak } = {} }) => speak).length,
+    [activities]
+  );
+
   const handleDictate = useCallback(
     ({ result: { confidence, transcript } = {} }) => {
       if (dictateState === DICTATING || dictateState === STARTING) {
         setDictateInterims([]);
+        setDictateState(IDLE);
+        stopDictate();
 
         if (transcript) {
           setSendBox(transcript);
@@ -57,7 +64,15 @@ const Dictation = ({ onError }) => {
         }
       }
     },
-    [dictateState, setDictateInterims, setSendBox, submitSendBox, setShouldSpeakIncomingActivity]
+    [
+      dictateState,
+      setDictateInterims,
+      setDictateState,
+      stopDictate,
+      setSendBox,
+      submitSendBox,
+      setShouldSpeakIncomingActivity
+    ]
   );
 
   const handleDictating = useCallback(
@@ -74,11 +89,6 @@ const Dictation = ({ onError }) => {
     [dictateState, emitTypingIndicator, sendTypingIndicator, setDictateAbortable, setDictateInterims, setDictateState]
   );
 
-  const handleEnd = useCallback(() => {
-    dictateState !== IDLE && setDictateState(IDLE);
-    (dictateState === DICTATING || dictateState === STARTING) && stopDictate();
-  }, [dictateState, setDictateState, stopDictate]);
-
   const handleError = useCallback(
     event => {
       dictateState !== IDLE && setDictateState(IDLE);
@@ -97,15 +107,13 @@ const Dictation = ({ onError }) => {
 
   return (
     <DictateComposer
-      continuous={speechRecognitionContinuous}
       lang={speechLanguage}
       onDictate={handleDictate}
-      onEnd={handleEnd}
       onError={handleError}
       onProgress={handleDictating}
       speechGrammarList={SpeechGrammarList}
       speechRecognition={SpeechRecognition}
-      started={uiState !== 'disabled' && (dictateState === STARTING || dictateState === DICTATING)}
+      started={!disabled && (dictateState === STARTING || dictateState === DICTATING) && !numSpeakingActivities}
     />
   );
 };

package/src/ErrorBox.tsx

@@ -1,73 +1,45 @@
 /* eslint no-console: "off" */
 
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { hooks } from 'botframework-webchat-api';
-import React, { Fragment, memo, useEffect } from 'react';
-import { object, optional, pipe, readonly, string, unknown, type InferInput } from 'valibot';
+import PropTypes from 'prop-types';
+import React, { FC } from 'react';
 
-import useStyleSet from './hooks/useStyleSet';
 import ScreenReaderText from './ScreenReaderText';
+import useStyleSet from './hooks/useStyleSet';
 
-const { useLocalizer, useTrackException } = hooks;
-
-/**
- * @deprecated This component is deprecated and will be removed on or after 2027-08-16.
- */
-const errorBoxPropsSchema = pipe(
-  object({
-    error: unknown(),
-    type: optional(string())
-  }),
-  readonly()
-);
-
-/**
- * @deprecated This component is deprecated and will be removed on or after 2027-08-16.
- */
-type ErrorBoxProps = InferInput<typeof errorBoxPropsSchema>;
+const { useLocalizer } = hooks;
 
-/**
- * @deprecated This component is deprecated and will be removed on or after 2027-08-16.
- */
-function ErrorBox(props: ErrorBoxProps) {
-  const { error, type = '' } = validateProps(errorBoxPropsSchema, props);
+type ErrorBoxProps = {
+  error: Error;
+  type?: string;
+};
 
+const ErrorBox: FC<ErrorBoxProps> = ({ error, type }) => {
   const [{ errorBox: errorBoxStyleSet }] = useStyleSet();
   const localize = useLocalizer();
-  const trackException = useTrackException();
-
-  useEffect(() => {
-    let rectifiedError: Error;
-
-    if (error instanceof Error) {
-      rectifiedError = error;
-    } else {
-      rectifiedError = new Error('Unknown error occured');
-      rectifiedError.cause = error;
-    }
-
-    trackException(rectifiedError, false);
-  }, [error, trackException]);
 
   return (
-    <Fragment>
+    <React.Fragment>
       <ScreenReaderText text={localize('ACTIVITY_ERROR_BOX_TITLE')} />
       <div className={errorBoxStyleSet}>
         <div>{type}</div>
         {/* The callstack between production and development are different, thus, we should hide it for visual regression test */}
-        {error instanceof Error ? (
-          <details>
-            <summary>{error.message}</summary>
-            <pre>{error.stack}</pre>
-          </details>
-        ) : (
-          // eslint-disable-next-line no-magic-numbers
-          <pre>{JSON.stringify(error, null, 2)}</pre>
-        )}
+        <details>
+          <summary>{error.message}</summary>
+          <pre>{error.stack}</pre>
+        </details>
       </div>
-    </Fragment>
+    </React.Fragment>
   );
-}
+};
+
+ErrorBox.defaultProps = {
+  type: ''
+};
+
+ErrorBox.propTypes = {
+  error: PropTypes.instanceOf(Error).isRequired,
+  type: PropTypes.string
+};
 
-export default memo(ErrorBox);
-export { errorBoxPropsSchema, type ErrorBoxProps };
+export default ErrorBox;

package/src/LinkDefinition/LinkDefinitionItem.tsx

@@ -1,52 +1,29 @@
-import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
-import cx from 'classnames';
 import React, { memo, useCallback, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
-import { custom, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import ItemBody from './private/ItemBody';
 import extractHostnameWithSubdomain from './private/extractHostnameWithSubdomain';
 
-import styles from './LinkDefinitions.module.css';
+type Props = Readonly<{
+  // The text (usually a number) displayed to the left of the item (e.g. "1")
+  identifier?: string;
 
-const linkDefinitionItemPropsSchema = pipe(
-  object({
-    // Displayed beneath the main link of the citation if it exists
-    badgeName: optional(string()),
+  // The main text of the citation. This will be formatted as if it were a link. If this is nullish and a URL exists, its host will be displayed instead.
+  text?: string;
 
-    // Used as a tooltip and ARIA label for the item's displayed badgeName
-    badgeTitle: optional(string()),
+  // Displayed beneath the main link of the citation if it exists
+  badgeName?: string;
 
-    // The text (usually a number) displayed to the left of the item (e.g. "1")
-    identifier: optional(string()),
+  // Used as a tooltip and ARIA label for the item's displayed badgeName
+  badgeTitle?: string;
 
-    onClick: optional(
-      custom<(event: Pick<CustomEvent, 'defaultPrevented' | 'preventDefault' | 'type'>) => void>(
-        value => typeof value === 'function'
-      )
-    ),
+  // If the citation is an external link, this is its destination.
+  url?: string;
 
-    // If the citation is an external link, this is its destination.
-    sanitizedHref: optional(string()),
-
-    // The main text of the citation. This will be formatted as if it were a link. If this is nullish and a URL exists, its host will be displayed instead.
-    text: optional(string())
-  }),
-  readonly()
-);
-
-type LinkDefinitionItemProps = InferInput<typeof linkDefinitionItemPropsSchema>;
-
-// eslint-disable-next-line prefer-arrow-callback
-const LinkDefinitionItem = memo(function LinkDefinitionItem(props: LinkDefinitionItemProps) {
-  const { badgeName, badgeTitle, identifier, onClick, sanitizedHref, text } = validateProps(
-    linkDefinitionItemPropsSchema,
-    props
-  );
-
-  const classNames = useStyles(styles);
+  onClick?: (event: Pick<CustomEvent, 'defaultPrevented' | 'preventDefault' | 'type'>) => void;
+}>;
 
+const LinkDefinitionItem = memo(({ badgeName, badgeTitle, identifier, onClick, text, url }: Props) => {
   const onClickRef = useRefFrom(onClick);
 
   const handleClick = useCallback<MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>>(
@@ -64,15 +41,10 @@ const LinkDefinitionItem = memo(function LinkDefinitionItem(props: LinkDefinitio
     [onClickRef]
   );
 
-  return sanitizedHref ? (
-    // URL is sanitized.
-    // eslint-disable-next-line react/forbid-elements
+  return url ? (
     <a
-      className={cx(
-        classNames['link-definitions__list-item-box'],
-        classNames['link-definitions__list-item-box--as-link']
-      )}
-      href={sanitizedHref}
+      className="webchat__link-definitions__list-item-box webchat__link-definitions__list-item-box--as-link"
+      href={url}
       onClick={handleClick}
       rel="noopener noreferrer"
       target="_blank"
@@ -82,15 +54,12 @@ const LinkDefinitionItem = memo(function LinkDefinitionItem(props: LinkDefinitio
         badgeTitle={badgeTitle}
         identifier={identifier}
         isExternal={true}
-        text={text || extractHostnameWithSubdomain(sanitizedHref)}
+        text={text || extractHostnameWithSubdomain(url)}
       />
     </a>
   ) : (
     <button
-      className={cx(
-        classNames['link-definitions__list-item-box'],
-        classNames['link-definitions__list-item-box--as-button']
-      )}
+      className="webchat__link-definitions__list-item-box webchat__link-definitions__list-item-box--as-button"
       onClick={handleClick}
       type="button"
     >
@@ -99,5 +68,6 @@ const LinkDefinitionItem = memo(function LinkDefinitionItem(props: LinkDefinitio
   );
 });
 
+LinkDefinitionItem.displayName = 'LinkDefinitionItem';
+
 export default LinkDefinitionItem;
-export { linkDefinitionItemPropsSchema, type LinkDefinitionItemProps };

package/src/LinkDefinition/LinkDefinitions.tsx

@@ -1,23 +1,11 @@
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import cx from 'classnames';
-import random from 'math-random';
-import React, {
-  Children,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-  type ComponentType,
-  type ReactEventHandler,
-  type ReactNode
-} from 'react';
+import classNames from 'classnames';
+import React, { Children, type ComponentType, type ReactNode } from 'react';
 
-import { ComponentIcon } from '../Icon';
+import useStyleSet from '../hooks/useStyleSet';
+import Chevron from './private/Chevron';
 
-import styles from './LinkDefinitions.module.css';
-
-const { useLocalizer, useStyleOptions } = hooks;
+const { useLocalizer } = hooks;
 const { count: childrenCount, map: childrenMap } = Children;
 
 type Props<TAccessoryProps> = Readonly<{
@@ -34,84 +22,31 @@ const REFERENCE_LIST_HEADER_IDS = {
   two: 'REFERENCE_LIST_HEADER_TWO'
 };
 
-function uniqueId(count = Infinity) {
-  return (
-    random()
-      // eslint-disable-next-line no-magic-numbers
-      .toString(36)
-      // eslint-disable-next-line no-magic-numbers
-      .substring(2, 2 + count)
-  );
-}
-
-// Following @types/react to use {} for props.
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-const LinkDefinitions = <TAccessoryProps extends {}>({
+const LinkDefinitions = <TAccessoryProps extends object>({
   accessoryComponentType,
   accessoryProps,
   children
 }: Props<TAccessoryProps>) => {
-  const [id] = useState(() => `webchat-link-definitions-${uniqueId()}`);
+  const [{ linkDefinitions }] = useStyleSet();
   const localizeWithPlural = useLocalizer({ plural: true });
-  const summaryRef = useRef<HTMLElement>(null);
-  const classNames = useStyles(styles);
-  const [{ referenceListDefaultOpen }] = useStyleOptions();
 
   const headerText = localizeWithPlural(REFERENCE_LIST_HEADER_IDS, childrenCount(children));
 
-  const defaultOpenString = useMemo(() => (referenceListDefaultOpen ? 'true' : 'false'), [referenceListDefaultOpen]);
-
-  const handleToggle = useCallback<ReactEventHandler<HTMLDetailsElement>>(event => {
-    const summary = summaryRef.current;
-    const details = event.target;
-    if (summary && details && details instanceof HTMLDetailsElement) {
-      const isDetailsOpen = details.open.toString();
-      summary.setAttribute('aria-expanded', isDetailsOpen);
-      summary.setAttribute('aria-pressed', isDetailsOpen);
-    }
-  }, []);
-
   return (
-    <details
-      className={classNames['link-definitions']}
-      // eslint-disable-next-line react/forbid-dom-props
-      id={id}
-      onToggle={handleToggle}
-      open={referenceListDefaultOpen}
-    >
-      <summary
-        aria-controls={id}
-        aria-expanded={defaultOpenString}
-        aria-pressed={defaultOpenString}
-        className={classNames['link-definitions__header']}
-        ref={summaryRef}
-        role="button"
-      >
-        <div
-          className={cx(
-            classNames['link-definitions__header-section'],
-            classNames['link-definitions__header-section--left']
-          )}
-        >
-          <div className={classNames['link-definitions__header-text']}>{headerText}</div>
-          <ComponentIcon appearance="text" className={classNames['link-definitions__header-chevron']} icon="chevron" />
-        </div>
-        <div
-          className={cx(
-            classNames['link-definitions__header-section'],
-            classNames['link-definitions__header-section--right']
-          )}
-        >
-          {accessoryComponentType && (
-            <div className={classNames['link-definitions__header-accessory']}>
-              {React.createElement(accessoryComponentType, accessoryProps)}
-            </div>
-          )}
-        </div>
+    <details className={classNames(linkDefinitions, 'webchat__link-definitions')} open={true}>
+      <summary className="webchat__link-definitions__header">
+        <div className="webchat__link-definitions__header-text">{headerText}</div>
+        <Chevron />
+        <div className="webchat__link-definitions__header-filler" />
+        {accessoryComponentType && (
+          <div className="webchat__link-definitions__header-accessory">
+            {React.createElement(accessoryComponentType, accessoryProps)}
+          </div>
+        )}
       </summary>
-      <div className={classNames['link-definitions__list']} role="list">
+      <div className="webchat__link-definitions__list" role="list">
         {childrenMap(children, child => (
-          <div className={classNames['link-definitions__list-item']} role="listitem">
+          <div className="webchat__link-definitions__list-item" role="listitem">
             {child}
           </div>
         ))}

package/src/LinkDefinition/index.ts

@@ -1,6 +1,4 @@
-export {
-  default as LinkDefinitionItem,
-  type LinkDefinitionItemProps,
-  linkDefinitionItemPropsSchema
-} from './LinkDefinitionItem';
-export { default as LinkDefinitions } from './LinkDefinitions';
+import LinkDefinitionItem from './LinkDefinitionItem';
+import LinkDefinitions from './LinkDefinitions';
+
+export { LinkDefinitionItem, LinkDefinitions };

package/src/LinkDefinition/private/Badge.tsx

@@ -1,19 +1,8 @@
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import React, { memo } from 'react';
 
-import styles from '../LinkDefinitions.module.css';
-
 type Props = Readonly<{ value: string }>;
 
-const Badge = memo(({ value }: Props) => {
-  const classNames = useStyles(styles);
-
-  return (
-    <div className={classNames['link-definitions__badge']} title={value}>
-      {value}
-    </div>
-  );
-});
+const Badge = memo(({ value }: Props) => <div className="webchat__link-definitions__badge">{value}</div>);
 
 Badge.displayName = 'Badge';
 

package/src/LinkDefinition/private/Chevron.tsx

@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+
+const Chevron = memo(() => (
+  <svg
+    className="webchat__link-definitions__header-chevron"
+    fill="none"
+    height="10"
+    viewBox="1 3 10 7"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
+      fill="currentcolor"
+    />
+  </svg>
+));
+
+Chevron.displayName = 'Chevron';
+
+export default Chevron;

package/src/LinkDefinition/private/ItemBody.tsx

@@ -1,11 +1,8 @@
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import React, { memo } from 'react';
 
 import Badge from './Badge';
 import OpenInNewWindowIcon from './OpenInNewWindowIcon';
 
-import styles from '../LinkDefinitions.module.css';
-
 type Props = Readonly<{
   // The text (usually a number) displayed at the head of the citation
   identifier?: string;
@@ -23,30 +20,24 @@ type Props = Readonly<{
   badgeTitle?: string;
 }>;
 
-const ItemBody = memo(({ badgeName, badgeTitle, identifier, isExternal, text }: Props) => {
-  const classNames = useStyles(styles);
-
-  return (
-    <div className={classNames['link-definitions__list-item-body']}>
-      {identifier ? <Badge value={identifier} /> : null}
-      <div className={classNames['link-definitions__list-item-body-main']}>
-        <div className={classNames['link-definitions__list-item-main-text']}>
-          <div className={classNames['link-definitions__list-item-text']} title={text}>
-            {text}
-          </div>
-          {isExternal ? (
-            <OpenInNewWindowIcon className={classNames['link-definitions__open-in-new-window-icon']} />
-          ) : null}
+const ItemBody = memo(({ badgeName, badgeTitle, identifier, isExternal, text }: Props) => (
+  <div className="webchat__link-definitions__list-item-body">
+    {identifier ? <Badge value={identifier} /> : null}
+    <div className="webchat__link-definitions__list-item-body-main">
+      <div className="webchat__link-definitions__list-item-main-text">
+        <div className="webchat__link-definitions__list-item-text" title={text}>
+          {text}
         </div>
-        {badgeName && (
-          <div className={classNames['link-definitions__list-item-badge']} title={badgeTitle}>
-            {badgeName}
-          </div>
-        )}
+        {isExternal ? <OpenInNewWindowIcon className="webchat__link-definitions__open-in-new-window-icon" /> : null}
       </div>
+      {badgeName && (
+        <div className="webchat__link-definitions__list-item-badge" title={badgeTitle}>
+          {badgeName}
+        </div>
+      )}
     </div>
-  );
-});
+  </div>
+));
 
 ItemBody.displayName = 'ItemBody';