Stateful client quickstart (#209)
* Stateful client quickstart * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartComposite.stories.mdx * Update packages/storybook/stories/Introduction.stories.mdx * Update packages/storybook/stories/QuickStarts/snippets/ChatApp.snippet.tsx * Update packages/storybook/stories/QuickStarts/snippets/ChatAppHandlers.snippet.tsx * Update packages/storybook/stories/QuickStarts/snippets/ChatAppSelectors.snippet.tsx * Update packages/storybook/stories/QuickStarts/snippets/ChatAppStateful.snippet.tsx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx Co-authored-by: Anjul Garg <anjulgarg@live.com> * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx Co-authored-by: Anjul Garg <anjulgarg@live.com> * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx Co-authored-by: Anjul Garg <anjulgarg@live.com> * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * Update packages/storybook/stories/QuickStarts/QuickstartStateful.stories.mdx * useEffect update Co-authored-by: Anjul Garg <anjulgarg@live.com>
This commit is contained in:
ddematheu2
GitHub
Родитель
7940737099
Коммит
84122fee7c
|
|
@ -37,7 +37,6 @@
|
|||
"copy-to-clipboard": "~3.3.1",
|
||||
"history": "~5.0.0",
|
||||
"react-aria-live": "^2.0.5",
|
||||
"react-components": "1.0.0-beta",
|
||||
"react-composites": "1.0.0-beta",
|
||||
"react-linkify": "^1.0.0-alpha"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@ export const getDocs: () => JSX.Element = () => {
|
|||
<Title>Layouts</Title>
|
||||
<Description>
|
||||
In this section, we showcase different examples of building your own calling gallery layouts using `VideoTile`
|
||||
component from `react-components` package and `@fluentui/react` package.
|
||||
component from `@azure/communication-react` package and `@fluentui/react` package.
|
||||
</Description>
|
||||
<Description>
|
||||
In these examples, we use [Stack](https://developer.microsoft.com/en-us/fluentui#/controls/web/stack) component
|
||||
from `fluentui` to build a layout for our video tiles. For the individual elements in this layout we use
|
||||
`VideoTile` from `react-components` to render each participant. We are not passing in video stream to the
|
||||
`VideoTile` component in these examples, instead a
|
||||
`VideoTile` from `@azure/communication-react` to render each participant. We are not passing in video stream to
|
||||
the `VideoTile` component in these examples, instead a
|
||||
[Persona](https://developer.microsoft.com/en-us/fluentui#/controls/web/persona) component is used as a
|
||||
placeholder component.
|
||||
</Description>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
import { Stack, mergeStyles, Text } from '@fluentui/react';
|
||||
import { CallVideoOffIcon } from '@fluentui/react-northstar';
|
||||
import { useTheme } from '@fluentui/react-theme-provider';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
StreamMedia,
|
||||
VideoTile,
|
||||
|
|
@ -9,7 +5,11 @@ import {
|
|||
CameraButton,
|
||||
MicrophoneButton,
|
||||
FluentThemeProvider
|
||||
} from 'react-components';
|
||||
} from '@azure/communication-react';
|
||||
import { Stack, mergeStyles, Text } from '@fluentui/react';
|
||||
import { CallVideoOffIcon } from '@fluentui/react-northstar';
|
||||
import { useTheme } from '@fluentui/react-theme-provider';
|
||||
import React, { useState } from 'react';
|
||||
import { renderVideoStream } from '../../../utils';
|
||||
|
||||
export interface LocalPreviewProps {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ It gives you a library of production-ready UI components that you can drop into
|
|||
- **UI Components** - These components are open-source building blocks that let you build custom communications experience.
|
||||
Components are offered for both calling and chat capabilities that can be combined to build experiences.
|
||||
|
||||
These UI client libraries all use [Microsoft's Fluent design language](https://developer.microsoft.com/fluentui/) and assets. Fluent UI provides a foundational layer for the UI Framework that has been battle tested across Microsoft products.
|
||||
These UI client libraries all use [Microsoft's Fluent design language](https://developer.microsoft.com/fluentui/) and assets. Fluent UI provides a foundational layer for the UI Toolkit and is actively used across Microsoft products.
|
||||
|
||||
In conjunction to the UI components, the UI Toolkit exposes a stateful client library for calling and chat.
|
||||
This client is agnostic to any specific state management framework and can be integrated with common state managers like Redux or React Context.
|
||||
|
|
@ -52,7 +52,7 @@ UI Components support customization to give the components the right feel and lo
|
|||
|
||||
Understanding these requirements will help you choose the right client library:
|
||||
|
||||
- **How much customization do you desire?** Azure Communication core client libraries don't have a UX and are designed so you can build whatever UX you want. UI Framework components provide UI assets at the cost of reduced customization.
|
||||
- **How much customization do you desire?** Azure Communication core client libraries don't have a UX and are designed so you can build whatever UX you want. UI Toolkit components provide UI assets at the cost of reduced customization.
|
||||
- **What platforms are you targeting?** Different platforms have different capabilities.
|
||||
|
||||
Details about feature availability in the [UI Toolkit is available here](/?path=/story/use-cases--page), but key trade-offs are summarized below.
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ import QuickstartCompositeText from '!!raw-loader!./snippets/QuickstartComposite
|
|||
|
||||
# Quickstart: Get started with Composites
|
||||
|
||||
Get started with Azure Communication Services by using the UI Framework to quickly integrate communication experiences into your applications. In this quickstart, you'll learn how integrate UI Framework base components into your application to build communication experiences.
|
||||
Get started with Azure Communication Services by using the UI Toolkit to quickly integrate communication experiences into your applications. In this quickstart, you'll learn how to integrate UI Toolkit base components into your application to build communication experiences.
|
||||
|
||||
UI Framework components come in two flavors: Base and Composite.
|
||||
UI Toolkit components come in two flavors: Base and Composite.
|
||||
|
||||
- **Base components** represent discrete communication capabilities; they're the basic building blocks that can be used to build complex communication experiences.
|
||||
- **Composite components** are turn-key experiences for common communication scenarios that have been built using **base components** as building blocks and packaged to be easily integrated into applications.
|
||||
|
|
@ -23,7 +23,7 @@ UI Framework components come in two flavors: Base and Composite.
|
|||
|
||||
## Setting up
|
||||
|
||||
UI Framework requires a React environment to be setup. Next we will do that. If you already have a React App, you can skip this section.
|
||||
UI Toolkit requires a React environment to be setup. Next we will do that. If you already have a React App, you can skip this section.
|
||||
|
||||
### Set Up React App
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
import { Meta } from '@storybook/addon-docs/blocks';
|
||||
import { Canvas, Description, Heading, Props, Source, Title } from '@storybook/addon-docs/blocks';
|
||||
import ChatApp from '!!raw-loader!./snippets/ChatApp.snippet.tsx';
|
||||
import ChatAppStateful from '!!raw-loader!./snippets/ChatAppStateful.snippet.tsx';
|
||||
import ChatAppSelectors from '!!raw-loader!./snippets/ChatAppSelectors.snippet.tsx';
|
||||
import ChatAppHandlers from '!!raw-loader!./snippets/ChatAppHandlers.snippet.tsx';
|
||||
|
||||
<Meta title="Quickstarts/Get started with Stateful Client" />
|
||||
|
||||
# Quickstart: Get started with Stateful Clients
|
||||
|
||||
Get started with Azure Communication Services by using the UI Toolkit to quickly integrate communication experiences into your applications.
|
||||
In this quickstart, you'll learn how to integrate UI Toolkit stateful clients into your application to build communication experiences.
|
||||
To learn more about how to build applications with UI Toolkit UI Components, see [Get started with UI Components](/?path=/docs/quickstarts-get-started-with-ui-components--page)
|
||||
Stateful clients make it easier for developers to build UI applications on top of Azure Communication Services by providing built-in state that UI components can use to render. Find more information about [Stateful client here.](/?path=/docs/stateful-chat-client-introduction--page).
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
|
||||
- [Node.js](https://nodejs.org/) Active LTS and Maintenance LTS versions (Node 12 Recommended).
|
||||
- An active Communication Services resource. [Create a Communication Services resource](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource?tabs=windows&pivots=platform-azp).
|
||||
- Knowledge of [UI Toolkit Components](/?path=/story/quickstarts-get-started-with-ui-components--page). We will be using the UI Components in this quickstart.
|
||||
- Knowledge of Azure Communication Services [Chat patterns](https://docs.microsoft.com/azure/communication-services/concepts/chat/concepts). You will need to create a thread and a user to that thread to use the UI Toolkit. Look at the [recommended architecture for the UI Toolkit](/?path=/docs/use-cases--page#recommended-architecture)
|
||||
|
||||
## Setting up
|
||||
|
||||
UI Toolkit requires a React environment to be setup as described below. If you already have a React App, you can skip this section.
|
||||
|
||||
### Set Up React App
|
||||
|
||||
We'll use the `create-react-app` template for this quickstart. For more information, see: [Get Started with React](https://reactjs.org/docs/create-a-new-react-app.html)
|
||||
|
||||
```bash
|
||||
|
||||
# Build app in typescript:
|
||||
npx create-react-app ui-toolkit-starting-with-stateful --template typescript
|
||||
|
||||
cd ui-toolkit-quickstart
|
||||
|
||||
```
|
||||
|
||||
At the end of this process, you should have a full application inside the folder `ui-toolkit-starting-with-stateful`.
|
||||
For this quickstart, we'll be modifying files inside the `src` folder.
|
||||
|
||||
### Install the package
|
||||
|
||||
Use the `npm install` command to install the Azure Communication Services UI Toolkit for JavaScript.
|
||||
Move the provided tarball (Private Preview) over to the `ui-toolkit-starting-with-stateful` directory. **Make sure to run the `npm i` command inside the `ui-toolkit-starting-with-stateful` directory.**
|
||||
|
||||
```bash
|
||||
|
||||
# For Private Preview install tarball
|
||||
npm install --save ./{path for tarball}
|
||||
|
||||
```
|
||||
|
||||
The `--save` option lists the library as a dependency in your **package.json** file.
|
||||
|
||||
### Run Create React App
|
||||
|
||||
Let's test the Create React App installation by running:
|
||||
|
||||
```bash
|
||||
|
||||
npm run start
|
||||
|
||||
```
|
||||
|
||||
## Object model
|
||||
|
||||
The following classes and interfaces from the Azure Communication Services UI client library are referenced in this quickstart:
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| [ChatClient](https://azuresdkdocs.blob.core.windows.net/$web/javascript/azure-communication-chat/1.0.0/classes/chatclient.html) | Low-level chat library client. |
|
||||
| [chatClientDeclaratify](/?path=/story/stateful-chat-client-introduction--page) | Method to translate low-level library client into a stateful client for the UI Toolkit |
|
||||
| [statefulChatClient](/?path=/story/stateful-chat-client-introduction--page) | Stateful chat client based on the low level chat library client. |
|
||||
| [chatThreadSelector](/?path=/story/stateful-chat-client-introduction--page) | Method for generating reactive read-only props for Chat Thread UI Component from Stateful Client |
|
||||
| [sendBoxSelector](/?path=/story/stateful-chat-client-introduction--page) | Method to generate props for Send Box UI Component from Stateful Client |
|
||||
| [createDefaultHandlersForComponent](/?path=/story/stateful-chat-client-introduction--page) | Method to generate method props for UI Components from Stateful Client to handle UI Component events |
|
||||
|
||||
## Compose Chat Components
|
||||
|
||||
For Chat, we will use the [`MessageThread`](/?path=/docs/ui-components-chatthread--chat-thread-component) and [`SendBox`](/?path=/docs/ui-components-sendbox--send-box-story-book-component) components.
|
||||
To start add the code below to `App.tsx`.
|
||||
For more information on getting started with UI Components follow the [quickstart](/?path=/story/quickstarts-get-started-with-ui-components--page)
|
||||
|
||||
`App.tsx`
|
||||
|
||||
<Source code={ChatApp} />
|
||||
|
||||
## Instantiate Stateful Chat client in the app
|
||||
|
||||
Update the `App.tsx` file to create a `statefulChatClient` off the low-level `ChatClient` using the method `chatClientDeclaratify`.
|
||||
Make sure to populate the constants at the top of the App code with information from your Azure Communication Services Resource.
|
||||
These properties will be used to instantiate the `ChatClient` and `statefulChatClient`. Review [Chat patterns](https://docs.microsoft.com/azure/communication-services/concepts/chat/concepts) for questions on these properties.
|
||||
|
||||
`App.tsx`
|
||||
|
||||
<Source code={ChatAppStateful} />
|
||||
|
||||
## Generate selector props to UI Components
|
||||
|
||||
Update the `App.tsx` file to generate selector props off the `statefulChatClient`.
|
||||
`statefulChatClient` will be updated asynchronously repeatedly in response to user actions and notifications from the chat server. We mirror these changes into the generated props via `useEffect`.
|
||||
The selector props needs to be updated everytime the `statefulChatClient` state changes to make sure they keep up to date.
|
||||
|
||||
`App.tsx`
|
||||
|
||||
<Source code={ChatAppStateful} />
|
||||
|
||||
## Generate handler props to UI Components
|
||||
|
||||
Update the `App.tsx` file to generate handler props off the `statefulChatClient`.
|
||||
Handlers will update the `statefulChatClient` whenever the UI Components generate an event such as send a message.
|
||||
Update the UI Components to also use handlers as props.
|
||||
|
||||
`App.tsx`
|
||||
|
||||
<Source code={ChatAppHandlers} />
|
||||
|
||||
## Run quickstart
|
||||
|
||||
At this point your app should have two UI Components hooked up to
|
||||
To run the code above use the command:
|
||||
|
||||
```console
|
||||
|
||||
npm run start
|
||||
|
||||
```
|
||||
|
||||
## Clean up resources
|
||||
|
||||
If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group.
|
||||
Deleting the resource group also deletes any other resources associated with it.
|
||||
Learn more about [cleaning up resources](https://docs.microsoft.com/azure/communication-services/quickstarts/create-communication-resource?tabs=windows&pivots=platform-azp#clean-up-resources).
|
||||
|
||||
## Next steps
|
||||
|
||||
[Try UI Toolkit Composite Components](/?path=/story/quickstart-composites--page)
|
||||
|
||||
For more information, see the following resources:
|
||||
|
||||
- [UI Toolkit Use Cases](/?path=/story/use-cases--page)
|
||||
- [UI Toolkit Styling](/?path=/story/styling--page)
|
||||
- [UI Toolkit Theming](/?path=/story/theming--page)
|
||||
|
|
@ -12,9 +12,9 @@ import CompletedComponentsApp from './snippets/CompletedComponentsApp.snippet';
|
|||
|
||||
# Quickstart: Get started with UI Components
|
||||
|
||||
Get started with Azure Communication Services by using the UI Framework to quickly integrate communication experiences into your applications. In this quickstart, you'll learn how to integrate UI Framework base components into your application to build communication experiences.
|
||||
Get started with Azure Communication Services by using the UI Toolkit to quickly integrate communication experiences into your applications. In this quickstart, you'll learn how to integrate UI Toolkit base components into your application to build communication experiences.
|
||||
|
||||
UI Framework components come in two flavors: Base and Composite.
|
||||
UI Toolkit components come in two flavors: Base and Composite.
|
||||
|
||||
- **Base components** represent discrete communication capabilities; they're the basic building blocks that can be used to build complex communication experiences.
|
||||
- **Composite components** are turn-key experiences for common communication scenarios that have been built using **base components** as building blocks and packaged to be easily integrated into applications.
|
||||
|
|
@ -27,7 +27,7 @@ UI Framework components come in two flavors: Base and Composite.
|
|||
|
||||
## Setting up
|
||||
|
||||
UI Framework requires a React environment to be setup. Next we will do that. If you already have a React App, you can skip this section.
|
||||
UI Toolkit requires a React environment to be setup. Next we will do that. If you already have a React App, you can skip this section.
|
||||
|
||||
### Set Up React App
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import { FluentThemeProvider, MessageThread, SendBox, MessageThreadProps, SendBoxProps } from '@azure/communication-ui';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
function App(): JSX.Element {
|
||||
const [messageThreadProps] = useState<MessageThreadProps>();
|
||||
const [sendBoxProps] = useState<SendBoxProps>();
|
||||
|
||||
return (
|
||||
<FluentThemeProvider>
|
||||
<div style={{ height: '50rem', width: '50rem' }}>
|
||||
{/*Props are updated asynchronously, so only render the component once props are populated.*/}
|
||||
{messageThreadProps && <MessageThread {...messageThreadProps} />}
|
||||
{sendBoxProps && <SendBox {...sendBoxProps} />}
|
||||
</div>
|
||||
</FluentThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { chatClientDeclaratify, DeclarativeChatClient } from '@azure/acs-chat-declarative';
|
||||
import { sendBoxSelector, chatThreadSelector, createDefaultHandlersForComponent } from '@azure/acs-chat-selector';
|
||||
import { ChatClient, ChatThreadClient } from '@azure/communication-chat';
|
||||
import { AzureCommunicationUserCredential } from '@azure/communication-common';
|
||||
import { FluentThemeProvider, MessageThread, SendBox, MessageThreadProps, SendBoxProps } from '@azure/communication-ui';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
function App(): JSX.Element {
|
||||
const endpointUrl = 'INSERT ENDPOINT URL FOR RESOURCE';
|
||||
const userAccessToken = 'INSERT ACCESS TOKEN FOR RESOURCE';
|
||||
const userId = 'INSERT USER ID';
|
||||
const tokenCredential = new AzureCommunicationUserCredential(userAccessToken);
|
||||
const threadId = 'INSERT THREAD ID ';
|
||||
const displayName = 'INSERT DISPLAY NAME';
|
||||
|
||||
const [statefulChatClient, setStatefulChatClient] = useState<DeclarativeChatClient>();
|
||||
const [chatThreadClient, setChatThreadClient] = useState<ChatThreadClient>();
|
||||
const [messageThreadProps, setChatThreadProps] = useState<MessageThreadProps>();
|
||||
const [sendBoxProps, setSendBoxProps] = useState<SendBoxProps>();
|
||||
|
||||
useEffect(() => {
|
||||
// `selectors` compute props from `statefulChatClient`
|
||||
// Computed props are updated in you App's State.
|
||||
const updateAppState = (statefulClientState): void => {
|
||||
setChatThreadProps(chatThreadSelector(statefulClientState, { threadId }));
|
||||
setSendBoxProps(sendBoxSelector(statefulClientState, { threadId }));
|
||||
};
|
||||
(async () => {
|
||||
if (statefulChatClient && !chatThreadClient) {
|
||||
// When `statefulChatClient` becomes available, generate a thread client for chat
|
||||
setChatThreadClient(await statefulChatClient.getChatThreadClient(threadId));
|
||||
// Set your App State using computed props from `statefulChatClient`.
|
||||
updateAppState(statefulChatClient.state);
|
||||
// Subscribe for changes in `statefulChatClient` state.
|
||||
statefulChatClient.onStateChange(updateAppState);
|
||||
}
|
||||
})();
|
||||
// Important: Ensure that events are unsubscribed when component unloads.
|
||||
return () => statefulChatClient.offStateChange(updateAppState);
|
||||
}, [statefulChatClient, chatThreadClient]);
|
||||
|
||||
//Add state to the low-level chat client
|
||||
setStatefulChatClient(
|
||||
chatClientDeclaratify(new ChatClient(endpointUrl, tokenCredential), { userId: userId, displayName: displayName })
|
||||
);
|
||||
|
||||
//Generate Handlers for Message Thread and SendBox off the stateful client to handle events from the UI Components
|
||||
let sendBoxHandler;
|
||||
let messageThreadHandler;
|
||||
if (chatThreadClient && statefulChatClient) {
|
||||
sendBoxHandler = createDefaultHandlersForComponent(statefulChatClient, chatThreadClient, SendBox);
|
||||
messageThreadHandler = createDefaultHandlersForComponent(statefulChatClient, chatThreadClient, MessageThread);
|
||||
}
|
||||
|
||||
return (
|
||||
<FluentThemeProvider>
|
||||
<div style={{ height: '50rem', width: '50rem' }}>
|
||||
{/*Props are updated asynchronously, so only render the component once props are populated.*/}
|
||||
{messageThreadProps && <MessageThread {...messageThreadProps} {...messageThreadHandler} />}
|
||||
{sendBoxProps && <SendBox {...sendBoxProps} {...sendBoxHandler} />}
|
||||
</div>
|
||||
</FluentThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { chatClientDeclaratify, DeclarativeChatClient } from '@azure/acs-chat-declarative';
|
||||
import { sendBoxSelector, chatThreadSelector } from '@azure/acs-chat-selector';
|
||||
import { ChatClient, ChatThreadClient } from '@azure/communication-chat';
|
||||
import { AzureCommunicationUserCredential } from '@azure/communication-common';
|
||||
import { FluentThemeProvider, MessageThread, SendBox, MessageThreadProps, SendBoxProps } from '@azure/communication-ui';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
function App(): JSX.Element {
|
||||
const endpointUrl = 'INSERT ENDPOINT URL FOR RESOURCE';
|
||||
const userAccessToken = 'INSERT ACCESS TOKEN FOR RESOURCE';
|
||||
const userId = 'INSERT USER ID';
|
||||
const tokenCredential = new AzureCommunicationUserCredential(userAccessToken);
|
||||
const threadId = 'INSERT THREAD ID ';
|
||||
const displayName = 'INSERT DISPLAY NAME';
|
||||
|
||||
const [statefulChatClient, setStatefulChatClient] = useState<DeclarativeChatClient>();
|
||||
const [chatThreadClient, setChatThreadClient] = useState<ChatThreadClient>();
|
||||
const [messageThreadProps, setChatThreadProps] = useState<MessageThreadProps>();
|
||||
const [sendBoxProps, setSendBoxProps] = useState<SendBoxProps>();
|
||||
|
||||
useEffect(() => {
|
||||
// `selectors` compute props from `statefulChatClient`
|
||||
// Computed props are updated in you App's State.
|
||||
const updateAppState = (statefulClientState): void => {
|
||||
setChatThreadProps(chatThreadSelector(statefulClientState, { threadId }));
|
||||
setSendBoxProps(sendBoxSelector(statefulClientState, { threadId }));
|
||||
};
|
||||
(async () => {
|
||||
if (statefulChatClient && !chatThreadClient) {
|
||||
// When `statefulChatClient` becomes available, generate a thread client for chat
|
||||
setChatThreadClient(await statefulChatClient.getChatThreadClient(threadId));
|
||||
// Set your App State using computed props from `statefulChatClient`.
|
||||
updateAppState(statefulChatClient.state);
|
||||
// Subscribe for changes in `statefulChatClient` state.
|
||||
statefulChatClient.onStateChange(updateAppState);
|
||||
}
|
||||
})();
|
||||
// Important: Ensure that events are unsubscribed when component unloads.
|
||||
return () => statefulChatClient.offStateChange(updateAppState);
|
||||
}, [statefulChatClient, chatThreadClient]);
|
||||
|
||||
//Add state to the low-level chat client
|
||||
setStatefulChatClient(
|
||||
chatClientDeclaratify(new ChatClient(endpointUrl, tokenCredential), { userId: userId, displayName: displayName })
|
||||
);
|
||||
|
||||
return (
|
||||
<FluentThemeProvider>
|
||||
<div style={{ height: '50rem', width: '50rem' }}>
|
||||
{/*Props are updated asynchronously, so only render the component once props are populated.*/}
|
||||
{messageThreadProps && <MessageThread {...messageThreadProps} />}
|
||||
{sendBoxProps && <SendBox {...sendBoxProps} />}
|
||||
</div>
|
||||
</FluentThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { chatClientDeclaratify, DeclarativeChatClient } from '@azure/acs-chat-declarative';
|
||||
import { ChatClient, ChatThreadClient } from '@azure/communication-chat';
|
||||
import { AzureCommunicationUserCredential } from '@azure/communication-common';
|
||||
import { FluentThemeProvider, MessageThread, SendBox, MessageThreadProps, SendBoxProps } from '@azure/communication-ui';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
function App(): JSX.Element {
|
||||
const endpointUrl = 'INSERT ENDPOINT URL FOR RESOURCE';
|
||||
const userAccessToken = 'INSERT ACCESS TOKEN FOR RESOURCE';
|
||||
const userId = 'INSERT USER ID';
|
||||
const tokenCredential = new AzureCommunicationUserCredential(userAccessToken);
|
||||
const threadId = 'INSERT THREAD ID ';
|
||||
const displayName = 'INSERT DISPLAY NAME';
|
||||
|
||||
const [statefulChatClient, setStatefulChatClient] = useState<DeclarativeChatClient>();
|
||||
const [chatThreadClient, setChatThreadClient] = useState<ChatThreadClient>();
|
||||
const [messageThreadProps] = useState<MessageThreadProps>();
|
||||
const [sendBoxProps] = useState<SendBoxProps>();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (statefulChatClient && !chatThreadClient) {
|
||||
//Once stateful client exists, generate a thread client for chat
|
||||
setChatThreadClient(await statefulChatClient.getChatThreadClient(threadId));
|
||||
}
|
||||
})();
|
||||
}, [statefulChatClient, chatThreadClient]);
|
||||
|
||||
//Add state to the low-level chat client
|
||||
setStatefulChatClient(
|
||||
chatClientDeclaratify(new ChatClient(endpointUrl, tokenCredential), { userId: userId, displayName: displayName })
|
||||
);
|
||||
|
||||
return (
|
||||
<FluentThemeProvider>
|
||||
<div style={{ height: '50rem', width: '50rem' }}>
|
||||
{/*Props are updated asynchronously, so only render the component once props are populated.*/}
|
||||
{messageThreadProps && <MessageThread {...messageThreadProps} />}
|
||||
{sendBoxProps && <SendBox {...sendBoxProps} />}
|
||||
</div>
|
||||
</FluentThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { FluentThemeProvider, StreamMedia, VideoTile } from '@azure/communication-react';
|
||||
import React from 'react';
|
||||
import { FluentThemeProvider, StreamMedia, VideoTile } from 'react-components';
|
||||
import { renderVideoStream } from '../../utils';
|
||||
|
||||
export const VideoTileExample: () => JSX.Element = () => {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ component ensures:
|
|||
|
||||
## Usage
|
||||
|
||||
To use the FluentThemeProvider, simply import it from `react-components` and wrap it around
|
||||
To use the FluentThemeProvider, simply import it from `@azure/communication-react` and wrap it around
|
||||
ACS UI SDK components and Fluent UI components. For the example below we will provide theming and icons to
|
||||
the `ControlBar`.
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ the `ControlBar`.
|
|||
1. `FluentThemeProvider` loads the icons used by components such as `CameraButton`
|
||||
2. `FluentThemeProvider` applies theme (light theme by default) to the `ControlBar`
|
||||
|
||||
To illustrate how another theme can be applied, import `darkTheme` from `react-components`
|
||||
To illustrate how another theme can be applied, import `darkTheme` from `@azure/communication-react`
|
||||
and assign it to the `fluentTheme` property.
|
||||
|
||||
<Source code={DarkControlBarText} />
|
||||
|
|
|
|||
|
|
@ -80,14 +80,14 @@ Developers can hook into the stateful client to read the state, handle events an
|
|||
|
||||
## Recommended architecture
|
||||
|
||||
|
||||
|
||||
|
||||
Composite and Base Components are initialized using an Azure Communication Services access token. Access tokens should be procured from Azure Communication Services through a
|
||||
trusted service that you manage. See [Quickstart: Create Access Tokens](https://docs.microsoft.com/azure/communication-services/quickstarts/access-tokens?pivots=programming-language-javascript) and [Trusted Service Tutorial](https://docs.microsoft.com/azure/communication-services/tutorials/trusted-service-tutorial) for more information.
|
||||
|
||||
These client libraries also require the context for the call or chat they will join. Similar to user access tokens, this context should be disseminated to clients via your own trusted service. The list below summarizes the initialization and resource management functions that you need to operationalize.
|
||||
|
||||
| Contoso Responsibilities | UI Framework Responsibilities |
|
||||
| Contoso Responsibilities | UI Toolkit Responsibilities |
|
||||
| -------------------------------------------------------- | --------------------------------------------------------------- |
|
||||
| Provide access token from Azure | Pass through given access token to initialize components |
|
||||
| Provide refresh function | Refresh access token using developer provided function |
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче