botframework-webchat-component 4.13.0 → 4.15.0

package/lib/providers/TranscriptFocus/useFocusRelativeActivity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusRelativeActivity.d.ts","sourceRoot":"","sources":["../../../src/providers/TranscriptFocus/useFocusRelativeActivity.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,qBAAqB,IAAI,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAEvE"}

package/lib/providers/TranscriptFocus/useFocusRelativeActivity.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFocusByActivityKey;
+
+var _useContext = _interopRequireDefault(require("./private/useContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useFocusByActivityKey() {
+  return (0, _useContext.default)().focusRelativeActivity;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wcm92aWRlcnMvVHJhbnNjcmlwdEZvY3VzL3VzZUZvY3VzUmVsYXRpdmVBY3Rpdml0eS50cyJdLCJuYW1lcyI6WyJ1c2VGb2N1c0J5QWN0aXZpdHlLZXkiLCJmb2N1c1JlbGF0aXZlQWN0aXZpdHkiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7OztBQUVlLFNBQVNBLHFCQUFULEdBQTBEO0FBQ3ZFLFNBQU8sMkJBQTRCQyxxQkFBbkM7QUFDRCIsInNvdXJjZVJvb3QiOiJjb21wb25lbnQ6Ly8vIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHVzZVRyYW5zY3JpcHRGb2N1c0NvbnRleHQgZnJvbSAnLi9wcml2YXRlL3VzZUNvbnRleHQnO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiB1c2VGb2N1c0J5QWN0aXZpdHlLZXkoKTogKGRlbHRhOiBudW1iZXIpID0+IHZvaWQge1xuICByZXR1cm4gdXNlVHJhbnNjcmlwdEZvY3VzQ29udGV4dCgpLmZvY3VzUmVsYXRpdmVBY3Rpdml0eTtcbn1cbiJdfQ==

package/lib/providers/TranscriptFocus/useFocusedActivityKey.d.ts

@@ -0,0 +1,2 @@
+export default function useFocusedActivityKey(): readonly [string];
+//# sourceMappingURL=useFocusedActivityKey.d.ts.map

package/lib/providers/TranscriptFocus/useFocusedActivityKey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusedActivityKey.d.ts","sourceRoot":"","sources":["../../../src/providers/TranscriptFocus/useFocusedActivityKey.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,qBAAqB,IAAI,SAAS,CAAC,MAAM,CAAC,CAEjE"}

package/lib/providers/TranscriptFocus/useFocusedActivityKey.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFocusedActivityKey;
+
+var _useContext = _interopRequireDefault(require("./private/useContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useFocusedActivityKey() {
+  return (0, _useContext.default)().focusedActivityKeyState;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wcm92aWRlcnMvVHJhbnNjcmlwdEZvY3VzL3VzZUZvY3VzZWRBY3Rpdml0eUtleS50cyJdLCJuYW1lcyI6WyJ1c2VGb2N1c2VkQWN0aXZpdHlLZXkiLCJmb2N1c2VkQWN0aXZpdHlLZXlTdGF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBOzs7O0FBRWUsU0FBU0EscUJBQVQsR0FBb0Q7QUFDakUsU0FBTywyQkFBNEJDLHVCQUFuQztBQUNEIiwic291cmNlUm9vdCI6ImNvbXBvbmVudDovLy8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdXNlVHJhbnNjcmlwdEZvY3VzQ29udGV4dCBmcm9tICcuL3ByaXZhdGUvdXNlQ29udGV4dCc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZUZvY3VzZWRBY3Rpdml0eUtleSgpOiByZWFkb25seSBbc3RyaW5nXSB7XG4gIHJldHVybiB1c2VUcmFuc2NyaXB0Rm9jdXNDb250ZXh0KCkuZm9jdXNlZEFjdGl2aXR5S2V5U3RhdGU7XG59XG4iXX0=

package/lib/providers/TranscriptFocus/useFocusedExplicitly.d.ts

@@ -0,0 +1,2 @@
+export default function useFocusedExplicitly(): readonly [boolean];
+//# sourceMappingURL=useFocusedExplicitly.d.ts.map

package/lib/providers/TranscriptFocus/useFocusedExplicitly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusedExplicitly.d.ts","sourceRoot":"","sources":["../../../src/providers/TranscriptFocus/useFocusedExplicitly.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,oBAAoB,IAAI,SAAS,CAAC,OAAO,CAAC,CAEjE"}

package/lib/providers/TranscriptFocus/useFocusedExplicitly.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFocusedExplicitly;
+
+var _useContext = _interopRequireDefault(require("./private/useContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useFocusedExplicitly() {
+  return (0, _useContext.default)().focusedExplicitlyState;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wcm92aWRlcnMvVHJhbnNjcmlwdEZvY3VzL3VzZUZvY3VzZWRFeHBsaWNpdGx5LnRzIl0sIm5hbWVzIjpbInVzZUZvY3VzZWRFeHBsaWNpdGx5IiwiZm9jdXNlZEV4cGxpY2l0bHlTdGF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBOzs7O0FBRWUsU0FBU0Esb0JBQVQsR0FBb0Q7QUFDakUsU0FBTywyQkFBNEJDLHNCQUFuQztBQUNEIiwic291cmNlUm9vdCI6ImNvbXBvbmVudDovLy8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdXNlVHJhbnNjcmlwdEZvY3VzQ29udGV4dCBmcm9tICcuL3ByaXZhdGUvdXNlQ29udGV4dCc7XG5cbmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIHVzZUZvY3VzZWRFeHBsaWNpdGx5KCk6IHJlYWRvbmx5IFtib29sZWFuXSB7XG4gIHJldHVybiB1c2VUcmFuc2NyaXB0Rm9jdXNDb250ZXh0KCkuZm9jdXNlZEV4cGxpY2l0bHlTdGF0ZTtcbn1cbiJdfQ==

package/lib/providers/TranscriptFocus/useGetDescendantIdByActivityKey.d.ts

@@ -0,0 +1,2 @@
+export default function useGetDescendantIdByActivityKey(): (activityKey?: string) => string | undefined;
+//# sourceMappingURL=useGetDescendantIdByActivityKey.d.ts.map

package/lib/providers/TranscriptFocus/useGetDescendantIdByActivityKey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetDescendantIdByActivityKey.d.ts","sourceRoot":"","sources":["../../../src/providers/TranscriptFocus/useGetDescendantIdByActivityKey.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,+BAA+B,IAAI,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAEtG"}

package/lib/providers/TranscriptFocus/useGetDescendantIdByActivityKey.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useGetDescendantIdByActivityKey;
+
+var _useContext = _interopRequireDefault(require("./private/useContext"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useGetDescendantIdByActivityKey() {
+  return (0, _useContext.default)().getDescendantIdByActivityKey;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9wcm92aWRlcnMvVHJhbnNjcmlwdEZvY3VzL3VzZUdldERlc2NlbmRhbnRJZEJ5QWN0aXZpdHlLZXkudHMiXSwibmFtZXMiOlsidXNlR2V0RGVzY2VuZGFudElkQnlBY3Rpdml0eUtleSIsImdldERlc2NlbmRhbnRJZEJ5QWN0aXZpdHlLZXkiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7OztBQUVlLFNBQVNBLCtCQUFULEdBQXlGO0FBQ3RHLFNBQU8sMkJBQTRCQyw0QkFBbkM7QUFDRCIsInNvdXJjZVJvb3QiOiJjb21wb25lbnQ6Ly8vIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHVzZVRyYW5zY3JpcHRGb2N1c0NvbnRleHQgZnJvbSAnLi9wcml2YXRlL3VzZUNvbnRleHQnO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiB1c2VHZXREZXNjZW5kYW50SWRCeUFjdGl2aXR5S2V5KCk6IChhY3Rpdml0eUtleT86IHN0cmluZykgPT4gc3RyaW5nIHwgdW5kZWZpbmVkIHtcbiAgcmV0dXJuIHVzZVRyYW5zY3JpcHRGb2N1c0NvbnRleHQoKS5nZXREZXNjZW5kYW50SWRCeUFjdGl2aXR5S2V5O1xufVxuIl19

package/lib/tsconfig.json

@@ -11,5 +11,5 @@
     "skipLibCheck": true,
     "sourceMap": true
   },
-  "files": ["index.tsx"]
+  "files": ["index.ts"]
 }

package/lib/types/ScrollPosition.d.ts

@@ -0,0 +1,6 @@
+declare type ScrollPosition = {
+    activityID?: string;
+    scrollTop: number;
+};
+export default ScrollPosition;
+//# sourceMappingURL=ScrollPosition.d.ts.map

package/lib/types/ScrollPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollPosition.d.ts","sourceRoot":"","sources":["../../src/types/ScrollPosition.ts"],"names":[],"mappings":"AAAA,aAAK,cAAc,GAAG;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/types/ScrollPosition.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZVJvb3QiOiJjb21wb25lbnQ6Ly8vIiwic291cmNlc0NvbnRlbnQiOltdfQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "botframework-webchat-component",
-  "version": "4.13.0",
+  "version": "4.15.0",
   "description": "React component of botframework-webchat",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -16,64 +16,57 @@
   "bugs": {
     "url": "https://github.com/microsoft/BotFramework-WebChat/issues"
   },
-  "homepage": "https://github.com/microsoft/BotFramework-WebChat/tree/master/packages/component#readme",
+  "homepage": "https://github.com/microsoft/BotFramework-WebChat/tree/main/packages/component#readme",
   "scripts": {
     "build": "npm run build:typescript && npm run build:babel",
     "build:babel": "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:typescript": "tsc --project src/tsconfig.json",
-    "eslint": "eslint src/**/*.js src/**/*.ts --fix",
+    "eslint": "npm run precommit",
+    "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\" \"npm run start:babel\" \"npm run start:typescript\"",
     "start:babel": "npm run build:babel -- --skip-initial-build --watch",
     "start:typescript": "npm run build:typescript -- --watch"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.10",
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/node": "^14.14.35",
-    "@types/react": "^16.9.55",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
-    "@typescript-eslint/parser": "^4.19.0",
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@types/node": "^16.10.9",
+    "@types/react": "^17.0.29",
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "concurrently": "^6.0.0",
-    "core-js": "^3.9.1",
-    "eslint": "^7.22.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "node-dev": "^6.4.0",
-    "prettier": "^2.2.1",
-    "typescript": "^4.2.3"
+    "concurrently": "^6.3.0",
+    "core-js": "^3.18.3",
+    "node-dev": "^7.0.0",
+    "typescript": "^4.3.5"
   },
   "dependencies": {
+    "@emotion/css": "11.1.3",
     "base64-js": "1.5.1",
-    "botframework-webchat-api": "4.13.0",
-    "botframework-webchat-core": "4.13.0",
-    "classnames": "2.2.6",
-    "create-emotion": "10.0.27",
-    "event-target-shim": "5.0.1",
-    "event-target-shim-es5": "1.2.0",
-    "markdown-it": "12.0.4",
+    "botframework-webchat-api": "4.15.0",
+    "botframework-webchat-core": "4.15.0",
+    "classnames": "2.3.1",
+    "compute-scroll-into-view": "1.0.17",
+    "event-target-shim": "6.0.2",
+    "markdown-it": "12.3.2",
     "math-random": "2.0.1",
-    "memoize-one": "5.1.1",
+    "memoize-one": "5.2.1",
     "prop-types": "15.7.2",
-    "react-dictate-button": "1.2.3-master.6b4fe72",
-    "react-film": "3.0.0",
-    "react-redux": "7.2.2",
-    "react-say": "2.0.2-master.ee7cd76",
-    "react-scroll-to-bottom": "4.1.0",
+    "react-dictate-button": "2.0.1",
+    "react-film": "3.1.0",
+    "react-redux": "7.2.4",
+    "react-say": "2.1.0",
+    "react-scroll-to-bottom": "4.2.0",
     "redux": "4.0.5",
-    "remark": "10.0.1",
-    "sanitize-html": "1.27.5",
-    "simple-update-in": "2.2.0",
-    "strip-markdown": "3.0.4"
+    "simple-update-in": "2.2.0"
   },
   "peerDependencies": {
-    "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react": ">= 16.8.6",
+    "react-dom": ">= 16.8.6"
   }
 }

package/src/Activity/{Avatar.js → Avatar.tsx}

@@ -1,9 +1,16 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import { DefaultAvatar } from '../Middleware/Avatar/createCoreMiddleware';
 
-const Avatar = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
+type AvatarProps = {
+  'aria-hidden'?: boolean;
+  className?: string;
+  fromUser?: boolean;
+};
+
+/** @deprecated Please use `useRenderAvatar` hook instead. */
+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.'
   );

package/src/Activity/{Bubble.js → Bubble.tsx}

@@ -3,7 +3,7 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC, ReactNode } from 'react';
 
 import isZeroOrPositive from '../Utils/isZeroOrPositive';
 import useStyleSet from '../hooks/useStyleSet';
@@ -62,7 +62,15 @@ function acuteNubSVG(nubSize, strokeWidth, side, upSideDown = false) {
   );
 }
 
-const Bubble = ({ 'aria-hidden': ariaHidden, children, className, fromUser, nub }) => {
+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 [

package/src/Activity/CarouselFilmStrip.js

@@ -7,13 +7,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import Bubble from './Bubble';
+import CarouselFilmStripAttachment from './CarouselFilmStripAttachment';
 import connectToWebChat from '../connectToWebChat';
 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 useUniqueId from '../hooks/internal/useUniqueId';
 
 const { useAvatarForBot, useAvatarForUser, useDirection, useLocalizer, useStyleOptions } = hooks;
 
@@ -36,7 +36,7 @@ const ROOT_STYLE = {
       flexShrink: 0
     },
 
-    '& .webchat__carousel-filmstrip__attachment': {
+    '& .webchat__carousel-filmstrip-attachment': {
       flex: 1
     },
 
@@ -127,7 +127,6 @@ const CarouselFilmStrip = ({
   const [{ initials: botInitials }] = useAvatarForBot();
   const [{ initials: userInitials }] = useAvatarForUser();
   const [direction] = useDirection();
-  const ariaLabelId = useUniqueId('webchat__carousel-filmstrip__id');
   const localize = useLocalizer();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const showActivityStatus = typeof renderActivityStatus === 'function';
@@ -146,10 +145,8 @@ const CarouselFilmStrip = ({
   const activityDisplayText = messageBackDisplayText || text;
   const fromUser = role === 'user';
 
-  const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
-  const greetingAlt = (fromUser
-    ? localize('ACTIVITY_YOU_SAID_ALT')
-    : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
+  const greetingAlt = (
+    fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
   ).replace(/\s{2,}/gu, ' ');
 
   const initials = fromUser ? userInitials : botInitials;
@@ -169,15 +166,16 @@ const CarouselFilmStrip = ({
   const showAvatar = showCallout && hasAvatar && !!renderAvatar;
   const showNub = showCallout && hasNub && (topAlignedCallout || !attachments.length);
 
+  const hideNub = hasNub && !showNub;
+
   return (
     <div
-      aria-labelledby={ariaLabelId}
       className={classNames(
         'webchat__carousel-filmstrip',
         {
           'webchat__carousel-filmstrip--extra-trailing': extraTrailing,
           'webchat__carousel-filmstrip--hide-avatar': hasAvatar && !showAvatar,
-          'webchat__carousel-filmstrip--hide-nub': hasNub && !showNub,
+          'webchat__carousel-filmstrip--hide-nub': hideNub,
           'webchat__carousel-filmstrip--no-message': !activityDisplayText,
           'webchat__carousel-filmstrip--rtl': direction === 'rtl',
           'webchat__carousel-filmstrip--show-avatar': showAvatar,
@@ -196,14 +194,7 @@ const CarouselFilmStrip = ({
         <div className="webchat__carousel-filmstrip__avatar-gutter">{showAvatar && renderAvatar({ activity })}</div>
         <div className="webchat__carousel-filmstrip__content">
           {!!activityDisplayText && (
-            <div
-              aria-roledescription="message"
-              className="webchat__carousel-filmstrip__message"
-              // Disable "Prop `id` is forbidden on DOM Nodes" rule because we are using the ID prop for accessibility.
-              /* eslint-disable-next-line react/forbid-dom-props */
-              id={ariaLabelId}
-              role="group"
-            >
+            <div aria-roledescription="message" className="webchat__carousel-filmstrip__message" role="group">
               <ScreenReaderText text={greetingAlt} />
               <Bubble
                 className="webchat__carousel-filmstrip__bubble"
@@ -229,20 +220,20 @@ const CarouselFilmStrip = ({
                 ref={itemContainerCallbackRef}
               >
                 {attachments.map((attachment, index) => (
-                  <li
-                    aria-roledescription="attachment"
-                    className="webchat__carousel-filmstrip__attachment react-film__filmstrip__item"
+                  <CarouselFilmStripAttachment
+                    activity={activity}
+                    attachment={attachment}
+                    fromUser={fromUser}
+                    hasAvatar={hasAvatar}
+                    hideNub={hideNub}
+                    index={index}
                     /* Attachments do not have an ID; it is always indexed by number */
-                    /* eslint-disable-next-line react/no-array-index-key */
+                    // eslint-disable-next-line react/no-array-index-key
                     key={index}
-                    role="listitem"
-                  >
-                    <ScreenReaderText text={attachedAlt} />
-                    {/* eslint-disable-next-line react/no-array-index-key */}
-                    <Bubble fromUser={fromUser} key={index} nub={false}>
-                      {renderAttachment({ activity, attachment })}
-                    </Bubble>
-                  </li>
+                    renderAttachment={renderAttachment}
+                    showAvatar={showAvatar}
+                    showNub={showNub}
+                  />
                 ))}
               </ul>
             </div>

package/src/Activity/CarouselFilmStripAttachment.js

@@ -0,0 +1,91 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Bubble from './Bubble';
+import ScreenReaderText from '../ScreenReaderText';
+import useStyleSet from '../hooks/useStyleSet';
+
+const { useDirection, useLocalizer } = hooks;
+
+const CarouselFilmStripAttachment = ({
+  activity,
+  attachment,
+  className,
+  fromUser,
+  hasAvatar,
+  hideNub,
+  index,
+  renderAttachment,
+  showAvatar,
+  showNub
+}) => {
+  const [direction] = useDirection();
+  const localize = useLocalizer();
+  const [{ carouselFilmStripAttachment: carouselFilmStripAttachmentStyleSet }] = useStyleSet();
+
+  const attachedAlt = localize(fromUser ? 'ACTIVITY_YOU_ATTACHED_ALT' : 'ACTIVITY_BOT_ATTACHED_ALT');
+
+  return (
+    <li
+      aria-roledescription="attachment"
+      className={classNames(
+        'webchat__carousel-filmstrip-attachment',
+        {
+          'webchat__carousel-filmstrip-attachment--hide-avatar': hasAvatar && !showAvatar,
+          'webchat__carousel-filmstrip-attachment--hide-nub': hideNub,
+          'webchat__carousel-filmstrip-attachment--rtl': direction === 'rtl',
+          'webchat__carousel-filmstrip-attachment--show-avatar': showAvatar,
+          'webchat__carousel-filmstrip-attachment--show-nub': showNub
+        },
+        'react-film__filmstrip__item',
+        carouselFilmStripAttachmentStyleSet + '',
+        (className || '') + ''
+      )}
+      role="listitem"
+      tabIndex={0}
+    >
+      <ScreenReaderText text={attachedAlt} />
+      <Bubble fromUser={fromUser} key={index} nub={false}>
+        {renderAttachment({ activity, attachment })}
+        <div className="webchat__carousel-filmstrip-attachment--focus" />
+      </Bubble>
+    </li>
+  );
+};
+
+CarouselFilmStripAttachment.defaultProps = {
+  className: ''
+};
+
+CarouselFilmStripAttachment.propTypes = {
+  activity: PropTypes.shape({
+    attachments: PropTypes.array,
+    channelData: PropTypes.shape({
+      messageBack: PropTypes.shape({
+        displayText: PropTypes.string
+      }),
+      state: PropTypes.string
+    }),
+    from: PropTypes.shape({
+      role: PropTypes.string.isRequired
+    }).isRequired,
+    text: PropTypes.string,
+    textFormat: PropTypes.string,
+    timestamp: PropTypes.string
+  }).isRequired,
+  attachment: PropTypes.shape({
+    content: PropTypes.any
+  }).isRequired,
+  className: PropTypes.string,
+  fromUser: PropTypes.any.isRequired,
+  hasAvatar: PropTypes.any.isRequired,
+  hideNub: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  renderAttachment: PropTypes.func.isRequired,
+  showAvatar: PropTypes.bool.isRequired,
+  showNub: PropTypes.bool.isRequired
+};
+
+export default CarouselFilmStripAttachment;

package/src/Activity/{Speak.js → Speak.tsx}

@@ -1,6 +1,7 @@
+import { DirectLineActivity } from 'botframework-webchat-core';
 import { hooks } from 'botframework-webchat-api';
 import PropTypes from 'prop-types';
-import React, { useCallback, useMemo } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 import Say, { SayUtterance } from 'react-say';
 
 import connectToWebChat from '../connectToWebChat';
@@ -22,7 +23,11 @@ const connectSpeakActivity = (...selectors) =>
     ...selectors
   );
 
-const Speak = ({ activity }) => {
+type SpeakProps = {
+  activity: DirectLineActivity;
+};
+
+const Speak: FC<SpeakProps> = ({ activity }) => {
   const [{ showSpokenText }] = useStyleOptions();
   const markActivityAsSpoken = useMarkActivityAsSpoken();
   const selectVoice = useVoiceSelector(activity);
@@ -40,14 +45,16 @@ const Speak = ({ activity }) => {
         speak || text,
         ...attachments
           .filter(({ contentType }) => contentType === 'application/vnd.microsoft.card.adaptive')
-          .map(({ content: { speak } = {} }) => speak)
+          .map(attachment => attachment?.content?.speak)
       ]
         .filter(line => line)
         .join('\r\n')
     );
   }, [activity]);
 
-  const { channelData: { speechSynthesisUtterance } = {} } = activity;
+  const {
+    channelData: { speechSynthesisUtterance } = {}
+  }: { channelData: { speechSynthesisUtterance?: SpeechSynthesisUtterance } } = activity;
 
   return (
     !!activity && (
@@ -57,7 +64,7 @@ const Speak = ({ activity }) => {
         ) : (
           <Say onEnd={markAsSpoken} onError={markAsSpoken} text={singleLine} voice={selectVoice} />
         )}
-        {!!showSpokenText && <SayAlt speak={singleLine} voice={selectVoice} />}
+        {!!showSpokenText && <SayAlt speak={singleLine} />}
       </React.Fragment>
     )
   );