Resolve issue where RichTextBox could not be found when running in production with a minimized bundle (#5712)

* Resolve issue where RichTextBox could not be found when running in production with a minimized bundle.

* Avoid using public API

* Add cc

* Change files

* Use unknown instead

* Any

* Temp disable lint

* Fix tree shaking

* Revert

* Move to another file

* Fix tree shaking

* Export Symbol

* Clean up logging

* Comments

* Lint and CC

* Address comments

* Updating identifier name

* Update with internal name

Author: palatter

change-beta/@azure-communication-react-f3b8f974-0cf7-40ff-9a59-316682f8a3e4.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Resolve issue where RichTextBox could not be found when running in production with a minimized bundle.",
+  "packageName": "@azure/communication-react",
+  "email": "palatter@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-f3b8f974-0cf7-40ff-9a59-316682f8a3e4.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Resolve issue where RichTextBox could not be found when running in production with a minimized bundle.",
+  "packageName": "@azure/communication-react",
+  "email": "palatter@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/chat-component-bindings/src/hooks/usePropsFor.ts

@@ -4,6 +4,8 @@ import { ErrorBar, MessageThread, ParticipantList, SendBox, TypingIndicator } fr
 
 /* @conditional-compile-remove(rich-text-editor) */
 import type { RichTextSendBox } from '@internal/react-components';
+/* @conditional-compile-remove(rich-text-editor) */
+import { _isRichTextSendBox } from '@internal/react-components';
 
 import { useHandlers } from './useHandlers';
 import { useSelector } from './useSelector';
@@ -98,10 +100,14 @@ const findSelector = (component: (props: any) => JSX.Element | undefined): any =
     }
     return messageThreadSelectorImpl;
   };
+
+  // Add component type check to assist in identification for usePropsFor
+  // to avoid issue where production build does not have the component name
   /* @conditional-compile-remove(rich-text-editor) */
-  if (typeof component === 'function' && component.name === 'RichTextSendBox') {
+  if (_isRichTextSendBox(component)) {
     return sendBoxSelector;
   }
+
   switch (component) {
     case SendBox:
       return sendBoxSelector;

packages/react-components/src/components/RichTextEditor/RichTextSendBox.tsx

@@ -40,6 +40,8 @@ import { SendBoxErrorBarType } from '../SendBoxErrorBar';
 import { attachmentUploadCardsStyles } from '../styles/SendBox.styles';
 /* @conditional-compile-remove(file-sharing-acs) */
 import { FluentV9ThemeProvider } from '../../theming/FluentV9ThemeProvider';
+/* @conditional-compile-remove(rich-text-editor) */
+import { richTextSendBoxIdentifier } from './RichTextSendBoxUtils';
 
 /**
  * Strings of {@link RichTextSendBox} that can be overridden.
@@ -597,3 +599,9 @@ export const RichTextSendBox = (props: RichTextSendBoxProps): JSX.Element => {
     </Stack>
   );
 };
+
+/* @conditional-compile-remove(rich-text-editor) */
+// Add component type check to assist in identification for usePropsFor
+// to avoid issue where production build does not have the component name
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(RichTextSendBox as any)[richTextSendBoxIdentifier] = true;

packages/react-components/src/components/RichTextEditor/RichTextSendBoxUtils.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// Add component type check to assist in identification for usePropsFor
+// to avoid issue where production build does not have the component name
+
+/* @conditional-compile-remove(rich-text-editor) */
+/**
+ * @private
+ */
+export const richTextSendBoxIdentifier = Symbol('richTextSendBoxIdentifier');
+
+/* @conditional-compile-remove(rich-text-editor) */
+/**
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const _isRichTextSendBox = (component: any): boolean => {
+  return component?.[richTextSendBoxIdentifier] === true;
+};

packages/react-components/src/components/index.ts

@@ -20,6 +20,8 @@ export type { SendBoxProps, SendBoxStrings, SendBoxStylesProps } from './SendBox
 
 /* @conditional-compile-remove(rich-text-editor) */
 export { RichTextSendBox } from './RichTextEditor/RichTextSendBox';
+/* @conditional-compile-remove(rich-text-editor) */
+export { _isRichTextSendBox } from './RichTextEditor/RichTextSendBoxUtils';
 // TODO: This component is exported only for testing purposes. Remove this when this component is added to composites
 /* @conditional-compile-remove(rich-text-editor) */
 export { ChatMessageComponentAsRichTextEditBox } from './ChatMessage/MyMessageComponents/ChatMessageComponentAsRichTextEditBox';