mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-31 02:57:57 +00:00
5bc8219db5
* Adds typing indicator for widget * typing indicator for agents in dashboard Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
56 lines
1.1 KiB
Vue
Executable File
56 lines
1.1 KiB
Vue
Executable File
<template>
|
|
<resizable-textarea>
|
|
<textarea
|
|
class="form-input user-message-input"
|
|
:placeholder="placeholder"
|
|
:value="value"
|
|
@input="$emit('input', $event.target.value)"
|
|
@focus="onFocus"
|
|
@blur="onBlur"
|
|
/>
|
|
</resizable-textarea>
|
|
</template>
|
|
|
|
<script>
|
|
import ResizableTextarea from 'widget/components/ResizableTextarea.vue';
|
|
|
|
export default {
|
|
components: {
|
|
ResizableTextarea,
|
|
},
|
|
props: {
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
methods: {
|
|
onBlur() {
|
|
this.toggleTyping('off');
|
|
},
|
|
onFocus() {
|
|
this.toggleTyping('on');
|
|
},
|
|
toggleTyping(typingStatus) {
|
|
this.$store.dispatch('conversation/toggleUserTyping', { typingStatus });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped lang="scss">
|
|
@import '~widget/assets/scss/variables.scss';
|
|
|
|
.user-message-input {
|
|
border: 0;
|
|
height: $space-large;
|
|
resize: none;
|
|
padding-top: $space-small;
|
|
}
|
|
</style>
|