Add lazy chat messages rendering

This commit is contained in:
Cohee1207
2023-08-12 13:10:41 +03:00
parent 2a1eb029a2
commit 82f6d11795
3 changed files with 44 additions and 0 deletions

View File

@ -2472,6 +2472,22 @@
</div>
</div>
</div>
<div class="range-block">
<div class="range-block-title">
<span data-i18n="Lazy Chat Loading">Lazy Chat Loading</span><br>
<small># of messages (0 = disabled)</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range">
<input id="lazy_load" class="wide100p" type="range" min="0" max="100" step="10" value="0">
<div class="slider_hint">
<span>0</span>
<span>50</span>
<span>100</span>
</div>
</div>
</div>
</div>
<div>
<span data-i18n="Avatar Style">Avatar Style:</span><br>
<label>

View File

@ -1193,6 +1193,16 @@ function printMessages() {
chat.forEach(function (item, i, arr) {
addOneMessage(item, { scroll: i === arr.length - 1 });
});
if (power_user.lazy_load > 0) {
const height = $('#chat').height();
const scrollHeight = $('#chat').prop('scrollHeight');
// Only hide if oveflowing the scroll
if (scrollHeight > height) {
$('#chat').children('.mes').slice(0, -power_user.lazy_load).hide();
}
}
}
function clearChat() {
@ -7144,6 +7154,17 @@ $(document).ready(function () {
updateVisibleDivs('#rm_print_characters_block', true);
}, 5));
$('#chat').on('scroll', async () => {
// if on the start of the chat and has hidden messages
if ($('#chat').scrollTop() === 0 && $('#chat').children('.mes').not(':visible').length > 0) {
// show next hidden messages
const prevHeight = $('#chat').prop('scrollHeight');
$('#chat').children('.mes').not(':visible').slice(-power_user.lazy_load).show();
const newHeight = $('#chat').prop('scrollHeight');
$('#chat').scrollTop(newHeight - prevHeight);
}
});
$("#chat").on('mousewheel touchstart', () => {
scrollLock = true;
});

View File

@ -193,6 +193,7 @@ let power_user = {
custom_stopping_strings_macro: true,
fuzzy_search: false,
encode_tags: false,
lazy_load: 0,
};
let themes = [];
@ -688,6 +689,7 @@ function loadPowerUserSettings(settings, data) {
$('#fuzzy_search_checkbox').prop("checked", power_user.fuzzy_search);
$('#persona_show_notifications').prop("checked", power_user.persona_show_notifications);
$('#encode_tags').prop("checked", power_user.encode_tags);
$('#lazy_load').val(Number(power_user.lazy_load));
$("#console_log_prompts").prop("checked", power_user.console_log_prompts);
$('#auto_fix_generated_markdown').prop("checked", power_user.auto_fix_generated_markdown);
@ -2040,6 +2042,11 @@ $(document).ready(() => {
saveSettingsDebounced();
});
$('#lazy_load').on('input', function () {
power_user.lazy_load = Number($(this).val());
saveSettingsDebounced();
});
$(window).on('focus', function () {
browser_has_focus = true;
});