(feature) #161 Auto Complete Template Text

demo/src/ChatContainer.vue

@@ -51,6 +51,7 @@
 			:room-actions="roomActions"
 			:menu-actions="menuActions"
 			:room-message="roomMessage"
+			:templates-text="templatesText"
 			@fetch-more-rooms="fetchMoreRooms"
 			@fetch-messages="fetchMessages"
 			@send-message="sendMessage"
@@ -141,7 +142,21 @@ export default {
 				{ name: 'removeUser', title: 'Remove User' },
 				{ name: 'deleteRoom', title: 'Delete Room' }
 			],
-			styles: { container: { borderRadius: '4px' } }
+			styles: { container: { borderRadius: '4px' } },
+			templatesText: [
+				{
+					tag: 'help',
+					text: 'This is the help'
+				},
+				{
+					tag: 'action',
+					text: 'this is the action'
+				},
+				{
+					tag: 'action 2',
+					text: 'this is the second action'
+				}
+			]
 			// ,dbRequestCount: 0
 		}
 	},

package.json

@@ -68,7 +68,7 @@
 		"typescript": "^4.0.5",
 		"vue": "^2.6.14",
 		"vue-jest": "^3.0.7",
-		"vue-template-compiler": "^2.6.11"
+		"vue-template-compiler": "^2.6.14"
 	},
 	"peerDependencies": {
 		"vue": "^2.6.14"

src/lib/ChatWindow.vue

@@ -54,6 +54,7 @@
 				:room-info-enabled="roomInfoEnabled"
 				:textarea-action-enabled="textareaActionEnabled"
 				:accepted-files="acceptedFiles"
+				:templates-text="templatesText"
 				@toggle-rooms-list="toggleRoomsList"
 				@room-info="roomInfo"
 				@fetch-messages="fetchMessages"
@@ -138,7 +139,8 @@ export default {
 		roomInfoEnabled: { type: Boolean, default: false },
 		textareaActionEnabled: { type: Boolean, default: false },
 		roomMessage: { type: String, default: '' },
-		acceptedFiles: { type: String, default: '*' }
+		acceptedFiles: { type: String, default: '*' },
+		templatesText: { type: Array, default: null }
 	},
 
 	emits: [

src/lib/Room/Room.vue

@@ -140,6 +140,14 @@
 				@select-user-tag="selectUserTag($event)"
 			/>
 
+			<room-Templates-Text
+				:filtered-templates-text="filteredTemplatesText"
+				:active-template="activeTemplate"
+				:active-up-or-down="activeUpOrDown"
+				@select-template-text="selectTemplateText($event)"
+				@active-item="activeUpOrDown = 0"
+			/>
+
 			<room-message-reply
 				:room="room"
 				:message-reply="messageReply"
@@ -210,8 +218,14 @@
 					}"
 					@input="onChangeInput"
 					@keydown.esc="escapeTextarea"
-					@keydown.enter.exact.prevent=""
+					@keydown.enter.exact.prevent="beforeEnter"
 					@paste="onPasteImage"
+					@keydown.tab.exact.prevent=""
+					@keydown.tab="activeTemplate = true"
+					@keydown.up.exact.prevent=""
+					@keydown.up="upActiveTemplate"
+					@keydown.down.exact.prevent=""
+					@keydown.down="downActiveTemplate"
 				/>
 
 				<div class="vac-icon-textarea">
@@ -264,7 +278,7 @@
 						type="file"
 						multiple
 						:accept="acceptedFiles"
-						style="display:none"
+						style="display: none"
 						@change="onFileChange($event.target.files)"
 					/>
 
@@ -298,9 +312,10 @@ import RoomFiles from './RoomFiles/RoomFiles'
 import RoomMessageReply from './RoomMessageReply/RoomMessageReply'
 import RoomUsersTag from './RoomUsersTag/RoomUsersTag'
 import RoomEmojis from './RoomEmojis/RoomEmojis'
+import RoomTemplatesText from './RoomTemplatesText/RoomTemplatesText'
 import Message from '../Message/Message'
 
-import filteredUsers from '../../utils/filter-items'
+import filteredItems from '../../utils/filter-items'
 import Recorder from '../../utils/recorder'
 
 const { detectMobile, iOSDevice } = require('../../utils/mobile-detection')
@@ -327,6 +342,7 @@ export default {
 		RoomMessageReply,
 		RoomUsersTag,
 		RoomEmojis,
+		RoomTemplatesText,
 		Message
 	},
 
@@ -360,7 +376,8 @@ export default {
 		linkOptions: { type: Object, required: true },
 		loadingRooms: { type: Boolean, required: true },
 		roomInfoEnabled: { type: Boolean, required: true },
-		textareaActionEnabled: { type: Boolean, required: true }
+		textareaActionEnabled: { type: Boolean, required: true },
+		templatesText: { type: Array, default: null }
 	},
 
 	emits: [
@@ -398,6 +415,9 @@ export default {
 			filteredEmojis: [],
 			filteredUsersTag: [],
 			selectedUsersTag: [],
+			filteredTemplatesText: [],
+			activeTemplate: null,
+			activeUpOrDown: null,
 			textareaCursorPosition: null,
 			cursorRangePosition: null,
 			emojisDB: new Database(),
@@ -442,6 +462,7 @@ export default {
 			return (
 				!!this.filteredEmojis.length ||
 				!!this.filteredUsersTag.length ||
+				!!this.filteredTemplatesText.length ||
 				!!this.files.length ||
 				!!this.messageReply
 			)
@@ -515,14 +536,15 @@ export default {
 					if (isMobile) {
 						this.message = this.message + '\n'
 						setTimeout(() => this.onChangeInput())
-					} else {
+					} else if (this.filteredTemplatesText.length === 0) {
 						this.sendMessage()
 					}
 				}
 
 				setTimeout(() => {
 					this.updateFooterList('@')
 					this.updateFooterList(':')
+					this.updateFooterList('/')
 				}, 60)
 			}),
 			50
@@ -533,6 +555,7 @@ export default {
 
 			this.updateFooterList('@')
 			this.updateFooterList(':')
+			this.updateFooterList('/')
 		})
 
 		this.$refs['roomTextarea'].addEventListener('blur', () => {
@@ -642,6 +665,10 @@ export default {
 				return
 			}
 
+			if (tagChar === '/' && !this.templatesText) {
+				return
+			}
+
 			if (
 				this.textareaCursorPosition ===
 				this.$refs['roomTextarea'].selectionStart
@@ -676,6 +703,8 @@ export default {
 					this.updateEmojis(query)
 				} else if (tagChar === '@') {
 					this.updateShowUsersTag(query)
+				} else if (tagChar === '/') {
+					this.updateShowTemplatesText(query)
 				}
 			} else {
 				this.resetFooterList(tagChar)
@@ -717,7 +746,7 @@ export default {
 			this.focusTextarea()
 		},
 		updateShowUsersTag(query) {
-			this.filteredUsersTag = filteredUsers(
+			this.filteredUsersTag = filteredItems(
 				this.room.users,
 				'username',
 				query,
@@ -743,22 +772,65 @@ export default {
 				position + user.username.length + space.length + 1
 			this.focusTextarea()
 		},
+		updateShowTemplatesText(query) {
+			this.filteredTemplatesText = filteredItems(
+				this.templatesText,
+				'tag',
+				query,
+				true
+			)
+		},
+		selectTemplateText(template) {
+			this.activeTemplate = false
+			if (!template) return
+			const { position, endPosition } = this.getCharPosition('/')
+
+			const space = this.message.substr(endPosition, endPosition).length
+				? ''
+				: ' '
+
+			this.message =
+				this.message.substr(0, position - 1) +
+				template.text +
+				space +
+				this.message.substr(endPosition, this.message.length - 1)
+
+			this.cursorRangePosition =
+				position + template.text.length + space.length + 1
+			this.focusTextarea()
+		},
+		beforeEnter() {
+			if (this.filteredTemplatesText.length > 0) {
+				this.activeTemplate = true
+			}
+		},
+		upActiveTemplate() {
+			this.activeUpOrDown = -1
+		},
+		downActiveTemplate() {
+			this.activeUpOrDown = 1
+		},
 		resetFooterList(tagChar = null) {
 			if (tagChar === ':') {
 				this.filteredEmojis = []
 			} else if (tagChar === '@') {
 				this.filteredUsersTag = []
+			} else if (tagChar === '/') {
+				this.filteredTemplatesText = []
 			} else {
 				this.filteredEmojis = []
 				this.filteredUsersTag = []
+				this.filteredTemplatesText = []
 			}
 
 			this.textareaCursorPosition = null
 		},
 		escapeTextarea() {
 			if (this.filteredEmojis.length) this.filteredEmojis = []
 			else if (this.filteredUsersTag.length) this.filteredUsersTag = []
-			else this.resetMessage()
+			else if (this.filteredTemplatesText.length) {
+				this.filteredTemplatesText = []
+			} else this.resetMessage()
 		},
 		resetMessage(disableMobileFocus = false, initRoom = false) {
 			if (!initRoom) {

src/lib/Room/RoomTemplatesText/RoomTemplatesText.scss

@@ -0,0 +1,45 @@
+.vac-template-container {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
+
+	.vac-template-box {
+		display: flex;
+		width: 100%;
+		height: 54px;
+		overflow: hidden;
+		cursor: pointer;
+		background: var(--chat-footer-bg-color-tag);
+		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+	}
+	.vac-template-active {
+		background: var(--chat-footer-bg-color-tag-active);
+		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
+	}
+	.vac-template-info {
+		display: flex;
+		overflow: hidden;
+		padding: 0 20px;
+		align-items: center;
+	}
+	.vac-template-tag {
+		font-size: 14px;
+		font-weight: bold;
+		margin-right: 10px;
+	}
+	.vac-template-text {
+		font-size: 14px;
+	}
+
+	@media only screen and (max-width: 768px) {
+		.vac-template-box {
+			height: 50px;
+		}
+
+		.vac-template-info {
+			padding: 0 12px;
+		}
+	}
+}

src/lib/Room/RoomTemplatesText/RoomTemplatesText.vue

@@ -0,0 +1,70 @@
+<template>
+	<transition name="vac-slide-up">
+		<div
+			v-if="filteredTemplatesText.length"
+			class="vac-template-container vac-app-box-shadow"
+			:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
+		>
+			<div
+				v-for="(template, index) in filteredTemplatesText"
+				:key="index"
+				class="vac-template-box"
+				:class="{ 'vac-template-active': index === activeItem }"
+				@mouseover="activeItem = index"
+				@click="$emit('select-template-text', template)"
+			>
+				<div class="vac-template-info">
+					<div class="vac-template-tag">
+/{{ template.tag }}
+</div>
+					<div class="vac-template-text">
+						{{ template.text }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+export default {
+	name: 'RoomTemplatesText',
+	props: {
+		filteredTemplatesText: { type: Array, required: true },
+		activeTemplate: { type: Boolean, default: null },
+		activeUpOrDown: { type: Number, default: null }
+	},
+
+	emits: ['select-template-text', 'active-item'],
+
+	data() {
+		return {
+			activeItem: null
+		}
+	},
+	watch: {
+		filteredTemplatesText() {
+			this.activeItem = 0
+		},
+		activeTemplate() {
+			if (this.activeTemplate) {
+				this.$emit(
+					'select-template-text',
+					this.filteredTemplatesText[this.activeItem]
+				)
+			}
+		},
+		activeUpOrDown() {
+			if (
+				this.activeUpOrDown > 0 &&
+				this.activeItem < this.filteredTemplatesText.length - 1
+			) {
+				this.activeItem++
+			} else if (this.activeUpOrDown < 0 && this.activeItem > 0) {
+				this.activeItem--
+			}
+			this.$emit('active-item')
+		}
+	}
+}
+</script>

src/styles/index.scss

@@ -11,6 +11,7 @@
 @import '../lib/Room/RoomFiles/RoomFiles';
 @import '../lib/Room/RoomFile/RoomFile';
 @import '../lib/Room/RoomUsersTag/RoomUsersTag';
+@import '../lib/Room/RoomTemplatesText/RoomTemplatesText';
 
 @import '../lib/RoomsList/RoomsList';
 @import '../lib/RoomsList/RoomContent/RoomContent';