toggle for Timestamps on messages

This commit is contained in:
RossAscends
2023-06-19 14:39:33 +09:00
parent 0490ca25b0
commit 4c51b1ffe1
5 changed files with 78 additions and 5 deletions

View File

@ -2036,6 +2036,11 @@
<span data-i18n="Message Timer">Message Timer</span>
</label>
<label for="messageTimestampsEnabled" class="checkbox_label">
<input id="messageTimestampsEnabled" type="checkbox" />
<span data-i18n="Chat Timestamps">Chat Timestamps</span>
</label>
<label for="auto_scroll_chat_to_bottom" class="checkbox_label">
<input id="auto_scroll_chat_to_bottom" type="checkbox" />
<span data-i18n="Auto-scroll Chat">Auto-scroll Chat</span>
@ -3072,7 +3077,10 @@
<div class="swipe_left fa-solid fa-chevron-left"></div>
<div class="mes_block">
<div class="ch_name flex-container justifySpaceBetween">
<span class="name_text">${characterName}</span>
<div class="flex-container flex1 alignitemscenter">
<span class="name_text">${characterName}</span>
<small class="timestamp"></small>
</div>
<div class="mes_buttons">
<div class="extraMesButtonsHint fa-solid fa-ellipsis"></div>

View File

@ -1,4 +1,4 @@
import { humanizedDateTime, favsToHotswap } from "./scripts/RossAscends-mods.js";
import { humanizedDateTime, favsToHotswap, getMessageTimeStamp } from "./scripts/RossAscends-mods.js";
import { encode } from "../scripts/gpt-2-3-tokenizer/mod.js";
import { GPT3BrowserTokenizer } from "../scripts/gpt-3-tokenizer/gpt3-tokenizer.js";
import {
@ -1090,6 +1090,7 @@ function getMessageFromTemplate({
timerTitle,
bookmarkLink,
forceAvatar,
timestamp,
} = {}) {
const mes = $('#message_template .mes').clone();
mes.attr({
@ -1099,10 +1100,12 @@ function getMessageFromTemplate({
'is_system': !!isSystem,
'bookmark_link': bookmarkLink,
'force_avatar': !!forceAvatar,
'timestamp': timestamp,
});
mes.find('.avatar img').attr('src', avatarImg);
mes.find('.ch_name .name_text').text(characterName);
mes.find('.mes_bias').html(bias);
mes.find('.timestamp').text(timestamp);
title && mes.attr('title', title);
timerValue && mes.find('.mes_timer').attr('title', timerTitle).text(timerValue);
@ -1150,6 +1153,7 @@ export function addCopyToCodeBlocks(messageElement) {
function addOneMessage(mes, { type = "normal", insertAfter = null, scroll = true } = {}) {
var messageText = mes["mes"];
var timestamp = mes.send_date;
if (mes?.extra?.display_text) {
messageText = mes.extra.display_text;
@ -1211,6 +1215,7 @@ function addOneMessage(mes, { type = "normal", insertAfter = null, scroll = true
title: title,
bookmarkLink: bookmarkLink,
forceAvatar: mes.force_avatar,
timestamp: timestamp,
...formatGenerationTimer(mes.gen_started, mes.gen_finished),
};
@ -2639,7 +2644,7 @@ export async function sendMessageAsUser(textareaText, messageBias) {
chat[chat.length - 1]['name'] = name1;
chat[chat.length - 1]['is_user'] = true;
chat[chat.length - 1]['is_name'] = true;
chat[chat.length - 1]['send_date'] = humanizedDateTime();
chat[chat.length - 1]['send_date'] = getMessageTimeStamp();
chat[chat.length - 1]['mes'] = substituteParams(textareaText);
chat[chat.length - 1]['extra'] = {};
@ -3343,7 +3348,7 @@ function saveReply(type, getMessage, this_mes_is_name, title) {
chat[chat.length - 1]['name'] = name2;
chat[chat.length - 1]['is_user'] = false;
chat[chat.length - 1]['is_name'] = this_mes_is_name;
chat[chat.length - 1]['send_date'] = humanizedDateTime();
chat[chat.length - 1]['send_date'] = getMessageTimeStamp();
getMessage = $.trim(getMessage);
chat[chat.length - 1]['mes'] = getMessage;
chat[chat.length - 1]['title'] = title;
@ -3742,7 +3747,7 @@ async function getChatResult() {
name: name2,
is_user: false,
is_name: true,
send_date: humanizedDateTime(),
send_date: getMessageTimeStamp(),
mes: firstMes,
};

View File

@ -177,6 +177,29 @@ export function humanizedDateTime() {
return HumanizedDateTime;
}
//this is a common format version to display a timestamp on each chat message
//returns something like: June 19, 2023 2:20pm
export function getMessageTimeStamp() {
const date = Date.now();
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const d = new Date(date);
const month = months[d.getMonth()];
const day = d.getDate();
const year = d.getFullYear();
let hours = d.getHours();
const minutes = ('0' + d.getMinutes()).slice(-2);
let meridiem = 'am';
if (hours >= 12) {
meridiem = 'pm';
hours -= 12;
}
if (hours === 0) {
hours = 12;
}
const formattedDate = month + ' ' + day + ', ' + year + ' ' + hours + ':' + minutes + meridiem;
return formattedDate;
}
// triggers:
$("#rm_button_create").on("click", function () { //when "+New Character" is clicked

View File

@ -134,6 +134,7 @@ let power_user = {
allow_name2_display: false,
hotswap_enabled: true,
timer_enabled: true,
timestamps_enabled: true,
max_context_unlocked: false,
prefer_character_prompt: true,
prefer_character_jailbreak: true,
@ -182,6 +183,7 @@ const storage_keys = {
hotswap_enabled: 'HotswapEnabled',
timer_enabled: 'TimerEnabled',
timestamps_enabled: 'TimestampsEnabled',
};
let browser_has_focus = true;
@ -252,6 +254,13 @@ function switchTimer() {
$("#messageTimerEnabled").prop("checked", power_user.timer_enabled);
}
function switchTimestamps() {
const value = localStorage.getItem(storage_keys.timestamps_enabled);
power_user.timestamps_enabled = value === null ? true : value == "true";
$("body").toggleClass("no-timestamps", !power_user.timestamps_enabled);
$("#messageTimestampsEnabled").prop("checked", power_user.timestamps_enabled);
}
function switchUiMode() {
const fastUi = localStorage.getItem(storage_keys.fast_ui_mode);
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
@ -447,6 +456,13 @@ async function applyTheme(name) {
switchTimer();
}
},
{
key: 'timestamps_enabled',
action: async () => {
localStorage.setItem(storage_keys.timestamps_enabled, power_user.timestamps_enabled);
switchTimestamps();
}
},
{
key: 'hotswap_enabled',
action: async () => {
@ -484,6 +500,7 @@ switchMovingUI();
noShadows();
switchHotswap();
switchTimer();
switchTimestamps();
function loadPowerUserSettings(settings, data) {
// Load from settings.json
@ -505,11 +522,13 @@ function loadPowerUserSettings(settings, data) {
const noShadows = localStorage.getItem(storage_keys.noShadows);
const hotswap = localStorage.getItem(storage_keys.hotswap_enabled);
const timer = localStorage.getItem(storage_keys.timer_enabled);
const timestamps = localStorage.getItem(storage_keys.timestamps_enabled);
power_user.fast_ui_mode = fastUi === null ? true : fastUi == "true";
power_user.movingUI = movingUI === null ? false : movingUI == "true";
power_user.noShadows = noShadows === null ? false : noShadows == "true";
power_user.hotswap_enabled = hotswap === null ? true : hotswap == "true";
power_user.timer_enabled = timer === null ? true : timer == "true";
power_user.timestamps_enabled = timestamps === null ? true : timestamps == "true";
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
@ -554,6 +573,7 @@ function loadPowerUserSettings(settings, data) {
$("#allow_name2_display").prop("checked", power_user.allow_name2_display);
$("#hotswapEnabled").prop("checked", power_user.hotswap_enabled);
$("#messageTimerEnabled").prop("checked", power_user.timer_enabled);
$("#messageTimestampsEnabled").prop("checked", power_user.timestamps_enabled);
$("#prefer_character_prompt").prop("checked", power_user.prefer_character_prompt);
$("#prefer_character_jailbreak").prop("checked", power_user.prefer_character_jailbreak);
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
@ -809,6 +829,7 @@ async function saveTheme() {
noShadows: power_user.noShadows,
sheld_width: power_user.sheld_width,
timer_enabled: power_user.timer_enabled,
timestamps_enabled: power_user.timestamps_enabled,
hotswap_enabled: power_user.hotswap_enabled,
};
@ -1251,6 +1272,13 @@ $(document).ready(() => {
switchTimer();
});
$("#messageTimestampsEnabled").on("input", function () {
const value = !!$(this).prop('checked');
power_user.timestamps_enabled = value;
localStorage.setItem(storage_keys.timestamps_enabled, power_user.timestamps_enabled);
switchTimestamps();
});
$("#hotswapEnabled").on("input", function () {
const value = !!$(this).prop('checked');
power_user.hotswap_enabled = value;

View File

@ -768,6 +768,10 @@ body.no-timer .mes_timer {
display: none !important;
}
body.no-timestamps .timestamp {
display: none !important;
}
body.big-avatars .avatar {
width: 60px;
height: 90px;
@ -4305,6 +4309,11 @@ body.waifuMode #avatar_zoom_popup {
gap: 5px;
}
.timestamp {
font-size: calc(var(--mainFontSize) * 0.7);
font-weight: 400;
}
/* ---------- @media queries must always go at the bottom ------------*/
/*will apply to anything 1000px or less. this catches ipads, horizontal phones, and vertical phones)*/