在 Teams 互通性聊天中使用 UI 程式庫啟用檔案共用
在 Teams 互通性聊天 ("Interop Chat") 中，我們可啟用 Azure 通訊服務終端使用者與 Teams 使用者之間的檔案共用。 請注意，Interop Chat 與 Azure 通訊服務聊天不同。 如果您想要在 Azure 通訊服務聊天中啟用檔案共用，請參閱在 Azure 通訊服務聊天中新增與 UI 程式庫的檔案共用。 目前，Azure 通訊服務終端使用者只能接收來自 Teams 使用者的檔案附件。 若要深入了解，請參閱 UI 程式庫使用案例。
重要
CallWithChat Composite 隨附檔案共用功能，不需要額外的設定。
下載程式碼
在 GitHub 上存取本教學課程的程式碼。
必要條件
- 具有有效訂用帳戶的 Azure 帳戶。 如需詳細資訊，請參閱免費建立帳戶。
- 其中一個支援平台上的 Visual Studio Code。
- Node.js、作用中 LTS 和維修 LTS 版本。 請使用
node --version命令來檢查您的版本。 - 作用中的 Azure 通訊服務資源和連接字串。 建立通訊服務資源。
- 使用 UI 程式庫版本 1.17.0 或最新版本。
- 建立 Teams 會議並準備好會議連結。
- 熟悉 ChatWithChat Composite 的運作方式。
背景
首先，我們需要了解 Teams Interop Chat 目前必須屬於 Teams 會議的一部分。 當 Teams 使用者建立線上會議時，便會建立與會議相關聯的聊天對話。 若要讓 Azure 通訊服務終端使用者能夠加入聊天並開始傳送/接收訊息，會議參與者 (Teams 使用者) 必須先准許他們加入通話。 否則，他們無法存取聊天。
一旦 Azure 通訊服務終端使用者獲准加入通話，他們就能夠開始與通話中的其他參與者聊天。 在本教學課程中，我們會查看內嵌影像在互通性聊天中的運作方式。
概觀
類似於我們將內嵌影像支援新增至 UI 連結庫的方式，我們需要建立 CallWithChat Composite。
讓我們遵循 Storybook 頁面的基本範例來建立 ChatWithChat Composite。
在範例程式碼中，其需要 CallWithChatExampleProps，會定義為下列程式碼片段：
export type CallWithChatExampleProps = {
// Props needed for the construction of the CallWithChatAdapter
userId: CommunicationUserIdentifier;
token: string;
displayName: string;
endpointUrl: string;
locator: TeamsMeetingLinkLocator | TeamsMeetingIdLocator | CallAndChatLocator;
// Props to customize the CallWithChatComposite experience
fluentTheme?: PartialTheme | Theme;
compositeOptions?: CallWithChatCompositeOptions;
callInvitationURL?: string;
};
若要能夠啟動 Composite 進行會議聊天，我們需要傳遞 TeamsMeetingLinkLocator 或 TeamsMeetingIdLocator，如下所示：
{ "meetingLink": "<TEAMS_MEETING_LINK>" }
Or
{ "meetingId": "<TEAMS_MEETING_ID>", "passcode": "<TEAMS_MEETING_PASSCODE>"}
這就是您所需要的，而且不需要其他設定，即可讓 Azure 通訊服務終端使用者接收來自 Teams 使用者的檔案附件！
權限
從 Teams 用戶端共用檔案時，Teams 使用者可以選擇將檔案權限設定為：
- 「任何人」
- 「組織中的人員」
- 「目前在此聊天中的人員」
- 「已有存取權的人員」
- 「您選擇的人員」
具體而言，UI 程式庫目前僅支援「任何人」和「您選擇的人員」(含電子郵件位址)，所有其他權限則不受支援。 如果 Teams 使用者傳送了具有不支援權限的檔案，則當使用者按一下聊天對話中的檔案附件時，可能會提示終端使用者登入頁面或拒絕存取權。
此外，Teams 使用者的租用戶管理員可能會對檔案共用施加限制，包括停用某些檔案權限或停用檔案共用選項。
執行程式碼
讓我們執行 npm run start，然後您應該就能透過 localhost:3000 存取我們的範例應用程式，如以下螢幕擷取畫面所示：
只要按一下位於底部的 [聊天] 按鈕，即可顯示聊天面板，而如果 Teams 使用者現在傳送一些檔案，您應會看到如以下螢幕擷取畫面的內容：
現在如果使用者按一下檔案附件卡片，隨即會開啟新的索引標籤，如下所示，使用者可以在新的索引標籤中下載檔案：
下一步
您可能也會想要：