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

View file

@ -3,6 +3,8 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import Skeleton from '$lib/components/chat/Messages/Skeleton.svelte';
export let message; export let message;
export let idx; export let idx;
@ -11,8 +13,10 @@
let textAreaElement: HTMLTextAreaElement; let textAreaElement: HTMLTextAreaElement;
onMount(() => { onMount(() => {
textAreaElement.style.height = ''; if (textAreaElement) {
textAreaElement.style.height = textAreaElement.scrollHeight + 'px'; textAreaElement.style.height = '';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}
}); });
</script> </script>
@ -50,25 +54,32 @@
<div class="flex-1"> <div class="flex-1">
<!-- $i18n.t('a user') --> <!-- $i18n.t('a user') -->
<!-- $i18n.t('an assistant') --> <!-- $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'; {#if !(message?.done ?? true) && message?.content === ''}
}} <div class="px-2">
bind:value={message.content} <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>
</div> </div>

View file

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