OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: many model interaction ui

Browse Source
This commit is contained in:
Timothy J. Baek
2024-05-19 04:46:35 -07:00
parent 0ede1d1483
commit 676a4dffd0
5 changed files with 276 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/lib/components/chat/Messages/CompareMessages.svelte Normal file
View File

@@ -0,0 +1,156 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { updateChatById } from '$lib/apis/chats';
import { onMount, tick } from 'svelte';
import ResponseMessage from './ResponseMessage.svelte';
export let chatId;
export let history;
export let messages = [];
export let messageIdx;
export let parentMessage;
export let selectedModelfiles;
export let updateChatMessages: Function;
export let confirmEditResponseMessage: Function;
export let rateMessage: Function;
export let copyToClipboard: Function;
export let continueGeneration: Function;
export let regenerateResponse: Function;
const dispatch = createEventDispatcher();
let currentMessageId;
let groupedMessagesIdx = {};
let groupedMessages = {};
$: groupedMessages = parentMessage?.models.reduce((a, model) => {
const modelMessages = parentMessage?.childrenIds
.map((id) => history.messages[id])
.filter((m) => m.model === model);
return {
...a,
[model]: { messages: modelMessages }
};
}, {});
onMount(async () => {
await tick();
currentMessageId = messages[messageIdx].id;
for (const model of parentMessage?.models) {
const idx = groupedMessages[model].messages.findIndex((m) => m.id === currentMessageId);
if (idx !== -1) {
groupedMessagesIdx[model] = idx;
} else {
groupedMessagesIdx[model] = 0;
}
}
});
</script>
<div>
<div class="flex snap-x snap-mandatory overflow-x-auto scrollbar-none">
{#each Object.keys(groupedMessages) as model}
{#if groupedMessagesIdx[model] !== undefined && groupedMessages[model].messages.length > 0}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class=" snap-center min-w-96 w-full max-w-full m-1 outline outline-1 {history.messages[
currentMessageId
].model === model
? 'outline-gray-200 dark:outline-gray-700 outline-2'
: 'outline-gray-100 dark:outline-gray-850 '} transition p-6 rounded-3xl"
on:click={() => {
currentMessageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
console.log(messageId);
let messageChildrenIds = history.messages[messageId].childrenIds;
while (messageChildrenIds.length !== 0) {
messageId = messageChildrenIds.at(-1);
messageChildrenIds = history.messages[messageId].childrenIds;
}
history.currentId = messageId;
dispatch('change');
}}
>
<ResponseMessage
message={groupedMessages[model].messages[groupedMessagesIdx[model]]}
modelfiles={selectedModelfiles}
siblings={groupedMessages[model].messages.map((m) => m.id)}
isLastMessage={true}
{updateChatMessages}
{confirmEditResponseMessage}
showPreviousMessage={() => {
groupedMessagesIdx[model] = Math.max(0, groupedMessagesIdx[model] - 1);
let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
console.log(messageId);
let messageChildrenIds = history.messages[messageId].childrenIds;
while (messageChildrenIds.length !== 0) {
messageId = messageChildrenIds.at(-1);
messageChildrenIds = history.messages[messageId].childrenIds;
}
history.currentId = messageId;
dispatch('change');
}}
showNextMessage={() => {
groupedMessagesIdx[model] = Math.min(
groupedMessages[model].messages.length - 1,
groupedMessagesIdx[model] + 1
);
let messageId = groupedMessages[model].messages[groupedMessagesIdx[model]].id;
console.log(messageId);
let messageChildrenIds = history.messages[messageId].childrenIds;
while (messageChildrenIds.length !== 0) {
messageId = messageChildrenIds.at(-1);
messageChildrenIds = history.messages[messageId].childrenIds;
}
history.currentId = messageId;
dispatch('change');
}}
{rateMessage}
{copyToClipboard}
{continueGeneration}
regenerateResponse={async (model) => {
regenerateResponse(model);
await tick();
groupedMessagesIdx[model] = groupedMessages[model].messages.length - 1;
}}
on:save={async (e) => {
console.log('save', e);
const message = e.detail;
history.messages[message.id] = message;
await updateChatById(localStorage.token, chatId, {
messages: messages,
history: history
});
}}
/>
</div>
{/if}
{/each}
</div>
</div>

10
src/lib/components/chat/Messages/ResponseMessage.svelte
View File

@@ -69,7 +69,7 @@
let selectedCitation = null;
$: tokens = marked.lexer(sanitizeResponseContent(message.content));
$: tokens = marked.lexer(sanitizeResponseContent(message?.content));
const renderer = new marked.Renderer();
@@ -499,7 +499,7 @@
class=" flex justify-start overflow-x-auto buttons text-gray-600 dark:text-gray-500"
>
{#if siblings.length > 1}
<div class="flex self-center" dir="ltr">
<div class="flex self-center min-w-fit" dir="ltr">
<button
class="self-center p-1 hover:bg-black/5 dark:hover:bg-white/5 dark:hover:text-white hover:text-black rounded-md transition"
on:click={() => {
@@ -523,7 +523,7 @@
</button>
<div
class="text-sm tracking-widest font-semibold self-center dark:text-gray-100"
class="text-sm tracking-widest font-semibold self-center dark:text-gray-100 min-w-fit"
>
{siblings.indexOf(message.id) + 1}/{siblings.length}
</div>
@@ -894,7 +894,9 @@
class="{isLastMessage
? 'visible'
: 'invisible group-hover:visible'} p-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
on:click={regenerateResponse}
on:click={() => {
regenerateResponse(message.model);
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"