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

remove user message and response from DOM as pair

Browse source
This commit is contained in:
Danny Liu 2024-02-20 13:24:22 -08:00
parent 32c7971300
commit 60c99a44f8
2 changed files with 93 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -221,6 +221,15 @@
scrollToBottom(); scrollToBottom();
}, 100); }, 100);
}; };
const deleteMessage = async (messageId) => {
history.messages[messageId].deleted = true;
history.messages[history.messages[messageId].childrenIds[0]].deleted = true;
updateChatById(localStorage.token, chatId, {
messages: messages,
history: history
});
};
</script> </script>
{#if messages.length == 0} {#if messages.length == 0}
@ -229,90 +238,93 @@
<div class=" pb-10"> <div class=" pb-10">
{#key chatId} {#key chatId}
{#each messages as message, messageIdx} {#each messages as message, messageIdx}
<div class=" w-full"> {#if !message.deleted}
<div <div class=" w-full">
class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null <div
? 'max-w-full' class="flex flex-col justify-between px-5 mb-3 {$settings?.fullScreenMode ?? null
: 'max-w-3xl'} mx-auto rounded-lg group" ? 'max-w-full'
> : 'max-w-3xl'} mx-auto rounded-lg group"
{#if message.role === 'user'} >
<UserMessage {#if message.role === 'user'}
user={$user} <UserMessage
{message} on:delete={() => deleteMessage(message.id)}
isFirstMessage={messageIdx === 0} user={$user}
siblings={message.parentId !== null {message}
? history.messages[message.parentId]?.childrenIds ?? [] isFirstMessage={messageIdx === 0}
: Object.values(history.messages) siblings={message.parentId !== null
.filter((message) => message.parentId === null) ? history.messages[message.parentId]?.childrenIds ?? []
.map((message) => message.id) ?? []} : Object.values(history.messages)
{confirmEditMessage} .filter((message) => message.parentId === null)
{showPreviousMessage} .map((message) => message.id) ?? []}
{showNextMessage} {confirmEditMessage}
{copyToClipboard} {showPreviousMessage}
/> {showNextMessage}
{copyToClipboard}
/>
{#if messages.length - 1 === messageIdx && processing !== ''} {#if messages.length - 1 === messageIdx && processing !== ''}
<div class="flex my-2.5 ml-12 items-center w-fit space-x-2.5"> <div class="flex my-2.5 ml-12 items-center w-fit space-x-2.5">
<div class=" dark:text-blue-100"> <div class=" dark:text-blue-100">
<svg <svg
class=" w-4 h-4 translate-y-[0.5px]" class=" w-4 h-4 translate-y-[0.5px]"
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
><style> ><style>
.spinner_qM83 { .spinner_qM83 {
animation: spinner_8HQG 1.05s infinite; 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% { .spinner_oXPr {
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); animation-delay: 0.1s;
transform: translateY(-6px);
} }
100% { .spinner_ZTLf {
transform: translate(0); animation-delay: 0.2s;
} }
} @keyframes spinner_8HQG {
</style><circle class="spinner_qM83" cx="4" cy="12" r="2.5" /><circle 0%,
class="spinner_qM83 spinner_oXPr" 57.14% {
cx="12" animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
cy="12" transform: translate(0);
r="2.5" }
/><circle class="spinner_qM83 spinner_ZTLf" cx="20" cy="12" r="2.5" /></svg 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> </div>
<div class=" text-sm font-medium"> {/if}
{processing} {:else}
</div> <ResponseMessage
</div> {message}
modelfiles={selectedModelfiles}
siblings={history.messages[message.parentId]?.childrenIds ?? []}
isLastMessage={messageIdx + 1 === messages.length}
{confirmEditResponseMessage}
{showPreviousMessage}
{showNextMessage}
{rateMessage}
{copyToClipboard}
{continueGeneration}
{regenerateResponse}
/>
{/if} {/if}
{:else} </div>
<ResponseMessage
{message}
modelfiles={selectedModelfiles}
siblings={history.messages[message.parentId]?.childrenIds ?? []}
isLastMessage={messageIdx + 1 === messages.length}
{confirmEditResponseMessage}
{showPreviousMessage}
{showNextMessage}
{rateMessage}
{copyToClipboard}
{continueGeneration}
{regenerateResponse}
/>
{/if}
</div> </div>
</div> {/if}
{/each} {/each}
{#if bottomPadding} {#if bottomPadding}

8
src/lib/components/chat/Messages/UserMessage.svelte
View file

@ -1,11 +1,13 @@
<script lang="ts"> <script lang="ts">
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { tick } from 'svelte'; import { tick, createEventDispatcher } from 'svelte';
import Name from './Name.svelte'; import Name from './Name.svelte';
import ProfileImage from './ProfileImage.svelte'; import ProfileImage from './ProfileImage.svelte';
import { modelfiles, settings } from '$lib/stores'; import { modelfiles, settings } from '$lib/stores';
const dispatch = createEventDispatcher();
export let user; export let user;
export let message; export let message;
export let siblings; export let siblings;
@ -286,9 +288,7 @@
{#if !isFirstMessage} {#if !isFirstMessage}
<button <button
class="invisible group-hover:visible p-1 rounded dark:hover:text-white transition" class="invisible group-hover:visible p-1 rounded dark:hover:text-white transition"
on:click={() => { on:click={() => dispatch('delete', { messageId: message.id })}
// TODO delete message
}}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"