From 0ae6613a2124c8aec2073c2a93c2dabbc6525a62 Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Thu, 24 Mar 2022 21:38:51 +0800
Subject: [PATCH 01/10] renderOptionPanel added

---
 src/components/Chat/Chat.tsx   | 4 ++++
 src/components/Input/Input.tsx | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index 4ac5eaf..ad9fbda 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -122,6 +122,7 @@ export const Chat = ({
   onPreviewDataFetched,
   onSendPress,
   renderBubble,
+  renderOptionPanel,
   renderCustomMessage,
   renderFileMessage,
   renderImageMessage,
@@ -294,6 +295,7 @@ export const Chat = ({
             onMessagePress: handleMessagePress,
             onPreviewDataFetched,
             renderBubble,
+            renderOptionPanel,
             renderCustomMessage,
             renderFileMessage,
             renderImageMessage,
@@ -314,6 +316,7 @@ export const Chat = ({
       onMessageLongPress,
       onPreviewDataFetched,
       renderBubble,
+      renderOptionPanel,
       renderCustomMessage,
       renderFileMessage,
       renderImageMessage,
@@ -423,6 +426,7 @@ export const Chat = ({
                     isAttachmentUploading,
                     onAttachmentPress,
                     onSendPress,
+                    renderOptionPanel,
                     renderScrollable,
                     sendButtonVisibilityMode,
                     textInputProps,
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index c23da2e..4590140 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -29,6 +29,9 @@ export interface InputTopLevelProps {
    * `TextInput` state. Defaults to `editing`. */
   sendButtonVisibilityMode?: 'always' | 'editing'
   textInputProps?: TextInputProps
+
+  /** Render a optional panel inside predefined bubble */
+  renderOptionPanel?: () => React.ReactNode
 }
 
 export interface InputAdditionalProps {
@@ -46,6 +49,7 @@ export const Input = ({
   isAttachmentUploading,
   onAttachmentPress,
   onSendPress,
+  renderOptionPanel,
   sendButtonVisibilityMode,
   textInputProps,
 }: InputProps) => {
@@ -111,6 +115,7 @@ export const Input = ({
       (sendButtonVisibilityMode === 'editing' && user && value.trim()) ? (
         <SendButton onPress={handleSend} />
       ) : null}
+      {(() => {return renderOptionPanel && renderOptionPanel ()})()}
     </View>
   )
 }

From a17c5033cfe3736113ccea1bc37259e6007348d4 Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Thu, 24 Mar 2022 22:04:50 +0800
Subject: [PATCH 02/10] renderOptionPanel added

---
 src/components/Input/Input.tsx | 70 ++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 4590140..d4a9955 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -82,40 +82,44 @@ export const Input = ({
   }
 
   return (
-    <View style={container}>
-      {user &&
-        (isAttachmentUploading ? (
-          <CircularActivityIndicator
-            {...{
-              ...attachmentCircularActivityIndicatorProps,
-              color: theme.colors.inputText,
-              style: marginRight,
-            }}
-          />
-        ) : (
-          !!onAttachmentPress && (
-            <AttachmentButton
-              {...unwrap(attachmentButtonProps)}
-              onPress={onAttachmentPress}
+    <View style={{flexDirection : 'column'}}>
+      <View style={container}>
+        {user &&
+          (isAttachmentUploading ? (
+            <CircularActivityIndicator
+              {...{
+                ...attachmentCircularActivityIndicatorProps,
+                color: theme.colors.inputText,
+                style: marginRight,
+              }}
             />
-          )
-        ))}
-      <TextInput
-        multiline
-        placeholder={l10n.inputPlaceholder}
-        placeholderTextColor={`${String(theme.colors.inputText)}80`}
-        underlineColorAndroid='transparent'
-        {...textInputProps}
-        // Keep our implementation but allow user to use these `TextInputProps`
-        style={[input, textInputProps?.style]}
-        onChangeText={handleChangeText}
-        value={value}
-      />
-      {sendButtonVisibilityMode === 'always' ||
-      (sendButtonVisibilityMode === 'editing' && user && value.trim()) ? (
-        <SendButton onPress={handleSend} />
-      ) : null}
-      {(() => {return renderOptionPanel && renderOptionPanel ()})()}
+          ) : (
+            !!onAttachmentPress && (
+              <AttachmentButton
+                {...unwrap(attachmentButtonProps)}
+                onPress={onAttachmentPress}
+              />
+            )
+          ))}
+        <TextInput
+          multiline
+          placeholder={l10n.inputPlaceholder}
+          placeholderTextColor={`${String(theme.colors.inputText)}80`}
+          underlineColorAndroid='transparent'
+          {...textInputProps}
+          // Keep our implementation but allow user to use these `TextInputProps`
+          style={[input, textInputProps?.style]}
+          onChangeText={handleChangeText}
+          value={value}
+        />
+        {sendButtonVisibilityMode === 'always' ||
+        (sendButtonVisibilityMode === 'editing' && user && value.trim()) ? (
+          <SendButton onPress={handleSend} />
+        ) : null}
+      </View>
+      <View>
+        {(() => {return renderOptionPanel && renderOptionPanel ()})()}
+      </View>
     </View>
   )
 }

From 50eee73dd0e688aec712bacb48ba455e42941d4f Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Thu, 24 Mar 2022 22:13:06 +0800
Subject: [PATCH 03/10] add sample

---
 example/src/App.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 326cb7e..3819092 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -2,6 +2,7 @@ import { useActionSheet } from '@expo/react-native-action-sheet'
 import { Chat, MessageType } from '@flyerhq/react-native-chat-ui'
 import { PreviewData } from '@flyerhq/react-native-link-preview'
 import React, { useState } from 'react'
+import {Dimensions, View} from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import FileViewer from 'react-native-file-viewer'
 import { launchImageLibrary } from 'react-native-image-picker'
@@ -126,6 +127,23 @@ const App = () => {
       onPreviewDataFetched={handlePreviewDataFetched}
       onSendPress={handleSendPress}
       user={user}
+
+      // onAttachmentPress={() => {
+      //   this.setState ({bShowOption : true})
+      // }}
+
+      renderOptionPanel={() => {
+					
+        // if (!this.state.bShowOption) return ;
+
+        // we can show it now 
+        return (
+          <View style={{width : Dimensions.get('screen').width,height : 40,backgroundColor : 'lightblue'}}>
+            {/* render anything you want  */}
+          </View>
+        )
+      }}
+
     />
   )
 }

From c75a71b720b27a0b418e8233d169132d19d1713a Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Sat, 26 Mar 2022 21:37:24 +0800
Subject: [PATCH 04/10] leftPanel && rightPanel

---
 src/components/Chat/Chat.tsx   | 12 ++++++++++++
 src/components/Input/Input.tsx | 27 +++++++++++++++++++--------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index ad9fbda..acf44e2 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -122,7 +122,11 @@ export const Chat = ({
   onPreviewDataFetched,
   onSendPress,
   renderBubble,
+  
   renderOptionPanel,
+  renderLeftPanel,
+  renderRightPanel,
+
   renderCustomMessage,
   renderFileMessage,
   renderImageMessage,
@@ -295,7 +299,11 @@ export const Chat = ({
             onMessagePress: handleMessagePress,
             onPreviewDataFetched,
             renderBubble,
+            
             renderOptionPanel,
+            renderLeftPanel,
+            renderRightPanel,
+
             renderCustomMessage,
             renderFileMessage,
             renderImageMessage,
@@ -316,7 +324,11 @@ export const Chat = ({
       onMessageLongPress,
       onPreviewDataFetched,
       renderBubble,
+      
       renderOptionPanel,
+      renderLeftPanel,
+      renderRightPanel,
+
       renderCustomMessage,
       renderFileMessage,
       renderImageMessage,
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index d4a9955..d8ea1cc 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -30,8 +30,14 @@ export interface InputTopLevelProps {
   sendButtonVisibilityMode?: 'always' | 'editing'
   textInputProps?: TextInputProps
 
-  /** Render a optional panel inside predefined bubble */
+  /** Render a optional panel  */
   renderOptionPanel?: () => React.ReactNode
+
+  /** Render left panel */
+  renderLeftPanel?: () => React.ReactNode
+
+  /** Render right panel */
+  renderRightPanel?: () => React.ReactNode
 }
 
 export interface InputAdditionalProps {
@@ -49,7 +55,11 @@ export const Input = ({
   isAttachmentUploading,
   onAttachmentPress,
   onSendPress,
+  
   renderOptionPanel,
+  renderLeftPanel,
+  renderRightPanel,
+
   sendButtonVisibilityMode,
   textInputProps,
 }: InputProps) => {
@@ -94,12 +104,13 @@ export const Input = ({
               }}
             />
           ) : (
-            !!onAttachmentPress && (
-              <AttachmentButton
-                {...unwrap(attachmentButtonProps)}
-                onPress={onAttachmentPress}
-              />
-            )
+            renderLeftPanel ? renderLeftPanel () :
+              !!onAttachmentPress && (
+                <AttachmentButton
+                  {...unwrap(attachmentButtonProps)}
+                  onPress={onAttachmentPress}
+                />
+              )
           ))}
         <TextInput
           multiline
@@ -114,7 +125,7 @@ export const Input = ({
         />
         {sendButtonVisibilityMode === 'always' ||
         (sendButtonVisibilityMode === 'editing' && user && value.trim()) ? (
-          <SendButton onPress={handleSend} />
+          renderRightPanel ? renderRightPanel () : <SendButton onPress={handleSend} />
         ) : null}
       </View>
       <View>

From 916db47f42bf8a6912dc8bdff611aca473864196 Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Sat, 26 Mar 2022 21:42:23 +0800
Subject: [PATCH 05/10] fix bug

---
 src/components/Chat/Chat.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index acf44e2..d96d5ca 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -122,7 +122,7 @@ export const Chat = ({
   onPreviewDataFetched,
   onSendPress,
   renderBubble,
-  
+
   renderOptionPanel,
   renderLeftPanel,
   renderRightPanel,
@@ -439,6 +439,8 @@ export const Chat = ({
                     onAttachmentPress,
                     onSendPress,
                     renderOptionPanel,
+                    renderLeftPanel,
+                    renderRightPanel,
                     renderScrollable,
                     sendButtonVisibilityMode,
                     textInputProps,

From 836a45b250c0253eadb682841d8d9697429c087d Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Sat, 26 Mar 2022 22:33:02 +0800
Subject: [PATCH 06/10] add middle panel

---
 src/components/Chat/Chat.tsx   |  3 +++
 src/components/Input/Input.tsx | 32 ++++++++++++++++++++------------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index d96d5ca..9ac7234 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -125,6 +125,7 @@ export const Chat = ({
 
   renderOptionPanel,
   renderLeftPanel,
+  renderMidPanel,
   renderRightPanel,
 
   renderCustomMessage,
@@ -302,6 +303,7 @@ export const Chat = ({
             
             renderOptionPanel,
             renderLeftPanel,
+            renderMidPanel,
             renderRightPanel,
 
             renderCustomMessage,
@@ -327,6 +329,7 @@ export const Chat = ({
       
       renderOptionPanel,
       renderLeftPanel,
+      renderMidPanel,
       renderRightPanel,
 
       renderCustomMessage,
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index d8ea1cc..7f5506c 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -36,6 +36,9 @@ export interface InputTopLevelProps {
   /** Render left panel */
   renderLeftPanel?: () => React.ReactNode
 
+  /** Render middle panel */
+  renderMidPanel?: () => React.ReactNode
+
   /** Render right panel */
   renderRightPanel?: () => React.ReactNode
 }
@@ -58,6 +61,7 @@ export const Input = ({
   
   renderOptionPanel,
   renderLeftPanel,
+  renderMidPanel,
   renderRightPanel,
 
   sendButtonVisibilityMode,
@@ -111,18 +115,22 @@ export const Input = ({
                   onPress={onAttachmentPress}
                 />
               )
-          ))}
-        <TextInput
-          multiline
-          placeholder={l10n.inputPlaceholder}
-          placeholderTextColor={`${String(theme.colors.inputText)}80`}
-          underlineColorAndroid='transparent'
-          {...textInputProps}
-          // Keep our implementation but allow user to use these `TextInputProps`
-          style={[input, textInputProps?.style]}
-          onChangeText={handleChangeText}
-          value={value}
-        />
+          ))
+        }
+        {
+          renderMidPanel ? renderMidPanel () :
+            (<TextInput
+              multiline
+              placeholder={l10n.inputPlaceholder}
+              placeholderTextColor={`${String(theme.colors.inputText)}80`}
+              underlineColorAndroid='transparent'
+              {...textInputProps}
+              // Keep our implementation but allow user to use these `TextInputProps`
+              style={[input, textInputProps?.style]}
+              onChangeText={handleChangeText}
+              value={value}
+            />)
+        }
         {sendButtonVisibilityMode === 'always' ||
         (sendButtonVisibilityMode === 'editing' && user && value.trim()) ? (
           renderRightPanel ? renderRightPanel () : <SendButton onPress={handleSend} />

From 27f67e56183dffb81a9adf491dc63db505197b51 Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Sat, 26 Mar 2022 23:09:35 +0800
Subject: [PATCH 07/10] fix bug

---
 src/components/Chat/Chat.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index 9ac7234..d1e8bf1 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -443,6 +443,7 @@ export const Chat = ({
                     onSendPress,
                     renderOptionPanel,
                     renderLeftPanel,
+                    renderMidPanel,
                     renderRightPanel,
                     renderScrollable,
                     sendButtonVisibilityMode,

From e416ef1c0e9fbaa4e5ec2f56e16345e58c93eaf3 Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Wed, 30 Mar 2022 00:11:30 +0800
Subject: [PATCH 08/10] add renderInputPanel

---
 src/components/Chat/Chat.tsx   |  4 ++++
 src/components/Input/Input.tsx | 11 +++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index d1e8bf1..baf16b1 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -123,6 +123,7 @@ export const Chat = ({
   onSendPress,
   renderBubble,
 
+  renderInputPanel,
   renderOptionPanel,
   renderLeftPanel,
   renderMidPanel,
@@ -301,6 +302,7 @@ export const Chat = ({
             onPreviewDataFetched,
             renderBubble,
             
+            renderInputPanel,
             renderOptionPanel,
             renderLeftPanel,
             renderMidPanel,
@@ -327,6 +329,7 @@ export const Chat = ({
       onPreviewDataFetched,
       renderBubble,
       
+      renderInputPanel,
       renderOptionPanel,
       renderLeftPanel,
       renderMidPanel,
@@ -441,6 +444,7 @@ export const Chat = ({
                     isAttachmentUploading,
                     onAttachmentPress,
                     onSendPress,
+                    renderInputPanel,
                     renderOptionPanel,
                     renderLeftPanel,
                     renderMidPanel,
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 7f5506c..aaf9ecc 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -30,6 +30,8 @@ export interface InputTopLevelProps {
   sendButtonVisibilityMode?: 'always' | 'editing'
   textInputProps?: TextInputProps
 
+  renderInputPanel?: () => React.ReactNode
+
   /** Render a optional panel  */
   renderOptionPanel?: () => React.ReactNode
 
@@ -59,6 +61,7 @@ export const Input = ({
   onAttachmentPress,
   onSendPress,
   
+  renderInputPanel,
   renderOptionPanel,
   renderLeftPanel,
   renderMidPanel,
@@ -95,6 +98,14 @@ export const Input = ({
     }
   }
 
+  if (renderInputPanel) {
+    return (
+      <View>
+        {renderInputPanel ()}
+      </View>
+    );
+  }
+
   return (
     <View style={{flexDirection : 'column'}}>
       <View style={container}>

From 62c39daacc51d6a3ac3c4a6f1b7cbfa05e4302d9 Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Sun, 10 Apr 2022 15:11:13 +0800
Subject: [PATCH 09/10] add avatar click callback

---
 src/components/Avatar/Avatar.tsx   | 26 +++++++++++++++-----------
 src/components/Message/Message.tsx |  4 ++++
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 0128e45..ff24120 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Image, StyleSheet, Text, View } from 'react-native'
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 
 import { MessageType, Theme } from '../../types'
 import { getUserAvatarNameColor, getUserInitials } from '../../utils'
@@ -11,12 +11,14 @@ export const Avatar = React.memo(
     showAvatar,
     showUserAvatars,
     theme,
+    onAvatarPress,
   }: {
     author: MessageType.Any['author']
     currentUserIsAuthor: boolean
     showAvatar: boolean
     showUserAvatars?: boolean
-    theme: Theme
+    theme: Theme,
+    onAvatarPress?: () => void
   }) => {
     const renderAvatar = () => {
       const color = getUserAvatarNameColor(
@@ -27,15 +29,17 @@ export const Avatar = React.memo(
 
       if (author.imageUrl) {
         return (
-          <Image
-            accessibilityRole='image'
-            resizeMode='cover'
-            source={{ uri: author.imageUrl }}
-            style={[
-              styles.image,
-              { backgroundColor: theme.colors.userAvatarImageBackground },
-            ]}
-          />
+          <TouchableOpacity onPress={onAvatarPress} activeOpacity={0.95}>
+            <Image
+              accessibilityRole='image'
+              resizeMode='cover'
+              source={{ uri: author.imageUrl }}
+              style={[
+                styles.image,
+                { backgroundColor: theme.colors.userAvatarImageBackground },
+              ]}
+            />
+          </TouchableOpacity>
         )
       }
 
diff --git a/src/components/Message/Message.tsx b/src/components/Message/Message.tsx
index d96ff21..f70b2a3 100644
--- a/src/components/Message/Message.tsx
+++ b/src/components/Message/Message.tsx
@@ -53,6 +53,8 @@ export interface MessageTopLevelProps extends TextMessageTopLevelProps {
   ) => React.ReactNode
   /** Show user avatars for received messages. Useful for a group chat. */
   showUserAvatars?: boolean
+
+  onAvatarPress? :() => void
 }
 
 export interface MessageProps extends MessageTopLevelProps {
@@ -81,6 +83,7 @@ export const Message = React.memo(
     renderFileMessage,
     renderImageMessage,
     renderTextMessage,
+    onAvatarPress,
     roundBorder,
     showAvatar,
     showName,
@@ -189,6 +192,7 @@ export const Message = React.memo(
             showAvatar,
             showUserAvatars,
             theme,
+            onAvatarPress,
           }}
         />
         <Pressable

From 06428a8babe9544b5dd9ca820a432677e86db065 Mon Sep 17 00:00:00 2001
From: TQCasey <494294315@qq.com>
Date: Sun, 10 Apr 2022 15:19:49 +0800
Subject: [PATCH 10/10] add avatar click callback

---
 src/components/Chat/Chat.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index baf16b1..3e430ea 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -128,6 +128,7 @@ export const Chat = ({
   renderLeftPanel,
   renderMidPanel,
   renderRightPanel,
+  onAvatarPress,
 
   renderCustomMessage,
   renderFileMessage,
@@ -307,6 +308,7 @@ export const Chat = ({
             renderLeftPanel,
             renderMidPanel,
             renderRightPanel,
+            onAvatarPress,
 
             renderCustomMessage,
             renderFileMessage,
@@ -334,6 +336,7 @@ export const Chat = ({
       renderLeftPanel,
       renderMidPanel,
       renderRightPanel,
+      onAvatarPress,
 
       renderCustomMessage,
       renderFileMessage,