diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte index 3517da68d..67a9f5dc2 100644 --- a/src/lib/components/chat/Chat.svelte +++ b/src/lib/components/chat/Chat.svelte @@ -1794,6 +1794,33 @@ console.log('stopResponse'); }; + const submitMessage = async (parentId, prompt) => { + let userPrompt = prompt; + let userMessageId = uuidv4(); + + let userMessage = { + id: userMessageId, + parentId: parentId, + childrenIds: [], + role: 'user', + content: userPrompt, + models: selectedModels + }; + + if (parentId !== null) { + history.messages[parentId].childrenIds = [ + ...history.messages[parentId].childrenIds, + userMessageId + ]; + } + + history.messages[userMessageId] = userMessage; + history.currentId = userMessageId; + + await tick(); + await sendPrompt(userPrompt, userMessageId); + }; + const regenerateResponse = async (message) => { console.log('regenerateResponse'); @@ -2204,42 +2231,12 @@ {selectedModels} {sendPrompt} {showMessage} + {submitMessage} {continueResponse} {regenerateResponse} {mergeResponses} {chatActionHandler} bottomPadding={files.length > 0} - on:submit={async (e) => { - if (e.detail) { - // New user message - let userPrompt = e.detail.prompt; - let userMessageId = uuidv4(); - - let userMessage = { - id: userMessageId, - parentId: e.detail.parentId, - childrenIds: [], - role: 'user', - content: userPrompt, - models: selectedModels - }; - - let messageParentId = e.detail.parentId; - - if (messageParentId !== null) { - history.messages[messageParentId].childrenIds = [ - ...history.messages[messageParentId].childrenIds, - userMessageId - ]; - } - - history.messages[userMessageId] = userMessage; - history.currentId = userMessageId; - - await tick(); - await sendPrompt(userPrompt, userMessageId); - } - }} /> diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 7a95575e9..5d71da836 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -29,8 +29,10 @@ export let continueResponse: Function; export let regenerateResponse: Function; export let mergeResponses: Function; + export let chatActionHandler: Function; export let showMessage: Function = () => {}; + export let submitMessage: Function = () => {}; export let readOnly = false; @@ -79,9 +81,9 @@ element.scrollTop = element.scrollHeight; }; - const updateChatHistory = async () => { - await tick(); + const updateChat = async () => { history = history; + await tick(); await updateChatById(localStorage.token, chatId, { history: history, messages: messages @@ -195,7 +197,7 @@ rating: rating }; - await updateChatHistory(); + await updateChat(); }; const editMessage = async (messageId, content, submit = true) => { @@ -232,7 +234,7 @@ } else { // Edit user message history.messages[messageId].content = content; - await updateChatHistory(); + await updateChat(); } } else { if (submit) { @@ -261,16 +263,25 @@ ]; } - await updateChatHistory(); + await updateChat(); } else { // Edit response message history.messages[messageId].originalContent = history.messages[messageId].content; history.messages[messageId].content = content; - await updateChatHistory(); + await updateChat(); } } }; + const actionMessage = async (actionId, event = null) => { + await chatActionHandler(chatId, actionId, message.model, message.id, event); + }; + + const saveMessage = async (messageId, message) => { + history.messages[messageId] = message; + await updateChat(); + }; + const deleteMessage = async (messageId) => { const messageToDelete = history.messages[messageId]; const parentMessageId = messageToDelete.parentId; @@ -306,7 +317,17 @@ showMessage({ id: parentMessageId }); // Update the chat - await updateChatHistory(); + await updateChat(); + }; + + const triggerScroll = () => { + if (autoScroll) { + const element = document.getElementById('messages-container'); + autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50; + setTimeout(() => { + scrollToBottom(); + }, 100); + } }; @@ -372,37 +393,18 @@ {user} {showPreviousMessage} {showNextMessage} + {updateChat} {editMessage} {deleteMessage} {rateMessage} + {actionMessage} + {saveMessage} + {submitMessage} {regenerateResponse} {continueResponse} {mergeResponses} + {triggerScroll} {readOnly} - on:submit={async (e) => { - dispatch('submit', e.detail); - }} - on:action={async (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:update={() => { - updateChatHistory(); - }} - on:scroll={() => { - if (autoScroll) { - const element = document.getElementById('messages-container'); - autoScroll = - element.scrollHeight - element.scrollTop <= element.clientHeight + 50; - setTimeout(() => { - scrollToBottom(); - }, 100); - } - }} /> {/each} diff --git a/src/lib/components/chat/Messages/Message.svelte b/src/lib/components/chat/Messages/Message.svelte index 283af001a..aeee99612 100644 --- a/src/lib/components/chat/Messages/Message.svelte +++ b/src/lib/components/chat/Messages/Message.svelte @@ -22,23 +22,21 @@ export let showPreviousMessage; export let showNextMessage; + export let updateChat; export let editMessage; + export let saveMessage; export let deleteMessage; export let rateMessage; + export let actionMessage; + export let submitMessage; export let regenerateResponse; export let continueResponse; - - // MultiResponseMessages export let mergeResponses; - export let autoScroll = false; + export let triggerScroll; export let readOnly = false; - - onMount(() => { - // console.log('message', idx); - });
deleteMessage(messageId)} + {deleteMessage} {readOnly} /> {:else if (history.messages[history.messages[messageId].parentId]?.models?.length ?? 1) === 1} @@ -73,30 +71,14 @@ siblings={history.messages[history.messages[messageId].parentId]?.childrenIds ?? []} {showPreviousMessage} {showNextMessage} + {updateChat} {editMessage} + {saveMessage} {rateMessage} + {actionMessage} + {submitMessage} {continueResponse} {regenerateResponse} - on:submit={async (e) => { - dispatch('submit', e.detail); - }} - on:action={async (e) => { - dispatch('action', e.detail); - }} - on:update={async (e) => { - dispatch('update'); - }} - on:save={async (e) => { - console.log('save', e); - - const message = e.detail; - if (message) { - history.messages[message.id] = message; - dispatch('update'); - } else { - dispatch('update'); - } - }} {readOnly} /> {:else} @@ -105,35 +87,16 @@ {chatId} {messageId} isLastMessage={messageId === history?.currentId} - {rateMessage} + {updateChat} {editMessage} + {saveMessage} + {rateMessage} + {actionMessage} + {submitMessage} {continueResponse} {regenerateResponse} {mergeResponses} - on:submit={async (e) => { - dispatch('submit', e.detail); - }} - on:action={async (e) => { - dispatch('action', e.detail); - }} - on:update={async (e) => { - dispatch('update'); - }} - on:save={async (e) => { - console.log('save', e); - const message = e.detail; - if (message) { - history.messages[message.id] = message; - dispatch('update'); - } else { - dispatch('update'); - } - }} - on:change={async () => { - await tick(); - dispatch('update'); - dispatch('scroll'); - }} + {triggerScroll} {readOnly} /> {/if} diff --git a/src/lib/components/chat/Messages/MultiResponseMessages.svelte b/src/lib/components/chat/Messages/MultiResponseMessages.svelte index 438bf1b34..11497a70e 100644 --- a/src/lib/components/chat/Messages/MultiResponseMessages.svelte +++ b/src/lib/components/chat/Messages/MultiResponseMessages.svelte @@ -25,13 +25,19 @@ export let isLastMessage; export let readOnly = false; + export let updateChat: Function; export let editMessage: Function; + export let saveMessage: Function; export let rateMessage: Function; + export let actionMessage: Function; + export let submitMessage: Function; export let continueResponse: Function; export let regenerateResponse: Function; export let mergeResponses: Function; + export let triggerScroll: Function; + const dispatch = createEventDispatcher(); let currentMessageId; @@ -46,7 +52,7 @@ } } - const showPreviousMessage = (modelIdx) => { + const showPreviousMessage = async (modelIdx) => { groupedMessageIdsIdx[modelIdx] = Math.max(0, groupedMessageIdsIdx[modelIdx] - 1); let messageId = groupedMessageIds[modelIdx].messageIds[groupedMessageIdsIdx[modelIdx]]; @@ -60,10 +66,13 @@ } history.currentId = messageId; - dispatch('change'); + + await tick(); + await updateChat(); + triggerScroll(); }; - const showNextMessage = (modelIdx) => { + const showNextMessage = async (modelIdx) => { groupedMessageIdsIdx[modelIdx] = Math.min( groupedMessageIds[modelIdx].messageIds.length - 1, groupedMessageIdsIdx[modelIdx] + 1 @@ -80,7 +89,10 @@ } history.currentId = messageId; - dispatch('change'); + + await tick(); + await updateChat(); + triggerScroll(); }; const initHandler = async () => { @@ -182,7 +194,7 @@ : `border-gray-50 dark:border-gray-850 border-dashed ${ $mobile ? 'min-w-full' : 'min-w-80' }`} transition-all p-5 rounded-2xl" - on:click={() => { + on:click={async () => { if (messageId != _messageId) { let currentMessageId = _messageId; let messageChildrenIds = history.messages[currentMessageId].childrenIds; @@ -191,7 +203,10 @@ messageChildrenIds = history.messages[currentMessageId].childrenIds; } history.currentId = currentMessageId; - dispatch('change'); + + await tick(); + await updateChat(); + triggerScroll(); } }} > @@ -205,8 +220,12 @@ siblings={groupedMessageIds[modelIdx].messageIds} showPreviousMessage={() => showPreviousMessage(modelIdx)} showNextMessage={() => showNextMessage(modelIdx)} - {rateMessage} + {updateChat} {editMessage} + {saveMessage} + {rateMessage} + {actionMessage} + {submitMessage} {continueResponse} regenerateResponse={async (message) => { regenerateResponse(message); @@ -214,18 +233,6 @@ groupedMessageIdsIdx[modelIdx] = groupedMessageIds[modelIdx].messageIds.length - 1; }} - on:submit={async (e) => { - dispatch('submit', e.detail); - }} - on:action={async (e) => { - dispatch('action', e.detail); - }} - on:update={async (e) => { - dispatch('update', e.detail); - }} - on:save={async (e) => { - dispatch('save', e.detail); - }} {readOnly} /> {/if} diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte index 40ffc0e29..83a4b8eba 100644 --- a/src/lib/components/chat/Messages/ResponseMessage.svelte +++ b/src/lib/components/chat/Messages/ResponseMessage.svelte @@ -15,9 +15,6 @@ import { copyToClipboard as _copyToClipboard, approximateToHumanReadable, - extractParagraphsForAudio, - extractSentencesForAudio, - cleanText, getMessageContentParts, sanitizeResponseContent, createMessagesList @@ -33,7 +30,6 @@ import Spinner from '$lib/components/common/Spinner.svelte'; import WebSearchResults from './ResponseMessage/WebSearchResults.svelte'; import Sparkles from '$lib/components/icons/Sparkles.svelte'; - import Markdown from './Markdown.svelte'; import Error from './Error.svelte'; import Citations from './Citations.svelte'; import CodeExecutions from './CodeExecutions.svelte'; @@ -112,9 +108,13 @@ export let showPreviousMessage: Function; export let showNextMessage: Function; + export let updateChat: Function; export let editMessage: Function; + export let saveMessage: Function; export let rateMessage: Function; + export let actionMessage: Function; + export let submitMessage: Function; export let continueResponse: Function; export let regenerateResponse: Function; @@ -329,7 +329,10 @@ url: `${image.url}` })); - dispatch('save', { ...message, files: files }); + saveMessage(message.id, { + ...message, + files: files + }); } generatingImage = false; @@ -422,7 +425,7 @@ } console.log(updatedMessage); - dispatch('save', updatedMessage); + saveMessage(message.id, updatedMessage); await tick(); @@ -443,7 +446,7 @@ updatedMessage.annotation.tags = tags; feedbackItem.data.tags = tags; - dispatch('save', updatedMessage); + saveMessage(message.id, updatedMessage); await updateFeedbackById( localStorage.token, updatedMessage.feedbackId, @@ -631,22 +634,19 @@ message.id ].content.replace(raw, raw.replace(oldContent, newContent)); - dispatch('update'); + updateChat(); }} on:select={(e) => { const { type, content } = e.detail; if (type === 'explain') { - dispatch('submit', { - parentId: message.id, - prompt: `Explain this section to me in more detail\n\n\`\`\`\n${content}\n\`\`\`` - }); + submitMessage( + message.id, + `Explain this section to me in more detail\n\n\`\`\`\n${content}\n\`\`\`` + ); } else if (type === 'ask') { const input = e.detail?.input ?? ''; - dispatch('submit', { - parentId: message.id, - prompt: `\`\`\`\n${content}\n\`\`\`\n${input}` - }); + submitMessage(message.id, `\`\`\`\n${content}\n\`\`\`\n${input}`); } }} /> @@ -1019,21 +1019,6 @@ disabled={feedbackLoading} on:click={async () => { await feedbackHandler(1); - - (model?.actions ?? []) - .filter((action) => action?.__webui__ ?? false) - .forEach((action) => { - dispatch('action', { - id: action.id, - event: { - id: 'good-response', - data: { - messageId: message.id - } - } - }); - }); - window.setTimeout(() => { document .getElementById(`message-feedback-${message.id}`) @@ -1070,21 +1055,6 @@ disabled={feedbackLoading} on:click={async () => { await feedbackHandler(-1); - - (model?.actions ?? []) - .filter((action) => action?.__webui__ ?? false) - .forEach((action) => { - dispatch('action', { - id: action.id, - event: { - id: 'bad-response', - data: { - messageId: message.id - } - } - }); - }); - window.setTimeout(() => { document .getElementById(`message-feedback-${message.id}`) @@ -1120,20 +1090,6 @@ : '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={() => { continueResponse(); - - (model?.actions ?? []) - .filter((action) => action?.__webui__ ?? false) - .forEach((action) => { - dispatch('action', { - id: action.id, - event: { - id: 'continue-response', - data: { - messageId: message.id - } - } - }); - }); }} > + {/if} - - + + - {#each (model?.actions ?? []).filter((action) => !(action?.__webui__ ?? false)) as action} + {#if isLastMessage} + {#each model?.actions ?? [] as action}