Skip to content
This repository was archived by the owner on Jun 30, 2022. It is now read-only.

Commit d575461

Browse files
ryanisgrigdarrenj
ryanisgrig
authored and
darrenj
committed
[Web Test Harness] Pass the authenticated user ID into web chat & update UI (#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.
1 parent ac27a62 commit d575461

File tree

6 files changed

+209
-48
lines changed

6 files changed

+209
-48
lines changed

‎solutions/Virtual-Assistant/src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/Views/Home/Index.cshtml‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@
22
ViewData["Title"] = "Web Test";
33
}
44

5-
<div class="panel-title">
6-
<p>
7-
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.
8-
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.
9-
<br />
10-
<br/><b>References</b>
11-
<br/><a href="https://github.com/microsoft/botframework-webchat">Web Chat</a>
12-
<br/><a href="https://github.com/Microsoft/AI/blob/master/solutions/Virtual-Assistant/docs/virtualassistant-linkedaccounts.md">Linked Accounts</a>
13-
</p>
5+
<div class="content-row">
6+
<div class="content-title">Testing your Virtual Assistant</div>
7+
<div class="main-text main-text-p1">
8+
<p>
9+
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.
10+
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>.
11+
</p>
12+
<p>
13+
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.
14+
</p>
15+
<p>
16+
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.
17+
</p>
18+
</div>
19+
<div class="ms-logo-container">
1420
</div>
21+

‎solutions/Virtual-Assistant/src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/Views/Home/LinkedAccounts.cshtml‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,19 @@
2121
console.log(request.responseText);
2222
}, error => {
2323
console.log('failed to get sessionId', error);
24-
});
24+
});
25+
26+
function copyUserId() {
27+
var copyText = document.getElementById("UserId");
28+
29+
// Select the text field UserId
30+
copyText.select();
31+
32+
// Copy the text inside the text field
33+
document.execCommand("copy");
34+
35+
console.log('Copied user id: ' + copyText.value);
36+
}
2537
</script>
2638

2739

@@ -31,18 +43,25 @@
3143
}
3244
else
3345
{
34-
<div>
35-
<div class="linkedAccount-title">Linked Accounts</div>
46+
<div class="content-row">
47+
<div class="content-title">Linked Accounts</div>
48+
<div class="main-text main-text-p1">
49+
The authentication providers listed below are the same providers you have enabled on your bot.
3650

51+
You may need to use a different user id in the Web Chat than what is displayed here.
52+
You can update the values and select "Update User ID" to update what is stored in session.
53+
</div>
3754
<div class="linkedAccount-displayName">
3855
User ID:
3956
@using (Html.BeginForm("ChangeUserId", "Home", FormMethod.Post))
4057
{
58+
4159
@Html.TextBoxFor(model => model.UserId, new { style = "width:300px;" })
42-
<button type="submit">Change</button>
60+
<button type="submit">Update User ID</button>
61+
<button onclick="copyUserId()">Copy User ID</button>
62+
@Html.ActionLink("Sign Out All", "SignOutAll", "Home", null, new { @class = "button" })
4363
}
4464
</div>
45-
4665
<div class="linkedAccount-list">
4766
<div class="linkedAccount-header">
4867
<div class="linkedAccount-header-label linkedAccount-header-connectionName">Connection Name</div>
@@ -60,7 +79,7 @@ else
6079
<div class="linkedAccount-label linkedAccount-status">
6180
<div class="icon">
6281
<svg viewBox="0 0 34 34">
63-
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="gray"></circle>
82+
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#737373"></circle>
6483
Sorry, your browser does not support inline SVG.
6584
</svg>
6685
</div>
@@ -76,7 +95,7 @@ else
7695
<div class="linkedAccount-label linkedAccount-status">
7796
<div class="icon">
7897
<svg viewBox="0 0 34 34">
79-
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#22ee22" />
98+
<circle cx="16" cy="16" r="15" stroke="black" stroke-width="2" fill="#9bf00b" />
8099
Sorry, your browser does not support inline SVG.
81100
</svg>
82101
</div>
@@ -89,9 +108,5 @@ else
89108
</div>
90109
}
91110
</div>
92-
93-
<div class="linkedAccount-actions">
94-
@Html.ActionLink("Sign Out All", "SignOutAll", "Home", null, new { @class = "button" })
95-
</div>
96111
</div>
97-
}
112+
}

‎solutions/Virtual-Assistant/src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/Views/Home/WebChat.cshtml‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
@{
33
ViewData["Title"] = "Web Chat";
44
}
5-
<div id="webchat"></div>
5+
<div class="content-row">
6+
<div id="webchat" role="main"></div>
7+
</div>
68
<script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>
79
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
810
<script>
@@ -21,31 +23,19 @@
2123
})
2224
};
2325
24-
var user = { id: userId, name: 'default-user', role: 'user' };
26+
var user = { id: userId, role: 'user'};
2527
2628
var bot = window.WebChat.createDirectLine({
2729
token: '@Model.DirectLineToken',
28-
user: user,
30+
userID: userId,
2931
speechOptions: speechOptions,
3032
resize: 'detect'
3133
});
3234
3335
window.WebChat.renderWebChat({
3436
directLine: bot,
37+
userID: userId,
3538
botAvatarInitials: 'VA',
3639
userAvatarInitials: userInitials
3740
}, document.getElementById('webchat'));
38-
39-
// Messages sent in web chat are labeled default-user, so the startup event
40-
// will send it from the same id to prevent multiple occurences of ConversationUpdate activities.
41-
var defaultUser = { id: 'default-user', name: 'default-user', role: 'user' };
42-
bot.postActivity({
43-
from: defaultUser,
44-
name: 'startConversation',
45-
type: 'event',
46-
value: ''
47-
})
48-
.subscribe(function (id) {
49-
console.log('Event "startConversation" sent');
50-
});
5141
</script>

‎solutions/Virtual-Assistant/src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/Views/Shared/_Layout.cshtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<span class="icon-bar"></span>
2727
<span class="icon-bar"></span>
2828
</button>
29-
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Virtual Assistant Web Test</a>
29+
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Testing your Virtual Assistant</a>
3030
</div>
3131
<div class="navbar-collapse collapse">
3232
<ul class="nav navbar-nav">

‎solutions/Virtual-Assistant/src/csharp/testharnesses/assistant-WebTest/Assistant-WebTest/wwwroot/css/site.css‎

Lines changed: 158 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ for details on configuring this project to bundle and minify static web assets.
33
body {
44
padding-top: 50px;
55
padding-bottom: 20px;
6+
font-family: Segoe UI;
67
}
78

89
/* Wrapping element */
@@ -60,7 +61,7 @@ html, body,.body-content {
6061
margin-top: 1px;
6162
margin-bottom: 1px;
6263
align-items: center;
63-
background: #666666;
64+
background: #737373;
6465
height: 46px;
6566
color: white;
6667
font-weight: bold;
@@ -123,14 +124,22 @@ html, body,.body-content {
123124
margin-top: 20px;
124125
}
125126

127+
button {
128+
background-color: #0078d7;
129+
color: #fff;
130+
font-weight: 500;
131+
border: none;
132+
border-radius: 2px;
133+
padding: .75rem 1rem;
134+
}
135+
126136
.button {
127-
padding: 6px;
128-
width: 100px;
129-
background-color: #4d5e92;
130-
cursor: pointer;
131-
display: flex;
132-
color: white;
133-
justify-content: center;
137+
background-color: #0078d7;
138+
color: #fff;
139+
font-weight: 500;
140+
border: none;
141+
border-radius: 2px;
142+
padding: .75rem 1rem;
134143
}
135144

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

140149
.button:active {
141150
background-color: #3c5296;
142-
}
151+
}
152+
153+
.navbar-brand,
154+
.navbar-text,
155+
.navbar-inverse .navbar-nav > li > a {
156+
color: #FFFFFF !important;
157+
font-size: 15px;
158+
}
159+
160+
.main-content-area {
161+
padding-left: 30px;
162+
}
163+
164+
.content-title {
165+
color: #000000;
166+
font-family: "Segoe UI";
167+
font-size: 46px;
168+
font-weight: 300;
169+
line-height: 62px;
170+
}
171+
172+
.main-text {
173+
color: #808080;
174+
font-size: 24px;
175+
font-family: "Segoe UI";
176+
font-size: 24px;
177+
font-weight: 200;
178+
line-height: 32px;
179+
}
180+
181+
.main-text-p1 {
182+
padding-top: 48px;
183+
padding-bottom: 28px;
184+
}
185+
186+
.main-text-bold {
187+
font-weight: 400;
188+
}
189+
190+
.main-text-black {
191+
color: #000000;
192+
}
193+
194+
.content-row {
195+
padding: 20px 0px 0 20px;
196+
height: 100%;
197+
min-width: 480px;
198+
max-width: 1366px;
199+
margin-left: auto;
200+
margin-right: auto;
201+
}
202+
203+
.content-column {
204+
float: left;
205+
width: 45%;
206+
padding-right: 20px;
207+
}
208+
209+
.content-row:after {
210+
content: "";
211+
display: table;
212+
clear: both;
213+
}
214+
215+
a {
216+
text-decoration: none;
217+
}
218+
219+
@media only screen and (max-width: 1300px) {
220+
221+
.header-text {
222+
font-size: 40px;
223+
}
224+
225+
.content-column {
226+
float: none;
227+
padding-top: 30px;
228+
width: 100%;
229+
}
230+
231+
.content-row {
232+
padding: 20px 0px 0 20px;
233+
min-width: 480px;
234+
max-width: 650px;
235+
margin-left: auto;
236+
margin-right: auto;
237+
}
238+
}
239+
240+
@media only screen and (max-width: 1370px) {
241+
header {
242+
background-color: #55A0E0;
243+
background-size: auto 200px;
244+
}
245+
}
246+
247+
@media only screen and (max-width: 1230px) {
248+
header {
249+
background-color: #55A0E0;
250+
background-size: auto 200px;
251+
}
252+
253+
.header-text {
254+
font-size: 44px;
255+
}
256+
257+
.header-icon {
258+
height: 120px;
259+
width: 120px;
260+
}
261+
}
262+
263+
@media only screen and (max-width: 1000px) {
264+
header {
265+
background-color: #55A0E0;
266+
background-image: none;
267+
}
268+
}
269+
270+
@media only screen and (max-width: 632px) {
271+
.header-text {
272+
font-size: 32px;
273+
}
274+
275+
.content-row {
276+
padding: 10px 0px 0 10px;
277+
max-width: 490px !important;
278+
min-width: 410px !important;
279+
}
280+
281+
282+
.main-text {
283+
font-size: 20px;
284+
}
285+
286+
.content-column {
287+
padding-right: 5px;
288+
}
289+
}
290+
291+

0 commit comments

Comments
 (0)