npm - @azure/communication-react - Versions diffs - 1.14.0-alpha-202403050012 → 1.14.0-alpha-202403070010 - Mend

@azure/communication-react 1.14.0-alpha-202403050012 → 1.14.0-alpha-202403070010

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

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

	@@ -1 +1 @@
1	- {"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;AACzE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3G,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EACL,yBAAyB,EACzB,6BAA6B,EAC7B,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;AAqBF;;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;IAC1E,+CAA+C;IAC/C,MAAM,CAAC,kBAAkB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC,CAAC;IAChH,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,eAAe,CAClC,SAAS;IACT,+CAA+C,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,EAAE,CACzE,CAAC;IACF,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,+CAA+C;IAC/C,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,OAAO,CACL,CAAC,CAAC,kBAAkB;YACpB,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;YAC/B,oBAAC,gBAAgB,IACf,iBAAiB,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACpD,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,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;gBACvF,CAAC,GACD,CACE,CACP,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,GAAgB,EAAE;QACnC,OAAO,CACL;YACE,oBAAC,iBAAiB,kBACL,UAAU,EACrB,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,CAAC;wBACnD,EAAE,CAAC,eAAe,EAAE,CAAC;oBACvB,CAAC;gBACH,CAAC,EACD,cAAc,EAAE,GAAG,EAAE;oBACnB,aAAa;wBACX,QAAQ,CACN,SAAS,EACT,OAAO,CAAC,QAAQ;wBAChB,+CAA+C,CAAC;4BAC9C,kBAAkB;yBACnB,CACF,CAAC;gBACN,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,SAAS,EAAE,gCAAgC,EAC3C,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;gBAEjC,OAAO,CAAC,aAAa,IAAI,CACxB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,kCAAkC;oBAC5E,6BAAK,SAAS,EAAE,WAAW,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAE,6BAA6B,CAAC,IACzF,OAAO,CAAC,aAAa,CAClB,CACK,CACd;gBACD,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK;oBACrB,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;4BACZ,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;wBAC1C,CAAC,EACD,EAAE,EAAE,oBAAoB,GACxB,CACS;gBACb,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK;oBACrB,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;4BACb,aAAa;gCACX,QAAQ,CACN,SAAS,EACT,OAAO,CAAC,QAAQ;gCAChB,+CAA+C,CAAC;oCAC9C,kBAAkB;iCACnB,CACF,CAAC;4BACJ,CAAC,CAAC,eAAe,EAAE,CAAC;wBACtB,CAAC,EACD,EAAE,EAAE,mBAAmB,GACvB,CACS,CACP,EACP,+CAA+C;YAAC,mBAAmB,EAAE,CACrE,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,OAAO,CACL,oBAAC,aAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE;YACJ,SAAS,EAAE,mBAAmB,CAAC,IAAI;SACpC,EACD,IAAI,EAAE;YACJ,SAAS,EAAE,YAAY,CACrB,mBAAmB,CAAC,IAAI,EACxB,OAAO,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,EACrG,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAClE;SACF,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,SAAS,cAAc,CACrB,WAAmB;AACnB,+CAA+C;AAC/C,kBAAmC;IAEnC,+CAA+C;IAC/C,OAAO,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,IAAI,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,MAAK,CAAC,CAAC;IAC3E,OAAO,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CAAC;AACzC,CAAC;AACD,SAAS,eAAe,CACtB,WAAmB;AACnB,+CAA+C,CAAC,kBAAkC;IAElF,OAAO,cAAc,CAAC,WAAW,EAAE,+CAA+C,CAAC,kBAAkB,CAAC;QACpG,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,gBAAgB,CAAC,WAAW,CAAC;YAC/B,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,IAAI,CAAC;AACX,CAAC;AAED,+CAA+C;AAC/C,0DAA0D;AAC1D,MAAM,+BAA+B,GAAG,CAAC,OAAoB,EAA8B,EAAE;IAC3F,OAAO,OAAO,CAAC,KAAK,CAAC;AACvB,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';\nimport { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from '../styles/EditBox.styles';\nimport { InputBoxComponent } from '../InputBoxComponent';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\n/* @conditional-compile-remove(file-sharing) /\nimport { FileMetadata } from '../FileDownloadCards';\nimport {\n chatMessageFailedTagStyle,\n editChatMessageFailedTagStyle,\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 / @conditional-compile-remove(file-sharing) /\n attachmentMetadata?: 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 / @conditional-compile-remove(file-sharing) /\n const [attachmentMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n / @conditional-compile-remove(file-sharing) / attachmentMetadata ?? []\n );\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 / @conditional-compile-remove(file-sharing) /\n const onRenderFileUploads = useCallback(() => {\n return (\n !!attachmentMetadata &&\n attachmentMetadata.length > 0 && (\n <div style={{ margin: '0.25rem' }}>\n <_FileUploadCards\n activeFileUploads={attachmentMetadata?.map((file) => ({\n id: file.name,\n filename: file.name,\n progress: 1\n }))}\n onCancelFileUpload={(fileId) => {\n setAttachedFilesMetadata(attachmentMetadata?.filter((file) => file.name !== fileId));\n }}\n />\n </div>\n )\n );\n }, [attachmentMetadata]);\n\n const getContent = (): JSX.Element => {\n return (\n <>\n <InputBoxComponent\n data-ui-id=\"edit-box\"\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(\n textValue,\n message.metadata,\n / @conditional-compile-remove(file-sharing) / {\n attachmentMetadata\n }\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 className={editChatMessageButtonsStackStyle}\n tokens={{ childrenGap: '0.25rem' }}\n >\n {message.failureReason && (\n <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n {message.failureReason}\n </div>\n </Stack.Item>\n )}\n <Stack.Item align=\"end\">\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 </Stack.Item>\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n submitEnabled &&\n onSubmit(\n textValue,\n message.metadata,\n / @conditional-compile-remove(file-sharing) / {\n attachmentMetadata\n }\n );\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </Stack.Item>\n </Stack>\n {/ @conditional-compile-remove(file-sharing) / onRenderFileUploads()}\n </>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: chatMyMessageStyles.root\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n\nconst isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;\nfunction isMessageEmpty(\n messageText: string,\n / @conditional-compile-remove(file-sharing) /\n attachmentMetadata?: FileMetadata[]\n): boolean {\n / @conditional-compile-remove(file-sharing) /\n return messageText.trim().length === 0 && attachmentMetadata?.length === 0;\n return messageText.trim().length === 0;\n}\nfunction getMessageState(\n messageText: string,\n / @conditional-compile-remove(file-sharing) / attachmentMetadata: FileMetadata[]\n): MessageState {\n return isMessageEmpty(messageText, / @conditional-compile-remove(file-sharing) / attachmentMetadata)\n ? 'too short'\n : isMessageTooLong(messageText)\n ? 'too long'\n : 'OK';\n}\n\n/ @conditional-compile-remove(file-sharing) */\n// @TODO: Remove when file-sharing feature becomes stable.\nconst getMessageAttachedFilesMetadata = (message: ChatMessage): FileMetadata[] \| undefined => {\n return message.files;\n};\n"]}
1	+ {"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAc,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAClF,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;AACzE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC3G,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,OAAO,EACL,yBAAyB,EACzB,6BAA6B,EAC7B,kCAAkC,EAClC,gCAAgC,EAChC,iCAAiC,EAClC,MAAM,uCAAuC,CAAC;AAG/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACtH,+CAA+C;AAC/C,OAAO,EAAE,+BAA+B,EAAE,MAAM,6CAA6C,CAAC;AAmB9F;;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;IAC1E,+CAA+C;IAC/C,MAAM,CAAC,kBAAkB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC,CAAC;IAChH,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,CAAa,IAAI,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,eAAe,CAClC,SAAS;IACT,+CAA+C,CAAC,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,EAAE,CACzE,CAAC;IACF,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,aAAa,GAAG,WAAW,CAC/B,CAAC,OAAgB,EAAE,EAAE;QACnB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;QAC9E,OAAO,WAAW,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IAC9C,CAAC,EACD,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,CACvD,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,OAAgB,EAAE,EAAE;QACnB,OAAO,kBAAkB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,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,+CAA+C;IAC/C,MAAM,mBAAmB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC3C,OAAO,CACL,CAAC,CAAC,kBAAkB;YACpB,kBAAkB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;YAC/B,oBAAC,gBAAgB,IACf,iBAAiB,EAAE,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACpD,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,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;gBACvF,CAAC,GACD,CACE,CACP,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,GAAgB,EAAE;QACnC,OAAO,CACL;YACE,oBAAC,iBAAiB,kBACL,UAAU,EACrB,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,CAAC;wBACnD,EAAE,CAAC,eAAe,EAAE,CAAC;oBACvB,CAAC;gBACH,CAAC,EACD,cAAc,EAAE,GAAG,EAAE;oBACnB,aAAa;wBACX,QAAQ,CACN,SAAS,EACT,OAAO,CAAC,QAAQ;wBAChB,+CAA+C,CAAC;4BAC9C,kBAAkB;yBACnB,CACF,CAAC;gBACN,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,SAAS,EAAE,gCAAgC,EAC3C,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;gBAEjC,OAAO,CAAC,aAAa,IAAI,CACxB,oBAAC,KAAK,CAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,kCAAkC;oBAC5E,6BAAK,SAAS,EAAE,WAAW,CAAC,yBAAyB,CAAC,KAAK,CAAC,EAAE,6BAA6B,CAAC,IACzF,OAAO,CAAC,aAAa,CAClB,CACK,CACd;gBACD,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK;oBACrB,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;4BACZ,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;wBAC1C,CAAC,EACD,EAAE,EAAE,oBAAoB,GACxB,CACS;gBACb,oBAAC,KAAK,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK;oBACrB,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;4BACb,aAAa;gCACX,QAAQ,CACN,SAAS,EACT,OAAO,CAAC,QAAQ;gCAChB,+CAA+C,CAAC;oCAC9C,kBAAkB;iCACnB,CACF,CAAC;4BACJ,CAAC,CAAC,eAAe,EAAE,CAAC;wBACtB,CAAC,EACD,EAAE,EAAE,mBAAmB,GACvB,CACS,CACP,EACP,+CAA+C;YAAC,mBAAmB,EAAE,CACrE,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IACzG,OAAO,CACL,oBAAC,aAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE;YACJ,SAAS,EAAE,mBAAmB,CAAC,IAAI;SACpC,EACD,IAAI,EAAE;YACJ,SAAS,EAAE,YAAY,CACrB,mBAAmB,CAAC,IAAI,EACxB,OAAO,CAAC,aAAa,KAAK,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,WAAW,EACrG,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAClE;SACF,IAEA,UAAU,EAAE,CACC,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, 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';\nimport { editBoxStyle, editingButtonStyle, editBoxStyleSet, inputBoxIcon } from '../styles/EditBox.styles';\nimport { InputBoxComponent } from '../InputBoxComponent';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\n/* @conditional-compile-remove(file-sharing) /\nimport { AttachmentMetadata } from '../FileDownloadCards';\nimport {\n chatMessageFailedTagStyle,\n editChatMessageFailedTagStyle,\n chatMessageFailedTagStackItemStyle,\n editChatMessageButtonsStackStyle,\n useChatMessageEditContainerStyles\n} from '../styles/ChatMessageComponent.styles';\n/ @conditional-compile-remove(mention) /\nimport { MentionLookupOptions } from '../MentionPopover';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';\n/ @conditional-compile-remove(file-sharing) /\nimport { getMessageAttachedFilesMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';\n\n/* @private /\nexport type ChatMessageComponentAsEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n metadata?: Record<string, string>,\n options?: {\n / @conditional-compile-remove(file-sharing) /\n attachmentMetadata?: AttachmentMetadata[];\n }\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionLookupOptions?: MentionLookupOptions;\n};\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 / @conditional-compile-remove(file-sharing) /\n const [attachmentMetadata, setAttachedFilesMetadata] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<ITextField>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n / @conditional-compile-remove(file-sharing) / attachmentMetadata ?? []\n );\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 iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(inputBoxIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const editBoxStyles = useMemo(() => {\n return concatStyleSets(editBoxStyleSet, { textField: { borderColor: theme.palette.themePrimary } });\n }, [theme.palette.themePrimary]);\n\n / @conditional-compile-remove(file-sharing) /\n const onRenderFileUploads = useCallback(() => {\n return (\n !!attachmentMetadata &&\n attachmentMetadata.length > 0 && (\n <div style={{ margin: '0.25rem' }}>\n <_FileUploadCards\n activeFileUploads={attachmentMetadata?.map((file) => ({\n id: file.name,\n filename: file.name,\n progress: 1\n }))}\n onCancelFileUpload={(fileId) => {\n setAttachedFilesMetadata(attachmentMetadata?.filter((file) => file.name !== fileId));\n }}\n />\n </div>\n )\n );\n }, [attachmentMetadata]);\n\n const getContent = (): JSX.Element => {\n return (\n <>\n <InputBoxComponent\n data-ui-id=\"edit-box\"\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(\n textValue,\n message.metadata,\n / @conditional-compile-remove(file-sharing) / {\n attachmentMetadata\n }\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 className={editChatMessageButtonsStackStyle}\n tokens={{ childrenGap: '0.25rem' }}\n >\n {message.failureReason && (\n <Stack.Item grow align=\"stretch\" className={chatMessageFailedTagStackItemStyle}>\n <div className={mergeStyles(chatMessageFailedTagStyle(theme), editChatMessageFailedTagStyle)}>\n {message.failureReason}\n </div>\n </Stack.Item>\n )}\n <Stack.Item align=\"end\">\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 </Stack.Item>\n <Stack.Item align=\"end\">\n <InputBoxButton\n className={editingButtonStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n submitEnabled &&\n onSubmit(\n textValue,\n message.metadata,\n / @conditional-compile-remove(file-sharing) / {\n attachmentMetadata\n }\n );\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </Stack.Item>\n </Stack>\n {/ @conditional-compile-remove(file-sharing) */ onRenderFileUploads()}\n </>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: chatMyMessageStyles.root\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { MessageThreadStrings } from '../MessageThread';
+import { ChatMessage } from '../../types';
+import { AttachmentMetadata } from '../FileDownloadCards';
+/** @beta */
+export type ChatMessageComponentAsRichTextEditBoxProps = {
+    onCancel?: (messageId: string) => void;
+    onSubmit: (text: string, metadata?: Record<string, string>, options?: {
+        attachmentMetadata?: AttachmentMetadata[];
+    }) => void;
+    message: ChatMessage;
+    strings: MessageThreadStrings;
+};
+/**
+ * @beta
+ */
+export declare const ChatMessageComponentAsRichTextEditBox: (props: ChatMessageComponentAsRichTextEditBoxProps) => JSX.Element;
+//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.d.ts.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.js ADDED Viewed

@@ -0,0 +1,102 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { 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";
+import { useTheme } from '../../theming/FluentThemeProvider';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../styles/EditBox.styles';
+import { InputBoxButton } from '../InputBoxButton';
+import { useChatMyMessageStyles } from '../styles/MessageThread.styles';
+import { useChatMessageRichTextEditContainerStyles } from '../styles/ChatMessageComponent.styles';
+import { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';
+import { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';
+/* @conditional-compile-remove(file-sharing) */
+import { getMessageAttachedFilesMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';
+import { RichTextInputBoxComponent } from '../RichTextEditor/RichTextInputBoxComponent';
+import { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../styles/RichTextEditor.styles';
+import { RichTextSendBoxErrors } from '../RichTextEditor/RichTextSendBoxErrors';
+import { useLocale } from '../../localization';
+/**
+ * @beta
+ */
+export const ChatMessageComponentAsRichTextEditBox = (props) => {
+    const { onCancel, onSubmit, strings, message } = props;
+    const [textValue, setTextValue] = useState(message.content || '');
+    /* @conditional-compile-remove(file-sharing) */
+    const [attachmentMetadata, _] = React.useState(getMessageAttachedFilesMetadata(message));
+    const editTextFieldRef = React.useRef(null);
+    const theme = useTheme();
+    const messageState = getMessageState(textValue,
+    /* @conditional-compile-remove(file-sharing) */ attachmentMetadata !== null && attachmentMetadata !== void 0 ? attachmentMetadata : []);
+    const submitEnabled = messageState === 'OK';
+    const editContainerStyles = useChatMessageRichTextEditContainerStyles();
+    const chatMyMessageStyles = useChatMyMessageStyles();
+    const locale = useLocale().strings;
+    // TODO: Check if the focus is needed, if so use `focusOnInit` prop
+    // for Rooster component instead as this sets focus too early
+    useEffect(() => {
+        var _a;
+        (_a = editTextFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const setText = (newValue) => {
+        setTextValue(newValue !== null && newValue !== void 0 ? newValue : '');
+    };
+    const textTooLongMessage = messageState === 'too long'
+        ? _formatString(strings.editBoxTextLimit, { limitNumber: `${MAXIMUM_LENGTH_OF_MESSAGE}` })
+        : undefined;
+    const iconClassName = useCallback((isHover) => {
+        const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;
+        return mergeStyles(richTextEditBoxActionButtonIcon, { color });
+    }, [theme.palette.accent, theme.palette.neutralSecondary]);
+    const onRenderThemedCancelIcon = useCallback((isHover) => {
+        return onRenderCancelIcon(iconClassName(isHover));
+    }, [iconClassName]);
+    const onRenderThemedSubmitIcon = useCallback((isHover) => {
+        return onRenderSubmitIcon(iconClassName(isHover));
+    }, [iconClassName]);
+    const actionButtons = useMemo(() => {
+        return (React.createElement(Stack, { horizontal: true },
+            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxCancelButton, tooltipContent: strings.editBoxCancelButton, onRenderIcon: onRenderThemedCancelIcon, onClick: () => {
+                    onCancel && onCancel(message.messageId);
+                }, id: 'dismissIconWrapper' }),
+            React.createElement(InputBoxButton, { className: richTextActionButtonsStyle, ariaLabel: strings.editBoxSubmitButton, tooltipContent: strings.editBoxSubmitButton, onRenderIcon: onRenderThemedSubmitIcon, onClick: (e) => {
+                    submitEnabled &&
+                        onSubmit(textValue, message.metadata,
+                        /* @conditional-compile-remove(file-sharing) */ {
+                            attachmentMetadata
+                        });
+                    e.stopPropagation();
+                }, id: 'submitIconWrapper' })));
+    }, [
+        /* @conditional-compile-remove(file-sharing) */ attachmentMetadata,
+        message.messageId,
+        message.metadata,
+        onCancel,
+        onRenderThemedCancelIcon,
+        onRenderThemedSubmitIcon,
+        onSubmit,
+        strings.editBoxCancelButton,
+        strings.editBoxSubmitButton,
+        submitEnabled,
+        textValue
+    ]);
+    const richTextLocaleStrings = useMemo(() => {
+        /* @conditional-compile-remove(rich-text-editor) */
+        return locale.richTextSendBox;
+        return locale.sendBox;
+    }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);
+    const getContent = () => {
+        return (React.createElement(Stack, { className: mergeStyles(editBoxWidthStyles) },
+            React.createElement(RichTextSendBoxErrors, { textTooLongMessage: textTooLongMessage, systemMessage: message.failureReason }),
+            React.createElement(RichTextInputBoxComponent, { placeholderText: strings.editBoxPlaceholderText, onChange: setText, editorComponentRef: editTextFieldRef, initialContent: message.content, strings: richTextLocaleStrings, disabled: false, actionComponents: actionButtons, richTextEditorStyleProps: editBoxRichTextEditorStyle, supportHorizontalLayout: false })));
+    };
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    return (React.createElement(ChatMyMessage, { attached: attached, root: {
+            className: chatMyMessageStyles.root
+        }, body: {
+            className: mergeClasses(editContainerStyles.body, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
+        } }, getContent()));
+};
+//# sourceMappingURL=ChatMessageComponentAsRichTextEditBox.js.map

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ChatMessageComponentAsRichTextEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsRichTextEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { 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';\nimport { editBoxWidthStyles, richTextEditBoxActionButtonIcon } from '../styles/EditBox.styles';\nimport { InputBoxButton } from '../InputBoxButton';\nimport { MessageThreadStrings } from '../MessageThread';\nimport { useChatMyMessageStyles } from '../styles/MessageThread.styles';\nimport { ChatMessage } from '../../types';\nimport { _FileUploadCards } from '../FileUploadCards';\n/* @conditional-compile-remove(file-sharing) */\nimport { AttachmentMetadata } from '../FileDownloadCards';\nimport { useChatMessageRichTextEditContainerStyles } from '../styles/ChatMessageComponent.styles';\nimport { MAXIMUM_LENGTH_OF_MESSAGE } from '../utils/SendBoxUtils';\nimport { getMessageState, onRenderCancelIcon, onRenderSubmitIcon } from '../utils/ChatMessageComponentAsEditBoxUtils';\n/* @conditional-compile-remove(file-sharing) */\nimport { getMessageAttachedFilesMetadata } from '../utils/ChatMessageComponentAsEditBoxUtils';\nimport { RichTextEditorComponentRef } from '../RichTextEditor/RichTextEditor';\nimport { RichTextInputBoxComponent } from '../RichTextEditor/RichTextInputBoxComponent';\nimport { editBoxRichTextEditorStyle, richTextActionButtonsStyle } from '../styles/RichTextEditor.styles';\nimport { RichTextSendBoxErrors } from '../RichTextEditor/RichTextSendBoxErrors';\nimport { useLocale } from '../../localization';\n\n/** @beta */\nexport type ChatMessageComponentAsRichTextEditBoxProps = {\n onCancel?: (messageId: string) => void;\n onSubmit: (\n text: string,\n metadata?: Record<string, string>,\n options?: {\n /* @conditional-compile-remove(file-sharing) */\n attachmentMetadata?: AttachmentMetadata[];\n }\n ) => void;\n message: ChatMessage;\n strings: MessageThreadStrings;\n};\n\n/**\n * @beta\n */\nexport const ChatMessageComponentAsRichTextEditBox = (\n props: ChatMessageComponentAsRichTextEditBoxProps\n): JSX.Element => {\n const { onCancel, onSubmit, strings, message } = props;\n\n const [textValue, setTextValue] = useState<string>(message.content || '');\n /* @conditional-compile-remove(file-sharing) */\n const [attachmentMetadata, _] = React.useState(getMessageAttachedFilesMetadata(message));\n const editTextFieldRef = React.useRef<RichTextEditorComponentRef>(null);\n const theme = useTheme();\n const messageState = getMessageState(\n textValue,\n /* @conditional-compile-remove(file-sharing) */ attachmentMetadata ?? []\n );\n const submitEnabled = messageState === 'OK';\n\n const editContainerStyles = useChatMessageRichTextEditContainerStyles();\n const chatMyMessageStyles = useChatMyMessageStyles();\n const locale = useLocale().strings;\n\n // TODO: Check if the focus is needed, if so use `focusOnInit` prop\n // for Rooster component instead as this sets focus too early\n useEffect(() => {\n editTextFieldRef.current?.focus();\n }, []);\n\n const setText = (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 iconClassName = useCallback(\n (isHover: boolean) => {\n const color = isHover ? theme.palette.accent : theme.palette.neutralSecondary;\n return mergeStyles(richTextEditBoxActionButtonIcon, { color });\n },\n [theme.palette.accent, theme.palette.neutralSecondary]\n );\n\n const onRenderThemedCancelIcon = useCallback(\n (isHover: boolean) => {\n return onRenderCancelIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const onRenderThemedSubmitIcon = useCallback(\n (isHover: boolean) => {\n return onRenderSubmitIcon(iconClassName(isHover));\n },\n [iconClassName]\n );\n\n const actionButtons = useMemo(() => {\n return (\n <Stack horizontal>\n <InputBoxButton\n className={richTextActionButtonsStyle}\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={richTextActionButtonsStyle}\n ariaLabel={strings.editBoxSubmitButton}\n tooltipContent={strings.editBoxSubmitButton}\n onRenderIcon={onRenderThemedSubmitIcon}\n onClick={(e) => {\n submitEnabled &&\n onSubmit(\n textValue,\n message.metadata,\n /* @conditional-compile-remove(file-sharing) */ {\n attachmentMetadata\n }\n );\n e.stopPropagation();\n }}\n id={'submitIconWrapper'}\n />\n </Stack>\n );\n }, [\n /* @conditional-compile-remove(file-sharing) */ attachmentMetadata,\n message.messageId,\n message.metadata,\n onCancel,\n onRenderThemedCancelIcon,\n onRenderThemedSubmitIcon,\n onSubmit,\n strings.editBoxCancelButton,\n strings.editBoxSubmitButton,\n submitEnabled,\n textValue\n ]);\n const richTextLocaleStrings = useMemo(() => {\n /* @conditional-compile-remove(rich-text-editor) */\n return locale.richTextSendBox;\n return locale.sendBox;\n }, [/* @conditional-compile-remove(rich-text-editor) */ locale.richTextSendBox, locale.sendBox]);\n\n const getContent = (): JSX.Element => {\n return (\n <Stack className={mergeStyles(editBoxWidthStyles)}>\n <RichTextSendBoxErrors textTooLongMessage={textTooLongMessage} systemMessage={message.failureReason} />\n <RichTextInputBoxComponent\n placeholderText={strings.editBoxPlaceholderText}\n onChange={setText}\n editorComponentRef={editTextFieldRef}\n initialContent={message.content}\n strings={richTextLocaleStrings}\n disabled={false}\n actionComponents={actionButtons}\n richTextEditorStyleProps={editBoxRichTextEditorStyle}\n supportHorizontalLayout={false}\n />\n </Stack>\n );\n };\n\n const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';\n return (\n <ChatMyMessage\n attached={attached}\n root={{\n className: chatMyMessageStyles.root\n }}\n body={{\n className: mergeClasses(\n editContainerStyles.body,\n attached !== 'top' ? editContainerStyles.bodyAttached : undefined\n )\n }}\n >\n {getContent()}\n </ChatMyMessage>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js CHANGED Viewed

@@ -105,7 +105,7 @@ const processHtmlToReact = (props) => {
     var _a;
     const options = {
         transform(reactNode, domNode) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             if (domNode instanceof DOMElement && domNode.attribs) {
                 // Transform custom rendering of mentions
                 /* @conditional-compile-remove(mention) */
@@ -122,19 +122,13 @@ const processHtmlToReact = (props) => {
                 }
                 // Transform inline images
                 /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                if (domNode.name &&
-                    domNode.name === 'img' &&
-                    domNode.attribs &&
-                    domNode.attribs.id &&
-                    ((_c = props.message.inlineImages) === null || _c === void 0 ? void 0 : _c.find((metadata) => {
-                        return metadata.id === domNode.attribs.id;
-                    }))) {
+                if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {
                     domNode.attribs['aria-label'] = domNode.attribs.name;
                     const imgProps = attributesToProps(domNode.attribs);
                     /* @conditional-compile-remove(image-overlay) */
                     const inlineImageProps = { messageId: props.message.messageId, imgAttrs: imgProps };
                     /* @conditional-compile-remove(image-overlay) */
-                    return ((_d = props.inlineImageOptions) === null || _d === void 0 ? void 0 : _d.onRenderInlineImage)
+                    return ((_c = props.inlineImageOptions) === null || _c === void 0 ? void 0 : _c.onRenderInlineImage)
                         ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)
                         : defaultOnRenderInlineImage(inlineImageProps);
                     return React.createElement("img", Object.assign({ key: imgProps.id }, imgProps));

package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(image-overlay) /\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n InlineImage's state, as reflected in the UI.\n \n @beta\n /\nexport interface InlineImage {\n /* ID of the message that the inline image is belonged to /\n messageId: string;\n /* Attributes of the inline image /\n imgAttrs: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Options to display inline image in the inline image scenario.\n \n @beta\n /\nexport interface InlineImageOptions {\n /\n Optional callback to render an inline image of in a message.\n /\n onRenderInlineImage?: (\n inlineImage: InlineImage,\n defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n ) => JSX.Element;\n}\n\n/* @private /\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>\n );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\n/\n @private\n /\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent \|\| span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContent(props.message.content \|\| '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n if (props.message.content) {\n // Replace all <img> tags with 'image' for aria.\n const parsedContent = DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: ['img'],\n RETURN_DOM_FRAGMENT: true\n });\n\n parsedContent.childNodes.forEach((child) => {\n if (child.nodeName.toLowerCase() !== 'img') {\n return;\n }\n const imageTextNode = document.createElement('div');\n imageTextNode.innerHTML = 'image ';\n parsedContent.replaceChild(imageTextNode, child);\n });\n\n // Strip all html tags from the content for aria.\n const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n\n return props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: message\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n }\n return undefined;\n};\n\n/ @conditional-compile-remove(image-overlay) /\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return (\n <img key={inlineImage.imgAttrs.id} tabIndex={0} data-ui-id={inlineImage.imgAttrs.id} {...inlineImage.imgAttrs} />\n );\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const options: HTMLReactParserOptions = {\n transform(reactNode, domNode) {\n if (domNode instanceof DOMElement && domNode.attribs) {\n // Transform custom rendering of mentions\n / @conditional-compile-remove(mention) /\n if (domNode.name === 'msft-mention') {\n const { id } = domNode.attribs;\n const mention: Mention = {\n id: id,\n displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n };\n if (props.mentionDisplayOptions?.onRenderMention) {\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return defaultOnMentionRender(mention);\n }\n\n // Transform inline images\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n if (\n domNode.name &&\n domNode.name === 'img' &&\n domNode.attribs &&\n domNode.attribs.id &&\n props.message.inlineImages?.find((metadata) => {\n return metadata.id === domNode.attribs.id;\n })\n ) {\n domNode.attribs['aria-label'] = domNode.attribs.name;\n const imgProps = attributesToProps(domNode.attribs);\n / @conditional-compile-remove(image-overlay) /\n const inlineImageProps: InlineImage = { messageId: props.message.messageId, imgAttrs: imgProps };\n\n / @conditional-compile-remove(image-overlay) */\n return props.inlineImageOptions?.onRenderInlineImage\n ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n : defaultOnRenderInlineImage(inlineImageProps);\n\n return <img key={imgProps.id as string} {...imgProps} />;\n }\n }\n // Pass through the original node\n return reactNode as unknown as JSX.Element;\n }\n };\n return <>{parse(props.message.content ?? '', options)}</>;\n};\n"]}
1	+ {"version":3,"file":"ChatMessageContent.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageContent.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport parse, { HTMLReactParserOptions, Element as DOMElement } from 'html-react-parser';\n/* @conditional-compile-remove(teams-inline-images-and-file-sharing) /\nimport { attributesToProps } from 'html-react-parser';\nimport Linkify from 'react-linkify';\nimport { ChatMessage } from '../../types/ChatMessage';\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { BlockedMessage } from '../../types/ChatMessage';\nimport { Link } from '@fluentui/react';\n/ @conditional-compile-remove(mention) /\nimport { MentionDisplayOptions, Mention } from '../MentionPopover';\n\n/ @conditional-compile-remove(data-loss-prevention) /\nimport { FontIcon, Stack } from '@fluentui/react';\nimport { MessageThreadStrings } from '../MessageThread';\nimport LiveMessage from '../Announcer/LiveMessage';\n/ @conditional-compile-remove(mention) /\nimport { defaultOnMentionRender } from './MentionRenderer';\nimport DOMPurify from 'dompurify';\n\ntype ChatMessageContentProps = {\n message: ChatMessage;\n strings: MessageThreadStrings;\n / @conditional-compile-remove(mention) /\n mentionDisplayOptions?: MentionDisplayOptions;\n / @conditional-compile-remove(image-overlay) /\n inlineImageOptions?: InlineImageOptions;\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\ntype BlockedMessageContentProps = {\n message: BlockedMessage;\n strings: MessageThreadStrings;\n};\n\ntype MessageContentWithLiveAriaProps = {\n message: ChatMessage \| / @conditional-compile-remove(data-loss-prevention) / BlockedMessage;\n liveMessage: string;\n ariaLabel?: string;\n content: JSX.Element;\n};\n\n/ @conditional-compile-remove(image-overlay) /\n/\n InlineImage's state, as reflected in the UI.\n \n @beta\n /\nexport interface InlineImage {\n /* ID of the message that the inline image is belonged to /\n messageId: string;\n /* Attributes of the inline image /\n imgAttrs: React.ImgHTMLAttributes<HTMLImageElement>;\n}\n\n/ @conditional-compile-remove(image-overlay) /\n/\n Options to display inline image in the inline image scenario.\n \n @beta\n /\nexport interface InlineImageOptions {\n /\n Optional callback to render an inline image of in a message.\n /\n onRenderInlineImage?: (\n inlineImage: InlineImage,\n defaultOnRender: (inlineImage: InlineImage) => JSX.Element\n ) => JSX.Element;\n}\n\n/* @private /\nexport const ChatMessageContent = (props: ChatMessageContentProps): JSX.Element => {\n switch (props.message.contentType) {\n case 'text':\n return MessageContentAsText(props);\n case 'html':\n return MessageContentAsRichTextHTML(props);\n case 'richtext/html':\n return MessageContentAsRichTextHTML(props);\n default:\n console.warn('unknown message content type');\n return <></>;\n }\n};\n\nconst MessageContentWithLiveAria = (props: MessageContentWithLiveAriaProps): JSX.Element => {\n return (\n <div data-ui-status={props.message.status} role=\"text\" aria-label={props.ariaLabel}>\n <LiveMessage message={props.liveMessage} ariaLive=\"polite\" />\n {props.content}\n </div>\n );\n};\n\nconst MessageContentAsRichTextHTML = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={processHtmlToReact(props)}\n />\n );\n};\n\nconst MessageContentAsText = (props: ChatMessageContentProps): JSX.Element => {\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={generateLiveMessage(props)}\n ariaLabel={messageContentAriaText(props)}\n content={\n <Linkify\n componentDecorator={(decoratedHref: string, decoratedText: string, key: number) => {\n return (\n <Link target=\"_blank\" href={decoratedHref} key={key}>\n {decoratedText}\n </Link>\n );\n }}\n >\n {props.message.content}\n </Linkify>\n }\n />\n );\n};\n\n/ @conditional-compile-remove(data-loss-prevention) /\n/\n @private\n /\nexport const BlockedMessageContent = (props: BlockedMessageContentProps): JSX.Element => {\n const Icon: JSX.Element = <FontIcon iconName={'DataLossPreventionProhibited'} />;\n const blockedMessage =\n props.message.warningText === undefined ? props.strings.blockedWarningText : props.message.warningText;\n const blockedMessageLink = props.message.link;\n const blockedMessageLinkText = blockedMessageLink\n ? props.message.linkText ?? props.strings.blockedWarningLinkText\n : '';\n\n const liveAuthor =\n props.message.mine \|\| props.message.senderDisplayName === undefined ? '' : props.message.senderDisplayName;\n const liveBlockedWarningText = `${liveAuthor} ${blockedMessage} ${blockedMessageLinkText}`;\n return (\n <MessageContentWithLiveAria\n message={props.message}\n liveMessage={liveBlockedWarningText}\n ariaLabel={liveBlockedWarningText}\n content={\n <Stack horizontal wrap>\n {Icon}\n {blockedMessage && <p>{blockedMessage}</p>}\n {blockedMessageLink && (\n <Link target={'_blank'} href={blockedMessageLink}>\n {blockedMessageLinkText}\n </Link>\n )}\n </Stack>\n }\n />\n );\n};\n\n// https://stackoverflow.com/questions/28899298/extract-the-text-out-of-html-string-using-javascript\nconst extractContent = (s: string): string => {\n const span = document.createElement('span');\n span.innerHTML = s;\n return span.textContent \|\| span.innerText;\n};\n\nconst generateLiveMessage = (props: ChatMessageContentProps): string => {\n const liveAuthor = _formatString(props.strings.liveAuthorIntro, { author: `${props.message.senderDisplayName}` });\n\n return `${props.message.editedOn ? props.strings.editedTag : ''} ${\n props.message.mine ? '' : liveAuthor\n } ${extractContent(props.message.content \|\| '')} `;\n};\n\nconst messageContentAriaText = (props: ChatMessageContentProps): string \| undefined => {\n if (props.message.content) {\n // Replace all <img> tags with 'image' for aria.\n const parsedContent = DOMPurify.sanitize(props.message.content, {\n ALLOWED_TAGS: ['img'],\n RETURN_DOM_FRAGMENT: true\n });\n\n parsedContent.childNodes.forEach((child) => {\n if (child.nodeName.toLowerCase() !== 'img') {\n return;\n }\n const imageTextNode = document.createElement('div');\n imageTextNode.innerHTML = 'image ';\n parsedContent.replaceChild(imageTextNode, child);\n });\n\n // Strip all html tags from the content for aria.\n const message = DOMPurify.sanitize(parsedContent, { ALLOWED_TAGS: [] });\n\n return props.message.mine\n ? _formatString(props.strings.messageContentMineAriaText, {\n message: message\n })\n : _formatString(props.strings.messageContentAriaText, {\n author: `${props.message.senderDisplayName}`,\n message: message\n });\n }\n return undefined;\n};\n\n/ @conditional-compile-remove(image-overlay) /\nconst defaultOnRenderInlineImage = (inlineImage: InlineImage): JSX.Element => {\n return (\n <img key={inlineImage.imgAttrs.id} tabIndex={0} data-ui-id={inlineImage.imgAttrs.id} {...inlineImage.imgAttrs} />\n );\n};\n\nconst processHtmlToReact = (props: ChatMessageContentProps): JSX.Element => {\n const options: HTMLReactParserOptions = {\n transform(reactNode, domNode) {\n if (domNode instanceof DOMElement && domNode.attribs) {\n // Transform custom rendering of mentions\n / @conditional-compile-remove(mention) /\n if (domNode.name === 'msft-mention') {\n const { id } = domNode.attribs;\n const mention: Mention = {\n id: id,\n displayText: (domNode.children[0] as unknown as Text).nodeValue ?? ''\n };\n if (props.mentionDisplayOptions?.onRenderMention) {\n return props.mentionDisplayOptions.onRenderMention(mention, defaultOnMentionRender);\n }\n return defaultOnMentionRender(mention);\n }\n\n // Transform inline images\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n if (domNode.name && domNode.name === 'img' && domNode.attribs && domNode.attribs.id) {\n domNode.attribs['aria-label'] = domNode.attribs.name;\n const imgProps = attributesToProps(domNode.attribs);\n / @conditional-compile-remove(image-overlay) /\n const inlineImageProps: InlineImage = { messageId: props.message.messageId, imgAttrs: imgProps };\n\n / @conditional-compile-remove(image-overlay) */\n return props.inlineImageOptions?.onRenderInlineImage\n ? props.inlineImageOptions.onRenderInlineImage(inlineImageProps, defaultOnRenderInlineImage)\n : defaultOnRenderInlineImage(inlineImageProps);\n\n return <img key={imgProps.id as string} {...imgProps} />;\n }\n }\n // Pass through the original node\n return reactNode as unknown as JSX.Element;\n }\n };\n return <>{parse(props.message.content ?? '', options)}</>;\n};\n"]}

package/dist/dist-esm/react-components/src/components/FileDownloadCards.d.ts CHANGED Viewed

@@ -9,8 +9,7 @@ export type ChatAttachmentType = 'unknown' | /* @conditional-compile-remove(team
  *
  * @beta
  */
-export interface FileMetadata {
-    attachmentType: 'file';
+export interface AttachmentMetadata {
     /**
      * Extension hint, useful for rendering a specific icon.
      * An unknown or empty extension will be rendered as a generic icon.
@@ -31,32 +30,6 @@ export interface FileMetadata {
     url: string;
     payload?: Record<string, string>;
 }
-/**
- * Metadata for rendering images inline with a message.
- * This does not include images attached as files.
- * @beta
- */
-export interface InlineImageMetadata {
-    attachmentType: 'inlineImage';
-    /**
-     * Unique ID of the attachment.
-     */
-    id: string;
-    previewUrl?: string;
-    /**
-     * Download URL for the full resolution version.
-     */
-    url: string;
-    /**
-     * Optional fetched Image source fot the full resolution version.
-     */
-    fullSizeImageSrc?: string;
-}
-/**
- * Metadata containing information about the uploaded file.
- * @beta
- */
-export type AttachmentMetadata = FileMetadata | /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ InlineImageMetadata;
 /**
  * Strings of _FileDownloadCards that can be overridden.
  *

package/dist/dist-esm/react-components/src/components/FileDownloadCards.js CHANGED Viewed

@@ -34,16 +34,11 @@ export const _FileDownloadCards = (props) => {
         var _a, _b;
         return (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile) !== null && _b !== void 0 ? _b : localeStrings.downloadFile;
     }, [(_a = props.strings) === null || _a === void 0 ? void 0 : _a.downloadFile, localeStrings.downloadFile]);
-    const isFileSharingAttachment = useCallback((attachment) => {
-        /* @conditional-compile-remove(file-sharing) */
-        return attachment.attachmentType === 'file';
-        return false;
-    }, []);
     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
     const isShowDownloadIcon = useCallback((attachment) => {
         var _a;
         /* @conditional-compile-remove(file-sharing) */
-        return attachment.attachmentType === 'file' && ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
+        return ((_a = attachment.payload) === null || _a === void 0 ? void 0 : _a.teamsFileAttachment) !== 'true';
         return true;
     }, []);
     const fileCardGroupDescription = useMemo(() => () => {
@@ -51,12 +46,12 @@ export const _FileDownloadCards = (props) => {
         const fileGroupLocaleString = (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.fileCardGroupMessage) !== null && _b !== void 0 ? _b : localeStrings.fileCardGroupMessage;
         /* @conditional-compile-remove(file-sharing) */
         return _formatString(fileGroupLocaleString, {
-            fileCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.filter(isFileSharingAttachment).length) !== null && _c !== void 0 ? _c : 0}`
+            fileCount: `${(_c = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _c !== void 0 ? _c : 0}`
         });
         return _formatString(fileGroupLocaleString, {
             fileCount: `${(_d = fileMetadata === null || fileMetadata === void 0 ? void 0 : fileMetadata.length) !== null && _d !== void 0 ? _d : 0}`
         });
-    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]);
+    }, [(_b = props.strings) === null || _b === void 0 ? void 0 : _b.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]);
     const fileDownloadHandler = useCallback((userId, file) => __awaiter(void 0, void 0, void 0, function* () {
         if (!props.downloadHandler) {
             window.open(file.url, '_blank', 'noopener,noreferrer');
@@ -80,19 +75,12 @@ export const _FileDownloadCards = (props) => {
     }), [props]);
     if (!fileMetadata ||
         fileMetadata.length === 0 ||
-        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata.some(isFileSharingAttachment)) {
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ !fileMetadata) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement("div", { style: fileDownloadCardsStyle, "data-ui-id": "file-download-card-group" },
         React.createElement(_FileCardGroup, { ariaLabel: fileCardGroupDescription() }, fileMetadata &&
-            fileMetadata
-                .filter((attachment) => {
-                /* @conditional-compile-remove(file-sharing) */
-                return isFileSharingAttachment(attachment);
-                return true;
-            })
-                .map((file) => file)
-                .map((file) => (React.createElement(TooltipHost, { content: downloadFileButtonString(), key: file.name },
+            fileMetadata.map((file) => (React.createElement(TooltipHost, { content: downloadFileButtonString(), key: file.name },
                 React.createElement(_FileCard, { fileName: file.name, key: file.name, fileExtension: file.extension, actionIcon: showSpinner ? (React.createElement(Spinner, { size: SpinnerSize.medium, "aria-live": 'polite', role: 'status' })) : true &&
                         /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ isShowDownloadIcon(file) ? (React.createElement(IconButton, { className: iconButtonClassName, ariaLabel: downloadFileButtonString() },
                         React.createElement(DownloadIconTrampoline, null))) : undefined, actionHandler: () => fileDownloadHandler(userId, file) })))))));

package/dist/dist-esm/react-components/src/components/FileDownloadCards.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) /\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/ @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n/\n Represents the type of attachment\n * @beta\n /\nexport type ChatAttachmentType =\n \| 'unknown'\n \| / @conditional-compile-remove(teams-inline-images-and-file-sharing) / 'inlineImage'\n \| / @conditional-compile-remove(file-sharing) / 'file';\n\n/\n Metadata containing basic information about the uploaded file.\n \n @beta\n /\nexport interface FileMetadata {\n / @conditional-compile-remove(file-sharing) /\n attachmentType: 'file';\n /\n Extension hint, useful for rendering a specific icon.\n * An unknown or empty extension will be rendered as a generic icon.\n * Example: `pdf`\n /\n extension: string;\n /\n Unique ID of the file.\n /\n / @conditional-compile-remove(file-sharing) /\n id: string;\n /\n File name to be displayed.\n /\n name: string;\n /\n Download URL for the file.\n /\n url: string;\n / @conditional-compile-remove(file-sharing) /\n /\n * Optional dictionary of meta data associated with the file.\n /\n payload?: Record<string, string>;\n}\n\n/ @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n/\n Metadata for rendering images inline with a message.\n * This does not include images attached as files.\n * @beta\n /\nexport interface InlineImageMetadata {\n /\n * Type of the attachment\n /\n attachmentType: 'inlineImage';\n /\n Unique ID of the attachment.\n /\n id: string;\n /\n * Preview URL for low resolution version.\n /\n previewUrl?: string;\n /\n Download URL for the full resolution version.\n /\n url: string;\n /\n Optional fetched Image source fot the full resolution version.\n /\n fullSizeImageSrc?: string;\n}\n\n/\n Metadata containing information about the uploaded file.\n * @beta\n /\nexport type AttachmentMetadata =\n \| FileMetadata\n \| / @conditional-compile-remove(teams-inline-images-and-file-sharing) / InlineImageMetadata;\n\n/\n Strings of _FileDownloadCards that can be overridden.\n \n @internal\n /\nexport interface _FileDownloadCardsStrings {\n /* Aria label to notify user when focus is on file download button. /\n downloadFile: string;\n fileCardGroupMessage: string;\n}\n\n/\n @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n /\nexport interface FileDownloadError {\n /* The error message to display in the UI /\n errorMessage: string;\n}\n\n/\n @beta\n \n A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n \n @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n \n const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n \n ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.\n /\nexport type FileDownloadHandler = (\n userId: string,\n fileMetadata: AttachmentMetadata\n) => Promise<URL \| FileDownloadError>;\n\n/\n @internal\n /\nexport interface _FileDownloadCardsProps {\n /\n User id of the local participant\n /\n userId: string;\n /\n A chat message metadata that includes file metadata\n /\n fileMetadata?: AttachmentMetadata[];\n /\n A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n /\n downloadHandler?: FileDownloadHandler;\n /\n Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n /\n onDownloadErrorMessage?: (errMsg: string) => void;\n /\n Optional aria label strings for file download cards\n /\n strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/\n @internal\n /\nexport const _FileDownloadCards = (props: _FileDownloadCardsProps): JSX.Element => {\n const { userId, fileMetadata } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n\n const downloadFileButtonString = useMemo(\n () => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n },\n [props.strings?.downloadFile, localeStrings.downloadFile]\n );\n\n const isFileSharingAttachment = useCallback((attachment: AttachmentMetadata): boolean => {\n / @conditional-compile-remove(file-sharing) /\n return attachment.attachmentType === 'file';\n return false;\n }, []);\n\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n / @conditional-compile-remove(file-sharing) /\n return attachment.attachmentType === 'file' && attachment.payload?.teamsFileAttachment !== 'true';\n return true;\n }, []);\n\n const fileCardGroupDescription = useMemo(\n () => () => {\n const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n / @conditional-compile-remove(file-sharing) /\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.filter(isFileSharingAttachment).length ?? 0}`\n });\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n },\n [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata, isFileSharingAttachment]\n );\n\n const fileDownloadHandler = useCallback(\n async (userId: string, file: AttachmentMetadata) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n },\n [props]\n );\n if (\n !fileMetadata \|\|\n fileMetadata.length === 0 \|\|\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) / !fileMetadata.some(isFileSharingAttachment)\n ) {\n return <></>;\n }\n\n return (\n <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n {fileMetadata &&\n fileMetadata\n .filter((attachment) => {\n / @conditional-compile-remove(file-sharing) /\n return isFileSharingAttachment(attachment);\n return true;\n })\n .map((file) => file as unknown as FileMetadata)\n .map((file) => (\n <TooltipHost content={downloadFileButtonString()} key={file.name}>\n <_FileCard\n fileName={file.name}\n key={file.name}\n fileExtension={file.extension}\n actionIcon={\n showSpinner ? (\n <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n ) : true &&\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) / isShowDownloadIcon(\n file as unknown as AttachmentMetadata\n ) ? (\n <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton>\n ) : undefined\n }\n actionHandler={() => fileDownloadHandler(userId, file as unknown as AttachmentMetadata)}\n />\n </TooltipHost>\n ))}\n </_FileCardGroup>\n </div>\n );\n};\n\n/\n @private\n /\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n / @conditional-compile-remove(file-sharing) */\n return useLocale().strings.messageThread;\n return { downloadFile: '', fileCardGroupMessage: '' };\n};\n"]}
1	+ {"version":3,"file":"FileDownloadCards.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/FileDownloadCards.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { Icon, IconButton, Spinner, SpinnerSize, TooltipHost } from '@fluentui/react';\nimport React, { useCallback, useState } from 'react';\nimport { useMemo } from 'react';\n/* @conditional-compile-remove(file-sharing) /\nimport { useLocale } from '../localization';\nimport { _FileCard } from './FileCard';\nimport { _FileCardGroup } from './FileCardGroup';\nimport { iconButtonClassName } from './styles/IconButton.styles';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/ @conditional-compile-remove(file-sharing) @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n/\n Represents the type of attachment\n * @beta\n /\nexport type ChatAttachmentType =\n \| 'unknown'\n \| / @conditional-compile-remove(teams-inline-images-and-file-sharing) / 'inlineImage'\n \| / @conditional-compile-remove(file-sharing) / 'file';\n\n/\n Metadata containing basic information about the uploaded file.\n \n @beta\n /\nexport interface AttachmentMetadata {\n /\n Extension hint, useful for rendering a specific icon.\n * An unknown or empty extension will be rendered as a generic icon.\n * Example: `pdf`\n /\n extension: string;\n /\n Unique ID of the file.\n /\n / @conditional-compile-remove(file-sharing) /\n id: string;\n /\n File name to be displayed.\n /\n name: string;\n /\n Download URL for the file.\n /\n url: string;\n / @conditional-compile-remove(file-sharing) /\n /\n * Optional dictionary of meta data associated with the file.\n /\n payload?: Record<string, string>;\n}\n\n/\n Strings of _FileDownloadCards that can be overridden.\n \n @internal\n /\nexport interface _FileDownloadCardsStrings {\n /* Aria label to notify user when focus is on file download button. /\n downloadFile: string;\n fileCardGroupMessage: string;\n}\n\n/\n @beta\n * A file download error returned via a {@link FileDownloadHandler}.\n * This error message is used to render an error message in the UI.\n /\nexport interface FileDownloadError {\n /* The error message to display in the UI /\n errorMessage: string;\n}\n\n/\n @beta\n \n A callback function for handling file downloads.\n * The function needs to return a promise that resolves to a file download URL.\n * If the promise is rejected, the {@link Error.message} will be used to display an error message to the user.\n \n @example\n * ```ts\n * const fileDownloadHandler: FileDownloadHandler = async (userId, fileData) => {\n * if (isUnauthorizedUser(userId)) {\n * return { errorMessage: 'You don’t have permission to download this file.' };\n * } else {\n * return new URL(fileData.url);\n * }\n * }\n \n const App = () => (\n * <ChatComposite\n * ...\n * fileSharing={{\n * fileDownloadHandler: fileDownloadHandler\n * }}\n * />\n * )\n \n ```\n * @param userId - The user ID of the user downloading the file.\n * @param fileMetadata - The {@link AttachmentMetadata} containing file `url`, `extension` and `name`.\n /\nexport type FileDownloadHandler = (\n userId: string,\n fileMetadata: AttachmentMetadata\n) => Promise<URL \| FileDownloadError>;\n\n/\n @internal\n /\nexport interface _FileDownloadCardsProps {\n /\n User id of the local participant\n /\n userId: string;\n /\n A chat message metadata that includes file metadata\n /\n fileMetadata?: AttachmentMetadata[];\n /\n A function of type {@link FileDownloadHandler} for handling file downloads.\n * If the function is not specified, the file's `url` will be opened in a new tab to\n * initiate the download.\n /\n downloadHandler?: FileDownloadHandler;\n /\n Optional callback that runs if downloadHandler returns {@link FileDownloadError}.\n /\n onDownloadErrorMessage?: (errMsg: string) => void;\n /\n Optional aria label strings for file download cards\n /\n strings?: _FileDownloadCardsStrings;\n}\n\nconst fileDownloadCardsStyle = {\n marginTop: '0.25rem'\n};\n\nconst actionIconStyle = { height: '1rem' };\n\n/\n @internal\n /\nexport const _FileDownloadCards = (props: _FileDownloadCardsProps): JSX.Element => {\n const { userId, fileMetadata } = props;\n const [showSpinner, setShowSpinner] = useState(false);\n const localeStrings = useLocaleStringsTrampoline();\n\n const downloadFileButtonString = useMemo(\n () => () => {\n return props.strings?.downloadFile ?? localeStrings.downloadFile;\n },\n [props.strings?.downloadFile, localeStrings.downloadFile]\n );\n\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) /\n const isShowDownloadIcon = useCallback((attachment: AttachmentMetadata): boolean => {\n / @conditional-compile-remove(file-sharing) /\n return attachment.payload?.teamsFileAttachment !== 'true';\n return true;\n }, []);\n\n const fileCardGroupDescription = useMemo(\n () => () => {\n const fileGroupLocaleString = props.strings?.fileCardGroupMessage ?? localeStrings.fileCardGroupMessage;\n / @conditional-compile-remove(file-sharing) /\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n return _formatString(fileGroupLocaleString, {\n fileCount: `${fileMetadata?.length ?? 0}`\n });\n },\n [props.strings?.fileCardGroupMessage, localeStrings.fileCardGroupMessage, fileMetadata]\n );\n\n const fileDownloadHandler = useCallback(\n async (userId: string, file: AttachmentMetadata) => {\n if (!props.downloadHandler) {\n window.open(file.url, '_blank', 'noopener,noreferrer');\n } else {\n setShowSpinner(true);\n try {\n const response = await props.downloadHandler(userId, file);\n setShowSpinner(false);\n if (response instanceof URL) {\n window.open(response.toString(), '_blank', 'noopener,noreferrer');\n } else {\n props.onDownloadErrorMessage && props.onDownloadErrorMessage(response.errorMessage);\n }\n } finally {\n setShowSpinner(false);\n }\n }\n },\n [props]\n );\n if (\n !fileMetadata \|\|\n fileMetadata.length === 0 \|\|\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) / !fileMetadata\n ) {\n return <></>;\n }\n\n return (\n <div style={fileDownloadCardsStyle} data-ui-id=\"file-download-card-group\">\n <_FileCardGroup ariaLabel={fileCardGroupDescription()}>\n {fileMetadata &&\n fileMetadata.map((file) => (\n <TooltipHost content={downloadFileButtonString()} key={file.name}>\n <_FileCard\n fileName={file.name}\n key={file.name}\n fileExtension={file.extension}\n actionIcon={\n showSpinner ? (\n <Spinner size={SpinnerSize.medium} aria-live={'polite'} role={'status'} />\n ) : true &&\n / @conditional-compile-remove(teams-inline-images-and-file-sharing) / isShowDownloadIcon(file) ? (\n <IconButton className={iconButtonClassName} ariaLabel={downloadFileButtonString()}>\n <DownloadIconTrampoline />\n </IconButton>\n ) : undefined\n }\n actionHandler={() => fileDownloadHandler(userId, file)}\n />\n </TooltipHost>\n ))}\n </_FileCardGroup>\n </div>\n );\n};\n\n/\n @private\n /\nconst DownloadIconTrampoline = (): JSX.Element => {\n // @conditional-compile-remove(file-sharing)\n return <Icon data-ui-id=\"file-download-card-download-icon\" iconName=\"DownloadFile\" style={actionIconStyle} />;\n // Return _some_ available icon, as the real icon is beta-only.\n return <Icon iconName=\"EditBoxCancel\" style={actionIconStyle} />;\n};\n\nconst useLocaleStringsTrampoline = (): _FileDownloadCardsStrings => {\n / @conditional-compile-remove(file-sharing) */\n return useLocale().strings.messageThread;\n return { downloadFile: '', fileCardGroupMessage: '' };\n};\n"]}

package/dist/dist-esm/react-components/src/components/{RTE → RichTextEditor}/RichTextEditor.d.ts RENAMED Viewed

@@ -1,15 +1,26 @@
 import React from 'react';
-import { RichTextSendBoxStrings } from './RTESendBox';
+import { RichTextSendBoxStrings } from './RichTextSendBox';
 /**
  * Props for {@link RichTextEditor}.
  *
- * @beta
+ * @private
+ */
+export interface RichTextEditorStyleProps {
+    minHeight: string;
+    maxHeight: string;
+}
+/**
+ * Props for {@link RichTextEditor}.
+ *
+ * @private
  */
 export interface RichTextEditorProps {
     initialContent?: string;
     onChange: (newValue?: string) => void;
     placeholderText?: string;
     strings: Partial<RichTextSendBoxStrings>;
+    showRichTextEditorFormatting: boolean;
+    styles: RichTextEditorStyleProps;
 }
 /**
  * Props for {@link RichTextEditor}.
@@ -18,6 +29,7 @@ export interface RichTextEditorProps {
  */
 export interface RichTextEditorComponentRef {
     focus: () => void;
+    setEmptyContent: () => void;
 }
 /**
  * A component to wrap RoosterJS Rich Text Editor.