@azure/communication-react 1.9.0-alpha-202310130013 → 1.9.0-alpha-202310140012

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.9.0-alpha-202310130013';
+module.exports = '1.9.0-alpha-202310140012';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map

@@ -1 +1 @@
-{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.9.0-alpha-202310130013';\n"]}
+{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.9.0-alpha-202310140012';\n"]}

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

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import { concatStyleSets, Icon, mergeStyles } from '@fluentui/react';
+import { concatStyleSets, Icon, mergeStyles, Stack } from '@fluentui/react';
 import { ChatMyMessage } from '@fluentui-contrib/react-chat';
 import { mergeClasses } from '@fluentui/react-components';
 import { _formatString } from "../../../../acs-ui-common/src";
@@ -10,7 +10,7 @@ import { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from
 import { InputBoxButton, InputBoxComponent } from '../InputBoxComponent';
 import { useChatMyMessageStyles } from '../styles/MessageThread.styles';
 import { _FileUploadCards } from '../FileUploadCards';
-import { chatMessageFailedTagStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';
+import { chatMessageFailedTagStyle, chatMessageFailedTagStackItemStyle, editChatMessageButtonsStackStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';
 const MAXIMUM_LENGTH_OF_MESSAGE = 8000;
 const onRenderCancelIcon = (color) => {
     const className = mergeStyles(inputBoxIcon, { color });
@@ -63,7 +63,7 @@ export const ChatMessageComponentAsEditBox = (props) => {
     }, [attachedFilesMetadata]);
     const getContent = () => {
         return (React.createElement(React.Fragment, null,
-            React.createElement(InputBoxComponent, { inlineChildren: false, id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
+            React.createElement(InputBoxComponent, { id: 'editbox', textFieldRef: editTextFieldRef, inputClassName: editBoxStyle, placeholderText: strings.editBoxPlaceholderText, textValue: textValue, onChange: setText, onKeyDown: (ev) => {
                     if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {
                         ev.stopPropagation();
                     }
@@ -74,7 +74,10 @@ export const ChatMessageComponentAsEditBox = (props) => {
                         });
                 }, supportNewline: false, maxLength: MAXIMUM_LENGTH_OF_MESSAGE, errorMessage: textTooLongMessage, styles: editBoxStyles, 
                 /* @conditional-compile-remove(mention) */
-                mentionLookupOptions: mentionLookupOptions },
+                mentionLookupOptions: mentionLookupOptions }),
+            React.createElement(Stack, { horizontal: true, horizontalAlign: "end", verticalAlign: "start", className: editChatMessageButtonsStackStyle, tokens: { childrenGap: '0.25rem' } },
+                message.failureReason && (React.createElement(Stack.Item, { grow: true, className: chatMessageFailedTagStackItemStyle },
+                    React.createElement("div", { className: chatMessageFailedTagStyle(theme) }, message.failureReason))),
                 React.createElement(InputBoxButton, { className: editingButtonStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
                         onCancel && onCancel(message.messageId);
                     }, id: 'dismissIconWrapper' }),
@@ -85,7 +88,6 @@ export const ChatMessageComponentAsEditBox = (props) => {
                             });
                         e.stopPropagation();
                     }, id: 'submitIconWrapper' })),
-            message.failureReason && (React.createElement("div", { className: mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' }) }, message.failureReason)),
             onRenderFileUploads()));
     };
     const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);

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 } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\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 { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport { chatMessageFailedTagStyle, useChatMessageEditContainerStyles } from '../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../MentionPopover';\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  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\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  /* @conditional-compile-remove(mention) */\n  const { mentionLookupOptions } = props;\n\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  const editContainerStyles = useChatMessageEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): 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    (isHover: boolean) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary, theme.palette.accent]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    (isHover: boolean) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary, theme.palette.accent]\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 &&\n      attachedFilesMetadata.length > 0 && (\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  const getContent = (): JSX.Element => {\n    return (\n      <>\n        <InputBoxComponent\n          inlineChildren={false}\n          id={'editbox'}\n          textFieldRef={editTextFieldRef}\n          inputClassName={editBoxStyle}\n          placeholderText={strings.editBoxPlaceholderText}\n          textValue={textValue}\n          onChange={setText}\n          onKeyDown={(ev) => {\n            if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n              ev.stopPropagation();\n            }\n          }}\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          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\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      </>\n    );\n  };\n\n  const bodyClassName = mergeClasses(\n    editContainerStyles.body,\n    message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault\n  );\n  return (\n    <ChatMyMessage\n      root={{\n        className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)\n      }}\n      body={{\n        className: bodyClassName\n      }}\n    >\n      {getContent()}\n    </ChatMyMessage>\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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAc,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxF,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,sCAAgC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3G,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EACL,yBAAyB,EACzB,kCAAkC,EAClC,gCAAgC,EAChC,iCAAiC,EAClC,MAAM,uCAAuC,CAAC;AAI/C,MAAM,yBAAyB,GAAG,IAAI,CAAC;AAEvC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAe,EAAE;IACxD,MAAM,SAAS,GAAG,WAAW,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACvD,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACnE,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAe,EAAE;IACxD,MAAM,SAAS,GAAG,WAAW,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACvD,OAAO,oBAAC,IAAI,IAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;AACnE,CAAC,CAAC;AAoBF;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,KAAyC,EAAe,EAAE;IACtG,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IACvD,0CAA0C;IAC1C,MAAM,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAEvC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;IAE1E,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC,CAAC;IACnH,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,eAAe,CAAC,SAAS,EAAE,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,EAAE,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,YAAY,KAAK,IAAI,CAAC;IAE5C,MAAM,mBAAmB,GAAG,iCAAiC,EAAE,CAAC;IAChE,MAAM,mBAAmB,GAAG,sBAAsB,EAAE,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,gBAAgB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,CAAC,KAA+D,EAAE,QAAiB,EAAQ,EAAE;QAC3G,YAAY,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GACtB,YAAY,KAAK,UAAU;QACzB,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,WAAW,EAAE,GAAG,yBAAyB,EAAE,EAAE,CAAC;QAC1F,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,OAAgB,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,EACzG,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CACvD,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,OAAgB,EAAE,EAAE,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,EACzG,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CACvD,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,eAAe,CAAC,eAAe,EAAE,EAAE,SAAS,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;IACtG,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;IAEjC,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,OAAO,CACL,CAAC,CAAC,qBAAqB;YACvB,qBAAqB,CAAC,MAAM,GAAG,CAAC,IAAI,CAClC,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;YAC/B,oBAAC,gBAAgB,IACf,iBAAiB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACvD,EAAE,EAAE,IAAI,CAAC,IAAI;oBACb,QAAQ,EAAE,IAAI,CAAC,IAAI;oBACnB,QAAQ,EAAE,CAAC;iBACZ,CAAC,CAAC,EACH,kBAAkB,EAAE,CAAC,MAAM,EAAE,EAAE;oBAC7B,wBAAwB,CAAC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;gBAC1F,CAAC,GACD,CACE,CACP,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,MAAM,UAAU,GAAG,GAAgB,EAAE;QACnC,OAAO,CACL;YACE,oBAAC,iBAAiB,IAChB,EAAE,EAAE,SAAS,EACb,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EAAE,YAAY,EAC5B,eAAe,EAAE,OAAO,CAAC,sBAAsB,EAC/C,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE;oBAChB,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE;wBAClD,EAAE,CAAC,eAAe,EAAE,CAAC;qBACtB;gBACH,CAAC,EACD,cAAc,EAAE,GAAG,EAAE;oBACnB,aAAa;wBACX,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE;4BACpC,qBAAqB;yBACtB,CAAC,CAAC;gBACP,CAAC,EACD,cAAc,EAAE,KAAK,EACrB,SAAS,EAAE,yBAAyB,EACpC,YAAY,EAAE,kBAAkB,EAChC,MAAM,EAAE,aAAa;gBACrB,0CAA0C;gBAC1C,oBAAoB,EAAE,oBAAoB,GACvB;YACrB,oBAAC,KAAK,IACJ,UAAU,QACV,eAAe,EAAC,KAAK,EACrB,aAAa,EAAC,OAAO,EACrB,SAAS,EAAE,gCAAgC,EAC3C,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;gBAEjC,OAAO,CAAC,aAAa,IAAI,CACxB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,QAAC,SAAS,EAAE,kCAAkC;oBAC5D,6BAAK,SAAS,EAAE,yBAAyB,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,aAAa,CAAO,CACpE,CACd;gBACD,oBAAC,cAAc,IACb,SAAS,EAAE,kBAAkB,EAC7B,SAAS,EAAE,OAAO,CAAC,mBAAmB,EACtC,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAC3C,YAAY,EAAE,wBAAwB,EACtC,OAAO,EAAE,GAAG,EAAE;wBACZ,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;oBAC1C,CAAC,EACD,EAAE,EAAE,oBAAoB,GACxB;gBACF,oBAAC,cAAc,IACb,SAAS,EAAE,kBAAkB,EAC7B,SAAS,EAAE,OAAO,CAAC,mBAAmB,EACtC,cAAc,EAAE,OAAO,CAAC,mBAAmB,EAC3C,YAAY,EAAE,wBAAwB,EACtC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,aAAa;4BACX,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAE;gCACpC,qBAAqB;6BACtB,CAAC,CAAC;wBACL,CAAC,CAAC,eAAe,EAAE,CAAC;oBACtB,CAAC,EACD,EAAE,EAAE,mBAAmB,GACvB,CACI;YACP,mBAAmB,EAAE,CACrB,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,YAAY,CAChC,mBAAmB,CAAC,IAAI,EACxB,OAAO,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,CACtG,CAAC;IACF,OAAO,CACL,oBAAC,aAAa,IACZ,IAAI,EAAE;YACJ,SAAS,EAAE,YAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,mBAAmB,CAAC,IAAI,CAAC;SAC5E,EACD,IAAI,EAAE;YACJ,SAAS,EAAE,aAAa;SACzB,IAEA,UAAU,EAAE,CACC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,WAAmB,EAAW,EAAE,CAAC,WAAW,CAAC,MAAM,GAAG,yBAAyB,CAAC;AAC1G,MAAM,cAAc,GAAG,CAAC,WAAmB,EAAE,qBAAqC,EAAW,EAAE,CAC7F,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,IAAI,qBAAqB,CAAC,MAAM,KAAK,CAAC,CAAC;AACxE,MAAM,eAAe,GAAG,CAAC,WAAmB,EAAE,qBAAqC,EAAgB,EAAE,CACnG,cAAc,CAAC,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;AAEvH,0DAA0D;AAC1D,MAAM,+BAA+B,GAAG,CAAC,OAAoB,EAA8B,EAAE;IAC3F,+CAA+C;IAC/C,OAAO,OAAO,CAAC,qBAAqB,CAAC;IACrC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { ChatMyMessage } from '@fluentui-contrib/react-chat';\nimport { mergeClasses } from '@fluentui/react-components';\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 { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\nimport { FileMetadata } from '../FileDownloadCards';\nimport {\n  chatMessageFailedTagStyle,\n  chatMessageFailedTagStackItemStyle,\n  editChatMessageButtonsStackStyle,\n  useChatMessageEditContainerStyles\n} from '../styles/ChatMessageComponent.styles';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from '../MentionPopover';\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  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\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  /* @conditional-compile-remove(mention) */\n  const { mentionLookupOptions } = props;\n\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  const editContainerStyles = useChatMessageEditContainerStyles();\n  const chatMyMessageStyles = useChatMyMessageStyles();\n\n  useEffect(() => {\n    editTextFieldRef.current?.focus();\n  }, []);\n\n  const setText = (event?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string): 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    (isHover: boolean) => onRenderCancelIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary, theme.palette.accent]\n  );\n\n  const onRenderThemedSubmitIcon = useCallback(\n    (isHover: boolean) => onRenderSubmitIcon(isHover ? theme.palette.accent : theme.palette.neutralSecondary),\n    [theme.palette.neutralSecondary, theme.palette.accent]\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 &&\n      attachedFilesMetadata.length > 0 && (\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  const getContent = (): JSX.Element => {\n    return (\n      <>\n        <InputBoxComponent\n          id={'editbox'}\n          textFieldRef={editTextFieldRef}\n          inputClassName={editBoxStyle}\n          placeholderText={strings.editBoxPlaceholderText}\n          textValue={textValue}\n          onChange={setText}\n          onKeyDown={(ev) => {\n            if (ev.key === 'ArrowUp' || ev.key === 'ArrowDown') {\n              ev.stopPropagation();\n            }\n          }}\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          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        ></InputBoxComponent>\n        <Stack\n          horizontal\n          horizontalAlign=\"end\"\n          verticalAlign=\"start\"\n          className={editChatMessageButtonsStackStyle}\n          tokens={{ childrenGap: '0.25rem' }}\n        >\n          {message.failureReason && (\n            <Stack.Item grow className={chatMessageFailedTagStackItemStyle}>\n              <div className={chatMessageFailedTagStyle(theme)}>{message.failureReason}</div>\n            </Stack.Item>\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        </Stack>\n        {onRenderFileUploads()}\n      </>\n    );\n  };\n\n  const bodyClassName = mergeClasses(\n    editContainerStyles.body,\n    message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault\n  );\n  return (\n    <ChatMyMessage\n      root={{\n        className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)\n      }}\n      body={{\n        className: bodyClassName\n      }}\n    >\n      {getContent()}\n    </ChatMyMessage>\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/InputBoxComponent.d.ts

@@ -14,11 +14,7 @@ export interface InputBoxStylesProps extends BaseCustomStyles {
     textFieldContainer?: IStyle;
 }
 declare type InputBoxComponentProps = {
-    children: ReactNode;
-    /**
-     * Inline child elements passed in. Setting to false will mean they are on a new line.
-     */
-    inlineChildren: boolean;
+    children?: ReactNode;
     'data-ui-id'?: string;
     id?: string;
     textValue: string;

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

@@ -3,7 +3,7 @@
 import React, { useState, useCallback } from 'react';
 import { Stack, TextField, mergeStyles, concatStyleSets, IconButton, TooltipHost } from '@fluentui/react';
 import { isEnterKeyEventFromCompositionSession } from './utils';
-import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, newLineButtonsContainerStyle, sameLineButtonsContainerStyle, inputBoxNewLineSpaceAffordance, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
+import { inputBoxStyle, inputBoxWrapperStyle, inputButtonStyle, textFieldStyle, textContainerStyle, inputButtonTooltipStyle, iconWrapperStyle } from './styles/InputBoxComponent.style';
 import { isDarkThemed } from '../theming/themeUtils';
 import { useTheme } from '../theming';
 /* @conditional-compile-remove(mention) */
@@ -14,7 +14,7 @@ import { TextFieldWithMention } from './TextFieldWithMention/TextFieldWithMentio
 export const InputBoxComponent = (props) => {
     const { styles, id, 'data-ui-id': dataUiId, textValue, onChange, textFieldRef, placeholderText, onKeyDown, onEnterKeyDown, supportNewline, inputClassName, errorMessage, disabled, children } = props;
     const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles === null || styles === void 0 ? void 0 : styles.root);
-    const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName, props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance);
+    const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);
     const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles === null || styles === void 0 ? void 0 : styles.textFieldContainer);
     const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {
         fieldGroup: styles === null || styles === void 0 ? void 0 : styles.textField,
@@ -24,7 +24,6 @@ export const InputBoxComponent = (props) => {
             padding: '0 0'
         }
     });
-    const mergedChildrenStyle = mergeStyles(props.inlineChildren ? sameLineButtonsContainerStyle : newLineButtonsContainerStyle);
     const onTextFieldKeyDown = useCallback((ev) => {
         if (isEnterKeyEventFromCompositionSession(ev)) {
             return;
@@ -36,7 +35,7 @@ export const InputBoxComponent = (props) => {
         onKeyDown && onKeyDown(ev);
     }, [onEnterKeyDown, onKeyDown, supportNewline]);
     const onRenderChildren = () => {
-        return (React.createElement(Stack, { horizontal: true, className: mergedChildrenStyle }, children));
+        return React.createElement(React.Fragment, null, children);
     };
     const renderTextField = () => {
         const textFieldProps = {
@@ -53,7 +52,7 @@ export const InputBoxComponent = (props) => {
             styles: mergedTextFieldStyle,
             disabled,
             errorMessage,
-            onRenderSuffix: onRenderChildren
+            onRenderSuffix: props.children ? onRenderChildren : undefined
         };
         /* @conditional-compile-remove(mention) */
         const textFieldWithMentionProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\n\nimport {\n  Stack,\n  TextField,\n  mergeStyles,\n  IStyle,\n  ITextField,\n  concatStyleSets,\n  IconButton,\n  TooltipHost,\n  ICalloutContentStyles,\n  ITextFieldProps\n} from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\n\nimport {\n  inputBoxStyle,\n  inputBoxWrapperStyle,\n  inputButtonStyle,\n  textFieldStyle,\n  textContainerStyle,\n  newLineButtonsContainerStyle,\n  sameLineButtonsContainerStyle,\n  inputBoxNewLineSpaceAffordance,\n  inputButtonTooltipStyle,\n  iconWrapperStyle\n} from './styles/InputBoxComponent.style';\n\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(mention) */\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\n\ntype InputBoxComponentProps = {\n  children: ReactNode;\n  /**\n   * Inline child elements passed in. Setting to false will mean they are on a new line.\n   */\n  inlineChildren: boolean;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(\n    inputBoxStyle,\n    inputClassName,\n    props.inlineChildren ? {} : inputBoxNewLineSpaceAffordance\n  );\n\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n\n  const mergedChildrenStyle = mergeStyles(\n    props.inlineChildren ? sameLineButtonsContainerStyle : newLineButtonsContainerStyle\n  );\n\n  const onTextFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [onEnterKeyDown, onKeyDown, supportNewline]\n  );\n\n  const onRenderChildren = (): JSX.Element => {\n    return (\n      <Stack horizontal className={mergedChildrenStyle}>\n        {children}\n      </Stack>\n    );\n  };\n\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: onRenderChildren\n    };\n\n    /* @conditional-compile-remove(mention) */\n    const textFieldWithMentionProps: TextFieldWithMentionProps = {\n      textFieldProps: textFieldProps,\n      dataUiId: dataUiId,\n      textValue: textValue,\n      onChange: onChange,\n      onKeyDown: onKeyDown,\n      onEnterKeyDown: onEnterKeyDown,\n      textFieldRef: textFieldRef,\n      supportNewline: supportNewline,\n      mentionLookupOptions: props.mentionLookupOptions\n    };\n    /* @conditional-compile-remove(mention) */\n    if (props.mentionLookupOptions) {\n      return <TextFieldWithMention {...textFieldWithMentionProps} />;\n    }\n    return (\n      <div style={textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined}>\n        <TextField\n          {...textFieldProps}\n          data-ui-id={dataUiId}\n          value={textValue}\n          onChange={onChange}\n          onKeyDown={onTextFieldKeyDown}\n          onFocus={(e) => {\n            // Fix for setting the cursor to the correct position when multiline is true\n            // This approach should be reviewed during migration to FluentUI v9\n            e.currentTarget.value = '';\n            e.currentTarget.value = textValue;\n          }}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>\n  );\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n      />\n    </TooltipHost>\n  );\n};\n"]}
+{"version":3,"file":"InputBoxComponent.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/InputBoxComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, ReactNode, FormEvent, useCallback } from 'react';\n\nimport {\n  Stack,\n  TextField,\n  mergeStyles,\n  IStyle,\n  ITextField,\n  concatStyleSets,\n  IconButton,\n  TooltipHost,\n  ICalloutContentStyles,\n  ITextFieldProps\n} from '@fluentui/react';\nimport { BaseCustomStyles } from '../types';\nimport { isEnterKeyEventFromCompositionSession } from './utils';\n\nimport {\n  inputBoxStyle,\n  inputBoxWrapperStyle,\n  inputButtonStyle,\n  textFieldStyle,\n  textContainerStyle,\n  inputButtonTooltipStyle,\n  iconWrapperStyle\n} from './styles/InputBoxComponent.style';\n\nimport { isDarkThemed } from '../theming/themeUtils';\nimport { useTheme } from '../theming';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n/* @conditional-compile-remove(mention) */\nimport { TextFieldWithMention, TextFieldWithMentionProps } from './TextFieldWithMention/TextFieldWithMention';\n\n/**\n * @private\n */\nexport interface InputBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n\n  /** Styles for customizing the container of the text field */\n  textFieldContainer?: IStyle;\n}\n\ntype InputBoxComponentProps = {\n  children?: ReactNode;\n  'data-ui-id'?: string;\n  id?: string;\n  textValue: string; // This could be plain text or HTML.\n  onChange: (event?: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void;\n  textFieldRef?: React.RefObject<ITextField>;\n  inputClassName?: string;\n  placeholderText?: string;\n  supportNewline?: boolean;\n  maxLength: number;\n  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onEnterKeyDown?: () => void;\n  errorMessage?: string | React.ReactElement;\n  disabled?: boolean;\n  styles?: InputBoxStylesProps;\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(mention) */\n  mentionLookupOptions?: MentionLookupOptions;\n};\n\n/**\n * @private\n */\nexport const InputBoxComponent = (props: InputBoxComponentProps): JSX.Element => {\n  const {\n    styles,\n    id,\n    'data-ui-id': dataUiId,\n    textValue,\n    onChange,\n    textFieldRef,\n    placeholderText,\n    onKeyDown,\n    onEnterKeyDown,\n    supportNewline,\n    inputClassName,\n    errorMessage,\n    disabled,\n    children\n  } = props;\n  const mergedRootStyle = mergeStyles(inputBoxWrapperStyle, styles?.root);\n  const mergedInputFieldStyle = mergeStyles(inputBoxStyle, inputClassName);\n\n  const mergedTextContainerStyle = mergeStyles(textContainerStyle, styles?.textFieldContainer);\n  const mergedTextFieldStyle = concatStyleSets(textFieldStyle, {\n    fieldGroup: styles?.textField,\n    errorMessage: styles?.systemMessage,\n    suffix: {\n      backgroundColor: 'transparent',\n      padding: '0 0'\n    }\n  });\n\n  const onTextFieldKeyDown = useCallback(\n    (ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      if (isEnterKeyEventFromCompositionSession(ev)) {\n        return;\n      }\n      if (ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline)) {\n        ev.preventDefault();\n        onEnterKeyDown && onEnterKeyDown();\n      }\n      onKeyDown && onKeyDown(ev);\n    },\n    [onEnterKeyDown, onKeyDown, supportNewline]\n  );\n\n  const onRenderChildren = (): JSX.Element => {\n    return <>{children}</>;\n  };\n\n  const renderTextField = (): JSX.Element => {\n    const textFieldProps: ITextFieldProps = {\n      autoFocus: props.autoFocus === 'sendBoxTextField',\n      multiline: true,\n      autoAdjustHeight: true,\n      multiple: false,\n      resizable: false,\n      componentRef: textFieldRef,\n      id,\n      inputClassName: mergedInputFieldStyle,\n      placeholder: placeholderText,\n      autoComplete: 'off',\n      styles: mergedTextFieldStyle,\n      disabled,\n      errorMessage,\n      onRenderSuffix: props.children ? onRenderChildren : undefined\n    };\n\n    /* @conditional-compile-remove(mention) */\n    const textFieldWithMentionProps: TextFieldWithMentionProps = {\n      textFieldProps: textFieldProps,\n      dataUiId: dataUiId,\n      textValue: textValue,\n      onChange: onChange,\n      onKeyDown: onKeyDown,\n      onEnterKeyDown: onEnterKeyDown,\n      textFieldRef: textFieldRef,\n      supportNewline: supportNewline,\n      mentionLookupOptions: props.mentionLookupOptions\n    };\n    /* @conditional-compile-remove(mention) */\n    if (props.mentionLookupOptions) {\n      return <TextFieldWithMention {...textFieldWithMentionProps} />;\n    }\n    return (\n      <div style={textFieldProps.errorMessage ? { padding: '0 0 5px 5px' } : undefined}>\n        <TextField\n          {...textFieldProps}\n          data-ui-id={dataUiId}\n          value={textValue}\n          onChange={onChange}\n          onKeyDown={onTextFieldKeyDown}\n          onFocus={(e) => {\n            // Fix for setting the cursor to the correct position when multiline is true\n            // This approach should be reviewed during migration to FluentUI v9\n            e.currentTarget.value = '';\n            e.currentTarget.value = textValue;\n          }}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Stack className={mergedRootStyle}>\n      <div className={mergedTextContainerStyle}>{renderTextField()}</div>\n    </Stack>\n  );\n};\n\n/**\n * Props for displaying a send button besides the text input area.\n *\n * @private\n */\nexport type InputBoxButtonProps = {\n  onRenderIcon: (isHover: boolean) => JSX.Element;\n  onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  tooltipContent?: string;\n};\n\n/**\n * @private\n */\nexport const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {\n  const { onRenderIcon, onClick, ariaLabel, className, id, tooltipContent } = props;\n  const [isHover, setIsHover] = useState(false);\n  const mergedButtonStyle = mergeStyles(inputButtonStyle, className);\n\n  const theme = useTheme();\n  const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n  // Place callout with no gap between it and the button.\n  const calloutProps = {\n    gapSpace: 0,\n    styles: calloutStyle,\n    backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n  };\n  return (\n    <TooltipHost hostClassName={inputButtonTooltipStyle} content={tooltipContent} calloutProps={{ ...calloutProps }}>\n      <IconButton\n        className={mergedButtonStyle}\n        ariaLabel={ariaLabel}\n        onClick={onClick}\n        id={id}\n        onMouseEnter={() => {\n          setIsHover(true);\n        }}\n        onMouseLeave={() => {\n          setIsHover(false);\n        }}\n        // VoiceOver fix: Avoid icon from stealing focus when IconButton is double-tapped to send message by wrapping with Stack with pointerEvents style to none\n        onRenderIcon={() => <Stack className={iconWrapperStyle}>{onRenderIcon(isHover)}</Stack>}\n      />\n    </TooltipHost>\n  );\n};\n"]}

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

@@ -113,7 +113,7 @@ export const SendBox = (props) => {
                 hasErrorMessage: !!errorMessage,
                 disabled: !!disabled
             })) },
-            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, inlineChildren: true, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
+            React.createElement(InputBoxComponent, { autoFocus: autoFocus, "data-ui-id": ids.sendboxTextField, disabled: disabled, errorMessage: onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage, textFieldRef: sendTextFieldRef, id: "sendbox", placeholderText: strings.placeholderText, textValue: textValue, onChange: (_, newValue) => setText(newValue), onKeyDown: (ev) => {
                     const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);
                     if (!keyWasSendingMessage) {
                         onTyping === null || onTyping === void 0 ? void 0 : onTyping();

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

@@ -1 +1 @@
-{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxButton, InputBoxComponent } from './InputBoxComponent';\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Attributes required for SendBox to show file uploads like name, progress etc.\n * @beta\n */\nexport interface ActiveFileUpload {\n  /**\n   * Unique identifier for the file upload.\n   */\n  id: string;\n\n  /**\n   * File name to be rendered for uploaded file.\n   */\n  filename: string;\n\n  /**\n   * A number between 0 and 1 indicating the progress of the upload.\n   * This is unrelated to the `uploadComplete` property.\n   * It is only used to show the progress of the upload.\n   * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n   * property to true to mark the upload as complete.\n   */\n  progress: number;\n\n  /**\n   * Error to be displayed to the user if the upload fails.\n   */\n  error?: SendBoxErrorBarError;\n\n  /**\n   * `true` means that the upload is completed.\n   * This is independent of the upload `progress`.\n   */\n  uploadComplete?: boolean;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    setFileUploadsPendingError(undefined);\n\n    if (hasIncompleteFileUploads(props)) {\n      /* @conditional-compile-remove(file-sharing) */\n      setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {\n      onSendMessage && onSendMessage(sanitizeText(message));\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n      setTextValueOverflow(true);\n    } else {\n      setTextValueOverflow(false);\n    }\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const hasText = !!textValue;\n  const hasTextOrFile = hasText || hasFile(props);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      mergeStyles(\n        sendIconStyle,\n        {\n          color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary\n        },\n        styles?.sendMessageIcon\n      ),\n    [errorMessage, hasTextOrFile, theme, styles?.sendMessageIcon]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={props.onCancelFileUpload}\n          strings={{\n            removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n            uploading: props.strings?.uploading ?? localeStrings.uploading,\n            uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, props, localeStrings]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      <SendBoxErrors {...sendBoxErrorsProps} />\n      <Stack\n        className={mergeStyles(\n          borderAndBoxShadowStyle({\n            theme,\n            hasErrorMessage: !!errorMessage,\n            disabled: !!disabled\n          })\n        )}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          inlineChildren={true}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nconst hasIncompleteFileUploads = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!(\n    activeFileUploads?.length &&\n    !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete)\n  );\n};\n\nconst hasFile = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!activeFileUploads?.find((file) => !file.error);\n  return false;\n};\n\nconst sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\nconst activeFileUploadsTrampoline = (props: SendBoxProps): ActiveFileUpload[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return props.activeFileUploads;\n  return [];\n};\n"]}
+{"version":3,"file":"SendBox.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/SendBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { IStyle, ITextField, mergeStyles, concatStyleSets, Icon, Stack } from '@fluentui/react';\nimport { sendButtonStyle, sendIconStyle, sendBoxWrapperStyles, borderAndBoxShadowStyle } from './styles/SendBox.styles';\nimport { BaseCustomStyles } from '../types';\nimport { useTheme } from '../theming';\nimport { useLocale } from '../localization';\nimport { useIdentifiers } from '../identifiers';\nimport { InputBoxButton, InputBoxComponent } from './InputBoxComponent';\nimport { SendBoxErrors } from './SendBoxErrors';\n/* @conditional-compile-remove(file-sharing) */\nimport { _FileUploadCards } from './FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { fileUploadCardsStyles } from './styles/SendBox.styles';\nimport { SendBoxErrorBarError } from './SendBoxErrorBar';\n/* @conditional-compile-remove(mention) */\nimport { MentionLookupOptions } from './MentionPopover';\n\nconst EMPTY_MESSAGE_REGEX = /^\\s*$/;\nconst MAXIMUM_LENGTH_OF_MESSAGE = 8000;\n\n/**\n * Fluent styles for {@link Sendbox}.\n *\n * @public\n */\nexport interface SendBoxStylesProps extends BaseCustomStyles {\n  /** Styles for the text field. */\n  textField?: IStyle;\n  /** styles for the text field container */\n  textFieldContainer?: IStyle;\n  /** Styles for the container of the send message icon. */\n  sendMessageIconContainer?: IStyle;\n  /** Styles for the send message icon; These styles will be ignored when a custom send message icon is provided. */\n  sendMessageIcon?: IStyle;\n  /** Styles for the system message; These styles will be ignored when a custom system message component is provided. */\n  systemMessage?: IStyle;\n}\n\n/**\n * Attributes required for SendBox to show file uploads like name, progress etc.\n * @beta\n */\nexport interface ActiveFileUpload {\n  /**\n   * Unique identifier for the file upload.\n   */\n  id: string;\n\n  /**\n   * File name to be rendered for uploaded file.\n   */\n  filename: string;\n\n  /**\n   * A number between 0 and 1 indicating the progress of the upload.\n   * This is unrelated to the `uploadComplete` property.\n   * It is only used to show the progress of the upload.\n   * Progress of 1 doesn't mark the upload as complete, set the `uploadComplete`\n   * property to true to mark the upload as complete.\n   */\n  progress: number;\n\n  /**\n   * Error to be displayed to the user if the upload fails.\n   */\n  error?: SendBoxErrorBarError;\n\n  /**\n   * `true` means that the upload is completed.\n   * This is independent of the upload `progress`.\n   */\n  uploadComplete?: boolean;\n}\n\n/**\n * Strings of {@link SendBox} that can be overridden.\n *\n * @public\n */\nexport interface SendBoxStrings {\n  /**\n   * Placeholder text in SendBox when there is no user input\n   */\n  placeholderText: string;\n  /**\n   * The warning message when send box text length is more than max limit\n   */\n  textTooLong: string;\n  /**\n   * Aria label for send message button\n   */\n  sendButtonAriaLabel: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Error message indicating that all file uploads are not complete.\n   */\n  fileUploadsPendingError: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user when focus is on cancel file upload button.\n   */\n  removeFile: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file uploading starts.\n   */\n  uploading: string;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Aria label to notify user file is uploaded.\n   */\n  uploadCompleted: string;\n}\n\n/**\n * Props for {@link SendBox}.\n *\n * @public\n */\nexport interface SendBoxProps {\n  /**\n   * Optional boolean to disable text box\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /**\n   * Optional text for system message below text box\n   */\n  systemMessage?: string;\n  /**\n   * Optional override behavior on send button click\n   */\n  onSendMessage?: (content: string) => Promise<void>;\n  /* @conditional-compile-remove(mention) */\n  /**\n   * Optional props needed to lookup suggestions in the mention scenario.\n   * @beta\n   */\n  mentionLookupOptions?: MentionLookupOptions;\n\n  /**\n   * Optional callback called when user is typing\n   */\n  onTyping?: () => Promise<void>;\n  /**\n   * Optional callback to render system message below the SendBox.\n   * @defaultValue MessageBar\n   */\n  onRenderSystemMessage?: (systemMessage: string | undefined) => React.ReactElement;\n  /**\n   * Optional boolean to support new line in SendBox.\n   * @defaultValue false\n   */\n  supportNewline?: boolean;\n  /**\n   * Optional callback to render send button icon to the right of the SendBox.\n   * @defaultValue SendBoxSendHovered icon when mouse over icon and SendBoxSend icon otherwise\n   */\n  onRenderIcon?: (isHover: boolean) => JSX.Element;\n  /**\n   * Allows users to pass in an object contains custom CSS styles.\n   * @Example\n   * ```\n   * <SendBox styles={{ root: { background: 'blue' } }} />\n   * ```\n   */\n  styles?: SendBoxStylesProps;\n  /**\n   * Optional strings to override in component\n   */\n  strings?: Partial<SendBoxStrings>;\n  /**\n   * enumerable to determine if the input box has focus on render or not.\n   * When undefined nothing has focus on render\n   */\n  autoFocus?: 'sendBoxTextField';\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to render uploaded files in the SendBox. The sendBox will expand\n   * vertically to accommodate the uploaded files. File uploads will\n   * be rendered below the text area in sendBox.\n   * @beta\n   */\n  onRenderFileUploads?: () => JSX.Element;\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional array of active file uploads where each object has attributes\n   * of a file upload like name, progress, errorMessage etc.\n   * @beta\n   */\n  activeFileUploads?: ActiveFileUpload[];\n  /* @conditional-compile-remove(file-sharing) */\n  /**\n   * Optional callback to remove the file upload before sending by clicking on\n   * cancel icon.\n   * @beta\n   */\n  onCancelFileUpload?: (fileId: string) => void;\n}\n\n/**\n * Component for typing and sending messages.\n *\n * Supports sending typing notification when user starts entering text.\n * Supports an optional message below the text input field.\n *\n * @public\n */\nexport const SendBox = (props: SendBoxProps): JSX.Element => {\n  const {\n    disabled,\n    systemMessage,\n    supportNewline,\n    onSendMessage,\n    onTyping,\n    onRenderIcon,\n    onRenderSystemMessage,\n    styles,\n    autoFocus,\n    /* @conditional-compile-remove(mention) */\n    mentionLookupOptions\n  } = props;\n  const theme = useTheme();\n  const localeStrings = useLocale().strings.sendBox;\n  const strings = { ...localeStrings, ...props.strings };\n  const ids = useIdentifiers();\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n\n  const [textValue, setTextValue] = useState('');\n  const [textValueOverflow, setTextValueOverflow] = useState(false);\n\n  const sendTextFieldRef = React.useRef<ITextField>(null);\n\n  const [fileUploadsPendingError, setFileUploadsPendingError] = useState<SendBoxErrorBarError | undefined>(undefined);\n\n  const sendMessageOnClick = (): void => {\n    // don't send a message when disabled\n    if (disabled || textValueOverflow) {\n      return;\n    }\n\n    // Don't send message until all files have been uploaded successfully\n    setFileUploadsPendingError(undefined);\n\n    if (hasIncompleteFileUploads(props)) {\n      /* @conditional-compile-remove(file-sharing) */\n      setFileUploadsPendingError({ message: strings.fileUploadsPendingError, timestamp: Date.now() });\n      return;\n    }\n\n    const message = textValue;\n    // we don't want to send empty messages including spaces, newlines, tabs\n    // Message can be empty if there is a valid file upload\n    if (!EMPTY_MESSAGE_REGEX.test(message) || hasFile(props)) {\n      onSendMessage && onSendMessage(sanitizeText(message));\n      setTextValue('');\n    }\n    sendTextFieldRef.current?.focus();\n  };\n\n  const setText = (newValue?: string | undefined): void => {\n    if (newValue === undefined) {\n      return;\n    }\n\n    if (newValue.length > MAXIMUM_LENGTH_OF_MESSAGE) {\n      setTextValueOverflow(true);\n    } else {\n      setTextValueOverflow(false);\n    }\n    setTextValue(newValue);\n  };\n\n  const textTooLongMessage = textValueOverflow ? strings.textTooLong : undefined;\n  const errorMessage = systemMessage ?? textTooLongMessage;\n\n  const mergedSendButtonStyle = useMemo(\n    () => mergeStyles(sendButtonStyle, styles?.sendMessageIconContainer),\n    [styles?.sendMessageIconContainer]\n  );\n\n  const mergedStyles = useMemo(() => concatStyleSets(styles), [styles]);\n\n  const hasText = !!textValue;\n  const hasTextOrFile = hasText || hasFile(props);\n\n  const mergedSendIconStyle = useMemo(\n    () =>\n      mergeStyles(\n        sendIconStyle,\n        {\n          color: !!errorMessage || !hasTextOrFile ? theme.palette.neutralTertiary : theme.palette.themePrimary\n        },\n        styles?.sendMessageIcon\n      ),\n    [errorMessage, hasTextOrFile, theme, styles?.sendMessageIcon]\n  );\n\n  const onRenderSendIcon = useCallback(\n    (isHover: boolean) =>\n      onRenderIcon ? (\n        onRenderIcon(isHover)\n      ) : (\n        <Icon iconName={isHover && textValue ? 'SendBoxSendHovered' : 'SendBoxSend'} className={mergedSendIconStyle} />\n      ),\n    [mergedSendIconStyle, onRenderIcon, textValue]\n  );\n\n  // Ensure that errors are cleared when there are no files in sendBox\n  React.useEffect(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      setFileUploadsPendingError(undefined);\n    }\n  }, [activeFileUploads]);\n\n  const sendBoxErrorsProps = useMemo(() => {\n    return {\n      fileUploadsPendingError: fileUploadsPendingError,\n      fileUploadError: activeFileUploads?.filter((fileUpload) => fileUpload.error).pop()?.error\n    };\n  }, [activeFileUploads, fileUploadsPendingError]);\n\n  /* @conditional-compile-remove(file-sharing) */\n  const onRenderFileUploads = useCallback(() => {\n    if (!activeFileUploads?.filter((upload) => !upload.error).length) {\n      return null;\n    }\n    return props.onRenderFileUploads ? (\n      props.onRenderFileUploads()\n    ) : (\n      <Stack className={fileUploadCardsStyles}>\n        <_FileUploadCards\n          activeFileUploads={activeFileUploads}\n          onCancelFileUpload={props.onCancelFileUpload}\n          strings={{\n            removeFile: props.strings?.removeFile ?? localeStrings.removeFile,\n            uploading: props.strings?.uploading ?? localeStrings.uploading,\n            uploadCompleted: props.strings?.uploadCompleted ?? localeStrings.uploadCompleted\n          }}\n        />\n      </Stack>\n    );\n  }, [activeFileUploads, props, localeStrings]);\n\n  return (\n    <Stack\n      className={mergeStyles(\n        sendBoxWrapperStyles,\n        { overflow: 'visible' } // This is needed for the mention popup to be visible\n      )}\n    >\n      <SendBoxErrors {...sendBoxErrorsProps} />\n      <Stack\n        className={mergeStyles(\n          borderAndBoxShadowStyle({\n            theme,\n            hasErrorMessage: !!errorMessage,\n            disabled: !!disabled\n          })\n        )}\n      >\n        <InputBoxComponent\n          autoFocus={autoFocus}\n          data-ui-id={ids.sendboxTextField}\n          disabled={disabled}\n          errorMessage={onRenderSystemMessage ? onRenderSystemMessage(errorMessage) : errorMessage}\n          textFieldRef={sendTextFieldRef}\n          id=\"sendbox\"\n          placeholderText={strings.placeholderText}\n          textValue={textValue}\n          onChange={(_, newValue) => setText(newValue)}\n          onKeyDown={(ev) => {\n            const keyWasSendingMessage = ev.key === 'Enter' && (ev.shiftKey === false || !supportNewline);\n            if (!keyWasSendingMessage) {\n              onTyping?.();\n            }\n          }}\n          onEnterKeyDown={() => {\n            sendMessageOnClick();\n          }}\n          styles={mergedStyles}\n          supportNewline={supportNewline}\n          maxLength={MAXIMUM_LENGTH_OF_MESSAGE}\n          /* @conditional-compile-remove(mention) */\n          mentionLookupOptions={mentionLookupOptions}\n        >\n          <InputBoxButton\n            onRenderIcon={onRenderSendIcon}\n            onClick={(e) => {\n              if (!textValueOverflow) {\n                sendMessageOnClick();\n              }\n              e.stopPropagation();\n            }}\n            id={'sendIconWrapper'}\n            className={mergedSendButtonStyle}\n            ariaLabel={localeStrings.sendButtonAriaLabel}\n            tooltipContent={localeStrings.sendButtonAriaLabel}\n          />\n        </InputBoxComponent>\n        {\n          /* @conditional-compile-remove(file-sharing) */\n          onRenderFileUploads()\n        }\n      </Stack>\n    </Stack>\n  );\n};\n\n/**\n * @private\n */\nconst hasIncompleteFileUploads = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!(\n    activeFileUploads?.length &&\n    !activeFileUploads.filter((fileUpload) => !fileUpload.error).every((fileUpload) => fileUpload.uploadComplete)\n  );\n};\n\nconst hasFile = (props: SendBoxProps): boolean => {\n  const activeFileUploads = activeFileUploadsTrampoline(props);\n  return !!activeFileUploads?.find((file) => !file.error);\n  return false;\n};\n\nconst sanitizeText = (message: string): string => {\n  if (EMPTY_MESSAGE_REGEX.test(message)) {\n    return '';\n  } else {\n    return message;\n  }\n};\n\nconst activeFileUploadsTrampoline = (props: SendBoxProps): ActiveFileUpload[] | undefined => {\n  /* @conditional-compile-remove(file-sharing) */\n  return props.activeFileUploads;\n  return [];\n};\n"]}

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

@@ -23,6 +23,14 @@ export declare const chatMessageEditedTagStyle: (theme: Theme) => string;
  * @private
  */
 export declare const chatMessageFailedTagStyle: (theme: Theme) => string;
+/**
+ * @private
+ */
+export declare const chatMessageFailedTagStackItemStyle: string;
+/**
+ * @private
+ */
+export declare const editChatMessageButtonsStackStyle: string;
 /**
  * @private
  */

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

@@ -61,7 +61,26 @@ export const chatMessageEditedTagStyle = (theme) => mergeStyles({ fontWeight: Fo
 /**
  * @private
  */
-export const chatMessageFailedTagStyle = (theme) => mergeStyles({ fontWeight: FontWeights.regular, color: theme.semanticColors.errorText });
+export const chatMessageFailedTagStyle = (theme) => mergeStyles({
+    fontWeight: FontWeights.regular,
+    color: theme.semanticColors.errorText,
+    fontSize: theme.fonts.smallPlus.fontSize,
+    lineHeight: '1rem'
+});
+/**
+ * @private
+ */
+export const chatMessageFailedTagStackItemStyle = mergeStyles({
+    alignSelf: 'end',
+    paddingBottom: '0.25rem'
+});
+/**
+ * @private
+ */
+export const editChatMessageButtonsStackStyle = mergeStyles({
+    padding: '0 0.5rem 0.5rem 0.5rem',
+    marginTop: '-0.25rem'
+});
 /**
  * @private
  */
@@ -78,7 +97,9 @@ export const useChatMessageEditContainerStyles = makeStyles({
     root: {
         paddingTop: '1.25rem' //height of the menu button + marginBottom
     },
-    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding(0)), { backgroundColor: 'transparent', width: '100%', boxSizing: 'border-box' }), shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), shorthands.borderRadius(tokens.borderRadiusMedium)), shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign({}, shorthands.margin('0rem')), shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)) }),
+    body: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, shorthands.padding(0)), { backgroundColor: 'transparent', boxSizing: 'border-box' }), shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), shorthands.borderRadius(tokens.borderRadiusMedium)), shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`)), { 
+        // Width should be updated on hover to include the border width change
+        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`, '&:hover, &:active, &:focus, &:focus-within': Object.assign(Object.assign(Object.assign({}, shorthands.margin('0rem')), shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), { width: '100%' }) }),
     bodyError: Object.assign({}, shorthands.borderColor(errorTextColor)),
     bodyDefault: Object.assign(Object.assign({}, shorthands.borderColor(tokens.colorNeutralStrokeAccessible)), { '&:hover, &:active, &:focus, &:focus-within': Object.assign({}, shorthands.borderColor(tokens.colorCompoundBrandStroke)) })
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponent.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ChatMessageComponent.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  mergeStyles,\n  IStyle,\n  FontWeights,\n  Theme,\n  IContextualMenuItemStyles,\n  ITheme,\n  IIconStyles\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport {\n  defaultSendBoxInactiveBorderThicknessREM,\n  defaultSendBoxActiveBorderThicknessREM\n} from '../styles/SendBox.styles';\n\nconst MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;\nconst errorTextColor = 'var(--errorText)';\n\n/**\n * @private\n */\nexport const chatActionsCSS: IStyle = {\n  'ul&': {\n    right: '0',\n    left: 'auto',\n    top: '-1.2rem',\n    bottom: 'auto',\n    position: 'absolute'\n  },\n  '& a': {\n    margin: '0',\n    padding: '0',\n    border: '0'\n  }\n};\n\n/**\n * @private\n */\nexport const iconWrapperStyle = (theme: ITheme, isSubMenuOpen: boolean): IIconStyles => ({\n  root: {\n    margin: _pxToRem(3),\n    // Show hover styles when the Edit/Delete menu is showing as this action button is still considered 'active'\n    color: isSubMenuOpen ? theme.palette.black : theme.palette.neutralPrimary,\n    strokeWidth: isSubMenuOpen ? _pxToRem(0.5) : _pxToRem(0),\n    stroke: theme.palette.black,\n    ':hover, :focus': {\n      color: theme.palette.black,\n      strokeWidth: _pxToRem(0.5)\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const chatMessageDateStyle = mergeStyles({\n  color: tokens.colorNeutralForeground2,\n  fontWeight: FontWeights.regular,\n  fontSize: '0.75rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageAuthorStyle = mergeStyles({\n  fontWeight: FontWeights.semibold,\n  fontSize: '0.75rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageEditedTagStyle = (theme: Theme): string =>\n  mergeStyles({ fontWeight: FontWeights.semibold, color: theme.palette.neutralSecondary });\n\n/**\n * @private\n */\nexport const chatMessageFailedTagStyle = (theme: Theme): string =>\n  mergeStyles({ fontWeight: FontWeights.regular, color: theme.semanticColors.errorText });\n\n/**\n * @private\n */\nexport const chatMessageMenuStyle = mergeStyles({\n  minWidth: '8.5rem',\n  height: 'max-content',\n  cursor: 'pointer',\n  overflow: 'hidden'\n});\n\n/**\n * @private\n */\nexport const useChatMessageEditContainerStyles = makeStyles({\n  root: {\n    paddingTop: '1.25rem' //height of the menu button + marginBottom\n  },\n  body: {\n    ...shorthands.padding(0),\n    backgroundColor: 'transparent',\n    width: '100%',\n    boxSizing: 'border-box',\n    ...shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    // The border thickness changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    ...shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`),\n\n    '&:hover, &:active, &:focus, &:focus-within': {\n      ...shorthands.margin('0rem'),\n      ...shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)\n    }\n  },\n  bodyError: {\n    ...shorthands.borderColor(errorTextColor)\n  },\n  bodyDefault: {\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n    '&:hover, &:active, &:focus, &:focus-within': {\n      ...shorthands.borderColor(tokens.colorCompoundBrandStroke)\n    }\n  }\n});\n\n/**\n * Styles that can be applied to ensure flyout items have the minimum touch target size.\n *\n * @private\n */\nexport const menuItemIncreasedSizeStyles: IContextualMenuItemStyles = {\n  root: {\n    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    maxHeight: 'unset'\n  },\n  linkContent: {\n    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    maxHeight: 'unset'\n  },\n  icon: {\n    maxHeight: 'unset'\n  }\n};\n\n/**\n * @private\n */\nexport const menuIconStyleSet = {\n  root: {\n    height: 'calc(100% - 8px)', // Adjust for the pixel margin Fluent applies\n    width: '1.25rem'\n  }\n};\n\n/**\n * @private\n */\nexport const menuSubIconStyleSet = {\n  root: {\n    height: 'unset',\n    lineHeight: '100%',\n    width: '1.25rem'\n  }\n};\n\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"ChatMessageComponent.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ChatMessageComponent.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n  mergeStyles,\n  IStyle,\n  FontWeights,\n  Theme,\n  IContextualMenuItemStyles,\n  ITheme,\n  IIconStyles\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport { makeStyles, shorthands, tokens } from '@fluentui/react-components';\nimport {\n  defaultSendBoxInactiveBorderThicknessREM,\n  defaultSendBoxActiveBorderThicknessREM\n} from '../styles/SendBox.styles';\n\nconst MINIMUM_TOUCH_TARGET_HEIGHT_REM = 3;\nconst errorTextColor = 'var(--errorText)';\n\n/**\n * @private\n */\nexport const chatActionsCSS: IStyle = {\n  'ul&': {\n    right: '0',\n    left: 'auto',\n    top: '-1.2rem',\n    bottom: 'auto',\n    position: 'absolute'\n  },\n  '& a': {\n    margin: '0',\n    padding: '0',\n    border: '0'\n  }\n};\n\n/**\n * @private\n */\nexport const iconWrapperStyle = (theme: ITheme, isSubMenuOpen: boolean): IIconStyles => ({\n  root: {\n    margin: _pxToRem(3),\n    // Show hover styles when the Edit/Delete menu is showing as this action button is still considered 'active'\n    color: isSubMenuOpen ? theme.palette.black : theme.palette.neutralPrimary,\n    strokeWidth: isSubMenuOpen ? _pxToRem(0.5) : _pxToRem(0),\n    stroke: theme.palette.black,\n    ':hover, :focus': {\n      color: theme.palette.black,\n      strokeWidth: _pxToRem(0.5)\n    }\n  }\n});\n\n/**\n * @private\n */\nexport const chatMessageDateStyle = mergeStyles({\n  color: tokens.colorNeutralForeground2,\n  fontWeight: FontWeights.regular,\n  fontSize: '0.75rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageAuthorStyle = mergeStyles({\n  fontWeight: FontWeights.semibold,\n  fontSize: '0.75rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageEditedTagStyle = (theme: Theme): string =>\n  mergeStyles({ fontWeight: FontWeights.semibold, color: theme.palette.neutralSecondary });\n\n/**\n * @private\n */\nexport const chatMessageFailedTagStyle = (theme: Theme): string =>\n  mergeStyles({\n    fontWeight: FontWeights.regular,\n    color: theme.semanticColors.errorText,\n    fontSize: theme.fonts.smallPlus.fontSize,\n    lineHeight: '1rem'\n  });\n\n/**\n * @private\n */\nexport const chatMessageFailedTagStackItemStyle = mergeStyles({\n  alignSelf: 'end',\n  paddingBottom: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const editChatMessageButtonsStackStyle = mergeStyles({\n  padding: '0 0.5rem 0.5rem 0.5rem',\n  marginTop: '-0.25rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageMenuStyle = mergeStyles({\n  minWidth: '8.5rem',\n  height: 'max-content',\n  cursor: 'pointer',\n  overflow: 'hidden'\n});\n\n/**\n * @private\n */\nexport const useChatMessageEditContainerStyles = makeStyles({\n  root: {\n    paddingTop: '1.25rem' //height of the menu button + marginBottom\n  },\n  body: {\n    ...shorthands.padding(0),\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    ...shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    // The border thickness changes on hover, to prevent the border thickness change causing the\n    // input box to shift we apply a margin to compensate. This margin is then removed on hover when the border is thicker.\n    ...shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}rem`),\n    // Width should be updated on hover to include the border width change\n    width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,\n\n    '&:hover, &:active, &:focus, &:focus-within': {\n      ...shorthands.margin('0rem'),\n      ...shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`),\n      width: '100%'\n    }\n  },\n  bodyError: {\n    ...shorthands.borderColor(errorTextColor)\n  },\n  bodyDefault: {\n    ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n    '&:hover, &:active, &:focus, &:focus-within': {\n      ...shorthands.borderColor(tokens.colorCompoundBrandStroke)\n    }\n  }\n});\n\n/**\n * Styles that can be applied to ensure flyout items have the minimum touch target size.\n *\n * @private\n */\nexport const menuItemIncreasedSizeStyles: IContextualMenuItemStyles = {\n  root: {\n    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    maxHeight: 'unset'\n  },\n  linkContent: {\n    height: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    lineHeight: `${MINIMUM_TOUCH_TARGET_HEIGHT_REM}rem`,\n    maxHeight: 'unset'\n  },\n  icon: {\n    maxHeight: 'unset'\n  }\n};\n\n/**\n * @private\n */\nexport const menuIconStyleSet = {\n  root: {\n    height: 'calc(100% - 8px)', // Adjust for the pixel margin Fluent applies\n    width: '1.25rem'\n  }\n};\n\n/**\n * @private\n */\nexport const menuSubIconStyleSet = {\n  root: {\n    height: 'unset',\n    lineHeight: '100%',\n    width: '1.25rem'\n  }\n};\n\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-components/src/components/styles/EditBox.styles.js

@@ -12,10 +12,10 @@ export const editBoxStyle = mergeStyles({
  * @private
  */
 export const editingButtonStyle = mergeStyles({
-    margin: 'auto 0',
+    margin: '0',
     width: '2.125rem',
     height: '2.125rem',
-    padding: '0.25rem 0 0 0'
+    padding: '0.375rem 0 0 0'
 });
 /**
  * @private

package/dist/dist-esm/react-components/src/components/styles/EditBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditBox.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/EditBox.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,WAAW;CAC1B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAC5C,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,eAAe;CACzB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,MAAM,EAAE,MAAM;IACd,aAAa,EAAE;QACb,MAAM,EAAE,cAAc;KACvB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const editBoxStyle = mergeStyles({\n  marginTop: '0.0875rem',\n  marginBottom: '0.0875rem'\n});\n\n/**\n * @private\n */\nexport const editingButtonStyle = mergeStyles({\n  margin: 'auto 0',\n  width: '2.125rem',\n  height: '2.125rem',\n  padding: '0.25rem 0 0 0'\n});\n\n/**\n * @private\n */\nexport const inputBoxIcon = mergeStyles({\n  margin: 'auto',\n  '&:hover svg': {\n    stroke: 'currentColor'\n  }\n});\n\n/**\n * @private\n */\nexport const editBoxStyleSet = {\n  root: {\n    minWidth: '6.25rem',\n    maxWidth: '100%'\n  }\n};\n"]}
+{"version":3,"file":"EditBox.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/EditBox.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,WAAW;CAC1B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC;IAC5C,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,gBAAgB;CAC1B,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,WAAW,CAAC;IACtC,MAAM,EAAE,MAAM;IACd,aAAa,EAAE;QACb,MAAM,EAAE,cAAc;KACvB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE;QACJ,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const editBoxStyle = mergeStyles({\n  marginTop: '0.0875rem',\n  marginBottom: '0.0875rem'\n});\n\n/**\n * @private\n */\nexport const editingButtonStyle = mergeStyles({\n  margin: '0',\n  width: '2.125rem',\n  height: '2.125rem',\n  padding: '0.375rem 0 0 0'\n});\n\n/**\n * @private\n */\nexport const inputBoxIcon = mergeStyles({\n  margin: 'auto',\n  '&:hover svg': {\n    stroke: 'currentColor'\n  }\n});\n\n/**\n * @private\n */\nexport const editBoxStyleSet = {\n  root: {\n    minWidth: '6.25rem',\n    maxWidth: '100%'\n  }\n};\n"]}

package/dist/dist-esm/react-components/src/components/styles/InputBoxComponent.style.d.ts

@@ -24,10 +24,6 @@ export declare const textFieldStyle: IStyle;
  * @private
  */
 export declare const inputButtonStyle: string;
-/**
- * @private
- */
-export declare const newLineButtonsContainerStyle: IStyle;
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/InputBoxComponent.style.js

@@ -82,15 +82,6 @@ export const inputButtonStyle = mergeStyles({
         backgroundColor: 'transparent'
     }
 });
-/**
- * @private
- */
-export const newLineButtonsContainerStyle = {
-    position: 'absolute',
-    right: '0.8rem',
-    bottom: '0.6rem',
-    gap: '0'
-};
 /**
  * @private
  */

package/dist/dist-esm/react-components/src/components/styles/InputBoxComponent.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputBoxComponent.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/InputBoxComponent.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,OAAO,EAAE,GAAG;CACb,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,WAAW,CAAC,OAAO;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,QAAQ;IACpB,6BAA6B,EAAE;QAC7B,QAAQ,EAAE,UAAU;KACrB;IACD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAU;KACrB;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAW;IACpD,YAAY,EAAE,MAAM;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG;QACd,QAAQ,EAAE,SAAS;KACpB;IACD,OAAO,EAAE,EAAE;IACX,UAAU,EAAE;QACV,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,GAAG;QACd;;WAEG;QACH,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;KAC7B;IACD,KAAK,EAAE;QACL,YAAY,EAAE,SAAS;KACxB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,eAAe,EAAE,aAAa;IAC9B,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAW;IAClD,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,GAAG;CACT,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAW;IACnD,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,uGAAuG;IACvG,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,aAAa,EAAE,MAAM;CACtB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, IStyle, FontWeights } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const inputBoxWrapperStyle = mergeStyles({\n  padding: '0'\n});\n\n/**\n * @private\n */\nexport const inputBoxStyle = mergeStyles({\n  overflow: 'auto',\n  minHeight: '2.25rem', // prevents the input text box from being sized to 0px when the CallWithChatComposite chat pane is closed.\n  maxHeight: '8.25rem',\n  outline: 'red 5px',\n  fontWeight: FontWeights.regular,\n  fontSize: '0.875rem',\n  width: '100%',\n  height: '2.25rem',\n  lineHeight: '1.5rem',\n  '::-webkit-input-placeholder': {\n    fontSize: '0.875rem'\n  },\n  '::-moz-placeholder': {\n    fontSize: '0.875rem'\n  },\n  ':-moz-placeholder': {\n    fontSize: '0.875rem'\n  }\n});\n\n/**\n * @private\n */\nexport const inputBoxNewLineSpaceAffordance: IStyle = {\n  marginBottom: '2rem'\n};\n\n/**\n *\n * @private\n */\nexport const textContainerStyle: IStyle = {\n  alignSelf: 'center',\n  position: 'relative',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const textFieldStyle: IStyle = {\n  root: {\n    width: '100%',\n    minHeight: '0',\n    fontSize: '8.25rem'\n  },\n  wrapper: {},\n  fieldGroup: {\n    outline: 'none',\n    border: 'none',\n    height: 'auto',\n    minHeight: '0',\n    /**\n     * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.\n     */\n    ':after': { border: 'none' }\n  },\n  field: {\n    borderRadius: '0.25rem'\n  }\n};\n\n/**\n * @private\n */\nexport const inputButtonStyle = mergeStyles({\n  color: 'grey',\n  margin: 'auto',\n  width: '1.0625rem',\n  height: '1.0625rem',\n  backgroundColor: 'transparent',\n  '&:hover': {\n    backgroundColor: 'transparent'\n  }\n});\n\n/**\n * @private\n */\nexport const newLineButtonsContainerStyle: IStyle = {\n  position: 'absolute',\n  right: '0.8rem',\n  bottom: '0.6rem',\n  gap: '0'\n};\n\n/**\n * @private\n */\nexport const sameLineButtonsContainerStyle: IStyle = {\n  alignSelf: 'end'\n};\n\n/**\n * @private\n */\nexport const inputButtonTooltipStyle = mergeStyles({\n  // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons\n  display: 'flex'\n});\n\n/**\n * @private\n */\nexport const iconWrapperStyle = mergeStyles({\n  pointerEvents: 'none'\n});\n"]}
+{"version":3,"file":"InputBoxComponent.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/InputBoxComponent.style.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnE;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,OAAO,EAAE,GAAG;CACb,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,WAAW,CAAC;IACvC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,SAAS;IACpB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,WAAW,CAAC,OAAO;IAC/B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,QAAQ;IACpB,6BAA6B,EAAE;QAC7B,QAAQ,EAAE,UAAU;KACrB;IACD,oBAAoB,EAAE;QACpB,QAAQ,EAAE,UAAU;KACrB;IACD,mBAAmB,EAAE;QACnB,QAAQ,EAAE,UAAU;KACrB;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAW;IACpD,YAAY,EAAE,MAAM;CACrB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAW;IACxC,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,GAAG;QACd,QAAQ,EAAE,SAAS;KACpB;IACD,OAAO,EAAE,EAAE;IACX,UAAU,EAAE;QACV,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,GAAG;QACd;;WAEG;QACH,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;KAC7B;IACD,KAAK,EAAE;QACL,YAAY,EAAE,SAAS;KACxB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE,WAAW;IACnB,eAAe,EAAE,aAAa;IAC9B,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAW;IACnD,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,WAAW,CAAC;IACjD,uGAAuG;IACvG,OAAO,EAAE,MAAM;CAChB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,WAAW,CAAC;IAC1C,aAAa,EAAE,MAAM;CACtB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, IStyle, FontWeights } from '@fluentui/react';\n\n/**\n * @private\n */\nexport const inputBoxWrapperStyle = mergeStyles({\n  padding: '0'\n});\n\n/**\n * @private\n */\nexport const inputBoxStyle = mergeStyles({\n  overflow: 'auto',\n  minHeight: '2.25rem', // prevents the input text box from being sized to 0px when the CallWithChatComposite chat pane is closed.\n  maxHeight: '8.25rem',\n  outline: 'red 5px',\n  fontWeight: FontWeights.regular,\n  fontSize: '0.875rem',\n  width: '100%',\n  height: '2.25rem',\n  lineHeight: '1.5rem',\n  '::-webkit-input-placeholder': {\n    fontSize: '0.875rem'\n  },\n  '::-moz-placeholder': {\n    fontSize: '0.875rem'\n  },\n  ':-moz-placeholder': {\n    fontSize: '0.875rem'\n  }\n});\n\n/**\n * @private\n */\nexport const inputBoxNewLineSpaceAffordance: IStyle = {\n  marginBottom: '2rem'\n};\n\n/**\n *\n * @private\n */\nexport const textContainerStyle: IStyle = {\n  alignSelf: 'center',\n  position: 'relative',\n  width: '100%'\n};\n\n/**\n * @private\n */\nexport const textFieldStyle: IStyle = {\n  root: {\n    width: '100%',\n    minHeight: '0',\n    fontSize: '8.25rem'\n  },\n  wrapper: {},\n  fieldGroup: {\n    outline: 'none',\n    border: 'none',\n    height: 'auto',\n    minHeight: '0',\n    /**\n     * Removing fieldGroup border to make sure no border is rendered around the text area in sendbox.\n     */\n    ':after': { border: 'none' }\n  },\n  field: {\n    borderRadius: '0.25rem'\n  }\n};\n\n/**\n * @private\n */\nexport const inputButtonStyle = mergeStyles({\n  color: 'grey',\n  margin: 'auto',\n  width: '1.0625rem',\n  height: '1.0625rem',\n  backgroundColor: 'transparent',\n  '&:hover': {\n    backgroundColor: 'transparent'\n  }\n});\n\n/**\n * @private\n */\nexport const sameLineButtonsContainerStyle: IStyle = {\n  alignSelf: 'end'\n};\n\n/**\n * @private\n */\nexport const inputButtonTooltipStyle = mergeStyles({\n  // The toolTip host container show be a flex box, so that alignItems: 'center' works for inside buttons\n  display: 'flex'\n});\n\n/**\n * @private\n */\nexport const iconWrapperStyle = mergeStyles({\n  pointerEvents: 'none'\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.9.0-alpha-202310130013",
+  "version": "1.9.0-alpha-202310140012",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -92,19 +92,19 @@
     "_by-flavor": "rushx _current-flavor && env-cmd -f ../../common/config/env/.env --use-shell"
   },
   "devDependencies": {
-    "@azure/communication-calling": "1.18.1-beta.1",
+    "@azure/communication-calling": "1.18.2-beta.1",
     "@azure/communication-calling-effects": "1.0.1",
     "@azure/communication-chat": "1.4.0-beta.2",
     "@azure/core-auth": "^1.4.0",
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
-    "@internal/calling-component-bindings": "1.9.0-alpha-202310130013",
-    "@internal/calling-stateful-client": "1.9.0-alpha-202310130013",
-    "@internal/chat-component-bindings": "1.9.0-alpha-202310130013",
-    "@internal/chat-stateful-client": "1.9.0-alpha-202310130013",
-    "@internal/fake-backends": "1.9.0-alpha-202310130013",
-    "@internal/react-components": "1.9.0-alpha-202310130013",
-    "@internal/react-composites": "1.9.0-alpha-202310130013",
+    "@internal/calling-component-bindings": "1.9.0-alpha-202310140012",
+    "@internal/calling-stateful-client": "1.9.0-alpha-202310140012",
+    "@internal/chat-component-bindings": "1.9.0-alpha-202310140012",
+    "@internal/chat-stateful-client": "1.9.0-alpha-202310140012",
+    "@internal/fake-backends": "1.9.0-alpha-202310140012",
+    "@internal/react-components": "1.9.0-alpha-202310140012",
+    "@internal/react-composites": "1.9.0-alpha-202310140012",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "^4.1.0",