Skip to content

Commit

Permalink
[Web Test Harness] Pass the authenticated user ID into web chat & upd…
Browse files Browse the repository at this point in the history 
…ate UI (microsoft#472)

* Updated UI for more consistent experience in customer demos, using the F5 stylesheet from Bot Builder samples.

* Cleaned up styling to only use applicable classes in web test.
Passing user id derived from authenticated user into web chat to demonstrate linked accounts functionality in web chat.
  • Loading branch information
@ryanisgrig @darrenj
ryanisgrig authored and darrenj committed Dec 19, 2018
1 parent ac27a62 commit d575461
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 48 deletions.
25 changes: 16 additions & 9 deletions ...tant/src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/Views/Home/Index.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,20 @@
ViewData["Title"] = "Web Test";
}

<div class="panel-title">
<p>
This is a sample web app to demonstrate both a Web Chat and the capability to link accounts to a Virtual Assistant using Linked Accounts.
In voice focused scenarios there is a need to ensure a companion experience (Website or Mobile App) can be used to link accounts as part of the onboarding process.
<br />
<br/><b>References</b>
<br/><a href="https://github.com/microsoft/botframework-webchat">Web Chat</a>
<br/><a href="https://github.com/Microsoft/AI/blob/master/solutions/Virtual-Assistant/docs/virtualassistant-linkedaccounts.md">Linked Accounts</a>
</p>
<div class="content-row">
<div class="content-title">Testing your Virtual Assistant</div>
<div class="main-text main-text-p1">
<p>
You can test your assistant using <a href="https://github.com/microsoft/botframework-webchat">Web Chat</a> over the <a href="https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-directline?view=azure-bot-service-4.0">Direct Line</a> channel.
You can also connect an authenticated identity using <a href="https://github.com/Microsoft/AI/blob/master/solutions/Virtual-Assistant/docs/virtualassistant-linkedaccounts.md">Linked Accounts</a>.
</p>
<p>
Voice focused scenarios have a need for a companion experience (a web or mobile app) that can be used to link accounts as part of an onboarding process.
</p>
<p>
You should be logged into this test harness with the same account you are linking to your virtual assistant. Your ID will be used as in the web chat to authenticate.
</p>
</div>
<div class="ms-logo-container">
</div>

39 changes: 27 additions & 12 deletions ...csharp/testharnesses/assistant-WebTest/Assistant-WebTest/Views/Home/LinkedAccounts.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,19 @@
console.log(request.responseText);
}, error => {
console.log('failed to get sessionId', error);
});
});
function copyUserId() {
var copyText = document.getElementById("UserId");
// Select the text field UserId
copyText.select();
// Copy the text inside the text field
document.execCommand("copy");
console.log('Copied user id: ' + copyText.value);
}
</script>


Expand All @@ -31,18 +43,25 @@
}
else
{
<div>
<div class="linkedAccount-title">Linked Accounts</div>
<div class="content-row">
<div class="content-title">Linked Accounts</div>
<div class="main-text main-text-p1">
The authentication providers listed below are the same providers you have enabled on your bot.

You may need to use a different user id in the Web Chat than what is displayed here.
You can update the values and select "Update User ID" to update what is stored in session.
</div>
<div class="linkedAccount-displayName">
User ID:
@using (Html.BeginForm("ChangeUserId", "Home", FormMethod.Post))
{

@Html.TextBoxFor(model => model.UserId, new { style = "width:300px;" })
<button type="submit">Change</button>
<button type="submit">Update User ID</button>
<button onclick="copyUserId()">Copy User ID</button>
@Html.ActionLink("Sign Out All", "SignOutAll", "Home", null, new { @class = "button" })
}
</div>

<div class="linkedAccount-list">
<div class="linkedAccount-header">
<div class="linkedAccount-header-label linkedAccount-header-connectionName">Connection Name</div>
Expand All @@ -60,7 +79,7 @@ else
<div class="linkedAccount-label linkedAccount-status">
<div class="icon">
<svg viewBox="0 0 34 34">
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="gray"></circle>
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#737373"></circle>
Sorry, your browser does not support inline SVG.
</svg>
</div>
Expand All @@ -76,7 +95,7 @@ else
<div class="linkedAccount-label linkedAccount-status">
<div class="icon">
<svg viewBox="0 0 34 34">
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#22ee22" />
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#9bf00b" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
Expand All @@ -89,9 +108,5 @@ else
</div>
}
</div>

<div class="linkedAccount-actions">
@Html.ActionLink("Sign Out All", "SignOutAll", "Home", null, new { @class = "button" })
</div>
</div>
}
}
22 changes: 6 additions & 16 deletions ...nt/src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/Views/Home/WebChat.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
@{
ViewData["Title"] = "Web Chat";
}
<div id="webchat"></div>
<div class="content-row">
<div id="webchat" role="main"></div>
</div>
<script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
Expand All @@ -21,31 +23,19 @@
})
};
var user = { id: userId, name: 'default-user', role: 'user' };
var user = { id: userId, role: 'user'};
var bot = window.WebChat.createDirectLine({
token: '@Model.DirectLineToken',
user: user,
userID: userId,
speechOptions: speechOptions,
resize: 'detect'
});
window.WebChat.renderWebChat({
directLine: bot,
userID: userId,
botAvatarInitials: 'VA',
userAvatarInitials: userInitials
}, document.getElementById('webchat'));
// Messages sent in web chat are labeled default-user, so the startup event
// will send it from the same id to prevent multiple occurences of ConversationUpdate activities.
var defaultUser = { id: 'default-user', name: 'default-user', role: 'user' };
bot.postActivity({
from: defaultUser,
name: 'startConversation',
type: 'event',
value: ''
})
.subscribe(function (id) {
console.log('Event "startConversation" sent');
});
</script>
2 changes: 1 addition & 1 deletion .../src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/Views/Shared/_Layout.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Virtual Assistant Web Test</a>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Testing your Virtual Assistant</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
Expand Down
167 changes: 158 additions & 9 deletions ...sistant/src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/wwwroot/css/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ for details on configuring this project to bundle and minify static web assets.
body {
padding-top: 50px;
padding-bottom: 20px;
font-family: Segoe UI;
}

/* Wrapping element */
Expand Down Expand Up @@ -60,7 +61,7 @@ html, body,.body-content {
margin-top: 1px;
margin-bottom: 1px;
align-items: center;
background: #666666;
background: #737373;
height: 46px;
color: white;
font-weight: bold;
Expand Down Expand Up @@ -123,14 +124,22 @@ html, body,.body-content {
margin-top: 20px;
}

button {
background-color: #0078d7;
color: #fff;
font-weight: 500;
border: none;
border-radius: 2px;
padding: .75rem 1rem;
}

.button {
padding: 6px;
width: 100px;
background-color: #4d5e92;
cursor: pointer;
display: flex;
color: white;
justify-content: center;
background-color: #0078d7;
color: #fff;
font-weight: 500;
border: none;
border-radius: 2px;
padding: .75rem 1rem;
}

.button:hover {
Expand All @@ -139,4 +148,144 @@ html, body,.body-content {

.button:active {
background-color: #3c5296;
}
}

.navbar-brand,
.navbar-text,
.navbar-inverse .navbar-nav > li > a {
color: #FFFFFF !important;
font-size: 15px;
}

.main-content-area {
padding-left: 30px;
}

.content-title {
color: #000000;
font-family: "Segoe UI";
font-size: 46px;
font-weight: 300;
line-height: 62px;
}

.main-text {
color: #808080;
font-size: 24px;
font-family: "Segoe UI";
font-size: 24px;
font-weight: 200;
line-height: 32px;
}

.main-text-p1 {
padding-top: 48px;
padding-bottom: 28px;
}

.main-text-bold {
font-weight: 400;
}

.main-text-black {
color: #000000;
}

.content-row {
padding: 20px 0px 0 20px;
height: 100%;
min-width: 480px;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
}

.content-column {
float: left;
width: 45%;
padding-right: 20px;
}

.content-row:after {
content: "";
display: table;
clear: both;
}

a {
text-decoration: none;
}

@media only screen and (max-width: 1300px) {

.header-text {
font-size: 40px;
}

.content-column {
float: none;
padding-top: 30px;
width: 100%;
}

.content-row {
padding: 20px 0px 0 20px;
min-width: 480px;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
}

@media only screen and (max-width: 1370px) {
header {
background-color: #55A0E0;
background-size: auto 200px;
}
}

@media only screen and (max-width: 1230px) {
header {
background-color: #55A0E0;
background-size: auto 200px;
}

.header-text {
font-size: 44px;
}

.header-icon {
height: 120px;
width: 120px;
}
}

@media only screen and (max-width: 1000px) {
header {
background-color: #55A0E0;
background-image: none;
}
}

@media only screen and (max-width: 632px) {
.header-text {
font-size: 32px;
}

.content-row {
padding: 10px 0px 0 10px;
max-width: 490px !important;
min-width: 410px !important;
}


.main-text {
font-size: 20px;
}

.content-column {
padding-right: 5px;
}
}


Loading

0 comments on commit d575461

Please sign in to comment.