@mattbillfred/mgt-chat

Microsoft Graph Toolkit Chat Components

Note: The Microsoft Graph Toolkit Chat Components are in Private Preview and are subject to change. The use of these components in production applications is not supported.

The Microsoft Graph Toolkit (mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.

The @microsoft/mgt-chat package contains all chat components that allow to build chat-based applications with React.

See docs for full documentation

See docs for chat components

Getting started with the Graph Toolkit chat components

Use this guide to get started with using the Microsoft Graph Toolkit Chat Components. Some of the steps highlights in this guide are temporary and will evolve with the future preview versions of the components.

Install the Graph Notification Broker

To start, the Chat Components require a server side dependency to help with receiving live notifications from the service. This helps with getting new messages, roster changes, etc. This component is the Graph Notification Broker.

To install the Graph Notification Broker, refer to this deployment guide.

From this deployment, you will need to keep track of 3 created artifacts:

• The URL of the provisioned Azure Function
• The ID of the Backend App Registration
• The ID of the Frontend App Registration

Install the necessary dependencies

In your React app where you want to add the Microsoft Graph Toolkit Chat Components, you will need to install our dependencies:

npm install @microsoft/[e-mail]-chat
npm install @microsoft/mgt-react
npm install @microsoft/mgt-msal2-provider

Configure the broker settings and authentication

At the root of your component hierarchy (usually in index.tsx), configure the broker settings with the previously noted values. You will also configure the authentication to enable seemless integration with both the Graph Notification Broker and with Microsoft Graph.

import { Providers } from '@microsoft/mgt-react';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
import { allChatScopes, brokerSettings } from '@microsoft/mgt-chat';

brokerSettings.functionHost = '%URL_AZURE_FUNCTION%';
brokerSettings.appId = '%BACKEND_APP_ID%';

Providers.globalProvider = new Msal2Provider({
  clientId: '%FRONTEND_APP_ID%',
  scopes: allChatScopes
});

Add the components to your code

You have all the necessary settings in place to add the Microsoft Graph Toolkit Chat Components to your application. To add the components, just do the following:

import React, { memo, useCallback, useState } from 'react';
import { Login } from '@microsoft/mgt-react';
import { Chat, NewChat } from '@microsoft/mgt-chat';

export const App: React.FunctionComponent = () => {
  const [chatId, setChatId] = useState<string>();

  const [showNewChat, setShowNewChat] = useState<boolean>(false);
  const onChatCreated = useCallback((chat: GraphChat) => {
    setChatId(chat.id);
    setShowNewChat(false);
  }, []);

  return (
    <Login />
    <button onClick={() => setShowNewChat(true)}>New Chat</button>
    {showNewChat && (
        <NewChat
            onChatCreated={onChatCreated}
            onCancelClicked={() => setShowNewChat(false)}
            mode="auto"
        />
    )}

    {chatId && <Chat chatId={chatId} />}
  );
}

Review existing samples

We are providing simple apps that provides all the necessary elements to have a fully working application with our Chat Components.

• Our basic react-chat application
• Our hero react-contoso application

Known issues

• When using the chat components, users need to login twice because it requires to acquire tokens to both Microsoft Graph and the Graph Notification Broker

Contribute

We enthusiastically welcome contributions and feedback. Please read our wiki and the contributing guide before you begin.

Feedback and Requests

For general questions and support, please use Stack Overflow where questions should be tagged with microsoft-graph-toolkit

Please use GitHub Issues for bug reports and feature requests. We highly recommend you browse existing issues before opening new issues.

License

All files in this GitHub repository are subject to the MIT license. This project also references fonts and icons from a CDN, which are subject to a separate asset license.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [e-mail] with any additional questions or comments.