From 40a7ac9caac1e38c04d48f30a13704e1d11dbad1 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Sun, 18 Feb 2024 14:56:31 -0800 Subject: [PATCH 01/15] feat: delete message scaffolding --- .../chat/Messages/UserMessage.svelte | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index 998fe4e4..78eadb68 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -281,6 +281,30 @@ /> + + {/if} From c3ed6fe974c5debcd1d4281c2b331c9199db5c42 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Sun, 18 Feb 2024 14:58:26 -0800 Subject: [PATCH 02/15] Update UserMessage.svelte --- src/lib/components/chat/Messages/UserMessage.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index 78eadb68..196e5972 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -295,7 +295,7 @@ viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" - class="w-6 h-6" + class="w-4 h-4" > Date: Sun, 18 Feb 2024 17:03:40 -0800 Subject: [PATCH 03/15] add isFirstMessage prop to UserMessage component --- src/lib/components/chat/Messages.svelte | 1 + src/lib/components/chat/Messages/UserMessage.svelte | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index b02ba116..082b65fc 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -239,6 +239,7 @@ - + {/if} {/if} From 60c99a44f8cacd687ae0e3cea123365a1506c567 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Tue, 20 Feb 2024 13:24:22 -0800 Subject: [PATCH 04/15] remove user message and response from DOM as pair --- src/lib/components/chat/Messages.svelte | 166 ++++++++++-------- .../chat/Messages/UserMessage.svelte | 8 +- 2 files changed, 93 insertions(+), 81 deletions(-) diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 082b65fc..53292027 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -221,6 +221,15 @@ scrollToBottom(); }, 100); }; + + const deleteMessage = async (messageId) => { + history.messages[messageId].deleted = true; + history.messages[history.messages[messageId].childrenIds[0]].deleted = true; + updateChatById(localStorage.token, chatId, { + messages: messages, + history: history + }); + }; {#if messages.length == 0} @@ -229,90 +238,93 @@
{#key chatId} {#each messages as message, messageIdx} -
-
- {#if message.role === 'user'} - message.parentId === null) - .map((message) => message.id) ?? []} - {confirmEditMessage} - {showPreviousMessage} - {showNextMessage} - {copyToClipboard} - /> + {#if !message.deleted} +
+
+ {#if message.role === 'user'} + deleteMessage(message.id)} + user={$user} + {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} + /> - {#if messages.length - 1 === messageIdx && processing !== ''} -
-
-
+
+ + @keyframes spinner_8HQG { + 0%, + 57.14% { + animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); + transform: translate(0); + } + 28.57% { + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); + transform: translateY(-6px); + } + 100% { + transform: translate(0); + } + } +
+
+ {processing} +
-
- {processing} -
-
+ {/if} + {:else} + {/if} - {:else} - - {/if} +
-
+ {/if} {/each} {#if bottomPadding} diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index f64b98df..7dfca9e3 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -1,11 +1,13 @@ @@ -247,7 +246,7 @@ > {#if message.role === 'user'} deleteMessage(message.id)} + on:delete={() => deleteMessagePair(message.id)} user={$user} {message} isFirstMessage={messageIdx === 0} diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index 7dfca9e3..ca1cff59 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -45,6 +45,10 @@ edit = false; editedContent = ''; }; + + const deleteMessageHandler = async () => { + dispatch('delete', message.id); + };
@@ -288,7 +292,9 @@ {#if !isFirstMessage}
diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte index be84467d..737a13e0 100644 --- a/src/routes/(app)/c/[id]/+page.svelte +++ b/src/routes/(app)/c/[id]/+page.svelte @@ -858,6 +858,7 @@ {sendPrompt} {continueGeneration} {regenerateResponse} + {stopResponse} />
From 95b8edf6b3e1ac53749bddf70488836a931860a1 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Tue, 20 Feb 2024 16:00:57 -0800 Subject: [PATCH 09/15] use cancelChatCompletion API call instead of stopResponse function --- src/lib/components/chat/Messages.svelte | 4 ++-- src/routes/(app)/+page.svelte | 1 - src/routes/(app)/c/[id]/+page.svelte | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 9efab1e5..e8b9a80f 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -11,12 +11,12 @@ import ResponseMessage from './Messages/ResponseMessage.svelte'; import Placeholder from './Messages/Placeholder.svelte'; import Spinner from '../common/Spinner.svelte'; + import { cancelChatCompletion } from '$lib/apis/ollama'; export let chatId = ''; export let sendPrompt: Function; export let continueGeneration: Function; export let regenerateResponse: Function; - export let stopResponse: Function; export let processing = ''; export let bottomPadding = false; @@ -229,7 +229,7 @@ await updateChatById(localStorage.token, chatId, { history }); await chats.set(await getChatList(localStorage.token)); - stopResponse(); + await cancelChatCompletion(localStorage.token, chatId); }; diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte index b93dc860..33409ec3 100644 --- a/src/routes/(app)/+page.svelte +++ b/src/routes/(app)/+page.svelte @@ -828,7 +828,6 @@ {sendPrompt} {continueGeneration} {regenerateResponse} - {stopResponse} /> diff --git a/src/routes/(app)/c/[id]/+page.svelte b/src/routes/(app)/c/[id]/+page.svelte index 737a13e0..be84467d 100644 --- a/src/routes/(app)/c/[id]/+page.svelte +++ b/src/routes/(app)/c/[id]/+page.svelte @@ -858,7 +858,6 @@ {sendPrompt} {continueGeneration} {regenerateResponse} - {stopResponse} /> From a655ccdd06aa9b0ebcb270b789589eba920c7098 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Tue, 20 Feb 2024 16:35:44 -0800 Subject: [PATCH 10/15] only cancel chat completion if the deleted message is the most recently sent --- src/lib/components/chat/Messages.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index e8b9a80f..6bb84069 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -227,9 +227,13 @@ history.messages[messageId].deleted = true; history.messages[history.messages[messageId].childrenIds[0]].deleted = true; + const responseId = history.messages[messageId].childrenIds[0]; + if (history.messages[responseId].childrenIds.length === 0) { + await cancelChatCompletion(localStorage.token, chatId); + } + await updateChatById(localStorage.token, chatId, { history }); await chats.set(await getChatList(localStorage.token)); - await cancelChatCompletion(localStorage.token, chatId); }; From 7c4d818f2dfad5604451d605edd318655d21070c Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Tue, 20 Feb 2024 18:03:23 -0800 Subject: [PATCH 11/15] refac: styling --- .../chat/Messages/UserMessage.svelte | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte index ca1cff59..6f41c5df 100644 --- a/src/lib/components/chat/Messages/UserMessage.svelte +++ b/src/lib/components/chat/Messages/UserMessage.svelte @@ -196,11 +196,11 @@ 
{message.content}
-
+
{#if siblings.length > 1}
-
+
{siblings.indexOf(message.id) + 1} / {siblings.length}
{#if !isFirstMessage} - - {/if} + + + + + {/if}
{/if} From c42ac39dc4354c409481901a0c45d7b0daac8417 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Tue, 20 Feb 2024 19:47:30 -0800 Subject: [PATCH 12/15] Recursively set delete=true flag for all children messages --- src/lib/components/chat/Messages.svelte | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 6bb84069..7766b348 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -223,15 +223,18 @@ }, 100); }; - const deleteMessagePair = async (messageId) => { - history.messages[messageId].deleted = true; - history.messages[history.messages[messageId].childrenIds[0]].deleted = true; + const deleteMessageAndDescendants = async (messageId: string) => { + if (history.messages[messageId]) { + history.messages[messageId].deleted = true; - const responseId = history.messages[messageId].childrenIds[0]; - if (history.messages[responseId].childrenIds.length === 0) { - await cancelChatCompletion(localStorage.token, chatId); + for (const childId of history.messages[messageId].childrenIds) { + await deleteMessageAndDescendants(childId); + } } + }; + const triggerDeleteMessageRecursive = async (messageId: string) => { + await deleteMessageAndDescendants(messageId); await updateChatById(localStorage.token, chatId, { history }); await chats.set(await getChatList(localStorage.token)); }; @@ -252,7 +255,7 @@ > {#if message.role === 'user'} deleteMessagePair(message.id)} + on:delete={() => triggerDeleteMessageRecursive(message.id)} user={$user} {message} isFirstMessage={messageIdx === 0} From eaa685043164f92c11b040c02ee5ba7de8e50e94 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Thu, 22 Feb 2024 17:53:58 -0800 Subject: [PATCH 13/15] Update Messages.svelte --- src/lib/components/chat/Messages.svelte | 28 ++++++++++++++++++------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 7766b348..20a6fcca 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -223,20 +223,32 @@ }, 100); }; - const deleteMessageAndDescendants = async (messageId: string) => { + // TODO: change delete behaviour + // const deleteMessageAndDescendants = async (messageId: string) => { + // if (history.messages[messageId]) { + // history.messages[messageId].deleted = true; + + // for (const childId of history.messages[messageId].childrenIds) { + // await deleteMessageAndDescendants(childId); + // } + // } + // }; + + // const triggerDeleteMessageRecursive = async (messageId: string) => { + // await deleteMessageAndDescendants(messageId); + // await updateChatById(localStorage.token, chatId, { history }); + // await chats.set(await getChatList(localStorage.token)); + // }; + + const messageDeleteHandler = async (messageId) => { if (history.messages[messageId]) { history.messages[messageId].deleted = true; for (const childId of history.messages[messageId].childrenIds) { - await deleteMessageAndDescendants(childId); + history.messages[childId].deleted = true; } } - }; - - const triggerDeleteMessageRecursive = async (messageId: string) => { - await deleteMessageAndDescendants(messageId); await updateChatById(localStorage.token, chatId, { history }); - await chats.set(await getChatList(localStorage.token)); }; @@ -255,7 +267,7 @@ > {#if message.role === 'user'} triggerDeleteMessageRecursive(message.id)} + on:delete={() => messageDeleteHandler(message.id)} user={$user} {message} isFirstMessage={messageIdx === 0} From a3a0e18307369214ae58b70aa3b3d4e09cc00718 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Thu, 22 Feb 2024 17:54:22 -0800 Subject: [PATCH 14/15] Update Messages.svelte --- src/lib/components/chat/Messages.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 20a6fcca..ce5a3747 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -11,7 +11,6 @@ import ResponseMessage from './Messages/ResponseMessage.svelte'; import Placeholder from './Messages/Placeholder.svelte'; import Spinner from '../common/Spinner.svelte'; - import { cancelChatCompletion } from '$lib/apis/ollama'; export let chatId = ''; export let sendPrompt: Function; From a2e2dd89a5596269f836b3e711c6df1def1d5934 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Thu, 22 Feb 2024 17:58:18 -0800 Subject: [PATCH 15/15] Update Messages.svelte --- src/lib/components/chat/Messages.svelte | 42 ++++++++++++------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index b22873ed..c9e516ab 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -329,28 +329,28 @@ {/if} {:else} { - console.log('save', e); + {message} + modelfiles={selectedModelfiles} + siblings={history.messages[message.parentId]?.childrenIds ?? []} + isLastMessage={messageIdx + 1 === messages.length} + {confirmEditResponseMessage} + {showPreviousMessage} + {showNextMessage} + {rateMessage} + {copyToClipboard} + {continueGeneration} + {regenerateResponse} + 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 - }); - }} - /> + const message = e.detail; + history.messages[message.id] = message; + await updateChatById(localStorage.token, chatId, { + messages: messages, + history: history + }); + }} + /> {/if}