1. Added a new utility function CountCharTokens() to replace the token counting routine from before. It also works unsaved new characters.
1.5 - moved #result_info to the top under avatar.
2. put create_form into a grid display so the two textareas can automatically resize to fill as much space as possible.
3. CSS - standardized background shadings, and replaced backdrop filters with RGBA background-colors for most divs. increased the strangth of some box-shadows on large UI divs
The selector menu for KoboldAI settings presets was doubling the list of presets when QuickRefresh happened, so i uncommented the "$("#settings_perset").empty();* line of code in /getsettings
1. enabled deletion of characters without page reload. now when a user deletes a character, the page will not auto-refresh, but they will be get a message from Chloe instructing them to pick another character to continue.
2. standardized all buttons to use menu_button class instead of individual ID stylings
3. adjusted create_form, making wider range inputs for mobile users.
- moved 'back button' to the bottom of the form next to delete/create/export
- changed the 'back' button on post-creation rm_info to look like a button
4. condensed redundant CSS where possible; removed unused CSS.
5. Fixed the problem of the nav auto-closing when a character is created or when using advanced editing window.
6. made the token counter load when a character is selected. previously it only showed up after edits were made.
7. found some problems with /createcharacter - if a character/PNG with the same name exists, the server won't make a new character, but it doesn't tell the user about the error. I UI acts as if the character was created. I added some soft console.error messages for this, but couldn't figure out a way to make it give a proper error. probably because fs.existsSync doesn't have a callback.
Originally both AutoConnect and AutoLoadChat features were built into the getSettings function, but this caused unreliable functionality on Firefox and Chrome.
Instead I made them their own functions to call separately once everything else in the loading process had finished.
testing in firefox showed connecting to API first caused a very small amount of lag which caused it to skip the auto-load-chat feature.
swapping the order and placing auto-connect at the end of getSettings fixed this.
1. new function - Auto-connect to API
2. new function - Auto-load last character/chat
Both of these have toggles in the right menu at the bottom in a "Power user options" section.
Both only load if settings.json has a pre-defined setting for them. (won't fire on first load after install)
1. revised the new date format (reformatted to be a function so it would return new dates each time called)
2. re-added new date format functionality as I had previously rolled it back while debugging the avatar loading issues discovered in last push.
3. resolved some issues related to loading past chats for bots with no chat save files. Usually this wouldn't happen, as a new (or previous) chat is loaded each time the character is selected. But in cases where the files are deleted after being created, the chat history loading screen would remain in a 'loading.svg' loop. I added errorhandling to avoid this, and to kick GetAllCharaChats() from trying to read empty arrays.
4. increased potential size of past chats popup box
1. Due to a mistake on my end character avatars were not updating real time. This has been fixed.
2. added some tooltips to icons and buttons on the right nav panel.
3. resized the New Character and Import Character buttons
1. Replaced all Date.now() instances with a humanized ISO8601 timestamp that is easily readable by users.
This has a seamless effect on the embedded timestamping of chat mesages. Old chat files can still be edited (messages deleted), and continued.
Character PNG files get updated with the new date format, and this will be reflected in github but there is no functional change to the user.
2. Added character name to the front of all newly saved/imported chat files. Old chats will retain their original filename unless re-imported.
With these two changes, the new chat filenames are as such:
"Aqua - 2023-3-3 @03h 08m 36s 948ms.jsonl"
(I would like to make it smaller, perhaps by removing the milliseconds. Let me know if this is possible, or if it would introduce potential overwrites if users make/update files within the same second.)
3. Increased the size of the 'view past chats' popup box to max 800px so accommodate the new larger filenames.
changed the right nav header tabs from "character" and "settings" to emojis that represent each respectively. This was to allow the selected character's name to have a larger display footprint for mobile screens.
previously the keydown eventlistener for 'enter' would trigger even though ctrl was pressed, so i changed it so it doesn't trigger when ctrl is pressed (previously it only checked if shift was not pressed)
- removed forced size tags from text-pole div's as these caused some textareas to overflow the nav on iphone. instead widths are done with CSS now.
- added <br> after yourName textarea and increased size of the nameChange button to match the API design. This is also better for phones.
Rewrote the nav HTML/CSS
.nav --> #right-nav-panel
.nav-toggle <label> --> removed, using #nav-toggle:after for styling instead
The main purpose of this rewrite was to allow for a function such that the nav panel will auto-close when the user clicks away from it. The former structure of using a label for a hidden checkbox made this impossible, as the label produced two clicks when clicked on (one for the label, and one for the box), therefore locking the panel if the click-away feature was turned on.
I will add in a 'pin' toggle soon to allow users to hold the nav panel open if they wish.
- Changed default font size from 1rem to 15px;
- removed unused CSS code for <main>,<article>,<header>, and <footer>, which were not used in the HTML
- made send3.png opaque and adjusted opacity with CSS
- removed redundant backdrop blur on from <body>
- removed redundant backdrop blur from bg1 and bg2 (they now only self-blur)
- made "Connect" button on both API panels larger for mobile screens, and added :hover coloring
- made character 'export' and 'delete' buttons larger and further apart to decrease likeliness of mis-clicks, especially on phone screens.
- adjusted send_form opacity/background stylings to allow #options to perform blur effect
- added <br> after novel API URL input to match KoboldAI form style
- cleaned up #options_content and added styling
charcter_popup set to cover all main sheld elements for ease of use and to limit user errors (using the chat input box while having the character's advanced defs popup open)
removed forced coloring from popup menu buttons.
- changed background color of messages selected for deletion
- changed color of delete message confirmation buton
- changed size/height of deletion menu to match normal send_form height (to avoid #chat resizing awkwardly)
- reverted #chat scrollbar to normal display since corners are no longer rounded
- removed corner radius from #chat .mes divs, since they are invisible anyway
- removed large margin-bottom between #chat .mes divs and replaced with a smaller padding. (This makes the delete screen look nicer as there are no gaps between the selected messages)
- aligned deletion checkboxes in the center of the divs and vertical aligned with avatar icons
-100% width
- send_form's grid cell widths and options button paddings changed to fit
- changed corner roundness of chat and send_form
- reduced margin between chat and send_form to 1px
