`refactor/perf-printMessages` #4: Renamed `newMessage` to `messageElement` and `newMessageId` to `messageId`. (#4985) * If insert is false, `newMessage` may not be new, so I renamed `newMessage` to `messageElement` and `newMessageId` to `messageId`. I also rearranged some constants to improve readability. * Accept 0 as valid insertAfter/insertBefore targets * Yeah whatever --------- Co-authored-by: user <user@exmaple.com> Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

3e40ac1c27bd4446408820f221c735afb93e8bfe

DeclineThyself <235079501+DeclineThyself@users.noreply.github.com>

Signed
Parents: f8c373f55a8cdcba93c43d8a88b760ecb76ac600
1 files changed, +42 -48Showing whitespace changes
public/script.js+42 -48
@@ -2441,7 +2441,7 @@ function getMessageTextHTML(message, { messageId = chat.indexOf(message) }) {
24412441 */
24422442export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll = true, insertBefore = null, forceId = null, showSwipes = true, insert = true } = {}) {
24432443 // Callers push the new message to chat before calling addOneMessage
24442444 const newMessageIdmessageId = (() => {
24452445 if (typeof forceId === 'number') {
24462446 return forceId;
24472447 }
@@ -2458,8 +2458,6 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
24582458 return chat.length - 1;
24592459 })();
24602460
2461- const momentDate = timestampToMoment(mes.send_date);
2462- const timestamp = momentDate.isValid() ? momentDate.format('LL LT') : '';
24632461
24642462 let avatarImg = getThumbnailUrl('persona', user_avatar);
24652463
@@ -2469,13 +2467,11 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
24692467 avatarImg = mes.force_avatar;
24702468 } else if (this_chid === undefined) {
24712469 avatarImg = system_avatar;
2472- } else {
2470+ } else if (characters[this_chid] && characters[this_chid].avatar !== 'none') {
2473- if (characters[this_chid].avatar !== 'none') {
24742471 avatarImg = getThumbnailUrl('avatar', characters[this_chid].avatar);
24752472 } else {
24762473 avatarImg = default_avatar;
24772474 }
2478- }
24792475 //old processing:
24802476 //if message is from system, use the name provided in the message JSONL to proceed,
24812477 //if not system message, use name2 (char's name) to proceed
@@ -2484,9 +2480,14 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
24842480 // Special case for persona images.
24852481 avatarImg = mes.force_avatar;
24862482 }
2483+ const momentDate = timestampToMoment(mes.send_date);
2484+ const timestamp = momentDate.isValid() ? momentDate.format('LL LT') : '';
2485+ const messageHTML = getMessageTextHTML(mes, { messageId });
2486+ const bookmarkLink = mes?.extra?.bookmark_link;
2487+ const tokenCount = mes.extra?.token_count;
2488+ const { timerValue, timerTitle } = formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count, mes.extra?.reasoning_duration, mes.extra?.time_to_first_token);
24872489
2488- const messageHTML = getMessageTextHTML(mes, { messageId: newMessageId });
2490+ let messageElement;
2489- let newMessage;
24902491
24912492 if (type === 'swipe') {
24922493 // Forbidden black magic
@@ -2494,17 +2495,13 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
24942495 mes.swipe_id ??= 0;
24952496 mes.swipes ??= [mes.mes];
24962497 //This keeps listeners intact.
24972498 newMessagemessageElement = chatElement.find(`[mesid="${newMessageIdmessageId}"]`);
24982499 } else {
24992500 newMessagemessageElement = messageTemplate.clone();
25002501 }
25012502
2502- const { timerValue, timerTitle } = formatGenerationTimer(mes.gen_started, mes.gen_finished, mes.extra?.token_count, mes.extra?.reasoning_duration, mes.extra?.time_to_first_token);
2503+ messageElement.attr({
2503- const tokenCount = mes.extra?.token_count;
2504+ 'mesid': messageId,
2504- const bookmarkLink = mes?.extra?.bookmark_link;
2505-
2506- newMessage.attr({
2507- 'mesid': newMessageId,
25082505 'swipeid': mes.swipe_id ?? 0,
25092506 'ch_name': mes.name,
25102507 'is_user': mes.is_user,
@@ -2516,68 +2513,65 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
25162513 'type': mes.extra?.type ?? '',
25172514 });
25182515
25192516 newMessagemessageElement.find('.avatar img').attr('src', avatarImg);
25202517 newMessagemessageElement.find('.ch_name .name_text').text(mes.name);
25212518 newMessagemessageElement.find('.timestamp').text(timestamp).attr('title', `${mes.extra?.api ? mes.extra.api + ' - ' : ''}${mes.extra?.model ?? ''}`);
25222519 newMessagemessageElement.find('.mesIDDisplay').text(`#${newMessageIdmessageId}`);
25232520 tokenCount && newMessagemessageElement.find('.tokenCounterDisplay').text(`${tokenCount}t`);
25242521 mes.title && newMessagemessageElement.attr('title', mes.title);
25252522 timerValue && newMessagemessageElement.find('.mes_timer').attr('title', timerTitle).text(timerValue);
25262523 bookmarkLink && updateBookmarkDisplay(newMessagemessageElement);
25272524
25282525 if (mes.extra?.bias !== '') {
25292526 const bias = messageFormatting(mes.extra?.bias, '', false, false, -1, {}, false);
25302527 newMessagemessageElement.find('.mes_bias').html(bias);
25312528 }
25322529
25332530 updateReasoningUI(newMessagemessageElement);
25342531
25352532 if (power_user.timestamp_model_icon && mes.extra?.api) {
25362533 insertSVGIcon(newMessagemessageElement, mes.extra);
25372534 }
25382535
25392536 if (type !== 'swipe' && insert) {
25402537 if (!typeof insertAfter === 'number' && !insertBeforeinsertAfter >= 0) {
2541- chatElement.append(newMessage);
2542- }
2543- else if (insertAfter) {
25442538 const target = chatElement.find(`.mes[mesid="${insertAfter}"]`);
25452539 $(newMessagemessageElement).insertAfter(target);
2546- } else {
2540+ } else if (typeof insertBefore === 'number' && insertBefore >= 0) {
25472541 const target = chatElement.find(`.mes[mesid="${insertBefore}"]`);
25482542 $(newMessagemessageElement).insertBefore(target);
2543+ } else {
2544+ chatElement.append(messageElement);
25492545 }
25502546 }
25512547
25522548 const isSmallSys =if (mes?.extra?.isSmallSys; === true) {
2553-
2549+ messageElement.addClass('smallSysMes');
2554- if (isSmallSys === true) {
2555- newMessage.addClass('smallSysMes');
25562550 }
25572551
25582552 if (Array.isArray(mes?.extra?.tool_invocations)) {
25592553 newMessagemessageElement.addClass('toolCall');
25602554 }
25612555
25622556 updateMessageItemizedPromptButton(mes, { messageId: newMessageId, messageElement: newMessage });
25632557
25642558 newMessagemessageElement.find('.avatar img').on('error', function () {
25652559 $(this).hide();
25662560 $(this).parent().html('<div class="missing-avatar fa-solid fa-user-slash"></div>');
25672561 });
25682562
25692563 appendMediaToMessage(mes, newMessagemessageElement, scroll ? SCROLL_BEHAVIOR.ADJUST : SCROLL_BEHAVIOR.NONE);
25702564 newMessagemessageElement.find('.mes_text').html(messageHTML);
25712565 addCopyToCodeBlocks(newMessagemessageElement);
25722566
25732567 // Set the swipes counter for all non-user messages.
25742568 if (!mes.is_user) {
25752569 updateSwipeCounter(newMessageIdmessageId, { messageElementmessage: newMessagemes, messageElement });
25762570 }
25772571
25782572 // The caller should handle the rest after adding a message to DOM.
25792573 if (!insert) {
25802574 return newMessagemessageElement;
25812575 }
25822576
25832577 //last_mes should always be updated.
@@ -2592,10 +2586,10 @@ export function addOneMessage(mes, { type = 'normal', insertAfter = null, scroll
25922586 scrollChatToBottom({ waitForFrame: true });
25932587 }
25942588
25952589 applyCharacterTagsToMessageDivs({ mesIds: newMessageIdmessageId });
25962590 updateEditArrowClasses();
25972591
25982592 return newMessagemessageElement;
25992593}
26002594
26012595/**