163 lines
3.5 KiB
Vue
Executable file
163 lines
3.5 KiB
Vue
Executable file
<template>
|
|
<div class="chat-message--input">
|
|
<resizable-text-area
|
|
v-model="userInput"
|
|
:placeholder="$t('CHAT_PLACEHOLDER')"
|
|
class="form-input user-message-input"
|
|
@typing-off="onTypingOff"
|
|
@typing-on="onTypingOn"
|
|
/>
|
|
<div class="button-wrap">
|
|
<chat-attachment-button
|
|
v-if="showAttachment"
|
|
:on-attach="onSendAttachment"
|
|
/>
|
|
<emoji-input
|
|
v-if="showEmojiPicker"
|
|
v-on-clickaway="hideEmojiPicker"
|
|
:on-click="emojiOnClick"
|
|
/>
|
|
<i
|
|
v-if="hasEmojiPickerEnabled"
|
|
class="emoji-toggle icon ion-happy-outline"
|
|
:class="{ active: showEmojiPicker }"
|
|
@click="toggleEmojiPicker()"
|
|
/>
|
|
<chat-send-button
|
|
v-if="showSendButton"
|
|
:on-click="handleButtonClick"
|
|
:color="widgetColor"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
import { mixin as clickaway } from 'vue-clickaway';
|
|
import ChatSendButton from 'widget/components/ChatSendButton.vue';
|
|
import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
|
|
import ResizableTextArea from 'shared/components/ResizableTextArea';
|
|
import EmojiInput from 'shared/components/emoji/EmojiInput';
|
|
import configMixin from '../mixins/configMixin';
|
|
|
|
export default {
|
|
name: 'ChatInputWrap',
|
|
components: {
|
|
ChatAttachmentButton,
|
|
ChatSendButton,
|
|
EmojiInput,
|
|
ResizableTextArea,
|
|
},
|
|
mixins: [clickaway, configMixin],
|
|
props: {
|
|
onSendMessage: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
onSendAttachment: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
userInput: '',
|
|
showEmojiPicker: false,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters({
|
|
widgetColor: 'appConfig/getWidgetColor',
|
|
}),
|
|
showAttachment() {
|
|
return this.hasAttachmentsEnabled && this.userInput.length === 0;
|
|
},
|
|
showSendButton() {
|
|
return this.userInput.length > 0;
|
|
},
|
|
},
|
|
|
|
destroyed() {
|
|
document.removeEventListener('keypress', this.handleEnterKeyPress);
|
|
},
|
|
mounted() {
|
|
document.addEventListener('keypress', this.handleEnterKeyPress);
|
|
},
|
|
|
|
methods: {
|
|
handleButtonClick() {
|
|
if (this.userInput && this.userInput.trim()) {
|
|
this.onSendMessage(this.userInput);
|
|
}
|
|
this.userInput = '';
|
|
},
|
|
handleEnterKeyPress(e) {
|
|
if (e.keyCode === 13 && !e.shiftKey) {
|
|
e.preventDefault();
|
|
this.handleButtonClick();
|
|
}
|
|
},
|
|
toggleEmojiPicker() {
|
|
this.showEmojiPicker = !this.showEmojiPicker;
|
|
},
|
|
hideEmojiPicker() {
|
|
if (this.showEmojiPicker) {
|
|
this.toggleEmojiPicker();
|
|
}
|
|
},
|
|
emojiOnClick(emoji) {
|
|
this.userInput = `${this.userInput}${emoji} `;
|
|
},
|
|
onTypingOff() {
|
|
this.toggleTyping('off');
|
|
},
|
|
onTypingOn() {
|
|
this.toggleTyping('on');
|
|
},
|
|
toggleTyping(typingStatus) {
|
|
this.$store.dispatch('conversation/toggleUserTyping', { typingStatus });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '~widget/assets/scss/variables.scss';
|
|
|
|
.chat-message--input {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.emoji-toggle {
|
|
font-size: $font-size-large;
|
|
color: $color-gray;
|
|
padding-right: $space-smaller;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.emoji-dialog {
|
|
right: $space-one;
|
|
}
|
|
|
|
.file-uploads {
|
|
margin-right: $space-small;
|
|
}
|
|
|
|
.button-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-message-input {
|
|
border: 0;
|
|
height: $space-large;
|
|
min-height: $space-large;
|
|
max-height: 2.4 * $space-mega;
|
|
resize: none;
|
|
padding-top: $space-small;
|
|
}
|
|
</style>
|