From fd5e8b4fcfe01e8d9eeb27b4377df245e82a66c8 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Mon, 23 Sep 2024 00:55:13 +0200 Subject: [PATCH] refac: deprecate messages for history --- src/lib/components/chat/Chat.svelte | 167 +++++++++--------- src/lib/components/chat/MessageInput.svelte | 13 +- src/lib/components/chat/Messages.svelte | 147 ++------------- .../components/chat/Messages/Message.svelte | 156 ++++++++++++++++ .../Messages/MultiResponseMessages.svelte | 142 +++++++-------- 5 files changed, 326 insertions(+), 299 deletions(-) create mode 100644 src/lib/components/chat/Messages/Message.svelte diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte index 0b848b3cd..f9e23ca2f 100644 --- a/src/lib/components/chat/Chat.svelte +++ b/src/lib/components/chat/Chat.svelte @@ -5,6 +5,8 @@ import { PaneGroup, Pane, PaneResizer } from 'paneforge'; import { getContext, onDestroy, onMount, tick } from 'svelte'; + const i18n: Writable = getContext('i18n'); + import { goto } from '$app/navigation'; import { page } from '$app/stores'; @@ -67,11 +69,9 @@ import Navbar from '$lib/components/layout/Navbar.svelte'; import ChatControls from './ChatControls.svelte'; import EventConfirmDialog from '../common/ConfirmDialog.svelte'; - import EllipsisVertical from '../icons/EllipsisVertical.svelte'; - - const i18n: Writable = getContext('i18n'); export let chatIdProp = ''; + let loaded = false; const eventTarget = new EventTarget(); let controlPane; @@ -89,9 +89,10 @@ let eventConfirmationInputValue = ''; let eventCallback = null; + let chatIdUnsubscriber: Unsubscriber | undefined; + let selectedModels = ['']; let atSelectedModel: Model | undefined; - let selectedModelIds = []; $: selectedModelIds = atSelectedModel !== undefined ? [atSelectedModel.id] : selectedModels; @@ -102,35 +103,17 @@ let tags = []; let title = ''; - let prompt = ''; - - let chatFiles = []; - let files = []; - let messages = []; let history = { messages: {}, currentId: null }; + // Chat Input + let prompt = ''; + let chatFiles = []; + let files = []; 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) { (async () => { console.log(chatIdProp); @@ -227,8 +210,6 @@ } else { console.log('Unknown message type', data); } - - messages = messages; } }; @@ -310,6 +291,9 @@ showOverview.set(false); } }); + + const chatInput = document.getElementById('chat-textarea'); + chatInput?.focus(); }); onDestroy(() => { @@ -331,7 +315,6 @@ autoScroll = true; title = ''; - messages = []; history = { messages: {}, currentId: null @@ -428,8 +411,8 @@ autoScroll = true; await tick(); - if (messages.length > 0) { - history.messages[messages.at(-1).id].done = true; + if (history.currentId) { + history.messages[history.currentId].done = true; } await tick(); @@ -448,8 +431,12 @@ }; const createMessagesList = (responseMessageId) => { + if (responseMessageId === null) { + return []; + } + const message = history.messages[responseMessageId]; - if (message.parentId) { + if (message?.parentId) { return [...createMessagesList(message.parentId), message]; } else { return [message]; @@ -510,6 +497,8 @@ }; const chatActionHandler = async (chatId, actionId, modelId, responseMessageId, event = null) => { + const messages = createMessagesList(responseMessageId); + const res = await chatAction(localStorage.token, actionId, { model: modelId, messages: messages.map((m) => ({ @@ -575,6 +564,7 @@ const submitPrompt = async (userPrompt, { _raw = false } = {}) => { let _responses = []; console.log('submitPrompt', $chatId); + const messages = createMessagesList(history.currentId); selectedModels = selectedModels.map((modelId) => $models.map((m) => m.id).includes(modelId) ? modelId : '' @@ -668,8 +658,34 @@ parentId: string, { 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 let selectedModelIds = modelId ? [modelId] @@ -714,38 +730,14 @@ } 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)); - await Promise.all( selectedModelIds.map(async (modelId, _modelIdx) => { console.log('modelId', modelId); const model = $models.filter((m) => m.id === modelId).at(0); if (model) { + const messages = createMessagesList(parentId); // If there are image files, check if model is vision capable const hasImages = messages.some((message) => message.files?.some((file) => file.type === 'image') @@ -844,7 +836,7 @@ }` } : undefined, - ...messages + ...createMessagesList(responseMessageId) ] .filter((message) => message?.content?.trim()) .map((message) => { @@ -895,7 +887,7 @@ } ]; files.push(...model.info.meta.knowledge); - messages = messages; // Trigger Svelte update + history.messages[responseMessageId] = responseMessage; } files.push( ...(userMessage?.files ?? []).filter((item) => @@ -969,7 +961,7 @@ const { value, done } = await reader.read(); if (done || stopResponseFlag || _chatId !== $chatId) { responseMessage.done = true; - messages = messages; + history.messages[responseMessageId] = responseMessage; if (stopResponseFlag) { controller.abort('User: Stop Response'); @@ -1036,7 +1028,7 @@ ); } - messages = messages; + history.messages[responseMessageId] = responseMessage; } } else { responseMessage.done = true; @@ -1059,7 +1051,8 @@ eval_count: data.eval_count, eval_duration: data.eval_duration }; - messages = messages; + + history.messages[responseMessageId] = responseMessage; if ($settings.notificationEnabled && !document.hasFocus()) { const notification = new Notification(`${model.id}`, { @@ -1128,7 +1121,7 @@ ); } - messages = messages; + history.messages[responseMessageId] = responseMessage; } await saveChatHandler(_chatId); @@ -1161,7 +1154,8 @@ 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}`); const _title = await generateChatTitle(userPrompt); await setChatTitle(_chatId, _title); @@ -1189,7 +1183,7 @@ } ]; files.push(...model.info.meta.knowledge); - messages = messages; // Trigger Svelte update + history.messages[responseMessageId] = responseMessage; } files.push( ...(userMessage?.files ?? []).filter((item) => @@ -1240,7 +1234,7 @@ }` } : undefined, - ...messages + ...createMessagesList(responseMessageId) ] .filter((message) => message?.content?.trim()) .map((message, idx, arr) => ({ @@ -1318,7 +1312,7 @@ } if (done || stopResponseFlag || _chatId !== $chatId) { responseMessage.done = true; - messages = messages; + history.messages[responseMessageId] = responseMessage; if (stopResponseFlag) { controller.abort('User: Stop Response'); @@ -1373,7 +1367,7 @@ ); } - messages = messages; + history.messages[responseMessageId] = responseMessage; } if (autoScroll) { @@ -1414,7 +1408,7 @@ await saveChatHandler(_chatId); - messages = messages; + history.messages[responseMessageId] = responseMessage; stopResponseFlag = false; await tick(); @@ -1445,9 +1439,9 @@ scrollToBottom(); } + const messages = createMessagesList(responseMessageId); if (messages.length == 2 && selectedModels[0] === model.id) { window.history.replaceState(history.state, '', `/c/${_chatId}`); - const _title = await generateChatTitle(userPrompt); await setChatTitle(_chatId, _title); } @@ -1497,7 +1491,7 @@ ); } - messages = messages; + history.messages[responseMessageId] = responseMessage; }; const stopResponse = () => { @@ -1508,7 +1502,7 @@ const regenerateResponse = async (message) => { console.log('regenerateResponse'); - if (messages.length != 0) { + if (history.currentId) { let userMessage = history.messages[message.parentId]; let userPrompt = userMessage.content; @@ -1530,7 +1524,7 @@ console.log('continueGeneration'); 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]; responseMessage.done = false; await tick(); @@ -1600,7 +1594,7 @@ description: $i18n.t('Generating search query') } ]; - messages = messages; + history.messages[responseMessageId] = responseMessage; const prompt = userMessage.content; let searchQuery = await generateSearchQuery( @@ -1620,7 +1614,7 @@ action: 'web_search', description: $i18n.t('No search query generated') }); - messages = messages; + history.messages[responseMessageId] = responseMessage; return; } @@ -1629,7 +1623,7 @@ action: 'web_search', description: $i18n.t(`Searching "{{searchQuery}}"`, { searchQuery }) }); - messages = messages; + history.messages[responseMessageId] = responseMessage; const results = await runWebSearch(localStorage.token, searchQuery).catch((error) => { console.log(error); @@ -1657,8 +1651,7 @@ type: 'web_search_results', urls: results.filenames }); - - messages = messages; + history.messages[responseMessageId] = responseMessage; } else { responseMessage.statusHistory.push({ done: true, @@ -1666,7 +1659,7 @@ action: 'web_search', description: 'No search results found' }); - messages = messages; + history.messages[responseMessageId] = responseMessage; } }; @@ -1680,9 +1673,8 @@ if ($chatId == _chatId) { if (!$temporaryChatEnabled) { chat = await updateChatById(localStorage.token, _chatId, { - messages: messages, - history: history, models: selectedModels, + history: history, params: params, files: chatFiles }); @@ -1700,7 +1692,7 @@ content: '' }; message.merged = mergedResponse; - messages = messages; + history.messages[messageId] = message; try { const [res, controller] = await generateMoACompletion( @@ -1722,7 +1714,7 @@ continue; } else { mergedResponse.content += value; - messages = messages; + history.messages[messageId] = message; } if (autoScroll) { @@ -1788,11 +1780,11 @@ /> {/if} - 0} {initNewChat} /> + - {#if $banners.length > 0 && messages.length === 0 && !$chatId && selectedModels.length <= 1} + {#if $banners.length > 0 && !history.currentId && !$chatId && selectedModels.length <= 1}
{#each $banners.filter( (b) => (b.dismissible ? !JSON.parse(localStorage.getItem('dismissedBannerIds') ?? '[]').includes(b.id) : true) ) as banner} @@ -1834,7 +1826,6 @@ bind:history bind:autoScroll bind:prompt - {messages} {selectedModels} {processing} {sendPrompt} @@ -1850,13 +1841,13 @@
{ const model = $models.find((m) => m.id === e); diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte index ea4400bbc..c027b9158 100644 --- a/src/lib/components/chat/MessageInput.svelte +++ b/src/lib/components/chat/MessageInput.svelte @@ -61,15 +61,14 @@ let user = null; let chatInputPlaceholder = ''; - export let files = []; + export let history; + export let prompt = ''; + export let files = []; export let availableToolIds = []; export let selectedToolIds = []; export let webSearchEnabled = false; - export let prompt = ''; - export let messages = []; - let visionCapableModels = []; $: visionCapableModels = [...(atSelectedModel ? [atSelectedModel] : selectedModels)].filter( (model) => $models.find((m) => m.id === model)?.info?.meta?.capabilities?.vision ?? true @@ -272,7 +271,7 @@
- {#if autoScroll === false && messages.length > 0} + {#if autoScroll === false && !history?.currentId}
@@ -692,7 +691,7 @@ />
- {#if messages.length == 0 || messages.at(-1).done == true} + {#if !history?.currentId || history.messages[history.currentId].done == true}
- {#if messages.length == 0 || messages.at(-1).done == true} + {#if !history.currentId || history.messages[history.currentId].done == true} {#if prompt === ''}
diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index f9f4a63d2..7ea3a3d69 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -7,10 +7,8 @@ import { getChatList, updateChatById } from '$lib/apis/chats'; 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 MultiResponseMessages from './Messages/MultiResponseMessages.svelte'; + import Message from './Messages/Message.svelte'; const i18n = getContext('i18n'); @@ -45,11 +43,14 @@ element.scrollTop = element.scrollHeight; }; - const copyToClipboardWithToast = async (text) => { - const res = await copyToClipboard(text); - if (res) { - toast.success($i18n.t('Copying to clipboard was successful!')); - } + const updateChatMessages = async () => { + await tick(); + await updateChatById(localStorage.token, chatId, { + history: history + }); + + currentChatPage.set(1); + await chats.set(await getChatList(localStorage.token, $currentChatPage)); }; const confirmEditMessage = async (messageId, content, submit = true) => { @@ -85,23 +86,11 @@ history.messages[messageId].content = content; await tick(); await updateChatById(localStorage.token, chatId, { - messages: messages, 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) => { history.messages[messageId].originalContent = history.messages[messageId].content; history.messages[messageId].content = content; @@ -243,7 +232,7 @@ } }; - const deleteMessageHandler = async (messageId) => { + const deleteMessage = async (messageId) => { const messageToDelete = history.messages[messageId]; const parentMessageId = messageToDelete.parentId; const childMessageIds = messageToDelete.childrenIds ?? []; @@ -279,14 +268,13 @@ // Update the chat await updateChatById(localStorage.token, chatId, { - messages: messages, history: history }); };
- {#if messages.length == 0} + {#if Object.keys(history?.messages ?? {}).length == 0} { @@ -327,116 +315,9 @@ {:else}
{#key chatId} - {#each messages as message, messageIdx (message.id)} -
-
- {#if message.role === 'user'} - 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} - { - 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} - { - 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} -
-
- {/each} - + {JSON.stringify(history)} + +
{#if bottomPadding}
{/if} diff --git a/src/lib/components/chat/Messages/Message.svelte b/src/lib/components/chat/Messages/Message.svelte new file mode 100644 index 000000000..1629a765e --- /dev/null +++ b/src/lib/components/chat/Messages/Message.svelte @@ -0,0 +1,156 @@ + + +
+
+ {#if history.messages[messageId].role === 'user'} + {@const message = history.messages[messageId]} + 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} + { + 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} + { + 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} +
+
diff --git a/src/lib/components/chat/Messages/MultiResponseMessages.svelte b/src/lib/components/chat/Messages/MultiResponseMessages.svelte index 4a845dbb9..c35ab9412 100644 --- a/src/lib/components/chat/Messages/MultiResponseMessages.svelte +++ b/src/lib/components/chat/Messages/MultiResponseMessages.svelte @@ -22,7 +22,6 @@ export let chatId; export let history; - export let messages = []; export let messageIdx; export let parentMessage; @@ -46,7 +45,9 @@ let groupedMessages = {}; let groupedMessagesIdx = {}; - $: if (parentMessage) { + $: if (history.messages) { + console.log('history.messages', history.messages); + initHandler(); } @@ -87,6 +88,7 @@ }; const initHandler = async () => { + console.log('multiresponse:initHandler'); await tick(); currentMessageId = messages[messageIdx].id; @@ -146,78 +148,76 @@ class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden" id="responses-container-{chatId}-{parentMessage.id}" > - {#key currentMessageId} - {#each Object.keys(groupedMessages) as modelIdx} - {#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0} - - - {@const message = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]} + {#each Object.keys(groupedMessages) as modelIdx} + {#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0} + + + {@const message = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]} -
{ - if (currentMessageId != message.id) { - currentMessageId = message.id; - let messageId = message.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'); +
{ + if (currentMessageId != message.id) { + currentMessageId = message.id; + let messageId = message.id; + console.log(messageId); + // + let messageChildrenIds = history.messages[messageId].childrenIds; + while (messageChildrenIds.length !== 0) { + messageId = messageChildrenIds.at(-1); + messageChildrenIds = history.messages[messageId].childrenIds; } - }} - > - {#key history.currentId} - {#if message} - m.id)} - isLastMessage={true} - {updateChatMessages} - {saveNewResponseMessage} - {confirmEditResponseMessage} - showPreviousMessage={() => showPreviousMessage(modelIdx)} - showNextMessage={() => showNextMessage(modelIdx)} - {readOnly} - {rateMessage} - {copyToClipboard} - {continueGeneration} - regenerateResponse={async (message) => { - regenerateResponse(message); - await tick(); - groupedMessagesIdx[modelIdx] = groupedMessages[modelIdx].messages.length - 1; - }} - on:action={async (e) => { - dispatch('action', e.detail); - }} - on:save={async (e) => { - console.log('save', e); + history.currentId = messageId; + dispatch('change'); + } + }} + > + {#key history.currentId} + {#if message} + m.id)} + isLastMessage={true} + {updateChatMessages} + {saveNewResponseMessage} + {confirmEditResponseMessage} + showPreviousMessage={() => showPreviousMessage(modelIdx)} + showNextMessage={() => showNextMessage(modelIdx)} + {readOnly} + {rateMessage} + {copyToClipboard} + {continueGeneration} + regenerateResponse={async (message) => { + regenerateResponse(message); + await tick(); + groupedMessagesIdx[modelIdx] = groupedMessages[modelIdx].messages.length - 1; + }} + on:action={async (e) => { + dispatch('action', e.detail); + }} + 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 - }); - }} - /> - {/if} - {/key} -
- {/if} - {/each} - {/key} + const message = e.detail; + history.messages[message.id] = message; + await updateChatById(localStorage.token, chatId, { + messages: messages, + history: history + }); + }} + /> + {/if} + {/key} +
+ {/if} + {/each}
{#if !readOnly && isLastMessage}