Skip to content

Commit

Permalink
Add sample
Browse files Browse the repository at this point in the history
  • Loading branch information
compulim committed Dec 24, 2018
1 parent 5c19543 commit 9d3f135
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 3 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,8 @@ npm run prepublishOnly
| [`06.c.cognitive-services-speech-services-js`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/06.c.cognitive-services-speech-services-js) | Introduces speech-to-text and text-to-speech ability using Cognitive Services Speech Services API. | [Demo](https://microsoft.github.io/BotFramework-WebChat/6.c.cognitive-services-speech-services-js) |
| [`06.d.speech-web-browser`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/06.d.speech-web-browser) | Demonstrates how to implement text-to-speech using Web Chat's browser-based Web Speech API. (link to W3C standard in the sample) | [Demo](https://microsoft.github.io/BotFramework-WebChat/06.d.speech-web-browser) |
| [`06.e.cognitive-services-speech-services-with-lexical-result`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/06.e.cognitive-services-speech-services-with-lexical-result) | Demonstrates how to use lexical result from Cognitive Services Speech Services API. | [Demo](https://microsoft.github.io/BotFramework-WebChat/06.e.cognitive-services-speech-services-with-lexical-result) |
| [`07.customization-timestamp-grouping`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/07.customization-timestamp-grouping) | Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time. | [Demo](https://microsoft.github.io/BotFramework-WebChat/07.customization-timestamp-grouping) |
| [`07.a.customization-timestamp-grouping`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/07.customization-timestamp-grouping) | Demonstrates how to customize timestamps by showing or hiding timestamps and changing the grouping of messages by time. | [Demo](https://microsoft.github.io/BotFramework-WebChat/07.a.customization-timestamp-grouping) |
| [`07.b.customization-send-typing`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/07.customization-send-typing) | Demonstrates how to send typing activity when the user start typing on the send box. | [Demo](https://microsoft.github.io/BotFramework-WebChat/07.b.customization-send-typing) |
| [`08.customization-user-highlighting`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/08.customization-user-highlighting) | Demonstrates how to customize the styling of activities based whether the message is from the user or the bot. | [Demo](https://microsoft.github.io/BotFramework-WebChat/08.customization-user-highlighting) |
| [`09.customization-reaction-buttons`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/09.customization-reaction-buttons/) | Introduces the ability to create custom components for Web Chat that are unique to your bot's needs. This tutorial demonstrates the ability to add reaction emoji such as :thumbsup: and :thumbsdown: to conversational activities. | [Demo](https://microsoft.github.io/BotFramework-WebChat/09.customization-reaction-buttons) |
| [`10.customization-card-components`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/10.customization-card-components) | Demonstrates how to create custom activity card attachments, in this case GitHub repository cards. | [Demo](https://microsoft.github.io/BotFramework-WebChat/10.customization-card-components) |
Expand Down
45 changes: 45 additions & 0 deletions samples/07.b.customization-send-typing/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Send typing</title>
<!--
For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
or lock down on a specific version with the following format: "/4.1.0/webchat.js".
-->
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }

#webchat,
#webchat > * {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function () {
// In this demo, we are using Direct Line token from MockBot.
// To talk to your bot, you should use the token exchanged using your Direct Line secret.
// You should never put the Direct Line secret in the browser or client app.
// https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication

const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const { token } = await res.json();

window.WebChat.renderWebChat({
directLine: window.WebChat.createDirectLine({ token }),

// Web Chat will send typing activity when "sendTyping" is set to true
sendTyping: true
}, document.getElementById('webchat'));

document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
7 changes: 7 additions & 0 deletions samples/07.customization-timestamp-grouping/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Redirect information

Due to renaming our sample files, the sample links on our NPM page are temporarily pointing to the wrong URL.

Please click the link below to be redirected. Sorry for the inconvenience.

## [07.a.customization-timestamp-grouping](./../07.a.customization-timestamp-grouping/)
4 changes: 2 additions & 2 deletions samples/7.customization-timestamp-grouping/README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Redirect information

Due to renaming our sample files, the sample links on our NPM page are temporarily pointing to the wrong URL.
Due to renaming our sample files, the sample links on our NPM page are temporarily pointing to the wrong URL.

Please click the link below to be redirected. Sorry for the inconvenience.

## [07.customization-timestamp-grouping](./../07.customization-timestamp-grouping/)
## [07.a.customization-timestamp-grouping](./../07.a.customization-timestamp-grouping/)

0 comments on commit 9d3f135

Please sign in to comment.