How can I increase the chat input field to upper when there is multiline? here are my code. is there any class or method that can increase the textarea height with line increases to a max height 500px and .chat-footer will be increase accordingly
<div v-if="activeChat.is_conversation_accepted" class="px-1">
<div class="mb-1 chat-footer relative flex h-12 w-full shrink-0 items-center justify-between border-t border-slate-150 bg-white px-[calc(var(--margin-x)-.25rem)] transition-[padding,width] duration-[.25s] dark:border-navy-600 dark:bg-navy-800">
<div @click.stop="showEmojiPicker = false" class="flex flex-1 -ml-1.5 space-x-2">
<!-- Attach File Button -->
<button @click="$refs.fileInput.click()" class="p-0 w-9 h-9 rounded-full btn shrink-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
</svg>
</button>
<!-- File Input -->
<input type="file" accept=".jpg, .jpeg, .webp, .svg, .png, .gif, .pdf, .docx, .xlsx, .pptx, .mp4, .mp3, .wav, .txt" style="display: none" ref="fileInput" @change="handleFileChange" />
<!-- Image Preview or File Attachment -->
<div v-if="imagePreviewURL || isFileAttachment" class="relative">
<button @click="closeImagePreview" class="absolute top-1 right-1 p-1 bg-primary rounded-full text-white hover:bg-error/20 z-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div v-if="isFileAttachment" class="flex items-center max-h-10 py-1">
<div class="flex justify-center items-center w-8 h-8 text-white mask is-squircle bg-success z-0">
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
</div>
<img v-else :src="imagePreviewURL" alt="Image Preview" class="max-h-10 py-1 z-0" />
</div>
<!-- Textarea for Editing or Writing Messages -->
<textarea
v-if="isEditing"
class="w-full h-9 bg-transparent chat-input-area form-input placeholder:text-slate-400/70"
placeholder="Write the messages.."
:value="editedContent"
@input="editedContent = $event.target.value"
@keyup.enter="submitEdit"
@keyup.esc="cancelEdit"
style="white-space: pre-wrap;"
></textarea>
<textarea
v-else
class="w-full h-9 bg-transparent chat-input-area form-input placeholder:text-slate-400/70"
placeholder="Write the messages.."
v-model="messageInput"
@keyup.enter="sendMessageOnEnter"
@input="handleInput"
></textarea>
</div>
<!-- Emoji Picker and Send Button -->
<div class="flex -mr-1.5 relative">
<div class="flex">
<button @click="toggleEmojiPicker" class="p-0 w-9 h-9 rounded-full btn shrink-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<div v-show="showEmojiPicker" x-show="showEmojiPicker" class="popover absolute z-20 w-100 p-3 bg-white rounded-lg transform -translate-x-full bottom-9 right-full">
<EmojiPicker :native="true" display-recent mode="insert" @select="handleEmojiClick" />
</div>
</div>
<button @click.stop="isEditing ? submitEdit() : sendMessage()" class="p-0 w-9 h-9 rounded-full btn shrink-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m9.813 5.146 9.027 3.99c4.05 1.79 4.05 4.718 0 6.508l-9.027 3.99c-6.074 2.686-8.553.485-5.515-4.876l.917-1.613c.232-.41.232-1.09 0-1.5l-.917-1.623C1.26 4.66 3.749 2.46 9.813 5.146ZM6.094 12.389h7.341" />
</svg>
</button>
</div>
</div>
</div>
I have tried dynamically update the height by picking it's style through ref but not worked.
methods: {
adjustChatInputHeight() {
const chatInput = document.getElementById('chatInput');
if (chatInput) {
chatInput.style.height = 'auto'; // Reset the height to auto
chatInput.style.height = chatInput.scrollHeight + 'px'; // Set the height to the content height
}
},
},
watch: {
editedContent() {
this.adjustChatInputHeight(); // Call the method whenever the content changes
}
}```
<textarea
v-else
class="w-full pt-3 bg-transparent chat-input-area form-input placeholder:text-slate-400/70"
placeholder="Write the messages.."
v-model="messageInput"
style="height: 450px!important;"
@keyup.enter="sendMessageOnEnter"
@input="handleInput"
:style="{'height': (messageInput.split('\n').length * 1.5) + 'rem', 'max-height': '15rem','min-height': '2.8rem'}"
spellcheck="false"
></textarea>