docs(chat): Add Structure article content and image placeholders And Improve content of articles

Author: pepinho24

controls/chat/functionality/actions.md

@@ -10,7 +10,15 @@ position: 0
 
 # Default Actions
 
-The **RadChat** control has a support for default **suggested actions**. To display the **suggestedActions** propmt, you need to call  the `renderSuggestedActions` method of the control.
+The **RadChat** control has a support for default **suggested actions** which are rendered inside a Suggested Actions Pane. A Suggested Action is a button that the user can tap/click to provide input. That is why they can be also called Quick Actions.
+
+ Unlike buttons that appear within [rich cards]({%slug chat/cards%}) (which remain visible and accessible to the user even after being tapped), buttons that appear within the suggested actions pane will disappear after the user makes a selection. This prevents the user from tapping stale buttons within a conversation and simplifies bot development (since you will not need to account for that scenario). 
+
+To display the **suggestedActions** propmt, you need to call  the `renderSuggestedActions` method of the control.
+
+>caption **Figure 1**: A Chat with suggested actions.
+
+![chat with suggested actions](images/suggested-actions.png)
 
 ````ASPX
 <telerik:RadChat runat="server" ID="RadChat1">

controls/chat/functionality/cards.md

@@ -10,7 +10,11 @@ position: 1
 
 # Default Cards
 
-Out of the box, the **RadChat** supports the default **heroCards** which can be displayed in the chat flow when calling the `renderAttachments` method of the control.
+Rich cards are complex attachment messages that can contain additional message styling, templates, and images. The **RadChat** control supports the default **heroCards** template which can be displayed in the chat flow when calling the `renderAttachments` method of the control and pass `heroCard` as a value for the `contentType` property of an attachment.
+
+>caption **Figure 1**: A Chat that uses the default HeroCard template.
+
+![chat with heroCard template](images/herocard-template.png)
 
 ````ASPX
 <telerik:RadChat runat="server" ID="RadChat1">
@@ -34,13 +38,19 @@ function renderAttachments() {
 }
 ````
 
+The layout of a collection of attachments can be: 
+* **Carousel** - displays multiple cards *horizontally*;
+    ![Carousel](images/Carousel.png)
+* **List** - displays multiple cards *vertically*; 
+    ![deck](images/deck.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.
 
 # See Also
 
  * [RadChat Structure]({%slug chat/structure%})
 
- * [RadChat Server-Side Programming]({%slug diagram/server-side-programming%})
+ * [RadChat Server-Side Programming]({%slug chat/server-side-programming%})
 
  * [RadChat Client-Side Programming]({%slug chat/client-side-programming/overview%})
 

controls/chat/functionality/components.md

@@ -15,6 +15,10 @@ The **RadChat** control supports the implementation of custom components which a
 
 The following example demonstrates how to place a [Kendo UI Calendar](https://docs.telerik.com/kendo-ui/controls/scheduling/calendar/overview) in a custom RadChat component.
 
+>caption **Figure 1**: A Chat renders a Kendo UI Calendar to facilitate date choosing.
+
+![chat with custom components](images/custom-components.png)
+
 ````HTML
  <%-- load Kendo UI styles and scripts --%>
 <link rel="stylesheet" href="~/styles/kendo.common.min.css" />

controls/chat/functionality/templates.md

@@ -13,7 +13,11 @@ position: 2
 
 The **RadChat** control supports the definition of custom templates to fit any custom payload that is returned by the service.
 
-The following example demonstrates how to implement a simple [Kendo UI template](https://docs.telerik.com/kendo-ui/framework/templates/overview) and to register it for the **RadChat**.
+The following example demonstrates how to implement a simple [Kendo UI Template](https://docs.telerik.com/kendo-ui/framework/templates/overview) and to register it for the **RadChat**.
+
+>caption **Figure 1**: A chat uses custom Kendo UI Templates.
+
+![chat with custom template](images/custom-templates.png)
 
 ````ASPX
 <telerik:RadChat runat="server" ID="RadChat1">

controls/chat/overview.md

@@ -24,6 +24,7 @@ This article provides a brief overview of the main features of the **RadChat** c
 
 * **[Custom Components]({%slug chat/functionality/components%})** - Integration of custom components, which allows the use of JavaScript to render any content.
 
+To get familiar with the UI elements of the RadChat you can check the [RadChat Structure]({%slug chat/structure%}) article.
 
 # See Also
 

controls/chat/server-side-programming/overview.md

@@ -16,10 +16,6 @@ You can configure the settings of **RadChat** and create its elements on the cod
 
 **Example 1** shows a possible application of the Server-Side API of the chat. The code in the example configures some settings of the chat, of its User and Messages settings, then assigns the event handlers of the client-side events.
 
->caption **Figure 1**: A chat that is configured from the code-behind.
-
-![diagram-programmatic-creation](images/diagram-programmatic-creation.png)
-
 >caption **Example 1**: Configuring a diagram on the server-side.
 
 ````C#

controls/chat/structure.md

@@ -10,13 +10,31 @@ position: 2
 
 # Structure Overview
 
+>caption **Figure 1**: A chat structure.
 
+![chat-structure](images/chat-structure.png)
 
+The two main elements the **RadChat** control is built with are **Message List** and **Message Box**.
 
+## The Message List can contain: 
 
+* **Message Bubble** - element containing a message string. Usually the current user's message bubbles are right aligned and other users/chatbots' message bubbles are left aligned.
+* **Message Group** - a continuous series of message bubbles by the same user. 
+* **Avatar** - a user icon next to the message bubble indicating the sender of the message. If there are more than one continuous messages from the same user, the icon stands only next to the last message of the message group.
+* **Author** - a text message indicating the author of the message, if such is available. Displayed over the first message bubble of a message group.
+* **Message Timestamp** - date string near the message bubble showing the time when the message is sent. Clicking the message bubble toggles the timestamp visibility.
+* **Suggested Action** - button that the user can tap/click to provide input. Unlike buttons that appear within rich cards (which remain visible and accessible to the user even after being tapped), buttons that appear within the suggested actions pane will disappear after the user makes a selection. This prevents the user from tapping stale buttons within a conversation and simplifies bot development (since you will not need to account for that scenario).
+* **Suggested Actions Pane** - an element that contains one or more suggested action elements.
+* **Rich Card Attachment** - complex messages that can contain more that just a message string. For example, every card can contain image, custom styling and suggested actions. The default card available in **RadChat** is a "heroCard". More on cards can be found in the [Custom Templates]({%slug chat/functionality/templates%}) article.  
+* **Deck of cards** - collection of rich cards that can be listed in two ways: 
+    * **Carousel** - displays multiple cards *horizontally*. Might be referred as **Card Deck**;
+    * **List** - displays multiple cards *vertically*. Might be referred as **Card List**; 
 
 
+## The Message Box contains
 
+* **Message Input** - input where the user writes their message. When there is no message written, a placeholder message is visible.
+* **Send Button** - button that when clicked sends the message in the message input. When the focus is on the message input, pressing the `Enter` key is the same as clicking the send button.
 
 # See Also