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

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "botframework-webchat-component",
-  "version": "4.18.1-main.20260518.2a3d1d3",
+  "version": "4.18.2",
   "description": "React component of botframework-webchat",
-  "main": "./dist/botframework-webchat-component.js",
-  "types": "./dist/botframework-webchat-component.d.ts",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "exports": {
     ".": {
       "import": {
@@ -11,80 +11,18 @@
         "default": "./dist/botframework-webchat-component.mjs"
       },
       "require": {
-        "types": "./dist/botframework-webchat-component.d.ts",
-        "default": "./dist/botframework-webchat-component.js"
-      }
-    },
-    "./component": {
-      "import": {
-        "default": "./boot/deprecated/component.mjs"
-      },
-      "require": {
-        "default": "./boot/deprecated/component.js"
-      }
-    },
-    "./component.js": {
-      "import": {
-        "types": "./dist/botframework-webchat-component.component.d.mts",
-        "default": "./dist/botframework-webchat-component.component.mjs"
-      },
-      "require": {
-        "types": "./dist/botframework-webchat-component.component.d.ts",
-        "default": "./dist/botframework-webchat-component.component.js"
-      }
-    },
-    "./decorator": {
-      "import": {
-        "default": "./boot/deprecated/decorator.mjs"
-      },
-      "require": {
-        "default": "./boot/deprecated/decorator.js"
-      }
-    },
-    "./decorator.js": {
-      "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"
-      }
-    },
-    "./hook": {
-      "import": {
-        "default": "./boot/deprecated/hook.mjs"
-      },
-      "require": {
-        "default": "./boot/deprecated/hook.js"
-      }
-    },
-    "./hook.js": {
-      "import": {
-        "types": "./dist/botframework-webchat-component.hook.d.mts",
-        "default": "./dist/botframework-webchat-component.hook.mjs"
-      },
-      "require": {
-        "types": "./dist/botframework-webchat-component.hook.d.ts",
-        "default": "./dist/botframework-webchat-component.hook.js"
+        "types": "./lib/index.d.ts",
+        "default": "./lib/index.js"
       }
     },
     "./internal": {
-      "import": {
-        "default": "./boot/deprecated/internal.mjs"
-      },
-      "require": {
-        "default": "./boot/deprecated/internal.js"
-      }
-    },
-    "./internal.js": {
       "import": {
         "types": "./dist/botframework-webchat-component.internal.d.mts",
         "default": "./dist/botframework-webchat-component.internal.mjs"
       },
       "require": {
-        "types": "./dist/botframework-webchat-component.internal.d.ts",
-        "default": "./dist/botframework-webchat-component.internal.js"
+        "types": "./lib/internal.d.ts",
+        "default": "./lib/internal.js"
       }
     }
   },
@@ -101,37 +39,56 @@
     "url": "https://github.com/microsoft/BotFramework-WebChat/issues"
   },
   "files": [
-    "./*.js",
-    "./boot/**/*",
     "./dist/**/*",
+    "./internal.js",
+    "./lib/**/*",
     "./src/**/*"
   ],
   "homepage": "https://github.com/microsoft/BotFramework-WebChat/tree/main/packages/component#readme",
   "scripts": {
-    "build": "npm run --if-present build:pre && npm run build:run && npm run --if-present build:post",
-    "build:post": "npm run build:post:dtsroll && npm run build:post:validate",
-    "build:post:dtsroll": "dtsroll ./dist/*.d.* && sed -E -i 's/^([[:space:]]*export[[:space:]]+)type[[:space:]]+(\\{[[:space:]]+type[[:space:]]+)/\\1\\2/' ./dist/*.d.* && sed -i -E -e 's/\\{[[:space:]]*DropZoneState\\b/{ type DropZoneState/g' -e 's/\\btypeof[[:space:]]+DropZoneState\\b/DropZoneState/g' ./dist/*.d.*",
-    "build:post:validate": "npm run build:post:validate:css && npm run build:post:validate:inject-css && npm run build:post:validate:dts",
-    "build:post:validate:css": "vg ast-check lightning-css ./dist/*.css",
-    "build:post:validate:dts": "vg ast-check dist-types ./dist/*.d.*",
-    "build:post:validate:inject-css": "vg ast-check css-inject dist/*.js dist/*.mjs",
-    "build:pre": "npm run build:pre:local-dependencies && npm run build:pre:watch",
-    "build:pre:local-dependencies": "../../scripts/npm/build-local-dependencies.sh",
-    "build:pre:watch": "../../scripts/npm/build-watch.sh",
-    "build:run": "tsup",
-    "bump": "vg bump prod && vg bump dev && (npm audit fix || exit 0)",
+    "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: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",
     "eslint": "npm run precommit",
-    "postversion": "../../scripts/npm/postversion.sh",
+    "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",
     "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",
-    "preversion": "../../scripts/npm/preversion.sh",
-    "start": "../../scripts/npm/notify-build.sh \"src\" \"../react-hooks/package.json\" \"../react-valibot/package.json\" \"../styles/package.json\""
+    "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"
   },
   "pinDependencies": {
-    "@types/jest": [
-      "29",
-      "pinned jest@29"
+    "@babel/cli": [
+      "7.18.10",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@babel/core": [
+      "7.19.1",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@babel/preset-env": [
+      "7.19.1",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@babel/preset-react": [
+      "7.18.6",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
+    ],
+    "@babel/preset-typescript": [
+      "7.18.6",
+      "@babel/*@7.21 is causing out-of-memory (OOM) issues"
     ],
     "@types/react": [
       "16",
@@ -145,86 +102,64 @@
       "13",
       "markdown-it@14.1.0 has module field and it is breaking Webpack 4 because cross loading CJS and ESM"
     ],
-    "react": [
-      "16.8.6",
-      "using react@16.8.6 to make sure this is the minimum supported version"
-    ],
-    "react-dom": [
-      "16.8.6",
-      "using react-dom@16.8.6 to make sure this is the minimum supported version"
+    "react-film": [
+      "3.1.1-main.df870ea",
+      "TEMPORARY: Use a custom version to verify build"
     ],
     "react-redux": [
       "7"
-    ],
-    "react-scroll-to-bottom": [
-      "main"
-    ],
-    "react-wrap-with": [
-      "0.1.0",
-      "0.2.0 is having compatibility issues with preact@10.25.4"
     ]
   },
-  "localDependencies": {
-    "@msinternal/botframework-webchat-base": "development",
-    "@msinternal/botframework-webchat-react-hooks": "development",
-    "@msinternal/botframework-webchat-react-valibot": "development",
-    "@msinternal/botframework-webchat-styles": "development",
-    "@msinternal/botframework-webchat-tsconfig": "development"
-  },
   "devDependencies": {
-    "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
-    "@babel/preset-react": "^7.28.5",
-    "@babel/preset-typescript": "^7.28.5",
-    "@msinternal/botframework-webchat-base": "4.18.1-main.20260518.2a3d1d3",
-    "@msinternal/botframework-webchat-react-hooks": "4.18.1-main.20260518.2a3d1d3",
-    "@msinternal/botframework-webchat-react-valibot": "4.18.1-main.20260518.2a3d1d3",
-    "@msinternal/botframework-webchat-styles": "4.18.1-main.20260518.2a3d1d3",
-    "@msinternal/botframework-webchat-tsconfig": "4.18.1-main.20260518.2a3d1d3",
-    "@types/dom-speech-recognition": "^0.0.9",
-    "@types/jest": "^29.5.14",
-    "@types/mdast": "^4.0.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^16.14.69",
-    "babel-plugin-istanbul": "^8.0.0",
+    "@babel/cli": "^7.18.10",
+    "@babel/core": "^7.19.1",
+    "@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.12.11",
+    "@types/react": "^16.14.60",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "core-js": "^3.49.0",
-    "cross-env": "^10.1.0",
-    "type-fest": "^5.6.0",
-    "typescript": "^6.0.3"
+    "concurrently": "^8.2.2",
+    "core-js": "^3.37.0",
+    "cross-env": "^7.0.3",
+    "node-dev": "^8.0.0",
+    "type-fest": "^4.18.2",
+    "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@emotion/css": "11.13.5",
+    "@emotion/css": "11.11.2",
     "base64-js": "1.5.1",
-    "botframework-webchat-api": "4.18.1-main.20260518.2a3d1d3",
-    "botframework-webchat-core": "4.18.1-main.20260518.2a3d1d3",
+    "botframework-webchat-api": "4.18.2",
+    "botframework-webchat-core": "4.18.2",
     "classnames": "2.5.1",
     "compute-scroll-into-view": "1.0.20",
     "deep-freeze-strict": "1.1.1",
     "markdown-it": "13.0.2",
     "math-random": "2.0.1",
-    "mdast-util-from-markdown": "2.0.3",
+    "mdast-util-from-markdown": "2.0.0",
     "memoize-one": "6.0.0",
-    "merge-refs": "2.0.0",
+    "merge-refs": "1.3.0",
     "prop-types": "15.8.1",
-    "punycode": "2.3.1",
-    "react-chain-of-responsibility": "0.4.2",
-    "react-dictate-button": "4.0.1",
-    "react-film": "4.0.0",
+    "react-chain-of-responsibility": "0.2.0-main.3cb47ab",
+    "react-dictate-button": "2.0.1",
+    "react-film": "3.1.1-main.df870ea",
     "react-redux": "7.2.9",
-    "react-say": "2.2.1",
-    "react-scroll-to-bottom": "4.2.1-main.53844f5",
-    "react-wrap-with": "0.1.0",
+    "react-say": "2.1.0",
+    "react-scroll-to-bottom": "4.2.0",
     "redux": "5.0.1",
     "simple-update-in": "2.2.0",
-    "use-propagate": "0.2.2",
-    "use-reduce-memo": "0.1.0",
-    "use-ref-from": "0.2.1",
-    "use-state-with-ref": "0.2.1",
-    "valibot": "1.3.1"
+    "use-propagate": "0.1.0",
+    "use-ref-from": "0.1.0",
+    "valibot": "0.30.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,30 +1,33 @@
-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, { VFC } from 'react';
 
-import DefaultAvatar from '../Middleware/Avatar/DefaultAvatar';
+import { DefaultAvatar } from '../Middleware/Avatar/createCoreMiddleware';
 
-const avatarPropsSchema = pipe(
-  object({
-    'aria-hidden': optional(boolean()),
-    className: optional(string()),
-    fromUser: optional(boolean())
-  }),
-  readonly()
-);
-
-type AvatarProps = InferInput<typeof avatarPropsSchema>;
+type AvatarProps = {
+  'aria-hidden'?: boolean;
+  className?: string;
+  fromUser?: boolean;
+};
 
 /** @deprecated Please use `useRenderAvatar` hook instead. */
-function Avatar(props: AvatarProps) {
-  const { 'aria-hidden': ariaHidden = false, className, fromUser } = validateProps(avatarPropsSchema, props);
-
+const Avatar: VFC<AvatarProps> = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
   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 memo(Avatar);
-export { avatarPropsSchema, type AvatarProps };
+export default Avatar;

package/src/Activity/Bubble.tsx

@@ -1,19 +1,35 @@
 /* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 2, 10] }] */
 
-import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
-import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import { hooks } from 'botframework-webchat-api';
-import cx from 'classnames';
-import React, { memo } from 'react';
-import { boolean, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { FC, ReactNode, memo } from 'react';
 
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
+import useStyleSet from '../hooks/useStyleSet';
+import useStyleToEmotionObject from '../hooks/internal/useStyleToEmotionObject';
 
-import styles from './Bubble.module.css';
+const { useDirection, useStyleOptions } = hooks;
 
-const { useStyleOptions } = hooks;
+const ROOT_STYLE = {
+  '&.webchat__bubble': {
+    display: 'flex',
+    position: 'relative',
 
-function acuteNubSVG(nubSize, strokeWidth, side, upSideDown = false, classNames) {
+    '& .webchat__bubble__nub-pad': {
+      flexShrink: 0
+    },
+
+    '& .webchat__bubble__content': {
+      flexGrow: 1,
+
+      // This is for hiding content outside of the bubble, for example, content outside of border radius
+      overflow: 'hidden'
+    }
+  }
+};
+
+function acuteNubSVG(nubSize, strokeWidth, side, upSideDown = false) {
   if (typeof nubSize !== 'number') {
     return false;
   }
@@ -34,40 +50,29 @@ function acuteNubSVG(nubSize, strokeWidth, side, upSideDown = false, classNames)
 
   return (
     <svg
-      className={classNames['bubble__nub']}
+      className="webchat__bubble__nub"
       version="1.1"
       viewBox={`0 0 ${nubSize} ${nubSize}`}
       xmlns="http://www.w3.org/2000/svg"
     >
       <g transform={`${horizontalTransform} ${verticalTransform}`}>
-        <path className={classNames['bubble__nub-outline']} d={`M${p1} L${p2} L${p3}`} />
+        <path className="webchat__bubble__nub-outline" d={`M${p1} L${p2} L${p3}`} />
       </g>
     </svg>
   );
 }
 
-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);
-
+type BubbleProps = {
+  'aria-hidden'?: boolean;
+  children?: ReactNode;
+  className?: string;
+  fromUser?: boolean;
+  nub?: boolean | 'hidden';
+};
+
+const Bubble: FC<BubbleProps> = ({ 'aria-hidden': ariaHidden, children, className, fromUser, nub }) => {
+  const [{ bubble: bubbleStyleSet }] = useStyleSet();
+  const [direction] = useDirection();
   const [
     {
       bubbleBorderWidth,
@@ -78,7 +83,7 @@ function Bubble(props: BubbleProps) {
       bubbleFromUserNubOffset
     }
   ] = useStyleOptions();
-  const classNames = useStyles(styles);
+  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
   const { borderWidth, nubOffset, nubSize, side } = fromUser
     ? {
@@ -97,23 +102,43 @@ function Bubble(props: BubbleProps) {
   return (
     <div
       aria-hidden={ariaHidden}
-      className={cx(
-        classNames.bubble,
+      className={classNames(
+        'webchat__bubble',
         {
-          [classNames['bubble--from-user']]: fromUser,
-          [classNames['bubble--hide-nub']]: nub !== true && nub !== false,
-          [classNames['bubble--nub-on-top']]: isZeroOrPositive(nubOffset),
-          [classNames['bubble--show-nub']]: nub === true
+          'webchat__bubble--from-user': fromUser,
+          'webchat__bubble--hide-nub': nub !== true && nub !== false,
+          'webchat__bubble--nub-on-top': isZeroOrPositive(nubOffset),
+          'webchat__bubble--rtl': direction === 'rtl',
+          'webchat__bubble--show-nub': nub === true
         },
-        className
+        rootClassName,
+        bubbleStyleSet + '',
+        (className || '') + ''
       )}
     >
-      <div className={classNames['bubble__nub-pad']} />
-      <div className={classNames['bubble__content']}>{children}</div>
-      {nub === true && acuteNubSVG(nubSize, borderWidth, side, !isZeroOrPositive(nubOffset), classNames)}
+      <div className="webchat__bubble__nub-pad" />
+      <div className="webchat__bubble__content">{children}</div>
+      {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'])
+};
+
+Bubble.displayName = 'Bubble';
 
 export default memo(Bubble);
-export { bubblePropsSchema, type BubbleProps };