docs(chat): Add screenshots

Author: pepinho24

controls/chat/functionality/actions.md

@@ -18,24 +18,29 @@ To display the **suggestedActions** propmt, you need to call  the `renderSuggest
 
 >caption **Figure 1**: A Chat with suggested actions.
 
-![chat with suggested actions](images/suggested-actions.png)
+![chat with suggested actions](images/chat-suggested-actions.png)
 
 ````ASPX
-<telerik:RadChat runat="server" ID="RadChat1">
+<telerik:RadChat runat="server" ID="RadChat1" Width="350px" Height="300px">
+    <ClientEvents OnLoad="renderSuggestedActions" />
 </telerik:RadChat>
  ````
 
 ````JavaScript
-function renderSuggestedActions() {
-    var chat = $find("<%= RadChat1.ClientID %>");
-                  
+function renderSuggestedActions(sender) {
+    var chat = sender;
+    var chatBot = { id: 1, name: "SchedulerBot", iconUrl: "avatar.png" };
+
+    chat.renderMessage({ text: "Hello!" }, chatBot);
+    chat.renderMessage({ text: "Please, select an option:" }, chatBot);
+    
     chat.renderSuggestedActions([{
         title: "Option 1",
         value: "Value 1"
     }, {
         title: "Option 2",
         value: "Value 2"
-    }]);
+    }], chatBot);
 }
 ````
 

controls/chat/functionality/cards.md

@@ -14,14 +14,21 @@ Rich cards are complex attachment messages that can contain additional message s
 
 >caption **Figure 1**: A Chat that uses the default HeroCard template.
 
-![chat with heroCard template](images/herocard-template.png)
+![chat with heroCard template](images/chat-heroCard.png)
 
 ````ASPX
 <telerik:RadChat runat="server" ID="RadChat1">
+    <ClientEvents OnLoad="OnLoad"/>
+    <MessagesSettings Placeholder="Type your message here..." />
+    <UserSettings Name="John" IconUrl="avatar.png" />
 </telerik:RadChat>
  ````
 
 ````JavaScript
+function OnLoad(sender, args) {
+    renderAttachments();
+}
+
 function renderAttachments() {
     var chat = $find("<%= RadChat1.ClientID %>");
     chat.renderAttachments({
@@ -30,7 +37,11 @@ function renderAttachments() {
             content: {
                 title: "Attachment Title",
                 subtitle: "Attachment Subtitle",
-                text: "Sample text"
+                text: "Some sample text to be shown inside the attachment to illustrate the image above.",
+                images: [{
+                    url: "mountain.png",
+                    alt: "mountain"
+                }]
             }
         }],
         attachmentLayout: "carousel"
@@ -40,9 +51,9 @@ function renderAttachments() {
 
 The layout of a collection of attachments can be: 
 * **Carousel** - displays multiple cards *horizontally*;
-    ![Carousel](images/Carousel.png)
+    ![carousel](images/chat-card-carousel.png)
 * **List** - displays multiple cards *vertically*; 
-    ![deck](images/deck.png)
+    ![deck](images/chat-card-list.png)
 
 To further customize the appearance of a card, you can also use [Custom Templates]({%slug chat/functionality/templates%}) and [Custom Components]({%slug chat/functionality/components%}) articles.
 

controls/chat/functionality/components.md

@@ -17,17 +17,37 @@ The following example demonstrates how to place a [Kendo UI Calendar](https://do
 
 >caption **Figure 1**: A Chat renders a Kendo UI Calendar to facilitate date choosing.
 
-![chat with custom components](images/custom-components.png)
+![chat with custom components](images/chat-custom-component-calendar.png)
 
 ````HTML
- <%-- load Kendo UI styles and scripts --%>
+ <%-- load Kendo UI styles --%>
 <link rel="stylesheet" href="~/styles/kendo.common.min.css" />
 <link rel="stylesheet" href="~/styles/kendo.default.min.css" />
+<style>
+    .t-card {
+        max-width: none;
+    }
+</style>
+````
+
+````ASPX
+<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
+    <Scripts>
+        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
+        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
+        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
+    </Scripts>
+</telerik:RadScriptManager>
+````
+
+````HTML
+ <%-- load Kendo UI scripts after the ScriptManager and before RadChat --%>
 <script src="~/scripts/kendo.all.min.js"></script>
 ````
 
 ````ASPX
-<telerik:RadChat runat="server" ID="RadChat1">
+<telerik:RadChat runat="server" ID="RadChat1" Width="400px" Height="550px">
+    <ClientEvents OnLoad="OnLoad" />
 </telerik:RadChat>
  ````
 
@@ -68,7 +88,7 @@ kendo.chat.registerComponent("CalendarComponent", CalendarComponent);
 
 ````JavaScript
 function addCustomComponent() {
-    var chat = $find("<%= RadChat2.ClientID %>");
+    var chat = $find("<%= RadChat1.ClientID %>");
 
     chat.postMessage("Hello!");
     chat.postMessage("Please, select a date from the Calendar.");

controls/chat/functionality/templates.md

@@ -17,10 +17,11 @@ The following example demonstrates how to implement a simple [Kendo UI Template]
 
 >caption **Figure 1**: A chat uses custom Kendo UI Templates.
 
-![chat with custom template](images/custom-templates.png)
+![chat with custom template](images/chat-custom-template.png)
 
 ````ASPX
 <telerik:RadChat runat="server" ID="RadChat1">
+  <ClientEvents OnLoad="renderSuggestedActions" />
 </telerik:RadChat>
  ````
 
@@ -54,12 +55,12 @@ The following example demonstrates how to implement a simple [Kendo UI Template]
 ````
 
 ````JavaScript
-function renderCustomTemplate() {
+function renderCustomTemplate(sender) {
     // register template
     var QUOTE_CARD_TEMPLATE = kendo.template($('#quote-template').html());
     kendo.chat.registerTemplate("quote", QUOTE_CARD_TEMPLATE);
 
-    var chat = $find("<%= RadChat1.ClientID %>");
+    var chat = sender;
     chat.renderAttachments({
         attachments: [{
             contentType: "quote",

controls/chat/getting-started.md

@@ -14,43 +14,40 @@ The following tutorial demonstrates how you can add a simple **RadChat** control
 
 >caption **Figure 1**: A RadChat configuration with a few shapes and connections
 
-![chat-simple-setup](images/chat-simple-setup.png)
+![chat-getting-started](images/chat-getting-started.png)
 
 1. Add a **ScriptManager** control on a Web Form.
 
 1. Add a **RadChat** control on this Web Form: 
 
 	>caption **Example 1**: Declaration of a **RadChat** control.
 
-	**ASP.NET**
-
+	````ASP.NET
 		<asp:ScriptManager runat="server" ID="ScriptManager1"  />
 		<telerik:RadChat ID="RadChat1" runat="server">
 		</telerik:RadChat>
-
+    ````
 
 
 1. Set some of the messages and user settings like **Placeholder**, **Name** and **IconUrl**.
 
 	>caption **Example 2**: The chat now has a custom placeholder message, username and avatar
 
-	**ASP.NET**
-
+	````ASP.NET
 		<asp:ScriptManager runat="server" ID="ScriptManager1"  />
 		<telerik:RadChat runat="server" ID="RadChat1">
             <MessagesSettings Placeholder="Type your message here..." />
             <UserSettings Name="John" IconUrl="avatar.png" />
         </telerik:RadChat>
-
+    ````
 
 1. Press F5 to run the application. You will see the chat that is displayed in **Figure 1**. From this point you can start interacting with the chat.
 
 	>caption **Example 3**: Assigning the client-side event handlers:
-
-	**ASP.NET**
-
+	
+    ````ASP.NET
 		<asp:ScriptManager runat="server" ID="ScriptManager1"  />
-		<telerik:RadChat runat="server" ID="RadChat1">
+		<telerik:RadChat runat="server" ID="RadChat1" Width="300px" Height="300px">
             <ClientEvents
                 OnActionClick="OnActionClick"
                 OnInitialize="OnInitialize"
@@ -62,34 +59,29 @@ The following tutorial demonstrates how you can add a simple **RadChat** control
             <MessagesSettings Placeholder="Type your message here..." />
             <UserSettings Name="John" IconUrl="avatar.png" />
         </telerik:RadChat>
+    ````
 
     ````JavaScript
-    function OnActionClick(sender, args) {
-    
+    function OnActionClick(sender, args) {    
     }
 
-    function OnInitialize(sender, args) {
-    
+    function OnInitialize(sender, args) {    
     }
 
-    function OnLoad(sender, args) {
-    
+    function OnLoad(sender) {
+        sender.postMessage("Hello!");
     }
 
-    function OnPost(sender, args) {
-    
+    function OnPost(sender) {    
     }
 
-    function OnSendMessage(sender, args) {
-    
+    function OnSendMessage(sender, args) {    
     }
 
-    function OnTypingEnd(sender, args) {
-    
+    function OnTypingEnd(sender, args) {    
     }
 
-    function OnTypingStart(sender, args) {
-    
+    function OnTypingStart(sender, args) {    
     }
     ````