[#968] Improve UI/Inbox docs (#1280)

closes #968

docs/docs/apps/ui/inbox.md

@@ -5,13 +5,19 @@ sidebar_label: Inbox
 
 import ButtonBox from "@site/src/components/ButtonBox";
 import AiryBubbleSVG from "@site/static/icons/airy-bubble.svg";
+import PriceTag from "@site/static/icons/price-tag.svg";
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+## Introduction
 
 Airy’s Inbox gives you an UI for all your conversations.
 
-See all conversations from the sources you connected, no matter if they come via the Live Chat Plugin, Facebook Messenger, Google’s Business Messages, SMS, WhatsApp or a custom source.
+See all conversations from the sources you connected, no matter if they come via the [Live Chat Plugin](sources/chatplugin/overview.md), [Facebook Messenger](sources/facebook.md), [Google’s Business Messages](sources/google.md), [SMS](sources/sms-twilio.md), [WhatsApp](sources/whatsapp-twilio.md) or a custom source.
 
 The inbox supports not only text messages but a variety of different message types.
 
+## Message Types
+
 **Send & Receive Messages**
 
 You and your team members can use the inbox to receive and send messages from different sources.
@@ -20,12 +26,91 @@ Each of these sources have different character limits.
 **Facebook Templates**
 
 A template is a simple structured message that can include a title, subtitle, image, and up to three buttons.
-Airy’s Inbox supports all templates that Facebook supports, from Generic Templates to Button Templates.
+Airy’s Inbox supports all templates that Facebook supports, from [Generic Templates](https://developers.facebook.com/docs/messenger-platform/send-messages/template/generic) to [Button Templates](https://developers.facebook.com/docs/messenger-platform/send-messages/template/button).
+
+**Sample Button Template Message**
+
+<img alt="Button Template Example" src={useBaseUrl('img/apps/ui/FacebookButtonTemplate.png')} />
+
+**Sample request**
+
+```json5
+{
+  "conversation_id": "a688d36c-a85e-44af-bc02-4248c2c97622",
+  "message": {
+    "attachment": {
+      "type": "template",
+      "payload": {
+        "template_type": "button",
+        "text": "What do you want to do next?",
+        "buttons": [
+          {
+            "type": "web_url",
+            "url": "https://www.messenger.com",
+            "title": "Visit Messenger"
+          },
+          {
+            "type": "web_url",
+            "url": "https://www.messenger.com",
+            "title": "Visit Website"
+          },
+          {
+            "type": "web_url",
+            "url": "https://www.messenger.com",
+            "title": "Test Button"
+          }
+        ]
+      }
+    }
+  }
+}
+```
 
 **Google’s Rich Cards**
 
 Rich Cards are Google’s templates: a simple structured message that can include a title, description, media and up to 4 suggested replies (buttons).
-Airy’s Inbox supports all Google’s Rich Cards variants from Rich Cards to Carousels.
+Airy’s Inbox supports all [Google’s Rich Cards variants from Rich Cards to Carousels](https://developers.google.com/business-communications/business-messages/guides/build/send).
+
+**Sample request**
+
+```json5
+{
+  "conversation_id": "a688d36c-a85e-44af-bc02-4248c2c97622",
+  "message": {
+    "fallback": 'Hello, world!\n\nReply with "A" or "B"',
+    "richCard": {
+      "standaloneCard": {
+        "cardContent": {
+          "title": "Hello, world!",
+          "description": "Sent with Business Messages.",
+          "media": {
+            "height": "TALL",
+            "contentInfo": {
+              "altText": "Google logo",
+              "fileUrl": "https://picsum.photos/200",
+              "forceRefresh": "false"
+            }
+          },
+          "suggestions": [
+            {
+              "reply": {
+                "text": "Suggestion #1",
+                "postbackData": "suggestion_1"
+              }
+            },
+            {
+              "reply": {
+                "text": "Suggestion #2",
+                "postbackData": "suggestion_2"
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+```
 
 **Render Templates for Chat Plugin**
 
@@ -38,6 +123,67 @@ title='Airy Live Chat Plugin'
 description='The Airy Live Chat Plugin enables conversations with website visitors through a web chat plugin'
 link='sources/chatplugin/overview'
 />
+<br/>
+
+**Sample RichCard Carousel Message**
+
+<img alt="Rich Card Carousel Example" src={useBaseUrl('img/apps/ui/RichCardCarousel.gif')} />
+
+**Sample request**
+
+```json5
+{
+  "conversation_id": "a688d36c-a85e-44af-bc02-4248c2c97622",
+  "message": {
+    "fallback": 'Card #1\n #1\n\nCard #2\n\n\nReply with "Card #1" or "Card #2"',
+    "richCard": {
+      "carouselCard": {
+        "cardWidth": "MEDIUM",
+        "cardContents": [
+          {
+            "title": "Card #1",
+            "description": "The description for card #1",
+            "suggestions": [
+              {
+                "reply": {
+                  "text": "Card #1",
+                  "postbackData": "card_1"
+                }
+              }
+            ],
+            "media": {
+              "height": "MEDIUM",
+              "contentInfo": {
+                "fileUrl": "https://picsum.photos/id/237/200",
+                "forceRefresh": "false"
+              }
+            }
+          },
+          {
+            "title": "Card #2",
+            "description": "The description for card #2",
+            "suggestions": [
+              {
+                "reply": {
+                  "text": "Card #2",
+                  "postbackData": "card_2"
+                }
+              }
+            ],
+            "media": {
+              "height": "MEDIUM",
+              "contentInfo": {
+                "fileUrl": "https://picsum.photos/id/238/200",
+                "forceRefresh": "false"
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+```
 
 ## Search & Filter
 
@@ -50,9 +196,13 @@ The inbox enables you to search by:
 - Name
 - Tags
 
-**Tags**
-
-Tag your conversations for easy filtering, searching & segmenting
+<ButtonBox
+icon={() => <PriceTag />}
+title='Tags'
+description='Tag your conversations for easy filtering, searching & segmenting'
+link='apps/ui/tags'
+/>
+<br/>
 
 **Filter**
 
@@ -63,3 +213,5 @@ The inbox can filter by:
 - Read/Unread Conversations
 - Sources
 - Tags
+
+<img alt="Filter Inbox" src={useBaseUrl('img/apps/ui/FilteringInbox.gif')} />

lib/typescript/render/providers/facebook/components/ButtonTemplate/index.tsx

@@ -7,7 +7,7 @@ type ButtonTemplateRendererProps = DefaultMessageRenderingProps & {
   template: ButtonTemplateModel;
 };
 
-export const ButtonTemplate = ({sentAt, template}: ButtonTemplateRendererProps) => (
+export const ButtonTemplate = ({template}: ButtonTemplateRendererProps) => (
   <div className={styles.wrapper}>
     <div className={styles.template}>
       <div className={styles.tempateText}>{template.text}</div>
@@ -25,6 +25,5 @@ export const ButtonTemplate = ({sentAt, template}: ButtonTemplateRendererProps)
         );
       })}
     </div>
-    {sentAt && <div className={styles.messageTime}>{sentAt}</div>}
   </div>
 );