Skip to content
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

Jump to bottom

feat: add adaptive cards support #2681

Closed
wants to merge 4 commits into from
Closed

feat: add adaptive cards support #2681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c36fea7
Add adaptive cards modules and their dependencies
musale Aug 24, 2023
4190a0a
Add sample adaptive card content from msteams
musale Aug 24, 2023
41509ed
Add support for adaptive cards
musale Aug 24, 2023
323e953
Update lock file
musale Aug 24, 2023
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
5 changes: 5 additions & 0 deletions packages/mgt-chat/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@
"typescript": "^4.9.5"
},
"dependencies": {
"adaptivecards": "3.0.1",
"adaptivecards-fluentui": "0.5.3",
"@azure/communication-calling": "1.10.1",
"@azure/communication-chat": "1.3.0",
"@azure/communication-common": "2.2.0",
Expand All @@ -51,13 +53,16 @@
"@fluentui/react-northstar": "^0.66.4",
"@fluentui/react-components": "^9.19.1",
"@fluentui/react-icons": "^2.0.200",
"markdown-it": "13.0.1",
"@microsoft/mgt-element": "*",
"@microsoft/mgt-components": "*",
"@microsoft/mgt-msal2-provider": "*",
"@microsoft/mgt-react": "*",
"@microsoft/microsoft-graph-types": "^2.0.0",
"@microsoft/microsoft-graph-types-beta": "^0.16.0-preview",
"@microsoft/signalr": "^7.0.4",
"swiper": "10.2.0",
"@types/markdown-it": "13.0.0",
"immer": "^9.0.6",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
Expand Down
76 changes: 76 additions & 0 deletions packages/mgt-chat/sampleData/userAdaptiveCardContent.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
{
"type": "AdaptiveCard",
"body": [
{
"altText": "Christina Shusho - Shusha Nyavu (Official Video) SMS SKIZA 7916811 to 811",
"size": "stretch",
"url": "https://i.ytimg.com/vi/eOGKpXVSkDU/mqdefault.jpg",
"height": "auto",
"spacing": "None",
"type": "Image"
},
{
"maxLines": 2,
"size": "large",
"text": "Christina Shusho - Shusha Nyavu (Official Video) SMS SKIZA 7916811 to 811",
"weight": "bolder",
"wrap": true,
"type": "TextBlock"
},
{
"isSubtle": true,
"maxLines": 2,
"size": "small",
"text": "Christina Shusho | 04:04 | 5.6M views | 2 years ago",
"weight": "lighter",
"wrap": true,
"spacing": "Small",
"type": "TextBlock"
},
{
"actions": [
{
"data": {
"msteams": {
"type": "invoke",
"value": {
"type": "tab/tabInfoAction",
"tabInfo": {
"contentUrl": "https://tabs.teams.microsoft.com/pre/youtubeContentStage?videoId%3deOGKpXVSkDU",
"websiteUrl": "https://www.youtube.com/watch?v=eOGKpXVSkDU",
"entityId": "924dabf6-32b2-400f-998d-e14c3f7edeaa"
}
}
}
},
"title": "Open",
"type": "Action.Submit"
},
{
"url": "https://teams.microsoft.com/l/meeting-share?deeplinkId=ACCC6AFE-449D-4AF3-8D3E-E8A7B3AB1280&fqdn=&lm=deeplink&appContext=%7b%22appSharingUrl%22%3a%22https%3a%2f%2ftabs.teams.microsoft.com%2fyoutubeMainStage%3fv%3deOGKpXVSkDU%22%2c%22appId%22%3a%22com.microsoft.teamspace.tab.youtube%22%2c%22useMeetNow%22%3atrue%7d",
"title": "Share in meeting",
"type": "Action.OpenUrl"
}
],
"type": "ActionSet"
}
],
"$schema": "https://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.5",
"selectAction": {
"data": {
"msteams": {
"type": "invoke",
"value": {
"type": "tab/tabInfoAction",
"tabInfo": {
"contentUrl": "https://tabs.teams.microsoft.com/pre/youtubeContentStage?videoId%3deOGKpXVSkDU",
"websiteUrl": "https://www.youtube.com/watch?v=eOGKpXVSkDU",
"entityId": "924dabf6-32b2-400f-998d-e14c3f7edeaa"
}
}
}
},
"type": "Action.Submit"
}
}
84 changes: 68 additions & 16 deletions packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,45 +6,49 @@
*/

import {
MessageThreadProps,
SendBoxProps,
ChatMessage as AcsChatMessage,
ContentSystemMessage,
ErrorBarProps,
SystemMessage,
ContentSystemMessage
MessageThreadProps,
SendBoxProps,
SystemMessage
} from '@azure/communication-react';
import { getUserWithPhoto } from '@microsoft/mgt-components';
import { ActiveAccountChanged, IGraph, LoginChangedEvent, ProviderState, Providers } from '@microsoft/mgt-element';
import { IDynamicPerson } from '@microsoft/mgt-react';
import { GraphError } from '@microsoft/microsoft-graph-client';
import {
AadUserConversationMember,
Chat,
ChatMessage,
ChatMessageAttachment,
ChatRenamedEventMessageDetail,
MembersAddedEventMessageDetail,
MembersDeletedEventMessageDetail
} from '@microsoft/microsoft-graph-types';
import { ActiveAccountChanged, IGraph, LoginChangedEvent, Providers, ProviderState } from '@microsoft/mgt-element';
import * as AdaptiveCards from 'adaptivecards';
import { useFluentUI } from 'adaptivecards-fluentui';
import { produce } from 'immer';
import MarkdownIt from 'markdown-it';
import { v4 as uuid } from 'uuid';
import { currentUserId, currentUserName } from '../utils/currentUser';
import { graph } from '../utils/graph';
import { GraphNotificationClient } from './GraphNotificationClient';
import { ThreadEventEmitter } from './ThreadEventEmitter';
import {
MessageCollection,
addChatMembers,
deleteChatMessage,
loadChat,
loadChatImage,
loadChatThread,
loadMoreChatMessages,
MessageCollection,
removeChatMember,
sendChatMessage,
updateChatMessage,
removeChatMember,
addChatMembers,
loadChatImage,
updateChatTopic
} from './graph.chat';
import { getUserWithPhoto } from '@microsoft/mgt-components';
import { GraphNotificationClient } from './GraphNotificationClient';
import { ThreadEventEmitter } from './ThreadEventEmitter';
import { IDynamicPerson } from '@microsoft/mgt-react';
import { updateMessageContentWithImage } from './updateMessageContentWithImage';
import { graph } from '../utils/graph';
import { currentUserId, getCurrentUser, currentUserName } from '../utils/currentUser';
import { GraphError } from '@microsoft/microsoft-graph-client';

// 1x1 grey pixel
const placeholderImageContent =
Expand Down Expand Up @@ -937,6 +941,16 @@
content = this.processEmojiContent(content);
}

// check and process adaptive cards
const attachments = graphMessage?.attachments ?? [];
if (attachments.length) {
// TODO: we probably want to check the graphMessage.content value and remove
// TODO: the references to <attachment id="xxx"></attachment>. replace with what?
// TODO: maintain any other text in the graphMessage.content
// currently replacing graphMessage.content with the adaptiveCard HTML string
content = this.processAdaptiveCard(attachments);
}

const imageMatch = this.graphImageMatch(content ?? '');
if (imageMatch) {
// if the message contains an image, we need to fetch the image and replace the placeholder
Expand All @@ -947,6 +961,44 @@
return result;
}

private processAdaptiveCard(attachments: ChatMessageAttachment[]): string {
let content = '';
for (const attachment of attachments) {
const contentType = attachment?.contentType;
if (contentType === 'application/vnd.microsoft.card.adaptive') {
const adaptiveCardContentString: string = attachment?.content ?? '';
// TODO: this content is msteams specific content. Actions are NOT working
const adaptiveCardContent = JSON.parse(adaptiveCardContentString) ?? {};

Check failure on line 971 in packages/mgt-chat/src/statefulClient/StatefulGraphChatClient.ts

View workflow job for this annotation

GitHub Actions / build (16.x) 

Unsafe assignment of an `any` value
const adaptiveCard = new AdaptiveCards.AdaptiveCard();

// markdown support
AdaptiveCards.AdaptiveCard.onProcessMarkdown = (
text: string,
result: AdaptiveCards.IMarkdownProcessingResult
) => {
const md = new MarkdownIt();
result.outputHtml = md.render(text);
result.didProcess = true;
};

// Use Fluentui styles
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, react-hooks/rules-of-hooks
useFluentUI();

adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
fontFamily: 'Segoe UI, Helvetica Neue, sans-serif'
// More host config options
});

// Parse and render to html string
adaptiveCard.parse(adaptiveCardContent);
const renderedCard = adaptiveCard.render();
content += renderedCard?.outerHTML ?? '';
}
}
return content;
}

private buildAcsMessage(
graphMessage: ChatMessage,
currentUser: string,
Expand Down
56 changes: 56 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9677,6 +9677,11 @@
dependencies:
"@types/koa" "*"

"@types/linkify-it@*":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==

"@types/lodash.isequal@^4.5.5":
version "4.5.6"
resolved "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.6.tgz"
Expand All @@ -9699,13 +9704,26 @@
resolved "https://registry.npmjs.org/@types/lru-cache/-/lru-cache-5.1.1.tgz"
integrity sha512-ssE3Vlrys7sdIzs5LOxCzTVMsU7i9oa/IaW92wF32JFb3CVczqOkru2xspuKczHEbG3nvmPY7IFqVmGGHdNbYw==

"@types/[email protected]":
version "13.0.0"
resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-13.0.0.tgz#05e82614aa6d305a4d8efe24056d8879a9042970"
integrity sha512-mPTaUl5glYfzdJFeCsvhXQwZKdyszNAZcMm5ZTP5SfpTu+vIbog7J3z8Fa4x/Fzv5TB4R6OA/pHBYIYmkYOWGQ==
dependencies:
"@types/linkify-it" "*"
"@types/mdurl" "*"

"@types/mdast@^3.0.0":
version "3.0.11"
resolved "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.11.tgz"
integrity sha512-Y/uImid8aAwrEA24/1tcRZwpxX3pIFTSilcNDKSPn+Y2iDywSEachzRuvgAYYLR3wpGXAsMbv5lvKLDZLeYPAw==
dependencies:
"@types/unist" "*"

"@types/mdurl@*":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==

"@types/mime-types@^2.1.0":
version "2.1.1"
resolved "https://registry.npmjs.org/@types/mime-types/-/mime-types-2.1.1.tgz"
Expand Down Expand Up @@ -11675,11 +11693,21 @@ adaptive-expressions@^4.15.0:
uuid "^8.3.2"
xpath "^0.0.32"

[email protected]:
version "0.5.3"
resolved "https://registry.yarnpkg.com/adaptivecards-fluentui/-/adaptivecards-fluentui-0.5.3.tgz#26cefd3570bb29da5b2cc7697084aea1257bd182"
integrity sha512-cWqY0lQvGQ8pVZ7YFwSXvFkZnczO0qc4sLxg3UN84J0+nYVoQAUntT9AbFgrTUXR+WOO/pN18Vz/YAVvuGC5Zg==

adaptivecards-templating@^2.1.0:
version "2.3.1"
resolved "https://registry.npmjs.org/adaptivecards-templating/-/adaptivecards-templating-2.3.1.tgz"
integrity sha512-rYN1tCb+4NeWUCbo7xzGhwuOG3XllpGWCtgdl/drSJA32tljAvDrMeBO/eUk7uwXx8/1hSc5WJvzbAZQWMd35Q==

[email protected]:
version "3.0.1"
resolved "https://registry.yarnpkg.com/adaptivecards/-/adaptivecards-3.0.1.tgz#a7a75d666282476f8915c93917a48d98ec5e3718"
integrity sha512-n8GOU4p0bA/jokIHFeltE1zMUt+QAwmXu9w79bEUCHdFOHan7PV9ABjdcWKuJ2M4o6rNsz1Fgqpw1Lhdxu2rOw==

adaptivecards@~2.10.0:
version "2.10.0"
resolved "https://registry.npmjs.org/adaptivecards/-/adaptivecards-2.10.0.tgz"
Expand Down Expand Up @@ -17321,6 +17349,11 @@ entities@~2.1.0:
resolved "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz"
integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==

entities@~3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==

env-cmd@^10.1.0:
version "10.1.0"
resolved "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz"
Expand Down Expand Up @@ -25559,6 +25592,13 @@ linkify-it@^3.0.1:
dependencies:
uc.micro "^1.0.1"

linkify-it@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
dependencies:
uc.micro "^1.0.1"

lit-element@^2.2.1:
version "2.5.1"
resolved "https://registry.npmjs.org/lit-element/-/lit-element-2.5.1.tgz"
Expand Down Expand Up @@ -26242,6 +26282,17 @@ markdown-escapes@^1.0.0:
resolved "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz"
integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==

[email protected]:
version "13.0.1"
resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"
integrity sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==
dependencies:
argparse "^2.0.1"
entities "~3.0.1"
linkify-it "^4.0.1"
mdurl "^1.0.1"
uc.micro "^1.0.5"

markdown-it@^12.2.0:
version "12.3.2"
resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-12.3.2.tgz"
Expand Down Expand Up @@ -34610,6 +34661,11 @@ svgo@^2.7.0:
picocolors "^1.0.0"
stable "^0.1.8"

[email protected]:
version "10.2.0"
resolved "https://registry.yarnpkg.com/swiper/-/swiper-10.2.0.tgz#e7369ff56f4e10069f2244a4436f732b8925deb0"
integrity sha512-nktQsOtBInJjr3f5DicxC8eHYGcLXDVIGPSon0QoXRaO6NjKnATCbQ8SZsD3dN1Ph1RH4EhVPwSYCcuDRFWHGQ==

[email protected]:
version "4.0.0"
resolved "https://registry.npmjs.org/symbol-observable/-/symbol-observable-4.0.0.tgz"
Expand Down
Loading