Fixed ngrok host-header command flag and update doc

Author: Russ Williams

ACSAgentHub/local.settings.json

@@ -3,11 +3,11 @@
   "Values": {
     "AzureWebJobsStorage": "UseDevelopmentStorage=true",
     "FUNCTIONS_WORKER_RUNTIME": "dotnet",
-    "agentHubStorageConnectionString": "DefaultEndpointsProtocol=https;EndpointSuffix=core.windows.net;AccountName=acsagenthubrhw;AccountKey=1CEyV1LH0o2xyXh2OiFW1/ofFEMiHWYv2sTJPnPXnJjZn80cF15wYsvUGt29LyFSyvlONf7hG/VY+AStiIaUVQ==",
-    "acsConnectionString": "endpoint=https://acsagenthubrhwacs.communication.azure.com/;accesskey=/6LN9tienVGXi65p3gcYyGrQf+YHX8dzg+mMn9e5aUfupI77qExVX1TZrVJQVTuS0Fhk0IE/HbJmyy1xQ5AEJg==",
+    "agentHubStorageConnectionString": "DefaultEndpointsProtocol=https;EndpointSuffix=core.windows.net;AccountName=acsagenthubrhw;AccountKey=zPARow+zF74cCGlsfiQE9rMDSE4I7iTteDqNyuPbmk8p2g57LbYITrH6P9OoP3enPm2R5OgU6Y0Q+AStKFFQ4A==",
+    "acsConnectionString": "endpoint=https://acsagenthubrhwacs.communication.azure.com/;accesskey=GK23bSvJMBQUqXpwUit84nLlyhCQg3unqP0PiNCw23VXCe/khyjD112xPfwO92rHzLdcgsZWQWYxNt11eMXfyw==",
     "botBaseAddress": "http://localhost:3980/",
     "useACSManagedIdentity": "false",
-    "webPusSubConnectionString": "Endpoint=https://acsagenthubrhwwps.webpubsub.azure.com;AccessKey=IIKkVIPszyVZtSEmvAzLTSObrd8wNVub/KIZoCHImXY=;Version=1.0;",
+    "webPusSubConnectionString": "Endpoint=https://acsagenthubrhwwps.webpubsub.azure.com;AccessKey=1uzqaDhRx4xCesM8Qg9E5hZU44Y0OfybHaq6Hj0m0qA=;Version=1.0;",
     "webPubSubHubName": "refreshConversations"
   },
   "Host": {

ACSConnector/README.md

@@ -26,7 +26,7 @@ In PowerShell, change the current directory to the root solution folder (i.e., t
 that contains the ACSAgentHub.sln file). Then run the following script to deploy and
 configure all the services required by the ACS Agent Hub:
 ```
-.\Deployment\Scripts\deploy_and_configure.ps1 -hubName <hub name> -resourceGroup <resource group> $ngrokFullPath <ngrok path> -location <location name> -NuGetFullPath <nuget path>
+.\Deployment\Scripts\deploy_and_configure.ps1 -hubName <hub name> -resourceGroup <resource group> -ngrokFullPath <ngrok path> -location <location name> -NuGetFullPath <nuget path>
 ```
 where:
 - **\<hub name>** is the name of your agent hub which will also be used as part of the name of

Deployment/Scripts/deploy_and_configure.ps1

@@ -121,7 +121,8 @@ if ($configurationOnly.ToLower() -eq "false") {
 
 # Step 5 - Create Tunnel to Agent Hub
 Write-Host "Creating Tunnel to Agent Hub"  -NoNewline -ForegroundColor Green
-start -FilePath $ngrokFullPath -ArgumentList "http 7071 -host-header=localhost:7071" -WindowStyle Minimized 
+if ($showCommands.ToLower() -eq "true") { Write-Host ''; Write-Host "start -FilePath $ngrokFullPath -ArgumentList ""http 7071 --host-header=localhost:7071"" -WindowStyle Minimized" }
+start -FilePath $ngrokFullPath -ArgumentList "http 7071 --host-header=localhost:7071" -WindowStyle Minimized 
 
 if ($?) {Write-Host " - Done." -ForegroundColor Green} else {Write-Host " - Failed" -ForegroundColor Green; $errCnt++} 
 
@@ -131,6 +132,7 @@ Start-Sleep -s 15 2>> "$logFile" | Out-Null
 # Step 6 - Subscribe to ACS Message Event
 # No need for Write-Host progress update since update_webhook.ps1 reports its own status
 # Frist, query ngrok and turn JSON result into object that we can use to get https endpoint
+if ($showCommands.ToLower() -eq "true") { Write-Host ''; Write-Host "$ngrokResult = curl http://127.0.0.1:4040/api/tunnels 2>> ""$logFile""" }
 $ngrokResult = curl http://127.0.0.1:4040/api/tunnels 2>> "$logFile"
 $ngrok = ConvertFrom-Json $ngrokResult 
 

README.md

@@ -11,7 +11,11 @@ Services, you can have an agent escalation capability up and working in 15 minut
 The deployment scripts require Powershell 7 which can be downloaded [here](https://docs.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows?view=powershell-7.2)
 
 #### Ngrok
-To install ngrok, follow instructions [here](https://ngrok.com/download)
+To install ngrok v3, follow instructions [here](https://ngrok.com/download) or to upgrade your existing ngrok version, follow
+the instructions [here](https://ngrok.com/docs/guides/upgrade-v2-v3).  The previous version of the deployment scripts used 
+single dashes for ngrok command line flags which now fail in ngrok v3 per the "Breaking Changes" section on the ngrok site 
+[here](https://ngrok.com/docs/guides/upgrade-v2-v3) so those deployment scripts have been updated to use double dash flags
+which may or may not work with older versions of ngrok (e.g., c:\ngrok\ngrok http 7071 --host-header=localhost:7071)
 
 #### Azure CLI
 The deployment scripts require Azure CLI version 2.22.0 or newer.  You can check which version of the Azure CLI you have

agent-portal/src/components/ChatPanel.tsx

@@ -3,12 +3,13 @@ import './ChatPanel.css';
 import React, { FC } from 'react';
 import { useEffect, useState, useContext } from 'react';
 import { ChatAdapter, ChatComposite, createAzureCommunicationChatAdapter } from '@azure/communication-react';
+import { AzureCommunicationTokenCredential } from '@azure/communication-common';
 
-import { Conversation, ConversationStatus, Agent } from './Models'
+import { Conversation, ConversationStatus, Agent } from './Models';
 import { addAgentToThread } from '../services/agents';
 
 import { getAgentAccessContext } from '../services/accessContext';
-import { ApplicationContext, ApplicationContextConsumer } from './ApplicationContext'
+import { ApplicationContext, ApplicationContextConsumer } from './ApplicationContext';
 
 const ChatPanel: FC = () => {
     // Creating an adapter is asynchronous.
@@ -32,8 +33,14 @@ const ChatPanel: FC = () => {
         if (showChat(applicationContext!.currentConversation!) == true) {
             addAgentToThread(applicationContext!.currentConversation!.threadId!, applicationContext!.agent!.name).then(() => {
                 getAgentAccessContext().then(agentAccessContext => {
-                    createAzureCommunicationChatAdapter(agentAccessContext.token, agentAccessContext.endPoint, applicationContext!.currentConversation!.threadId, applicationContext!.agent!.name).then(adapter => { 
-                    setAdapter(adapter);
+                    createAzureCommunicationChatAdapter({
+                        endpoint: agentAccessContext.endPoint,
+                        displayName: applicationContext!.agent!.name,
+                        threadId: applicationContext!.currentConversation!.threadId,
+                        userId: { communicationUserId: applicationContext!.currentConversation!.agentId },
+                        credential: new AzureCommunicationTokenCredential(agentAccessContext.token)
+                    }).then(adapter => { 
+                        setAdapter(adapter);
                     });
                 });
             });

agent-portal/src/settings/appsettings.ts

@@ -1,6 +1,6 @@
 // App settings for the agent-portal
 export const appsettings = {
     agentHubBaseAddress: 'http://localhost:7071',
-    webPusSubConnectionString: 'Endpoint=https://acsagenthubrhwwps.webpubsub.azure.com;AccessKey=IIKkVIPszyVZtSEmvAzLTSObrd8wNVub/KIZoCHImXY=;Version=1.0;',
+    webPusSubConnectionString: 'Endpoint=https://acsagenthubrhwwps.webpubsub.azure.com;AccessKey=1uzqaDhRx4xCesM8Qg9E5hZU44Y0OfybHaq6Hj0m0qA=;Version=1.0;',
     webPubSubHubName: 'refreshConversations'
 };