(props) move textareaAction icon to the right

Author: antoine92190

README.md

@@ -561,7 +561,7 @@ messages="[
 | messageActionHandler (3)  | `{ roomId, action, message }`                                   | A user clicks on the dropdown icon inside a message   |
 | sendMessageReaction       | `{ roomId, messageId, reaction, remove }`                       | A user clicks on the emoji icon inside a message      |
 | roomInfo                  | `room`                                                          | A user clicks the room header bar                     |
-| textareaActionHandler (4) | `{ roomId, message }`                                           | A user clicks on the left icon inside the footer      |
+| textareaActionHandler (4) | `{ roomId, message }`                                           | A user clicks on custom icon inside the footer        |
 | typingMessage             | `{ message, roomId }`                                           | A user is typing a message                            |
 
 (1) `fetchMessages` is triggered every time a room is opened. If the room is opened for the first time, the `options` param will hold `reset: true`
@@ -599,8 +599,7 @@ messageActionHandler({ roomId, action, message }) {
 }
 ```
 
-(4) `textareaActionHandler` can be used to add an extra icon on the left of the textarea.<br>
-By default, adding this event will automatically display a microphone icon. In that case, you can implement a speech recognition system and update the textarea value by using `roomMessage` prop.
+(4) `textareaActionHandler` can be used to add an extra icon on the right of the textarea, and recieve an event when clicking it.
 
 (5) All file params contain: `{ blob, localURL, name, size, type }`
 

demo/src/ChatContainer.vue

@@ -477,7 +477,7 @@ export default {
 		},
 
 		textareaActionHandler({ message, roomId }) {
-			this.roomMessage = 'Implement your own speech recognition system!'
+			this.roomMessage = 'Implement your own action!'
 		},
 
 		async sendMessageReaction({ reaction, remove, messageId, roomId }) {

src/ChatWindow/Room.vue

@@ -169,7 +169,7 @@
 			</transition>
 
 			<div class="box-footer">
-				<div class="icon-textarea-left" v-if="showAudio">
+				<div class="icon-textarea-left" v-if="showAudio && !imageFile">
 					<div class="svg-button" @click="recordAudio">
 						<slot
 							v-if="recorder.state === 'recording'"
@@ -183,11 +183,7 @@
 					</div>
 				</div>
 
-				<div
-					class="image-container"
-					:class="{ 'image-container-right': textareaAction }"
-					v-if="imageFile"
-				>
+				<div class="image-container" v-if="imageFile">
 					<div class="svg-button icon-image" @click="resetImageFile">
 						<slot name="image-close-icon">
 							<svg-icon name="close" param="image" />
@@ -208,7 +204,8 @@
 							<svg-icon name="file" />
 						</slot>
 					</div>
-					<div class="file-message">{{ message }}</div>
+					<div class="file-message" v-if="file && file.audio">audio</div>
+					<div class="file-message" v-else>{{ message }}</div>
 					<div class="svg-button icon-remove" @click="resetMessage(null, true)">
 						<slot name="file-close-icon">
 							<svg-icon name="close" />
@@ -264,6 +261,16 @@
 						</slot>
 					</div>
 
+					<div
+						v-if="textareaAction"
+						@click="textareaActionHandler"
+						class="svg-button"
+					>
+						<slot name="custom-action-icon">
+							<svg-icon name="deleted" />
+						</slot>
+					</div>
+
 					<input
 						v-if="showFiles"
 						type="file"
@@ -549,8 +556,6 @@ export default {
 					audio: true,
 					localUrl: URL.createObjectURL(recordedBlob)
 				}
-
-				this.message = 'audio'
 			})
 		},
 		addNewMessage(message) {
@@ -947,10 +952,6 @@ textarea {
 	top: 18px;
 }
 
-.image-container-right {
-	left: calc(16px + 43px);
-}
-
 .image-file {
 	display: flex;
 	justify-content: center;
@@ -1107,10 +1108,6 @@ textarea {
 		left: 10px;
 	}
 
-	.image-container-right {
-		left: calc(10px + 39px);
-	}
-
 	.image-file img {
 		transform: scale(0.97);
 	}