botframework-webchat-api 4.14.1 → 4.15.0

package/src/localization/zh-CN.json

@@ -6,7 +6,8 @@
   "ACTIVITY_YOU_SAID_ALT": "您说:",
   "ACTIVITY_BOT_ATTACHED_ALT": "机器人附加了:",
   "ACTIVITY_ERROR_BOX_TITLE": "错误消息",
-  "ACTIVITY_INTERACTIVE_LABEL_ALT": "按 Enter 键以进行交互。",
+  "ACTIVITY_INTERACTIVE_LABEL_ALT": "消息是交互式消息。单击可以进行交互。",
+  "ACTIVITY_INTERACTIVE_WITH_LINKS_LABEL_ALT": "消息中有一个或多个链接。单击可以进行交互。",
   "ACTIVITY_YOU_ATTACHED_ALT": "您附加了:",
   "ACTIVITY_NUM_ATTACHMENTS_ONE_ALT": "1 个附件。",
   "ACTIVITY_NUM_ATTACHMENTS_FEW_ALT": "$1 个附件。",
@@ -43,6 +44,22 @@
   "FILE_CONTENT_DOWNLOADABLE_ALT": "下载文件 '$1'",
   "FILE_CONTENT_DOWNLOADABLE_WITH_SIZE_ALT": "下载文件 '$1'，大小为 $2",
   "FILE_CONTENT_WITH_SIZE_ALT": "'$1' 的大小为 $2",
+  "KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_BODY": "Enter 键",
+  "KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_HEADER": "访问消息中的项目",
+  "KEYBOARD_HELP_CHAT_HISTORY_HEADER": "聊天历史记录",
+  "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_BODY": "Escape 键",
+  "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_HEADER": "留言",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_BODY": "Tab 键\nShift + Tab 键",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_HEADER": "在消息中的项目之间移动",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_BODY": "向上键\n向下键",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_HEADER": "在消息之间移动",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_DO_ACTION_BODY": "Enter 键",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_DO_ACTION_HEADER": "执行操作",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_MOVE_BETWEEN_ITEMS_BODY": "Tab 键\nShift + Tab 键",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_MOVE_BETWEEN_ITEMS_HEADER": "在聊天窗口中的项目之间移动",
+  "KEYBOARD_HELP_CHAT_WINDOW_HEADER": "聊天窗口",
+  "KEYBOARD_HELP_CLOSE_BUTTON_ALT": "关闭",
+  "KEYBOARD_HELP_HEADER": "键盘控件",
   "MARKDOWN_EXTERNAL_LINK_ALT": "在新窗口中打开；外部。",
   "RECEIPT_CARD_TAX": "税款",
   "RECEIPT_CARD_TOTAL": "总额",
@@ -70,10 +87,12 @@
   "TOAST_ALT_WARN": "警告",
   "TOAST_DISMISS_BUTTON": "取消",
   "TOAST_TITLE_ALT": "通知",
-  "TRANSCRIPT_ARIA_LABEL_ALT": "记录，按箭头键导航。",
-  "TRANSCRIPT_ARIA_ROLE_ALT": "脚本",
+  "TRANSCRIPT_ARIA_LABEL_ALT": "聊天历史记录，按箭头键导航。",
+  "TRANSCRIPT_ARIA_ROLE_ALT": "聊天历史记录",
+  "TRANSCRIPT_LIVE_REGION_INTERACTIVE_LABEL_ALT": "消息是交互式消息。按 Shift Tab 键 2 到 3 次切换到聊天历史记录。然后单击消息以进行交互。",
+  "TRANSCRIPT_LIVE_REGION_INTERACTIVE_WITH_LINKS_LABEL_ALT": "消息中有一个或多个链接。按 Shift Tab 键 2 到 3 次切换到聊天历史记录。然后单击消息以进行交互。",
   "TRANSCRIPT_MORE_MESSAGES": "更多消息",
   "TRANSCRIPT_NEW_MESSAGES": "新消息",
-  "TRANSCRIPT_TERMINATOR_TEXT": "记录结束",
+  "TRANSCRIPT_TERMINATOR_TEXT": "聊天历史记录结束",
   "TYPING_INDICATOR_ALT": "显示键入指示器"
 }

package/src/localization/zh-HK.json

@@ -6,7 +6,8 @@
   "ACTIVITY_YOU_SAID_ALT": "您說:",
   "ACTIVITY_BOT_ATTACHED_ALT": "機器人附加了:",
   "ACTIVITY_ERROR_BOX_TITLE": "錯誤訊息",
-  "ACTIVITY_INTERACTIVE_LABEL_ALT": "按 ENTER 鍵進行互動。",
+  "ACTIVITY_INTERACTIVE_LABEL_ALT": "訊息為互動式。按一下即可互動。",
+  "ACTIVITY_INTERACTIVE_WITH_LINKS_LABEL_ALT": "訊息中的一或多個連結。按一下即可互動。",
   "ACTIVITY_YOU_ATTACHED_ALT": "您附加了:",
   "ACTIVITY_NUM_ATTACHMENTS_ONE_ALT": "1 個附件。",
   "ACTIVITY_NUM_ATTACHMENTS_FEW_ALT": "$1 個附件。",
@@ -43,6 +44,22 @@
   "FILE_CONTENT_DOWNLOADABLE_ALT": "下載 '$1' 檔案",
   "FILE_CONTENT_DOWNLOADABLE_WITH_SIZE_ALT": "下載 '$1' 檔案，大小為 $2",
   "FILE_CONTENT_WITH_SIZE_ALT": "'$1'，大小為 $2",
+  "KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_BODY": "ENTER 鍵",
+  "KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_HEADER": "存取訊息中的項目",
+  "KEYBOARD_HELP_CHAT_HISTORY_HEADER": "聊天記錄",
+  "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_BODY": "ESC 鍵",
+  "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_HEADER": "離開訊息",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_BODY": "Tab 鍵\nShift + Tab 鍵",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_HEADER": "在訊息中的項目之間移動",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_BODY": "向上鍵\n向下鍵",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_HEADER": "在訊息之間移動",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_DO_ACTION_BODY": "ENTER 鍵",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_DO_ACTION_HEADER": "執行動作",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_MOVE_BETWEEN_ITEMS_BODY": "Tab 鍵\nShift + Tab 鍵",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_MOVE_BETWEEN_ITEMS_HEADER": "在聊天視窗中的項目之間移動",
+  "KEYBOARD_HELP_CHAT_WINDOW_HEADER": "聊天視窗",
+  "KEYBOARD_HELP_CLOSE_BUTTON_ALT": "關閉",
+  "KEYBOARD_HELP_HEADER": "鍵盤控制項",
   "MARKDOWN_EXTERNAL_LINK_ALT": "在新視窗中開啟; 外部。",
   "RECEIPT_CARD_TAX": "稅金",
   "RECEIPT_CARD_TOTAL": "總計",
@@ -70,10 +87,12 @@
   "TOAST_ALT_WARN": "警告",
   "TOAST_DISMISS_BUTTON": "關閉",
   "TOAST_TITLE_ALT": "通知",
-  "TRANSCRIPT_ARIA_LABEL_ALT": "文字記錄，按方向鍵進行瀏覽。",
-  "TRANSCRIPT_ARIA_ROLE_ALT": "文字記錄",
+  "TRANSCRIPT_ARIA_LABEL_ALT": "聊天記錄，按方向鍵進行瀏覽。",
+  "TRANSCRIPT_ARIA_ROLE_ALT": "聊天記錄",
+  "TRANSCRIPT_LIVE_REGION_INTERACTIVE_LABEL_ALT": "訊息為互動式。請按 Shift Tab 鍵 2 到 3 次切換至聊天記錄，然後按一下訊息進行互動。",
+  "TRANSCRIPT_LIVE_REGION_INTERACTIVE_WITH_LINKS_LABEL_ALT": "訊息中的一或多個連結。請按 Shift Tab 鍵 2 到 3 次切換至聊天記錄，然後按一下訊息進行互動。",
   "TRANSCRIPT_MORE_MESSAGES": "更多訊息",
   "TRANSCRIPT_NEW_MESSAGES": "新訊息",
-  "TRANSCRIPT_TERMINATOR_TEXT": "文字記錄結束",
+  "TRANSCRIPT_TERMINATOR_TEXT": "聊天記錄結尾",
   "TYPING_INDICATOR_ALT": "顯示輸入指示器"
 }

package/src/localization/zh-TW.json

@@ -6,7 +6,8 @@
   "ACTIVITY_YOU_SAID_ALT": "您說:",
   "ACTIVITY_BOT_ATTACHED_ALT": "機器人附加了:",
   "ACTIVITY_ERROR_BOX_TITLE": "錯誤訊息",
-  "ACTIVITY_INTERACTIVE_LABEL_ALT": "按 ENTER 鍵進行互動。",
+  "ACTIVITY_INTERACTIVE_LABEL_ALT": "訊息為互動式。按一下即可互動。",
+  "ACTIVITY_INTERACTIVE_WITH_LINKS_LABEL_ALT": "訊息中的一或多個連結。按一下即可互動。",
   "ACTIVITY_YOU_ATTACHED_ALT": "您附加了:",
   "ACTIVITY_NUM_ATTACHMENTS_ONE_ALT": "1 個附件。",
   "ACTIVITY_NUM_ATTACHMENTS_FEW_ALT": "$1 個附件。",
@@ -43,6 +44,22 @@
   "FILE_CONTENT_DOWNLOADABLE_ALT": "下載 '$1' 檔案",
   "FILE_CONTENT_DOWNLOADABLE_WITH_SIZE_ALT": "下載 '$1' 檔案，大小為 $2",
   "FILE_CONTENT_WITH_SIZE_ALT": "'$1'，大小為 $2",
+  "KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_BODY": "ENTER 鍵",
+  "KEYBOARD_HELP_CHAT_HISTORY_ACCESS_ITEMS_IN_MESSAGE_HEADER": "存取訊息中的項目",
+  "KEYBOARD_HELP_CHAT_HISTORY_HEADER": "聊天記錄",
+  "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_BODY": "ESC 鍵",
+  "KEYBOARD_HELP_CHAT_HISTORY_LEAVE_MESSAGE_HEADER": "離開訊息",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_BODY": "Tab 鍵\nShift + Tab 鍵",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_ITEMS_HEADER": "在訊息中的項目之間移動",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_BODY": "向上鍵\n向下鍵",
+  "KEYBOARD_HELP_CHAT_HISTORY_MOVE_BETWEEN_MESSAGES_HEADER": "在訊息之間移動",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_DO_ACTION_BODY": "ENTER 鍵",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_DO_ACTION_HEADER": "執行動作",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_MOVE_BETWEEN_ITEMS_BODY": "Tab 鍵\nShift + Tab 鍵",
+  "KEYBOARD_HELP_CHAT_WINDOW_BODY_MOVE_BETWEEN_ITEMS_HEADER": "在聊天視窗中的項目之間移動",
+  "KEYBOARD_HELP_CHAT_WINDOW_HEADER": "聊天視窗",
+  "KEYBOARD_HELP_CLOSE_BUTTON_ALT": "關閉",
+  "KEYBOARD_HELP_HEADER": "鍵盤控制項",
   "MARKDOWN_EXTERNAL_LINK_ALT": "在新視窗中開啟; 外部。",
   "RECEIPT_CARD_TAX": "稅金",
   "RECEIPT_CARD_TOTAL": "總計",
@@ -70,10 +87,12 @@
   "TOAST_ALT_WARN": "警告",
   "TOAST_DISMISS_BUTTON": "關閉",
   "TOAST_TITLE_ALT": "通知",
-  "TRANSCRIPT_ARIA_LABEL_ALT": "文字記錄，按方向鍵進行瀏覽。",
-  "TRANSCRIPT_ARIA_ROLE_ALT": "文字記錄",
+  "TRANSCRIPT_ARIA_LABEL_ALT": "聊天記錄，按方向鍵進行瀏覽。",
+  "TRANSCRIPT_ARIA_ROLE_ALT": "聊天記錄",
+  "TRANSCRIPT_LIVE_REGION_INTERACTIVE_LABEL_ALT": "訊息為互動式。請按 Shift Tab 鍵 2 到 3 次切換至聊天記錄，然後按一下訊息進行互動。",
+  "TRANSCRIPT_LIVE_REGION_INTERACTIVE_WITH_LINKS_LABEL_ALT": "訊息中的一或多個連結。請按 Shift Tab 鍵 2 到 3 次切換至聊天記錄，然後按一下訊息進行互動。",
   "TRANSCRIPT_MORE_MESSAGES": "更多訊息",
   "TRANSCRIPT_NEW_MESSAGES": "新訊息",
-  "TRANSCRIPT_TERMINATOR_TEXT": "文字記錄結束",
+  "TRANSCRIPT_TERMINATOR_TEXT": "聊天記錄結尾",
   "TYPING_INDICATOR_ALT": "顯示輸入指示器"
 }

package/src/normalizeStyleOptions.ts

@@ -11,6 +11,18 @@ const newMessagesButtonFontSizeDeprecation = warnOnce(
   '"styleOptions.newMessagesButtonFontSize" has been renamed to "styleOptions.scrollToEndButtonFontSize". This deprecation migration will be removed on or after 2023-06-02.'
 );
 
+const suggestedActionBackgroundDeprecation = warnOnce(
+  '"styleOptions.suggestedActionBackground" has been deprecated. Please use "styleOptions.suggestedActionBackgroundColor" instead. This deprecation migration will be removed on or after 2021-09-16.'
+);
+
+const suggestedActionXXXBackgroundDeprecation = warnOnce(
+  '"styleOptions.suggestedActionXXXBackground" has been deprecated. Please use "styleOptions.suggestedActionBackgroundColorOnXXX" instead. This deprecation migration will be removed on or after 2021-09-16.'
+);
+
+const suggestedActionDisabledDeprecation = warnOnce(
+  '"styleOptions.suggestedActionDisabledXXX" has been renamed to "styleOptions.suggestedActionXXXOnDisabled". This deprecation migration will be removed on or after 2021-09-16.'
+);
+
 // TODO: [P4] We should add a notice for people who want to use "styleSet" instead of "styleOptions".
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
 //       DOM tree may change from time to time, thus, maintaining "styleSet" becomes a constant effort.
@@ -107,6 +119,64 @@ export default function normalizeStyleOptions({
     filledOptions.scrollToEndButtonFontSize = options.scrollToEndButtonFontSize || newMessagesButtonFontSize;
   }
 
+  options.suggestedActionBackground && suggestedActionBackgroundDeprecation();
+
+  if (options.suggestedActionActiveBackground) {
+    suggestedActionXXXBackgroundDeprecation();
+
+    filledOptions.suggestedActionBackgroundColorOnActive =
+      options.suggestedActionBackgroundColorOnActive || options.suggestedActionActiveBackground;
+  }
+
+  if (options.suggestedActionFocusBackground) {
+    suggestedActionXXXBackgroundDeprecation();
+
+    filledOptions.suggestedActionBackgroundColorOnFocus =
+      options.suggestedActionBackgroundColorOnFocus || options.suggestedActionFocusBackground;
+  }
+
+  if (options.suggestedActionHoverBackground) {
+    suggestedActionXXXBackgroundDeprecation();
+
+    filledOptions.suggestedActionBackgroundColorOnHover =
+      options.suggestedActionBackgroundColorOnHover || options.suggestedActionHoverBackground;
+  }
+
+  if (options.suggestedActionDisabledBackground) {
+    suggestedActionXXXBackgroundDeprecation();
+
+    filledOptions.suggestedActionBackgroundColorOnDisabled =
+      options.suggestedActionBackgroundColorOnDisabled || options.suggestedActionDisabledBackground;
+  }
+
+  if (options.suggestedActionDisabledBorderColor) {
+    suggestedActionDisabledDeprecation();
+
+    filledOptions.suggestedActionBorderColorOnDisabled =
+      options.suggestedActionBorderColorOnDisabled || options.suggestedActionDisabledBorderColor;
+  }
+
+  if (options.suggestedActionDisabledBorderStyle) {
+    suggestedActionDisabledDeprecation();
+
+    filledOptions.suggestedActionBorderStyleOnDisabled =
+      options.suggestedActionBorderStyleOnDisabled || options.suggestedActionDisabledBorderStyle;
+  }
+
+  if (options.suggestedActionDisabledBorderWidth) {
+    suggestedActionDisabledDeprecation();
+
+    filledOptions.suggestedActionBorderWidthOnDisabled =
+      options.suggestedActionBorderWidthOnDisabled || options.suggestedActionDisabledBorderWidth;
+  }
+
+  if (options.suggestedActionDisabledTextColor) {
+    suggestedActionDisabledDeprecation();
+
+    filledOptions.suggestedActionTextColorOnDisabled =
+      options.suggestedActionTextColorOnDisabled || options.suggestedActionDisabledTextColor;
+  }
+
   return {
     ...filledOptions,
     bubbleFromUserNubOffset: normalizedBubbleFromUserNubOffset,

package/src/patchStyleOptionsFromDeprecatedProps.js

@@ -3,8 +3,6 @@ import updateIn from 'simple-update-in';
 // TODO: [P4] We should add a notice for people who want to use "styleSet" instead of "styleOptions".
 //       "styleSet" is actually CSS stylesheet and it is based on the DOM tree.
 //       DOM tree may change from time to time, thus, maintaining "styleSet" becomes a constant effort.
-
-// eslint-disable-next-line complexity
 export default function patchStyleOptionsFromDeprecatedProps(
   styleOptions,
   { groupTimestamp: groupTimestampFromProps, sendTimeout: sendTimeoutFromProps }

package/src/providers/ActivityAcknowledgement/ActivityAcknowledgementComposer.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useMemo, useState } from 'react';
+
+import type { FC, PropsWithChildren } from 'react';
+
+import ActivityAcknowledgementContext, { ActivityAcknowledgementContextType } from './private/Context';
+import findLastIndex from '../../utils/findLastIndex';
+import useActivities from '../../hooks/useActivities';
+import useActivityKeys from '../ActivityKeyer/useActivityKeys';
+import usePrevious from '../../hooks/internal/usePrevious';
+import useValueRef from '../../hooks/internal/useValueRef';
+
+import type { ActivityAcknowledgement } from './private/types';
+
+type ActivityAcknowledgementComposerProps = PropsWithChildren<{}>;
+
+function findClosestActivityKeyIfNotExists(
+  activityKey: string,
+  keys: readonly string[],
+  prevKeys: readonly string[]
+): string | undefined {
+  if (keys.includes(activityKey)) {
+    return activityKey;
+  } else if (!prevKeys || !activityKey) {
+    // Initially, when the transcript was empty, there should be nothing read.
+    return;
+  }
+
+  // If the last activity key is no longer in this activities (say, deleted), we try to find the closest one.
+  const prevIndex = prevKeys.indexOf(activityKey);
+
+  if (~prevIndex) {
+    // List out all previously activity keys, find the closest one that is in the new transcript.
+    const acknowledgedActivityKeys = prevKeys.slice(0, prevIndex).reverse();
+
+    for (const prevAcknowledgedActivityKey of acknowledgedActivityKeys) {
+      if (keys.includes(prevAcknowledgedActivityKey)) {
+        return prevAcknowledgedActivityKey;
+      }
+    }
+  }
+
+  // If nothing is found, return `undefined`.
+}
+
+const ActivityAcknowledgementComposer: FC<ActivityAcknowledgementComposerProps> = ({ children }) => {
+  const [activities] = useActivities();
+  const [allActivityKeys] = useActivityKeys();
+  const [rawLastAcknowledgedActivityKey, setRawLastAcknowledgedActivityKey] = useState<string | undefined>();
+  const [rawLastReadActivityKey, setRawLastReadActivityKey] = useState<string | undefined>();
+
+  const allActivityKeysRef = useValueRef(allActivityKeys);
+  const prevAllActivityKeys = usePrevious(allActivityKeys);
+
+  const lastOutgoingActivityKeyIndex = useMemo(
+    () => findLastIndex(activities, activity => activity.from?.role === 'user'),
+    [activities]
+  );
+
+  // Make sure when we return "lastReadActivityKey" exists in the current transcript.
+  const lastReadActivityKey = useMemo(() => {
+    rawLastReadActivityKey &&
+      !~prevAllActivityKeys.includes(rawLastReadActivityKey) &&
+      console.warn(
+        `botframework-webchat internal assertion: "rawLastReadActivityKey" of value ${rawLastReadActivityKey} should be in the "prevAllActivityKeys" array.`
+      );
+
+    return findClosestActivityKeyIfNotExists(rawLastReadActivityKey, allActivityKeys, prevAllActivityKeys);
+  }, [allActivityKeys, prevAllActivityKeys, rawLastReadActivityKey]);
+
+  const lastReadActivityKeyRef = useValueRef(lastReadActivityKey);
+
+  // Make sure when we return "lastAcknowledgedActivityKey" exists in the current transcript.
+  const lastAcknowledgedActivityKey = useMemo(() => {
+    rawLastAcknowledgedActivityKey &&
+      !~prevAllActivityKeys.includes(rawLastAcknowledgedActivityKey) &&
+      console.warn(
+        `botframework-webchat internal assertion: "rawLastAcknowledgedActivityKey" of value ${rawLastAcknowledgedActivityKey} should be in the "prevAllActivityKeys" array.`
+      );
+
+    const lastAcknowledgedActivityKey = findClosestActivityKeyIfNotExists(
+      rawLastAcknowledgedActivityKey,
+      allActivityKeys,
+      prevAllActivityKeys
+    );
+
+    // TODO: [P2] Since Direct Line may send history and does not have read receipt.
+    //            Thus, if we don't assume everything is acknowledged initially, while displaying the history,
+    //            the transcript would soon stop scrolling.
+    //            Thus, before the first outgoing activity is detected, we need to assume everything is acknowledged.
+    return (
+      allActivityKeys[Math.max(allActivityKeys.indexOf(lastAcknowledgedActivityKey), lastOutgoingActivityKeyIndex)] ||
+      allActivityKeys[allActivityKeys.length - 1]
+    );
+  }, [allActivityKeys, lastOutgoingActivityKeyIndex, prevAllActivityKeys, rawLastAcknowledgedActivityKey]);
+
+  const activityAcknowledgements = useMemo<Readonly<Map<string, ActivityAcknowledgement>>>(() => {
+    const activityAcknowledgements = new Map<string, ActivityAcknowledgement>();
+    const lastAcknowledgedIndex = allActivityKeys.indexOf(lastAcknowledgedActivityKey);
+    const lastReadIndex = allActivityKeys.indexOf(lastReadActivityKey);
+
+    allActivityKeys.forEach((activityKey, index) => {
+      activityAcknowledgements.set(activityKey, {
+        acknowledged: index <= lastAcknowledgedIndex,
+        read: index <= lastReadIndex
+      });
+    });
+
+    return Object.freeze(activityAcknowledgements);
+  }, [allActivityKeys, lastAcknowledgedActivityKey, lastReadActivityKey]);
+
+  const activityAcknowledgementsRef = useValueRef(activityAcknowledgements);
+
+  const getHasAcknowledgedByActivityKey = useCallback<(activityKey: string) => boolean>(
+    (activityKey: string) => activityAcknowledgementsRef.current.get(activityKey)?.acknowledged,
+    [activityAcknowledgementsRef]
+  );
+
+  // TODO: [P2] Memoize with `useMemoWithPrevious` for better memoization of arrays.
+  const activityKeysByReadState = useMemo<readonly [readonly string[], readonly string[]]>(() => {
+    const index = allActivityKeys.indexOf(lastReadActivityKey);
+
+    return Object.freeze([
+      Object.freeze(allActivityKeys.slice(0, index + 1)),
+      Object.freeze(allActivityKeys.slice(index + 1))
+    ]) as readonly [readonly string[], readonly string[]];
+  }, [allActivityKeys, lastReadActivityKey]);
+
+  const markAllAsAcknowledged = useCallback((): void => {
+    const { current: allActivityKeys } = allActivityKeysRef;
+
+    setRawLastAcknowledgedActivityKey(allActivityKeys[allActivityKeys.length - 1]);
+  }, [allActivityKeysRef, setRawLastAcknowledgedActivityKey]);
+
+  const markActivityKeyAsRead = useCallback(
+    (activityKey: string): void => {
+      const { current: allActivityKeys } = allActivityKeysRef;
+      const index = allActivityKeys.indexOf(activityKey);
+
+      if (!~index) {
+        return console.warn(
+          `botframework-webchat: Cannot mark activity with key ${activityKey} as read because it is not in the transcript.`
+        );
+      }
+
+      index > allActivityKeys.indexOf(lastReadActivityKeyRef.current) && setRawLastReadActivityKey(activityKey);
+    },
+    [allActivityKeysRef, lastReadActivityKeyRef, setRawLastReadActivityKey]
+  );
+
+  if (activityKeysByReadState[0].length + activityKeysByReadState[1].length !== allActivityKeys.length) {
+    console.warn(
+      'botframework-webchat internal: Sum of count of read and unread activity keys MUST equals to total number of activity keys.'
+    );
+  }
+
+  const contextValue = useMemo<ActivityAcknowledgementContextType>(
+    () => ({
+      activityKeysByReadState,
+      getHasAcknowledgedByActivityKey,
+      lastAcknowledgedActivityKeyState: Object.freeze([lastAcknowledgedActivityKey]) as readonly [string],
+      lastReadActivityKeyState: Object.freeze([lastReadActivityKey]) as readonly [string],
+      markActivityKeyAsRead,
+      markAllAsAcknowledged
+    }),
+    [
+      activityKeysByReadState,
+      getHasAcknowledgedByActivityKey,
+      lastAcknowledgedActivityKey,
+      lastReadActivityKey,
+      markActivityKeyAsRead,
+      markAllAsAcknowledged
+    ]
+  );
+
+  return (
+    <ActivityAcknowledgementContext.Provider value={contextValue}>{children}</ActivityAcknowledgementContext.Provider>
+  );
+};
+
+export default ActivityAcknowledgementComposer;

package/src/providers/ActivityAcknowledgement/private/Context.ts

@@ -0,0 +1,18 @@
+import { createContext } from 'react';
+
+// TODO: [P1] It seems acknowledgement is only for transcript scrolling and not very beneficial to everyone.
+//            We should move acknowledgement logic to transcript.
+type ActivityAcknowledgementContextType = {
+  activityKeysByReadState: readonly [readonly string[], readonly string[]];
+  getHasAcknowledgedByActivityKey: (activityKey: string) => boolean | undefined;
+  lastAcknowledgedActivityKeyState: readonly [string];
+  lastReadActivityKeyState: readonly [string];
+  markActivityKeyAsRead: (activityKey: string) => void;
+  markAllAsAcknowledged: () => void;
+};
+
+const ActivityAcknowledgementContext = createContext<ActivityAcknowledgementContextType>(undefined);
+
+export default ActivityAcknowledgementContext;
+
+export type { ActivityAcknowledgementContextType };

package/src/providers/ActivityAcknowledgement/private/types.ts

@@ -0,0 +1,6 @@
+type ActivityAcknowledgement = {
+  get acknowledged(): boolean;
+  get read(): boolean;
+};
+
+export type { ActivityAcknowledgement };

package/src/providers/ActivityAcknowledgement/private/useContext.ts

@@ -0,0 +1,19 @@
+import { useContext } from 'react';
+
+import ActivityAcknowledgementContext from './Context';
+
+import type { ActivityAcknowledgementContextType } from './Context';
+
+export default function useActivityAcknowledgementContext(
+  thrownOnUndefined = true
+): ActivityAcknowledgementContextType {
+  const contextValue = useContext(ActivityAcknowledgementContext);
+
+  if (thrownOnUndefined && !contextValue) {
+    throw new Error(
+      'botframework-webchat internal: This hook can only be used under <ActivityAcknowledgementContext>.'
+    );
+  }
+
+  return contextValue;
+}

package/src/providers/ActivityAcknowledgement/useActivityKeysByRead.tsx

@@ -0,0 +1,8 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+/**
+ * Returns an arrays of two list of activity keys: read and unread.
+ */
+export default function useActivityKeysByRead(): readonly [readonly string[], readonly string[]] {
+  return useActivityAcknowledgementContext().activityKeysByReadState;
+}

package/src/providers/ActivityAcknowledgement/useGetHasAcknowledgedByActivityKey.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useGetHasAcknoweledgedByActivityKey(): (activityKey: string) => boolean | undefined {
+  return useActivityAcknowledgementContext().getHasAcknowledgedByActivityKey;
+}

package/src/providers/ActivityAcknowledgement/useLastAcknowledgedActivityKey.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useLastAcknowledgedActivityKey(): readonly [string] {
+  return useActivityAcknowledgementContext().lastAcknowledgedActivityKeyState;
+}

package/src/providers/ActivityAcknowledgement/useLastReadActivityKey.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useLastReadActivityKey(): readonly [string] {
+  return useActivityAcknowledgementContext().lastReadActivityKeyState;
+}

package/src/providers/ActivityAcknowledgement/useMarkActivityKeyAsRead.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useMarkActivityKeyAsRead(): (activityKey: string) => void {
+  return useActivityAcknowledgementContext().markActivityKeyAsRead;
+}

package/src/providers/ActivityAcknowledgement/useMarkAllAsAcknowledged.ts

@@ -0,0 +1,5 @@
+import useActivityAcknowledgementContext from './private/useContext';
+
+export default function useMarkAllAsAcknowledged(): () => void {
+  return useActivityAcknowledgementContext().markAllAsAcknowledged;
+}