This commit is contained in:
Timothy Jaeryang Baek 2025-07-07 19:47:32 +04:00
parent 821243ef40
commit d04d0c0510
3 changed files with 55 additions and 39 deletions

View file

@ -64,6 +64,19 @@
return;
}
let responseMessage;
if (messages.at(-1)?.role === 'assistant') {
responseMessage = messages.at(-1);
} else {
responseMessage = {
role: 'assistant',
content: '',
done: false
};
messages.push(responseMessage);
messages = messages;
}
const [res, controller] = await chatCompletion(
localStorage.token,
{
@ -82,18 +95,6 @@
`${WEBUI_BASE_URL}/api`
);
let responseMessage;
if (messages.at(-1)?.role === 'assistant') {
responseMessage = messages.at(-1);
} else {
responseMessage = {
role: 'assistant',
content: ''
};
messages.push(responseMessage);
messages = messages;
}
await tick();
const textareaElement = document.getElementById(`assistant-${messages.length - 1}-textarea`);
@ -128,12 +129,16 @@
if (responseMessage.content == '' && data.choices[0].delta.content == '\n') {
continue;
} else {
textareaElement.style.height = textareaElement.scrollHeight + 'px';
if (textareaElement) {
textareaElement.style.height = textareaElement.scrollHeight + 'px';
}
responseMessage.content += data.choices[0].delta.content ?? '';
messages = messages;
textareaElement.style.height = textareaElement.scrollHeight + 'px';
if (textareaElement) {
textareaElement.style.height = textareaElement.scrollHeight + 'px';
}
await tick();
}
@ -163,9 +168,9 @@
loading = true;
await chatCompletionHandler();
messages = messages.filter((message) => {
return message.content !== '';
messages = messages.map((message) => {
message.done = true;
return message;
});
loading = false;

View file

@ -3,6 +3,8 @@
const i18n = getContext('i18n');
import Skeleton from '$lib/components/chat/Messages/Skeleton.svelte';
export let message;
export let idx;
@ -11,8 +13,10 @@
let textAreaElement: HTMLTextAreaElement;
onMount(() => {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
if (textAreaElement) {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}
});
</script>
@ -50,25 +54,32 @@
<div class="flex-1">
<!-- $i18n.t('a user') -->
<!-- $i18n.t('an assistant') -->
<textarea
id="{message.role}-{idx}-textarea"
bind:this={textAreaElement}
class="w-full bg-transparent outline-hidden rounded-lg px-2 text-sm resize-none overflow-hidden"
placeholder={$i18n.t(`Enter {{role}} message here`, {
role: message.role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
})}
rows="1"
on:input={(e) => {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}}
on:focus={(e) => {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
}}
bind:value={message.content}
/>
{#if !(message?.done ?? true) && message?.content === ''}
<div class="px-2">
<Skeleton size="sm" />
</div>
{:else}
<textarea
id="{message.role}-{idx}-textarea"
bind:this={textAreaElement}
class="w-full bg-transparent outline-hidden rounded-lg px-2 text-sm resize-none overflow-hidden"
placeholder={$i18n.t(`Enter {{role}} message here`, {
role: message.role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
})}
rows="1"
on:input={(e) => {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}}
on:focus={(e) => {
textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
// e.target.style.height = Math.min(e.target.scrollHeight, 200) + 'px';
}}
bind:value={message.content}
/>
{/if}
</div>
</div>

View file

@ -7,7 +7,7 @@
export let messages = [];
</script>
<div class="space-y-3">
<div class="space-y-3 pb-20">
{#each messages as message, idx}
<Message
{message}