botframework-webchat-component 4.17.1 → 4.18.1-hotfix.20260127.b53acdf

package/internal.js

@@ -1,3 +1,3 @@
 // This is required for Webpack 4 which does not support named exports.
 // eslint-disable-next-line no-undef
-module.exports = require('./lib/internal');
+module.exports = require('./dist/botframework-webchat-component.internal.js');

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "botframework-webchat-component",
-  "version": "4.17.1",
+  "version": "4.18.1-hotfix.20260127.b53acdf",
   "description": "React component of botframework-webchat",
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./dist/botframework-webchat-component.js",
+  "types": "./dist/botframework-webchat-component.d.ts",
   "exports": {
     ".": {
       "import": {
@@ -11,8 +11,8 @@
         "default": "./dist/botframework-webchat-component.mjs"
       },
       "require": {
-        "types": "./lib/index.d.ts",
-        "default": "./lib/index.js"
+        "types": "./dist/botframework-webchat-component.d.ts",
+        "default": "./dist/botframework-webchat-component.js"
       }
     },
     "./internal": {
@@ -21,8 +21,18 @@
         "default": "./dist/botframework-webchat-component.internal.mjs"
       },
       "require": {
-        "types": "./lib/internal.d.ts",
-        "default": "./lib/internal.js"
+        "types": "./dist/botframework-webchat-component.internal.d.ts",
+        "default": "./dist/botframework-webchat-component.internal.js"
+      }
+    },
+    "./decorator": {
+      "import": {
+        "types": "./dist/botframework-webchat-component.decorator.d.mts",
+        "default": "./dist/botframework-webchat-component.decorator.mjs"
+      },
+      "require": {
+        "types": "./dist/botframework-webchat-component.decorator.d.ts",
+        "default": "./dist/botframework-webchat-component.decorator.js"
       }
     }
   },
@@ -40,34 +50,29 @@
   },
   "files": [
     "./dist/**/*",
-    "./internal.js",
-    "./lib/**/*",
+    "./*.js",
     "./src/**/*"
   ],
   "homepage": "https://github.com/microsoft/BotFramework-WebChat/tree/main/packages/component#readme",
   "scripts": {
-    "auditfix": "npm audit fix --legacy-peer-deps || exit 0",
-    "build": "npm run build:tsup && npm run build:typescript && npm run build:babel",
-    "build:babel": "cross-env build_tool=babel module_format=commonjs babel src --copy-files --extensions .js,.ts,.tsx --ignore **/*.spec.js,**/*.spec.ts,**/*.spec.tsx,**/*.test.js,**/*.test.ts,**/*.test.tsx,__tests__/**/*.js,__tests__/**/*.ts,__tests__/**/*.tsx --no-copy-ignored --out-dir lib --verbose",
+    "build": "npm run build:tsup",
     "build:tsup": "tsup --config ./tsup.config.ts",
-    "build:typescript": "tsc --project src/tsconfig.json",
-    "bump": "npm run bump:prod && npm run bump:dev && npm run bump:auditfix",
-    "bump:auditfix": "npm audit fix --legacy-peer-deps || exit 0",
-    "bump:dev": "if [ `cat package.json | jq -r '.devDependencies | length'` -ne 0 ]; then npm install --legacy-peer-deps $(cat package.json | jq -r '(.pinDependencies // {}) as $p | ((.devDependencies // {}) | keys) | map(. + \"@\" + ($p[.] // [\"latest\"])[0]) | .[]'); fi",
-    "bump:prod": "if [ `cat package.json | jq -r '.dependencies | length'` -ne 0 ]; then npm install --legacy-peer-deps --save-exact $(cat package.json | jq -r '(.pinDependencies // {}) as $p | ((.dependencies // {}) | keys) | map(. + \"@\" + ($p[.] // [\"latest\"])[0]) | .[]'); fi",
+    "bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
+    "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
+    "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",
     "eslint": "npm run precommit",
-    "postauditfix": "npm run postbump",
-    "postbump": "cat package.json | jq '. + (.dependencies = ((.dependencies + (.localPeerDependencies // {})) | to_entries | sort_by(.key) | from_entries)) | (.devDependencies = ((.devDependencies + (.localPeerDevDependencies // {})) | to_entries | sort_by(.key) | from_entries))' > package-temp.json && mv package-temp.json package.json",
-    "preauditfix": "npm run prebump",
-    "prebump": "cat package.json | jq '(((.localPeerDependencies // {}) | keys | map([\"dependencies\", .])) + ((.localPeerDevDependencies // {}) | keys | map([\"devDependencies\", .]))) as $localPeerPaths | delpaths($localPeerPaths)' > package-temp.json && mv package-temp.json package.json",
+    "postversion": "cat package.json | jq '.version as $V | (.localDependencies // {} | with_entries(select(.value == \"production\") | { key: .key, value: $V })) as $L1 | (.localDependencies // {} | with_entries(select(.value == \"development\") | { key: .key, value: $V })) as $L2 | ((.dependencies // {}) + $L1 | to_entries | sort_by(.key) | from_entries) as $D1 | ((.devDependencies // {}) + $L2 | to_entries | sort_by(.key) | from_entries) as $D2 | . + { dependencies: $D1, devDependencies: $D2 }' > package-temp.json && mv package-temp.json package.json",
     "precommit": "npm run precommit:eslint -- src && npm run precommit:typecheck",
     "precommit:eslint": "../../node_modules/.bin/eslint --report-unused-disable-directives --max-warnings 0",
     "precommit:typecheck": "tsc --project ./src --emitDeclarationOnly false --esModuleInterop true --noEmit --pretty false",
-    "prestart": "npm run build:babel",
-    "start": "concurrently --kill-others --names \"babel,tsc,tsup\" \"npm run start:babel\" \"npm run start:typescript\" \"npm run start:tsup\"",
-    "start:babel": "npm run build:babel -- --skip-initial-build --watch",
-    "start:tsup": "npm run build:tsup -- --watch",
-    "start:typescript": "npm run build:typescript -- --watch"
+    "preversion": "cat package.json | jq '(.localDependencies // {} | to_entries | map([if .value == \"production\" then \"dependencies\" else \"devDependencies\" end, .key])) as $P | delpaths($P)' > package-temp.json && mv package-temp.json package.json",
+    "start": "npm run build:tsup -- --onSuccess=\"touch ../bundle/src/FullComposer.tsx\" --watch"
+  },
+  "localDependencies": {
+    "botframework-webchat-api": "production",
+    "botframework-webchat-base": "development",
+    "botframework-webchat-core": "production",
+    "botframework-webchat-styles": "development"
   },
   "pinDependencies": {
     "@babel/cli": [
@@ -98,12 +103,19 @@
       "1",
       "@>=2 does not support IE Mode"
     ],
+    "markdown-it": [
+      "13",
+      "markdown-it@14.1.0 has module field and it is breaking Webpack 4 because cross loading CJS and ESM"
+    ],
     "react-film": [
-      "3.1.1-main.df870ea",
+      "3.1.1-main.f623bf6",
       "TEMPORARY: Use a custom version to verify build"
     ],
     "react-redux": [
       "7"
+    ],
+    "react-scroll-to-bottom": [
+      "main"
     ]
   },
   "devDependencies": {
@@ -112,50 +124,51 @@
     "@babel/preset-env": "^7.19.1",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@types/mdast": "^4.0.3",
-    "@types/node": "^20.10.3",
-    "@types/react": "^16.14.60",
-    "babel-plugin-istanbul": "^6.1.1",
+    "@types/mdast": "^4.0.4",
+    "@types/node": "^22.13.4",
+    "@types/react": "^16.14.62",
+    "babel-plugin-istanbul": "^7.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "concurrently": "^8.2.2",
-    "core-js": "^3.34.0",
+    "botframework-webchat-base": "4.18.1-hotfix.20260127.b53acdf",
+    "botframework-webchat-styles": "4.18.1-hotfix.20260127.b53acdf",
+    "concurrently": "^9.1.2",
+    "core-js": "^3.40.0",
     "cross-env": "^7.0.3",
     "node-dev": "^8.0.0",
-    "type-fest": "^4.14.0",
-    "typescript": "^5.3.2"
+    "type-fest": "^4.34.1",
+    "typescript": "^5.7.3"
   },
   "dependencies": {
-    "@emotion/css": "11.11.2",
+    "@emotion/css": "11.13.5",
     "base64-js": "1.5.1",
-    "botframework-webchat-api": "4.17.1",
-    "botframework-webchat-core": "4.17.1",
-    "classnames": "2.3.2",
+    "botframework-webchat-api": "4.18.1-hotfix.20260127.b53acdf",
+    "botframework-webchat-core": "4.18.1-hotfix.20260127.b53acdf",
+    "classnames": "2.5.1",
     "compute-scroll-into-view": "1.0.20",
-    "deep-freeze-strict": "^1.1.1",
+    "deep-freeze-strict": "1.1.1",
     "markdown-it": "13.0.2",
     "math-random": "2.0.1",
-    "mdast-util-from-markdown": "2.0.0",
+    "mdast-util-from-markdown": "2.0.2",
     "memoize-one": "6.0.0",
-    "merge-refs": "1.2.2",
+    "merge-refs": "1.3.0",
     "prop-types": "15.8.1",
-    "react-chain-of-responsibility": "^0.1.0",
-    "react-dictate-button": "2.0.1",
-    "react-film": "3.1.1-main.df870ea",
+    "punycode": "2.3.1",
+    "react-chain-of-responsibility": "0.2.0",
+    "react-dictate-button": "4.0.0",
+    "react-film": "3.1.1-main.f623bf6",
     "react-redux": "7.2.9",
     "react-say": "2.1.0",
-    "react-scroll-to-bottom": "4.2.0",
-    "redux": "5.0.0",
+    "react-scroll-to-bottom": "4.2.1-main.53844f5",
+    "react-wrap-with": "^0.2.0-main.62328fb",
+    "redux": "5.0.1",
     "simple-update-in": "2.2.0",
-    "use-propagate": "^0.1.0",
-    "use-ref-from": "^0.1.0",
-    "valibot": "^0.30.0"
+    "use-propagate": "0.2.1",
+    "use-ref-from": "0.1.0",
+    "use-state-with-ref": "0.1.0",
+    "valibot": "1.1.0"
   },
   "peerDependencies": {
     "react": ">= 16.8.6",
     "react-dom": ">= 16.8.6"
-  },
-  "localPeerDependencies": {
-    "botframework-webchat-api": "0.0.0-0",
-    "botframework-webchat-core": "0.0.0-0"
   }
 }

package/src/Activity/Avatar.tsx

@@ -1,33 +1,30 @@
-import PropTypes from 'prop-types';
-import React, { VFC } from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import { DefaultAvatar } from '../Middleware/Avatar/createCoreMiddleware';
 
-type AvatarProps = {
-  'aria-hidden'?: boolean;
-  className?: string;
-  fromUser?: boolean;
-};
+const avatarPropsSchema = pipe(
+  object({
+    'aria-hidden': optional(boolean()),
+    className: optional(string()),
+    fromUser: optional(boolean())
+  }),
+  readonly()
+);
+
+type AvatarProps = InferInput<typeof avatarPropsSchema>;
 
 /** @deprecated Please use `useRenderAvatar` hook instead. */
-const Avatar: VFC<AvatarProps> = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
+function Avatar(props: AvatarProps) {
+  const { 'aria-hidden': ariaHidden = false, className, fromUser } = validateProps(avatarPropsSchema, props);
+
   console.warn(
     'botframework-webchat: <Avatar> component is deprecated and will be removed on or after 2022-02-25. Please use `useRenderAvatar` hook instead.'
   );
 
   return <DefaultAvatar aria-hidden={ariaHidden} className={className} fromUser={fromUser} />;
-};
-
-Avatar.defaultProps = {
-  'aria-hidden': false,
-  className: '',
-  fromUser: false
-};
-
-Avatar.propTypes = {
-  'aria-hidden': PropTypes.bool,
-  className: PropTypes.string,
-  fromUser: PropTypes.bool
-};
+}
 
-export default Avatar;
+export default memo(Avatar);
+export { avatarPropsSchema, type AvatarProps };

package/src/Activity/Bubble.tsx

@@ -1,13 +1,15 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 10] }] */
 
 import { hooks } from 'botframework-webchat-api';
+import { validateProps } from 'botframework-webchat-api/internal';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { FC, ReactNode } from 'react';
+import React, { memo } from 'react';
+import { boolean, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
 
-import isZeroOrPositive from '../Utils/isZeroOrPositive';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import reactNode from '../types/internal/reactNode';
+import isZeroOrPositive from '../Utils/isZeroOrPositive';
 
 const { useDirection, useStyleOptions } = hooks;
 
@@ -62,15 +64,28 @@ function acuteNubSVG(nubSize, strokeWidth, side, upSideDown = false) {
   );
 }
 
-type BubbleProps = {
-  'aria-hidden'?: boolean;
-  children?: ReactNode;
-  className?: string;
-  fromUser?: boolean;
-  nub?: boolean | 'hidden';
-};
+const bubblePropsSchema = pipe(
+  object({
+    'aria-hidden': optional(boolean()),
+    children: optional(reactNode()),
+    className: optional(string()),
+    fromUser: optional(boolean()),
+    nub: optional(union([boolean(), literal('hidden')]))
+  }),
+  readonly()
+);
+
+type BubbleProps = InferInput<typeof bubblePropsSchema>;
+
+function Bubble(props: BubbleProps) {
+  const {
+    'aria-hidden': ariaHidden,
+    children,
+    className,
+    fromUser,
+    nub = false
+  } = validateProps(bubblePropsSchema, props);
 
-const Bubble: FC<BubbleProps> = ({ 'aria-hidden': ariaHidden, children, className, fromUser, nub }) => {
   const [{ bubble: bubbleStyleSet }] = useStyleSet();
   const [direction] = useDirection();
   const [
@@ -113,7 +128,7 @@ const Bubble: FC<BubbleProps> = ({ 'aria-hidden': ariaHidden, children, classNam
         },
         rootClassName,
         bubbleStyleSet + '',
-        (className || '') + ''
+        className
       )}
     >
       <div className="webchat__bubble__nub-pad" />
@@ -121,22 +136,7 @@ const Bubble: FC<BubbleProps> = ({ 'aria-hidden': ariaHidden, children, classNam
       {nub === true && acuteNubSVG(nubSize, borderWidth, side, !isZeroOrPositive(nubOffset))}
     </div>
   );
-};
-
-Bubble.defaultProps = {
-  'aria-hidden': undefined,
-  children: undefined,
-  className: '',
-  fromUser: false,
-  nub: false
-};
-
-Bubble.propTypes = {
-  'aria-hidden': PropTypes.bool,
-  children: PropTypes.any,
-  className: PropTypes.string,
-  fromUser: PropTypes.bool,
-  nub: PropTypes.oneOf([true, false, 'hidden'])
-};
+}
 
-export default Bubble;
+export default memo(Bubble);
+export { bubblePropsSchema, type BubbleProps };

package/src/Activity/CarouselFilmStrip.js

@@ -12,7 +12,7 @@ import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import ScreenReaderText from '../ScreenReaderText';
 import textFormatToContentType from '../Utils/textFormatToContentType';
 import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 
 const { useAvatarForBot, useAvatarForUser, useDirection, useLocalizer, useStyleOptions } = hooks;
 
@@ -195,7 +195,7 @@ const CarouselFilmStrip = ({
           )}
           <div className="webchat__carousel-filmstrip__complimentary">
             <div className="webchat__carousel-filmstrip__nub-pad" />
-            <div className="webchat__carousel-filmstrip__complimentary-content c">
+            <div className="webchat__carousel-filmstrip__complimentary-content">
               <ul
                 className="webchat__carousel-filmstrip__attachments react-film__filmstrip__list"
                 ref={itemContainerCallbackRef}

package/src/Activity/CarouselLayout.js

@@ -10,14 +10,14 @@ import {
 
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 import CarouselFilmStrip from './CarouselFilmStrip';
 import useNonce from '../hooks/internal/useNonce';
 import useStyleSet from '../hooks/useStyleSet';
-import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
 
-const { useDirection, useLocalizer } = hooks;
+const { useDirection, useLocalizer, useStyleOptions } = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__carousel-layout': {
@@ -101,9 +101,17 @@ const CarouselLayout = props => {
   const [direction] = useDirection();
   const [nonce] = useNonce();
   const filmStyleSet = useMemo(() => createBasicStyleSetForReactFilm({ cursor: null }), []);
+  const [{ stylesRoot }] = useStyleOptions();
+  const styleOptions = useMemo(() => ({ stylesRoot }), [stylesRoot]);
 
   return (
-    <FilmComposer dir={direction} nonce={nonce} numItems={attachments.length} styleSet={filmStyleSet}>
+    <FilmComposer
+      dir={direction}
+      nonce={nonce}
+      numItems={attachments.length}
+      styleOptions={styleOptions}
+      styleSet={filmStyleSet}
+    >
       <CarouselLayoutCore {...props} />
     </FilmComposer>
   );
@@ -117,4 +125,4 @@ CarouselLayout.propTypes = {
   ...CarouselLayoutCore.propTypes
 };
 
-export default CarouselLayout;
+export default memo(CarouselLayout);

package/src/Activity/SayAlt.tsx

@@ -0,0 +1,30 @@
+import { validateProps } from 'botframework-webchat-api/internal';
+import React, { memo } from 'react';
+import { literal, object, pipe, readonly, string, union, type InferInput } from 'valibot';
+
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
+
+// TODO: [P3] Although this is for development purpose, prettify it
+const ROOT_STYLE = {
+  color: 'Red',
+  margin: 0
+};
+
+const sayAltPropsSchema = pipe(
+  object({
+    speak: union([literal(false), string()])
+  }),
+  readonly()
+);
+
+type SayAltProps = InferInput<typeof sayAltPropsSchema>;
+
+const SayAlt = (props: SayAltProps) => {
+  const { speak } = validateProps(sayAltPropsSchema, props);
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+  return !!speak && <pre className={rootClassName}>{speak}</pre>;
+};
+
+export default memo(SayAlt);
+export { sayAltPropsSchema, type SayAltProps };

package/src/Activity/Speak.tsx

@@ -1,8 +1,10 @@
 import { hooks } from 'botframework-webchat-api';
-import type { WebChatActivity } from 'botframework-webchat-core';
-import PropTypes from 'prop-types';
-import React, { FC, useCallback, useMemo } from 'react';
+import { validateProps } from 'botframework-webchat-api/internal';
+import { type WebChatActivity } from 'botframework-webchat-core';
+import React, { memo, useCallback, useMemo } from 'react';
 import ReactSay, { SayUtterance } from 'react-say';
+import { useRefFrom } from 'use-ref-from';
+import { any, array, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import SayAlt from './SayAlt';
 
@@ -13,18 +15,62 @@ const { useMarkActivityAsSpoken, useStyleOptions, useVoiceSelector } = hooks;
 // TODO: [P4] Consider moving this feature into BasicActivity
 //       And it has better DOM position for showing visual spoken text
 
-type SpeakProps = {
-  activity: WebChatActivity;
-};
+const speakableActivitySchema = pipe(
+  object({
+    attachments: optional(
+      pipe(
+        array(
+          pipe(
+            object({
+              content: optional(any()),
+              contentType: string(),
+              speak: optional(string()),
+              subtitle: optional(string()),
+              text: optional(string()),
+              title: optional(string())
+            }),
+            readonly()
+          )
+        ),
+        readonly()
+      )
+    ),
+    channelData: optional(
+      pipe(
+        object({
+          speechSynthesisUtterance: optional(any())
+        }),
+        readonly()
+      )
+    ),
+    speak: optional(string()),
+    text: optional(string()),
+    type: string()
+  }),
+  readonly()
+);
+
+const speakPropsSchema = pipe(
+  object({
+    activity: speakableActivitySchema
+  }),
+  readonly()
+);
+
+type SpeakProps = InferInput<typeof speakPropsSchema>;
+
+function Speak(props: SpeakProps) {
+  const { activity } = validateProps(speakPropsSchema, props);
 
-const Speak: FC<SpeakProps> = ({ activity }) => {
   const [{ showSpokenText }] = useStyleOptions();
+  const activityRef = useRefFrom(activity);
   const markActivityAsSpoken = useMarkActivityAsSpoken();
   const selectVoice = useVoiceSelector(activity);
 
-  const markAsSpoken = useCallback(() => {
-    markActivityAsSpoken(activity);
-  }, [activity, markActivityAsSpoken]);
+  const markAsSpoken = useCallback(
+    () => markActivityAsSpoken(activityRef.current as WebChatActivity),
+    [activityRef, markActivityAsSpoken]
+  );
 
   const singleLine: false | string = useMemo(() => {
     if (activity.type !== 'message') {
@@ -36,7 +82,14 @@ const Speak: FC<SpeakProps> = ({ activity }) => {
     return [
       speak || text,
       ...attachments
-        .filter(({ contentType }) => contentType === 'application/vnd.microsoft.card.adaptive')
+        .filter(
+          (
+            attachment
+          ): attachment is {
+            content: { speak?: string };
+            contentType: 'application/vnd.microsoft.card.adaptive';
+          } => attachment.contentType === 'application/vnd.microsoft.card.adaptive' && attachment.content
+        )
         .map(attachment => attachment?.content?.speak)
     ]
       .filter(line => line)
@@ -58,27 +111,7 @@ const Speak: FC<SpeakProps> = ({ activity }) => {
       </React.Fragment>
     )
   );
-};
-
-Speak.propTypes = {
-  // PropTypes cannot fully capture TypeScript types.
-  // @ts-ignore
-  activity: PropTypes.shape({
-    attachments: PropTypes.arrayOf(
-      PropTypes.shape({
-        speak: PropTypes.string,
-        subtitle: PropTypes.string,
-        text: PropTypes.string,
-        title: PropTypes.string
-      })
-    ),
-    channelData: PropTypes.shape({
-      speechSynthesisUtterance: PropTypes.any
-    }),
-    speak: PropTypes.string,
-    text: PropTypes.string,
-    type: PropTypes.string.isRequired
-  }).isRequired
-};
+}
 
-export default Speak;
+export default memo(Speak);
+export { speakPropsSchema, type SpeakProps };