@azure/communication-react 1.13.0-alpha-202402070012 → 1.13.0-alpha-202402090012

package/dist/dist-esm/chat-stateful-client/src/StatefulChatClient.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatefulChatClient.js","sourceRoot":"","sources":["../../../../../chat-stateful-client/src/StatefulChatClient.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ChatClient, ChatClientOptions } from '@azure/communication-chat';\nimport { _getApplicationId, _TelemetryImplementationHint } from '@internal/acs-ui-common';\nimport { ChatContext } from './ChatContext';\nimport { ChatClientState } from './ChatClientState';\nimport { EventSubscriber } from './EventSubscriber';\nimport { chatThreadClientDeclaratify } from './StatefulChatThreadClient';\nimport { createDecoratedListThreads } from './iterators/createDecoratedListThreads';\nimport {\n  CommunicationTokenCredential,\n  CommunicationUserIdentifier,\n  getIdentifierKind\n} from '@azure/communication-common';\nimport { chatStatefulLogger } from './Logger';\n\n/**\n * Defines the methods that allow {@Link @azure/communication-chat#ChatClient} to be used with a centralized generated state.\n *\n * The interface provides access to proxied state and also allows registering a handler for state change events.\n *\n * @public\n */\nexport interface StatefulChatClient extends ChatClient {\n  /**\n   * Holds all the state that we could proxy from ChatClient {@Link @azure/communication-chat#ChatClient} as\n   * ChatClientState {@Link ChatClientState}.\n   */\n  getState(): ChatClientState;\n  /**\n   * Allows a handler to be registered for 'stateChanged' events.\n   *\n   * @param handler - Callback to receive the state.\n   */\n  onStateChange(handler: (state: ChatClientState) => void): void;\n  /**\n   * Allows unregistering for 'stateChanged' events.\n   *\n   * @param handler - Original callback to be unsubscribed.\n   */\n  offStateChange(handler: (state: ChatClientState) => void): void;\n}\n\ninterface StatefulChatClientWithPrivateProps extends StatefulChatClient {\n  context: ChatContext;\n  eventSubscriber: EventSubscriber | undefined;\n}\n\nconst proxyChatClient: ProxyHandler<ChatClient> = {\n  get: function <P extends keyof StatefulChatClientWithPrivateProps>(\n    chatClient: ChatClient,\n    prop: P,\n    receiver: StatefulChatClientWithPrivateProps\n  ) {\n    // skip receiver.context call to avoid recursive bugs\n    if (prop === 'context') {\n      return Reflect.get(chatClient, prop);\n    }\n\n    const context = receiver.context;\n    switch (prop) {\n      case 'createChatThread': {\n        return context.withAsyncErrorTeedToState(async function (...args: Parameters<ChatClient['createChatThread']>) {\n          const result = await chatClient.createChatThread(...args);\n          const thread = result.chatThread;\n          if (thread) {\n            const [request] = args;\n            context.createThread(thread.id, { topic: request.topic });\n          }\n          return result;\n        }, 'ChatClient.createChatThread');\n      }\n\n      case 'deleteChatThread': {\n        return context.withAsyncErrorTeedToState(async function (...args: Parameters<ChatClient['deleteChatThread']>) {\n          const result = await chatClient.deleteChatThread(...args);\n          context.deleteThread(args[0]);\n          return result;\n        }, 'ChatClient.deleteChatThread');\n      }\n      case 'listChatThreads': {\n        return createDecoratedListThreads(chatClient, context);\n      }\n      case 'getChatThreadClient': {\n        return function (...args: Parameters<ChatClient['getChatThreadClient']>) {\n          const chatThreadClient = chatClient.getChatThreadClient(...args);\n          // TODO(prprabhu): Ensure that thread properties are fetched into the ChatContext at this point.\n          // A new thread might be created here, but the properties will never be fetched.\n          return chatThreadClientDeclaratify(chatThreadClient, context);\n        };\n      }\n      case 'startRealtimeNotifications': {\n        return context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<ChatClient['startRealtimeNotifications']>\n        ) {\n          const ret = await chatClient.startRealtimeNotifications(...args);\n          if (!receiver.eventSubscriber) {\n            receiver.eventSubscriber = new EventSubscriber(chatClient, context);\n          }\n          return ret;\n        },\n        'ChatClient.startRealtimeNotifications');\n      }\n      case 'stopRealtimeNotifications': {\n        return context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<ChatClient['stopRealtimeNotifications']>\n        ) {\n          const ret = await chatClient.stopRealtimeNotifications(...args);\n          if (receiver.eventSubscriber) {\n            receiver.eventSubscriber.unsubscribe();\n            receiver.eventSubscriber = undefined;\n          }\n          return ret;\n        },\n        'ChatClient.stopRealtimeNotifications');\n      }\n      default:\n        return Reflect.get(chatClient, prop);\n    }\n  }\n};\n\n/**\n * Arguments to construct the {@link StatefulChatClient}.\n *\n * @public\n */\nexport type StatefulChatClientArgs = {\n  userId: CommunicationUserIdentifier;\n  displayName: string;\n  endpoint: string;\n  credential: CommunicationTokenCredential;\n};\n\n/**\n * Options to construct the {@link StatefulChatClient}.\n *\n * @public\n */\nexport type StatefulChatClientOptions = {\n  /**\n   * Options to construct the {@link @azure/communication-chat#ChatClient} with.\n   */\n  chatClientOptions: ChatClientOptions;\n  /**\n   * Sets the max listeners limit of the 'stateChange' event. Defaults to the node.js EventEmitter.defaultMaxListeners\n   * if not specified.\n   */\n  maxStateChangeListeners?: number;\n};\n\n/**\n * Creates a stateful ChatClient {@link StatefulChatClient} by proxying ChatClient\n * {@link @azure/communication-chat#ChatClient} with ProxyChatClient {@link ProxyChatClient} which then allows access\n * to state in a declarative way.\n *\n * @public\n */\nexport const createStatefulChatClient = (\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions\n): StatefulChatClient => {\n  return _createStatefulChatClientInner(args, options);\n};\n\n/**\n * This inner function is used to allow injection of TelemetryImplementationHint without changing the public API.\n *\n * @internal\n */\nexport const _createStatefulChatClientInner = (\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions,\n  telemetryImplementationHint: _TelemetryImplementationHint = 'StatefulComponents'\n): StatefulChatClient => {\n  chatStatefulLogger.info(\n    `Creating chat stateful client using library version: ${_getApplicationId(telemetryImplementationHint)}`\n  );\n  const tweakedOptions = {\n    ...options,\n    chatClientOptions: {\n      ...options?.chatClientOptions,\n      userAgentOptions: { userAgentPrefix: _getApplicationId(telemetryImplementationHint) }\n    }\n  };\n  return _createStatefulChatClientWithDeps(\n    new ChatClient(args.endpoint, args.credential, tweakedOptions.chatClientOptions),\n    args,\n    tweakedOptions\n  );\n};\n\n/**\n * A function to modify the state of the StatefulChatClient.\n *\n * Provided as a callback to the {@link StatefulChatClient.modifyState} method.\n *\n * The function must modify the provided state in place as much as possible.\n * Making large modifications can lead to bad performance by causing spurious rerendering of the UI.\n *\n * Consider using commonly used modifier functions exported from this package.\n */\nexport type ChatStateModifier = (state: ChatClientState) => void;\n\n/**\n * Internal implementation of {@link createStatefulChatClient} for dependency injection.\n *\n * Used by tests. Should not be exported out of this package.\n * @internal\n */\nexport const _createStatefulChatClientWithDeps = (\n  chatClient: ChatClient,\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions\n): StatefulChatClient => {\n  const context = new ChatContext(\n    options?.maxStateChangeListeners,\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.credential\n  );\n  let eventSubscriber: EventSubscriber;\n\n  context.updateChatConfig(getIdentifierKind(args.userId), args.displayName);\n\n  const proxy = new Proxy(chatClient, proxyChatClient);\n\n  Object.defineProperty(proxy, 'context', {\n    configurable: false,\n    get: () => context\n  });\n\n  Object.defineProperty(proxy, 'eventSubscriber', {\n    configurable: false,\n    get: () => eventSubscriber,\n    set: (val: EventSubscriber) => {\n      eventSubscriber = val;\n    }\n  });\n\n  Object.defineProperty(proxy, 'getState', {\n    configurable: false,\n    value: () => context?.getState()\n  });\n  Object.defineProperty(proxy, 'onStateChange', {\n    configurable: false,\n    value: (handler: (state: ChatClientState) => void) => context?.onStateChange(handler)\n  });\n  Object.defineProperty(proxy, 'offStateChange', {\n    configurable: false,\n    value: (handler: (state: ChatClientState) => void) => context?.offStateChange(handler)\n  });\n\n  return proxy as StatefulChatClient;\n};\n"]}
+{"version":3,"file":"StatefulChatClient.js","sourceRoot":"","sources":["../../../../../chat-stateful-client/src/StatefulChatClient.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { ChatClient, ChatClientOptions } from '@azure/communication-chat';\nimport { _getApplicationId, _TelemetryImplementationHint } from '@internal/acs-ui-common';\nimport { ChatContext } from './ChatContext';\nimport { ChatClientState } from './ChatClientState';\nimport { EventSubscriber } from './EventSubscriber';\nimport { chatThreadClientDeclaratify } from './StatefulChatThreadClient';\nimport { createDecoratedListThreads } from './iterators/createDecoratedListThreads';\nimport {\n  CommunicationTokenCredential,\n  CommunicationUserIdentifier,\n  getIdentifierKind\n} from '@azure/communication-common';\nimport { chatStatefulLogger } from './Logger';\n\n/**\n * Defines the methods that allow {@Link @azure/communication-chat#ChatClient} to be used with a centralized generated state.\n *\n * The interface provides access to proxied state and also allows registering a handler for state change events.\n *\n * @public\n */\nexport interface StatefulChatClient extends ChatClient {\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Cleans up the resource cache from the chat thread client.\n   */\n  dispose(): void;\n  /**\n   * Holds all the state that we could proxy from ChatClient {@Link @azure/communication-chat#ChatClient} as\n   * ChatClientState {@Link ChatClientState}.\n   */\n  getState(): ChatClientState;\n  /**\n   * Allows a handler to be registered for 'stateChanged' events.\n   *\n   * @param handler - Callback to receive the state.\n   */\n  onStateChange(handler: (state: ChatClientState) => void): void;\n  /**\n   * Allows unregistering for 'stateChanged' events.\n   *\n   * @param handler - Original callback to be unsubscribed.\n   */\n  offStateChange(handler: (state: ChatClientState) => void): void;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Downloads a resource for specific message and caches it.\n   *\n   * @param threadId - The thread id of the chat thread.\n   * @param messageId - The message id of the chat message.\n   * @param resourceUrl - The resource url to fetch and cache.\n   */\n  downloadResourceToCache(threadId: string, messageId: string, resourceUrl: string): void;\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  /**\n   * Removes a resource from cache for a specific message.\n   *\n   * @param threadId - The thread id of the chat thread.\n   * @param messageId - The message id of the chat message.\n   * @param resourceUrl - The resource url to remove from cache.\n   */\n  removeResourceFromCache(threadId: string, messageId: string, resourceUrl: string): void;\n}\n\ninterface StatefulChatClientWithPrivateProps extends StatefulChatClient {\n  context: ChatContext;\n  eventSubscriber: EventSubscriber | undefined;\n}\n\nconst proxyChatClient: ProxyHandler<ChatClient> = {\n  get: function <P extends keyof StatefulChatClientWithPrivateProps>(\n    chatClient: ChatClient,\n    prop: P,\n    receiver: StatefulChatClientWithPrivateProps\n  ) {\n    // skip receiver.context call to avoid recursive bugs\n    if (prop === 'context') {\n      return Reflect.get(chatClient, prop);\n    }\n\n    const context = receiver.context;\n    switch (prop) {\n      case 'createChatThread': {\n        return context.withAsyncErrorTeedToState(async function (...args: Parameters<ChatClient['createChatThread']>) {\n          const result = await chatClient.createChatThread(...args);\n          const thread = result.chatThread;\n          if (thread) {\n            const [request] = args;\n            context.createThread(thread.id, { topic: request.topic });\n          }\n          return result;\n        }, 'ChatClient.createChatThread');\n      }\n\n      case 'deleteChatThread': {\n        return context.withAsyncErrorTeedToState(async function (...args: Parameters<ChatClient['deleteChatThread']>) {\n          const result = await chatClient.deleteChatThread(...args);\n          context.deleteThread(args[0]);\n          return result;\n        }, 'ChatClient.deleteChatThread');\n      }\n      case 'listChatThreads': {\n        return createDecoratedListThreads(chatClient, context);\n      }\n      case 'getChatThreadClient': {\n        return function (...args: Parameters<ChatClient['getChatThreadClient']>) {\n          const chatThreadClient = chatClient.getChatThreadClient(...args);\n          // TODO(prprabhu): Ensure that thread properties are fetched into the ChatContext at this point.\n          // A new thread might be created here, but the properties will never be fetched.\n          return chatThreadClientDeclaratify(chatThreadClient, context);\n        };\n      }\n      case 'startRealtimeNotifications': {\n        return context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<ChatClient['startRealtimeNotifications']>\n        ) {\n          const ret = await chatClient.startRealtimeNotifications(...args);\n          if (!receiver.eventSubscriber) {\n            receiver.eventSubscriber = new EventSubscriber(chatClient, context);\n          }\n          return ret;\n        },\n        'ChatClient.startRealtimeNotifications');\n      }\n      case 'stopRealtimeNotifications': {\n        return context.withAsyncErrorTeedToState(async function (\n          ...args: Parameters<ChatClient['stopRealtimeNotifications']>\n        ) {\n          const ret = await chatClient.stopRealtimeNotifications(...args);\n          if (receiver.eventSubscriber) {\n            receiver.eventSubscriber.unsubscribe();\n            receiver.eventSubscriber = undefined;\n          }\n          return ret;\n        },\n        'ChatClient.stopRealtimeNotifications');\n      }\n      default:\n        return Reflect.get(chatClient, prop);\n    }\n  }\n};\n\n/**\n * Arguments to construct the {@link StatefulChatClient}.\n *\n * @public\n */\nexport type StatefulChatClientArgs = {\n  userId: CommunicationUserIdentifier;\n  displayName: string;\n  endpoint: string;\n  credential: CommunicationTokenCredential;\n};\n\n/**\n * Options to construct the {@link StatefulChatClient}.\n *\n * @public\n */\nexport type StatefulChatClientOptions = {\n  /**\n   * Options to construct the {@link @azure/communication-chat#ChatClient} with.\n   */\n  chatClientOptions: ChatClientOptions;\n  /**\n   * Sets the max listeners limit of the 'stateChange' event. Defaults to the node.js EventEmitter.defaultMaxListeners\n   * if not specified.\n   */\n  maxStateChangeListeners?: number;\n};\n\n/**\n * Creates a stateful ChatClient {@link StatefulChatClient} by proxying ChatClient\n * {@link @azure/communication-chat#ChatClient} with ProxyChatClient {@link ProxyChatClient} which then allows access\n * to state in a declarative way.\n *\n * @public\n */\nexport const createStatefulChatClient = (\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions\n): StatefulChatClient => {\n  return _createStatefulChatClientInner(args, options);\n};\n\n/**\n * This inner function is used to allow injection of TelemetryImplementationHint without changing the public API.\n *\n * @internal\n */\nexport const _createStatefulChatClientInner = (\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions,\n  telemetryImplementationHint: _TelemetryImplementationHint = 'StatefulComponents'\n): StatefulChatClient => {\n  chatStatefulLogger.info(\n    `Creating chat stateful client using library version: ${_getApplicationId(telemetryImplementationHint)}`\n  );\n  const tweakedOptions = {\n    ...options,\n    chatClientOptions: {\n      ...options?.chatClientOptions,\n      userAgentOptions: { userAgentPrefix: _getApplicationId(telemetryImplementationHint) }\n    }\n  };\n  return _createStatefulChatClientWithDeps(\n    new ChatClient(args.endpoint, args.credential, tweakedOptions.chatClientOptions),\n    args,\n    tweakedOptions\n  );\n};\n\n/**\n * A function to modify the state of the StatefulChatClient.\n *\n * Provided as a callback to the {@link StatefulChatClient.modifyState} method.\n *\n * The function must modify the provided state in place as much as possible.\n * Making large modifications can lead to bad performance by causing spurious rerendering of the UI.\n *\n * Consider using commonly used modifier functions exported from this package.\n */\nexport type ChatStateModifier = (state: ChatClientState) => void;\n\n/**\n * Internal implementation of {@link createStatefulChatClient} for dependency injection.\n *\n * Used by tests. Should not be exported out of this package.\n * @internal\n */\nexport const _createStatefulChatClientWithDeps = (\n  chatClient: ChatClient,\n  args: StatefulChatClientArgs,\n  options?: StatefulChatClientOptions\n): StatefulChatClient => {\n  const context = new ChatContext(\n    options?.maxStateChangeListeners,\n    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */ args.credential\n  );\n\n  let eventSubscriber: EventSubscriber;\n\n  context.updateChatConfig(getIdentifierKind(args.userId), args.displayName);\n\n  const proxy = new Proxy(chatClient, proxyChatClient);\n\n  Object.defineProperty(proxy, 'context', {\n    configurable: false,\n    get: () => context\n  });\n\n  Object.defineProperty(proxy, 'eventSubscriber', {\n    configurable: false,\n    get: () => eventSubscriber,\n    set: (val: EventSubscriber) => {\n      eventSubscriber = val;\n    }\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'dispose', {\n    configurable: false,\n    value: () => context?.dispose()\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'downloadResourceToCache', {\n    configurable: false,\n    value: (threadId: string, messageId: string, resourceUrl: string) =>\n      context?.downloadResourceToCache(threadId, messageId, resourceUrl)\n  });\n  /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */\n  Object.defineProperty(proxy, 'removeResourceFromCache', {\n    configurable: false,\n    value: (threadId: string, messageId: string, resourceUrl: string) =>\n      context?.removeResourceFromCache(threadId, messageId, resourceUrl)\n  });\n  Object.defineProperty(proxy, 'getState', {\n    configurable: false,\n    value: () => context?.getState()\n  });\n  Object.defineProperty(proxy, 'onStateChange', {\n    configurable: false,\n    value: (handler: (state: ChatClientState) => void) => context?.onStateChange(handler)\n  });\n  Object.defineProperty(proxy, 'offStateChange', {\n    configurable: false,\n    value: (handler: (state: ChatClientState) => void) => context?.offStateChange(handler)\n  });\n\n  return proxy as StatefulChatClient;\n};\n"]}

package/dist/dist-esm/chat-stateful-client/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../chat-stateful-client/src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,wBAAwB,EACxB,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport {\n  createStatefulChatClient,\n  _createStatefulChatClientInner,\n  _createStatefulChatClientWithDeps\n} from './StatefulChatClient';\n\nexport type { StatefulChatClient, StatefulChatClientArgs, StatefulChatClientOptions } from './StatefulChatClient';\nexport type { ChatMessageWithStatus } from './types/ChatMessageWithStatus';\nexport { ChatError } from './ChatClientState';\nexport type {\n  ChatClientState,\n  ChatErrors,\n  ChatThreadClientState,\n  ChatThreadProperties,\n  ChatErrorTarget\n} from './ChatClientState';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../chat-stateful-client/src/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,wBAAwB,EACxB,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nexport {\n  createStatefulChatClient,\n  _createStatefulChatClientInner,\n  _createStatefulChatClientWithDeps\n} from './StatefulChatClient';\nexport type { StatefulChatClient, StatefulChatClientArgs, StatefulChatClientOptions } from './StatefulChatClient';\nexport type { ChatMessageWithStatus } from './types/ChatMessageWithStatus';\nexport { ChatError } from './ChatClientState';\nexport type {\n  ChatClientState,\n  ChatErrors,\n  ChatThreadClientState,\n  ChatThreadProperties,\n  ChatErrorTarget\n} from './ChatClientState';\n"]}

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

@@ -98,11 +98,11 @@ export const ChatMessageComponentAsEditBox = (props) => {
                         }, id: 'submitIconWrapper' }))), /* @conditional-compile-remove(file-sharing) */
             onRenderFileUploads()));
     };
-    const bodyClassName = mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault);
-    return (React.createElement(ChatMyMessage, { root: {
-            className: mergeClasses(chatMyMessageStyles.root, editContainerStyles.root)
+    const attached = message.attached === true ? 'center' : message.attached === 'bottom' ? 'bottom' : 'top';
+    return (React.createElement(ChatMyMessage, { attached: attached, root: {
+            className: chatMyMessageStyles.root
         }, body: {
-            className: bodyClassName
+            className: mergeClasses(editContainerStyles.body, message.failureReason !== undefined ? editContainerStyles.bodyError : editContainerStyles.bodyDefault, attached !== 'top' ? editContainerStyles.bodyAttached : undefined)
         } }, getContent()));
 };
 const isMessageTooLong = (messageText) => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { 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 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;\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"]}
+{"version":3,"file":"ChatMessageComponentAsEditBox.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';\nimport { 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"]}

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

@@ -42,7 +42,7 @@ export declare const chatMessageMenuStyle: string;
 /**
  * @private
  */
-export declare const useChatMessageEditContainerStyles: () => Record<"root" | "body" | "bodyError" | "bodyDefault", string>;
+export declare const useChatMessageEditContainerStyles: () => Record<"body" | "bodyAttached" | "bodyError" | "bodyDefault", string>;
 /**
  * Styles that can be applied to ensure flyout items have the minimum touch target size.
  *

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

@@ -99,12 +99,19 @@ export const chatMessageMenuStyle = mergeStyles({
  * @private
  */
 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', boxSizing: 'border-box' }), shorthands.border(`${defaultSendBoxInactiveBorderThicknessREM}rem`, 'solid')), shorthands.borderRadius(tokens.borderRadiusMedium)), shorthands.margin(`${defaultSendBoxActiveBorderThicknessREM - defaultSendBoxInactiveBorderThicknessREM}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('21px', '1px', '1px', '1px')), { 
+        // 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.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`)), shorthands.margin('20px', 0, 0, 0)), { width: '100%' }) }),
+    bodyAttached: {
+        marginBottom: '1px',
+        marginTop: '3px',
         // 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%' }) }),
+        width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,
+        '&:hover, &:active, &:focus, &:focus-within': {
+            marginTop: '2px',
+            marginBottom: 0
+        }
+    },
     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({\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 editChatMessageFailedTagStyle = mergeStyles({\n  marginBottom: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageFailedTagStackItemStyle = mergeStyles({\n  alignSelf: 'end'\n});\n\n/**\n * @private\n */\nexport const editChatMessageButtonsStackStyle = mergeStyles({\n  padding: '0 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"]}
+{"version":3,"file":"ChatMessageComponent.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ChatMessageComponent.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,WAAW,EAEX,WAAW,EAKZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,sCAAgC;AACnD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,EACL,wCAAwC,EACxC,sCAAsC,EACvC,MAAM,0BAA0B,CAAC;AAElC,MAAM,+BAA+B,GAAG,CAAC,CAAC;AAC1C,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAE1C;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAW;IACpC,KAAK,EAAE;QACL,KAAK,EAAE,GAAG;QACV,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,SAAS;QACd,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,UAAU;KACrB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,GAAG;QACX,OAAO,EAAE,GAAG;QACZ,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,aAAsB,EAAe,EAAE,CAAC,CAAC;IACvF,IAAI,EAAE;QACJ,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;QACnB,4GAA4G;QAC5G,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc;QACzE,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC3B,gBAAgB,EAAE;YAChB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC1B,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC;SAC3B;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,KAAK,EAAE,MAAM,CAAC,uBAAuB;IACrC,UAAU,EAAE,WAAW,CAAC,OAAO;IAC/B,QAAQ,EAAE,SAAS;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,WAAW,CAAC;IAChD,UAAU,EAAE,WAAW,CAAC,QAAQ;IAChC,QAAQ,EAAE,SAAS;CACpB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAU,EAAE,CAChE,WAAW,CAAC,EAAE,UAAU,EAAE,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC;AAE3F;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAY,EAAU,EAAE,CAChE,WAAW,CAAC;IACV,UAAU,EAAE,WAAW,CAAC,OAAO;IAC/B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS;IACrC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ;IACxC,UAAU,EAAE,MAAM;CACnB,CAAC,CAAC;AAEL;;GAEG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,WAAW,CAAC;IACvD,YAAY,EAAE,QAAQ;CACvB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,WAAW,CAAC;IAC5D,SAAS,EAAE,KAAK;CACjB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,WAAW,CAAC;IAC1D,OAAO,EAAE,UAAU;IACnB,SAAS,EAAE,UAAU;CACtB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,WAAW,CAAC;IAC9C,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,UAAU,CAAC;IAC1D,IAAI,0FACC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,KACxB,eAAe,EAAE,aAAa,EAC9B,SAAS,EAAE,YAAY,KACpB,UAAU,CAAC,MAAM,CAAC,GAAG,wCAAwC,KAAK,EAAE,OAAO,CAAC,GAC5E,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,kBAAkB,CAAC,GAGlD,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;QACjD,sEAAsE;QACtE,KAAK,EAAE,eAAe,sCAAsC,MAAM,EAClE,4CAA4C,gDACvC,UAAU,CAAC,WAAW,CAAC,GAAG,sCAAsC,KAAK,CAAC,GACtE,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KACrC,KAAK,EAAE,MAAM,MAEhB;IACD,YAAY,EAAE;QACZ,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,KAAK;QAChB,sEAAsE;QACtE,KAAK,EAAE,eAAe,sCAAsC,MAAM;QAClE,4CAA4C,EAAE;YAC5C,SAAS,EAAE,KAAK;YAChB,YAAY,EAAE,CAAC;SAChB;KACF;IACD,SAAS,oBACJ,UAAU,CAAC,WAAW,CAAC,cAAc,CAAC,CAC1C;IACD,WAAW,kCACN,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,4BAA4B,CAAC,KAC9D,4CAA4C,oBACvC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,wBAAwB,CAAC,IAE7D;CACF,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAA8B;IACpE,IAAI,EAAE;QACJ,MAAM,EAAE,GAAG,+BAA+B,KAAK;QAC/C,UAAU,EAAE,GAAG,+BAA+B,KAAK;QACnD,SAAS,EAAE,OAAO;KACnB;IACD,WAAW,EAAE;QACX,MAAM,EAAE,GAAG,+BAA+B,KAAK;QAC/C,UAAU,EAAE,GAAG,+BAA+B,KAAK;QACnD,SAAS,EAAE,OAAO;KACnB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,OAAO;KACnB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,kBAAkB,EAAE,6CAA6C;QACzE,KAAK,EAAE,SAAS;KACjB;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,IAAI,EAAE;QACJ,MAAM,EAAE,OAAO;QACf,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,SAAS;KACjB;CACF,CAAC","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 editChatMessageFailedTagStyle = mergeStyles({\n  marginBottom: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const chatMessageFailedTagStackItemStyle = mergeStyles({\n  alignSelf: 'end'\n});\n\n/**\n * @private\n */\nexport const editChatMessageButtonsStackStyle = mergeStyles({\n  padding: '0 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  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('21px', '1px', '1px', '1px'),\n    // Width should be updated on hover to include the border width change\n    width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,\n    '&:hover, &:active, &:focus, &:focus-within': {\n      ...shorthands.borderWidth(`${defaultSendBoxActiveBorderThicknessREM}rem`),\n      ...shorthands.margin('20px', 0, 0, 0),\n      width: '100%'\n    }\n  },\n  bodyAttached: {\n    marginBottom: '1px',\n    marginTop: '3px',\n    // Width should be updated on hover to include the border width change\n    width: `calc(100% - ${defaultSendBoxActiveBorderThicknessREM}rem)`,\n    '&:hover, &:active, &:focus, &:focus-within': {\n      marginTop: '2px',\n      marginBottom: 0\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.13.0-alpha-202402070012",
+  "version": "1.13.0-alpha-202402090012",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [