fix: better variable names

src/lib/components/chat/Messages/ResponseMessage.svelte

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

src/lib/components/chat/Messages/UserMessage.svelte

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

src/lib/components/playground/ChatCompletion.svelte

@@ -2,11 +2,11 @@
 	import { onMount } from 'svelte';
 
 	export let messages = [];
-	let textareaElement: HTMLTextAreaElement;
+	let textAreaElement: HTMLTextAreaElement;
 	onMount(() => {
 		messages.forEach((message, idx) => {
-			textareaElement.style.height = '';
-			textareaElement.style.height = textareaElement.scrollHeight + 'px';
+			textAreaElement.style.height = '';
+			textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
 		});
 	});
 </script>
@@ -26,17 +26,17 @@
 			<div class="flex-1">
 				<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"
 					placeholder="Enter {message.role === 'user' ? 'a user' : 'an assistant'} message here"
 					rows="1"
 					on:input={(e) => {
-						textareaElement.style.height = '';
-						textareaElement.style.height = textareaElement.scrollHeight + 'px';
+						textAreaElement.style.height = '';
+						textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
 					}}
 					on:focus={(e) => {
-						textareaElement.style.height = '';
-						textareaElement.style.height = textareaElement.scrollHeight + 'px';
+						textAreaElement.style.height = '';
+						textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
 
 						// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
 					}}