OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-15 02:41:30 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refac: deprecate messages for history

Browse Source
This commit is contained in:
Timothy J. Baek 2024-09-23 00:55:13 +02:00
parent 291b6dd744
commit fd5e8b4fcf
5 changed files with 326 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/lib/components/chat/Chat.svelte
View File

@ -5,6 +5,8 @@
import { PaneGroup, Pane, PaneResizer } from 'paneforge'; import { PaneGroup, Pane, PaneResizer } from 'paneforge';
import { getContext, onDestroy, onMount, tick } from 'svelte'; import { getContext, onDestroy, onMount, tick } from 'svelte';
const i18n: Writable<i18nType> = getContext('i18n');
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
@ -67,11 +69,9 @@
import Navbar from '$lib/components/layout/Navbar.svelte'; import Navbar from '$lib/components/layout/Navbar.svelte';
import ChatControls from './ChatControls.svelte'; import ChatControls from './ChatControls.svelte';
import EventConfirmDialog from '../common/ConfirmDialog.svelte'; import EventConfirmDialog from '../common/ConfirmDialog.svelte';
import EllipsisVertical from '../icons/EllipsisVertical.svelte';
const i18n: Writable<i18nType> = getContext('i18n');
export let chatIdProp = ''; export let chatIdProp = '';
let loaded = false; let loaded = false;
const eventTarget = new EventTarget(); const eventTarget = new EventTarget();
let controlPane; let controlPane;
@ -89,9 +89,10 @@
let eventConfirmationInputValue = ''; let eventConfirmationInputValue = '';
let eventCallback = null; let eventCallback = null;
let chatIdUnsubscriber: Unsubscriber | undefined;
let selectedModels = ['']; let selectedModels = [''];
let atSelectedModel: Model | undefined; let atSelectedModel: Model | undefined;
let selectedModelIds = []; let selectedModelIds = [];
$: selectedModelIds = atSelectedModel !== undefined ? [atSelectedModel.id] : selectedModels; $: selectedModelIds = atSelectedModel !== undefined ? [atSelectedModel.id] : selectedModels;
@ -102,35 +103,17 @@
let tags = []; let tags = [];
let title = ''; let title = '';
let prompt = '';
let chatFiles = [];
let files = [];
let messages = [];
let history = { let history = {
messages: {}, messages: {},
currentId: null currentId: null
}; };
// Chat Input
let prompt = '';
let chatFiles = [];
let files = [];
let params = {}; let params = {};
let chatIdUnsubscriber: Unsubscriber | undefined;
$: if (history.currentId !== null) {
let _messages = [];
let currentMessage = history.messages[history.currentId];
while (currentMessage) {
_messages.unshift({ ...currentMessage });
currentMessage =
currentMessage.parentId !== null ? history.messages[currentMessage.parentId] : null;
}
// This is most likely causing the performance issue
messages = _messages;
} else {
messages = [];
}
$: if (chatIdProp) { $: if (chatIdProp) {
(async () => { (async () => {
console.log(chatIdProp); console.log(chatIdProp);
@ -227,8 +210,6 @@
} else { } else {
console.log('Unknown message type', data); console.log('Unknown message type', data);
} }
messages = messages;
} }
}; };
@ -310,6 +291,9 @@
showOverview.set(false); showOverview.set(false);
} }
}); });
const chatInput = document.getElementById('chat-textarea');
chatInput?.focus();
}); });
onDestroy(() => { onDestroy(() => {
@ -331,7 +315,6 @@
autoScroll = true; autoScroll = true;
title = ''; title = '';
messages = [];
history = { history = {
messages: {}, messages: {},
currentId: null currentId: null
@ -428,8 +411,8 @@
autoScroll = true; autoScroll = true;
await tick(); await tick();
if (messages.length > 0) { if (history.currentId) {
history.messages[messages.at(-1).id].done = true; history.messages[history.currentId].done = true;
} }
await tick(); await tick();
@ -448,8 +431,12 @@
}; };
const createMessagesList = (responseMessageId) => { const createMessagesList = (responseMessageId) => {
if (responseMessageId === null) {
return [];
}
const message = history.messages[responseMessageId]; const message = history.messages[responseMessageId];
if (message.parentId) { if (message?.parentId) {
return [...createMessagesList(message.parentId), message]; return [...createMessagesList(message.parentId), message];
} else { } else {
return [message]; return [message];
@ -510,6 +497,8 @@
}; };
const chatActionHandler = async (chatId, actionId, modelId, responseMessageId, event = null) => { const chatActionHandler = async (chatId, actionId, modelId, responseMessageId, event = null) => {
const messages = createMessagesList(responseMessageId);
const res = await chatAction(localStorage.token, actionId, { const res = await chatAction(localStorage.token, actionId, {
model: modelId, model: modelId,
messages: messages.map((m) => ({ messages: messages.map((m) => ({
@ -575,6 +564,7 @@
const submitPrompt = async (userPrompt, { _raw = false } = {}) => { const submitPrompt = async (userPrompt, { _raw = false } = {}) => {
let _responses = []; let _responses = [];
console.log('submitPrompt', $chatId); console.log('submitPrompt', $chatId);
const messages = createMessagesList(history.currentId);
selectedModels = selectedModels.map((modelId) => selectedModels = selectedModels.map((modelId) =>
$models.map((m) => m.id).includes(modelId) ? modelId : '' $models.map((m) => m.id).includes(modelId) ? modelId : ''
@ -668,8 +658,34 @@
parentId: string, parentId: string,
{ modelId = null, modelIdx = null, newChat = false } = {} { modelId = null, modelIdx = null, newChat = false } = {}
) => { ) => {
let _responses: string[] = []; // Create new chat if newChat is true and first user message
if (
newChat &&
history.messages[history.currentId].parentId === null &&
history.messages[history.currentId].role === 'user'
) {
if (!$temporaryChatEnabled) {
chat = await createNewChat(localStorage.token, {
id: $chatId,
title: $i18n.t('New Chat'),
models: selectedModels,
system: $settings.system ?? undefined,
params: params,
history: history,
tags: [],
timestamp: Date.now()
});
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
await chatId.set(chat.id);
} else {
await chatId.set('local');
}
await tick();
}
let _responses: string[] = [];
// If modelId is provided, use it, else use selected model // If modelId is provided, use it, else use selected model
let selectedModelIds = modelId let selectedModelIds = modelId
? [modelId] ? [modelId]
@ -714,38 +730,14 @@
} }
await tick(); await tick();
// Create new chat if only one message in messages
if (newChat && messages.length == 2) {
if (!$temporaryChatEnabled) {
chat = await createNewChat(localStorage.token, {
id: $chatId,
title: $i18n.t('New Chat'),
models: selectedModels,
system: $settings.system ?? undefined,
params: params,
messages: messages,
history: history,
tags: [],
timestamp: Date.now()
});
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
await chatId.set(chat.id);
} else {
await chatId.set('local');
}
await tick();
}
const _chatId = JSON.parse(JSON.stringify($chatId)); const _chatId = JSON.parse(JSON.stringify($chatId));
await Promise.all( await Promise.all(
selectedModelIds.map(async (modelId, _modelIdx) => { selectedModelIds.map(async (modelId, _modelIdx) => {
console.log('modelId', modelId); console.log('modelId', modelId);
const model = $models.filter((m) => m.id === modelId).at(0); const model = $models.filter((m) => m.id === modelId).at(0);
if (model) { if (model) {
const messages = createMessagesList(parentId);
// If there are image files, check if model is vision capable // If there are image files, check if model is vision capable
const hasImages = messages.some((message) => const hasImages = messages.some((message) =>
message.files?.some((file) => file.type === 'image') message.files?.some((file) => file.type === 'image')
@ -844,7 +836,7 @@
}` }`
} }
: undefined, : undefined,
...messages ...createMessagesList(responseMessageId)
] ]
.filter((message) => message?.content?.trim()) .filter((message) => message?.content?.trim())
.map((message) => { .map((message) => {
@ -895,7 +887,7 @@
} }
]; ];
files.push(...model.info.meta.knowledge); files.push(...model.info.meta.knowledge);
messages = messages; // Trigger Svelte update history.messages[responseMessageId] = responseMessage;
} }
files.push( files.push(
...(userMessage?.files ?? []).filter((item) => ...(userMessage?.files ?? []).filter((item) =>
@ -969,7 +961,7 @@
const { value, done } = await reader.read(); const { value, done } = await reader.read();
if (done || stopResponseFlag || _chatId !== $chatId) { if (done || stopResponseFlag || _chatId !== $chatId) {
responseMessage.done = true; responseMessage.done = true;
messages = messages; history.messages[responseMessageId] = responseMessage;
if (stopResponseFlag) { if (stopResponseFlag) {
controller.abort('User: Stop Response'); controller.abort('User: Stop Response');
@ -1036,7 +1028,7 @@
); );
} }
messages = messages; history.messages[responseMessageId] = responseMessage;
} }
} else { } else {
responseMessage.done = true; responseMessage.done = true;
@ -1059,7 +1051,8 @@
eval_count: data.eval_count, eval_count: data.eval_count,
eval_duration: data.eval_duration eval_duration: data.eval_duration
}; };
messages = messages;
history.messages[responseMessageId] = responseMessage;
if ($settings.notificationEnabled && !document.hasFocus()) { if ($settings.notificationEnabled && !document.hasFocus()) {
const notification = new Notification(`${model.id}`, { const notification = new Notification(`${model.id}`, {
@ -1128,7 +1121,7 @@
); );
} }
messages = messages; history.messages[responseMessageId] = responseMessage;
} }
await saveChatHandler(_chatId); await saveChatHandler(_chatId);
@ -1161,7 +1154,8 @@
scrollToBottom(); scrollToBottom();
} }
if (messages.length == 2 && messages.at(1).content !== '' && selectedModels[0] === model.id) { const messages = createMessagesList(responseMessageId);
if (messages.length == 2 && messages.at(-1).content !== '' && selectedModels[0] === model.id) {
window.history.replaceState(history.state, '', `/c/${_chatId}`); window.history.replaceState(history.state, '', `/c/${_chatId}`);
const _title = await generateChatTitle(userPrompt); const _title = await generateChatTitle(userPrompt);
await setChatTitle(_chatId, _title); await setChatTitle(_chatId, _title);
@ -1189,7 +1183,7 @@
} }
]; ];
files.push(...model.info.meta.knowledge); files.push(...model.info.meta.knowledge);
messages = messages; // Trigger Svelte update history.messages[responseMessageId] = responseMessage;
} }
files.push( files.push(
...(userMessage?.files ?? []).filter((item) => ...(userMessage?.files ?? []).filter((item) =>
@ -1240,7 +1234,7 @@
}` }`
} }
: undefined, : undefined,
...messages ...createMessagesList(responseMessageId)
] ]
.filter((message) => message?.content?.trim()) .filter((message) => message?.content?.trim())
.map((message, idx, arr) => ({ .map((message, idx, arr) => ({
@ -1318,7 +1312,7 @@
} }
if (done || stopResponseFlag || _chatId !== $chatId) { if (done || stopResponseFlag || _chatId !== $chatId) {
responseMessage.done = true; responseMessage.done = true;
messages = messages; history.messages[responseMessageId] = responseMessage;
if (stopResponseFlag) { if (stopResponseFlag) {
controller.abort('User: Stop Response'); controller.abort('User: Stop Response');
@ -1373,7 +1367,7 @@
); );
} }
messages = messages; history.messages[responseMessageId] = responseMessage;
} }
if (autoScroll) { if (autoScroll) {
@ -1414,7 +1408,7 @@
await saveChatHandler(_chatId); await saveChatHandler(_chatId);
messages = messages; history.messages[responseMessageId] = responseMessage;
stopResponseFlag = false; stopResponseFlag = false;
await tick(); await tick();
@ -1445,9 +1439,9 @@
scrollToBottom(); scrollToBottom();
} }
const messages = createMessagesList(responseMessageId);
if (messages.length == 2 && selectedModels[0] === model.id) { if (messages.length == 2 && selectedModels[0] === model.id) {
window.history.replaceState(history.state, '', `/c/${_chatId}`); window.history.replaceState(history.state, '', `/c/${_chatId}`);
const _title = await generateChatTitle(userPrompt); const _title = await generateChatTitle(userPrompt);
await setChatTitle(_chatId, _title); await setChatTitle(_chatId, _title);
} }
@ -1497,7 +1491,7 @@
); );
} }
messages = messages; history.messages[responseMessageId] = responseMessage;
}; };
const stopResponse = () => { const stopResponse = () => {
@ -1508,7 +1502,7 @@
const regenerateResponse = async (message) => { const regenerateResponse = async (message) => {
console.log('regenerateResponse'); console.log('regenerateResponse');
if (messages.length != 0) { if (history.currentId) {
let userMessage = history.messages[message.parentId]; let userMessage = history.messages[message.parentId];
let userPrompt = userMessage.content; let userPrompt = userMessage.content;
@ -1530,7 +1524,7 @@
console.log('continueGeneration'); console.log('continueGeneration');
const _chatId = JSON.parse(JSON.stringify($chatId)); const _chatId = JSON.parse(JSON.stringify($chatId));
if (messages.length != 0 && messages.at(-1).done == true) { if (history.currentId && history.messages[history.currentId].done == true) {
const responseMessage = history.messages[history.currentId]; const responseMessage = history.messages[history.currentId];
responseMessage.done = false; responseMessage.done = false;
await tick(); await tick();
@ -1600,7 +1594,7 @@
description: $i18n.t('Generating search query') description: $i18n.t('Generating search query')
} }
]; ];
messages = messages; history.messages[responseMessageId] = responseMessage;
const prompt = userMessage.content; const prompt = userMessage.content;
let searchQuery = await generateSearchQuery( let searchQuery = await generateSearchQuery(
@ -1620,7 +1614,7 @@
action: 'web_search', action: 'web_search',
description: $i18n.t('No search query generated') description: $i18n.t('No search query generated')
}); });
messages = messages; history.messages[responseMessageId] = responseMessage;
return; return;
} }
@ -1629,7 +1623,7 @@
action: 'web_search', action: 'web_search',
description: $i18n.t(`Searching "{{searchQuery}}"`, { searchQuery }) description: $i18n.t(`Searching "{{searchQuery}}"`, { searchQuery })
}); });
messages = messages; history.messages[responseMessageId] = responseMessage;
const results = await runWebSearch(localStorage.token, searchQuery).catch((error) => { const results = await runWebSearch(localStorage.token, searchQuery).catch((error) => {
console.log(error); console.log(error);
@ -1657,8 +1651,7 @@
type: 'web_search_results', type: 'web_search_results',
urls: results.filenames urls: results.filenames
}); });
history.messages[responseMessageId] = responseMessage;
messages = messages;
} else { } else {
responseMessage.statusHistory.push({ responseMessage.statusHistory.push({
done: true, done: true,
@ -1666,7 +1659,7 @@
action: 'web_search', action: 'web_search',
description: 'No search results found' description: 'No search results found'
}); });
messages = messages; history.messages[responseMessageId] = responseMessage;
} }
}; };
@ -1680,9 +1673,8 @@
if ($chatId == _chatId) { if ($chatId == _chatId) {
if (!$temporaryChatEnabled) { if (!$temporaryChatEnabled) {
chat = await updateChatById(localStorage.token, _chatId, { chat = await updateChatById(localStorage.token, _chatId, {
messages: messages,
history: history,
models: selectedModels, models: selectedModels,
history: history,
params: params, params: params,
files: chatFiles files: chatFiles
}); });
@ -1700,7 +1692,7 @@
content: '' content: ''
}; };
message.merged = mergedResponse; message.merged = mergedResponse;
messages = messages; history.messages[messageId] = message;
try { try {
const [res, controller] = await generateMoACompletion( const [res, controller] = await generateMoACompletion(
@ -1722,7 +1714,7 @@
continue; continue;
} else { } else {
mergedResponse.content += value; mergedResponse.content += value;
messages = messages; history.messages[messageId] = message;
} }
if (autoScroll) { if (autoScroll) {
@ -1788,11 +1780,11 @@
/> />
{/if} {/if}
<Navbar {chat} {title} bind:selectedModels shareEnabled={messages.length > 0} {initNewChat} /> <Navbar {chat} {title} bind:selectedModels shareEnabled={!!history.currentId} {initNewChat} />
<PaneGroup direction="horizontal" class="w-full h-full"> <PaneGroup direction="horizontal" class="w-full h-full">
<Pane defaultSize={50} class="h-full flex w-full relative"> <Pane defaultSize={50} class="h-full flex w-full relative">
{#if $banners.length > 0 && messages.length === 0 && !$chatId && selectedModels.length <= 1} {#if $banners.length > 0 && !history.currentId && !$chatId && selectedModels.length <= 1}
<div class="absolute top-3 left-0 right-0 w-full z-20"> <div class="absolute top-3 left-0 right-0 w-full z-20">
<div class=" flex flex-col gap-1 w-full"> <div class=" flex flex-col gap-1 w-full">
{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner} {#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner}
@ -1834,7 +1826,6 @@
bind:history bind:history
bind:autoScroll bind:autoScroll
bind:prompt bind:prompt
{messages}
{selectedModels} {selectedModels}
{processing} {processing}
{sendPrompt} {sendPrompt}
@ -1850,13 +1841,13 @@
<div class=""> <div class="">
<MessageInput <MessageInput
{history}
bind:files bind:files
bind:prompt bind:prompt
bind:autoScroll bind:autoScroll
bind:selectedToolIds bind:selectedToolIds
bind:webSearchEnabled bind:webSearchEnabled
bind:atSelectedModel bind:atSelectedModel
{messages}
{selectedModels} {selectedModels}
availableToolIds={selectedModelIds.reduce((a, e, i, arr) => { availableToolIds={selectedModelIds.reduce((a, e, i, arr) => {
const model = $models.find((m) => m.id === e); const model = $models.find((m) => m.id === e);

13
src/lib/components/chat/MessageInput.svelte
View File

@ -61,15 +61,14 @@
let user = null; let user = null;
let chatInputPlaceholder = ''; let chatInputPlaceholder = '';
export let files = []; export let history;
export let prompt = '';
export let files = [];
export let availableToolIds = []; export let availableToolIds = [];
export let selectedToolIds = []; export let selectedToolIds = [];
export let webSearchEnabled = false; export let webSearchEnabled = false;
export let prompt = '';
export let messages = [];
let visionCapableModels = []; let visionCapableModels = [];
$: visionCapableModels = [...(atSelectedModel ? [atSelectedModel] : selectedModels)].filter( $: visionCapableModels = [...(atSelectedModel ? [atSelectedModel] : selectedModels)].filter(
(model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true (model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true
@ -272,7 +271,7 @@
<div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center"> <div class=" -mb-0.5 mx-auto inset-x-0 bg-transparent flex justify-center">
<div class="flex flex-col max-w-6xl px-2.5 md:px-6 w-full"> <div class="flex flex-col max-w-6xl px-2.5 md:px-6 w-full">
<div class="relative"> <div class="relative">
{#if autoScroll === false && messages.length > 0} {#if autoScroll === false && !history?.currentId}
<div <div
class=" absolute -top-12 left-0 right-0 flex justify-center z-30 pointer-events-none" class=" absolute -top-12 left-0 right-0 flex justify-center z-30 pointer-events-none"
> >
@ -692,7 +691,7 @@
/> />
<div class="self-end mb-2 flex space-x-1 mr-1"> <div class="self-end mb-2 flex space-x-1 mr-1">
{#if messages.length == 0 || messages.at(-1).done == true} {#if !history?.currentId || history.messages[history.currentId].done == true}
<Tooltip content={$i18n.t('Record voice')}> <Tooltip content={$i18n.t('Record voice')}>
<button <button
id="voice-input-button" id="voice-input-button"
@ -744,7 +743,7 @@
</div> </div>
</div> </div>
<div class="flex items-end w-10"> <div class="flex items-end w-10">
{#if messages.length == 0 || messages.at(-1).done == true} {#if !history.currentId || history.messages[history.currentId].done == true}
{#if prompt === ''} {#if prompt === ''}
<div class=" flex items-center mb-1"> <div class=" flex items-center mb-1">
<Tooltip content={$i18n.t('Call')}> <Tooltip content={$i18n.t('Call')}>

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

@ -7,10 +7,8 @@
import { getChatList, updateChatById } from '$lib/apis/chats'; import { getChatList, updateChatById } from '$lib/apis/chats';
import { copyToClipboard, findWordIndices } from '$lib/utils'; import { copyToClipboard, findWordIndices } from '$lib/utils';
import UserMessage from './Messages/UserMessage.svelte';
import ResponseMessage from './Messages/ResponseMessage.svelte';
import Placeholder from './Messages/Placeholder.svelte'; import Placeholder from './Messages/Placeholder.svelte';
import MultiResponseMessages from './Messages/MultiResponseMessages.svelte'; import Message from './Messages/Message.svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
@ -45,11 +43,14 @@
element.scrollTop = element.scrollHeight; element.scrollTop = element.scrollHeight;
}; };
const copyToClipboardWithToast = async (text) => { const updateChatMessages = async () => {
const res = await copyToClipboard(text); await tick();
if (res) { await updateChatById(localStorage.token, chatId, {
toast.success($i18n.t('Copying to clipboard was successful!')); history: history
} });
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
}; };
const confirmEditMessage = async (messageId, content, submit = true) => { const confirmEditMessage = async (messageId, content, submit = true) => {
@ -85,23 +86,11 @@
history.messages[messageId].content = content; history.messages[messageId].content = content;
await tick(); await tick();
await updateChatById(localStorage.token, chatId, { await updateChatById(localStorage.token, chatId, {
messages: messages,
history: history history: history
}); });
} }
}; };
const updateChatMessages = async () => {
await tick();
await updateChatById(localStorage.token, chatId, {
messages: messages,
history: history
});
currentChatPage.set(1);
await chats.set(await getChatList(localStorage.token, $currentChatPage));
};
const confirmEditResponseMessage = async (messageId, content) => { const confirmEditResponseMessage = async (messageId, content) => {
history.messages[messageId].originalContent = history.messages[messageId].content; history.messages[messageId].originalContent = history.messages[messageId].content;
history.messages[messageId].content = content; history.messages[messageId].content = content;
@ -243,7 +232,7 @@
} }
}; };
const deleteMessageHandler = async (messageId) => { const deleteMessage = async (messageId) => {
const messageToDelete = history.messages[messageId]; const messageToDelete = history.messages[messageId];
const parentMessageId = messageToDelete.parentId; const parentMessageId = messageToDelete.parentId;
const childMessageIds = messageToDelete.childrenIds ?? []; const childMessageIds = messageToDelete.childrenIds ?? [];
@ -279,14 +268,13 @@
// Update the chat // Update the chat
await updateChatById(localStorage.token, chatId, { await updateChatById(localStorage.token, chatId, {
messages: messages,
history: history history: history
}); });
}; };
</script> </script>
<div class="h-full flex"> <div class="h-full flex">
{#if messages.length == 0} {#if Object.keys(history?.messages ?? {}).length == 0}
<Placeholder <Placeholder
modelIds={selectedModels} modelIds={selectedModels}
submitPrompt={async (p) => { submitPrompt={async (p) => {
@ -327,116 +315,9 @@
{:else} {:else}
<div class="w-full pt-2"> <div class="w-full pt-2">
{#key chatId} {#key chatId}
{#each messages as message, messageIdx (message.id)} {JSON.stringify(history)}
<div class=" w-full {messageIdx === messages.length - 1 ? ' pb-12' : ''}"> <!-- <Message {chatId} {history} messageId={history.currentId} {user} /> -->
<div <div class="pb-12" />
class="flex flex-col justify-between px-5 mb-3 {($settings?.widescreenMode ?? null)
? 'max-w-full'
: 'max-w-5xl'} mx-auto rounded-lg group"
>
{#if message.role === 'user'}
<UserMessage
on:delete={() => deleteMessageHandler(message.id)}
{user}
{readOnly}
{message}
isFirstMessage={messageIdx === 0}
siblings={message.parentId !== null
? (history.messages[message.parentId]?.childrenIds ?? [])
: (Object.values(history.messages)
.filter((message) => message.parentId === null)
.map((message) => message.id) ?? [])}
{confirmEditMessage}
{showPreviousMessage}
{showNextMessage}
copyToClipboard={copyToClipboardWithToast}
/>
{:else if (history.messages[message.parentId]?.models?.length ?? 1) === 1}
{#key message.id}
<ResponseMessage
{message}
siblings={history.messages[message.parentId]?.childrenIds ?? []}
isLastMessage={messageIdx + 1 === messages.length}
{readOnly}
{updateChatMessages}
{confirmEditResponseMessage}
{saveNewResponseMessage}
{showPreviousMessage}
{showNextMessage}
{rateMessage}
copyToClipboard={copyToClipboardWithToast}
{continueGeneration}
{regenerateResponse}
on:action={async (e) => {
console.log('action', e);
if (typeof e.detail === 'string') {
await chatActionHandler(chatId, e.detail, message.model, message.id);
} else {
const { id, event } = e.detail;
await chatActionHandler(chatId, id, message.model, message.id, event);
}
}}
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
});
}}
/>
{/key}
{:else}
{#key message.parentId}
<MultiResponseMessages
bind:history
isLastMessage={messageIdx + 1 === messages.length}
{messages}
{readOnly}
{chatId}
parentMessage={history.messages[message.parentId]}
{messageIdx}
{updateChatMessages}
{saveNewResponseMessage}
{confirmEditResponseMessage}
{rateMessage}
copyToClipboard={copyToClipboardWithToast}
{continueGeneration}
{mergeResponses}
{regenerateResponse}
on:action={async (e) => {
console.log('action', e);
if (typeof e.detail === 'string') {
await chatActionHandler(chatId, e.detail, message.model, message.id);
} else {
const { id, event } = e.detail;
await chatActionHandler(chatId, id, message.model, message.id, event);
}
}}
on:change={async () => {
await updateChatById(localStorage.token, chatId, {
messages: messages,
history: history
});
if (autoScroll) {
const element = document.getElementById('messages-container');
autoScroll =
element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
}
}}
/>
{/key}
{/if}
</div>
</div>
{/each}
{#if bottomPadding} {#if bottomPadding}
<div class=" pb-6" /> <div class=" pb-6" />
{/if} {/if}

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

@ -0,0 +1,156 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { tick, getContext, onMount } from 'svelte';
const i18n = getContext('i18n');
import { settings } from '$lib/stores';
import { copyToClipboard } from '$lib/utils';
import MultiResponseMessages from './MultiResponseMessages.svelte';
import ResponseMessage from './ResponseMessage.svelte';
import UserMessage from './UserMessage.svelte';
export let chatId;
export let history;
export let messageId;
export let user;
export let scrollToBottom;
export let chatActionHandler;
export let confirmEditMessage;
export let confirmEditResponseMessage;
export let showPreviousMessage;
export let showNextMessage;
export let rateMessage;
export let deleteMessage;
export let saveNewResponseMessage;
export let regenerateResponse;
export let continueGeneration;
// MultiResponseMessages
export let mergeResponses;
export let readOnly = false;
const copyToClipboardWithToast = async (text) => {
const res = await copyToClipboard(text);
if (res) {
toast.success($i18n.t('Copying to clipboard was successful!'));
}
};
</script>
<div class="w-full">
<div
class="flex flex-col justify-between px-5 mb-3 {($settings?.widescreenMode ?? null)
? 'max-w-full'
: 'max-w-5xl'} mx-auto rounded-lg group"
>
{#if history.messages[messageId].role === 'user'}
{@const message = history.messages[messageId]}
<UserMessage
{user}
{history}
siblings={message.parentId !== null
? (history.messages[message.parentId]?.childrenIds ?? [])
: (Object.values(history.messages)
.filter((message) => message.parentId === null)
.map((message) => message.id) ?? [])}
{confirmEditMessage}
{showPreviousMessage}
{showNextMessage}
copyToClipboard={copyToClipboardWithToast}
isFirstMessage={messageIdx === 0}
on:delete={() => deleteMessage(message.id)}
{readOnly}
/>
{:else if (history.messages[message.parentId]?.models?.length ?? 1) === 1}
<ResponseMessage
{message}
siblings={history.messages[message.parentId]?.childrenIds ?? []}
isLastMessage={messageIdx + 1 === messages.length}
{readOnly}
{updateChatMessages}
{confirmEditResponseMessage}
{saveNewResponseMessage}
{showPreviousMessage}
{showNextMessage}
{rateMessage}
copyToClipboard={copyToClipboardWithToast}
{continueGeneration}
{regenerateResponse}
on:action={async (e) => {
console.log('action', e);
if (typeof e.detail === 'string') {
await chatActionHandler(chatId, e.detail, message.model, message.id);
} else {
const { id, event } = e.detail;
await chatActionHandler(chatId, id, message.model, message.id, event);
}
}}
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
});
}
}}
/>
{:else}
<MultiResponseMessages
bind:history
{chatId}
messageIds={[]}
parentMessage={history.messages[message.parentId]}
isLastMessage={messageIdx + 1 === messages.length}
{readOnly}
{updateChatMessages}
{saveNewResponseMessage}
{confirmEditResponseMessage}
{rateMessage}
copyToClipboard={copyToClipboardWithToast}
{continueGeneration}
{mergeResponses}
{regenerateResponse}
on:action={async (e) => {
console.log('action', e);
if (typeof e.detail === 'string') {
await chatActionHandler(chatId, e.detail, message.model, message.id);
} else {
const { id, event } = e.detail;
await chatActionHandler(chatId, id, message.model, message.id, event);
}
}}
on:change={async () => {
await updateChatById(localStorage.token, chatId, {
history: history
});
if (autoScroll) {
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
}
}}
/>
{/if}
</div>
</div>

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

@ -22,7 +22,6 @@
export let chatId; export let chatId;
export let history; export let history;
export let messages = [];
export let messageIdx; export let messageIdx;
export let parentMessage; export let parentMessage;
@ -46,7 +45,9 @@
let groupedMessages = {}; let groupedMessages = {};
let groupedMessagesIdx = {}; let groupedMessagesIdx = {};
$: if (parentMessage) { $: if (history.messages) {
console.log('history.messages', history.messages);
initHandler(); initHandler();
} }
@ -87,6 +88,7 @@
}; };
const initHandler = async () => { const initHandler = async () => {
console.log('multiresponse:initHandler');
await tick(); await tick();
currentMessageId = messages[messageIdx].id; currentMessageId = messages[messageIdx].id;
@ -146,7 +148,6 @@
class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden" class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
id="responses-container-{chatId}-{parentMessage.id}" id="responses-container-{chatId}-{parentMessage.id}"
> >
{#key currentMessageId}
{#each Object.keys(groupedMessages) as modelIdx} {#each Object.keys(groupedMessages) as modelIdx}
{#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0} {#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0}
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
@ -217,7 +218,6 @@
</div> </div>
{/if} {/if}
{/each} {/each}
{/key}
</div> </div>
{#if !readOnly && isLastMessage} {#if !readOnly && isLastMessage}