botframework-webchat-api 4.13.0 → 4.14.2

package/src/hooks/Composer.tsx

@@ -3,23 +3,17 @@ import PropTypes from 'prop-types';
 import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import updateIn from 'simple-update-in';
 
-import createCustomEvent from '../utils/createCustomEvent';
-import ErrorBoundary from './utils/ErrorBoundary';
-import getAllLocalizedStrings from '../localization/getAllLocalizedStrings';
-import isObject from '../utils/isObject';
-import normalizeLanguage from '../utils/normalizeLanguage';
-// @ts-ignore
-import PrecompiledGlobalize from '../external/PrecompiledGlobalize';
-import StyleOptions from '../StyleOptions';
-
 import {
   clearSuggestedActions,
   connect as createConnectAction,
   createStore,
+  DirectLineActivity,
+  DirectLineJSBotConnection,
   disconnect,
   dismissNotification,
   emitTypingIndicator,
   markActivity,
+  OneOrMany,
   postActivity,
   sendEvent,
   sendFiles,
@@ -33,6 +27,7 @@ import {
   setSendBox,
   setSendTimeout,
   setSendTypingIndicator,
+  singleToArray,
   startDictate,
   startSpeakingActivity,
   stopDictate,
@@ -40,23 +35,44 @@ import {
   submitSendBox
 } from 'botframework-webchat-core';
 
+import { default as WebChatAPIContext } from './internal/WebChatAPIContext';
+import ActivityMiddleware from '../types/ActivityMiddleware';
+import ActivityStatusMiddleware from '../types/ActivityStatusMiddleware';
+import AttachmentForScreenReaderMiddleware from '../types/AttachmentForScreenReaderMiddleware';
+import AttachmentMiddleware from '../types/AttachmentMiddleware';
+import AvatarMiddleware from '../types/AvatarMiddleware';
+import CardActionMiddleware from '../types/CardActionMiddleware';
+import createCustomEvent from '../utils/createCustomEvent';
 import createDefaultCardActionMiddleware from './middleware/createDefaultCardActionMiddleware';
 import createDefaultGroupActivitiesMiddleware from './middleware/createDefaultGroupActivitiesMiddleware';
 import defaultSelectVoice from './internal/defaultSelectVoice';
+import ErrorBoundary from './utils/ErrorBoundary';
+import getAllLocalizedStrings from '../localization/getAllLocalizedStrings';
+import GroupActivitiesMiddleware from '../types/GroupActivitiesMiddleware';
+import isObject from '../utils/isObject';
+import LocalizedStrings from '../types/LocalizedStrings';
 import mapMap from '../utils/mapMap';
+import normalizeLanguage from '../utils/normalizeLanguage';
+import normalizeStyleOptions from '../normalizeStyleOptions';
 import observableToPromise from './utils/observableToPromise';
+import patchStyleOptionsFromDeprecatedProps from '../patchStyleOptionsFromDeprecatedProps';
+import PrecompiledGlobalizeType from '../types/PrecompiledGlobalize';
+import ScrollToEndButtonMiddleware, { ScrollToEndButtonComponentFactory } from '../types/ScrollToEndButtonMiddleware';
+import StyleOptions from '../StyleOptions';
+import TelemetryMeasurementEvent, { TelemetryExceptionMeasurementEvent } from '../types/TelemetryMeasurementEvent';
+import ToastMiddleware from '../types/ToastMiddleware';
 import Tracker from './internal/Tracker';
+import TypingIndicatorMiddleware from '../types/TypingIndicatorMiddleware';
 import WebChatReduxContext, { useDispatch } from './internal/WebChatReduxContext';
-import { default as WebChatAPIContext } from './internal/WebChatAPIContext';
 
 import applyMiddleware, {
   forLegacyRenderer as applyMiddlewareForLegacyRenderer,
   forRenderer as applyMiddlewareForRenderer
 } from './middleware/applyMiddleware';
 
-import normalizeStyleOptions from '../normalizeStyleOptions';
-import patchStyleOptionsFromDeprecatedProps from '../patchStyleOptionsFromDeprecatedProps';
-import singleToArray from './utils/singleToArray';
+// PrecompileGlobalize is a generated file and is not ES module. TypeScript don't work with UMD.
+// @ts-ignore
+import PrecompiledGlobalize from '../external/PrecompiledGlobalize';
 
 // List of Redux actions factory we are hoisting as Web Chat functions
 const DISPATCHERS = {
@@ -151,44 +167,54 @@ function mergeStringsOverrides(localizedStrings, language, overrideLocalizedStri
   return { ...localizedStrings, ...overrideLocalizedStrings };
 }
 
-type ComposerProps = {
-  activityMiddleware: any;
-  activityRenderer: any;
-  activityStatusMiddleware: any;
-  activityStatusRenderer: any;
-  attachmentForScreenReaderMiddleware: any;
-  attachmentMiddleware: any;
-  attachmentRenderer: any;
-  avatarMiddleware: any;
-  avatarRenderer: any;
-  cardActionMiddleware: any;
-  children: ReactNode;
-  dir: string;
-  directLine: any;
-  disabled: boolean;
-  downscaleImageToDataURL: any;
-  grammars: any;
-  groupActivitiesMiddleware: any;
-  groupTimestamp: boolean | number;
-  internalErrorBoxClass: any;
-  internalRenderErrorBox: any;
-  locale: string;
-  onTelemetry: any;
-  overrideLocalizedStrings: any;
-  renderMarkdown: any;
-  selectVoice: any;
-  sendTimeout: number;
-  sendTypingIndicator: any;
-  styleOptions: StyleOptions;
-  toastMiddleware: any;
-  toastRenderer: any;
-  typingIndicatorMiddleware: any;
-  typingIndicatorRenderer: any;
-  userID: string;
-  username: string;
+type ComposerCoreProps = {
+  activityMiddleware?: OneOrMany<ActivityMiddleware>;
+  activityStatusMiddleware?: OneOrMany<ActivityStatusMiddleware>;
+  attachmentForScreenReaderMiddleware?: OneOrMany<AttachmentForScreenReaderMiddleware>;
+  attachmentMiddleware?: OneOrMany<AttachmentMiddleware>;
+  avatarMiddleware?: OneOrMany<AvatarMiddleware>;
+  cardActionMiddleware?: OneOrMany<CardActionMiddleware>;
+  children?: ReactNode;
+  dir?: string;
+  directLine: DirectLineJSBotConnection;
+  disabled?: boolean;
+  downscaleImageToDataURL?: (blob: Blob, maxWidth: number, maxHeight: number, type: string, quality: number) => string;
+  grammars?: any;
+  groupActivitiesMiddleware?: OneOrMany<GroupActivitiesMiddleware>;
+  internalErrorBoxClass?: React.Component | Function;
+  internalRenderErrorBox?: any;
+  locale?: string;
+  onTelemetry?: (event: TelemetryMeasurementEvent) => void;
+  overrideLocalizedStrings?: LocalizedStrings | ((strings: LocalizedStrings, language: string) => LocalizedStrings);
+  renderMarkdown?: (markdown: string, { markdownRespectCRLF: boolean }, { externalLinkAlt: string }) => string;
+  scrollToEndButtonMiddleware?: OneOrMany<ScrollToEndButtonMiddleware>;
+  selectVoice?: (voices: typeof window.SpeechSynthesisVoice[], activity: DirectLineActivity) => void;
+  sendTypingIndicator?: boolean;
+  styleOptions?: StyleOptions;
+  toastMiddleware?: OneOrMany<ToastMiddleware>;
+  typingIndicatorMiddleware?: OneOrMany<TypingIndicatorMiddleware>;
+  userID?: string;
+  username?: string;
+
+  /** @deprecated Please use "activityMiddleware" instead. */
+  activityRenderer?: any; // TODO: [P4] Remove on or after 2022-06-15.
+  /** @deprecated Please use "activityStatusMiddleware" instead. */
+  activityStatusRenderer?: any; // TODO: [P4] Remove on or after 2022-06-15.
+  /** @deprecated Please use "attachmentMiddleware" instead. */
+  attachmentRenderer?: any; // TODO: [P4] Remove on or after 2022-06-15.
+  /** @deprecated Please use "avatarMiddleware" instead. */
+  avatarRenderer?: any; // TODO: [P4] Remove on or after 2022-06-15.
+  /** @deprecated Please use "styleOptions.groupTimestamp" instead. */
+  groupTimestamp?: boolean | number; // TODO: [P4] Remove on or after 2022-01-01
+  /** @deprecated Please use "styleOptions.sendTimeout" instead. */
+  sendTimeout?: number; // TODO: [P4] Remove on or after 2022-01-01.
+  /** @deprecated Please use "toastMiddleware" instead. */
+  toastRenderer?: any; // TODO: [P4] Remove on or after 2022-06-15.
+  /** @deprecated Please use "typingIndicatorRenderer" instead. */
+  typingIndicatorRenderer?: any; // TODO: [P4] Remove on or after 2022-06-15.
 };
 
-const Composer: FC<ComposerProps> = ({
+const ComposerCore: FC<ComposerCoreProps> = ({
   activityMiddleware,
   activityRenderer,
   activityStatusMiddleware,
@@ -212,6 +238,7 @@ const Composer: FC<ComposerProps> = ({
   onTelemetry,
   overrideLocalizedStrings,
   renderMarkdown,
+  scrollToEndButtonMiddleware,
   selectVoice,
   sendTimeout,
   sendTypingIndicator,
@@ -292,14 +319,14 @@ const Composer: FC<ComposerProps> = ({
     [locale, overrideLocalizedStrings]
   );
 
-  const localizedGlobalize = useMemo(() => {
+  const localizedGlobalize = useMemo<PrecompiledGlobalizeType>(() => {
     const { GLOBALIZE, GLOBALIZE_LANGUAGE } = patchedLocalizedStrings || {};
 
     return GLOBALIZE || (GLOBALIZE_LANGUAGE && PrecompiledGlobalize(GLOBALIZE_LANGUAGE)) || PrecompiledGlobalize('en');
   }, [patchedLocalizedStrings]);
 
   const trackDimension = useCallback(
-    (name, data) => {
+    (name: string, data: any) => {
       if (!name || typeof name !== 'string') {
         return console.warn('botframework-webchat: Telemetry dimension name must be a string.');
       }
@@ -459,6 +486,17 @@ const Composer: FC<ComposerProps> = ({
     );
   }, [typingIndicatorMiddleware, typingIndicatorRenderer]);
 
+  const scrollToEndButtonRenderer: ScrollToEndButtonComponentFactory = useMemo(
+    () =>
+      applyMiddlewareForRenderer(
+        'scroll to end button',
+        { strict: true },
+        ...singleToArray(scrollToEndButtonMiddleware),
+        () => () => () => false
+      )() as any,
+    [scrollToEndButtonMiddleware]
+  );
+
   /**
    * This is a heavy function, and it is expected to be only called when there is a need to recreate business logic, e.g.
    * - User ID changed, causing all send* functions to be updated
@@ -491,6 +529,7 @@ const Composer: FC<ComposerProps> = ({
       localizedStrings: patchedLocalizedStrings,
       onTelemetry,
       renderMarkdown,
+      scrollToEndButtonRenderer,
       selectVoice: patchedSelectVoice,
       sendTypingIndicator,
       styleOptions: patchedStyleOptions,
@@ -525,6 +564,7 @@ const Composer: FC<ComposerProps> = ({
       patchedToastRenderer,
       patchedTypingIndicatorRenderer,
       renderMarkdown,
+      scrollToEndButtonRenderer,
       sendTypingIndicator,
       telemetryDimensionsRef,
       trackDimension,
@@ -541,59 +581,13 @@ const Composer: FC<ComposerProps> = ({
   );
 };
 
-// We will create a Redux store if it was not passed in
-const ComposeWithStore: FC<ComposerProps & { store: any }> = ({
-  internalRenderErrorBox,
-  onTelemetry,
-  store,
-  ...props
-}) => {
-  const [error, setError] = useState();
-
-  const handleError = useCallback(
-    error => {
-      console.error('botframework-webchat: Uncaught exception', { error });
-
-      onTelemetry && onTelemetry(createCustomEvent('exception', { error, fatal: true }));
-      setError(error);
-    },
-    [onTelemetry, setError]
-  );
-
-  const memoizedStore = useMemo(() => store || createStore(), [store]);
-
-  return error ? (
-    !!internalRenderErrorBox && internalRenderErrorBox({ error, type: 'uncaught exception' })
-  ) : (
-    <ErrorBoundary onError={handleError}>
-      <Provider context={WebChatReduxContext} store={memoizedStore}>
-        <Composer internalRenderErrorBox={internalRenderErrorBox} onTelemetry={onTelemetry} {...props} />
-      </Provider>
-    </ErrorBoundary>
-  );
-};
-
-ComposeWithStore.defaultProps = {
-  internalRenderErrorBox: undefined,
-  onTelemetry: undefined,
-  store: undefined
-};
-
-ComposeWithStore.propTypes = {
-  internalRenderErrorBox: PropTypes.any,
-  onTelemetry: PropTypes.func,
-  store: PropTypes.any
-};
-
-export default ComposeWithStore;
-
 /**
  * @todo TODO: [P3] We should consider moving some data from Redux store to props
  *       Although we use `connectToWebChat` to hide the details of accessor of Redux store,
  *       we should clean up the responsibility between Context and Redux store
  *       We should decide which data is needed for React but not in other environment such as CLI/VSCode
  */
-Composer.defaultProps = {
+ComposerCore.defaultProps = {
   activityMiddleware: undefined,
   activityRenderer: undefined,
   activityStatusMiddleware: undefined,
@@ -616,6 +610,7 @@ Composer.defaultProps = {
   onTelemetry: undefined,
   overrideLocalizedStrings: undefined,
   renderMarkdown: undefined,
+  scrollToEndButtonMiddleware: undefined,
   selectVoice: undefined,
   sendTimeout: undefined,
   sendTypingIndicator: false,
@@ -628,7 +623,7 @@ Composer.defaultProps = {
   username: ''
 };
 
-Composer.propTypes = {
+ComposerCore.propTypes = {
   activityMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   activityRenderer: PropTypes.func,
   activityStatusMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
@@ -664,6 +659,7 @@ Composer.propTypes = {
   onTelemetry: PropTypes.func,
   overrideLocalizedStrings: PropTypes.oneOfType([PropTypes.any, PropTypes.func]),
   renderMarkdown: PropTypes.func,
+  scrollToEndButtonMiddleware: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
   selectVoice: PropTypes.func,
   sendTimeout: PropTypes.number,
   sendTypingIndicator: PropTypes.bool,
@@ -675,3 +671,49 @@ Composer.propTypes = {
   userID: PropTypes.string,
   username: PropTypes.string
 };
+
+type ComposerProps = ComposerCoreProps & { store?: any };
+
+// We will create a Redux store if it was not passed in
+const Composer: FC<ComposerProps> = ({ internalRenderErrorBox, onTelemetry, store, ...props }) => {
+  const [error, setError] = useState();
+
+  const handleError = useCallback(
+    error => {
+      console.error('botframework-webchat: Uncaught exception', { error });
+
+      onTelemetry &&
+        onTelemetry(createCustomEvent('exception', { error, fatal: true }) as TelemetryExceptionMeasurementEvent);
+      setError(error);
+    },
+    [onTelemetry, setError]
+  );
+
+  const memoizedStore = useMemo(() => store || createStore(), [store]);
+
+  return error ? (
+    !!internalRenderErrorBox && internalRenderErrorBox({ error, type: 'uncaught exception' })
+  ) : (
+    <ErrorBoundary onError={handleError}>
+      <Provider context={WebChatReduxContext} store={memoizedStore}>
+        <ComposerCore internalRenderErrorBox={internalRenderErrorBox} onTelemetry={onTelemetry} {...props} />
+      </Provider>
+    </ErrorBoundary>
+  );
+};
+
+Composer.defaultProps = {
+  internalRenderErrorBox: undefined,
+  onTelemetry: undefined,
+  store: undefined
+};
+
+Composer.propTypes = {
+  internalRenderErrorBox: PropTypes.any,
+  onTelemetry: PropTypes.func,
+  store: PropTypes.any
+};
+
+export default Composer;
+
+export type { ComposerProps };

package/src/hooks/{index.js → index.ts}

@@ -8,6 +8,7 @@ import useCreateActivityRenderer from './useCreateActivityRenderer';
 import useCreateActivityStatusRenderer from './useCreateActivityStatusRenderer';
 import useCreateAttachmentForScreenReaderRenderer from './useCreateAttachmentForScreenReaderRenderer';
 import useCreateAvatarRenderer from './useCreateAvatarRenderer';
+import useCreateScrollToEndButtonRenderer from './useCreateScrollToEndButtonRenderer';
 import useDateFormatter from './useDateFormatter';
 import useDebouncedNotifications from './useDebouncedNotifications';
 import useDictateInterims from './useDictateInterims';
@@ -71,6 +72,7 @@ export {
   useCreateActivityStatusRenderer,
   useCreateAttachmentForScreenReaderRenderer,
   useCreateAvatarRenderer,
+  useCreateScrollToEndButtonRenderer,
   useDateFormatter,
   useDebouncedNotifications,
   useDictateInterims,

package/src/hooks/internal/WebChatAPIContext.ts

@@ -1,8 +1,73 @@
 import { createContext } from 'react';
+import { DirectLineActivity, DirectLineJSBotConnection } from 'botframework-webchat-core';
 
-const context = createContext<any>({
-  sendFocusRef: null
-});
+import { AttachmentForScreenReaderComponentFactory } from '../../types/AttachmentForScreenReaderMiddleware';
+import { AvatarComponentFactory } from '../../types/AvatarMiddleware';
+import { GroupActivities } from '../../types/GroupActivitiesMiddleware';
+import { LegacyActivityRenderer } from '../../types/ActivityMiddleware';
+import { Observable } from 'redux';
+import { PerformCardAction } from '../../types/CardActionMiddleware';
+import { RenderActivityStatus } from '../../types/ActivityStatusMiddleware';
+import { RenderAttachment } from '../../types/AttachmentMiddleware';
+import { RenderToast } from '../../types/ToastMiddleware';
+import { ScrollToEndButtonComponentFactory } from '../../types/ScrollToEndButtonMiddleware';
+import { StrictStyleOptions } from '../../StyleOptions';
+import LocalizedStrings from '../../types/LocalizedStrings';
+import PrecompiledGlobalize from '../../types/PrecompiledGlobalize';
+import TelemetryMeasurementEvent from '../../types/TelemetryMeasurementEvent';
+
+type WebChatAPIContext = {
+  activityRenderer?: LegacyActivityRenderer;
+  activityStatusRenderer?: RenderActivityStatus;
+  attachmentForScreenReaderRenderer?: AttachmentForScreenReaderComponentFactory;
+  attachmentRenderer?: RenderAttachment;
+  avatarRenderer?: AvatarComponentFactory;
+  clearSuggestedActions?: () => void;
+  dir?: string;
+  directLine?: DirectLineJSBotConnection;
+  disabled?: boolean;
+  dismissNotification?: (id: string) => void;
+  downscaleImageToDataURL?: (blob: Blob, maxWidth: number, maxHeight: number, type: string, quality: number) => string;
+  emitTypingIndicator?: () => void;
+  grammars?: any;
+  groupActivities?: GroupActivities;
+  internalErrorBoxClass?: React.Component | Function;
+  language?: string;
+  localizedGlobalizeState?: PrecompiledGlobalize[];
+  localizedStrings?: { [language: string]: LocalizedStrings };
+  markActivity?: ({ id: string }, name: string, value?: any) => void;
+  onCardAction?: PerformCardAction;
+  onTelemetry?: (event: TelemetryMeasurementEvent) => void;
+  postActivity?: (activity: DirectLineActivity) => Observable<string>;
+  renderMarkdown?: (markdown: string, { markdownRespectCRLF: boolean }, { externalLinkAlt: string }) => string;
+  scrollToEndButtonRenderer?: ScrollToEndButtonComponentFactory;
+  selectVoice?: (voices: typeof window.SpeechSynthesisVoice[], activity: DirectLineActivity) => void;
+  sendEvent?: (name: string, value: any) => void;
+  sendFiles?: (files: File[]) => void;
+  sendMessage?: (text: string, method?: string, { channelData }?: { channelData?: any }) => void;
+  sendMessageBack?: (value: any, text?: string, displayText?: string) => void;
+  sendPostBack?: (value?: any) => void;
+  sendTypingIndicator?: boolean;
+  setDictateInterims?: (interims: string[]) => void;
+  setDictateState?: (dictateState: number) => void;
+  setNotification?: (notification: Notification) => void;
+  setSendBox?: (value: string) => void;
+  setSendTimeout?: (timeout: number) => void;
+  startDictate?: () => void;
+  startSpeakingActivity?: () => void;
+  stopDictate?: () => void;
+  stopSpeakingActivity?: () => void;
+  styleOptions?: StrictStyleOptions;
+  submitSendBox?: (method?: string, { channelData }?: { channelData: any }) => void;
+  telemetryDimensionsRef?: React.Ref<any>;
+  toastRenderer?: RenderToast;
+  trackDimension?: (name: string, data: any) => void;
+  typingIndicatorRenderer?: any; // TODO
+  userID?: string;
+  username?: string;
+};
+
+const context = createContext<WebChatAPIContext>(undefined);
 
 context.displayName = 'WebChatAPIContext';
 

package/src/hooks/internal/{useCreateActivityRendererInternal.js → useCreateActivityRendererInternal.ts}

@@ -1,13 +1,17 @@
 import { isValidElement, useMemo } from 'react';
 
+import { ActivityComponentFactory } from '../../types/ActivityMiddleware';
+import { RenderAttachment } from '../../types/AttachmentMiddleware';
 import useRenderAttachment from '../useRenderAttachment';
 import useWebChatAPIContext from './useWebChatAPIContext';
 
-export default function useCreateActivityRendererInternal(renderAttachmentOverride) {
+export default function useCreateActivityRendererInternal(
+  renderAttachmentOverride?: RenderAttachment
+): ActivityComponentFactory {
   const { activityRenderer: createActivityRenderer } = useWebChatAPIContext();
   const defaultRenderAttachment = useRenderAttachment();
 
-  const renderAttachment = renderAttachmentOverride || defaultRenderAttachment;
+  const renderAttachment: RenderAttachment = renderAttachmentOverride || defaultRenderAttachment;
 
   return useMemo(
     () => (...createActivityRendererOptions) => {

package/src/hooks/middleware/applyMiddleware.js

@@ -1,7 +1,6 @@
 import React, { isValidElement } from 'react';
-
-import concatMiddleware from './concatMiddleware';
 import ErrorBox from '../internal/ErrorBox';
+import concatMiddleware from './concatMiddleware';
 import UserlandBoundary from './UserlandBoundary';
 
 export default function applyMiddleware(type, ...middleware) {
@@ -35,7 +34,7 @@ export function forLegacyRenderer(type, ...middleware) {
  *
  * @param {string} type Required. String equivalent of type of container to be rendered.
  * @param { strict = false } - Used to enforce new middleware format which cooperates with new activity grouping.
- * @see See {@link https://github.com/microsoft/BotFramework-WebChat/blob/master/CHANGELOG.md#4100---2020-08-18} and {@link https://github.com/microsoft/BotFramework-WebChat/pull/3365} for middleware breaking changes.
+ * @see See {@link https://github.com/microsoft/BotFramework-WebChat/blob/main/CHANGELOG.md#4100---2020-08-18} and {@link https://github.com/microsoft/BotFramework-WebChat/pull/3365} for middleware breaking changes.
  * @param  {middleware[]} middleware list of middleware to be applied.
  * 'createRendererArgs' is "what to render"; for example, an activity.
  * @returns  Returns a function if there is a renderer *committed* to render OR returns false if nothing should be rendered.

package/src/hooks/middleware/concatMiddleware.spec.js

@@ -1,3 +1,5 @@
+/* eslint no-magic-numbers: "off" */
+
 import concatMiddleware from './concatMiddleware';
 
 describe('two middleware concatenated and ran', () => {
@@ -26,9 +28,7 @@ describe('two middleware concatenated and ran', () => {
   });
 
   test('by a single upstream middleware', () => {
-    const combine = () => next => value => {
-      return next(value) + next(value + 1);
-    };
+    const combine = () => next => value => next(value) + next(value + 1);
 
     const middleware = concatMiddleware(combine, oddMultiplyByTen, evenMultiplyByHundred);
     const work = middleware()(value => value);
@@ -38,9 +38,7 @@ describe('two middleware concatenated and ran', () => {
 });
 
 test('one middleware ran twice by a single upstream middleware', () => {
-  const combine = () => next => value => {
-    return next(value) + next(value + 1);
-  };
+  const combine = () => next => value => next(value) + next(value + 1);
 
   const oddMultiplyByTenAndEvenMultiplyByHundred = () => () => value => {
     if (value % 2) {

package/src/hooks/middleware/{concatMiddleware.js → concatMiddleware.ts}

@@ -1,4 +1,10 @@
-export default function concatMiddleware(...middleware) {
+type Work<T> = (...args: any[]) => T;
+type Enhancer<T> = (next: Work<T>) => Work<T>;
+type Middleware<Setup, Result> = (setup: Setup) => Enhancer<Result>;
+
+export default function concatMiddleware<Setup, Result>(
+  ...middleware: Middleware<Setup, Result>[]
+): Middleware<Setup, Result> {
   return setupArgs => {
     const setup = middleware.reduce(
       (setup, middleware) => (middleware ? [...setup, middleware(setupArgs)] : setup),

package/src/hooks/middleware/{createDefaultCardActionMiddleware.js → createDefaultCardActionMiddleware.ts}

@@ -1,14 +1,18 @@
 import { sendMessage, sendMessageBack, sendPostBack } from 'botframework-webchat-core';
 
-export default function createDefaultCardActionMiddleware() {
+import CardActionMiddleware from '../../types/CardActionMiddleware';
+
+export default function createDefaultCardActionMiddleware(): CardActionMiddleware {
   return ({ dispatch }) => next => (...args) => {
     const [
       {
-        cardAction: { displayText, text, type, value }
+        cardAction,
+        cardAction: { value }
       }
     ] = args;
 
-    switch (type) {
+    // We cannot use destructured "type" here because TypeScript don't recognize "messageBack" is "MessageBackCardAction".
+    switch (cardAction.type) {
       case 'imBack':
         if (typeof value === 'string') {
           // TODO: [P4] Instead of calling dispatch, we should move to dispatchers instead for completeness
@@ -20,7 +24,7 @@ export default function createDefaultCardActionMiddleware() {
         break;
 
       case 'messageBack':
-        dispatch(sendMessageBack(value, text, displayText));
+        dispatch(sendMessageBack(value, cardAction.text, cardAction.displayText));
 
         break;
 

package/src/hooks/middleware/{createDefaultGroupActivitiesMiddleware.js → createDefaultGroupActivitiesMiddleware.ts}

@@ -1,13 +1,15 @@
-import { Constants } from 'botframework-webchat-core';
+import { Constants, DirectLineActivity } from 'botframework-webchat-core';
+
+import GroupActivitiesMiddleware from '../../types/GroupActivitiesMiddleware';
 
 const {
   ActivityClientState: { SENT }
 } = Constants;
 
-function bin(items, grouping) {
-  let lastBin;
-  const bins = [];
-  let lastItem;
+function bin<T>(items: T[], grouping: (last: T, current: T) => boolean): T[][] {
+  let lastBin: T[];
+  const bins: T[][] = [];
+  let lastItem: T;
 
   items.forEach(item => {
     if (lastItem && grouping(lastItem, item)) {
@@ -23,11 +25,15 @@ function bin(items, grouping) {
   return bins;
 }
 
-function sending(activity) {
+function sending(activity: DirectLineActivity): boolean {
   return activity.from.role === 'user' && activity.channelData && activity.channelData.state !== SENT;
 }
 
-function shouldGroupTimestamp(activityX, activityY, groupTimestamp) {
+function shouldGroupTimestamp(
+  activityX: DirectLineActivity,
+  activityY: DirectLineActivity,
+  groupTimestamp: boolean | number
+): boolean {
   if (groupTimestamp === false) {
     // Hide timestamp for all activities.
     return true;
@@ -47,9 +53,11 @@ function shouldGroupTimestamp(activityX, activityY, groupTimestamp) {
   return false;
 }
 
-export default function createDefaultGroupActivityMiddleware({ groupTimestamp }) {
-  return () => () => ({ activities }) => ({
-    sender: bin(activities, (x, y) => x.from.role === y.from.role),
-    status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp))
-  });
+export default function createDefaultGroupActivityMiddleware({ groupTimestamp }): GroupActivitiesMiddleware {
+  return () =>
+    () =>
+    ({ activities }) => ({
+      sender: bin(activities, (x, y) => x.from.role === y.from.role),
+      status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp))
+    });
 }