mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-11 20:05:19 +00:00
refac
This commit is contained in:
parent
821243ef40
commit
d04d0c0510
3 changed files with 55 additions and 39 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue