botframework-webchat-component 4.18.1 → 4.19.0

package/hook.js

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

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.18.1",
+  "version": "4.19.0",
   "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,18 +11,80 @@
         "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"
+      }
+    },
+    "./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"
       }
     },
     "./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": "./lib/internal.d.ts",
-        "default": "./lib/internal.js"
+        "types": "./dist/botframework-webchat-component.internal.d.ts",
+        "default": "./dist/botframework-webchat-component.internal.js"
       }
     }
   },
@@ -39,56 +101,37 @@
     "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": {
-    "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",
+    "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)",
     "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": "../../scripts/npm/postversion.sh",
     "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": "../../scripts/npm/preversion.sh",
+    "start": "../../scripts/npm/notify-build.sh \"src\" \"../react-hooks/package.json\" \"../react-valibot/package.json\" \"../styles/package.json\""
   },
   "pinDependencies": {
-    "@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/jest": [
+      "29",
+      "pinned jest@29"
     ],
     "@types/react": [
       "16",
@@ -102,64 +145,86 @@
       "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",
-      "TEMPORARY: Use a custom version to verify build"
+    "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-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/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/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.19.0",
+    "@msinternal/botframework-webchat-react-hooks": "4.19.0",
+    "@msinternal/botframework-webchat-react-valibot": "4.19.0",
+    "@msinternal/botframework-webchat-styles": "4.19.0",
+    "@msinternal/botframework-webchat-tsconfig": "4.19.0",
+    "@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-plugin-transform-inline-environment-variables": "^0.4.4",
-    "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"
+    "core-js": "^3.49.0",
+    "cross-env": "^10.1.0",
+    "type-fest": "^5.6.0",
+    "typescript": "^6.0.3"
   },
   "dependencies": {
-    "@emotion/css": "11.11.2",
+    "@emotion/css": "11.13.5",
     "base64-js": "1.5.1",
-    "botframework-webchat-api": "4.18.1",
-    "botframework-webchat-core": "4.18.1",
+    "botframework-webchat-api": "4.19.0",
+    "botframework-webchat-core": "4.19.0",
     "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.0",
+    "mdast-util-from-markdown": "2.0.3",
     "memoize-one": "6.0.0",
-    "merge-refs": "1.3.0",
+    "merge-refs": "2.0.0",
     "prop-types": "15.8.1",
-    "react-chain-of-responsibility": "0.2.0-main.3cb47ab",
-    "react-dictate-button": "2.0.1",
-    "react-film": "3.1.1-main.df870ea",
+    "punycode": "2.3.1",
+    "react-chain-of-responsibility": "0.4.2",
+    "react-dictate-button": "4.0.1",
+    "react-film": "4.0.0",
     "react-redux": "7.2.9",
-    "react-say": "2.1.0",
-    "react-scroll-to-bottom": "4.2.0",
+    "react-say": "2.2.1",
+    "react-scroll-to-bottom": "4.2.1-main.53844f5",
+    "react-wrap-with": "0.1.0",
     "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.2",
+    "use-reduce-memo": "0.1.0",
+    "use-ref-from": "0.2.1",
+    "use-state-with-ref": "0.2.1",
+    "valibot": "1.3.1"
   },
   "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/AttachmentRow.tsx

@@ -0,0 +1,56 @@
+import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot';
+import { useStyles } from '@msinternal/botframework-webchat-styles/react';
+import cx from 'classnames';
+import React, { memo } from 'react';
+import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot';
+
+import ScreenReaderText from '../ScreenReaderText';
+import Bubble from './Bubble';
+
+import styles from './StackedLayout.module.css';
+
+const attachmentRowPropsSchema = pipe(
+  object({
+    attachedAlt: string(),
+    children: optional(reactNode()),
+    fromUser: boolean(),
+    hasAvatar: boolean(),
+    hasNub: boolean(),
+    showBubble: optional(boolean())
+  }),
+  readonly()
+);
+
+type AttachmentRowProps = InferInput<typeof attachmentRowPropsSchema>;
+
+function AttachmentRow(props: AttachmentRowProps) {
+  const {
+    attachedAlt,
+    children,
+    fromUser,
+    hasAvatar,
+    hasNub,
+    showBubble = true
+  } = validateProps(attachmentRowPropsSchema, props);
+  const classNames = useStyles(styles);
+
+  return (
+    <div aria-roledescription="attachment" className={classNames['stacked-layout__attachment-row']} role="group">
+      <ScreenReaderText text={attachedAlt} />
+      {showBubble ? (
+        <Bubble
+          className={classNames['stacked-layout__attachment']}
+          fromUser={fromUser}
+          nub={hasAvatar || hasNub ? 'hidden' : false}
+        >
+          {children}
+        </Bubble>
+      ) : (
+        <div className={cx(classNames['stacked-layout__attachment'])}>{children}</div>
+      )}
+    </div>
+  );
+}
+
+export default memo(AttachmentRow);
+export { attachmentRowPropsSchema, type AttachmentRowProps };

package/src/Activity/Avatar.tsx

@@ -1,33 +1,30 @@
-import PropTypes from 'prop-types';
-import React, { VFC } from 'react';
+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 { DefaultAvatar } from '../Middleware/Avatar/createCoreMiddleware';
+import DefaultAvatar from '../Middleware/Avatar/DefaultAvatar';
 
-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.module.css

@@ -0,0 +1,131 @@
+:global(.webchat) .bubble {
+  display: flex;
+  position: relative;
+
+  --webchat__bubble--background: var(--webchat__background--bubble);
+  --webchat__bubble--border-color: var(--webchat__border-color--bubble);
+  --webchat__bubble--border-radius: var(--webchat__border-radius--bubble);
+  --webchat__bubble--border-style: var(--webchat__border-style--bubble);
+  --webchat__bubble--border-width: var(--webchat__border-width--bubble);
+  --webchat__bubble--border-width: var(--webchat__border-width--bubble);
+  --webchat__bubble--color: var(--webchat__color--bubble);
+  --webchat__bubble--nub-size: var(--webchat__size--bubble-nub);
+  --webchat__bubble--nub-space: var(--webchat__space--bubble-nub);
+
+  --webchat__bubble--nub-border-radius: min(
+    var(--webchat__bubble--border-radius),
+    calc(var(--webchat__bubble--nub-space) * -1)
+  );
+  --webchat__bubble--nub-inset-block: auto calc(-1 * var(--webchat__bubble--nub-space));
+  --webchat__bubble--nub-inset-inline: calc(
+      var(--webchat__bubble--border-width) -
+      var(--webchat__bubble--nub-size) +
+      var(--webchat__padding--regular)
+    )
+    auto;
+
+  &.bubble--nub-on-top {
+    --webchat__bubble--nub-border-radius: min(var(--webchat__bubble--border-radius), var(--webchat__bubble--nub-space));
+    --webchat__bubble--nub-inset-block: var(--webchat__bubble--nub-space) auto;
+  }
+  &.bubble--from-user {
+    --webchat__bubble--background: var(--webchat__background--bubble-user);
+    --webchat__bubble--border-color: var(--webchat__border-color--bubble-user);
+    --webchat__bubble--border-radius: var(--webchat__border-radius--bubble-user);
+    --webchat__bubble--border-style: var(--webchat__border-style--bubble-user);
+    --webchat__bubble--border-width: var(--webchat__border-width--bubble-user);
+    --webchat__bubble--border-width: var(--webchat__border-width--bubble-user);
+    --webchat__bubble--color: var(--webchat__color--bubble-user);
+    --webchat__bubble--nub-size: var(--webchat__size--bubble-nub-user);
+    --webchat__bubble--nub-space: var(--webchat__space--bubble-nub-user);
+
+    --webchat__bubble--nub-inset-inline: auto
+      calc(var(--webchat__bubble--border-width) - var(--webchat__bubble--nub-size) + var(--webchat__padding--regular));
+  }
+
+  .bubble__content {
+    flex-grow: 1;
+    margin-inline: 0;
+    /* This is for hiding content outside of the bubble, for example, content outside of border radius */
+    overflow: hidden;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: margin-inline-start, margin-inline-end;
+    word-break: var(--webchat__word-break--message-activity);
+  }
+
+  .bubble__nub {
+    overflow: hidden; /* This style is for IE11 because it doesn't respect SVG viewport */
+    position: absolute;
+  }
+
+  &:dir(rtl) .bubble__nub {
+    transform: scale(-1, 1);
+  }
+
+  .bubble__nub-pad {
+    flex-shrink: 0;
+    transition-duration: var(--webchat__transition-duration);
+    transition-property: width;
+    width: 0;
+  }
+
+  &.bubble--hide-nub,
+  &.bubble--show-nub {
+    .bubble__nub-pad {
+      width: var(--webchat__padding--regular);
+    }
+  }
+
+  .bubble__content {
+    background: var(--webchat__bubble--background);
+    border-color: var(--webchat__bubble--border-color);
+    border-radius: var(--webchat__bubble--border-radius);
+    border-style: var(--webchat__bubble--border-style);
+    border-width: var(--webchat__bubble--border-width);
+    color: var(--webchat__bubble--color);
+    min-height: calc(var(--webchat__min-height--bubble) - var(--webchat__bubble--border-width) * 2);
+  }
+
+  .bubble__nub {
+    height: var(--webchat__bubble--nub-size);
+    inset-block: var(--webchat__bubble--nub-inset-block);
+    inset-inline: var(--webchat__bubble--nub-inset-inline);
+    width: var(--webchat__bubble--nub-size);
+  }
+
+  .bubble__nub-outline {
+    fill: var(--webchat__bubble--background);
+    stroke-width: var(--webchat__bubble--border-width);
+    stroke: var(--webchat__bubble--border-color);
+  }
+
+  /* Bot bubble styles (not from user) - nub on inline-start side */
+  &:not(.bubble--from-user) {
+    /* Adjust border radius when nub is shown */
+    &.bubble--show-nub {
+      &:not(.bubble--nub-on-top) .bubble__content {
+        border-end-start-radius: var(--webchat__bubble--nub-border-radius);
+      }
+
+      &.bubble--nub-on-top .bubble__content {
+        border-start-start-radius: var(--webchat__bubble--nub-border-radius);
+      }
+    }
+  }
+
+  /* User bubble styles - nub on inline-end side */
+  &.bubble--from-user {
+    flex-direction: row-reverse;
+
+    /* Adjust border radius when nub is shown */
+    &.bubble--show-nub {
+      &:not(.bubble--nub-on-top) .bubble__content {
+        border-end-end-radius: var(--webchat__bubble--nub-border-radius);
+      }
+
+      &.bubble--nub-on-top .bubble__content {
+        border-start-end-radius: var(--webchat__bubble--nub-border-radius);
+      }
+    }
+  }
+}