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

feat: reading indicator

Browse source
This commit is contained in:
Timothy J. Baek 2024-01-07 03:19:34 -08:00
parent 6271ee64ab
commit 9083ee8a5d
3 changed files with 58 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/lib/components/chat/Messages.svelte
View file

@ -10,11 +10,13 @@
import UserMessage from './Messages/UserMessage.svelte';
import ResponseMessage from './Messages/ResponseMessage.svelte';
import Placeholder from './Messages/Placeholder.svelte';
import Spinner from '../common/Spinner.svelte';
export let chatId = '';
export let sendPrompt: Function;
export let regenerateResponse: Function;
export let processing = '';
export let bottomPadding = false;
export let autoScroll;
export let selectedModels;
@ -218,7 +220,7 @@
{#key chatId}
{#each messages as message, messageIdx}
<div class=" w-full">
<div class="flex justify-between px-5 mb-3 max-w-3xl mx-auto rounded-lg group">
<div class="flex flex-col justify-between px-5 mb-3 max-w-3xl mx-auto rounded-lg group">
{#if message.role === 'user'}
<UserMessage
user={$user}
@ -233,6 +235,52 @@
{showNextMessage}
{copyToClipboard}
/>
{#if processing !== ''}
<div class="flex my-2.5 ml-12 items-center w-fit space-x-2.5">
<div class=" dark:text-blue-100">
<svg
class=" w-4 h-4 translate-y-[0.5px]"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
><style>
.spinner_qM83 {
animation: spinner_8HQG 1.05s infinite;
}
.spinner_oXPr {
animation-delay: 0.1s;
}
.spinner_ZTLf {
animation-delay: 0.2s;
}
@keyframes spinner_8HQG {
0%,
57.14% {
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
transform: translate(0);
}
28.57% {
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
transform: translateY(-6px);
}
100% {
transform: translate(0);
}
}
</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle
class="spinner_qM83 spinner_oXPr"
cx="12"
cy="12"
r="2.5"
/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg
>
</div>
<div class=" text-sm font-medium">
{processing}
</div>
</div>
{/if}
{:else}
<ResponseMessage
{message}

4
src/routes/(app)/+page.svelte
View file

@ -22,6 +22,7 @@
let stopResponseFlag = false;
let autoScroll = true;
let processing = '';
let selectedModels = [''];
@ -192,6 +193,7 @@
console.log(docs);
if (docs.length > 0) {
processing = 'Reading';
const query = history.messages[parentId].content;
let relevantContexts = await Promise.all(
@ -215,6 +217,7 @@
history.messages[parentId].raContent = RAGTemplate(contextString, query);
history.messages[parentId].contexts = relevantContexts;
await tick();
processing = '';
}
await Promise.all(
@ -660,6 +663,7 @@
chatId={$chatId}
{selectedModels}
{selectedModelfiles}
{processing}
bind:history
bind:messages
bind:autoScroll

5
src/routes/(app)/c/[id]/+page.svelte
View file

@ -21,8 +21,10 @@
import { RAGTemplate } from '$lib/utils/rag';
let loaded = false;
let stopResponseFlag = false;
let autoScroll = true;
let processing = '';
// let chatId = $page.params.id;
let selectedModels = [''];
@ -210,6 +212,7 @@
console.log(docs);
if (docs.length > 0) {
processing = 'Reading';
const query = history.messages[parentId].content;
let relevantContexts = await Promise.all(
@ -233,6 +236,7 @@
history.messages[parentId].raContent = RAGTemplate(contextString, query);
history.messages[parentId].contexts = relevantContexts;
await tick();
processing = '';
}
await Promise.all(
@ -685,6 +689,7 @@
chatId={$chatId}
{selectedModels}
{selectedModelfiles}
{processing}
bind:history
bind:messages
bind:autoScroll