fix: better variable names

This commit is contained in:
Carlos Daniel Vilaseca 2024-03-03 17:40:18 -05:00
parent 0def6f8724
commit 50acdb09de
3 changed files with 18 additions and 18 deletions

View file

@ -40,7 +40,7 @@
let edit = false; let edit = false;
let editedContent = ''; let editedContent = '';
let editElement: HTMLTextAreaElement; let editTextAreaElement: HTMLTextAreaElement;
let tooltipInstance = null; let tooltipInstance = null;
let sentencesAudio = {}; let sentencesAudio = {};
@ -248,8 +248,8 @@
await tick(); await tick();
editElement.style.height = ''; editTextAreaElement.style.height = '';
editElement.style.height = `${editElement.scrollHeight}px`; editTextAreaElement.style.height = `${editTextAreaElement.scrollHeight}px`;
}; };
const editMessageConfirmHandler = async () => { const editMessageConfirmHandler = async () => {
@ -340,7 +340,7 @@
<div class=" w-full"> <div class=" w-full">
<textarea <textarea
id="message-edit-{message.id}" id="message-edit-{message.id}"
bind:this={editElement} bind:this={editTextAreaElement}
class=" bg-transparent outline-none w-full resize-none" class=" bg-transparent outline-none w-full resize-none"
bind:value={editedContent} bind:value={editedContent}
on:input={(e) => { on:input={(e) => {

View file

@ -20,17 +20,17 @@
let edit = false; let edit = false;
let editedContent = ''; let editedContent = '';
let messageEditTextArea: HTMLTextAreaElement; let messageEditTextAreaElement: HTMLTextAreaElement;
const editMessageHandler = async () => { const editMessageHandler = async () => {
edit = true; edit = true;
editedContent = message.content; editedContent = message.content;
await tick(); await tick();
messageEditTextArea.style.height = ''; messageEditTextAreaElement.style.height = '';
messageEditTextArea.style.height = `${messageEditTextArea.scrollHeight}px`; messageEditTextAreaElement.style.height = `${messageEditTextAreaElement.scrollHeight}px`;
messageEditTextArea?.focus(); messageEditTextAreaElement?.focus();
}; };
const editMessageConfirmHandler = async () => { const editMessageConfirmHandler = async () => {
@ -164,11 +164,11 @@
<div class=" w-full"> <div class=" w-full">
<textarea <textarea
id="message-edit-{message.id}" id="message-edit-{message.id}"
bind:this={messageEditTextArea} bind:this={messageEditTextAreaElement}
class=" bg-transparent outline-none w-full resize-none" class=" bg-transparent outline-none w-full resize-none"
bind:value={editedContent} bind:value={editedContent}
on:input={(e) => { on:input={(e) => {
messageEditTextArea.style.height = `${messageEditTextArea.scrollHeight}px`; messageEditTextAreaElement.style.height = `${messageEditTextAreaElement.scrollHeight}px`;
}} }}
/> />

View file

@ -2,11 +2,11 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let messages = []; export let messages = [];
let textareaElement: HTMLTextAreaElement; let textAreaElement: HTMLTextAreaElement;
onMount(() => { onMount(() => {
messages.forEach((message, idx) => { messages.forEach((message, idx) => {
textareaElement.style.height = ''; textAreaElement.style.height = '';
textareaElement.style.height = textareaElement.scrollHeight + 'px'; textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}); });
}); });
</script> </script>
@ -26,17 +26,17 @@
<div class="flex-1"> <div class="flex-1">
<textarea <textarea
id="{message.role}-{idx}-textarea" id="{message.role}-{idx}-textarea"
bind:this={textareaElement} bind:this={textAreaElement}
class="w-full bg-transparent outline-none rounded-lg p-2 text-sm resize-none overflow-hidden" class="w-full bg-transparent outline-none rounded-lg p-2 text-sm resize-none overflow-hidden"
placeholder="Enter {message.role === 'user' ? 'a user' : 'an assistant'} message here" placeholder="Enter {message.role === 'user' ? 'a user' : 'an assistant'} message here"
rows="1" rows="1"
on:input={(e) => { on:input={(e) => {
textareaElement.style.height = ''; textAreaElement.style.height = '';
textareaElement.style.height = textareaElement.scrollHeight + 'px'; textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}} }}
on:focus={(e) => { on:focus={(e) => {
textareaElement.style.height = ''; textAreaElement.style.height = '';
textareaElement.style.height = textareaElement.scrollHeight + 'px'; textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px'; // e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
}} }}