Skip to content

[JS loaders package] add base composite props #5811

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dmceachernmsft merged 6 commits into from
May 12, 2025
Merged

[JS loaders package] add base composite props #5811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
12e7efa
add base composite props
dmceachernmsft Apr 30, 2025
bbf631e
Change files
dmceachernmsft Apr 30, 2025
8cff1fd
Merge branch 'main' into dmceachernmsft/loaders-composite-props
dmceachernmsft May 1, 2025
8d0d3fb
Merge branch 'main' of https://github.com/Azure/communication-ui-libr…
dmceachernmsft May 12, 2025
dd2d2af
Merge branch 'dmceachernmsft/loaders-composite-props' of https://gith…
dmceachernmsft May 12, 2025
7b1e396
update outbound callComposite loader
dmceachernmsft May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions change-beta/@azure-communication-react-b9764b6e-345a-48c3-bef7-797fe4550e76.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"type": "prerelease",
"area": "improvement",
"workstream": "JSloaders",
"comment": "Add base composite props to the loader functions",
"packageName": "@azure/communication-react",
"email": "dmceachern@microsoft.com",
"dependentChangeType": "patch"
}
25 changes: 22 additions & 3 deletions packages/acs-ui-javascript-loaders/src/callCompositeLoader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import {
AzureCommunicationCallAdapterOptions,
CallAdapter,
CallAdapterLocator,
CallCompositeOptions
CallCompositeOptions,
BaseCompositeProps,
CallCompositeIcons
} from '@internal/react-composites';
import { initializeIcons } from '@fluentui/react';

Expand All @@ -35,6 +37,8 @@ export type CallCompositeLoaderProps = {
locator: CallAdapterLocator;
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
callCompositeOptions?: CallCompositeOptions;
baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
formFactor?: 'mobile' | 'desktop';
};

/**
Expand All @@ -49,7 +53,16 @@ export const loadCallComposite = async function (
htmlElement: HTMLElement
): Promise<CallAdapter | undefined> {
initializeIcons();
const { userId, credential, displayName, locator, callAdapterOptions, callCompositeOptions } = loaderArgs;
const {
userId,
credential,
displayName,
locator,
callAdapterOptions,
callCompositeOptions,
baseCompositeProps,
formFactor
} = loaderArgs;
const adapter = await createAzureCommunicationCallAdapter({
userId,
displayName: displayName ?? 'anonymous',
Expand All @@ -62,6 +75,12 @@ export const loadCallComposite = async function (
throw new Error('Failed to find the root element');
}

createRoot(htmlElement).render(React.createElement(CallComposite, { options: callCompositeOptions, adapter }, null));
createRoot(htmlElement).render(
React.createElement(
CallComposite,
{ ...baseCompositeProps, options: callCompositeOptions, adapter, formFactor },
null
)
);
return adapter;
};
25 changes: 21 additions & 4 deletions packages/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import {
CallWithChatCompositeOptions,
createAzureCommunicationCallWithChatAdapter,
CallWithChatComposite,
AzureCommunicationCallAdapterOptions
AzureCommunicationCallAdapterOptions,
BaseCompositeProps,
CallWithChatCompositeIcons
} from '@internal/react-composites';
import { initializeIcons } from '@fluentui/react';

Expand All @@ -35,6 +37,8 @@ export type CallWithChatCompositeLoaderProps = {
locator: CallAndChatLocator;
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
callWithChatCompositeOptions?: CallWithChatCompositeOptions;
baseCompositeProps?: BaseCompositeProps<CallWithChatCompositeIcons>;
formFactor?: 'mobile' | 'desktop';
};

/**
Expand All @@ -49,8 +53,17 @@ export const loadCallWithChatComposite = async function (
htmlElement: HTMLElement
): Promise<CallWithChatAdapter | undefined> {
initializeIcons();
const { userId, credential, displayName, endpoint, locator, callAdapterOptions, callWithChatCompositeOptions } =
loaderArgs;
const {
userId,
credential,
displayName,
endpoint,
locator,
callAdapterOptions,
callWithChatCompositeOptions,
baseCompositeProps,
formFactor
} = loaderArgs;
const adapter = await createAzureCommunicationCallWithChatAdapter({
userId,
displayName: displayName ?? 'anonymous',
Expand All @@ -65,7 +78,11 @@ export const loadCallWithChatComposite = async function (
}

createRoot(htmlElement).render(
React.createElement(CallWithChatComposite, { options: callWithChatCompositeOptions, adapter }, null)
React.createElement(
CallWithChatComposite,
{ ...baseCompositeProps, options: callWithChatCompositeOptions, adapter, formFactor },
null
)
);
return adapter;
};
9 changes: 7 additions & 2 deletions packages/acs-ui-javascript-loaders/src/chatCompositeLoader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ parseReactVersion(reactVersion);
import { createRoot } from 'react-dom/client';
import { CommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';
import {
BaseCompositeProps,
ChatAdapter,
ChatComposite,
ChatCompositeIcons,
ChatCompositeOptions,
createAzureCommunicationChatAdapter
} from '@internal/react-composites';
Expand All @@ -29,6 +31,7 @@ export type ChatCompositeLoaderProps = {
endpoint: string;
threadId: string;
chatCompositeOptions?: ChatCompositeOptions;
baseCompositeProps?: BaseCompositeProps<ChatCompositeIcons>;
};

/**
Expand All @@ -43,7 +46,7 @@ export const loadChatComposite = async function (
htmlElement: HTMLElement
): Promise<ChatAdapter | undefined> {
initializeIcons();
const { userId, credential, endpoint, threadId, displayName, chatCompositeOptions } = loaderArgs;
const { userId, credential, endpoint, threadId, displayName, chatCompositeOptions, baseCompositeProps } = loaderArgs;
const adapter = await createAzureCommunicationChatAdapter({
endpoint,
userId,
Expand All @@ -56,6 +59,8 @@ export const loadChatComposite = async function (
throw new Error('Failed to find the root element');
}

createRoot(htmlElement).render(React.createElement(ChatComposite, { options: chatCompositeOptions, adapter }, null));
createRoot(htmlElement).render(
React.createElement(ChatComposite, { ...baseCompositeProps, options: chatCompositeOptions, adapter }, null)
);
return adapter;
};
5 changes: 4 additions & 1 deletion packages/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ import {
CallCompositeOptions,
StartCallIdentifier,
AzureCommunicationCallAdapterOptions,
CallAdapter
CallAdapter,
BaseCompositeProps,
CallCompositeIcons
} from '@internal/react-composites';
import { initializeIcons } from '@fluentui/react';

Expand All @@ -35,6 +37,7 @@ export type OutboundCallCompositeLoaderProps = {
displayName: string;
targetCallees: string[] | StartCallIdentifier[];
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
callCompositeOptions?: CallCompositeOptions;
};

Expand Down
6 changes: 6 additions & 0 deletions packages/communication-react/review/beta/communication-react.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -753,6 +753,8 @@ export type CallCompositeLoaderProps = {
locator: CallAdapterLocator;
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
callCompositeOptions?: CallCompositeOptions;
baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
formFactor?: 'mobile' | 'desktop';
};

// @public
Expand Down Expand Up @@ -1598,6 +1600,8 @@ export type CallWithChatCompositeLoaderProps = {
locator: CallAndChatLocator;
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
callWithChatCompositeOptions?: CallWithChatCompositeOptions;
baseCompositeProps?: BaseCompositeProps<CallWithChatCompositeIcons>;
formFactor?: 'mobile' | 'desktop';
};

// @public
Expand Down Expand Up @@ -2147,6 +2151,7 @@ export type ChatCompositeLoaderProps = {
endpoint: string;
threadId: string;
chatCompositeOptions?: ChatCompositeOptions;
baseCompositeProps?: BaseCompositeProps<ChatCompositeIcons>;
};

// @public
Expand Down Expand Up @@ -4338,6 +4343,7 @@ export type OutboundCallCompositeLoaderProps = {
displayName: string;
targetCallees: string[] | StartCallIdentifier[];
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
callCompositeOptions?: CallCompositeOptions;
};

Expand Down
6 changes: 6 additions & 0 deletions packages/communication-react/review/stable/communication-react.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,6 +608,8 @@ export type CallCompositeLoaderProps = {
locator: CallAdapterLocator;
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
callCompositeOptions?: CallCompositeOptions;
baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
formFactor?: 'mobile' | 'desktop';
};

// @public
Expand Down Expand Up @@ -1432,6 +1434,8 @@ export type CallWithChatCompositeLoaderProps = {
locator: CallAndChatLocator;
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
callWithChatCompositeOptions?: CallWithChatCompositeOptions;
baseCompositeProps?: BaseCompositeProps<CallWithChatCompositeIcons>;
formFactor?: 'mobile' | 'desktop';
};

// @public
Expand Down Expand Up @@ -1943,6 +1947,7 @@ export type ChatCompositeLoaderProps = {
endpoint: string;
threadId: string;
chatCompositeOptions?: ChatCompositeOptions;
baseCompositeProps?: BaseCompositeProps<ChatCompositeIcons>;
};

// @public
Expand Down Expand Up @@ -3949,6 +3954,7 @@ export type OutboundCallCompositeLoaderProps = {
displayName: string;
targetCallees: string[] | StartCallIdentifier[];
callAdapterOptions?: AzureCommunicationCallAdapterOptions;
baseCompositeProps?: BaseCompositeProps<CallCompositeIcons>;
callCompositeOptions?: CallCompositeOptions;
};

Expand Down
⚡