[bugfix] Add adapter options to CallComposite.js files (#4486)

* add adapter options to JS bundles

* Change files

* fix cc in app

* stabilize bot name callback

* remove console

* fix beta build

Author: dmceachernmsft

change-beta/@azure-communication-react-dc352c41-5c98-409f-b5fb-4f1a485abfca.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Add Adapter options to JS bundles to allow for custom bot displayNames",
+  "comment": "add adapter options to JS bundles",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-dc352c41-5c98-409f-b5fb-4f1a485abfca.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Add Adapter options to JS bundles to allow for custom bot displayNames",
+  "comment": "add adapter options to JS bundles",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -3508,7 +3508,7 @@ export interface NetworkDiagnosticsState {
     latest: LatestNetworkDiagnostics;
 }
 
-// @beta
+// @public
 export type OnFetchProfileCallback = (userId: string, defaultProfile?: Profile) => Promise<Profile | undefined>;
 
 // @public
@@ -3721,7 +3721,7 @@ export interface PPTLiveCallFeatureState {
     isActive: boolean;
 }
 
-// @beta
+// @public
 export type Profile = {
     displayName?: string;
 };

packages/communication-react/review/stable/communication-react.api.md

@@ -1606,6 +1606,7 @@ export type CommonCallAdapterOptions = {
         videoBackgroundImages?: VideoBackgroundImage[];
         onResolveDependency?: () => Promise<VideoBackgroundEffectsDependency>;
     };
+    onFetchProfile?: OnFetchProfileCallback;
     callingSounds?: CallingSounds;
     reactionResources?: ReactionResources;
 };
@@ -2931,6 +2932,9 @@ export interface NetworkDiagnosticsState {
     latest: LatestNetworkDiagnostics;
 }
 
+// @public
+export type OnFetchProfileCallback = (userId: string, defaultProfile?: Profile) => Promise<Profile | undefined>;
+
 // @public
 export type OnRenderAvatarCallback = (
 userId?: string, options?: CustomAvatarOptions,
@@ -3129,6 +3133,11 @@ export interface PPTLiveCallFeatureState {
     isActive: boolean;
 }
 
+// @public
+export type Profile = {
+    displayName?: string;
+};
+
 // @public
 export type RaisedHand = {
     raisedHandOrderPosition: number;

packages/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.ts

@@ -1397,7 +1397,6 @@ export type CommonCallAdapterOptions = {
     videoBackgroundImages?: VideoBackgroundImage[];
     onResolveDependency?: () => Promise<VideoBackgroundEffectsDependency>;
   };
-  /* @conditional-compile-remove(teams-identity-support) */
   /**
    * Use this to fetch profile information which will override data in {@link CallAdapterState} like display name
    * The onFetchProfile is fetch-and-forget one time action for each user, once a user profile is updated, the value will be cached

packages/react-composites/src/composites/CallComposite/adapter/OnFetchProfileCallback.ts

@@ -7,16 +7,16 @@ import { AdapterStateModifier } from './AzureCommunicationCallAdapter';
 import { createParticipantModifier } from '../utils';
 
 /**
- * Callback function used to provide custom data to build profile for a user.
+ * Callback function used to provide custom data to build profile for a user or bot.
  *
- * @beta
+ * @public
  */
 export type OnFetchProfileCallback = (userId: string, defaultProfile?: Profile) => Promise<Profile | undefined>;
 
 /**
- * The profile of a user.
+ * The profile of a user or bot.
  *
- * @beta
+ * @public
  */
 export type Profile = {
   /**

packages/react-composites/src/composites/CallComposite/adapter/index.ts

@@ -18,7 +18,7 @@ export {
 export type { TeamsAdapterOptions } from './AzureCommunicationCallAdapter';
 /* @conditional-compile-remove(teams-identity-support) */
 export type { TeamsCallAdapterArgs } from './AzureCommunicationCallAdapter';
-/* @conditional-compile-remove(teams-identity-support) */
+
 export type { OnFetchProfileCallback, Profile } from './OnFetchProfileCallback';
 export type {
   AzureCommunicationCallAdapterArgs,

packages/react-composites/src/composites/CallComposite/index.ts

@@ -22,7 +22,8 @@ export { createTeamsCallAdapter, createTeamsCallAdapterFromClient, useTeamsCallA
 export type { TeamsAdapterOptions } from './adapter';
 
 /* @conditional-compile-remove(teams-identity-support) */
-export type { TeamsCallAdapter, TeamsCallAdapterArgs, Profile, OnFetchProfileCallback } from './adapter';
+export type { TeamsCallAdapter, TeamsCallAdapterArgs } from './adapter';
+export type { Profile, OnFetchProfileCallback } from './adapter';
 
 export type {
   AzureCommunicationCallAdapterArgs,

samples/Calling/src/app/views/CallScreen.tsx

@@ -19,7 +19,7 @@ import { useTeamsCallAdapter, TeamsCallAdapter } from '@azure/communication-reac
 
 import { onResolveVideoEffectDependencyLazy } from '@azure/communication-react';
 /* @conditional-compile-remove(teams-identity-support) */
-import type { TeamsAdapterOptions } from '@azure/communication-react';
+import type { Profile, TeamsAdapterOptions } from '@azure/communication-react';
 import type { StartCallIdentifier } from '@azure/communication-react';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { createAutoRefreshingCredential } from '../utils/credential';
@@ -209,6 +209,13 @@ const AzureCommunicationOutboundCallScreen = (props: AzureCommunicationCallScree
         laughReaction: { url: '/assets/reactions/laughEmoji.png', frameCount: 102 },
         applauseReaction: { url: '/assets/reactions/clapEmoji.png', frameCount: 102 },
         surprisedReaction: { url: '/assets/reactions/surprisedEmoji.png', frameCount: 102 }
+      },
+      /* @conditional-compile-remove(teams-identity-support) */
+      onFetchProfile: async (userId: string, defaultProfile?: Profile): Promise<Profile | undefined> => {
+        if (userId === '<28:orgid:Enter your teams app here>') {
+          return { displayName: 'Teams app display name' };
+        }
+        return defaultProfile;
       }
     };
   }, []);

samples/StaticHtmlComposites/outboundCallComposite.html

@@ -30,7 +30,14 @@
         userId: user,
         token: token,
         displayName: displayName,
-        targetCallees: [{ teamsAppId: '<Enter your teams app id>', cloud: 'public' }] // Provide the identifier you want to call, can be flat as a string.
+        targetCallees: [{ teamsAppId: '<Enter your teams app id here>', cloud: 'public' }], // Provide the identifier you want to call, can be flat as a string.
+        options: {
+          onFetchProfile: async (userId) => {
+            if (userId === '<28:orgid:Enter your teams bot name here>') {
+              return { displayName: 'displayName' };
+            }
+          }
+        }
       },
       document.getElementById('outbound-call-composite-container')
     );