tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

rf: dom queries in ChatCompletion component

Browse source
This commit is contained in:
Carlos Daniel Vilaseca 2024-03-03 17:36:28 -05:00
parent 15e0f9de86
commit 0def6f8724
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/lib/components/playground/ChatCompletion.svelte
View file

@ -2,10 +2,9 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let messages = []; export let messages = [];
let textareaElement: HTMLTextAreaElement;
onMount(() => { onMount(() => {
messages.forEach((message, idx) => { messages.forEach((message, idx) => {
let textareaElement = document.getElementById(`${message.role}-${idx}-textarea`);
textareaElement.style.height = ''; textareaElement.style.height = '';
textareaElement.style.height = textareaElement.scrollHeight + 'px'; textareaElement.style.height = textareaElement.scrollHeight + 'px';
}); });
@ -27,16 +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}
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) => {
e.target.style.height = ''; textareaElement.style.height = '';
e.target.style.height = e.target.scrollHeight + 'px'; textareaElement.style.height = textareaElement.scrollHeight + 'px';
}} }}
on:focus={(e) => { on:focus={(e) => {
e.target.style.height = ''; textareaElement.style.height = '';
e.target.style.height = e.target.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';
}} }}