toggle for Timestamps on messages

public/index.html

@@ -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>

public/script.js

@@ -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,
         };
 

public/scripts/RossAscends-mods.js

@@ -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

public/scripts/power-user.js

@@ -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;

public/style.css

@@ -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)*/