* Secret manager (now for real)
* Refactor secret manager dialog
* Add error handling to secrets migration
* Adjust default value
* Add secret-id slash command
* Add secret management slash commands
* Improve type definitions
* Improve compatibility of UUID generator
* Add copy buttons to manager view
* Improve compatibility with Vertex AI service account
- Changed to input since textarea can't be used with datalist
- Unblock regular key placeholder
- Save email as a key label
- Interrupt validation if the input is a UUID (autocompleted)
* Add optional label input for secret values in key manager dialog
* Update masking rules
* /secret-id: make the arg "required" (it's not)
* remove unnecessary arg passage from WI helper funcs
* remove some typescript red from script.js
* hide in shame
* Add JSDoc to helper functions
* Fix fav_ch_checked not updating
* Move PWA mode match to firstLoadInit
* Fix more type errors and deprecations
* Fix the rest of type errors in script.js
---------
Co-authored-by: RossAscends <124905043+RossAscends@users.noreply.github.com>
* debug: Enhance logging for IntersectionObserver and root element
This commit adds more detailed console logging to `backgrounds.js`
to help you diagnose issues with the lazy loading mechanism.
Key changes:
- Added logs to trace calls to `activateLazyLoader` from
`getBackgrounds` and `getChatBackgroundsList`.
- Added a log at the start of `activateLazyLoader`.
- Added a check and log for the existence of the `#Backgrounds`
element, which is intended as the `root` for the
IntersectionObserver.
- Logged the options being passed to the IntersectionObserver.
- Ensured the IntersectionObserver can handle a null rootElement
(which would default to the viewport).
* feat: Implement lazy loading for background image thumbnails
This commit introduces lazy loading for background image thumbnails to improve initial load performance and reduce unnecessary data transfer.
Key changes:
- Modified `getBackgroundFromTemplate` to store image URLs in a `data-bg-src` attribute instead of directly setting the `background-image` style. A `lazy-load-background` class is added to these elements.
- Introduced a new `activateLazyLoader` function that uses the `IntersectionObserver` API. This function monitors elements with the `lazy-load-background` class and only loads their `background-image` (from `data-bg-src`) when they are about to become visible in the viewport.
- Integrated `activateLazyLoader` into `getBackgrounds` and `getChatBackgroundsList` so that it's activated after background placeholder elements are created.
- Added checks at the beginning of `getBackgrounds` and `getChatBackgroundsList` to prevent them from re-populating the thumbnail lists if they already contain elements, avoiding redundant processing.
This ensures that:
1. No background thumbnails are downloaded when the application first loads.
2. When the background selection menu is opened, the list of thumbnails is generated as placeholders, but the actual images are not downloaded.
3. Thumbnail images are only downloaded from the server as they scroll into view.
* I've made some updates to help diagnose why background images may not be loading.
Specifically, I've:
- Added logging to see when the lazy loader is activated and how many elements it's working with.
- Included logs to track when the IntersectionObserver is triggered for an element and its status.
- Added logging for the image URL being applied.
- Included a warning if an image URL isn't found for an element that should be loading.
Additionally, I've configured the IntersectionObserver to use the '#Backgrounds' element as the reference point for its calculations, with a 10% threshold.
* Optimize background menu loading and add toggleable logging
This PR addresses UI lag caused by the background selection menu.
Changes:
- Optimized Background Loading:
- The background selection menu (`#Backgrounds`) now unloads non-selected and non-locked background images when it's closed. This is achieved by setting `style.backgroundImage = 'none'` for the respective elements.
- When the menu is reopened, the background images are repopulated by calling the existing `getBackgrounds()` and `getChatBackgroundsList()` functions, which also re-initialize the lazy loader.
- A `MutationObserver` is used to detect when the `#Backgrounds` menu drawer is opened or closed by observing changes to its `classList` (specifically the `closedDrawer` class).
- Toggleable Debug Logging:
- Added a `DEBUG_BACKGROUND_LOADING` constant at the top of `public/scripts/backgrounds.js`.
- All `console.log`, `console.warn`, and `console.error` statements related to the background loading/unloading logic and the lazy loader are now conditional on this flag. Set `DEBUG_BACKGROUND_LOADING = true` to enable these logs for debugging purposes.
Benefits:
- Improves UI performance by reducing the number of images actively loaded in the DOM when the background menu is not in use.
- Reduces main background playback lag that was exacerbated by having many backgrounds loaded.
- Provides a way to enable detailed logging for troubleshooting background loading issues without cluttering the console during normal operation.
* I can optimize the background menu loading.
I'll detect when the background select menu is opened and closed.
When the menu is closed, I will remove non-selected and non-locked backgrounds from the DOM to improve performance.
When the menu is opened, I will repopulate the backgrounds.
This will prevent UI lag caused by too many background images being loaded simultaneously.
* lint syntax and spacing fix
* add url check back in
* Post-merge clean-up
* Disconnecting previous observer on lazy load init
---------
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
* Feat: Add toggle for animated background thumbnails
This commit introduces a new toggle in the User Settings UI: "Load Animated Background Thumbnails".
- When checked (default), animated background thumbnails (.gif, .mp4, animated .webp) load and display as usual in the background selection menu.
- When unchecked, these animated thumbnails are replaced with a transparent PNG (`__transparent.png`) in the selection menu. This is intended to reduce UI and network lag for you if you have a large number of animated backgrounds.
The actual functionality of setting any background (animated or static) remains unchanged; clicking a thumbnail will always apply the original background file.
Changes include:
- Added `loadAnimatedBackgroundThumbnails` (boolean, defaults to true) to `settings.json` under the `power_user` object.
- Added the toggle HTML to `public/index.html`.
- Modified `public/scripts/backgrounds.js` to conditionally replace animated thumbnails based on the new setting.
- Modified `public/script.js` to handle the toggle's event listener and save its state.
- Modified `public/scripts/power-user.js` to initialize the toggle's state upon loading settings.
* Fix: Resolve issues with animated background thumbnail toggle
This commit addresses two issues with the "Load Animated Background Thumbnails" feature:
1. Toggle state was not persisting correctly across page loads.
2. Animated media files were still being loaded even when the toggle was set to hide their thumbnails.
Fixes:
- Corrected the variable scope in `applyPowerUserSettings` within `public/scripts/power-user.js` to ensure the toggle's checked state is properly initialized from the global `power_user.loadAnimatedBackgroundThumbnails` setting. This resolves the persistence issue.
- Refined the logic in `getBackgroundFromTemplate` within `public/scripts/backgrounds.js`. When the toggle is off and a background is an animated type (.gif, .mp4, .webp), the `background-image` CSS property for its thumbnail now directly uses the path to `__transparent.png`. This prevents the browser from potentially pre-fetching or the server from processing the original animated file via the `/thumbnail` endpoint for display purposes.
- Added console logging in `getBackgroundFromTemplate` to help debug the toggle state and file being processed.
The core functionality of applying backgrounds by clicking on thumbnails (whether transparent or regular) remains unchanged, as the `bgfile` attribute correctly stores the original media path.
* Fix: Resolve page load error and animated thumbnail toggle issues
This commit addresses a critical page loading error (`power_user is not defined`
in `backgrounds.js`) and ensures the "Load Animated Background Thumbnails"
toggle functions as intended.
The page load error was caused by `getBackgrounds()` (and subsequently
`getBackgroundFromTemplate()`) in `backgrounds.js` attempting to access
`power_user.loadAnimatedBackgroundThumbnails` before the `power_user` object
was fully initialized and its properties reliably accessible during the
application's `firstLoadInit` sequence.
Fixes:
1. **Explicit Setting Passing for Initial Load**:
* Modified `getBackgrounds()` in `public/scripts/backgrounds.js` to accept
`loadAnimatedThumbnailsSetting` as a parameter.
* Modified `getBackgroundFromTemplate()` in `public/scripts/backgrounds.js`
to accept and prioritize this passed parameter. It includes fallback
logic to use the global `power_user.loadAnimatedBackgroundThumbnails`
(primarily for event-driven updates like chat changes, which happen later)
and then to a default of `true` if the setting is somehow unavailable.
* Updated the call to `getBackgrounds()` in `public/script.js` during
`firstLoadInit` to pass `power_user.loadAnimatedBackgroundThumbnails`
explicitly after `power_user` settings are loaded.
* Updated the toggle's `change` event listener in `public/script.js` to also
pass the new setting state to `getBackgrounds()` for immediate refresh
of system backgrounds.
2. **Toggle Persistence**:
* Ensured the toggle's state in `public/scripts/power-user.js`
(within `applyPowerUserSettings`) is correctly initialized using the
global `power_user.loadAnimatedBackgroundThumbnails`.
3. **Media Loading for Thumbnails**:
* The logic in `getBackgroundFromTemplate` now ensures that if animated
thumbnails are toggled off, the `background-image` CSS directly uses
`url("backgrounds/__transparent.png")`, avoiding calls to `getThumbnailUrl()`
with original animated file paths, which might have caused unintended
pre-fetching or server-side processing.
This set of changes should resolve the page loading blockage and ensure the
animated background thumbnail toggle works correctly for both display and
network loading, while maintaining the functionality of applying original
backgrounds.
* Fix: Ensure correct initial state and first-toggle behavior for animated thumbnail toggle
This commit addresses issues where the "Load Animated Background Thumbnails"
toggle might not correctly display its default 'on' state (checked) on
a clean install, and ensures the first toggle action takes immediate effect.
Changes:
- In `public/scripts/power-user.js`:
- `loadPowerUserSettings`: Ensured that `power_user.loadAnimatedBackgroundThumbnails`
is robustly defaulted to `true` if the key is missing or not a boolean
(e.g., from an older settings file) *before* `applyPowerUserSettings` is called.
- `applyPowerUserSettings`: Added console logging to trace the value of
`power_user.loadAnimatedBackgroundThumbnails` just before setting the
checkbox state. Ensured the checkbox `checked` property is set using
`!!power_user.loadAnimatedBackgroundThumbnails` for explicit boolean conversion.
The function already correctly referenced the global `power_user` object.
- In `public/scripts/backgrounds.js`:
- `getBackgroundFromTemplate`: This function's logic for determining the
`loadSetting` (which decides if a transparent thumbnail is used) was
previously refined to prioritize a passed parameter, then fall back to the
global `power_user.loadAnimatedBackgroundThumbnails`, and then to `true`.
Console logs were added to trace the resolved setting and file details.
- In `public/script.js`:
- `firstLoadInit`: The call to `getBackgrounds` already correctly passes the
`power_user.loadAnimatedBackgroundThumbnails` after settings are loaded.
- Event listener for `#loadAnimatedBackgroundThumbnails`: The logic to update
the global `power_user` state and then call refresh functions
(`getBackgrounds` and emitting `CHAT_CHANGED` for `getChatBackgroundsList`)
appears to be in the correct synchronous order.
These changes should ensure the toggle initializes to its correct visual state (checked)
and that the first toggle from ON to OFF (and back) correctly and immediately
updates both the visual display of thumbnails and the network loading behavior.
* Fix: Address ESLint issues in background thumbnail toggle feature
This commit resolves ESLint errors that were present in
`public/scripts/backgrounds.js` and `public/scripts/power-user.js`
related to the "Load Animated Background Thumbnails" feature.
Changes:
- I corrected indentation errors in `public/scripts/backgrounds.js`
as reported by the linter.
- I replaced direct use of `object.hasOwnProperty()` with
`Object.prototype.hasOwnProperty.call(object, ...)` in both
`backgrounds.js` and `power-user.js` to resolve the
`no-prototype-builtins` ESLint error.
- I ensured `power_user` is correctly imported and/or checked for
definition (using `typeof power_user !== 'undefined'`) in
`backgrounds.js` before accessing its properties, to satisfy
linter concerns around `no-undef` for `power_user` in the
context of the `getBackgroundFromTemplate` fallback logic.
These changes primarily address code style and linting rules and
are not intended to alter the functional behavior of the animated
background thumbnail toggle, which was addressed in previous commits.
* fix weird spacing for lint
* Refactor animated background thumbnail settings and functionality
* Remove comments
* Add missing awaits
---------
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
Cohee