fix: message delete issue

This commit is contained in:
Timothy J. Baek 2024-06-16 22:28:26 -07:00
parent 1efa25eed5
commit 4a67ae1195
2 changed files with 94 additions and 81 deletions

View File

@ -202,38 +202,51 @@
}, 100); }, 100);
}; };
const messageDeleteHandler = async (messageId) => { const deleteMessageHandler = async (messageId) => {
const messageToDelete = history.messages[messageId]; const messageToDelete = history.messages[messageId];
const messageParentId = messageToDelete.parentId;
const messageChildrenIds = messageToDelete.childrenIds ?? []; const parentMessageId = messageToDelete.parentId;
const hasSibling = messageChildrenIds.some( const childMessageIds = messageToDelete.childrenIds ?? [];
const hasDescendantMessages = childMessageIds.some(
(childId) => history.messages[childId]?.childrenIds?.length > 0 (childId) => history.messages[childId]?.childrenIds?.length > 0
); );
messageChildrenIds.forEach((childId) => {
const child = history.messages[childId]; history.currentId = parentMessageId;
if (child && child.childrenIds) { await tick();
if (child.childrenIds.length === 0 && !hasSibling) {
// if last prompt/response pair // Remove the message itself from the parent message's children array
history.messages[messageParentId].childrenIds = []; history.messages[parentMessageId].childrenIds = history.messages[
history.currentId = messageParentId; parentMessageId
].childrenIds.filter((id) => id !== messageId);
await tick();
childMessageIds.forEach((childId) => {
const childMessage = history.messages[childId];
if (childMessage && childMessage.childrenIds) {
if (childMessage.childrenIds.length === 0 && !hasDescendantMessages) {
// If there are no other responses/prompts
history.messages[parentMessageId].childrenIds = [];
} else { } else {
child.childrenIds.forEach((grandChildId) => { childMessage.childrenIds.forEach((grandChildId) => {
if (history.messages[grandChildId]) { if (history.messages[grandChildId]) {
history.messages[grandChildId].parentId = messageParentId; history.messages[grandChildId].parentId = parentMessageId;
history.messages[messageParentId].childrenIds.push(grandChildId); history.messages[parentMessageId].childrenIds.push(grandChildId);
} }
}); });
} }
} }
// remove response
history.messages[messageParentId].childrenIds = history.messages[ // Remove child message id from the parent message's children array
messageParentId history.messages[parentMessageId].childrenIds = history.messages[
parentMessageId
].childrenIds.filter((id) => id !== childId); ].childrenIds.filter((id) => id !== childId);
}); });
// remove prompt
history.messages[messageParentId].childrenIds = history.messages[ await tick();
messageParentId
].childrenIds.filter((id) => id !== messageId);
await updateChatById(localStorage.token, chatId, { await updateChatById(localStorage.token, chatId, {
messages: messages, messages: messages,
history: history history: history
@ -292,7 +305,7 @@
> >
{#if message.role === 'user'} {#if message.role === 'user'}
<UserMessage <UserMessage
on:delete={() => messageDeleteHandler(message.id)} on:delete={() => deleteMessageHandler(message.id)}
{user} {user}
{readOnly} {readOnly}
{message} {message}
@ -308,7 +321,7 @@
copyToClipboard={copyToClipboardWithToast} copyToClipboard={copyToClipboardWithToast}
/> />
{:else if $mobile || (history.messages[message.parentId]?.models?.length ?? 1) === 1} {:else if $mobile || (history.messages[message.parentId]?.models?.length ?? 1) === 1}
{#key message.id} {#key message.id && history.currentId}
<ResponseMessage <ResponseMessage
{message} {message}
siblings={history.messages[message.parentId]?.childrenIds ?? []} siblings={history.messages[message.parentId]?.childrenIds ?? []}

View File

@ -940,68 +940,68 @@
> >
</button> </button>
</Tooltip> </Tooltip>
{/if}
{#if isLastMessage && !readOnly} {#if isLastMessage}
<Tooltip content={$i18n.t('Continue Response')} placement="bottom"> <Tooltip content={$i18n.t('Continue Response')} placement="bottom">
<button <button
type="button" type="button"
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
: '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" : '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={() => { on:click={() => {
continueGeneration(); continueGeneration();
}} }}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.3"
stroke="currentColor"
class="w-4 h-4"
> >
<path <svg
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" fill="none"
d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" viewBox="0 0 24 24"
/> stroke-width="2.3"
<path stroke="currentColor"
stroke-linecap="round" class="w-4 h-4"
stroke-linejoin="round" >
d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" <path
/> stroke-linecap="round"
</svg> stroke-linejoin="round"
</button> d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
</Tooltip> />
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z"
/>
</svg>
</button>
</Tooltip>
<Tooltip content={$i18n.t('Regenerate')} placement="bottom"> <Tooltip content={$i18n.t('Regenerate')} placement="bottom">
<button <button
type="button" type="button"
class="{isLastMessage class="{isLastMessage
? 'visible' ? 'visible'
: '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" : '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={() => { on:click={() => {
showRateComment = false; showRateComment = false;
regenerateResponse(message); regenerateResponse(message);
}} }}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.3"
stroke="currentColor"
class="w-4 h-4"
> >
<path <svg
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" fill="none"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" viewBox="0 0 24 24"
/> stroke-width="2.3"
</svg> stroke="currentColor"
</button> class="w-4 h-4"
</Tooltip> >
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
/>
</svg>
</button>
</Tooltip>
{/if}
{/if} {/if}
{/if} {/if}
</div> </div>