botframework-webchat-component 4.18.1 → 4.19.0

package/src/LinkDefinition/LinkDefinitions.module.css

@@ -0,0 +1,209 @@
+:global(.webchat) .link-definitions {
+  .link-definitions__header {
+    align-items: center;
+    cursor: default;
+    display: flex;
+    font-family: var(--webchat__font--primary);
+    font-size: var(--webchat__font-size--small);
+    gap: 4px;
+    justify-content: space-between;
+    list-style: none;
+
+    @media (forced-colors: none) {
+      color: #616161; /* TODO: Should we use subtle color instead? */
+    }
+
+    /* TODO: Temporarily disable dark theme until chat history support dark theme. */
+    @media (forced-colors: none) and (not (forced-colors: none)) {
+      color: #616161; /* TODO: Add dark theme color. */
+    }
+  }
+
+  .link-definitions__header-section {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+    overflow: hidden;
+  }
+
+  .link-definitions__header-section--left {
+    flex-shrink: 0;
+  }
+
+  .link-definitions__header-text {
+    flex-shrink: 0;
+  }
+
+  .link-definitions__header::-webkit-details-marker {
+    display: none;
+  }
+
+  .link-definitions__header-chevron {
+    flex-shrink: 0;
+  }
+
+  &:not([open]) .link-definitions__header-chevron {
+    transform: rotate(-180deg);
+  }
+
+  .link-definitions__header-accessory {
+    overflow: hidden;
+  }
+
+  .link-definitions__message-sensitivity-label {
+    align-items: center;
+    display: flex;
+    gap: 4px;
+  }
+
+  .link-definitions__message-sensitivity-label-icon {
+    color: CanvasText;
+    flex-shrink: 0;
+  }
+
+  .link-definitions__message-sensitivity-label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .link-definitions__list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin: 4px 0 0;
+    padding: 0;
+  }
+
+  .link-definitions__list-item {
+    display: flex; /* This prevents the <button> from overflowing. Unsure why "overflow: hidden" doesn't work. */
+    flex-direction: column;
+  }
+
+  .link-definitions__badge {
+    align-self: flex-start;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 1px;
+    flex-shrink: 0;
+    font-size: 75%;
+    margin: 4px;
+    max-width: 4em;
+    min-width: 1em;
+    overflow: hidden;
+    padding: 2px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @media (forced-colors: none) {
+      background-color: white;
+      border-color: #e0e0e0;
+      color: black;
+    }
+
+    /* TODO: Temporarily disable dark theme until chat history support dark theme. */
+    @media (forced-colors: none) and (not (forced-colors: none)) {
+      background-color: black;
+      border-color: #e0e0e0; /* TODO: Add dark theme color. */
+      color: white;
+    }
+
+    @media (forced-colors: active) {
+      border-color: buttonborder;
+    }
+  }
+
+  .link-definitions__list-item-box {
+    align-items: center;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 1px;
+
+    @media (forced-colors: none) {
+      background-color: white;
+      border-color: #d1d1d1;
+    }
+
+    /* TODO: Temporarily disable dark theme until chat history support dark theme. */
+    @media (forced-colors: none) and (not (forced-colors: none)) {
+      background-color: black;
+      border-color: #d1d1d1; /* TODO: Add dark theme color. */
+    }
+
+    @media (forced-colors: active) {
+      background-color: canvas;
+      border-color: buttonborder;
+    }
+  }
+
+  .link-definitions__list-item-box--as-link {
+    display: block;
+    outline-offset: 0; /* This will make sure focus indicator is same as <button>. */
+    text-decoration: none;
+  }
+
+  .link-definitions__list-item-box--as-button {
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    overflow: hidden;
+    padding: 0;
+    text-align: initial; /* By default, texts inside button are centered. */
+  }
+
+  .link-definitions__list-item-body {
+    align-items: center;
+    display: flex;
+    font-family: Calibri, 'Helvetica Neue', Arial, sans-serif;
+    gap: 4px;
+    padding: 4px;
+  }
+
+  .link-definitions__list-item-body-main {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow: hidden;
+  }
+
+  .link-definitions__list-item-main-text {
+    align-items: baseline;
+    display: flex;
+    gap: 4px;
+  }
+
+  .link-definitions__list-item-badge,
+  .link-definitions__list-item-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .link-definitions__list-item-text {
+    text-decoration: underline;
+
+    @media not (forced-colors: active) {
+      color: var(--webchat__color--accent);
+    }
+  }
+
+  .link-definitions__list-item-badge {
+    font-size: var(--webchat__font-size--small);
+
+    @media not (forced-colors: active) {
+      color: var(--webchat__color--subtle);
+    }
+  }
+
+  .link-definitions__open-in-new-window-icon {
+    flex-shrink: 0; /* When text is too long, make sure the chevron is not squeezed. */
+    padding-right: 4px; /* When text is too long and chevron is on far right, this will align the chevron so it's not too far. */
+
+    @media not (forced-colors: active) {
+      color: var(--webchat__color--accent);
+    }
+  }
+}

package/src/LinkDefinition/LinkDefinitions.tsx

@@ -1,11 +1,23 @@
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import classNames from 'classnames';
-import React, { Children, type ComponentType, type ReactNode } from 'react';
+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 useStyleSet from '../hooks/useStyleSet';
-import Chevron from './private/Chevron';
+import { ComponentIcon } from '../Icon';
 
-const { useLocalizer } = hooks;
+import styles from './LinkDefinitions.module.css';
+
+const { useLocalizer, useStyleOptions } = hooks;
 const { count: childrenCount, map: childrenMap } = Children;
 
 type Props<TAccessoryProps> = Readonly<{
@@ -22,31 +34,84 @@ const REFERENCE_LIST_HEADER_IDS = {
   two: 'REFERENCE_LIST_HEADER_TWO'
 };
 
-const LinkDefinitions = <TAccessoryProps extends object>({
+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 {}>({
   accessoryComponentType,
   accessoryProps,
   children
 }: Props<TAccessoryProps>) => {
-  const [{ linkDefinitions }] = useStyleSet();
+  const [id] = useState(() => `webchat-link-definitions-${uniqueId()}`);
   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(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>
-        )}
+    <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>
       </summary>
-      <div className="webchat__link-definitions__list" role="list">
+      <div className={classNames['link-definitions__list']} role="list">
         {childrenMap(children, child => (
-          <div className="webchat__link-definitions__list-item" role="listitem">
+          <div className={classNames['link-definitions__list-item']} role="listitem">
             {child}
           </div>
         ))}

package/src/LinkDefinition/index.ts

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

package/src/LinkDefinition/private/Badge.tsx

@@ -1,8 +1,19 @@
+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) => <div className="webchat__link-definitions__badge">{value}</div>);
+const Badge = memo(({ value }: Props) => {
+  const classNames = useStyles(styles);
+
+  return (
+    <div className={classNames['link-definitions__badge']} title={value}>
+      {value}
+    </div>
+  );
+});
 
 Badge.displayName = 'Badge';
 

package/src/LinkDefinition/private/ItemBody.tsx

@@ -1,8 +1,11 @@
+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;
@@ -20,24 +23,30 @@ type Props = Readonly<{
   badgeTitle?: string;
 }>;
 
-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}
+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}
         </div>
-        {isExternal ? <OpenInNewWindowIcon className="webchat__link-definitions__open-in-new-window-icon" /> : null}
+        {badgeName && (
+          <div className={classNames['link-definitions__list-item-badge']} title={badgeTitle}>
+            {badgeName}
+          </div>
+        )}
       </div>
-      {badgeName && (
-        <div className="webchat__link-definitions__list-item-badge" title={badgeTitle}>
-          {badgeName}
-        </div>
-      )}
     </div>
-  </div>
-));
+  );
+});
 
 ItemBody.displayName = 'ItemBody';
 

package/src/LinkDefinition/private/OpenInNewWindowIcon.tsx

@@ -1,19 +1,26 @@
-import classNames from 'classnames';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
 import React from 'react';
 
+import styles from '../../Attachment/Text/TextContent.module.css';
+
 type Props = Readonly<{ className?: string }>;
 
-const OpenInNewWindowIcon = ({ className }: Props) => (
-  <svg
-    className={classNames('webchat__text-content__open-in-new-window-icon', className)}
-    viewBox="3 3 18 18"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z"
-      fill="currentcolor"
-    />
-  </svg>
-);
+const OpenInNewWindowIcon = ({ className }: Props) => {
+  const classNames = useStyles(styles);
+
+  return (
+    <svg
+      className={cx(classNames['text-content__open-in-new-window-icon'], className)}
+      viewBox="3 3 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.2501 4.50017H10.7495C11.1637 4.50017 11.4995 4.83596 11.4995 5.25017C11.4995 5.62986 11.2173 5.94366 10.8513 5.99332L10.7495 6.00017H7.24974C6.07079 5.99961 5.10349 6.90656 5.00786 8.06112L5.00028 8.22003L5.00312 16.7507C5.00343 17.9415 5.92885 18.9161 7.09966 18.9949L7.25371 19.0001L15.7518 18.9884C16.9415 18.9868 17.9145 18.062 17.9935 16.8923L17.9987 16.7384V13.2321C17.9987 12.8179 18.3345 12.4821 18.7487 12.4821C19.1284 12.4821 19.4422 12.7643 19.4918 13.1303L19.4987 13.2321V16.7384C19.4987 18.7407 17.9293 20.3769 15.9528 20.4829L15.7538 20.4884L7.25827 20.5001L7.05495 20.4949C5.14239 20.3954 3.60895 18.8627 3.50837 16.9502L3.50312 16.7511L3.50089 8.2527L3.50529 8.0502C3.60539 6.13749 5.13867 4.60449 7.05096 4.50527L7.2501 4.50017H10.7495H7.2501ZM13.7481 3.00146L20.3018 3.00197L20.4014 3.01575L20.5022 3.04393L20.559 3.06803C20.6122 3.09122 20.6634 3.12163 20.7111 3.15885L20.7804 3.22156L20.8641 3.32014L20.9183 3.41025L20.957 3.50057L20.9762 3.56476L20.9898 3.62862L20.9992 3.72282L20.9997 10.2554C20.9997 10.6696 20.6639 11.0054 20.2497 11.0054C19.87 11.0054 19.5562 10.7232 19.5065 10.3571L19.4997 10.2554L19.4989 5.56147L12.2797 12.7847C12.0134 13.051 11.5968 13.0753 11.3031 12.8575L11.219 12.7849C10.9527 12.5187 10.9284 12.1021 11.1462 11.8084L11.2188 11.7243L18.4369 4.50146H13.7481C13.3684 4.50146 13.0546 4.21931 13.005 3.85324L12.9981 3.75146C12.9981 3.37177 13.2803 3.05797 13.6464 3.00831L13.7481 3.00146Z"
+        fill="currentcolor"
+      />
+    </svg>
+  );
+};
 
 export default OpenInNewWindowIcon;

package/src/LinkDefinition/private/extractHostnameWithSubdomain.spec.ts

@@ -1,3 +1,5 @@
+/// <reference types="jest" />
+
 import extractHostnameWithSubdomain from './extractHostnameWithSubdomain';
 
 test.each([

package/src/LinkDefinition/private/extractHostnameWithSubdomain.ts

@@ -9,7 +9,7 @@ export default function extractHostnameWithSubdomain(urlString: string): string
 
       return host;
     }
-  } catch (error) {
+  } catch {
     // Intentionally left blank, will return `urlString`.
   }
 

package/src/LiveRegion/LiveRegionActivity.tsx

@@ -1,18 +1,16 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [2] }] */
 
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { Fragment, useMemo } from 'react';
+import { any, object, pipe, readonly, type InferInput } from 'valibot';
 
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
 import activityAltText from '../Utils/activityAltText';
 import LiveRegionAttachments from './private/LiveRegionAttachments';
 import LiveRegionSuggestedActions from './private/LiveRegionSuggestedActions';
-import useRenderMarkdownAsHTML from '../hooks/useRenderMarkdownAsHTML';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
-
-import type { VFC } from 'react';
-import type { WebChatActivity } from 'botframework-webchat-core';
 
 const { useAvatarForBot, useLocalizer } = hooks;
 
@@ -29,11 +27,18 @@ const ROOT_STYLE = {
   }
 };
 
-type LiveRegionActivityProps = {
-  activity: WebChatActivity;
-};
+const liveRegionActivityPropsSchema = pipe(
+  object({
+    activity: any()
+  }),
+  readonly()
+);
+
+type LiveRegionActivityProps = InferInput<typeof liveRegionActivityPropsSchema>;
+
+function LiveRegionActivity(props: LiveRegionActivityProps) {
+  const { activity } = validateProps(liveRegionActivityPropsSchema, props);
 
-const LiveRegionActivity: VFC<LiveRegionActivityProps> = ({ activity }) => {
   const [{ initials: botInitials }] = useAvatarForBot();
   const {
     from: { role },
@@ -42,7 +47,7 @@ const LiveRegionActivity: VFC<LiveRegionActivityProps> = ({ activity }) => {
   const fallbackText: string | undefined =
     type === 'message' ? activity.channelData['webchat:fallback-text'] : undefined;
   const localize = useLocalizer();
-  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML('accessible name');
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const textAlt = useMemo(() => activityAltText(activity, renderMarkdownAsHTML), [activity, renderMarkdownAsHTML]);
 
@@ -71,12 +76,7 @@ const LiveRegionActivity: VFC<LiveRegionActivityProps> = ({ activity }) => {
       )}
     </article>
   );
-};
-
-LiveRegionActivity.propTypes = {
-  activity: PropTypes.any.isRequired
-};
+}
 
 export default LiveRegionActivity;
-
-export type { LiveRegionActivityProps };
+export { liveRegionActivityPropsSchema, type LiveRegionActivityProps };

package/src/LiveRegion/private/LiveRegionSuggestedActions.tsx

@@ -1,32 +1,41 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import React, { memo } from 'react';
+import { any, array, object, pipe, readonly, type InferInput } from 'valibot';
 
 import computeSuggestedActionText from '../../Utils/computeSuggestedActionText';
 
-import type { DirectLineSuggestedAction } from 'botframework-webchat-core';
-import type { VFC } from 'react';
+const liveRegionSuggestedActionsPropSchema = pipe(
+  object({
+    suggestedActions: pipe(
+      object({
+        // TODO: Should built `directLineCardActionSchema`.
+        actions: pipe(array(any()), readonly())
+      }),
+      readonly()
+    )
+  }),
+  readonly()
+);
 
-type LiveRegionSuggestedActionsProps = {
-  suggestedActions: DirectLineSuggestedAction;
-};
+type LiveRegionSuggestedActionsProps = InferInput<typeof liveRegionSuggestedActionsPropSchema>;
 
-const LiveRegionSuggestedActions: VFC<LiveRegionSuggestedActionsProps> = ({ suggestedActions }) =>
-  suggestedActions.actions?.length && (
-    <p className="webchat__live-region-activity__suggested-actions">
-      {suggestedActions.actions.map((action, index) => (
-        // Direct Line schema does not have key other than index.
-        // eslint-disable-next-line react/no-array-index-key
-        <button className="webchat__live-region-activity__suggested-action" key={index} tabIndex={-1} type="button">
-          {computeSuggestedActionText(action)}
-        </button>
-      ))}
-    </p>
-  );
+function LiveRegionSuggestedActions(props: LiveRegionSuggestedActionsProps) {
+  const { suggestedActions } = validateProps(liveRegionSuggestedActionsPropSchema, props);
 
-LiveRegionSuggestedActions.propTypes = {
-  suggestedActions: PropTypes.shape({
-    actions: PropTypes.array
-  }).isRequired
-};
+  return (
+    suggestedActions.actions?.length && (
+      <p className="webchat__live-region-activity__suggested-actions">
+        {suggestedActions.actions.map((action, index) => (
+          // Direct Line schema does not have key other than index.
+          // eslint-disable-next-line react/no-array-index-key
+          <button className="webchat__live-region-activity__suggested-action" key={index} tabIndex={-1} type="button">
+            {computeSuggestedActionText(action)}
+          </button>
+        ))}
+      </p>
+    )
+  );
+}
 
-export default LiveRegionSuggestedActions;
+export default memo(LiveRegionSuggestedActions);
+export { liveRegionSuggestedActionsPropSchema, type LiveRegionSuggestedActionsProps };