v1.0.15

ethanwinters · ethanwinters · commit 8746d5947d85 · 2020-02-25T14:03:01.000Z
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
-Welcome to [Watson Assistant](https://www.ibm.com/cloud/watson-assistant/) Web Chat. With just a few lines of code, you can add a Web Chat widget to your website and take advantage of all the best and newest that Watson Assistant has to offer.
+# Web Chat
 
-This repository is meant for developers who have deployed Web Chat from Watson Assistant and are looking to embed, configure, customize and extend their Web Chat instance. Web Chat is only available to Plus or Premium Watson Assistant plans.
+Welcome to [Watson Assistant](https://www.ibm.com/cloud/watson-assistant/) Web Chat. With just a few lines of code, you can add a Web Chat widget to your website and take advantage of all the best and newest that Watson Assistant has to offer.
 
-For documentation and coding examples, please visit https://watson-developer-cloud.github.io/assistant-web-chat/.
+This repository holds support assets for our documentation and coding example web site.
 
+## For documentation and coding examples, please visit https://integrations.us-south.assistant.watson.cloud.ibm.com/web/developer-documentation.
diff --git a/docs/404.html b/docs/404.html
@@ -1,28 +1,34 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>IBM Watson Assistant Web Chat</title>
+  <title>IBM Watson Assistant Web Chat Documentation</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="carbon-components.min.css">
   <link rel="stylesheet" href="style.css">
 </head>
 <body class="dark">
   <div class="container">
-    <header aria-label="IBM Platform Name" class="bx--header" role="banner"><a class="bx--header__name" href="index.html"><span
+    <header aria-label="IBM Platform Name" class="bx--header" role="banner"><a class="bx--header__name" href="https://integrations.us-south.assistant.watson.cloud.ibm.com/web/developer-documentation"><span
     class="bx--header__name--prefix">IBM</span>&nbsp;Watson Assistant Web Chat</a></header>
     <div class="hero">
       <div class="hero-image-background"></div>
       <div class="hero-background"></div>
       <div class="homepage--dots"></div>
       <div class="hero--content">
         <h2>Watson Assistant Web Chat</h2>
-        <h3>404: The page you are looking for is missing.</h3>
+        <h3>The page you are looking for does not exist, click the button below or you will be re-directed in 5 seconds.</h3>
         <div class="hero--content--buttons">
-          <a href="documentation.html" class="bx--btn bx--btn--primary">Documentation</a> <a href="examples.html"
-          class="bx--btn bx--btn--primary">Examples</a>
+          <a href="https://integrations.us-south.assistant.watson.cloud.ibm.com/web/developer-documentation"
+          class="bx--btn bx--btn--primary">Web Chat developer documentation.</a>
         </div>
       </div>
     </div>
   </div>
+  <script>
+    const redirectDomain = "https://integrations.us-south.assistant.watson.cloud.ibm.com/web/developer-documentation"
+    setTimeout(function() {
+      window.location.replace(redirectDomain);
+    }, 5000);
+  </script>
 </body>
 </html>
diff --git a/docs/README.md b/docs/README.md
diff --git a/docs/index.html b/docs/index.html
@@ -1,28 +1,34 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>IBM Watson Assistant Web Chat</title>
+  <title>IBM Watson Assistant Web Chat Documentation</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="carbon-components.min.css">
   <link rel="stylesheet" href="style.css">
 </head>
 <body class="dark">
   <div class="container">
-    <header aria-label="IBM Platform Name" class="bx--header" role="banner"><a class="bx--header__name" href="index.html"><span
+    <header aria-label="IBM Platform Name" class="bx--header" role="banner"><a class="bx--header__name" href="https://integrations.us-south.assistant.watson.cloud.ibm.com/web/developer-documentation"><span
     class="bx--header__name--prefix">IBM</span>&nbsp;Watson Assistant Web Chat</a></header>
     <div class="hero">
       <div class="hero-image-background"></div>
       <div class="hero-background"></div>
       <div class="homepage--dots"></div>
       <div class="hero--content">
         <h2>Watson Assistant Web Chat</h2>
-        <h3>Get the latest features and benefits from Watson Assistant easily and immediately.</h3>
+        <h3>This page has moved, click the button below or you will be re-directed in 5 seconds.</h3>
         <div class="hero--content--buttons">
-          <a href="documentation.html" class="bx--btn bx--btn--primary">Documentation</a> <a href="examples.html"
-          class="bx--btn bx--btn--primary">Examples</a>
+          <a href="https://integrations.us-south.assistant.watson.cloud.ibm.com/web/developer-documentation"
+          class="bx--btn bx--btn--primary">Web Chat developer documentation.</a>
         </div>
       </div>
     </div>
   </div>
+  <script>
+    const redirectDomain = "https://integrations.us-south.assistant.watson.cloud.ibm.com/web/developer-documentation"
+    setTimeout(function() {
+      window.location.replace(redirectDomain);
+    }, 5000);
+  </script>
 </body>
-</html>
+</html>
diff --git a/languages/en.json b/languages/en.json
@@ -5,6 +5,7 @@
   "errors_singleMessage": "There is an error with the message you just sent, but feel free to ask me something else.",
   "errors_ariaMessageRetrying": "We are having some trouble sending your message but are still trying",
   "errors_ariaMessageFailed": "Your message failed to be sent",
+  "errors_noAgentsAvailable": "No agents are available.",
   "input_placeholder": "Type something...",
   "input_buttonLabel": "Click to send message",
   "window_title": "Chat window",
@@ -75,6 +76,9 @@
   "process_confirmModalYes": "Yes",
   "process_confirmModalNo": "No",
   "process_confirmNewThread": "Are you sure you want to start a new thread?",
+  "process_ariaThreadClosedRunning": "Switched from the thread view to the main chat view. Click resume to reopen the thread or click cancel to cancel it.",
+  "process_ariaThreadClosedEnded": "Switched from the thread view to the main chat view. Click the thread review button to view the thread.",
+  "process_ariaThreadOpened": "Switched to the thread view. Click the close thread button to return to the main view.",
   "icon_ariaUnreadMessages": "There {count, plural, one {is} other {are}} {count, number} unread {count, plural, one {message} other {messages}}",
   "showMore": "Show more",
   "showLess": "Show less",
diff --git a/tutorials/user_defined_templates/carousel.css b/tutorials/user_defined_templates/carousel.css
@@ -1,30 +1,28 @@
 .carousel_container {
-  display: block;
+ 	display: block;
 	width: 100px;
 	position: relative;
 	margin: 1em;
 	overflow: hidden;
 }
 
-.carousel_container .carousel_container_content {
+.carousel_container ol.carousel_container_content {
 	margin: 0 0 1rem 0;
 	padding: 0;
 }
 
-.carousel_container .carousel_container_content li {
+.carousel_container ol.carousel_container_content li {
 	margin: 0;
 	padding: 0;
 	width: 100%;
 	list-style: none;
 }
 
-.carousel_container.carousel_container_active li {
-	padding: 24px 32px;
-	background: #fff;
+.carousel_container.carousel_container_active ol li {
 	display: none;
 }
 
-.carousel_container.carousel_container_active li.carousel_container_current {
+.carousel_container.carousel_container_active ol li.carousel_container_current {
 	display: block;
 }
 
@@ -39,15 +37,15 @@
 
 .carousel_container.carousel_container_active .carousel_container_buttons .carousel_container_next {
 	position: absolute;
-	right: -1rem;
+	right: -1.6rem;
 	top: 6rem;
 	z-index: 10;
 	display: none;
 }
 
 .carousel_container.carousel_container_active .carousel_container_buttons .carousel_container_prev {
 	position: absolute;
-	left: -1rem;
+	left: -1.6rem;
 	top: 6rem;
 	z-index: 10;
 	display: none;
@@ -95,23 +93,13 @@
 	outline-offset: 2px;
 }
 
-.carousel_container.carousel_container_active .carousel_container_buttons .carousel_container_next.carousel_container_visible .carousel_container_label,
-.carousel_container.carousel_container_active .carousel_container_buttons .carousel_container_prev.carousel_container_visible .carousel_container_label {
-	background: #000;
-	cursor: pointer;
-	padding: 4px 8px;
-	font-size: 0.6rem;
-	font-weight: bold;
-	text-transform: uppercase;
-}
-
-.carousel_container.carousel_container_active li img.carousel_slide_image {
+.carousel_container.carousel_container_active ol li img.carousel_slide_image {
 	display: block;
 	width: 100%;
 	margin-bottom: 16px;
 }
 
-.carousel_container.carousel_container_active li .carousel_slide_title {
+.carousel_container.carousel_container_active ol li .carousel_slide_title {
 	font-weight: bold;
 	margin-bottom: 4px;
 }
diff --git a/tutorials/user_defined_templates/carousel.js b/tutorials/user_defined_templates/carousel.js
@@ -1,3 +1,4 @@
+/* eslint-disable header/header */
 function MySimpleCarousel(event) {
   this.event = event;
   // Because we render Web Chat to Shadow DOM, we should use `style` tags rather than `link` tags to bring in our CSS.
@@ -95,18 +96,18 @@ MySimpleCarousel.prototype.writeHTML = function() {
   const element = document.createElement('div');
   element.classList.add('carousel_container');
   element.innerHTML =
-    '<div class="carousel_container_buttons"><button class="carousel_container_prev"><div class="carousel_container_icon"><img src="user_defined_templates/left.svg" /></div><div class="carousel_container_label">Back</div></button><button class="carousel_container_next"><div class="carousel_container_icon"><img src="user_defined_templates/right.svg" /></div><div class="carousel_container_label">Next</div></button></div><ol class="carousel_container_content"></ol>';
+    '<div class="carousel_container_buttons"><button class="carousel_container_prev"><div class="carousel_container_icon"><img src="user_defined_templates/left.svg" alt="previous" /></div></button><button class="carousel_container_next"><div class="carousel_container_icon"><img src="user_defined_templates/right.svg" alt="next" /></div></button></div><ol class="carousel_container_content"></ol>';
   const content = element.querySelector('.carousel_container_content');
   const message = this.event.data.message;
   message.user_defined.slides.forEach(function(slide) {
     content.innerHTML +=
-      '<li><img class="carousel_slide_image" src="' +
+      '<li><div class="ibm-web-chat-card"><img class="carousel_slide_image" src="' +
       slide.image +
       '"/><div class="carousel_slide_title">' +
       slide.title +
       '</div><div class="carousel_slide_description">' +
       slide.description +
-      '</div></li>';
+      '</div></div></li>';
   });
   this.event.data.element.appendChild(element);
 };
diff --git a/tutorials/user_defined_templates/color-box.js b/tutorials/user_defined_templates/color-box.js
@@ -159,11 +159,24 @@ function handleColorBoxTemplate(event) {
     'Yellow',
     'YellowGreen'
   ];
+  const parent = document.createElement('div');
+
+  // Create a element with the 'ibm-web-chat-card' class we will add our content to.
+  // This class will make the element look like one of the cards used in Web Chat.
+  const card = document.createElement('div');
+  card.classList.add('ibm-web-chat-card');
+
   const element = document.createElement('div');
   element.setAttribute('style', 'width:100%; height:100%; background-color: red; padding: 24px; text-align: center;');
   element.innerHTML = '<button>Make random background color!</button>';
   element.querySelector('button').addEventListener('click', function addBackgroundColor(e) {
     element.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
   });
-  event.data.element.appendChild(element);
+
+  // Add our color picker inside the card.
+  card.innerHTML = '<p style="margin-top:0;"><strong>My Color Changing Card</strong></p>';
+  card.appendChild(element);
+
+  parent.appendChild(card);
+  event.data.element.appendChild(parent);
 }
