From 34d10841ac4044d5c571f535de2cbd9aee0f10b0 Mon Sep 17 00:00:00 2001
From: Xavier Carpentier <xcapetir@gmail.com>
Date: Mon, 13 May 2019 17:55:43 +0200
Subject: [PATCH] doc

---
 README.md    | 108 +++++++++++++++++++++++++++++++++++++++++++--------
 src/types.ts |   2 +-
 2 files changed, 93 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 8899f5137..2982f92dd 100644
--- a/README.md
+++ b/README.md
@@ -79,7 +79,7 @@
 - InputToolbar avoiding keyboard
 - Redux support
 - System message
-- **Bot message implementation [soon](https://github.com/FaridSafi/react-native-gifted-chat/pull/1211)**
+- Quick Reply messages
 
 ## Dependency
 
@@ -102,35 +102,35 @@
 ## Example
 
 ```jsx
-import React from "react";
-import { GiftedChat } from "react-native-gifted-chat";
+import React from 'react'
+import { GiftedChat } from 'react-native-gifted-chat'
 
 class Example extends React.Component {
   state = {
-    messages: []
-  };
+    messages: [],
+  }
 
   componentWillMount() {
     this.setState({
       messages: [
         {
           _id: 1,
-          text: "Hello developer",
+          text: 'Hello developer',
           createdAt: new Date(),
           user: {
             _id: 2,
-            name: "React Native",
-            avatar: "https://placeimg.com/140/140/any"
-          }
-        }
-      ]
-    });
+            name: 'React Native',
+            avatar: 'https://placeimg.com/140/140/any',
+          },
+        },
+      ],
+    })
   }
 
   onSend(messages = []) {
     this.setState(previousState => ({
-      messages: GiftedChat.append(previousState.messages, messages)
-    }));
+      messages: GiftedChat.append(previousState.messages, messages),
+    }))
   }
 
   render() {
@@ -139,10 +139,10 @@ class Example extends React.Component {
         messages={this.state.messages}
         onSend={messages => this.onSend(messages)}
         user={{
-          _id: 1
+          _id: 1,
         }}
       />
-    );
+    )
   }
 }
 ```
@@ -188,6 +188,80 @@ e.g. System Message
 }
 ```
 
+### e.g. Chat Message with Quick Reply options
+
+See PR #[1211](https://github.com/FaridSafi/react-native-gifted-chat/pull/1211)
+
+```ts
+interface Reply {
+  title: string
+  value: string
+  messageId?: any
+}
+
+interface QuickReplies {
+  type: 'radio' | 'checkbox'
+  values: Reply[]
+  keepIt?: boolean
+}
+```
+
+```js
+  {
+    _id: 1,
+    text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT',
+    createdAt: new Date(),
+    quickReplies: {
+      type: 'radio', // or 'checkbox',
+      keepIt: true,
+      values: [
+        {
+          title: '😋 Yes',
+          value: 'yes',
+        },
+        {
+          title: '📷 Yes, let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: '😞 Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  },
+  {
+    _id: 2,
+    text: 'This is a quick reply. Do you love Gifted Chat? (checkbox)',
+    createdAt: new Date(),
+    quickReplies: {
+      type: 'checkbox', // or 'radio',
+      values: [
+        {
+          title: 'Yes',
+          value: 'yes',
+        },
+        {
+          title: 'Yes, let me show you with a picture!',
+          value: 'yes_picture',
+        },
+        {
+          title: 'Nope. What?',
+          value: 'no',
+        },
+      ],
+    },
+    user: {
+      _id: 2,
+      name: 'React Native',
+    },
+  }
+```
+
 ## Props
 
 - **`messages`** _(Array)_ - Messages to display
@@ -259,6 +333,8 @@ e.g. System Message
 * **`scrollToBottomComponent`** _(Function)_ - Custom Scroll To Bottom Component container
 * **`scrollToBottomOffset`** _(Integer)_ - Custom Height Offset upon which to begin showing Scroll To Bottom Component (Default is 200)
 * **`alignTop`** _(Boolean)_ Controls whether or not the message bubbles appear at the top of the chat (Default is false - bubbles align to bottom)
+* **`onQuickReply`** _(Function)_ - Callback when sending a quick reply (to backend server)
+* **`renderQuickReply`** _(Function)_ - Custom quick reply view
 
 ## Imperative methods
 
diff --git a/src/types.ts b/src/types.ts
index 6d9a7770f..a4f20f141 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -16,7 +16,7 @@ export interface User {
 export interface Reply {
   title: string
   value: string
-  messageId?: string
+  messageId?: any
 }
 
 export interface QuickReplies {