@azure/communication-react 1.13.0-beta.1 → 1.13.1-alpha-202402280012

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatButtonWithUnreadMessagesBadge.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,yCAAgC;AAExD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAUtD,MAAM,UAAU,GAAG,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,4BAA4B,GAAI,CAAC;AACzF,MAAM,WAAW,GAAG,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,8BAA8B,GAAI,CAAC;AAE5F;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAA6C,EAAe,EAAE;;IAC9G,MAAM,EACJ,eAAe,EACf,uBAAuB,EACvB,2BAA2B,EAC5B,GAAG,KAAK,CAAC;IACV,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAC5D,MAAM,mBAAmB,GAAG,+BAA+B,EAAE,CAAC;IAC9D,MAAM,kBAAkB,GAAG,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB,KAAI,uBAAuB,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,mBAAmB,CAAC,uCAAuC,EAAE;QACtK,mBAAmB,EAAE,GAAG,uBAAuB,EAAE;KAClD,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACf,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;;QAAC,OAAA,CAAC;YACjC,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;YAC3B,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB;YAC7F,gBAAgB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB;SAClD,CAAC,CAAA;KAAA,EAAE,CAAC,kBAAkB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,CAAC,CAAC,CAAC;IACnH,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAgB,EAAE;QACvD,OAAO,oBAAC,KAAK,IAAC,MAAM,EAAE,+BAA+B;YAChD,uBAAuB,GAAG,CAAC,IAAI,CAAC,2BAA2B,IAAI,oBAAC,gBAAgB,IAAC,iBAAiB,EAAE,uBAAuB,EAAE,KAAK,EAAE,eAAe,GAAI;YACvJ,QAAQ,CACH,CAAC;IACb,CAAC,EAAE,CAAC,uBAAuB,EAAE,eAAe,EAAE,QAAQ,EAAE,2BAA2B,CAAC,CAAC,CAAC;IACtF,OAAO,oBAAC,UAAU,oBAAK,KAAK,kBAAa,sCAAsC,EAAC,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,IAAI,CAAC;AAChL,CAAC,CAAC;AACF,MAAM,+BAA+B,GAAiB;IACpD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport React, { useCallback, useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../../common/icons';\nimport { ChatButton } from './ChatButton';\nimport { useCallWithChatCompositeStrings } from '../hooks/useCallWithChatCompositeStrings';\nimport { NotificationIcon } from './NotificationIcon';\n\n/**\n * @private\n */\nexport interface ChatButtonWithUnreadMessagesBadgeProps extends ControlBarButtonProps {\n  unreadChatMessagesCount: number;\n  hideUnreadChatMessagesBadge?: boolean;\n  newMessageLabel: string;\n}\nconst filledIcon = <CallWithChatCompositeIcon iconName={'ControlBarChatButtonActive'} />;\nconst regularIcon = <CallWithChatCompositeIcon iconName={'ControlBarChatButtonInactive'} />;\n\n/**\n * @private\n */\nexport const ChatButtonWithUnreadMessagesBadge = (props: ChatButtonWithUnreadMessagesBadgeProps): JSX.Element => {\n  const {\n    newMessageLabel,\n    unreadChatMessagesCount,\n    hideUnreadChatMessagesBadge\n  } = props;\n  const baseIcon = props.showLabel ? regularIcon : filledIcon;\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n  const numberOfMsgToolTip = props.strings?.tooltipOffContent && unreadChatMessagesCount > 0 ? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {\n    unreadMessagesCount: `${unreadChatMessagesCount}`\n  }) : undefined;\n  const chatStrings = useMemo(() => ({\n    label: props.strings?.label,\n    tooltipOffContent: numberOfMsgToolTip ? numberOfMsgToolTip : props.strings?.tooltipOffContent,\n    tooltipOnContent: props.strings?.tooltipOnContent\n  }), [numberOfMsgToolTip, props.strings?.label, props.strings?.tooltipOffContent, props.strings?.tooltipOnContent]);\n  const onRenderOnIcon = useCallback(() => baseIcon, [baseIcon]);\n  const notificationOnIcon = useCallback((): JSX.Element => {\n    return <Stack styles={chatNotificationContainerStyles}>\n        {unreadChatMessagesCount > 0 && !hideUnreadChatMessagesBadge && <NotificationIcon chatMessagesCount={unreadChatMessagesCount} label={newMessageLabel} />}\n        {baseIcon}\n      </Stack>;\n  }, [unreadChatMessagesCount, newMessageLabel, baseIcon, hideUnreadChatMessagesBadge]);\n  return <ChatButton {...props} data-ui-id=\"call-with-chat-composite-chat-button\" onRenderOffIcon={notificationOnIcon} onRenderOnIcon={onRenderOnIcon} strings={chatStrings} />;\n};\nconst chatNotificationContainerStyles: IStackStyles = {\n  root: {\n    display: 'inline',\n    position: 'relative'\n  }\n};"]}
+{"version":3,"file":"ChatButtonWithUnreadMessagesBadge.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,yCAAgC;AAExD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,+BAA+B,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAWtD,MAAM,UAAU,GAAG,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,4BAA4B,GAAI,CAAC;AACzF,MAAM,WAAW,GAAG,oBAAC,yBAAyB,IAAC,QAAQ,EAAE,8BAA8B,GAAI,CAAC;AAE5F;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,KAA6C,EAAe,EAAE;;IAC9G,MAAM,EAAE,eAAe,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,GAAG,KAAK,CAAC;IAExF,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAC5D,MAAM,mBAAmB,GAAG,+BAA+B,EAAE,CAAC;IAE9D,MAAM,kBAAkB,GACtB,CAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB,KAAI,uBAAuB,GAAG,CAAC;QAC7D,CAAC,CAAC,aAAa,CAAC,mBAAmB,CAAC,uCAAuC,EAAE;YACzE,mBAAmB,EAAE,GAAG,uBAAuB,EAAE;SAClD,CAAC;QACJ,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE;;QAAC,OAAA,CAAC;YACL,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK;YAC3B,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB;YAC7F,gBAAgB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB;SAClD,CAAC,CAAA;KAAA,EACF,CAAC,kBAAkB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,iBAAiB,EAAE,MAAA,KAAK,CAAC,OAAO,0CAAE,gBAAgB,CAAC,CAC9G,CAAC;IACF,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAgB,EAAE;QACvD,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,+BAA+B;YAC3C,uBAAuB,GAAG,CAAC,IAAI,CAAC,2BAA2B,IAAI,CAC9D,oBAAC,gBAAgB,IAAC,iBAAiB,EAAE,uBAAuB,EAAE,KAAK,EAAE,eAAe,GAAI,CACzF;YACA,QAAQ,CACH,CACT,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,EAAE,eAAe,EAAE,QAAQ,EAAE,2BAA2B,CAAC,CAAC,CAAC;IAEtF,OAAO,CACL,oBAAC,UAAU,oBACL,KAAK,kBACE,sCAAsC,EACjD,eAAe,EAAE,kBAAkB,EACnC,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,WAAW,IACpB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,+BAA+B,GAAiB;IACpD,IAAI,EAAE;QACJ,OAAO,EAAE,QAAQ;QACjB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { IStackStyles, Stack } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { ControlBarButtonProps } from '@internal/react-components';\nimport React, { useCallback, useMemo } from 'react';\nimport { CallWithChatCompositeIcon } from '../../common/icons';\nimport { ChatButton } from './ChatButton';\nimport { useCallWithChatCompositeStrings } from '../hooks/useCallWithChatCompositeStrings';\nimport { NotificationIcon } from './NotificationIcon';\n\n/**\n * @private\n */\nexport interface ChatButtonWithUnreadMessagesBadgeProps extends ControlBarButtonProps {\n  unreadChatMessagesCount: number;\n  hideUnreadChatMessagesBadge?: boolean;\n  newMessageLabel: string;\n}\n\nconst filledIcon = <CallWithChatCompositeIcon iconName={'ControlBarChatButtonActive'} />;\nconst regularIcon = <CallWithChatCompositeIcon iconName={'ControlBarChatButtonInactive'} />;\n\n/**\n * @private\n */\nexport const ChatButtonWithUnreadMessagesBadge = (props: ChatButtonWithUnreadMessagesBadgeProps): JSX.Element => {\n  const { newMessageLabel, unreadChatMessagesCount, hideUnreadChatMessagesBadge } = props;\n\n  const baseIcon = props.showLabel ? regularIcon : filledIcon;\n  const callWithChatStrings = useCallWithChatCompositeStrings();\n\n  const numberOfMsgToolTip =\n    props.strings?.tooltipOffContent && unreadChatMessagesCount > 0\n      ? _formatString(callWithChatStrings.chatButtonTooltipClosedWithMessageCount, {\n          unreadMessagesCount: `${unreadChatMessagesCount}`\n        })\n      : undefined;\n\n  const chatStrings = useMemo(\n    () => ({\n      label: props.strings?.label,\n      tooltipOffContent: numberOfMsgToolTip ? numberOfMsgToolTip : props.strings?.tooltipOffContent,\n      tooltipOnContent: props.strings?.tooltipOnContent\n    }),\n    [numberOfMsgToolTip, props.strings?.label, props.strings?.tooltipOffContent, props.strings?.tooltipOnContent]\n  );\n  const onRenderOnIcon = useCallback(() => baseIcon, [baseIcon]);\n  const notificationOnIcon = useCallback((): JSX.Element => {\n    return (\n      <Stack styles={chatNotificationContainerStyles}>\n        {unreadChatMessagesCount > 0 && !hideUnreadChatMessagesBadge && (\n          <NotificationIcon chatMessagesCount={unreadChatMessagesCount} label={newMessageLabel} />\n        )}\n        {baseIcon}\n      </Stack>\n    );\n  }, [unreadChatMessagesCount, newMessageLabel, baseIcon, hideUnreadChatMessagesBadge]);\n\n  return (\n    <ChatButton\n      {...props}\n      data-ui-id=\"call-with-chat-composite-chat-button\"\n      onRenderOffIcon={notificationOnIcon}\n      onRenderOnIcon={onRenderOnIcon}\n      strings={chatStrings}\n    />\n  );\n};\n\nconst chatNotificationContainerStyles: IStackStyles = {\n  root: {\n    display: 'inline',\n    position: 'relative'\n  }\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.js

@@ -14,24 +14,21 @@ export const NotificationIcon = (props) => {
         }
         else {
             const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';
-            return React.createElement(Text, { role: 'status', "aria-label": textNumberOfMessages + (label !== null && label !== void 0 ? label : ''), styles: notificationTextStyles(theme) }, textNumberOfMessages);
+            return (React.createElement(Text, { role: 'status', "aria-label": textNumberOfMessages + (label !== null && label !== void 0 ? label : ''), styles: notificationTextStyles(theme) }, textNumberOfMessages));
         }
     };
-    return React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-chat-button-unread-icon", horizontalAlign: "center", verticalAlign: "center", styles: notificationIconContainerStyles(theme) },
-        React.createElement(Stack, null, renderNumber(chatMessagesCount)));
+    return (React.createElement(Stack, { "data-ui-id": "call-with-chat-composite-chat-button-unread-icon", horizontalAlign: "center", verticalAlign: "center", styles: notificationIconContainerStyles(theme) },
+        React.createElement(Stack, null, renderNumber(chatMessagesCount))));
 };
 const notificationIconPaddingREM = 0.225;
 const notificationSizeREM = 1;
 const notificationIconContainerStyles = memoizeFunction((theme) => ({
     root: {
-        borderRadius: `${notificationSizeREM}rem`,
-        // Create a css circle. This should match the height.
+        borderRadius: `${notificationSizeREM}rem`, // Create a css circle. This should match the height.
         height: `${notificationSizeREM}rem`,
-        minWidth: `${notificationSizeREM}rem`,
-        // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)
+        minWidth: `${notificationSizeREM}rem`, // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)
         background: theme.palette.themePrimary,
-        border: `0.0625rem solid white`,
-        // border should always be white
+        border: `0.0625rem solid white`, // border should always be white
         padding: `${notificationIconPaddingREM}rem`,
         // positioning to place the badge within the button appropriately.
         position: 'absolute',

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationIcon.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAS5G;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM,EACJ,iBAAiB,EACjB,KAAK,EACN,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,CAAC,gBAAwB,EAAe,EAAE;QAC7D,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,yCAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5E,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,gBAAc,oBAAoB,GAAG,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,EAAE,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,IAC/G,oBAAoB,CAChB,CAAC;QACZ,CAAC;IACH,CAAC,CAAC;IACF,OAAO,oBAAC,KAAK,kBAAY,kDAAkD,EAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,+BAA+B,CAAC,KAAK,CAAC;QACtK,oBAAC,KAAK,QAAE,YAAY,CAAC,iBAAiB,CAAC,CAAS,CAC1C,CAAC;AACb,CAAC,CAAC;AACF,MAAM,0BAA0B,GAAG,KAAK,CAAC;AACzC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAC9B,MAAM,+BAA+B,GAAG,eAAe,CAAC,CAAC,KAAa,EAAe,EAAE,CAAC,CAAC;IACvF,IAAI,EAAE;QACJ,YAAY,EAAE,GAAG,mBAAmB,KAAK;QACzC,qDAAqD;QACrD,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,QAAQ,EAAE,GAAG,mBAAmB,KAAK;QACrC,sIAAsI;QACtI,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,MAAM,EAAE,uBAAuB;QAC/B,gCAAgC;QAChC,OAAO,EAAE,GAAG,0BAA0B,KAAK;QAC3C,kEAAkE;QAClE,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,IAAI,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;QAClD,IAAI,EAAE,GAAG,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;KACnD;CACF,CAAC,CAAC,CAAC;AACJ,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,KAAa,EAAgB,EAAE,CAAC,CAAC;IAC/E,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KACtC;CACF,CAAC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IIconStyles, IStackStyles, ITheme, memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';\n\n/**\n * @private\n */\nexport type NotificationIconProps = {\n  chatMessagesCount: number;\n  label?: string;\n};\n/**\n * @private\n */\nexport const NotificationIcon = (props: NotificationIconProps): JSX.Element => {\n  const {\n    chatMessagesCount,\n    label\n  } = props;\n  const theme = useTheme();\n  const renderNumber = (numberOfMessages: number): JSX.Element => {\n    if (numberOfMessages < 1) {\n      return <></>;\n    } else {\n      const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';\n      return <Text role={'status'} aria-label={textNumberOfMessages + (label ?? '')} styles={notificationTextStyles(theme)}>\n          {textNumberOfMessages}\n        </Text>;\n    }\n  };\n  return <Stack data-ui-id=\"call-with-chat-composite-chat-button-unread-icon\" horizontalAlign=\"center\" verticalAlign=\"center\" styles={notificationIconContainerStyles(theme)}>\n      <Stack>{renderNumber(chatMessagesCount)}</Stack>\n    </Stack>;\n};\nconst notificationIconPaddingREM = 0.225;\nconst notificationSizeREM = 1;\nconst notificationIconContainerStyles = memoizeFunction((theme: ITheme): IIconStyles => ({\n  root: {\n    borderRadius: `${notificationSizeREM}rem`,\n    // Create a css circle. This should match the height.\n    height: `${notificationSizeREM}rem`,\n    minWidth: `${notificationSizeREM}rem`,\n    // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)\n    background: theme.palette.themePrimary,\n    border: `0.0625rem solid white`,\n    // border should always be white\n    padding: `${notificationIconPaddingREM}rem`,\n    // positioning to place the badge within the button appropriately.\n    position: 'absolute',\n    top: `-${0.5 - notificationIconPaddingREM / 2}rem`,\n    left: `${0.5 + notificationIconPaddingREM / 2}rem`\n  }\n}));\nconst notificationTextStyles = memoizeFunction((theme: ITheme): IStackStyles => ({\n  root: {\n    color: 'white',\n    fontSize: theme.fonts.xSmall.fontSize\n  }\n}));"]}
+{"version":3,"file":"NotificationIcon.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAS5G;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,CAAC,gBAAwB,EAAe,EAAE;QAC7D,IAAI,gBAAgB,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,yCAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC;YAC5E,OAAO,CACL,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,gBAAc,oBAAoB,GAAG,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,EAAE,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,IAC1G,oBAAoB,CAChB,CACR,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBACO,kDAAkD,EAC7D,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAE,+BAA+B,CAAC,KAAK,CAAC;QAE9C,oBAAC,KAAK,QAAE,YAAY,CAAC,iBAAiB,CAAC,CAAS,CAC1C,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,KAAK,CAAC;AACzC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAE9B,MAAM,+BAA+B,GAAG,eAAe,CACrD,CAAC,KAAa,EAAe,EAAE,CAAC,CAAC;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,GAAG,mBAAmB,KAAK,EAAE,qDAAqD;QAChG,MAAM,EAAE,GAAG,mBAAmB,KAAK;QACnC,QAAQ,EAAE,GAAG,mBAAmB,KAAK,EAAE,sIAAsI;QAC7K,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACtC,MAAM,EAAE,uBAAuB,EAAE,gCAAgC;QACjE,OAAO,EAAE,GAAG,0BAA0B,KAAK;QAE3C,kEAAkE;QAClE,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,IAAI,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;QAClD,IAAI,EAAE,GAAG,GAAG,GAAG,0BAA0B,GAAG,CAAC,KAAK;KACnD;CACF,CAAC,CACH,CAAC;AAEF,MAAM,sBAAsB,GAAG,eAAe,CAC5C,CAAC,KAAa,EAAgB,EAAE,CAAC,CAAC;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;KACtC;CACF,CAAC,CACH,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IIconStyles, IStackStyles, ITheme, memoizeFunction, Stack, useTheme, Text } from '@fluentui/react';\n\n/**\n * @private\n */\nexport type NotificationIconProps = {\n  chatMessagesCount: number;\n  label?: string;\n};\n/**\n * @private\n */\nexport const NotificationIcon = (props: NotificationIconProps): JSX.Element => {\n  const { chatMessagesCount, label } = props;\n  const theme = useTheme();\n  const renderNumber = (numberOfMessages: number): JSX.Element => {\n    if (numberOfMessages < 1) {\n      return <></>;\n    } else {\n      const textNumberOfMessages = numberOfMessages < 9 ? numberOfMessages : '9+';\n      return (\n        <Text role={'status'} aria-label={textNumberOfMessages + (label ?? '')} styles={notificationTextStyles(theme)}>\n          {textNumberOfMessages}\n        </Text>\n      );\n    }\n  };\n\n  return (\n    <Stack\n      data-ui-id=\"call-with-chat-composite-chat-button-unread-icon\"\n      horizontalAlign=\"center\"\n      verticalAlign=\"center\"\n      styles={notificationIconContainerStyles(theme)}\n    >\n      <Stack>{renderNumber(chatMessagesCount)}</Stack>\n    </Stack>\n  );\n};\n\nconst notificationIconPaddingREM = 0.225;\nconst notificationSizeREM = 1;\n\nconst notificationIconContainerStyles = memoizeFunction(\n  (theme: ITheme): IIconStyles => ({\n    root: {\n      borderRadius: `${notificationSizeREM}rem`, // Create a css circle. This should match the height.\n      height: `${notificationSizeREM}rem`,\n      minWidth: `${notificationSizeREM}rem`, // use min-width over width as we want to extend the width of the notification icon when contents is more than one character (e.g. 9+)\n      background: theme.palette.themePrimary,\n      border: `0.0625rem solid white`, // border should always be white\n      padding: `${notificationIconPaddingREM}rem`,\n\n      // positioning to place the badge within the button appropriately.\n      position: 'absolute',\n      top: `-${0.5 - notificationIconPaddingREM / 2}rem`,\n      left: `${0.5 + notificationIconPaddingREM / 2}rem`\n    }\n  })\n);\n\nconst notificationTextStyles = memoizeFunction(\n  (theme: ITheme): IStackStyles => ({\n    root: {\n      color: 'white',\n      fontSize: theme.fonts.xSmall.fontSize\n    }\n  })\n);\n"]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.js

@@ -17,7 +17,7 @@ export const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible) => {
         // Increment unread messages when a new message is received and the chat pane is closed
         const incrementUnreadChatMessagesCount = (event) => {
             if (!isChatPaneVisible && validNewChatMessage(event.message)) {
-                setUnreadChatMessages(prevUnreadChatMessages => {
+                setUnreadChatMessages((prevUnreadChatMessages) => {
                     const newUnreadChatMessages = new Set(prevUnreadChatMessages);
                     newUnreadChatMessages.add(event.message.id);
                     return newUnreadChatMessages;
@@ -27,7 +27,7 @@ export const useUnreadMessagesTracker = (chatAdapter, isChatPaneVisible) => {
         // Decrement unread messages when a message is deleted and the chat pane is closed
         const decrementUnreadChatMessagesCount = (event) => {
             if (!isChatPaneVisible) {
-                setUnreadChatMessages(prevUnreadChatMessages => {
+                setUnreadChatMessages((prevUnreadChatMessages) => {
                     const newUnreadChatMessages = new Set(prevUnreadChatMessages);
                     newUnreadChatMessages.delete(event.message.id);
                     return newUnreadChatMessages;

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUnreadMessagesTracker.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAwB,EAAE,iBAA0B,EAAU,EAAE;IACvG,sCAAsC;IACtC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAc,IAAI,GAAG,EAAE,CAAC,CAAC;IACrF,SAAS,CAAC,GAAG,EAAE;QACb,iDAAiD;QACjD,IAAI,iBAAiB,EAAE,CAAC;YACtB,qBAAqB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QAED,uFAAuF;QACvF,MAAM,gCAAgC,GAAG,CAAC,KAEzC,EAAQ,EAAE;YACT,IAAI,CAAC,iBAAiB,IAAI,mBAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC7D,qBAAqB,CAAC,sBAAsB,CAAC,EAAE;oBAC7C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;oBAC9D,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC5C,OAAO,qBAAqB,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,kFAAkF;QAClF,MAAM,gCAAgC,GAAG,CAAC,KAEzC,EAAQ,EAAE;YACT,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACvB,qBAAqB,CAAC,sBAAsB,CAAC,EAAE;oBAC7C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;oBAC9D,qBAAqB,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC/C,OAAO,qBAAqB,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QACF,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,gCAAgC,CAAC,CAAC;QACpE,WAAW,CAAC,EAAE,CAAC,gBAAgB,EAAE,gCAAgC,CAAC,CAAC;QACnE,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,GAAG,CAAC,iBAAiB,EAAE,gCAAgC,CAAC,CAAC;YACrE,WAAW,CAAC,GAAG,CAAC,gBAAgB,EAAE,gCAAgC,CAAC,CAAC;QACtE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,qBAAqB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAC5D,OAAO,kBAAkB,CAAC,IAAI,CAAC;AACjC,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,OAAoB,EAAW,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useState } from 'react';\nimport { ChatAdapter } from '../../ChatComposite/adapter/ChatAdapter';\nimport { ChatMessage } from '@azure/communication-chat';\n\n/**\n * Used by the CallWithChatComposite to track unread messages for showing as a badge on the Chat Button.\n * @private\n */\nexport const useUnreadMessagesTracker = (chatAdapter: ChatAdapter, isChatPaneVisible: boolean): number => {\n  // Store messageIds of unread messages\n  const [unreadChatMessages, setUnreadChatMessages] = useState<Set<string>>(new Set());\n  useEffect(() => {\n    // Clear unread messages when chat pane is opened\n    if (isChatPaneVisible) {\n      setUnreadChatMessages(new Set());\n      return;\n    }\n\n    // Increment unread messages when a new message is received and the chat pane is closed\n    const incrementUnreadChatMessagesCount = (event: {\n      message: ChatMessage;\n    }): void => {\n      if (!isChatPaneVisible && validNewChatMessage(event.message)) {\n        setUnreadChatMessages(prevUnreadChatMessages => {\n          const newUnreadChatMessages = new Set(prevUnreadChatMessages);\n          newUnreadChatMessages.add(event.message.id);\n          return newUnreadChatMessages;\n        });\n      }\n    };\n\n    // Decrement unread messages when a message is deleted and the chat pane is closed\n    const decrementUnreadChatMessagesCount = (event: {\n      message: ChatMessage;\n    }): void => {\n      if (!isChatPaneVisible) {\n        setUnreadChatMessages(prevUnreadChatMessages => {\n          const newUnreadChatMessages = new Set(prevUnreadChatMessages);\n          newUnreadChatMessages.delete(event.message.id);\n          return newUnreadChatMessages;\n        });\n      }\n    };\n    chatAdapter.on('messageReceived', incrementUnreadChatMessagesCount);\n    chatAdapter.on('messageDeleted', decrementUnreadChatMessagesCount);\n    return () => {\n      chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);\n      chatAdapter.off('messageDeleted', decrementUnreadChatMessagesCount);\n    };\n  }, [chatAdapter, setUnreadChatMessages, isChatPaneVisible]);\n  return unreadChatMessages.size;\n};\n\n/**\n * Helper function to determine if the message in the event is a valid one from a user.\n * Display name is used since system messages will not have one.\n */\nconst validNewChatMessage = (message: ChatMessage): boolean => !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');"]}
+{"version":3,"file":"useUnreadMessagesTracker.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallWithChatComposite/ChatButton/useUnreadMessagesTracker.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI5C;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,WAAwB,EAAE,iBAA0B,EAAU,EAAE;IACvG,sCAAsC;IACtC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAc,IAAI,GAAG,EAAE,CAAC,CAAC;IAErF,SAAS,CAAC,GAAG,EAAE;QACb,iDAAiD;QACjD,IAAI,iBAAiB,EAAE,CAAC;YACtB,qBAAqB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;YACjC,OAAO;QACT,CAAC;QAED,uFAAuF;QACvF,MAAM,gCAAgC,GAAG,CAAC,KAA+B,EAAQ,EAAE;YACjF,IAAI,CAAC,iBAAiB,IAAI,mBAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;gBAC7D,qBAAqB,CAAC,CAAC,sBAAsB,EAAE,EAAE;oBAC/C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;oBAC9D,qBAAqB,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC5C,OAAO,qBAAqB,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,kFAAkF;QAClF,MAAM,gCAAgC,GAAG,CAAC,KAA+B,EAAQ,EAAE;YACjF,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACvB,qBAAqB,CAAC,CAAC,sBAAsB,EAAE,EAAE;oBAC/C,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAC,sBAAsB,CAAC,CAAC;oBAC9D,qBAAqB,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC/C,OAAO,qBAAqB,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,gCAAgC,CAAC,CAAC;QACpE,WAAW,CAAC,EAAE,CAAC,gBAAgB,EAAE,gCAAgC,CAAC,CAAC;QAEnE,OAAO,GAAG,EAAE;YACV,WAAW,CAAC,GAAG,CAAC,iBAAiB,EAAE,gCAAgC,CAAC,CAAC;YACrE,WAAW,CAAC,GAAG,CAAC,gBAAgB,EAAE,gCAAgC,CAAC,CAAC;QACtE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,qBAAqB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAE5D,OAAO,kBAAkB,CAAC,IAAI,CAAC;AACjC,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,OAAoB,EAAW,EAAE,CAC5D,CAAC,CAAC,OAAO,CAAC,iBAAiB,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { useEffect, useState } from 'react';\nimport { ChatAdapter } from '../../ChatComposite/adapter/ChatAdapter';\nimport { ChatMessage } from '@azure/communication-chat';\n\n/**\n * Used by the CallWithChatComposite to track unread messages for showing as a badge on the Chat Button.\n * @private\n */\nexport const useUnreadMessagesTracker = (chatAdapter: ChatAdapter, isChatPaneVisible: boolean): number => {\n  // Store messageIds of unread messages\n  const [unreadChatMessages, setUnreadChatMessages] = useState<Set<string>>(new Set());\n\n  useEffect(() => {\n    // Clear unread messages when chat pane is opened\n    if (isChatPaneVisible) {\n      setUnreadChatMessages(new Set());\n      return;\n    }\n\n    // Increment unread messages when a new message is received and the chat pane is closed\n    const incrementUnreadChatMessagesCount = (event: { message: ChatMessage }): void => {\n      if (!isChatPaneVisible && validNewChatMessage(event.message)) {\n        setUnreadChatMessages((prevUnreadChatMessages) => {\n          const newUnreadChatMessages = new Set(prevUnreadChatMessages);\n          newUnreadChatMessages.add(event.message.id);\n          return newUnreadChatMessages;\n        });\n      }\n    };\n\n    // Decrement unread messages when a message is deleted and the chat pane is closed\n    const decrementUnreadChatMessagesCount = (event: { message: ChatMessage }): void => {\n      if (!isChatPaneVisible) {\n        setUnreadChatMessages((prevUnreadChatMessages) => {\n          const newUnreadChatMessages = new Set(prevUnreadChatMessages);\n          newUnreadChatMessages.delete(event.message.id);\n          return newUnreadChatMessages;\n        });\n      }\n    };\n\n    chatAdapter.on('messageReceived', incrementUnreadChatMessagesCount);\n    chatAdapter.on('messageDeleted', decrementUnreadChatMessagesCount);\n\n    return () => {\n      chatAdapter.off('messageReceived', incrementUnreadChatMessagesCount);\n      chatAdapter.off('messageDeleted', decrementUnreadChatMessagesCount);\n    };\n  }, [chatAdapter, setUnreadChatMessages, isChatPaneVisible]);\n\n  return unreadChatMessages.size;\n};\n\n/**\n * Helper function to determine if the message in the event is a valid one from a user.\n * Display name is used since system messages will not have one.\n */\nconst validNewChatMessage = (message: ChatMessage): boolean =>\n  !!message.senderDisplayName && (message.type === 'text' || message.type === 'html');\n"]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/Strings.js.map

@@ -1 +1 @@
-{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../preprocess-dist/react-composites/src/composites/CallWithChatComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Strings used by the {@link CallWithChatComposite} directly.\n *\n * This strings are in addition to those used by the components from the component library.\n *\n * @public\n */\nexport interface CallWithChatCompositeStrings {\n  /**\n   * {@link CallWithChatComposite} control bar People button label\n   */\n  peopleButtonLabel: string;\n  /**\n   * {@link CallWithChatComposite} control bar People button label when checked\n   */\n  selectedPeopleButtonLabel: string;\n  /**\n   * {@link CallWithChatComposite} control bar People button ToolTipContent\n   */\n  peopleButtonTooltipOpen: string;\n  /**\n   * {@link CallWithChatComposite} control bar People button ToolTipContent\n   */\n  peopleButtonTooltipClose: string;\n  /**\n   * {@link CallWithChatComposite} control bar Chat button label.\n   */\n  chatButtonLabel: string;\n  /**\n   * {@Link CallWithChatComposite} control bar Chat button ToolTipContent.\n   */\n  chatButtonTooltipOpen: string;\n  /**\n   * {@Link CallWithChatComposite} control bar Chat button ToolTipContent.\n   */\n  chatButtonTooltipClose: string;\n  /**\n   * {@link CallWithChatComposite} control bar Chat button enhanced tooltip string.\n   */\n  chatButtonTooltipClosedWithMessageCount: string;\n  /**\n   * Title for the audio device selection sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true` and when no speakers are available.\n   */\n  moreDrawerAudioDeviceMenuTitle?: string;\n  /**\n   * Title for the microphone selection sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true` and when speakers are available.\n   */\n  moreDrawerMicrophoneMenuTitle: string;\n  /**\n   * Title for the speaker selection sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true`.\n   */\n  moreDrawerSpeakerMenuTitle: string;\n  /* @conditional-compile-remove(close-captions) */\n  /**\n   * Title for the captions sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true`.\n   */\n  moreDrawerCaptionsMenuTitle: string;\n  /* @conditional-compile-remove(close-captions) */\n  /**\n   * Title for the spoken language sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true`.\n   */\n  moreDrawerSpokenLanguageMenuTitle: string;\n  /* @conditional-compile-remove(close-captions) */\n  /**\n   * Title for the caption language sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true`.\n   */\n  moreDrawerCaptionLanguageMenuTitle: string;\n  /* @conditional-compile-remove(gallery-layouts) */\n  /**\n   * Title for the gallery options sub-menu in the more button drawer.\n   */\n  moreDrawerGalleryOptionsMenuTitle: string;\n  /**\n   * {@Link CallWithChatComposite} control bar More button label\n   */\n  moreDrawerButtonLabel: string;\n  /**\n   * {@Link CallWithChatComposite} control bar More button tooltip content\n   */\n  moreDrawerButtonTooltip: string;\n  /**\n   * Side pane People section Title.\n   */\n  peoplePaneTitle: string;\n  /**\n   * Side pane People section subheader.\n   */\n  peoplePaneSubTitle: string;\n  /**\n   * Side pane Chat screen title.\n   */\n  chatPaneTitle: string;\n  /**\n   * New Message label for chat button with notification icon component.\n   */\n  chatButtonNewMessageNotificationLabel: string;\n  /**\n   * Aria label for the picture in picture in picture tile that.\n   * This feature currently only shows on mobileView when the chat or people pane is expanded.\n   * @remarks\n   * This component displays the local and most-dominant remote participant and when clicked\n   * returns the user to the call screen.\n   */\n  pictureInPictureTileAriaLabel: string;\n  /**\n   * Label for menu item to remove participant\n   */\n  removeMenuLabel: string;\n  /**\n   * Label for button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for button to open dialpad\n   */\n  openDialpadButtonLabel: string;\n  /**\n   * Label for SidePaneHeader dismiss button\n   */\n  dismissSidePaneButtonLabel?: string;\n  /**\n   * Aria Description string for return to call button\n   */\n  returnToCallButtonAriaDescription?: string;\n  /**\n   * Aria label string for return to call back button\n   */\n  returnToCallButtonAriaLabel?: string;\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for add people dropdown\n   */\n  peoplePaneAddPeopleButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for button to start a call\n   */\n  dialpadStartCallButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Title for dialpad Modal\n   */\n  dialpadModalTitle: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Aria Label for dialpad Modal\n   */\n  dialpadModalAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Aria Label for dialpad Modal close button\n   */\n  dialpadCloseModalButtonAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Placeholder text for dtmf dialpad\n   */\n  dtmfDialpadPlaceholderText: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for the button to open dtmf dialpad\n   */\n  openDtmfDialpadLabel: string;\n  /**\n   * aria label for when the invite link has been actioned\n   */\n  copyInviteLinkActionedAriaLabel: string;\n}"]}
+{"version":3,"file":"Strings.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/Strings.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/**\n * Strings used by the {@link CallWithChatComposite} directly.\n *\n * This strings are in addition to those used by the components from the component library.\n *\n * @public\n */\nexport interface CallWithChatCompositeStrings {\n  /**\n   * {@link CallWithChatComposite} control bar People button label\n   */\n  peopleButtonLabel: string;\n  /**\n   * {@link CallWithChatComposite} control bar People button label when checked\n   */\n  selectedPeopleButtonLabel: string;\n  /**\n   * {@link CallWithChatComposite} control bar People button ToolTipContent\n   */\n  peopleButtonTooltipOpen: string;\n  /**\n   * {@link CallWithChatComposite} control bar People button ToolTipContent\n   */\n  peopleButtonTooltipClose: string;\n  /**\n   * {@link CallWithChatComposite} control bar Chat button label.\n   */\n  chatButtonLabel: string;\n  /**\n   * {@Link CallWithChatComposite} control bar Chat button ToolTipContent.\n   */\n  chatButtonTooltipOpen: string;\n  /**\n   * {@Link CallWithChatComposite} control bar Chat button ToolTipContent.\n   */\n  chatButtonTooltipClose: string;\n  /**\n   * {@link CallWithChatComposite} control bar Chat button enhanced tooltip string.\n   */\n  chatButtonTooltipClosedWithMessageCount: string;\n  /**\n   * Title for the audio device selection sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true` and when no speakers are available.\n   */\n  moreDrawerAudioDeviceMenuTitle?: string;\n  /**\n   * Title for the microphone selection sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true` and when speakers are available.\n   */\n  moreDrawerMicrophoneMenuTitle: string;\n  /**\n   * Title for the speaker selection sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true`.\n   */\n  moreDrawerSpeakerMenuTitle: string;\n  /* @conditional-compile-remove(close-captions) */\n  /**\n   * Title for the captions sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true`.\n   */\n  moreDrawerCaptionsMenuTitle: string;\n  /* @conditional-compile-remove(close-captions) */\n  /**\n   * Title for the spoken language sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true`.\n   */\n  moreDrawerSpokenLanguageMenuTitle: string;\n  /* @conditional-compile-remove(close-captions) */\n  /**\n   * Title for the caption language sub-menu in more button drawer.\n   *\n   * Only used with `mobileView` set to `true`.\n   */\n  moreDrawerCaptionLanguageMenuTitle: string;\n  /* @conditional-compile-remove(gallery-layouts) */\n  /**\n   * Title for the gallery options sub-menu in the more button drawer.\n   */\n  moreDrawerGalleryOptionsMenuTitle: string;\n  /**\n   * {@Link CallWithChatComposite} control bar More button label\n   */\n  moreDrawerButtonLabel: string;\n  /**\n   * {@Link CallWithChatComposite} control bar More button tooltip content\n   */\n  moreDrawerButtonTooltip: string;\n  /**\n   * Side pane People section Title.\n   */\n  peoplePaneTitle: string;\n  /**\n   * Side pane People section subheader.\n   */\n  peoplePaneSubTitle: string;\n  /**\n   * Side pane Chat screen title.\n   */\n  chatPaneTitle: string;\n  /**\n   * New Message label for chat button with notification icon component.\n   */\n  chatButtonNewMessageNotificationLabel: string;\n  /**\n   * Aria label for the picture in picture in picture tile that.\n   * This feature currently only shows on mobileView when the chat or people pane is expanded.\n   * @remarks\n   * This component displays the local and most-dominant remote participant and when clicked\n   * returns the user to the call screen.\n   */\n  pictureInPictureTileAriaLabel: string;\n  /**\n   * Label for menu item to remove participant\n   */\n  removeMenuLabel: string;\n  /**\n   * Label for button to copy invite link\n   */\n  copyInviteLinkButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for button to open dialpad\n   */\n  openDialpadButtonLabel: string;\n  /**\n   * Label for SidePaneHeader dismiss button\n   */\n  dismissSidePaneButtonLabel?: string;\n  /**\n   * Aria Description string for return to call button\n   */\n  returnToCallButtonAriaDescription?: string;\n  /**\n   * Aria label string for return to call back button\n   */\n  returnToCallButtonAriaLabel?: string;\n\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for add people dropdown\n   */\n  peoplePaneAddPeopleButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for button to start a call\n   */\n  dialpadStartCallButtonLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Title for dialpad Modal\n   */\n  dialpadModalTitle: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Aria Label for dialpad Modal\n   */\n  dialpadModalAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Aria Label for dialpad Modal close button\n   */\n  dialpadCloseModalButtonAriaLabel: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Placeholder text for dtmf dialpad\n   */\n  dtmfDialpadPlaceholderText: string;\n  /* @conditional-compile-remove(PSTN-calls) */\n  /**\n   * Label for the button to open dtmf dialpad\n   */\n  openDtmfDialpadLabel: string;\n  /**\n   * aria label for when the invite link has been actioned\n   */\n  copyInviteLinkActionedAriaLabel: string;\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.d.ts

@@ -1,15 +1,16 @@
 import { AudioDeviceInfo, Call, CallAgent, GroupCallLocator, PermissionConstraints, PropertyChangedEvent, TeamsMeetingLinkLocator, StartCallOptions, VideoDeviceInfo } from '@azure/communication-calling';
+import { Reaction } from '@azure/communication-calling';
 import { StartCaptionsOptions } from '@azure/communication-calling';
-import { AddPhoneNumberOptions, DtmfTone } from '@azure/communication-calling';
+import { AddPhoneNumberOptions } from '@azure/communication-calling';
+import { DtmfTone } from '@azure/communication-calling';
 import { CreateVideoStreamViewResult, VideoStreamOptions } from "../../../../../react-components/src";
-import { AttachmentDownloadResult } from "../../../../../react-components/src";
 import { AttachmentMetadata } from "../../../../../react-components/src";
 import { ParticipantsJoinedListener, ParticipantsLeftListener, IsMutedChangedListener, CallIdChangedListener, IsLocalScreenSharingActiveChangedListener, DisplayNameChangedListener, IsSpeakingChangedListener, CallAdapter, CallEndedListener } from '../../CallComposite';
 import { MessageReceivedListener, MessageReadListener, ChatAdapter, ParticipantsRemovedListener, ParticipantsAddedListener, MessageEditedListener, MessageDeletedListener } from '../../ChatComposite';
+import { ResourceDetails } from '../../ChatComposite';
 import { FileUploadManager } from '../../ChatComposite';
 import { CallWithChatAdapter } from './CallWithChatAdapter';
 import { CallWithChatAdapterState } from '../state/CallWithChatAdapterState';
-import { AzureCommunicationChatAdapterOptions } from '../../ChatComposite/adapter/AzureCommunicationChatAdapter';
 import { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';
 import { CommunicationIdentifier, PhoneNumberIdentifier } from '@azure/communication-common';
 import { AdapterError } from '../../common/adapters';
@@ -18,11 +19,13 @@ import { CallAdapterLocator } from '../../CallComposite/adapter/AzureCommunicati
 import { StatefulCallClient } from "../../../../../calling-stateful-client/src";
 import { StatefulChatClient } from "../../../../../chat-stateful-client/src";
 import { ChatThreadClient } from '@azure/communication-chat';
-import { JoinCallOptions } from '../../CallComposite/adapter/CallAdapter';
+import { JoinCallOptions, StartCallIdentifier } from '../../CallComposite/adapter/CallAdapter';
 import { AzureCommunicationCallAdapterOptions } from '../../CallComposite/adapter/AzureCommunicationCallAdapter';
 import { IsCaptionsActiveChangedListener, CaptionsReceivedListener, IsCaptionLanguageChangedListener, IsSpokenLanguageChangedListener } from '../../CallComposite/adapter/CallAdapter';
 import { CapabilitiesChangedListener } from '../../CallComposite/adapter/CallAdapter';
+import { SpotlightChangedListener } from '../../CallComposite/adapter/CallAdapter';
 import { VideoBackgroundImage, VideoBackgroundEffect } from '../../CallComposite';
+import { CallSurvey, CallSurveyResponse } from '@azure/communication-calling';
 /**
  * CallWithChat adapter backed by Azure Communication Services.
  * Created for easy use with the {@link CallWithChatComposite}.
@@ -40,7 +43,9 @@ export declare class AzureCommunicationCallWithChatAdapter implements CallWithCh
     /** Leave current Call. */
     leaveCall(forEveryone?: boolean): Promise<void>;
     /** Start a new Call. */
-    startCall(participants: string[] | /* @conditional-compile-remove(PSTN-calls) */ CommunicationIdentifier[], options?: StartCallOptions): Call | undefined;
+    startCall(participants: string[], options?: StartCallOptions): Call | undefined;
+    /** Start a new Call. */
+    startCall(participants: StartCallIdentifier[], options?: StartCallOptions): Call | undefined;
     /**
      * Subscribe to state change events.
      * @param handler - handler to be called when the state changes. This is passed the new state.
@@ -85,6 +90,7 @@ export declare class AzureCommunicationCallWithChatAdapter implements CallWithCh
     raiseHand(): Promise<void>;
     /** Lower hand for local user. */
     lowerHand(): Promise<void>;
+    onReactionClick(reaction: Reaction): Promise<void>;
     /** Create a stream view for a remote participants video feed. */
     createStreamView(remoteUserId?: string, options?: VideoStreamOptions): Promise<void | CreateVideoStreamViewResult>;
     /** Dispose of a created stream view of a remote participants video feed. */
@@ -118,9 +124,8 @@ export declare class AzureCommunicationCallWithChatAdapter implements CallWithCh
     updateFileUploadProgress: (id: string, progress: number) => void;
     updateFileUploadErrorMessage: (id: string, errorMessage: string) => void;
     updateFileUploadMetadata: (id: string, metadata: AttachmentMetadata) => void;
-    downloadAttachments(options: {
-        attachmentUrls: Record<string, string>;
-    }): Promise<AttachmentDownloadResult[]>;
+    downloadResourceToCache(resourceDetails: ResourceDetails): Promise<void>;
+    removeResourceFromCache(resourceDetails: ResourceDetails): void;
     holdCall(): Promise<void>;
     resumeCall(): Promise<void>;
     addParticipant(participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions): Promise<void>;
@@ -135,6 +140,9 @@ export declare class AzureCommunicationCallWithChatAdapter implements CallWithCh
     stopVideoBackgroundEffects(): Promise<void>;
     updateBackgroundPickerImages(backgroundImages: VideoBackgroundImage[]): void;
     updateSelectedVideoBackgroundEffect(selectedVideoBackground: VideoBackgroundEffect): void;
+    submitSurvey(survey: CallSurvey): Promise<CallSurveyResponse | undefined>;
+    startSpotlight(userIds?: string[]): Promise<void>;
+    stopSpotlight(userIds?: string[]): Promise<void>;
     on(event: 'callParticipantsJoined', listener: ParticipantsJoinedListener): void;
     on(event: 'callParticipantsLeft', listener: ParticipantsLeftListener): void;
     on(event: 'callEnded', listener: CallEndedListener): void;
@@ -159,6 +167,7 @@ export declare class AzureCommunicationCallWithChatAdapter implements CallWithCh
     on(event: 'isCaptionLanguageChanged', listener: IsCaptionLanguageChangedListener): void;
     on(event: 'isSpokenLanguageChanged', listener: IsSpokenLanguageChangedListener): void;
     on(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
+    on(event: 'spotlightChanged', listener: SpotlightChangedListener): void;
     off(event: 'callParticipantsJoined', listener: ParticipantsJoinedListener): void;
     off(event: 'callParticipantsLeft', listener: ParticipantsLeftListener): void;
     off(event: 'callEnded', listener: CallEndedListener): void;
@@ -183,6 +192,7 @@ export declare class AzureCommunicationCallWithChatAdapter implements CallWithCh
     off(event: 'isCaptionLanguageChanged', listener: IsCaptionLanguageChangedListener): void;
     off(event: 'isSpokenLanguageChanged', listener: IsSpokenLanguageChangedListener): void;
     off(event: 'capabilitiesChanged', listener: CapabilitiesChangedListener): void;
+    off(event: 'spotlightChanged', listener: SpotlightChangedListener): void;
 }
 /**
  * Arguments for use in {@link createAzureCommunicationCallWithChatAdapter} to join a Call with an associated Chat thread.
@@ -243,7 +253,6 @@ export type AzureCommunicationCallWithChatAdapterFromClientArgs = {
     chatClient: StatefulChatClient;
     chatThreadClient: ChatThreadClient;
     callAdapterOptions?: AzureCommunicationCallAdapterOptions;
-    chatAdapterOptions?: AzureCommunicationChatAdapterOptions;
 };
 /**
  * Create a {@link CallWithChatAdapter} using the provided {@link StatefulChatClient} and {@link StatefulCallClient}.
@@ -254,7 +263,7 @@ export type AzureCommunicationCallWithChatAdapterFromClientArgs = {
  *
  * @public
  */
-export declare const createAzureCommunicationCallWithChatAdapterFromClients: ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, callAdapterOptions, chatAdapterOptions }: AzureCommunicationCallWithChatAdapterFromClientArgs) => Promise<CallWithChatAdapter>;
+export declare const createAzureCommunicationCallWithChatAdapterFromClients: ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, callAdapterOptions }: AzureCommunicationCallWithChatAdapterFromClientArgs) => Promise<CallWithChatAdapter>;
 /**
  * Create a {@link CallWithChatAdapter} from the underlying adapters.
  *

package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js

@@ -123,6 +123,8 @@ export class AzureCommunicationCallWithChatAdapter {
         this.raiseHand.bind(this);
         /* @conditional-compile-remove(raise-hand) */
         this.lowerHand.bind(this);
+        /* @conditional-compile-remove(reaction) */
+        this.onReactionClick.bind(this);
         this.removeParticipant.bind(this);
         this.createStreamView.bind(this);
         this.disposeStreamView.bind(this);
@@ -151,19 +153,20 @@ export class AzureCommunicationCallWithChatAdapter {
         /* @conditional-compile-remove(file-sharing) */
         this.updateFileUploadMetadata = this.updateFileUploadMetadata.bind(this);
         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-        this.downloadAttachments = this.downloadAttachments.bind(this);
+        this.downloadResourceToCache = this.downloadResourceToCache.bind(this);
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        this.removeResourceFromCache = this.removeResourceFromCache.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.holdCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.resumeCall.bind(this);
         /* @conditional-compile-remove(PSTN-calls) */
         this.addParticipant.bind(this);
-        /* @conditional-compile-remove(PSTN-calls) */
+        /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
         this.sendDtmfTone.bind(this);
         /* @conditional-compile-remove(unsupported-browser) */
         this.allowUnsupportedBrowserVersion.bind(this);
-        /* @conditional-compile-remove(close-captions) */
-        {
+        /* @conditional-compile-remove(close-captions) */ {
             this.startCaptions.bind(this);
             this.stopCaptions.bind(this);
             this.setSpokenLanguage.bind(this);
@@ -194,10 +197,15 @@ export class AzureCommunicationCallWithChatAdapter {
     }
     /** Start a new Call. */
     startCall(participants, options) {
-        let communicationParticipants = participants;
-        /* @conditional-compile-remove(PSTN-calls) */
-        communicationParticipants = participants.map(_toCommunicationIdentifier);
-        return this.callAdapter.startCall(communicationParticipants, options);
+        if (participants.length === 0) {
+            throw new Error('At least one participant is required to start a call');
+        }
+        if (typeof participants[0] === 'string') {
+            return this.callAdapter.startCall(participants, options);
+        }
+        else {
+            return this.callAdapter.startCall(participants, options);
+        }
     }
     /**
      * Subscribe to state change events.
@@ -323,6 +331,12 @@ export class AzureCommunicationCallWithChatAdapter {
             yield this.callAdapter.lowerHand();
         });
     }
+    /* @conditional-compile-remove(reaction) */
+    onReactionClick(reaction) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.callAdapter.onReactionClick(reaction);
+        });
+    }
     /** Create a stream view for a remote participants video feed. */
     createStreamView(remoteUserId, options) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -386,7 +400,8 @@ export class AzureCommunicationCallWithChatAdapter {
     /** Update an existing message. */
     updateMessage(messageId, content, metadata, options) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.chatAdapter.updateMessage(messageId, content, metadata, /* @conditional-compile-remove(file-sharing) */ options);
+            return yield this.chatAdapter.updateMessage(messageId, content, metadata, 
+            /* @conditional-compile-remove(file-sharing) */ options);
         });
     }
     /** Delete an existing message. */
@@ -396,11 +411,15 @@ export class AzureCommunicationCallWithChatAdapter {
         });
     }
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-    downloadAttachments(options) {
+    downloadResourceToCache(resourceDetails) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.chatAdapter.downloadAttachments(options);
+            this.chatAdapter.downloadResourceToCache(resourceDetails);
         });
     }
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    removeResourceFromCache(resourceDetails) {
+        this.chatAdapter.removeResourceFromCache(resourceDetails);
+    }
     /* @conditional-compile-remove(PSTN-calls) */
     holdCall() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -424,7 +443,7 @@ export class AzureCommunicationCallWithChatAdapter {
             }
         });
     }
-    /* @conditional-compile-remove(PSTN-calls) */
+    /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(dtmf-dialer) */
     sendDtmfTone(dtmfTone) {
         return __awaiter(this, void 0, void 0, function* () {
             return yield this.callAdapter.sendDtmfTone(dtmfTone);
@@ -478,6 +497,24 @@ export class AzureCommunicationCallWithChatAdapter {
     updateSelectedVideoBackgroundEffect(selectedVideoBackground) {
         return this.callAdapter.updateSelectedVideoBackgroundEffect(selectedVideoBackground);
     }
+    /* @conditional-compile-remove(end-of-call-survey) */
+    submitSurvey(survey) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.callAdapter.submitSurvey(survey);
+        });
+    }
+    /* @conditional-compile-remove(spotlight) */
+    startSpotlight(userIds) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.callAdapter.startSpotlight(userIds);
+        });
+    }
+    /* @conditional-compile-remove(spotlight) */
+    stopSpotlight(userIds) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.callAdapter.stopSpotlight(userIds);
+        });
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     on(event, listener) {
         switch (event) {
@@ -658,7 +695,9 @@ export const createAzureCommunicationCallWithChatAdapter = ({ userId, displayNam
         /* @conditional-compile-remove(video-background-effects) */ options: callAdapterOptions,
         telemetryImplementationHint: 'CallWithChat'
     });
-    const threadId = isTeamsMeetingLinkLocator(locator) ? getChatThreadFromTeamsLink(locator.meetingLink) : locator.chatThreadId;
+    const threadId = isTeamsMeetingLinkLocator(locator)
+        ? getChatThreadFromTeamsLink(locator.meetingLink)
+        : locator.chatThreadId;
     const createChatAdapterPromise = _createAzureCommunicationChatAdapterInner(endpoint, userId, displayName, credential, threadId, 'CallWithChat');
     const [callAdapter, chatAdapter] = yield Promise.all([createCallAdapterPromise, createChatAdapterPromise]);
     return new AzureCommunicationCallWithChatAdapter(callAdapter, chatAdapter);
@@ -677,7 +716,26 @@ export const createAzureCommunicationCallWithChatAdapter = ({ userId, displayNam
  *
  * @public
  */
-export const useAzureCommunicationCallWithChatAdapter = (args, afterCreate, beforeDispose) => {
+export const useAzureCommunicationCallWithChatAdapter = (
+/**
+ * Arguments to be passed to {@link createAzureCommunicationCallWithChatAdapter}.
+ *
+ * Allows arguments to be undefined so that you can respect the rule-of-hooks and pass in arguments
+ * as they are created. The adapter is only created when all arguments are defined.
+ */
+args, 
+/**
+ * Optional callback to modify the adapter once it is created.
+ *
+ * If set, must return the modified adapter.
+ */
+afterCreate, 
+/**
+ * Optional callback called before the adapter is disposed.
+ *
+ * This is useful for clean up tasks, e.g., leaving any ongoing calls.
+ */
+beforeDispose) => {
     const { credential, displayName, endpoint, locator, userId, 
     /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, 
     /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions } = args;
@@ -733,7 +791,18 @@ export const useAzureCommunicationCallWithChatAdapter = (args, afterCreate, befo
         }))();
     }, 
     // Explicitly list all arguments so that caller doesn't have to memoize the `args` object.
-    [adapterRef, afterCreateRef, /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId, beforeDisposeRef, credential, displayName, endpoint, locator, userId, /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions]);
+    [
+        adapterRef,
+        afterCreateRef,
+        /* @conditional-compile-remove(PSTN-calls) */ alternateCallerId,
+        beforeDisposeRef,
+        credential,
+        displayName,
+        endpoint,
+        locator,
+        userId,
+        /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions
+    ]);
     // Dispose any existing adapter when the component unmounts.
     useEffect(() => {
         return () => {
@@ -761,11 +830,11 @@ export const useAzureCommunicationCallWithChatAdapter = (args, afterCreate, befo
  */
 export const createAzureCommunicationCallWithChatAdapterFromClients = ({ callClient, callAgent, callLocator, chatClient, chatThreadClient, 
 /* @conditional-compile-remove(video-background-effects) */
-callAdapterOptions, 
-/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-chatAdapterOptions }) => __awaiter(void 0, void 0, void 0, function* () {
-    const createCallAdapterPromise = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, callLocator, /* @conditional-compile-remove(video-background-effects) */ callAdapterOptions);
-    const createChatAdapterPromise = createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient, /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ chatAdapterOptions);
+callAdapterOptions }) => __awaiter(void 0, void 0, void 0, function* () {
+    const createCallAdapterPromise = createAzureCommunicationCallAdapterFromClient(callClient, callAgent, callLocator, 
+    /* @conditional-compile-remove(video-background-effects) */
+    callAdapterOptions);
+    const createChatAdapterPromise = createAzureCommunicationChatAdapterFromClient(chatClient, chatThreadClient);
     const [callAdapter, chatAdapter] = yield Promise.all([createCallAdapterPromise, createChatAdapterPromise]);
     return new AzureCommunicationCallWithChatAdapter(callAdapter, chatAdapter);
 });