Spaces:
Sleeping
Sleeping
File size: 5,060 Bytes
133d4af |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
<script lang="ts">
import { onMount, tick } from 'svelte';
import { createEventDispatcher } from 'svelte';
import { updateChatById } from '$lib/apis/chats';
import ResponseMessage from './ResponseMessage.svelte';
export let chatId;
export let history;
export let messages = [];
export let messageIdx;
export let parentMessage;
export let readOnly = false;
export let updateChatMessages: Function;
export let confirmEditResponseMessage: Function;
export let rateMessage: Function;
export let copyToClipboard: Function;
export let continueGeneration: Function;
export let regenerateResponse: Function;
const dispatch = createEventDispatcher();
let currentMessageId;
let groupedMessages = {};
let groupedMessagesIdx = {};
$: groupedMessages = parentMessage?.models.reduce((a, model, modelIdx) => {
// Find all messages that are children of the parent message and have the same model
const modelMessages = parentMessage?.childrenIds
.map((id) => history.messages[id])
.filter((m) => m.modelIdx === modelIdx);
return {
...a,
[modelIdx]: { messages: modelMessages }
};
}, {});
const showPreviousMessage = (modelIdx) => {
groupedMessagesIdx[modelIdx] = Math.max(0, groupedMessagesIdx[modelIdx] - 1);
let messageId = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]].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');
};
const showNextMessage = (modelIdx) => {
groupedMessagesIdx[modelIdx] = Math.min(
groupedMessages[modelIdx].messages.length - 1,
groupedMessagesIdx[modelIdx] + 1
);
let messageId = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]].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');
};
onMount(async () => {
await tick();
currentMessageId = messages[messageIdx].id;
for (const [modelIdx, model] of parentMessage?.models.entries()) {
const idx = groupedMessages[modelIdx].messages.findIndex((m) => m.id === currentMessageId);
if (idx !== -1) {
groupedMessagesIdx[modelIdx] = idx;
} else {
groupedMessagesIdx[modelIdx] = 0;
}
}
});
</script>
<div>
<div
class="flex snap-x snap-mandatory overflow-x-auto scrollbar-hidden"
id="responses-container-{parentMessage.id}"
>
{#key currentMessageId}
{#each Object.keys(groupedMessages) as modelIdx}
{#if groupedMessagesIdx[modelIdx] !== undefined && groupedMessages[modelIdx].messages.length > 0}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
{@const message = groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]}
<div
class=" snap-center min-w-80 w-full max-w-full m-1 border {history.messages[
currentMessageId
]?.modelIdx == modelIdx
? 'border-gray-100 dark:border-gray-800 border-[1.5px]'
: 'border-gray-50 dark:border-gray-850 '} transition p-5 rounded-3xl"
on:click={() => {
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');
}
}}
>
{#key history.currentId}
<ResponseMessage
message={groupedMessages[modelIdx].messages[groupedMessagesIdx[modelIdx]]}
siblings={groupedMessages[modelIdx].messages.map((m) => m.id)}
isLastMessage={true}
{updateChatMessages}
{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: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}
</div>
{/if}
{/each}
{/key}
</div>
</div>
|