diff --git a/CHANGELOG.md b/CHANGELOG.md
index aac2abdf34..3651380e7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -134,7 +134,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
- [`react-dictate-button@4.0.0`](https://npmjs.com/package/react-dictate-button)
- Enabled icon customization in Fluent theme through CSS variables, in PR [#5413](https://github.com/microsoft/BotFramework-WebChat/pull/5413), by [@OEvgeny](https://github.com/OEvgeny)
- Reworked, enabled in Web Chat, in PR [#5502](https://github.com/microsoft/BotFramework-WebChat/pull/5502), by [@OEvgeny](https://github.com/OEvgeny)
-- Bumped all dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#5427](https://github.com/microsoft/BotFramework-WebChat/pull/5427) and PR [#5529](https://github.com/microsoft/BotFramework-WebChat/pull/5529)
+- Bumped all dependencies to the latest versions, by [@compulim](https://github.com/compulim) in PR [#5427](https://github.com/microsoft/BotFramework-WebChat/pull/5427), PR [#5529](https://github.com/microsoft/BotFramework-WebChat/pull/5529), and PR [#5532](https://github.com/microsoft/BotFramework-WebChat/pull/5532)
- Production dependencies
- [`@babel/runtime@7.28.2`](https://npmjs.com/package/@babel/runtime/v/7.28.2)
- [`botframework-directlinejs@0.15.6`](https://npmjs.com/package/botframework-directlinejs/v/0.15.6)
@@ -151,6 +151,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
- [`microsoft-cognitiveservices-speech-sdk@1.45.0`](https://npmjs.com/package/microsoft-cognitiveservices-speech-sdk/v/1.45.0)
- [`mime@4.0.7`](https://npmjs.com/package/mime/v/4.0.7)
- [`react-chain-of-responsibility@0.3.0`](https://npmjs.com/package/react-chain-of-responsibility/v/0.3.0)
+ - [`react-film@4.0.0`](https://npmjs.com/package/react-film/v/4.0.0)
- [`react-say@2.2.0`](https://npmjs.com/package/react-say/v/2.2.0)
- [`react-scroll-to-bottom@4.2.0`](https://npmjs.com/package/react-scroll-to-bottom/v/4.2.0)
- [`react-wrap-with@0.1.0`](https://npmjs.com/package/react-wrap-with/v/0.1.0)
diff --git a/package-lock.json b/package-lock.json
index 6dc9341048..1b7a19a811 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3501,6 +3501,54 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
+ "node_modules/@msinternal/botframework-webchat-base": {
+ "resolved": "packages/base",
+ "link": true
+ },
+ "node_modules/@msinternal/botframework-webchat-cldr-data": {
+ "resolved": "packages/support/cldr-data",
+ "link": true
+ },
+ "node_modules/@msinternal/botframework-webchat-cldr-data-downloader": {
+ "resolved": "packages/support/cldr-data-downloader",
+ "link": true
+ },
+ "node_modules/@msinternal/botframework-webchat-react-valibot": {
+ "resolved": "packages/react-valibot",
+ "link": true
+ },
+ "node_modules/@msinternal/botframework-webchat-redux-store": {
+ "resolved": "packages/redux-store",
+ "link": true
+ },
+ "node_modules/@msinternal/botframework-webchat-styles": {
+ "resolved": "packages/styles",
+ "link": true
+ },
+ "node_modules/@msinternal/dev-server": {
+ "resolved": "packages/test/dev-server",
+ "link": true
+ },
+ "node_modules/@msinternal/isomorphic-react": {
+ "resolved": "packages/isomorphic-react",
+ "link": true
+ },
+ "node_modules/@msinternal/isomorphic-react-dom": {
+ "resolved": "packages/isomorphic-react-dom",
+ "link": true
+ },
+ "node_modules/@msinternal/test-harness": {
+ "resolved": "packages/test/harness",
+ "link": true
+ },
+ "node_modules/@msinternal/test-page-object": {
+ "resolved": "packages/test/page-object",
+ "link": true
+ },
+ "node_modules/@msinternal/test-web-server": {
+ "resolved": "packages/test/web-server",
+ "link": true
+ },
"node_modules/@nicolo-ribaudo/chokidar-2": {
"version": "2.1.8-no-fsevents.3",
"resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
@@ -4913,10 +4961,6 @@
"@xtuc/long": "4.2.2"
}
},
- "node_modules/@msinternal/dev-server": {
- "resolved": "packages/test/dev-server",
- "link": true
- },
"node_modules/@webpack-cli/configtest": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-3.0.1.tgz",
@@ -5975,18 +6019,6 @@
"resolved": "packages/api",
"link": true
},
- "node_modules/@msinternal/botframework-webchat-base": {
- "resolved": "packages/base",
- "link": true
- },
- "node_modules/@msinternal/botframework-webchat-cldr-data": {
- "resolved": "packages/support/cldr-data",
- "link": true
- },
- "node_modules/@msinternal/botframework-webchat-cldr-data-downloader": {
- "resolved": "packages/support/cldr-data-downloader",
- "link": true
- },
"node_modules/botframework-webchat-component": {
"resolved": "packages/component",
"link": true
@@ -5999,18 +6031,6 @@
"resolved": "packages/fluent-theme",
"link": true
},
- "node_modules/@msinternal/botframework-webchat-react-valibot": {
- "resolved": "packages/react-valibot",
- "link": true
- },
- "node_modules/@msinternal/botframework-webchat-redux-store": {
- "resolved": "packages/redux-store",
- "link": true
- },
- "node_modules/@msinternal/botframework-webchat-styles": {
- "resolved": "packages/styles",
- "link": true
- },
"node_modules/boxen": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
@@ -7686,10 +7706,9 @@
}
},
"node_modules/domutils": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
- "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
- "license": "BSD-2-Clause",
+ "version": "3.2.2",
+ "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+ "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
@@ -10204,6 +10223,44 @@
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"license": "ISC"
},
+ "node_modules/html-dom-parser": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.1.1.tgz",
+ "integrity": "sha512-+o4Y4Z0CLuyemeccvGN4bAO20aauB2N9tFEAep5x4OW34kV4PTarBHm6RL02afYt2BMKcr0D2Agep8S3nJPIBg==",
+ "dependencies": {
+ "domhandler": "5.0.3",
+ "htmlparser2": "10.0.0"
+ }
+ },
+ "node_modules/html-dom-parser/node_modules/entities": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+ "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+ "engines": {
+ "node": ">=0.12"
+ },
+ "funding": {
+ "url": "https://github.com/fb55/entities?sponsor=1"
+ }
+ },
+ "node_modules/html-dom-parser/node_modules/htmlparser2": {
+ "version": "10.0.0",
+ "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.0.0.tgz",
+ "integrity": "sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==",
+ "funding": [
+ "https://github.com/fb55/htmlparser2?sponsor=1",
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/fb55"
+ }
+ ],
+ "dependencies": {
+ "domelementtype": "^2.3.0",
+ "domhandler": "^5.0.3",
+ "domutils": "^3.2.1",
+ "entities": "^6.0.0"
+ }
+ },
"node_modules/html-escaper": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -10211,6 +10268,26 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/html-react-parser": {
+ "version": "5.2.6",
+ "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.2.6.tgz",
+ "integrity": "sha512-qcpPWLaSvqXi+TndiHbCa+z8qt0tVzjMwFGFBAa41ggC+ZA5BHaMIeMJla9g3VSp4SmiZb9qyQbmbpHYpIfPOg==",
+ "dependencies": {
+ "domhandler": "5.0.3",
+ "html-dom-parser": "5.1.1",
+ "react-property": "2.0.2",
+ "style-to-js": "1.1.17"
+ },
+ "peerDependencies": {
+ "@types/react": "0.14 || 15 || 16 || 17 || 18 || 19",
+ "react": "0.14 || 15 || 16 || 17 || 18 || 19"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/html-void-elements": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
@@ -10572,6 +10649,11 @@
"inject-meta-tag": "^0.0.1"
}
},
+ "node_modules/inline-style-parser": {
+ "version": "0.2.4",
+ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+ "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="
+ },
"node_modules/internal-slot": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -11198,14 +11280,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/@msinternal/isomorphic-react": {
- "resolved": "packages/isomorphic-react",
- "link": true
- },
- "node_modules/@msinternal/isomorphic-react-dom": {
- "resolved": "packages/isomorphic-react-dom",
- "link": true
- },
"node_modules/istanbul-lib-coverage": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -15802,78 +15876,34 @@
}
},
"node_modules/react-film": {
- "version": "3.1.1-main.f623bf6",
- "resolved": "https://registry.npmjs.org/react-film/-/react-film-3.1.1-main.f623bf6.tgz",
- "integrity": "sha512-SyEq1folPpiwuWpQI++MQDIVvMidHbFX2QB3ZRtbmFPLAttcchNFpnWJRjdp5fllglBnUdXgiv9B1yU/S3hxIQ==",
- "dependencies": {
- "@babel/runtime-corejs3": "7.20.13",
- "@emotion/css": "11.10.6",
- "classnames": "2.3.2",
- "core-js": "3.28.0",
- "math-random": "2.0.1",
- "memoize-one": "6.0.0",
- "prop-types": "15.8.1"
- },
- "peerDependencies": {
- "react": ">= 16.8.6",
- "react-dom": ">= 16.8.6"
- }
- },
- "node_modules/react-film/node_modules/@babel/runtime-corejs3": {
- "version": "7.20.13",
- "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.20.13.tgz",
- "integrity": "sha512-p39/6rmY9uvlzRiLZBIB3G9/EBr66LBMcYm7fIDeSBNdRjF2AGD3rFZucUyAgGHC2N+7DdLvVi33uTjSE44FIw==",
- "license": "MIT",
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/react-film/-/react-film-4.0.0.tgz",
+ "integrity": "sha512-KHhHA+155CBwSq1REa4f9c+68PZUQdISo25JCEnk/2/TuzO+c/feT95usxwO50MCcWyatWefa8chdu0jYIS3WQ==",
"dependencies": {
- "core-js-pure": "^3.25.1",
- "regenerator-runtime": "^0.13.11"
+ "@emotion/css": "^11.13.5",
+ "classnames": "^2.5.1",
+ "html-react-parser": "^5.2.6",
+ "math-random": "^2.0.1",
+ "memoize-one": "^6.0.0",
+ "prop-types": "^15.8.1",
+ "react-film": "^4.0.0"
},
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/react-film/node_modules/@emotion/css": {
- "version": "11.10.6",
- "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.10.6.tgz",
- "integrity": "sha512-88Sr+3heKAKpj9PCqq5A1hAmAkoSIvwEq1O2TwDij7fUtsJpdkV4jMTISSTouFeRvsGvXIpuSuDQ4C1YdfNGXw==",
- "license": "MIT",
- "dependencies": {
- "@emotion/babel-plugin": "^11.10.6",
- "@emotion/cache": "^11.10.5",
- "@emotion/serialize": "^1.1.1",
- "@emotion/sheet": "^1.2.1",
- "@emotion/utils": "^1.2.0"
- }
- },
- "node_modules/react-film/node_modules/classnames": {
- "version": "2.3.2",
- "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
- "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
- "license": "MIT"
- },
- "node_modules/react-film/node_modules/core-js": {
- "version": "3.28.0",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.28.0.tgz",
- "integrity": "sha512-GiZn9D4Z/rSYvTeg1ljAIsEqFm0LaN9gVtwDCrKL80zHtS31p9BAjmTxVqTQDMpwlMolJZOFntUG2uwyj7DAqw==",
- "hasInstallScript": true,
- "license": "MIT",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/core-js"
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
}
},
- "node_modules/react-film/node_modules/regenerator-runtime": {
- "version": "0.13.11",
- "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
- "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
- "license": "MIT"
- },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
"license": "MIT"
},
+ "node_modules/react-property": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
+ "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug=="
+ },
"node_modules/react-redux": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@@ -17917,6 +17947,22 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/style-to-js": {
+ "version": "1.1.17",
+ "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.17.tgz",
+ "integrity": "sha512-xQcBGDxJb6jjFCTzvQtfiPn6YvvP2O8U1MDIPNfJQlWMYfktPy+iGsHE7cssjs7y84d9fQaK4UF3RIJaAHSoYA==",
+ "dependencies": {
+ "style-to-object": "1.0.9"
+ }
+ },
+ "node_modules/style-to-object": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.9.tgz",
+ "integrity": "sha512-G4qppLgKu/k6FwRpHiGiKPaPTFcG3g4wNVX/Qsfu+RqQM30E7Tyu/TEgxcL9PNLF5pdRLwQdE3YKKf+KF2Dzlw==",
+ "dependencies": {
+ "inline-style-parser": "0.2.4"
+ }
+ },
"node_modules/stylis": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
@@ -18289,18 +18335,6 @@
"node": "*"
}
},
- "node_modules/@msinternal/test-harness": {
- "resolved": "packages/test/harness",
- "link": true
- },
- "node_modules/@msinternal/test-page-object": {
- "resolved": "packages/test/page-object",
- "link": true
- },
- "node_modules/@msinternal/test-web-server": {
- "resolved": "packages/test/web-server",
- "link": true
- },
"node_modules/text-table": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -20566,7 +20600,7 @@
"punycode": "2.3.1",
"react-chain-of-responsibility": "0.3.0",
"react-dictate-button": "4.0.0",
- "react-film": "3.1.1-main.f623bf6",
+ "react-film": "4.0.0",
"react-redux": "7.2.9",
"react-say": "2.2.0",
"react-scroll-to-bottom": "4.2.1-main.53844f5",
@@ -20793,6 +20827,7 @@
}
},
"packages/isomorphic-react": {
+ "name": "@msinternal/isomorphic-react",
"version": "0.0.0-0",
"license": "MIT",
"devDependencies": {
@@ -20804,6 +20839,7 @@
}
},
"packages/isomorphic-react-dom": {
+ "name": "@msinternal/isomorphic-react-dom",
"version": "0.0.0-0",
"license": "MIT",
"devDependencies": {
diff --git a/packages/component/package.json b/packages/component/package.json
index 31ac04c528..010f28201a 100644
--- a/packages/component/package.json
+++ b/packages/component/package.json
@@ -88,10 +88,6 @@
"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.f623bf6",
- "TEMPORARY: Use a custom version to verify build"
- ],
"react-redux": [
"7"
],
@@ -141,7 +137,7 @@
"punycode": "2.3.1",
"react-chain-of-responsibility": "0.3.0",
"react-dictate-button": "4.0.0",
- "react-film": "3.1.1-main.f623bf6",
+ "react-film": "4.0.0",
"react-redux": "7.2.9",
"react-say": "2.2.0",
"react-scroll-to-bottom": "4.2.1-main.53844f5",
diff --git a/packages/component/src/SendBox/SuggestedActions.tsx b/packages/component/src/SendBox/SuggestedActions.tsx
index 1cdbef6b99..2af00d1007 100644
--- a/packages/component/src/SendBox/SuggestedActions.tsx
+++ b/packages/component/src/SendBox/SuggestedActions.tsx
@@ -4,13 +4,12 @@ import { hooks } from 'botframework-webchat-api';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { useCallback, useMemo, useRef } from 'react';
-// eslint-disable-next-line import/no-named-as-default
-import BasicFilm, { createBasicStyleSet as createBasicStyleSetForReactFilm } from 'react-film';
+import { createBasicStyleSet as createBasicStyleSetForReactFilm, ReactFilm } from 'react-film';
import computeSuggestedActionText from '../Utils/computeSuggestedActionText';
+import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
import useFocusWithin from '../hooks/internal/useFocusWithin';
import useNonce from '../hooks/internal/useNonce';
-import { useStyleToEmotionObject } from '../hooks/internal/styleToEmotionObject';
import useFocus from '../hooks/useFocus';
import useStyleSet from '../hooks/useStyleSet';
import RovingTabIndexComposer from '../providers/RovingTabIndex/RovingTabIndexComposer';
@@ -89,7 +88,7 @@ const SuggestedActionCarouselContainer = ({ children, className, label }) => {
role="toolbar"
>
{!!children && !!React.Children.count(children) && (
- {
styleSet={filmStyleSet}
>
{children}
-
+
)}