// UserScript

// UserScript
// @name Reload & autoscroll buttons at character.ai
// @namespace https://sleazyfork.org/en/users/927364-mozgovlom
// @match https://beta.character.ai/chat?char=*
// @grant none
// @version 1.0.1
// @author Mozgovlom
// @description Adds reload and scroll buttons and autoscroll switch to ease rolling for new messages.
// @icon https://characterai.io/static/logo512.png
// @require https://code.jquery.com/jquery-3.6.1.min.js

// /UserScript
'use strict';

// If enabled, will hide new feedback buttons
// Default: false
const hide_new_rating = false;
// If enabled, will show reply number inside blue "c.AI" label, but only after page reload
// Default: true
const numbering = true;
// If enabled, will always show « and » buttons to scroll messages by 5
// Default: true
const quickscrll = true;
// If enabled, will add a row of buttons to hide AI generated images, blur interlocutors
// Default: true
const hide_img_sw = true;
// If enabled, will add a button to apply premade "themes"
// Default: true
const theme_chat_style_sw = false;

const DAY_background_image = "https://i.imgur.com/qzWTGAn.jpg"; //----------LIGHT mode; backgroung image url goes inside " " ----------
const NIGHT_background_image = "https://i.imgur.com/xnDnQHc.jpg"; //----------DARK mode; backgroung image url goes inside " " ----------
const DAY_user_bubble = "lightsteelblue"; //----------LIGHT mode; USER chat buble color goes inside " " ----------
const NIGHT_user_bubble = "#310062"; //----------DARK mode; USER chat buble color goes inside " " ----------
const DAY_char_bubble = "aquamarine"; //----------LIGHT mode; CHAR chat buble color goes inside " " ----------
const NIGHT_char_buble = "#560319"; //----------DARK mode; CHAR chat buble color goes inside " " ----------

// Timed MutationObserver
function waitForElement(querySelector, timeout) {
return new Promise((resolve, reject) => {
var timer = false;
if (document.querySelectorAll(querySelector).length) return resolve();
const observer = new MutationObserver(() => {
if (document.querySelectorAll(querySelector).length) {
observer.disconnect();
if (timer !== false) clearTimeout(timer);
return resolve();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
if (timeout) timer = setTimeout(() => {
observer.disconnect();
reject();
}, timeout);
});
};
// Arrow right and arrow left keypresses for "swiping"
function ARKeyDown() {
document.body.dispatchEvent(
new KeyboardEvent('keydown', {
bubbles: true,
key: 'ArrowRight',
})
);
console.log("Arrow right pressed");
};
function ALKeyDown() {
document.body.dispatchEvent(
new KeyboardEvent('keydown', {
bubbles: true,
key: 'ArrowLeft',
})
);
console.log("Arrow left pressed");
};
// Storing swtich status for page refreshing
let restart1 = sessionStorage.getItem("restart1");
console.log("Reload&Scroll status =", restart1);
let restart2 = sessionStorage.getItem("restart2");
console.log("AutoScroll switch status =", restart2);
let restart3 = sessionStorage.getItem("restart3");
console.log("Hide generated images switch status =", restart3);
let restartTheming1 = sessionStorage.getItem("restartTheming1");
console.log("Wallpaper switch status =", restartTheming1);
let restartTheming2 = sessionStorage.getItem("restartTheming2");
console.log("Chat backgroung color switch status =", restartTheming2);
let restartTheming4 = sessionStorage.getItem("restartTheming4");
console.log("Chat bubbles style 1 switch status =", restartTheming4);
let restartTheming5 = sessionStorage.getItem("restartTheming5");
console.log("Chat bubbles style 2 switch status =", restartTheming5);
// needed for setInterval autoscrollreload
var tid;
// Autoscrolling
function autoscrollreload() {
waitForElement("div[class='swiper-button-next']", 1000).then(function() {
console.log("swiper-button-next is loaded.. do stuff");
ARKeyDown();
}).catch(() => {
});
waitForElement('div[class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default"]', 1000).then(function() {
console.log("Chat Error alert is loaded.. do stuff");
document.querySelector('div[class="Toastify__toast Toastify__toast-theme--light Toastify__toast--default"]>div>div>div>div[class="row"]>div[class="col"]>button[class="btn btn-primary"]').click();
}).catch(() => {
});
};

⎗
✓
display:block;
color: black;
font-weight: bold;
background-color: lightsteelblue;

}
.scrl-btn label input {
visibility:hidden;
position: absolute;
left: -10;
width:0px;
height:0px;
}
.scrl-btn input:checked + span {
background-color:#911;
color:#fff;
}
.swiper-button-next-nexts-btn {
cursor: pointer;
user-select: none;
position: absolute;
top: 45%;
right: 0;
color: black;
font-weight: 700;
height: 30px;
z-index: 10;
justify-content: center;
align-items: center;
font-family: swiper-icons;
margin-top: -18px;
transform: scale(0.6, 1.5);
}
.swiper-button-next-nexts-btn:hover {
color: #3c85f6;
}
.swiper-button-next-nexts-btn::after {content: "next" "next";}
.swiper-button-prev-prevs-btn {
cursor: pointer;
user-select: none;
position: absolute;
top: 45%;
left: 0;
color: black;
font-weight: 700;
height: 30px;
z-index: 10;
justify-content: center;
align-items: center;
font-family: swiper-icons;
margin-top: -18px;
transform: scale(0.6, 1.5);
}
.swiper-button-prev-prevs-btn:hover {
color: #3c85f6;
}
.swiper-button-prev-prevs-btn::after {content: "prev" "prev";}
`

let styleHideRate = document.createElement('style');
styleHideRate.innerHTML = div[class="annotation-buttons-container col mb-3"]>div[class="d-flex align-items-center"]:nth-of-type(2) {display: none !important;}
if (hide_new_rating) {
document.body.appendChild(styleHideRate);
};

if (restart1) {
waitForElement("div[class='msg-row msg-row-light-bg']", 30000).then(function() {
console.log("Chat is loaded.. do stuff");
for (let step = 0; step < 40; step++) {
ARKeyDown();
};
}).catch(() => {
console.log("Chat did not load in 30 seconds");
});
sessionStorage.removeItem("restart1");
};

if (restart3) {
buttonhideImg.innerHTML = "Im";
document.body.appendChild(styleHideImg);
console.log("Checkbox imageGEN remains checked");
};

function add_number () {
var mes_num = document.querySelectorAll('div[class="swiper-wrapper"]>div>div>div>div>span>div>div[class="d-flex flex-row"]>div[class="d-flex flex-column"]');
for (let i = 0; i < mes_num.length; i++) {
// console.log (mes_num[i].innerHTML);
mes_num[i].innerHTML = mes_num[i].innerHTML.replace(mes_num[i].innerHTML, 'c.AI | ' + (i + 1));
}
};

waitForElement("div[class='msg-row msg-row-light-bg']", 30000).then(function() {
console.log("Chat is loaded.. do stuff");
if (quickscrll) {
$('div[class="swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-autoheight message-slider"]').append(buttonnextsHTML);
$('div[class="swiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-autoheight message-slider"]').append(buttonprevsHTML);
};
if (numbering) {
add_number ();
glowie ();
const mes_num_observer_row = new MutationObserver (
function () {
add_number ();
glowie ();
});
mes_num_observer_row.observe(document.querySelector('div[class="swiper-wrapper"]'), {childList: true});
const mes_num_observer_col = new MutationObserver (
function () {
mes_num_observer_row.observe(document.querySelector('div[class="swiper-wrapper"]'), {childList: true});
});
mes_num_observer_col.observe(document.querySelector('div[class="infinite-scroll-component "]'), {childList: true});
};
}).catch(() => {
console.log("Chat did not load in 30 seconds");
});

/*
//----------------------------------------Chat style theming script section begins here----------------------------------------
//
let styleThemeStyleButt = document.createElement('style');
styleThemeStyleButt.innerHTML=.Theming-btn-dropdown { cursor: pointer; user-select: none; border: 3px solid gray; padding: 4px; width: 9%; position: absolute; bottom: 1%; left: 18%; background-color: lightsteelblue; color: black; font-weight: bold; text-align: center; z-index: 100; margin: 0 0 0 4px; border-radius: 0 0 0 0; } .Theming-dropdown-content { display: none; position: absolute; background-color: lightsteelblue; width: 100%; z-index: 101; } .ThemingListItem { color: black; padding: 4px; text-decoration: none; display: block; } .ThemingListItem:hover { background-color: #789ac7; } .Theming-btn-dropdown:hover .Theming-dropdown-content { display: block; bottom: 110%; margin: 0 0 0px -4px; border-radius: 0 0 0 0; }
if (theme_chat_style_sw) {
document.body.appendChild(styleThemeStyleButt);
};

if (localStorage.getItem ("darkMode") === "true") {
var VAR_background_image = NIGHT_background_image;
var VAR_user_bubble = NIGHT_user_bubble;
var VAR_char_bubble = NIGHT_char_buble;
} else {
var VAR_background_image = DAY_background_image;
var VAR_user_bubble = DAY_user_bubble;
var VAR_char_bubble = DAY_char_bubble;
};

let styleCustomTheming1 = document.createElement('style');
styleCustomTheming1.classList.add("CustomTheme1");
styleCustomTheming1.innerHTML = 'body {background-image: url("' + VAR_background_image + '"); background-repeat: no-repeat; background-size: cover;}'

let styleCustomTheming2 = document.createElement('style');
styleCustomTheming2.classList.add("CustomTheme2");
styleCustomTheming2.innerHTML = 'div[class="row chatdisplay2"]{background-color: var(--bs-body-bg);} div[class="row chatfooterbg-normal"] {background-color: var(--bs-body-bg) !important;}'

let styleCustomThemingBub = document.createElement('style');
styleCustomThemingBub.classList.add("CustomThemeBubbleColor");
styleCustomThemingBub.innerHTML = 'div[class="row p-0 m-0"]:has(div[class="msg user-msg"]){background-color:' + VAR_user_bubble + ';} div[class="row p-0 m-0"]:has(div[class="msg char-msg"]){background-color: ' + VAR_char_bubble + ';}'

let buttonDropMenuTheming = document.createElement('div');
buttonDropMenuTheming.innerHTML = "Chat style";
buttonDropMenuTheming.classList.add("Theming-btn");
frameDropMenuTheming.appendChild(buttonDropMenuTheming);

let menuDropdownTheming = document.createElement('div');
menuDropdownTheming.classList.add("Theming-dropdown-content");
frameDropMenuTheming.appendChild(menuDropdownTheming);

//----------------------------------------Wallpaper----------------------------------------
let mDropdownTheming1 = document.createElement('div');
mDropdownTheming1.innerHTML = "Set WP";
mDropdownTheming1.classList.add("ThemingListItem");
menuDropdownTheming.appendChild(mDropdownTheming1);
mDropdownTheming1.onclick = function (){
if (document.querySelectorAll('style[class="CustomTheme1"]').length) {
document.body.removeChild(styleCustomTheming1);
mDropdownTheming1.innerHTML = "Set WP";
sessionStorage.removeItem("restartTheming1");
} else {
document.body.appendChild(styleCustomTheming1);
mDropdownTheming1.innerHTML = "Remove WP";
sessionStorage.setItem("restartTheming1", "true");
}
};
if (restartTheming1) {
mDropdownTheming1.innerHTML = "Remove WP";
document.body.appendChild(styleCustomTheming1);
console.log("Checkbox Wallpaper remains checked");
};
//----------------------------------------Chat background color----------------------------------------
let mDropdownTheming2 = document.createElement('div');
mDropdownTheming2.innerHTML = "Set chat BG";
mDropdownTheming2.classList.add("ThemingListItem");
menuDropdownTheming.appendChild(mDropdownTheming2);
mDropdownTheming2.onclick = function (){
if (document.querySelectorAll('style[class="CustomTheme2"]').length) {
document.body.removeChild(styleCustomTheming2);
mDropdownTheming2.innerHTML = "Set chat BG";
sessionStorage.removeItem("restartTheming2");
} else {
document.body.appendChild(styleCustomTheming2);
mDropdownTheming2.innerHTML = "Remove chat BG";
sessionStorage.setItem("restartTheming2", "true");
}
};
if (restartTheming2) {
mDropdownTheming2.innerHTML = "Remove chat BG";
document.body.appendChild(styleCustomTheming2);
console.log("Checkbox Chat backgroung color remains checked");
};
//----------------------------------------Native Dark Mode----------------------------------------
let mDropdownTheming3 = document.createElement('div');
mDropdownTheming3.classList.add("ThemingListItem");
menuDropdownTheming.appendChild(mDropdownTheming3);
if (localStorage.getItem ("darkMode") === "true") {
mDropdownTheming3.innerHTML = "Light Mode";
} else {
mDropdownTheming3.innerHTML = "Dark Mode";
}
mDropdownTheming3.onclick = function (){
if (localStorage.getItem ("darkMode") === "true") {
localStorage.setItem ("darkMode", "false");
mDropdownTheming3.innerHTML = "Dark Mode 🔄❗";
} else {
localStorage.setItem ("darkMode", "true");
mDropdownTheming3.innerHTML = "Light Mode 🔄❗";
}
};
//----------------------------------------Chat bubbles style 1----------------------------------------
let mDropdownTheming4 = document.createElement('div');
mDropdownTheming4.innerHTML = "Set chat 💬 1";
mDropdownTheming4.classList.add("ThemingListItem");
menuDropdownTheming.appendChild(mDropdownTheming4);
mDropdownTheming4.onclick = function (){
if (document.querySelectorAll('style[class="CustomTheme5"]').length) {
document.body.removeChild(styleCustomTheming5);
document.body.removeChild(styleCustomThemingBub);
mDropdownTheming5.innerHTML = "Set chat 💬 2";
sessionStorage.removeItem("restartTheming5");
}
if (document.querySelectorAll('style[class="CustomTheme4"]').length) {
document.body.removeChild(styleCustomTheming4);
document.body.removeChild(styleCustomThemingBub);
mDropdownTheming4.innerHTML = "Set chat 💬 1";
sessionStorage.removeItem("restartTheming4");
} else {
document.body.appendChild(styleCustomTheming4);
document.body.appendChild(styleCustomThemingBub);
mDropdownTheming4.innerHTML = "Remove chat 💬 1";
sessionStorage.setItem("restartTheming4", "true");
}
};
if (restartTheming4) {
mDropdownTheming4.innerHTML = "Remove chat 💬 1";
document.body.appendChild(styleCustomTheming4);
document.body.appendChild(styleCustomThemingBub);
console.log("Checkbox Chat bubbles style 1 remains checked");
};
//----------------------------------------Chat bubbles style 2----------------------------------------
let mDropdownTheming5 = document.createElement('div');
mDropdownTheming5.innerHTML = "Set chat 💬 2";
mDropdownTheming5.classList.add("ThemingListItem");
menuDropdownTheming.appendChild(mDropdownTheming5);
mDropdownTheming5.onclick = function (){
if (document.querySelectorAll('style[class="CustomTheme4"]').length) {
document.body.removeChild(styleCustomTheming4);
document.body.removeChild(styleCustomThemingBub);
mDropdownTheming4.innerHTML = "Set chat 💬 1";
sessionStorage.removeItem("restartTheming4");
}
if (document.querySelectorAll('style[class="CustomTheme5"]').length) {
document.body.removeChild(styleCustomTheming5);
document.body.removeChild(styleCustomThemingBub);
mDropdownTheming5.innerHTML = "Set chat 💬 2";
sessionStorage.removeItem("restartTheming5");
} else {
document.body.appendChild(styleCustomTheming5);
document.body.appendChild(styleCustomThemingBub);
mDropdownTheming5.innerHTML = "Remove chat 💬 2";
sessionStorage.setItem("restartTheming5", "true");
}
};
if (restartTheming5) {
mDropdownTheming5.innerHTML = "Remove chat 💬 2";
document.body.appendChild(styleCustomTheming5);
document.body.appendChild(styleCustomThemingBub);
console.log("Checkbox Chat bubbles style 2 remains checked");
};
//
//----------------------------------------Chat style theming script section ends here----------------------------------------
//
*/
}, false);