@azure/communication-react 1.5.1-beta.2 → 1.5.1-beta.4

package/dist/dist-esm/react-components/src/components/Caption.js

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import { Persona, Stack, PersonaSize, Text } from '@fluentui/react';
+import React from 'react';
+import { captionClassName, captionsContentContainerClassName, displayNameClassName, displayNameContainerClassName, iconClassName } from './styles/Captions.style';
+/**
+ * @internal
+ * A component for displaying a single line of caption
+ */
+export const _Caption = (props) => {
+    const { displayName, userId, captionText, onRenderAvatar } = props;
+    const personaOptions = {
+        hidePersonaDetails: true,
+        size: PersonaSize.size32,
+        text: displayName,
+        showOverflowTooltip: false,
+        initialsTextColor: 'white',
+        styles: {
+            root: {
+                margin: '0.25rem'
+            }
+        }
+    };
+    const userIcon = onRenderAvatar ? onRenderAvatar(userId !== null && userId !== void 0 ? userId : '', personaOptions) : React.createElement(Persona, Object.assign({}, personaOptions));
+    return (React.createElement(Stack, { horizontal: true, verticalAlign: "start", horizontalAlign: "start" },
+        React.createElement(Stack.Item, { className: iconClassName }, userIcon),
+        React.createElement(Stack, { verticalAlign: "start", className: captionsContentContainerClassName },
+            React.createElement(Stack.Item, { className: displayNameContainerClassName },
+                React.createElement(Text, { className: displayNameClassName }, displayName)),
+            React.createElement(Stack.Item, null,
+                React.createElement(Text, { className: captionClassName }, captionText)))));
+};
+//# sourceMappingURL=Caption.js.map

package/dist/dist-esm/react-components/src/components/Caption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/Caption.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,gBAAgB,EAChB,iCAAiC,EACjC,oBAAoB,EACpB,6BAA6B,EAC7B,aAAa,EACd,MAAM,yBAAyB,CAAC;AAgBjC;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;IAC5D,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,cAAc,GAAa;QAC/B,kBAAkB,EAAE,IAAI;QACxB,IAAI,EAAE,WAAW,CAAC,MAAM;QACxB,IAAI,EAAE,WAAW;QACjB,mBAAmB,EAAE,KAAK;QAC1B,iBAAiB,EAAE,OAAO;QAC1B,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,MAAM,EAAE,SAAS;aAClB;SACF;KACF,CAAC;IAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAAC;IAEjH,OAAO,CACL,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,OAAO,EAAC,eAAe,EAAC,OAAO;QAC7D,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,aAAa,IAAG,QAAQ,CAAc;QAE7D,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,iCAAiC;YACvE,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,6BAA6B;gBAClD,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,WAAW,CAAQ,CAChD;YACb,oBAAC,KAAK,CAAC,IAAI;gBACT,oBAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,IAAG,WAAW,CAAQ,CAC5C,CACP,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport {\n  captionClassName,\n  captionsContentContainerClassName,\n  displayNameClassName,\n  displayNameContainerClassName,\n  iconClassName\n} from './styles/Captions.style';\nimport { _CaptionsInfo } from './CaptionsBanner';\n\n/**\n * @internal\n * Props for a single line of caption.\n */\nexport interface _CaptionProps extends _CaptionsInfo {\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a single line of caption\n */\nexport const _Caption = (props: _CaptionProps): JSX.Element => {\n  const { displayName, userId, captionText, onRenderAvatar } = props;\n\n  const personaOptions: IPersona = {\n    hidePersonaDetails: true,\n    size: PersonaSize.size32,\n    text: displayName,\n    showOverflowTooltip: false,\n    initialsTextColor: 'white',\n    styles: {\n      root: {\n        margin: '0.25rem'\n      }\n    }\n  };\n\n  const userIcon = onRenderAvatar ? onRenderAvatar(userId ?? '', personaOptions) : <Persona {...personaOptions} />;\n\n  return (\n    <Stack horizontal verticalAlign=\"start\" horizontalAlign=\"start\">\n      <Stack.Item className={iconClassName}>{userIcon}</Stack.Item>\n\n      <Stack verticalAlign=\"start\" className={captionsContentContainerClassName}>\n        <Stack.Item className={displayNameContainerClassName}>\n          <Text className={displayNameClassName}>{displayName}</Text>\n        </Stack.Item>\n        <Stack.Item>\n          <Text className={captionClassName}>{captionText}</Text>\n        </Stack.Item>\n      </Stack>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/CaptionsBanner.d.ts

@@ -15,6 +15,7 @@ export declare type _CaptionsInfo = {
  */
 export interface _CaptionsBannerProps {
     captions: _CaptionsInfo[];
+    isCaptionsOn?: boolean;
     /**
      * Optional callback to override render of the avatar.
      *

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js

@@ -1,47 +1,49 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { Persona, Stack, PersonaSize, Text } from '@fluentui/react';
-import React, { useEffect, useRef } from 'react';
+import { Stack, FocusZone } from '@fluentui/react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Ref } from '@fluentui/react-northstar';
-import { captionClassName, displayNameClassName, gridContainerClassName } from './styles/CaptionsBanner.style';
+import { _Caption } from './Caption';
+import { captionContainerClassName, captionsBannerClassName, captionsContainerClassName } from './styles/Captions.style';
 /**
  * @internal
  * A component for displaying a CaptionsBanner with user icon, displayName and captions text.
  */
 export const _CaptionsBanner = (props) => {
-    const { captions, onRenderAvatar } = props;
+    const { captions, isCaptionsOn, onRenderAvatar } = props;
     const captionsScrollDivRef = useRef(null);
+    const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState(true);
     const scrollToBottom = () => {
         if (captionsScrollDivRef.current) {
             captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;
         }
     };
+    const handleScrollToTheBottom = useCallback(() => {
+        if (!captionsScrollDivRef.current) {
+            return;
+        }
+        const atBottom = Math.ceil(captionsScrollDivRef.current.scrollTop) >=
+            captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;
+        setIsAtBottomOfScroll(atBottom);
+    }, []);
+    useEffect(() => {
+        const captionsScrollDiv = captionsScrollDivRef.current;
+        captionsScrollDiv === null || captionsScrollDiv === void 0 ? void 0 : captionsScrollDiv.addEventListener('scroll', handleScrollToTheBottom);
+        return () => {
+            captionsScrollDiv === null || captionsScrollDiv === void 0 ? void 0 : captionsScrollDiv.removeEventListener('scroll', handleScrollToTheBottom);
+        };
+    }, [handleScrollToTheBottom]);
     useEffect(() => {
-        scrollToBottom();
-    }, [captions]);
-    return (React.createElement(Ref, { innerRef: captionsScrollDivRef },
-        React.createElement("div", { "data-is-focusable": true, className: gridContainerClassName }, captions.map((caption, key) => {
-            var _a;
-            const personaOptions = {
-                hidePersonaDetails: true,
-                size: PersonaSize.size24,
-                text: caption.displayName,
-                showOverflowTooltip: false,
-                styles: {
-                    root: {
-                        margin: '0.25rem'
-                    }
-                }
-            };
-            const userIcon = onRenderAvatar ? (onRenderAvatar((_a = caption.userId) !== null && _a !== void 0 ? _a : '', personaOptions)) : (React.createElement(Persona, Object.assign({}, personaOptions)));
-            return (React.createElement(React.Fragment, null,
-                React.createElement("div", { key: `username_${key}` },
-                    React.createElement(Stack, { horizontal: true, verticalAlign: "center", horizontalAlign: "end" },
-                        React.createElement("span", null, userIcon),
-                        React.createElement(Text, { className: displayNameClassName }, caption.displayName))),
-                React.createElement("div", { key: `captionText_${key}` },
-                    React.createElement("span", null,
-                        React.createElement(Text, { className: captionClassName }, caption.captionText)))));
-        }))));
+        // only auto scroll to bottom is already is at bottom of scroll before new caption comes in
+        if (isAtBottomOfScroll) {
+            scrollToBottom();
+        }
+    }, [captions, isAtBottomOfScroll]);
+    return (React.createElement(React.Fragment, null, isCaptionsOn && (React.createElement(FocusZone, { as: "ul", className: captionsContainerClassName },
+        React.createElement(Ref, { innerRef: captionsScrollDivRef },
+            React.createElement(Stack, { verticalAlign: "start", className: captionsBannerClassName }, captions.map((caption, key) => {
+                return (React.createElement("div", { key: key, className: captionContainerClassName, "data-is-focusable": true },
+                    React.createElement(_Caption, Object.assign({}, caption, { onRenderAvatar: onRenderAvatar }))));
+            })))))));
 };
 //# sourceMappingURL=CaptionsBanner.js.map

package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAY,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AA0B/G;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,oBAAoB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,GAAS,EAAE;QAChC,IAAI,oBAAoB,CAAC,OAAO,EAAE;YAChC,oBAAoB,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC;SACpF;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAE,oBAAoB;QACjC,kDAAwB,IAAI,EAAE,SAAS,EAAE,sBAAsB,IAC5D,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;;YAC7B,MAAM,cAAc,GAAa;gBAC/B,kBAAkB,EAAE,IAAI;gBACxB,IAAI,EAAE,WAAW,CAAC,MAAM;gBACxB,IAAI,EAAE,OAAO,CAAC,WAAW;gBACzB,mBAAmB,EAAE,KAAK;gBAC1B,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,MAAM,EAAE,SAAS;qBAClB;iBACF;aACF,CAAC;YAEF,MAAM,QAAQ,GAAG,cAAc,CAAC,CAAC,CAAC,CAChC,cAAc,CAAC,MAAA,OAAO,CAAC,MAAM,mCAAI,EAAE,EAAE,cAAc,CAAC,CACrD,CAAC,CAAC,CAAC,CACF,oBAAC,OAAO,oBAAK,cAAc,EAAI,CAChC,CAAC;YAEF,OAAO,CACL;gBACE,6BAAK,GAAG,EAAE,YAAY,GAAG,EAAE;oBACzB,oBAAC,KAAK,IAAC,UAAU,QAAC,aAAa,EAAC,QAAQ,EAAC,eAAe,EAAC,KAAK;wBAC5D,kCAAO,QAAQ,CAAQ;wBACvB,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAoB,IAAG,OAAO,CAAC,WAAW,CAAQ,CAC7D,CACJ;gBACN,6BAAK,GAAG,EAAE,eAAe,GAAG,EAAE;oBAC5B;wBACE,oBAAC,IAAI,IAAC,SAAS,EAAE,gBAAgB,IAAG,OAAO,CAAC,WAAW,CAAQ,CAC1D,CACH,CACL,CACJ,CAAC;QACJ,CAAC,CAAC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { IPersona, Persona, Stack, PersonaSize, Text } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { OnRenderAvatarCallback } from '../types';\nimport { Ref } from '@fluentui/react-northstar';\nimport { captionClassName, displayNameClassName, gridContainerClassName } from './styles/CaptionsBanner.style';\n\n/**\n * @internal\n * information required for each line of caption\n */\nexport type _CaptionsInfo = {\n  displayName: string;\n  captionText: string;\n  userId?: string;\n};\n\n/**\n * @internal\n * _CaptionsBanner Component Props.\n */\nexport interface _CaptionsBannerProps {\n  captions: _CaptionsInfo[];\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n  const { captions, onRenderAvatar } = props;\n  const captionsScrollDivRef = useRef<HTMLElement>(null);\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  useEffect(() => {\n    scrollToBottom();\n  }, [captions]);\n\n  return (\n    <Ref innerRef={captionsScrollDivRef}>\n      <div data-is-focusable={true} className={gridContainerClassName}>\n        {captions.map((caption, key) => {\n          const personaOptions: IPersona = {\n            hidePersonaDetails: true,\n            size: PersonaSize.size24,\n            text: caption.displayName,\n            showOverflowTooltip: false,\n            styles: {\n              root: {\n                margin: '0.25rem'\n              }\n            }\n          };\n\n          const userIcon = onRenderAvatar ? (\n            onRenderAvatar(caption.userId ?? '', personaOptions)\n          ) : (\n            <Persona {...personaOptions} />\n          );\n\n          return (\n            <>\n              <div key={`username_${key}`}>\n                <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"end\">\n                  <span>{userIcon}</span>\n                  <Text className={displayNameClassName}>{caption.displayName}</Text>\n                </Stack>\n              </div>\n              <div key={`captionText_${key}`}>\n                <span>\n                  <Text className={captionClassName}>{caption.captionText}</Text>\n                </span>\n              </div>\n            </>\n          );\n        })}\n      </div>\n    </Ref>\n  );\n};\n"]}
+{"version":3,"file":"CaptionsBanner.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsBanner.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AA4BjC;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACzD,MAAM,oBAAoB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAE5E,MAAM,cAAc,GAAG,GAAS,EAAE;QAChC,IAAI,oBAAoB,CAAC,OAAO,EAAE;YAChC,oBAAoB,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC;SACpF;IACH,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAS,EAAE;QACrD,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE;YACjC,OAAO;SACR;QACD,MAAM,QAAQ,GACZ,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,SAAS,CAAC;YACjD,oBAAoB,CAAC,OAAO,CAAC,YAAY,GAAG,oBAAoB,CAAC,OAAO,CAAC,YAAY,CAAC;QAExF,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC;QACvD,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,gBAAgB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACV,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,mBAAmB,CAAC,QAAQ,EAAE,uBAAuB,CAAC,CAAC;QAC5E,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,SAAS,CAAC,GAAG,EAAE;QACb,2FAA2F;QAC3F,IAAI,kBAAkB,EAAE;YACtB,cAAc,EAAE,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,0CACG,YAAY,IAAI,CACf,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,0BAA0B;QACtD,oBAAC,GAAG,IAAC,QAAQ,EAAE,oBAAoB;YACjC,oBAAC,KAAK,IAAC,aAAa,EAAC,OAAO,EAAC,SAAS,EAAE,uBAAuB,IAC5D,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;gBAC7B,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,yBAAyB,uBAAqB,IAAI;oBAC1E,oBAAC,QAAQ,oBAAK,OAAO,IAAE,cAAc,EAAE,cAAc,IAAI,CACrD,CACP,CAAC;YACJ,CAAC,CAAC,CACI,CACJ,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { Stack, FocusZone } from '@fluentui/react';\nimport React, { useEffect, useRef, useState, useCallback } from 'react';\nimport { _FileUploadCardsStrings } from './FileUploadCards';\nimport { Ref } from '@fluentui/react-northstar';\nimport { _Caption } from './Caption';\nimport {\n  captionContainerClassName,\n  captionsBannerClassName,\n  captionsContainerClassName\n} from './styles/Captions.style';\nimport { OnRenderAvatarCallback } from '../types';\n\n/**\n * @internal\n * information required for each line of caption\n */\nexport type _CaptionsInfo = {\n  displayName: string;\n  captionText: string;\n  userId?: string;\n};\n\n/**\n * @internal\n * _CaptionsBanner Component Props.\n */\nexport interface _CaptionsBannerProps {\n  captions: _CaptionsInfo[];\n  isCaptionsOn?: boolean;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n}\n\n/**\n * @internal\n * A component for displaying a CaptionsBanner with user icon, displayName and captions text.\n */\nexport const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {\n  const { captions, isCaptionsOn, onRenderAvatar } = props;\n  const captionsScrollDivRef = useRef<HTMLElement>(null);\n  const [isAtBottomOfScroll, setIsAtBottomOfScroll] = useState<boolean>(true);\n\n  const scrollToBottom = (): void => {\n    if (captionsScrollDivRef.current) {\n      captionsScrollDivRef.current.scrollTop = captionsScrollDivRef.current.scrollHeight;\n    }\n  };\n\n  const handleScrollToTheBottom = useCallback((): void => {\n    if (!captionsScrollDivRef.current) {\n      return;\n    }\n    const atBottom =\n      Math.ceil(captionsScrollDivRef.current.scrollTop) >=\n      captionsScrollDivRef.current.scrollHeight - captionsScrollDivRef.current.clientHeight;\n\n    setIsAtBottomOfScroll(atBottom);\n  }, []);\n\n  useEffect(() => {\n    const captionsScrollDiv = captionsScrollDivRef.current;\n    captionsScrollDiv?.addEventListener('scroll', handleScrollToTheBottom);\n\n    return () => {\n      captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);\n    };\n  }, [handleScrollToTheBottom]);\n\n  useEffect(() => {\n    // only auto scroll to bottom is already is at bottom of scroll before new caption comes in\n    if (isAtBottomOfScroll) {\n      scrollToBottom();\n    }\n  }, [captions, isAtBottomOfScroll]);\n\n  return (\n    <>\n      {isCaptionsOn && (\n        <FocusZone as=\"ul\" className={captionsContainerClassName}>\n          <Ref innerRef={captionsScrollDivRef}>\n            <Stack verticalAlign=\"start\" className={captionsBannerClassName}>\n              {captions.map((caption, key) => {\n                return (\n                  <div key={key} className={captionContainerClassName} data-is-focusable={true}>\n                    <_Caption {...caption} onRenderAvatar={onRenderAvatar} />\n                  </div>\n                );\n              })}\n            </Stack>\n          </Ref>\n        </FocusZone>\n      )}\n    </>\n  );\n};\n"]}

package/dist/dist-esm/react-components/src/components/CaptionsSettingsModal.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { _captionsOptions } from './StartCaptionsButton';
+import { CaptionsAvailableLanguageStrings } from '../types';
+/**
+ * @internal
+ * strings for captions setting modal
+ */
+export interface _CaptionsSettingsModalStrings {
+    captionsSettingsModalTitle?: string;
+    captionsSettingsDropdownLabel?: string;
+    captionsSettingsDropdownInfoText?: string;
+    captionsSettingsConfirmButtonLabel?: string;
+    captionsSettingsCancelButtonLabel?: string;
+    captionsSettingsModalAriaLabel?: string;
+    captionsSettingsCloseModalButtonAriaLabel?: string;
+}
+/**
+ * @internal
+ * _CaptionsSettingsModal Component Props.
+ */
+export interface _CaptionsSettingsModalProps {
+    supportedSpokenLanguages: string[];
+    onSetSpokenLanguage: (language: string) => Promise<void>;
+    onStartCaptions: (options?: _captionsOptions) => Promise<void>;
+    currentSpokenLanguage: string;
+    captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;
+    isCaptionsFeatureActive?: boolean;
+    strings?: _CaptionsSettingsModalStrings;
+    showModal?: boolean;
+    onDismissCaptionsSettings?: () => void;
+}
+/**
+ * @internal
+ * a component for setting spoken languages
+ */
+export declare const _CaptionsSettingsModal: (props: _CaptionsSettingsModalProps) => JSX.Element;
+//# sourceMappingURL=CaptionsSettingsModal.d.ts.map

package/dist/dist-esm/react-components/src/components/CaptionsSettingsModal.js

@@ -0,0 +1,88 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+import React, { useCallback } from 'react';
+import { useMemo, useState } from 'react';
+import { Modal, Stack, useTheme, Text, IconButton, Dropdown, DefaultButton, PrimaryButton } from '@fluentui/react';
+import { buttonsContainerClassName, buttonStyles, dropdownContainerClassName, dropdownInfoTextStyle, dropdownStyles, themedCaptionsSettingsModalStyle, titleClassName, titleContainerClassName } from './styles/CaptionsSettingsModal.styles';
+import { defaultSpokenLanguage } from './utils';
+import { _preventDismissOnEvent } from "../../../acs-ui-common/src";
+/**
+ * @internal
+ * a component for setting spoken languages
+ */
+export const _CaptionsSettingsModal = (props) => {
+    const { supportedSpokenLanguages, currentSpokenLanguage, isCaptionsFeatureActive, showModal, onSetSpokenLanguage, onDismissCaptionsSettings, onStartCaptions, strings, captionsAvailableLanguageStrings } = props;
+    const theme = useTheme();
+    const [selectedItem, setSelectedItem] = useState({
+        key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,
+        text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage
+    });
+    const onDismiss = useCallback(() => {
+        if (onDismissCaptionsSettings) {
+            onDismissCaptionsSettings();
+        }
+    }, [onDismissCaptionsSettings]);
+    const onConfirm = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const languageCode = selectedItem.key.toString();
+        if (isCaptionsFeatureActive) {
+            onSetSpokenLanguage(languageCode);
+        }
+        else {
+            yield onStartCaptions({ spokenLanguage: languageCode });
+            // set spoken language when start captions with a spoken language specified.
+            // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language
+            onSetSpokenLanguage(languageCode);
+        }
+        onDismiss();
+    }), [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);
+    const dropdownOptions = useMemo(() => {
+        return supportedSpokenLanguages.map((languageCode) => {
+            return {
+                key: languageCode,
+                text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode
+            };
+        });
+    }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);
+    const onChange = (event, option) => {
+        if (option) {
+            setSelectedItem(option);
+        }
+    };
+    const calloutProps = useMemo(() => ({
+        preventDismissOnEvent: _preventDismissOnEvent
+    }), []);
+    const CaptionsSettingsComponent = useCallback(() => {
+        return (React.createElement(Stack, null,
+            React.createElement(Dropdown, { label: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel, selectedKey: selectedItem ? selectedItem.key : undefined, onChange: onChange, calloutProps: calloutProps, placeholder: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage, options: dropdownOptions, styles: dropdownStyles }),
+            React.createElement(Text, { className: dropdownInfoTextStyle(theme) }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText)));
+    }, [
+        calloutProps,
+        currentSpokenLanguage,
+        dropdownOptions,
+        selectedItem,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownInfoText,
+        strings === null || strings === void 0 ? void 0 : strings.captionsSettingsDropdownLabel,
+        theme
+    ]);
+    const CaptionsSettingsModalStyle = useMemo(() => themedCaptionsSettingsModalStyle(theme), [theme]);
+    return (React.createElement(React.Fragment, null, React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalAriaLabel, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: CaptionsSettingsModalStyle },
+        React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
+            React.createElement(Text, { className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsModalTitle),
+            React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCloseModalButtonAriaLabel, onClick: onDismiss, style: { color: theme.palette.black } })),
+        React.createElement(Stack, { className: dropdownContainerClassName }, CaptionsSettingsComponent()),
+        React.createElement(Stack, { horizontal: true, horizontalAlign: "end", className: buttonsContainerClassName },
+            React.createElement(PrimaryButton, { styles: buttonStyles(theme), onClick: onConfirm },
+                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsConfirmButtonLabel)),
+            React.createElement(DefaultButton, { onClick: onDismiss, styles: buttonStyles(theme) },
+                React.createElement("span", null, strings === null || strings === void 0 ? void 0 : strings.captionsSettingsCancelButtonLabel))))));
+};
+//# sourceMappingURL=CaptionsSettingsModal.js.map

package/dist/dist-esm/react-components/src/components/CaptionsSettingsModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaptionsSettingsModal.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CaptionsSettingsModal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React, { useCallback } from 'react';\nimport { useMemo, useState } from 'react';\nimport {\n  IModalStyles,\n  Modal,\n  Stack,\n  useTheme,\n  Text,\n  IconButton,\n  Dropdown,\n  IDropdownOption,\n  DefaultButton,\n  PrimaryButton\n} from '@fluentui/react';\n\nimport {\n  buttonsContainerClassName,\n  buttonStyles,\n  dropdownContainerClassName,\n  dropdownInfoTextStyle,\n  dropdownStyles,\n  themedCaptionsSettingsModalStyle,\n  titleClassName,\n  titleContainerClassName\n} from './styles/CaptionsSettingsModal.styles';\nimport { _captionsOptions } from './StartCaptionsButton';\nimport { defaultSpokenLanguage } from './utils';\nimport { CaptionsAvailableLanguageStrings } from '../types';\nimport { _preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * @internal\n * strings for captions setting modal\n */\nexport interface _CaptionsSettingsModalStrings {\n  captionsSettingsModalTitle?: string;\n  captionsSettingsDropdownLabel?: string;\n  captionsSettingsDropdownInfoText?: string;\n  captionsSettingsConfirmButtonLabel?: string;\n  captionsSettingsCancelButtonLabel?: string;\n  captionsSettingsModalAriaLabel?: string;\n  captionsSettingsCloseModalButtonAriaLabel?: string;\n}\n\n/**\n * @internal\n * _CaptionsSettingsModal Component Props.\n */\nexport interface _CaptionsSettingsModalProps {\n  supportedSpokenLanguages: string[];\n  onSetSpokenLanguage: (language: string) => Promise<void>;\n  onStartCaptions: (options?: _captionsOptions) => Promise<void>;\n  currentSpokenLanguage: string;\n  captionsAvailableLanguageStrings?: CaptionsAvailableLanguageStrings;\n  isCaptionsFeatureActive?: boolean;\n  strings?: _CaptionsSettingsModalStrings;\n  showModal?: boolean;\n  onDismissCaptionsSettings?: () => void;\n}\n\n/**\n * @internal\n * a component for setting spoken languages\n */\nexport const _CaptionsSettingsModal = (props: _CaptionsSettingsModalProps): JSX.Element => {\n  const {\n    supportedSpokenLanguages,\n    currentSpokenLanguage,\n    isCaptionsFeatureActive,\n    showModal,\n    onSetSpokenLanguage,\n    onDismissCaptionsSettings,\n    onStartCaptions,\n    strings,\n    captionsAvailableLanguageStrings\n  } = props;\n\n  const theme = useTheme();\n\n  const [selectedItem, setSelectedItem] = useState<IDropdownOption>({\n    key: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage,\n    text: currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage\n  });\n\n  const onDismiss = useCallback((): void => {\n    if (onDismissCaptionsSettings) {\n      onDismissCaptionsSettings();\n    }\n  }, [onDismissCaptionsSettings]);\n\n  const onConfirm = useCallback(async (): Promise<void> => {\n    const languageCode = selectedItem.key.toString();\n    if (isCaptionsFeatureActive) {\n      onSetSpokenLanguage(languageCode);\n    } else {\n      await onStartCaptions({ spokenLanguage: languageCode });\n      // set spoken language when start captions with a spoken language specified.\n      // this is to fix the bug when a second user starts captions with a new spoken language, captions bot ignore that spoken language\n      onSetSpokenLanguage(languageCode);\n    }\n    onDismiss();\n  }, [onDismiss, isCaptionsFeatureActive, onSetSpokenLanguage, onStartCaptions, selectedItem.key]);\n\n  const dropdownOptions: IDropdownOption[] = useMemo(() => {\n    return supportedSpokenLanguages.map((languageCode) => {\n      return {\n        key: languageCode,\n        text: captionsAvailableLanguageStrings ? captionsAvailableLanguageStrings[languageCode] : languageCode\n      };\n    });\n  }, [supportedSpokenLanguages, captionsAvailableLanguageStrings]);\n\n  const onChange = (event: React.FormEvent<HTMLDivElement>, option: IDropdownOption | undefined): void => {\n    if (option) {\n      setSelectedItem(option);\n    }\n  };\n\n  const calloutProps = useMemo(\n    () => ({\n      preventDismissOnEvent: _preventDismissOnEvent\n    }),\n    []\n  );\n\n  const CaptionsSettingsComponent = useCallback((): JSX.Element => {\n    return (\n      <Stack>\n        <Dropdown\n          label={strings?.captionsSettingsDropdownLabel}\n          selectedKey={selectedItem ? selectedItem.key : undefined}\n          onChange={onChange}\n          calloutProps={calloutProps}\n          placeholder={currentSpokenLanguage !== '' ? currentSpokenLanguage : defaultSpokenLanguage}\n          options={dropdownOptions}\n          styles={dropdownStyles}\n        />\n        <Text className={dropdownInfoTextStyle(theme)}>{strings?.captionsSettingsDropdownInfoText}</Text>\n      </Stack>\n    );\n  }, [\n    calloutProps,\n    currentSpokenLanguage,\n    dropdownOptions,\n    selectedItem,\n    strings?.captionsSettingsDropdownInfoText,\n    strings?.captionsSettingsDropdownLabel,\n    theme\n  ]);\n\n  const CaptionsSettingsModalStyle: Partial<IModalStyles> = useMemo(\n    () => themedCaptionsSettingsModalStyle(theme),\n    [theme]\n  );\n\n  return (\n    <>\n      {\n        <Modal\n          titleAriaId={strings?.captionsSettingsModalAriaLabel}\n          isOpen={showModal}\n          onDismiss={onDismiss}\n          isBlocking={true}\n          styles={CaptionsSettingsModalStyle}\n        >\n          <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\" className={titleContainerClassName}>\n            <Text className={titleClassName}>{strings?.captionsSettingsModalTitle}</Text>\n            <IconButton\n              iconProps={{ iconName: 'Cancel' }}\n              ariaLabel={strings?.captionsSettingsCloseModalButtonAriaLabel}\n              onClick={onDismiss}\n              style={{ color: theme.palette.black }}\n            />\n          </Stack>\n\n          <Stack className={dropdownContainerClassName}>{CaptionsSettingsComponent()}</Stack>\n          <Stack horizontal horizontalAlign=\"end\" className={buttonsContainerClassName}>\n            <PrimaryButton styles={buttonStyles(theme)} onClick={onConfirm}>\n              <span>{strings?.captionsSettingsConfirmButtonLabel}</span>\n            </PrimaryButton>\n            <DefaultButton onClick={onDismiss} styles={buttonStyles(theme)}>\n              <span>{strings?.captionsSettingsCancelButtonLabel}</span>\n            </DefaultButton>\n          </Stack>\n        </Modal>\n      }\n    </>\n  );\n};\n\"../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.d.ts

@@ -2,9 +2,10 @@
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import { MessageThreadStrings } from '../MessageThread';
 import { ChatMessage, OnRenderAvatarCallback } from '../../types';
+import { BlockedMessage } from '../../types';
 import { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';
 declare type ChatMessageComponentProps = {
-    message: ChatMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     userId: string;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
@@ -12,6 +13,7 @@ declare type ChatMessageComponentProps = {
     onUpdateMessage?: (messageId: string, content: string, metadata?: Record<string, string>, options?: {
         attachedFilesMetadata?: FileMetadata[];
     }) => Promise<void>;
+    onCancelMessageEdit?: (messageId: string) => void;
     /**
      * Callback to delete a message. Also called before resending a message that failed to send.
      * @param messageId ID of the message to delete
@@ -24,6 +26,10 @@ declare type ChatMessageComponentProps = {
     onSendMessage?: (content: string) => Promise<void>;
     strings: MessageThreadStrings;
     messageStatus?: string;
+    /**
+     * Optional text to display when the message status is 'failed'.
+     */
+    failureReason?: string;
     /**
      * Whether the status indicator for each message is displayed or not.
      */
@@ -57,6 +63,15 @@ declare type ChatMessageComponentProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional function to fetch attachments.
+     * @beta
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
+    /**
+     * Optional map of attachment ids to blob urls.
+     */
+    attachmentsMap?: Record<string, string>;
 };
 /**
  * @private

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js

@@ -19,37 +19,40 @@ export const ChatMessageComponent = (props) => {
     const [isEditing, setIsEditing] = useState(false);
     const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);
     const { onDeleteMessage, onSendMessage, message } = props;
+    const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;
+    const content = 'content' in message ? message.content : undefined;
     const onRemoveClick = useCallback(() => {
         if (onDeleteMessage && message.messageId) {
             onDeleteMessage(message.messageId);
         }
-        // when fail to send, message does not have message id, delete message using clientmessageid
-        else if (onDeleteMessage && message.clientMessageId) {
-            onDeleteMessage(message.clientMessageId);
+        // when fail to send, message does not have message id, delete message using clientMessageId
+        else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {
+            onDeleteMessage(clientMessageId);
         }
-    }, [message.messageId, message.clientMessageId, onDeleteMessage]);
+    }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);
     const onResendClick = useCallback(() => {
-        var _a;
-        onDeleteMessage && message.clientMessageId && onDeleteMessage(message.clientMessageId);
-        onSendMessage && onSendMessage((_a = message.content) !== null && _a !== void 0 ? _a : '');
-    }, [message.clientMessageId, message.content, onSendMessage, onDeleteMessage]);
-    if (props.message.messageType !== 'chat') {
-        return React.createElement(React.Fragment, null);
-    }
-    else if (isEditing) {
+        onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);
+        onSendMessage && onSendMessage(content !== undefined ? content : '');
+    }, [clientMessageId, content, onSendMessage, onDeleteMessage]);
+    if (isEditing && message.messageType === 'chat') {
         return (React.createElement(ChatMessageComponentAsEditBox, { message: message, inlineEditButtons: props.inlineAcceptRejectEditButtons, strings: props.strings, onSubmit: (text, metadata, options) => __awaiter(void 0, void 0, void 0, function* () {
                 props.onUpdateMessage &&
-                    props.message.messageId &&
-                    (yield props.onUpdateMessage(props.message.messageId, text, metadata, options));
+                    message.messageId &&
+                    (yield props.onUpdateMessage(message.messageId, text, metadata, options));
                 setIsEditing(false);
-            }), onCancel: () => {
+            }), onCancel: (messageId) => {
+                props.onCancelMessageEdit && props.onCancelMessageEdit(messageId);
                 setIsEditing(false);
             } }));
     }
     else {
         return (React.createElement(ChatMessageComponentAsMessageBubble, Object.assign({}, props, { onRemoveClick: onRemoveClick, onEditClick: onEditClick, onResendClick: onResendClick, onRenderAvatar: props.onRenderAvatar, 
             /* @conditional-compile-remove(date-time-customization) */
-            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings })));
+            onDisplayDateTimeString: props.onDisplayDateTimeString, strings: props.strings, 
+            /* @conditional-compile-remove(teams-inline-images) */
+            onFetchAttachments: props.onFetchAttachments, 
+            /* @conditional-compile-remove(teams-inline-images) */
+            attachmentsMap: props.attachmentsMap })));
     }
 };
 //# sourceMappingURL=ChatMessageComponent.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAIlC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAGhF,OAAO,EAAE,mCAAmC,EAAE,MAAM,uCAAuC,CAAC;AAiE5F;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAgC,EAAe,EAAE;IACpF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC1D,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,IAAI,eAAe,IAAI,OAAO,CAAC,SAAS,EAAE;YACxC,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;SACpC;QACD,4FAA4F;aACvF,IAAI,eAAe,IAAI,OAAO,CAAC,eAAe,EAAE;YACnD,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;SAC1C;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;;QACrC,eAAe,IAAI,OAAO,CAAC,eAAe,IAAI,eAAe,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACvF,aAAa,IAAI,aAAa,CAAC,MAAA,OAAO,CAAC,OAAO,mCAAI,EAAE,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/E,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,KAAK,MAAM,EAAE;QACxC,OAAO,yCAAK,CAAC;KACd;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,CACL,oBAAC,6BAA6B,IAC5B,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,KAAK,CAAC,6BAA6B,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,CAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;gBAC1C,KAAK,CAAC,eAAe;oBACnB,KAAK,CAAC,OAAO,CAAC,SAAS;oBACvB,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;gBAClF,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,CAAA,EACD,QAAQ,EAAE,GAAG,EAAE;gBACb,YAAY,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC,GACD,CACH,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,mCAAmC,oBAC9B,KAAK,IACT,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,KAAK,CAAC,cAAc;YACpC,0DAA0D;YAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,EACtD,OAAO,EAAE,KAAK,CAAC,OAAO,IACtB,CACH,CAAC;KACH;AACH,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageComponentProps = {\n  message: ChatMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => Promise<void>;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineAcceptRejectEditButtons: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientmessageid\n    else if (onDeleteMessage && message.clientMessageId) {\n      onDeleteMessage(message.clientMessageId);\n    }\n  }, [message.messageId, message.clientMessageId, onDeleteMessage]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && message.clientMessageId && onDeleteMessage(message.clientMessageId);\n    onSendMessage && onSendMessage(message.content ?? '');\n  }, [message.clientMessageId, message.content, onSendMessage, onDeleteMessage]);\n\n  if (props.message.messageType !== 'chat') {\n    return <></>;\n  } else if (isEditing) {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        inlineEditButtons={props.inlineAcceptRejectEditButtons}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            props.message.messageId &&\n            (await props.onUpdateMessage(props.message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={() => {\n          setIsEditing(false);\n        }}\n      />\n    );\n  } else {\n    return (\n      <ChatMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n      />\n    );\n  }\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { ComponentSlotStyle } from '@fluentui/react-northstar';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useCallback, useState } from 'react';\nimport { ChatMessageComponentAsEditBox } from './ChatMessageComponentAsEditBox';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { ChatMessage, OnRenderAvatarCallback } from '../../types';\n/* @conditional-compile-remove(data-loss-prevention) */\nimport { BlockedMessage } from '../../types';\nimport { ChatMessageComponentAsMessageBubble } from './ChatMessageComponentAsMessageBubble';\nimport { FileDownloadHandler, FileMetadata } from '../FileDownloadCards';\n\ntype ChatMessageComponentProps = {\n  message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;\n  userId: string;\n  messageContainerStyle?: ComponentSlotStyle;\n  showDate?: boolean;\n  disableEditing?: boolean;\n  onUpdateMessage?: (\n    messageId: string,\n    content: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => Promise<void>;\n  onCancelMessageEdit?: (messageId: string) => void;\n  /**\n   * Callback to delete a message. Also called before resending a message that failed to send.\n   * @param messageId ID of the message to delete\n   */\n  onDeleteMessage?: (messageId: string) => Promise<void>;\n  /**\n   * Callback to send a message\n   * @param content The message content to send\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  strings: MessageThreadStrings;\n  messageStatus?: string;\n  /**\n   * Optional text to display when the message status is 'failed'.\n   */\n  failureReason?: string;\n  /**\n   * Whether the status indicator for each message is displayed or not.\n   */\n  showMessageStatus?: boolean;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineAcceptRejectEditButtons: boolean;\n  /**\n   * Optional callback to render uploaded files in the message component.\n   */\n  onRenderFileDownloads?: (userId: string, message: ChatMessage) => JSX.Element;\n  /**\n   * Optional function called when someone clicks on the file download icon.\n   */\n  fileDownloadHandler?: FileDownloadHandler;\n  remoteParticipantsCount?: number;\n  onActionButtonClick: (\n    message: ChatMessage,\n    setMessageReadBy: (readBy: { id: string; displayName: string }[]) => void\n  ) => void;\n  /**\n   * Optional callback to override render of the avatar.\n   *\n   * @param userId - user Id\n   */\n  onRenderAvatar?: OnRenderAvatarCallback;\n\n  /**\n   * Optional function to provide customized date format.\n   * @beta\n   */\n  onDisplayDateTimeString?: (messageDate: Date) => string;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /**\n   * Optional function to fetch attachments.\n   * @beta\n   */\n  onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;\n  /* @conditional-compile-remove(teams-inline-images) */\n  /**\n   * Optional map of attachment ids to blob urls.\n   */\n  attachmentsMap?: Record<string, string>;\n};\n\n/**\n * @private\n */\nexport const ChatMessageComponent = (props: ChatMessageComponentProps): JSX.Element => {\n  const [isEditing, setIsEditing] = useState(false);\n\n  const onEditClick = useCallback(() => setIsEditing(true), [setIsEditing]);\n\n  const { onDeleteMessage, onSendMessage, message } = props;\n  const clientMessageId = 'clientMessageId' in message ? message.clientMessageId : undefined;\n  const content = 'content' in message ? message.content : undefined;\n  const onRemoveClick = useCallback(() => {\n    if (onDeleteMessage && message.messageId) {\n      onDeleteMessage(message.messageId);\n    }\n    // when fail to send, message does not have message id, delete message using clientMessageId\n    else if (onDeleteMessage && message.messageType === 'chat' && clientMessageId) {\n      onDeleteMessage(clientMessageId);\n    }\n  }, [onDeleteMessage, message.messageId, message.messageType, clientMessageId]);\n  const onResendClick = useCallback(() => {\n    onDeleteMessage && clientMessageId && onDeleteMessage(clientMessageId);\n    onSendMessage && onSendMessage(content !== undefined ? content : '');\n  }, [clientMessageId, content, onSendMessage, onDeleteMessage]);\n\n  if (isEditing && message.messageType === 'chat') {\n    return (\n      <ChatMessageComponentAsEditBox\n        message={message}\n        inlineEditButtons={props.inlineAcceptRejectEditButtons}\n        strings={props.strings}\n        onSubmit={async (text, metadata, options) => {\n          props.onUpdateMessage &&\n            message.messageId &&\n            (await props.onUpdateMessage(message.messageId, text, metadata, options));\n          setIsEditing(false);\n        }}\n        onCancel={(messageId) => {\n          props.onCancelMessageEdit && props.onCancelMessageEdit(messageId);\n          setIsEditing(false);\n        }}\n      />\n    );\n  } else {\n    return (\n      <ChatMessageComponentAsMessageBubble\n        {...props}\n        onRemoveClick={onRemoveClick}\n        onEditClick={onEditClick}\n        onResendClick={onResendClick}\n        onRenderAvatar={props.onRenderAvatar}\n        /* @conditional-compile-remove(date-time-customization) */\n        onDisplayDateTimeString={props.onDisplayDateTimeString}\n        strings={props.strings}\n        /* @conditional-compile-remove(teams-inline-images) */\n        onFetchAttachments={props.onFetchAttachments}\n        /* @conditional-compile-remove(teams-inline-images) */\n        attachmentsMap={props.attachmentsMap}\n      />\n    );\n  }\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.d.ts

@@ -4,7 +4,7 @@ import { ChatMessage } from '../../types';
 import { FileMetadata } from '../FileDownloadCards';
 /** @private */
 export declare type ChatMessageComponentAsEditBoxProps = {
-    onCancel?: () => void;
+    onCancel?: (messageId: string) => void;
     onSubmit: (text: string, metadata?: Record<string, string>, options?: {
         attachedFilesMetadata?: FileMetadata[];
     }) => void;

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js

@@ -8,6 +8,7 @@ import { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from
 import { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';
 import { borderAndBoxShadowStyle } from '../styles/SendBox.styles';
 import { _FileUploadCards } from '../FileUploadCards';
+import { chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const onRenderCancelIcon = (color) => {
     const className = mergeStyles(inputBoxIcon, { color });
@@ -55,7 +56,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
     }, [attachedFilesMetadata]);
     return (React.createElement(Stack, { className: mergeStyles(borderAndBoxShadowStyle({
             theme,
-            hasErrorMessage: false,
+            hasErrorMessage: message.failureReason !== undefined,
             disabled: false
         })) },
         React.createElement(InputBoxComponent, { inlineChildren: props.inlineEditButtons, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle(props.inlineEditButtons), placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onEnterKeyDown: () => {
@@ -65,7 +66,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
                     });
             }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles },
             React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
-                    onCancel && onCancel();
+                    onCancel && onCancel(message.messageId);
                 }, id: 'dismissIconWrapper' }),
             React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
                     submitEnabled &&
@@ -74,6 +75,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
                         });
                     e.stopPropagation();
                 }, id: 'submitIconWrapper' })),
+        message.failureReason && (React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
         onRenderFileUploads()));
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { borderAndBoxShadowStyle } from '../styles/SendBox.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\n\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, { color });\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\n\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, { color });\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: () => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineEditButtons: boolean;\n};\n\ntype MessageState = 'OK' | 'too short' | 'too long';\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const { onCancel, onSubmit, strings, message } = props;\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n\n  const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n  const submitEnabled = messageState === 'OK';\n\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n\n  const setText = (\n    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,\n    newValue?: string | undefined\n  ): void => {\n    setTextValue(newValue ?? '');\n  };\n\n  const textTooLongMessage =\n    messageState === 'too long'\n      ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n      : undefined;\n\n  const onRenderThemedCancelIcon = useCallback(\n    () => onRenderCancelIcon(theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    () => onRenderSubmitIcon(theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary]\n  );\n\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n  }, [theme.palette.themePrimary]);\n\n  const onRenderFileUploads = useCallback(() => {\n    return (\n      attachedFilesMetadata?.length && (\n        <div style={{ margin: '0.25rem' }}>\n          <_FileUploadCards\n            activeFileUploads={attachedFilesMetadata?.map((file) => ({\n              id: file.name,\n              filename: file.name,\n              progress: 1\n            }))}\n            onCancelFileUpload={(fileId) => {\n              setAttachedFilesMetadata(attachedFilesMetadata?.filter((file) => file.name !== fileId));\n            }}\n          />\n        </div>\n      )\n    );\n  }, [attachedFilesMetadata]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        borderAndBoxShadowStyle({\n          theme,\n          hasErrorMessage: false,\n          disabled: false\n        })\n      )}\n    >\n      <InputBoxComponent\n        inlineChildren={props.inlineEditButtons}\n        id={'editbox'}\n        textFieldRef={editTextFieldRef}\n        inputClassName={editBoxStyle(props.inlineEditButtons)}\n        placeholderText={strings.editBoxPlaceholderText}\n        textValue={textValue}\n        onChange={setText}\n        onEnterKeyDown={() => {\n          submitEnabled &&\n            onSubmit(textValue, message.metadata, {\n              attachedFilesMetadata\n            });\n        }}\n        supportNewline={false}\n        maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n        errorMessage={textTooLongMessage}\n        styles={editBoxStyles}\n      >\n        <InputBoxButton\n          className={editingButtonStyle}\n          ariaLabel={strings.editBoxCancelButton}\n          tooltipContent={strings.editBoxCancelButton}\n          onRenderIcon={onRenderThemedCancelIcon}\n          onClick={() => {\n            onCancel && onCancel();\n          }}\n          id={'dismissIconWrapper'}\n        />\n        <InputBoxButton\n          className={editingButtonStyle}\n          ariaLabel={strings.editBoxSubmitButton}\n          tooltipContent={strings.editBoxSubmitButton}\n          onRenderIcon={onRenderThemedSubmitIcon}\n          onClick={(e) => {\n            submitEnabled &&\n              onSubmit(textValue, message.metadata, {\n                attachedFilesMetadata\n              });\n            e.stopPropagation();\n          }}\n          id={'submitIconWrapper'}\n        />\n      </InputBoxComponent>\n      {onRenderFileUploads()}\n    </Stack>\n  );\n};\n\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean =>\n  messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState =>\n  isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return message.attachedFilesMetadata;\n  return [];\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useTheme } from '../../theming/FluentThemeProvider';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { borderAndBoxShadowStyle } from '../styles/SendBox.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';\n\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\nconst onRenderCancelIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, { color });\n  return <Icon iconName={'EditBoxCancel'} className={className} />;\n};\n\nconst onRenderSubmitIcon = (color: string): JSX.Element => {\n  const className = mergeStyles(inputBoxIcon, { color });\n  return <Icon iconName={'EditBoxSubmit'} className={className} />;\n};\n\n/** @private */\nexport type ChatMessageComponentAsEditBoxProps = {\n  onCancel?: (messageId: string) => void;\n  onSubmit: (\n    text: string,\n    metadata?: Record<string, string>,\n    options?: {\n      attachedFilesMetadata?: FileMetadata[];\n    }\n  ) => void;\n  message: ChatMessage;\n  strings: MessageThreadStrings;\n  /**\n   * Inline the accept and reject edit buttons when editing a message.\n   * Setting to false will mean they are on a new line inside the editable chat message.\n   */\n  inlineEditButtons: boolean;\n};\n\ntype MessageState = 'OK' | 'too short' | 'too long';\n\n/**\n * @private\n */\nexport const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditBoxProps): JSX.Element => {\n  const { onCancel, onSubmit, strings, message } = props;\n  const [textValue, setTextValue] = useState<string>(message.content || '');\n\n  const [attachedFilesMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n  const editTextFieldRef = React.useRef<ITextField>(null);\n  const theme = useTheme();\n  const messageState = getMessageState(textValue, attachedFilesMetadata ?? []);\n  const submitEnabled = messageState === 'OK';\n\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n\n  const setText = (\n    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,\n    newValue?: string | undefined\n  ): void => {\n    setTextValue(newValue ?? '');\n  };\n\n  const textTooLongMessage =\n    messageState === 'too long'\n      ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })\n      : undefined;\n\n  const onRenderThemedCancelIcon = useCallback(\n    () => onRenderCancelIcon(theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    () => onRenderSubmitIcon(theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary]\n  );\n\n  const editBoxStyles = useMemo(() => {\n    return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n  }, [theme.palette.themePrimary]);\n\n  const onRenderFileUploads = useCallback(() => {\n    return (\n      attachedFilesMetadata?.length && (\n        <div style={{ margin: '0.25rem' }}>\n          <_FileUploadCards\n            activeFileUploads={attachedFilesMetadata?.map((file) => ({\n              id: file.name,\n              filename: file.name,\n              progress: 1\n            }))}\n            onCancelFileUpload={(fileId) => {\n              setAttachedFilesMetadata(attachedFilesMetadata?.filter((file) => file.name !== fileId));\n            }}\n          />\n        </div>\n      )\n    );\n  }, [attachedFilesMetadata]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        borderAndBoxShadowStyle({\n          theme,\n          hasErrorMessage: message.failureReason !== undefined,\n          disabled: false\n        })\n      )}\n    >\n      <InputBoxComponent\n        inlineChildren={props.inlineEditButtons}\n        id={'editbox'}\n        textFieldRef={editTextFieldRef}\n        inputClassName={editBoxStyle(props.inlineEditButtons)}\n        placeholderText={strings.editBoxPlaceholderText}\n        textValue={textValue}\n        onChange={setText}\n        onEnterKeyDown={() => {\n          submitEnabled &&\n            onSubmit(textValue, message.metadata, {\n              attachedFilesMetadata\n            });\n        }}\n        supportNewline={false}\n        maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n        errorMessage={textTooLongMessage}\n        styles={editBoxStyles}\n      >\n        <InputBoxButton\n          className={editingButtonStyle}\n          ariaLabel={strings.editBoxCancelButton}\n          tooltipContent={strings.editBoxCancelButton}\n          onRenderIcon={onRenderThemedCancelIcon}\n          onClick={() => {\n            onCancel && onCancel(message.messageId);\n          }}\n          id={'dismissIconWrapper'}\n        />\n        <InputBoxButton\n          className={editingButtonStyle}\n          ariaLabel={strings.editBoxSubmitButton}\n          tooltipContent={strings.editBoxSubmitButton}\n          onRenderIcon={onRenderThemedSubmitIcon}\n          onClick={(e) => {\n            submitEnabled &&\n              onSubmit(textValue, message.metadata, {\n                attachedFilesMetadata\n              });\n            e.stopPropagation();\n          }}\n          id={'submitIconWrapper'}\n        />\n      </InputBoxComponent>\n      {message.failureReason && (\n        <div className={mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' })}>\n          {message.failureReason}\n        </div>\n      )}\n      {onRenderFileUploads()}\n    </Stack>\n  );\n};\n\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nconst isMessageEmpty = (messageText: string, attachedFilesMetadata: FileMetadata[]): boolean =>\n  messageText.trim().length === 0 && attachedFilesMetadata.length === 0;\nconst getMessageState = (messageText: string, attachedFilesMetadata: FileMetadata[]): MessageState =>\n  isMessageEmpty(messageText, attachedFilesMetadata) ? 'too short' : isMessageTooLong(messageText) ? 'too long' : 'OK';\n\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return message.attachedFilesMetadata;\n  return [];\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.d.ts

@@ -1,11 +1,13 @@
 import { ComponentSlotStyle } from '@fluentui/react-northstar';
 import React from 'react';
 import { ChatMessage } from '../../types/ChatMessage';
+import { FileMetadata } from '../FileDownloadCards';
+import { BlockedMessage } from '../../types/ChatMessage';
 import { MessageThreadStrings } from '../MessageThread';
 import { OnRenderAvatarCallback } from '../../types';
 import { FileDownloadHandler } from '../FileDownloadCards';
 declare type ChatMessageComponentAsMessageBubbleProps = {
-    message: ChatMessage;
+    message: ChatMessage | /* @conditional-compile-remove(data-loss-prevention) */ BlockedMessage;
     messageContainerStyle?: ComponentSlotStyle;
     showDate?: boolean;
     disableEditing?: boolean;
@@ -43,6 +45,14 @@ declare type ChatMessageComponentAsMessageBubbleProps = {
      * @beta
      */
     onDisplayDateTimeString?: (messageDate: Date) => string;
+    /**
+     * Optional function to fetch attachments.
+     */
+    onFetchAttachments?: (attachment: FileMetadata) => Promise<void>;
+    /**
+     * Optional map of attachment ids to blob urls.
+     */
+    attachmentsMap?: Record<string, string>;
 };
 /** @private */
 export declare const ChatMessageComponentAsMessageBubble: React.MemoExoticComponent<(props: ChatMessageComponentAsMessageBubbleProps) => JSX.Element>;