UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-04-26 17:20:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy J. Baek 2024-09-23 23:20:27 +02:00
parent ba39f9bf56
commit 84c1810b6e
5 changed files with 244 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/chat/Messages.svelte
View File

@ -333,7 +333,7 @@
{#each messages as message, messageIdx (message.id)} {#each messages as message, messageIdx (message.id)}
<Message <Message
{chatId} {chatId}
{history} bind:history
messageId={message.id} messageId={message.id}
idx={messageIdx} idx={messageIdx}
{user} {user}
@ -344,6 +344,20 @@
{rateMessage} {rateMessage}
{regenerateResponse} {regenerateResponse}
{continueResponse} {continueResponse}
{mergeResponses}
{updateChatHistory}
{chatActionHandler}
{readOnly}
on:scroll={() => {
if (autoScroll) {
const element = document.getElementById('messages-container');
autoScroll =
element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
}
}}
/> />
{/each} {/each}
</div> </div>

84
src/lib/components/chat/Messages/Message.svelte
View File

@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { tick, getContext, onMount } from 'svelte'; import { tick, getContext, onMount, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import { settings } from '$lib/stores'; import { settings } from '$lib/stores';
@ -20,7 +21,7 @@
export let user; export let user;
export let scrollToBottom; export let updateChatHistory;
export let chatActionHandler; export let chatActionHandler;
export let showPreviousMessage; export let showPreviousMessage;
@ -36,22 +37,9 @@
// MultiResponseMessages // MultiResponseMessages
export let mergeResponses; export let mergeResponses;
export let autoScroll = false;
export let readOnly = false; export let readOnly = false;
let message = JSON.parse(JSON.stringify(history.messages[messageId]));
$: if (history.messages) {
if (JSON.stringify(message) !== JSON.stringify(history.messages[messageId])) {
message = JSON.parse(JSON.stringify(history.messages[messageId]));
}
}
const copyToClipboardWithToast = async (text) => {
const res = await copyToClipboard(text);
if (res) {
toast.success($i18n.t('Copying to clipboard was successful!'));
}
};
onMount(() => { onMount(() => {
console.log('message', idx); console.log('message', idx);
}); });
@ -62,28 +50,30 @@
? 'max-w-full' ? 'max-w-full'
: 'max-w-5xl'} mx-auto rounded-lg group" : 'max-w-5xl'} mx-auto rounded-lg group"
> >
{#if message} {#if history.messages[messageId]}
{#if message.role === 'user'} {#if history.messages[messageId].role === 'user'}
<UserMessage <UserMessage
{user} {user}
{message} {history}
{messageId}
isFirstMessage={idx === 0} isFirstMessage={idx === 0}
siblings={message.parentId !== null siblings={history.messages[messageId].parentId !== null
? (history.messages[message.parentId]?.childrenIds ?? []) ? (history.messages[history.messages[messageId].parentId]?.childrenIds ?? [])
: (Object.values(history.messages) : (Object.values(history.messages)
.filter((message) => message.parentId === null) .filter((message) => message.parentId === null)
.map((message) => message.id) ?? [])} .map((message) => message.id) ?? [])}
{showPreviousMessage} {showPreviousMessage}
{showNextMessage} {showNextMessage}
{editMessage} {editMessage}
on:delete={() => deleteMessage(message.id)} on:delete={() => deleteMessage(messageId)}
{readOnly} {readOnly}
/> />
{:else if (history.messages[message.parentId]?.models?.length ?? 1) === 1} {:else if (history.messages[history.messages[messageId].parentId]?.models?.length ?? 1) === 1}
<ResponseMessage <ResponseMessage
{message} {history}
{messageId}
isLastMessage={messageId === history.currentId} isLastMessage={messageId === history.currentId}
siblings={history.messages[message.parentId]?.childrenIds ?? []} siblings={history.messages[history.messages[messageId].parentId]?.childrenIds ?? []}
{showPreviousMessage} {showPreviousMessage}
{showNextMessage} {showNextMessage}
{editMessage} {editMessage}
@ -92,6 +82,7 @@
{regenerateResponse} {regenerateResponse}
on:action={async (e) => { on:action={async (e) => {
console.log('action', e); console.log('action', e);
const message = history.messages[messageId];
if (typeof e.detail === 'string') { if (typeof e.detail === 'string') {
await chatActionHandler(chatId, e.detail, message.model, message.id); await chatActionHandler(chatId, e.detail, message.model, message.id);
} else { } else {
@ -101,7 +92,7 @@
}} }}
on:update={async (e) => { on:update={async (e) => {
console.log('update', e); console.log('update', e);
// call updateChatHistory updateChatHistory();
}} }}
on:save={async (e) => { on:save={async (e) => {
console.log('save', e); console.log('save', e);
@ -124,18 +115,16 @@
<MultiResponseMessages <MultiResponseMessages
bind:history bind:history
{chatId} {chatId}
messageIds={[]} {messageId}
parentMessage={history.messages[message.parentId]} isLastMessage={messageId === history?.currentId}
isLastMessage={messageId === history.currentId}
{editMessage}
{rateMessage} {rateMessage}
{editMessage}
{continueResponse} {continueResponse}
{mergeResponses}
{regenerateResponse} {regenerateResponse}
copyToClipboard={copyToClipboardWithToast} {mergeResponses}
{readOnly}
on:action={async (e) => { on:action={async (e) => {
console.log('action', e); console.log('action', e);
const message = history.messages[messageId];
if (typeof e.detail === 'string') { if (typeof e.detail === 'string') {
await chatActionHandler(chatId, e.detail, message.model, message.id); await chatActionHandler(chatId, e.detail, message.model, message.id);
} else { } else {
@ -143,19 +132,34 @@
await chatActionHandler(chatId, id, message.model, message.id, event); await chatActionHandler(chatId, id, message.model, message.id, event);
} }
}} }}
on:update={async (e) => {
console.log('update', e);
updateChatHistory();
}}
on:save={async (e) => {
console.log('save', e);
const message = e.detail;
if (message) {
history.messages[message.id] = message;
await updateChatById(localStorage.token, chatId, {
history: history
});
} else {
await updateChatById(localStorage.token, chatId, {
history: history
});
}
}}
on:change={async () => { on:change={async () => {
await tick();
await updateChatById(localStorage.token, chatId, { await updateChatById(localStorage.token, chatId, {
history: history history: history
}); });
if (autoScroll) { dispatch('scroll');
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
}
}} }}
{readOnly}
/> />
{/if} {/if}
{/if} {/if}

319
src/lib/components/chat/Messages/MultiResponseMessages.svelte
View File

@ -20,40 +20,36 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
export let chatId; export let chatId;
export let history; export let history;
export let messageIdx; export let messageId;
export let parentMessage;
export let isLastMessage; export let isLastMessage;
export let readOnly = false; export let readOnly = false;
export let updateChatMessages: Function; export let editMessage: Function;
export let confirmEditResponseMessage: Function;
export let rateMessage: Function; export let rateMessage: Function;
export let copyToClipboard: Function;
export let continueResponse: Function; export let continueResponse: Function;
export let mergeResponses: Function;
export let regenerateResponse: Function; export let regenerateResponse: Function;
export let saveNewResponseMessage: Function; export let mergeResponses: Function;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let currentMessageId; let currentMessageId;
let groupedMessages = {}; let parentMessage;
let groupedMessagesIdx = {}; let groupedMessageIds = {};
let groupedMessageIdsIdx = {};
let message = JSON.parse(JSON.stringify(history.messages[messageId]));
$: if (history.messages) { $: if (history.messages) {
console.log('history.messages', history.messages); if (JSON.stringify(message) !== JSON.stringify(history.messages[messageId])) {
message = JSON.parse(JSON.stringify(history.messages[messageId]));
initHandler(); }
} }
const showPreviousMessage = (modelIdx) => { const showPreviousMessage = (modelIdx) => {
groupedMessagesIdx[modelIdx] = Math.max(0, groupedMessagesIdx[modelIdx] - 1); groupedMessageIdsIdx[modelIdx] = Math.max(0, groupedMessageIdsIdx[modelIdx] - 1);
let messageId = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]].id; let messageId = groupedMessageIds[modelIdx].messages[groupedMessageIdsIdx[modelIdx]].id;
console.log(messageId); console.log(messageId);
let messageChildrenIds = history.messages[messageId].childrenIds; let messageChildrenIds = history.messages[messageId].childrenIds;
@ -68,12 +64,12 @@
}; };
const showNextMessage = (modelIdx) => { const showNextMessage = (modelIdx) => {
groupedMessagesIdx[modelIdx] = Math.min( groupedMessageIdsIdx[modelIdx] = Math.min(
groupedMessages[modelIdx].messages.length - 1, groupedMessageIds[modelIdx].messages.length - 1,
groupedMessagesIdx[modelIdx] + 1 groupedMessageIdsIdx[modelIdx] + 1
); );
let messageId = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]].id; let messageId = groupedMessageIds[modelIdx].messages[groupedMessageIdsIdx[modelIdx]].id;
console.log(messageId); console.log(messageId);
let messageChildrenIds = history.messages[messageId].childrenIds; let messageChildrenIds = history.messages[messageId].childrenIds;
@ -90,32 +86,41 @@
const initHandler = async () => { const initHandler = async () => {
console.log('multiresponse:initHandler'); console.log('multiresponse:initHandler');
await tick(); await tick();
currentMessageId = messages[messageIdx].id;
groupedMessages = parentMessage?.models.reduce((a, model, modelIdx) => { currentMessageId = messageId;
parentMessage = history.messages[messageId].parentId
? history.messages[history.messages[messageId].parentId]
: null;
groupedMessageIds = parentMessage?.models.reduce((a, model, modelIdx) => {
// Find all messages that are children of the parent message and have the same model // Find all messages that are children of the parent message and have the same model
let modelMessages = parentMessage?.childrenIds let modelMessageIds = parentMessage?.childrenIds
.map((id) => history.messages[id]) .map((id) => history.messages[id])
.filter((m) => m?.modelIdx === modelIdx); .filter((m) => m?.modelIdx === modelIdx)
.map((m) => m.id);
if (modelMessages.length === 0) { // Legacy support for messages that don't have a modelIdx
modelMessages = parentMessage?.childrenIds // Find all messages that are children of the parent message and have the same model
if (modelMessageIds.length === 0) {
let modelMessages = parentMessage?.childrenIds
.map((id) => history.messages[id]) .map((id) => history.messages[id])
.filter((m) => m?.model === model); .filter((m) => m?.model === model);
modelMessages.forEach((m) => { modelMessages.forEach((m) => {
m.modelIdx = modelIdx; m.modelIdx = modelIdx;
}); });
modelMessageIds = modelMessages.map((m) => m.id);
} }
return { return {
...a, ...a,
[modelIdx]: { messages: modelMessages } [modelIdx]: { messageIds: modelMessageIds }
}; };
}, {}); }, {});
groupedMessagesIdx = parentMessage?.models.reduce((a, model, modelIdx) => { groupedMessageIdsIdx = parentMessage?.models.reduce((a, model, modelIdx) => {
const idx = groupedMessages[modelIdx].messages.findIndex((m) => m.id === currentMessageId); const idx = groupedMessageIds[modelIdx].messageIds.findIndex((id) => id === messageId);
if (idx !== -1) { if (idx !== -1) {
return { return {
...a, ...a,
@ -128,14 +133,19 @@
}; };
} }
}, {}); }, {});
console.log(groupedMessageIds, groupedMessageIdsIdx);
await tick();
}; };
const mergeResponsesHandler = async () => { const mergeResponsesHandler = async () => {
const responses = Object.keys(groupedMessages).map((modelIdx) => { const responses = Object.keys(groupedMessageIds).map((modelIdx) => {
const { messages } = groupedMessages[modelIdx]; const { messageIds } = groupedMessageIds[modelIdx];
return messages[groupedMessagesIdx[modelIdx]].content;
return messages[groupedMessageIdsIdx[modelIdx]].content;
}); });
mergeResponses(currentMessageId, responses, chatId); mergeResponses(messageId, responses, chatId);
}; };
onMount(async () => { onMount(async () => {
@ -143,134 +153,129 @@
}); });
</script> </script>
<div> {#if parentMessage}
<div <div>
class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden" <div
id="responses-container-{chatId}-{parentMessage.id}" class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
> id="responses-container-{chatId}-{parentMessage.id}"
{#each Object.keys(groupedMessages) as modelIdx} >
{#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0} {#each Object.keys(groupedMessageIds) as modelIdx}
<!-- svelte-ignore a11y-no-static-element-interactions --> {#if groupedMessageIdsIdx[modelIdx] !== undefined && groupedMessageIds[modelIdx].messageIds.length > 0}
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-no-static-element-interactions -->
{@const message = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]} <!-- svelte-ignore a11y-click-events-have-key-events -->
{@const _messageId =
groupedMessageIds[modelIdx].messageIds[groupedMessageIdsIdx[modelIdx]]}
<div <div
class=" snap-center w-full max-w-full m-1 border {history.messages[currentMessageId] class=" snap-center w-full max-w-full m-1 border {history.messages[messageId]
?.modelIdx == modelIdx ?.modelIdx == modelIdx
? `border-gray-100 dark:border-gray-800 border-[1.5px] ${ ? `border-gray-100 dark:border-gray-800 border-[1.5px] ${
$mobile ? 'min-w-full' : 'min-w-[32rem]' $mobile ? 'min-w-full' : 'min-w-[32rem]'
}` }`
: `border-gray-50 dark:border-gray-850 border-dashed ${ : `border-gray-50 dark:border-gray-850 border-dashed ${
$mobile ? 'min-w-full' : 'min-w-80' $mobile ? 'min-w-full' : 'min-w-80'
}`} transition-all p-5 rounded-2xl" }`} transition-all p-5 rounded-2xl"
on:click={() => { on:click={() => {
if (currentMessageId != message.id) { if (messageId != _messageId) {
currentMessageId = message.id; let messageChildrenIds = history.messages[_messageId].childrenIds;
let messageId = message.id; while (messageChildrenIds.length !== 0) {
console.log(messageId); messageId = messageChildrenIds.at(-1);
// messageChildrenIds = history.messages[_messageId].childrenIds;
let messageChildrenIds = history.messages[messageId].childrenIds; }
while (messageChildrenIds.length !== 0) { history.currentId = _messageId;
messageId = messageChildrenIds.at(-1); dispatch('change');
messageChildrenIds = history.messages[messageId].childrenIds;
} }
history.currentId = messageId; }}
dispatch('change'); >
} {#key history.currentId}
}} {#if message}
> <ResponseMessage
{#key history.currentId} {history}
{#if message} messageId={_messageId}
<ResponseMessage isLastMessage={true}
{message} siblings={groupedMessageIds[modelIdx].messageIds}
siblings={groupedMessages[modelIdx].messages.map((m) => m.id)} showPreviousMessage={() => showPreviousMessage(modelIdx)}
isLastMessage={true} showNextMessage={() => showNextMessage(modelIdx)}
{updateChatMessages} {rateMessage}
{saveNewResponseMessage} {editMessage}
{confirmEditResponseMessage} {continueResponse}
showPreviousMessage={() => showPreviousMessage(modelIdx)} regenerateResponse={async (message) => {
showNextMessage={() => showNextMessage(modelIdx)} regenerateResponse(message);
{readOnly} await tick();
{rateMessage} groupedMessageIdsIdx[modelIdx] =
{copyToClipboard} groupedMessageIds[modelIdx].messageIds.length - 1;
{continueResponse} }}
regenerateResponse={async (message) => { on:action={async (e) => {
regenerateResponse(message); dispatch('action', e.detail);
await tick(); }}
groupedMessagesIdx[modelIdx] = groupedMessages[modelIdx].messages.length - 1; on:update={async (e) => {
}} dispatch('update', e.detail);
on:action={async (e) => { }}
dispatch('action', e.detail); on:save={async (e) => {
}} dispatch('save', e.detail);
on:save={async (e) => { }}
console.log('save', e); {readOnly}
/>
{/if}
{/key}
</div>
{/if}
{/each}
</div>
const message = e.detail; {#if !readOnly && isLastMessage}
history.messages[message.id] = message; {#if !Object.keys(groupedMessageIds).find((modelIdx) => {
await updateChatById(localStorage.token, chatId, { const { messageIds } = groupedMessageIds[modelIdx];
messages: messages, const _messageId = messageIds[groupedMessageIdsIdx[modelIdx]];
history: history return !history.messages[_messageId]?.done ?? false;
}); })}
}} <div class="flex justify-end">
/> <div class="w-full">
{#if history.messages[messageId]?.merged?.status}
{@const message = history.messages[messageId]?.merged}
<div class="w-full rounded-xl pl-5 pr-2 py-2">
<Name>
Merged Response
{#if message.timestamp}
<span
class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
>
{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
</span>
{/if}
</Name>
<div class="mt-1 markdown-prose w-full min-w-full">
{#if (message?.content ?? '') === ''}
<Skeleton />
{:else}
<Markdown id={`merged`} content={message.content ?? ''} />
{/if}
</div>
</div>
{/if} {/if}
{/key} </div>
<div class=" flex-shrink-0 text-gray-600 dark:text-gray-500 mt-1">
<Tooltip content={$i18n.t('Merge Responses')} placement="bottom">
<button
type="button"
id="merge-response-button"
class="{true
? 'visible'
: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
on:click={() => {
mergeResponsesHandler();
}}
>
<Merge className=" size-5 " />
</button>
</Tooltip>
</div>
</div> </div>
{/if} {/if}
{/each}
</div>
{#if !readOnly && isLastMessage}
{#if !Object.keys(groupedMessages).find((modelIdx) => {
const { messages } = groupedMessages[modelIdx];
return !messages[groupedMessagesIdx[modelIdx]]?.done ?? false;
})}
<div class="flex justify-end">
<div class="w-full">
{#if history.messages[currentMessageId]?.merged?.status}
{@const message = history.messages[currentMessageId]?.merged}
<div class="w-full rounded-xl pl-5 pr-2 py-2">
<Name>
Merged Response
{#if message.timestamp}
<span
class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
>
{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
</span>
{/if}
</Name>
<div class="mt-1 markdown-prose w-full min-w-full">
{#if (message?.content ?? '') === ''}
<Skeleton />
{:else}
<Markdown id={`merged`} content={message.content ?? ''} />
{/if}
</div>
</div>
{/if}
</div>
<div class=" flex-shrink-0 text-gray-600 dark:text-gray-500 mt-1">
<Tooltip content={$i18n.t('Merge Responses')} placement="bottom">
<button
type="button"
id="merge-response-button"
class="{true
? 'visible'
: 'invisible group-hover:visible'} p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg dark:hover:text-white hover:text-black transition regenerate-response-button"
on:click={() => {
mergeResponsesHandler();
}}
>
<Merge className=" size-5 " />
</button>
</Tooltip>
</div>
</div>
{/if} {/if}
{/if} </div>
</div> {/if}

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

@ -77,15 +77,18 @@
annotation?: { type: string; rating: number }; annotation?: { type: string; rating: number };
} }
export let message: MessageType; export let history;
export let messageId;
let message: MessageType = JSON.parse(JSON.stringify(history.messages[messageId]));
$: if (history.messages) {
if (JSON.stringify(message) !== JSON.stringify(history.messages[messageId])) {
message = JSON.parse(JSON.stringify(history.messages[messageId]));
}
}
export let siblings; export let siblings;
export let isLastMessage = true;
export let readOnly = false;
export let saveNewResponseMessage: Function = () => {};
export let showPreviousMessage: Function; export let showPreviousMessage: Function;
export let showNextMessage: Function; export let showNextMessage: Function;
@ -95,6 +98,9 @@
export let continueResponse: Function; export let continueResponse: Function;
export let regenerateResponse: Function; export let regenerateResponse: Function;
export let isLastMessage = true;
export let readOnly = false;
let model = null; let model = null;
$: model = $models.find((m) => m.id === message.model); $: model = $models.find((m) => m.id === message.model);

15
src/lib/components/chat/Messages/UserMessage.svelte
View File

@ -20,25 +20,30 @@
const i18n = getContext('i18n'); const i18n = getContext('i18n');
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let user; export let user;
export let message;
export let history;
export let messageId;
export let siblings; export let siblings;
export let isFirstMessage: boolean;
export let showPreviousMessage: Function; export let showPreviousMessage: Function;
export let showNextMessage: Function; export let showNextMessage: Function;
export let editMessage: Function; export let editMessage: Function;
export let isFirstMessage: boolean;
export let readOnly: boolean; export let readOnly: boolean;
let edit = false; let edit = false;
let editedContent = ''; let editedContent = '';
let messageEditTextAreaElement: HTMLTextAreaElement; let messageEditTextAreaElement: HTMLTextAreaElement;
$: if (message) { let message = JSON.parse(JSON.stringify(history.messages[messageId]));
console.log('message', message); $: if (history.messages) {
if (JSON.stringify(message) !== JSON.stringify(history.messages[messageId])) {
message = JSON.parse(JSON.stringify(history.messages[messageId]));
}
} }
const copyToClipboard = async (text) => { const copyToClipboard = async (text) => {