# @mattbillfred/mgt-chat > Chat component for providing Teams conversations via a React component built using the ACS UI library Latest version **3.1.3-next.mgt-chat.a661926e2** (published 2024-01-23) · MIT license · 0 weekly downloads ## Install ```sh npm install @mattbillfred/mgt-chat pnpm add @mattbillfred/mgt-chat yarn add @mattbillfred/mgt-chat bun add @mattbillfred/mgt-chat ``` ## Health **Score 35/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned. ## Facts | | | |---|---| | Version | 3.1.3-next.mgt-chat.a661926e2 | | Published | 2024-01-23 | | First published | 2024-01-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 23 | | Unpacked size | 992.4 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 1069 | | Author | Microsoft | | Maintainers | mattbillfred | | Keywords | microsoft graph, microsoft graph toolkit, teams, chat, acs | ## Links - npm: https://www.npmjs.com/package/@mattbillfred/mgt-chat - Repository: https://github.com/microsoftgraph/microsoft-graph-toolkit - Issues: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues - npm.io page: https://npm.io/package/@mattbillfred/mgt-chat ## Dependencies (23) - [uuid](https://npm.io/package/uuid.md) ^9.0.0 - [immer](https://npm.io/package/immer.md) ^9.0.6 - [opencrypto](https://npm.io/package/opencrypto.md) 1.5.5 - [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4 - [html-to-text](https://npm.io/package/html-to-text.md) ^9.0.5 - [@fluentui/react](https://npm.io/package/@fluentui/react.md) ~8.106.1 - [@microsoft/signalr](https://npm.io/package/@microsoft/signalr.md) ^7.0.4 - [@azure/msal-browser](https://npm.io/package/@azure/msal-browser.md) 2.33.0 - [@microsoft/mgt-react](https://npm.io/package/@microsoft/mgt-react.md) npm:@mattbillfred/mgt-react@3.1.3-next.mgt-chat.a661926e2 - [@fluentui/react-icons](https://npm.io/package/@fluentui/react-icons.md) ^2.0.210 - [@microsoft/mgt-element](https://npm.io/package/@microsoft/mgt-element.md) npm:@mattbillfred/mgt-element@3.1.3-next.mgt-chat.a661926e2 - [@azure/communication-chat](https://npm.io/package/@azure/communication-chat.md) 1.3.2 - [@fluentui/react-northstar](https://npm.io/package/@fluentui/react-northstar.md) ^0.66.4 - [@microsoft/mgt-components](https://npm.io/package/@microsoft/mgt-components.md) npm:@mattbillfred/mgt-components@3.1.3-next.mgt-chat.a661926e2 - [@azure/communication-react](https://npm.io/package/@azure/communication-react.md) 1.7.0-beta.2 - [@fluentui/react-components](https://npm.io/package/@fluentui/react-components.md) ^9.19.1 - [@azure/communication-common](https://npm.io/package/@azure/communication-common.md) 2.2.1 - [@azure/communication-calling](https://npm.io/package/@azure/communication-calling.md) 1.16.3 - [@azure/communication-identity](https://npm.io/package/@azure/communication-identity.md) 1.2.0 - [@microsoft/mgt-msal2-provider](https://npm.io/package/@microsoft/mgt-msal2-provider.md) npm:@mattbillfred/mgt-msal2-provider@3.1.3-next.mgt-chat.a661926e2 - [@microsoft/microsoft-graph-types](https://npm.io/package/@microsoft/microsoft-graph-types.md) ^2.0.0 - [@azure/communication-calling-effects](https://npm.io/package/@azure/communication-calling-effects.md) 1.0.1 - [@microsoft/microsoft-graph-types-beta](https://npm.io/package/@microsoft/microsoft-graph-types-beta.md) ^0.16.0-preview ## Recent versions - 3.1.3-next.mgt-chat.a661926e2 (latest) — 2024-01-23 - 4.0.0-next.mgt-chat.c717e60ac (next.mgt-chat) — 2024-08-27 - 4.0.0-next.mgt-chat.fc24d3d41 — 2024-08-14 - 4.0.0-next.mgt-chat.79d5befff — 2024-06-26 - 4.0.0-next.mgt-chat.cc1ea0ea6 — 2024-03-07 - 4.0.0-next.mgt-chat.fee25d1c3 — 2024-03-07 - 4.0.0-next.mgt-chat.129ad4ddf — 2024-03-06 - 4.0.0-next.mgt-chat.39697865a — 2024-03-01 - 4.0.0-next.mgt-chat.dee9cd5ff — 2024-03-01 - 4.0.0-next.mgt-chat.457f61d74 — 2024-03-01 - 4.0.0-next.mgt-chat.ec95d3c9f — 2024-02-28 - 4.0.0-next.mgt-chat.656ff3d30 — 2024-02-26 - 4.0.0-next.mgt-chat.79746f233 — 2024-02-23 - 4.0.0-next.mgt-chat.50211e4d8 — 2024-02-20 - 4.0.0-next.mgt-chat.837b7cbf4 — 2024-02-19 - … 17 more at https://npm.io/package/@mattbillfred/mgt-chat/versions ## README # Microsoft Graph Toolkit Chat Components [![npm](https://img.shields.io/npm/v/@microsoft/mgt-chat/next.mgt-chat?style=for-the-badge)](https://www.npmjs.com/package/@microsoft/mgt-chat) > 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)](https://aka.ms/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](https://aka.ms/mgt/docs) [See docs for chat components](https://aka.ms/mgt/docs/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](https://github.com/microsoft/GraphNotificationBroker#graph-notification-broker). To install the Graph Notification Broker, refer to this [deployment guide](https://github.com/microsoft/GraphNotificationBroker/blob/main/docs/deployment-guide.md#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: ```bash npm install @microsoft/mgt-chat@next.mgt-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. ```tsx 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: ```tsx 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(); const [showNewChat, setShowNewChat] = useState(false); const onChatCreated = useCallback((chat: GraphChat) => { setChatId(chat.id); setShowNewChat(false); }, []); return ( {showNewChat && ( setShowNewChat(false)} mode="auto" /> )} {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](../../samples/react-chat) * [Our hero `react-contoso` application](../../samples/react-contoso) ### 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](https://github.com/microsoftgraph/microsoft-graph-toolkit/wiki) and the [contributing guide](../../CONTRIBUTING.md) before you begin. ## Feedback and Requests For general questions and support, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-graph-toolkit) where questions should be tagged with `microsoft-graph-toolkit` Please use [GitHub Issues](https://github.com/microsoftgraph/microsoft-graph-toolkit/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) 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](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/main/LICENSE). This project also references fonts and icons from a CDN, which are subject to a separate [asset license](https://static2.sharepointonline.com/files/fabric/assets/license.txt). ## Code of Conduct This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. --- _Source: https://npm.io/package/@mattbillfred/mgt-chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._