@kudoai/chatgpt.js 3.4.0 → 3.6.0

package/docs/USERGUIDE.md

@@ -1,8 +1,8 @@
 <div align="center">
 
 <picture>
-    <source type="image/png" media="(prefers-color-scheme: dark)" srcset="https://media.chatgptjs.org/images/logos/chatgpt.js/with-reflection/darkmode.png?bc68d0c">
-    <img width=700 src="https://media.chatgptjs.org/images/logos/chatgpt.js/with-reflection/lightmode.png?bc68d0c">
+    <source type="image/png" media="(prefers-color-scheme: dark)" srcset="https://assets.chatgptjs.org/images/logos/chatgpt.js/with-reflection/darkmode.png?v=e638eac">
+    <img width=700 src="https://assets.chatgptjs.org/images/logos/chatgpt.js/with-reflection/lightmode.png?v=e638eac">
 </picture>
 
 **chatgpt.js** is a powerful JavaScript library that allows for super easy interaction w/ the ChatGPT DOM.
@@ -58,6 +58,7 @@
     - [getResponseFromAPI `async`](#getresponsefromapi-async)
     - [getResponseFromDOM](#getresponsefromdom)
     - [isIdle `async`](#isidle-async)
+    - [isTyping](#istyping)
     - [regenerate](#regenerate)
     - [resend `async`](#resend-async)
     - [scrollToBottom](#scrolltobottom)
@@ -159,7 +160,7 @@
 
 ```js
 (async () => {
-    await import('https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.4.0/dist/chatgpt.min.js');
+    await import('https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.6.0/dist/chatgpt.min.js');
     // Your code here...
 })();
 ```
@@ -168,7 +169,7 @@
 
 ```js
 var xhr = new XMLHttpRequest();
-xhr.open('GET', 'https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.4.0/dist/chatgpt.min.js');
+xhr.open('GET', 'https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.6.0/dist/chatgpt.min.js');
 xhr.onload = function () {
     if (xhr.status === 200) {
         var chatgptJS = document.createElement('script');
@@ -190,7 +191,7 @@ function yourCode() {
 
 ```js
 ...
-// @require https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.4.0/dist/chatgpt.min.js
+// @require https://cdn.jsdelivr.net/npm/@kudoai/chatgpt.js@3.6.0/dist/chatgpt.min.js
 // ==/UserScript==
 
 // Your code here...
@@ -929,6 +930,18 @@ Example code:
 })();
 ```
 
+### isTyping
+
+Returns a boolean value. `true` if ChatGPT is generating a response, `false` otherwise.
+
+Example code:
+
+```js
+console.log(`ChatGPT is ${!chatgpt.isTyping() ? 'not' : ''} typing`)
+```
+
+###### _See also: [`isIdle`](#isidle-async)_
+
 ### regenerate
 
 Regenerates ChatGPT's response.
@@ -1023,6 +1036,7 @@ Available options:
  - `voice`: A number representing the index of voices available on the user device.
  - `pitch`: A float representing the pitch of the speech. From `0` to `2`.
  - `speed`: A float representing the speed of the speech. From `0.1` to `10`.
+ - `onend`: A callback function invoked when speech finishes playing.
 
 Example code:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudoai/chatgpt.js",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "Client-side JavaScript library for ChatGPT",
   "author": {
     "name": "KudoAI & contributors",
@@ -67,12 +67,15 @@
   "bugs": "https://github.com/KudoAI/chatgpt.js/issues",
   "devDependencies": {
     "@adamlui/minify.js": "^1.8.5",
-    "@adamlui/scss-to-css": "^1.10.22",
-    "@eslint/json": "^0.9.0",
-    "@eslint/markdown": "^6.2.1",
-    "@stylistic/eslint-plugin-js": "^2.12.1",
+    "@adamlui/scss-to-css": "^1.10.24",
+    "@eslint/css": "^0.2.0",
+    "@eslint/json": "^0.10.0",
+    "@eslint/markdown": "^6.2.2",
+    "@html-eslint/eslint-plugin": "^0.33.1",
+    "@html-eslint/parser": "^0.33.0",
+    "@stylistic/eslint-plugin-js": "^3.0.1",
     "docsify-cli": "^4.4.4",
-    "eslint": "^9.17.0",
+    "eslint": "^9.19.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-regexp": "^2.7.0",
     "eslint-plugin-yml": "^1.16.0",

package/starters/chrome/LICENSE.md

@@ -1,8 +1,8 @@
 <div align="center">
     <h6>
         <picture>
-            <source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://media.chatgptjs.org/images/icons/earth-americas-white-icon32.svg?main">
-            <img height=14 src="https://media.chatgptjs.org/images/icons/earth-americas-icon32.svg?main">
+            <source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://assets.chatgptjs.org/images/icons/earth/white/icon32.svg?v=e638eac">
+           <img height=14 src="https://assets.chatgptjs.org/images/icons/earth/black/icon32.svg?v=e638eac">
         </picture>
         &nbsp;English |
         <a href="docs/zh-cn/LICENSE.md">简体中文</a> |
@@ -22,7 +22,7 @@
 
 # 🏛️ MIT License
 
-**Copyright © 2023–2024 [KudoAI](https://github.com/KudoAI) & contributors**
+**Copyright © 2023–2025 [KudoAI](https://github.com/KudoAI) & contributors**
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/starters/chrome/docs/README.md

@@ -3,8 +3,8 @@
 <div align="center">
     <h6>
         <picture>
-            <source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://media.chatgptjs.org/images/icons/earth-americas-white-icon32.svg?main">
-            <img height=14 src="https://media.chatgptjs.org/images/icons/earth-americas-icon32.svg?main">
+            <source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://assets.chatgptjs.org/images/icons/earth/white/icon32.svg?v=e638eac">
+           <img height=14 src="https://assets.chatgptjs.org/images/icons/earth/black/icon32.svg?v=e638eac">
         </picture>
         &nbsp;English |
         <a href="zh-cn#readme">简体中文</a> |
@@ -22,7 +22,7 @@
     </h6>
 </div>
 
-# <img height=21 src="https://media.chatgptjs.org/images/icons/platforms/chrome/icon32.png?8c852fa5"> chatgpt.js-chrome-starter
+# <img height=21 src="https://assets.chatgptjs.org/images/icons/platforms/chrome/icon32.png?v=e638eac"> chatgpt.js-chrome-starter
 
 <h3>A starting point for developing your own Chrome extension using <a href="https://github.com/KudoAI/chatgpt.js">chatgpt.js</a></h3>
 
@@ -81,13 +81,13 @@ These are some of the extensions featured by Google that use chatgpt.js:
 
 
 <a href="https://chatgptinfinity.com" target="_blank" rel="noopener">
-    <img width=777 src="https://cdn.jsdelivr.net/gh/adamlui/chatgpt-infinity@0f48c4e/chrome/media/images/tiles/marquee-promo-tile-1400x560.png">
+    <img width=777 src="https://assets.chatgptinfinity.com/images/tiles/marquee/tile-1400x560.png?v=34b428b">
 </a>
 
 <p><br>
 
 <a href="https://chatgptwidescreen.com" target="_blank" rel="noopener">
-    <img width=777 src="https://cdn.jsdelivr.net/gh/adamlui/chatgpt-widescreen@3ed0950/chrome/media/images/tiles/marquee-promo-tile-1400x560.png">
+    <img width=777 src="https://assets.chatgptwidescreen.com/images/tiles/marquee/tile-1400x560.png?v=4c5d018">
 </a>
 
 </div>

package/starters/chrome/docs/SECURITY.md

@@ -1,8 +1,8 @@
 <div align="right">
     <h6>
         <picture>
-            <source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://media.chatgptjs.org/images/icons/earth-americas-white-icon32.svg?main">
-            <img height=14 src="https://media.chatgptjs.org/images/icons/earth-americas-icon32.svg?main">
+            <source type="image/svg+xml" media="(prefers-color-scheme: dark)" srcset="https://assets.chatgptjs.org/images/icons/earth/white/icon32.svg?v=e638eac">
+           <img height=14 src="https://assets.chatgptjs.org/images/icons/earth/black/icon32.svg?v=e638eac">
         </picture>
         &nbsp;English |
         <a href="https://github.com/KudoAI/chatgpt.js-chrome-starter/blob/main/docs/zh-cn/SECURITY.md">简体中文</a> |
@@ -12,6 +12,4 @@
 
 # 🛡️ Security Policy
 
-If you find a vulnerability, please open a [draft security advisory](https://github.com/KudoAI/chatgpt.js-chrome-starter/security/advisories/new).
-
-Pull requests are also welcome, but for safety reasons, send an email to <security@kudoai.com> and wait for a response before making it public.
+If you find a vulnerability, please follow the reporting instructions @ https://tidelift.com/security

package/starters/chrome/extension/components/icons.js

@@ -1,10 +1,9 @@
 // Requires lib/dom.js
 
 window.icons = {
-
-    dependencies: {
-        import(dependencies) { // { app }
-            for (const name in dependencies) this[name] = dependencies[name] }
+    imports: {
+        import(deps) { // { app }
+            for (const depName in deps) this[depName] = deps[depName] }
     },
 
     create({ name, size = 16, width, height, ...additionalAttrs }) {
@@ -27,6 +26,6 @@ window.icons = {
 
     questionMark: {
         type: 'png',
-        get src() { return `${icons.dependencies.app.urls.assetHost}@b5551ac/images/icons/question-mark/icon16.png` }
+        get src() { return `${icons.imports.app.urls.assetHost}@b5551ac/images/icons/question-mark/icon16.png` }
     }
 };

package/starters/chrome/extension/components/modals.js

@@ -2,27 +2,89 @@
 
 window.modals = {
     stack: [], // of types of undismissed modals
+    get class() { return `${this.imports.app.cssPrefix}-modal` },
 
-    dependencies: {
-        import(dependencies) { // { app, siteAlert }
-            for (const name in dependencies) this[name] = dependencies[name] }
+    imports: {
+        import(deps) { // { app, env }
+            for (const depName in deps) this[depName] = deps[depName] }
+    },
+
+    alert(title = '', msg = '', btns = '', checkbox = '', width = '') { // generic one from chatgpt.alert()
+        const alertID = chatgpt.alert(title, msg, btns, checkbox, width),
+              alert = document.getElementById(alertID).firstChild
+        this.init(alert) // add classes + rising particles bg
+        return alert
     },
 
     open(modalType) {
-        this.stack.unshift(modalType) // add to stack
         const modal = this[modalType]() // show modal
-        modal.classList.add('chatgpt-infinity-modal')
-        modal.onmousedown = this.dragHandlers.mousedown
-        dom.fillStarryBG(modal) // fill BG w/ rising stars
+        this.stack.unshift(modalType) // add to stack
+        this.init(modal) // add classes + rising particles bg
         this.observeRemoval(modal, modalType) // to maintain stack for proper nav
     },
 
+    init(modal) {
+        if (!modal) return // to support non-div this.open()s
+        if (!this.styles) this.stylize() // to init/append stylesheet
+        modal.classList.add('no-user-select', this.class) ; modal.parentNode.classList.add(`${this.class}-bg`)
+        dom.addRisingParticles(modal)
+    },
+
+    stylize() {
+        if (!this.styles) {
+            this.styles = dom.create.elem('style') ; this.styles.id = `${this.class}-styles`
+            document.head.append(this.styles)
+        }
+        this.styles.innerText = (
+            `.no-user-select {
+                user-select: none ; -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none }`
+          + `.${this.class} {` // modals
+              + 'font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto,'
+                  + 'Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif ;'
+              + 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;'
+              + `color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + `background-image: linear-gradient(180deg, ${
+                     this.imports.env.ui.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
+                                                            : '#b6ebff -296px, white 171px' }) }`
+          + `.${this.class} [class*=modal-close-btn] {`
+              + 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;'
+              + 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }'
+          + `.${this.class} [class*=modal-close-btn] svg { height: 10px }`
+          + `.${this.class} [class*=modal-close-btn] path {`
+              + `${ this.imports.env.ui.scheme == 'dark' ? 'stroke: white ; fill: white'
+                                                           : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
+          + ( this.imports.env.ui.scheme == 'dark' ?  // invert dark mode hover paths
+                `.${this.class} [class*=modal-close-btn]:hover path { stroke: black ; fill: black }` : '' )
+          + `.${this.class} [class*=modal-close-btn]:hover { background-color: #f2f2f2 }` // hover underlay
+          + `.${this.class} [class*=modal-close-btn] svg { margin: 11.5px }` // center SVG for hover underlay
+          + `.${this.class} a {`
+              + `color: #${ this.imports.env.ui.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }`
+          + `.${this.class} h2 { font-weight: bold }`
+          + `.${this.class} button {`
+              + '--btn-transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;'
+              + 'font-size: 14px ; text-transform: uppercase ;' // shrink/uppercase labels
+              + 'border-radius: 0 !important ;' // square borders
+              + 'transition: var(--btn-transition) ;' // smoothen hover fx
+                  + '-webkit-transition: var(--btn-transition) ; -moz-transition: var(--btn-transition) ;'
+                  + '-o-transition: var(--btn-transition) ; -ms-transition: var(--btn-transition) ;'
+              + 'cursor: pointer !important ;' // add finger cursor
+              + `border: 1px solid ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'black' } !important ;`
+              + 'padding: 8px !important ; min-width: 102px }' // resize
+          + `.${this.class} button:hover {` // add zoom, re-scheme
+              + 'transform: scale(1.055) ; color: black !important ;'
+              + `background-color: #${ this.imports.env.ui.scheme == 'dark' ? '00cfff' : '9cdaff' } !important }`
+          + ( !this.imports.env.browser.isMobile ?
+                `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+          + `.about-em { color: ${ this.imports.env.ui.scheme == 'dark' ? 'white' : 'green' } !important }`
+        )
+    },
+
     observeRemoval(modal, modalType) { // to maintain stack for proper nav
         const modalBG = modal.parentNode
         new MutationObserver(([mutation], obs) => {
             mutation.removedNodes.forEach(removedNode => { if (removedNode == modalBG) {
                 if (this.stack[0] == modalType) { // new modal not launched, implement nav back logic
-                    this.stack.shift() // remove this modal type from stack
+                    this.stack.shift() // remove this modal type from stack 1st
                     const prevModalType = this.stack[0]
                     if (prevModalType) { // open it
                         this.stack.shift() // remove type from stack since re-added on open
@@ -34,73 +96,44 @@ window.modals = {
         }).observe(modalBG.parentNode, { childList: true, subtree: true })
     },
 
-    dragHandlers: {
-        mousedown(event) { // find modal, attach listeners, init XY offsets
-            if (event.button != 0) return // prevent non-left-click drag
-            if (getComputedStyle(event.target).cursor == 'pointer') return // prevent drag on interactive elems
-            modals.dragHandlers.draggableElem = event.currentTarget
-            modals.dragHandlers.draggableElem.style.cursor = 'grabbing'
-            event.preventDefault(); // prevent sub-elems like icons being draggable
-            ['mousemove', 'mouseup'].forEach(event => document.addEventListener(event, modals.dragHandlers[event]))
-            const draggableElemRect = modals.dragHandlers.draggableElem.getBoundingClientRect()
-            modals.dragHandlers.offsetX = event.clientX - draggableElemRect.left +21
-            modals.dragHandlers.offsetY = event.clientY - draggableElemRect.top +12
-        },
-
-        mousemove(event) { // drag modal
-            if (modals.dragHandlers.draggableElem) {
-                const newX = event.clientX - modals.dragHandlers.offsetX,
-                      newY = event.clientY - modals.dragHandlers.offsetY
-                Object.assign(modals.dragHandlers.draggableElem.style, { left: `${newX}px`, top: `${newY}px` })
-            }
-        },
-
-        mouseup() { // remove listeners, reset modals.dragHandlers.draggableElem
-            modals.dragHandlers.draggableElem.style.cursor = 'inherit';
-            ['mousemove', 'mouseup'].forEach(event =>
-                document.removeEventListener(event, modals.dragHandlers[event]))
-            modals.dragHandlers.draggableElem = null
-        }
-    },
-
     about() {
 
-        // Init styles
-        const headingStyle = 'font-size: 1.15rem',
-              pStyle = 'position: relative ; left: 3px',
-              pBrStyle = 'position: relative ; left: 4px ',
-              aStyle = 'color: ' + ( chatgpt.isDarkMode() ? '#c67afb' : '#8325c4' ) // purple
-
-        // Init buttons
-        const modalBtns = [
-            function getSupport(){ modals.safeWinOpen(`${modals.dependencies.app.urls.gitHub}/issues`) },
-            function rateUs() { modals.safeWinOpen(`${modals.dependencies.app.urls.gitHub}/discussions`) },
-            function moreAiExtensions(){ modals.safeWinOpen(modals.dependencies.app.urls.relatedExtensions) }
-        ]
-
         // Show modal
-        const aboutModal = this.dependencies.siteAlert(
-            `${this.dependencies.app.symbol} ${chrome.runtime.getManifest().name}`, // title
-            `<span style="${headingStyle}"><b>🏷️ <i>Version</i></b>: </span>`
-                + `<span style="${pStyle}">${this.dependencies.app.version}</span>\n`
-            + `<span style="${headingStyle}"><b>⚡ <i>Powered by</i></b>: </span>`
-                + `<span style="${pStyle}">`
-                    + `<a style="${aStyle}" href="${this.dependencies.app.urls.chatgptJS}" target="_blank"`
-                        + ' rel="noopener">chatgpt.js</a></span>\n'
-            + `<span style="${headingStyle}"><b>📜 <i>Open source code</i></b>:</span>\n`
-                + `<span style="${pBrStyle}"><a href="${this.dependencies.app.urls.gitHub}" target="_blank"`
-                    + ` rel="nopener">${this.dependencies.app.urls.gitHub}</a></span>`,
-            modalBtns, '', 451
+        const aboutModal = this.alert(
+            `${this.imports.app.symbol} ${chrome.runtime.getManifest().name}`, // title
+            '🧠 Author: ' // msg
+                + `<a href="${this.imports.app.author.url}">${this.imports.app.author.name}</a> `
+                    + `& <a href="${this.imports.app.urls.contributors}">contributors</a>\n`
+            + `🏷️ Version: <span class="about-em">${this.imports.app.version}</span>\n`
+            + '📜 Open source code: '
+                + `<a href="${this.imports.app.urls.gitHub}" target="_blank" rel="nopener">`
+                    + this.imports.app.urls.gitHub + '</a>\n'
+            + '⚡ Powered by: '
+                + `<a href="${this.imports.app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`,
+            [ function getSupport(){}, function rateUs(){}, function moreAiExtensions(){} ], // button labels
+            '', 656 // modal width
         )
 
         // Format text
-        aboutModal.querySelector('h2').style.cssText = 'text-align: center ; font-size: 37px ; padding: 9px'
-        aboutModal.querySelector('p').style.cssText = 'text-align: center'
+        aboutModal.querySelector('h2').style.cssText = (
+            'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' )
+        aboutModal.querySelector('p').style.cssText = (
+            'text-align: center ; overflow-wrap: anywhere ;'
+          + `margin: ${ this.imports.env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
 
         // Hack buttons
         aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
         aboutModal.querySelectorAll('button').forEach(btn => {
-            btn.style.cssText = 'cursor: pointer !important ; height: 43px'
+            btn.style.cssText = 'height: 55px ; min-width: 136px ; text-align: center'
+
+            // Replace buttons w/ clones that don't dismiss modal
+            const btnClone = btn.cloneNode(true)
+            btn.parentNode.replaceChild(btnClone, btn) ; btn = btnClone
+            btn.onclick = () => this.safeWinOpen(
+                btn.textContent == 'Get Support' ? `${modals.imports.app.urls.gitHub}/issues`
+              : btn.textContent == 'Rate Us' ? `${modals.imports.app.urls.gitHub}/discussions`
+              : modals.imports.app.urls.relatedExtensions
+            )
 
             // Prepend emoji
             if (/support/i.test(btn.textContent))

package/starters/chrome/extension/content.js

@@ -1,5 +1,5 @@
 // NOTE: This script relies on the powerful chatgpt.js library @ https://chatgpt.js.org
-// © 2023–2024 KudoAI & contributors under the MIT license
+// © 2023–2025 KudoAI & contributors under the MIT license
 
 (async () => {
 
@@ -8,18 +8,22 @@
         await import(chrome.runtime.getURL(resource))
 
     // Init ENV context
-    const env = { browser: { isMobile: chatgpt.browser.isMobile() }}
+    const env = { browser: { isMobile: chatgpt.browser.isMobile() }, ui: { scheme: getScheme() }}
+    env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
 
     // Import APP data
     const { app } = await chrome.storage.sync.get('app')
-    modals.dependencies.import({ app, siteAlert })
+
+    // Export DEPENDENCIES to imported resources
+    dom.imports.import({ env }) // for env.ui.scheme
+    modals.imports.import({ app, env }) // for app data + env.ui.scheme
 
     // Add CHROME MSG listener
     chrome.runtime.onMessage.addListener(req => { // from service-worker.js + popup/index.html
         if (req.action == 'notify')
             notify(...['msg', 'pos', 'notifDuration', 'shadow'].map(arg => req.options[arg]))
         else if (req.action == 'alert')
-            siteAlert(...['title', 'msg', 'btns', 'checkbox', 'width'].map(arg => req.options[arg]))
+            modals.alert(...['title', 'msg', 'btns', 'checkbox', 'width'].map(arg => req.options[arg]))
         else if (req.action == 'showAbout') chatgpt.isLoaded().then(() => { modals.open('about') })
         else if (req.action == 'syncConfigToUI') syncConfigToUI(req.options)
     })
@@ -27,7 +31,7 @@
     // Init SETTINGS
     await settings.load(Object.keys(settings.controls), 'skipAlert')
 
-    // Define FEEDBACK functions
+    // Define FUNCTIONS
 
     function notify(msg, pos = '', notifDuration = '', shadow = '') {
 
@@ -36,27 +40,27 @@
         if (foundState) msg = msg.replace(foundState, '')
 
         // Show notification
-        siteAlert(`${app.symbol} ${msg}`, pos, notifDuration,
-            shadow || chatgpt.isDarkMode() ? '' : 'shadow' )
+        chatgpt.notify(`${app.symbol} ${msg}`, pos, notifDuration, shadow || env.ui.scheme == 'dark' ? '' : 'shadow')
         const notif = document.querySelector('.chatgpt-notif:last-child')
 
         // Append styled state word
         if (foundState) {
+            const stateStyles = {
+                on: {
+                    light: 'color: #5cef48 ; text-shadow: rgba(255,250,169,0.38) 2px 1px 5px',
+                    dark:  'color: #5cef48 ; text-shadow: rgb(55, 255, 0) 3px 0 10px'
+                },
+                off: {
+                    light: 'color: #ef4848 ; text-shadow: rgba(255,169,225,0.44) 2px 1px 5px',
+                    dark:  'color: #ef4848 ; text-shadow: rgba(255, 116, 116, 0.87) 3px 0 9px'
+                }
+            }
             const styledStateSpan = document.createElement('span')
-            styledStateSpan.style.cssText = `color: ${
-                foundState == 'OFF' ? '#ef4848 ; text-shadow: rgba(255, 169, 225, 0.44) 2px 1px 5px'
-                                    : '#5cef48 ; text-shadow: rgba(255, 250, 169, 0.38) 2px 1px 5px' }`
+            styledStateSpan.style.cssText = stateStyles[foundState.toLowerCase()][env.ui.scheme]
             styledStateSpan.append(foundState) ; notif.append(styledStateSpan)
         }
     }
 
-    function siteAlert(title = '', msg = '', btns = '', checkbox = '', width = '') {
-        const alertID = chatgpt.alert(title, msg, btns, checkbox, width)
-        return document.getElementById(alertID).firstChild
-    }
-
-    // Define SYNC function
-
     async function syncConfigToUI(options) { // eslint-disable-line
         await settings.load('extensionDisabled', Object.keys(settings.controls)) // load from Chrome storage to content.js config
         if (config.extensionDisabled) {
@@ -70,49 +74,29 @@
         }
     }
 
+    function getScheme() {
+        return document.documentElement.className
+            || (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
+    }
+
     // Run MAIN routine
 
     chatgpt.printAllFunctions() // to console
 
     // CHILL a bit if your hacks depend on delayed DOM content
     await chatgpt.isLoaded()
-    await new Promise(resolve => setTimeout(resolve, 500)) // sleep .5s
-
-    // Add/update TWEAKS style
-    const tweaksStyleUpdated = 1732627011377 // timestamp of last edit for this file's tweaksStyle
-    let tweaksStyle = document.getElementById('tweaks-style') // try to select existing style (from your other extensions)
-    if (!tweaksStyle || parseInt(tweaksStyle.getAttribute('last-updated')) < tweaksStyleUpdated) {
-        if (!tweaksStyle) { // outright missing, create/id/attr/append it first
-            tweaksStyle = dom.create.elem('style', {
-                id: 'tweaks-style', 'last-updated': tweaksStyleUpdated.toString() })
-            document.head.append(tweaksStyle)
-        }
-        tweaksStyle.innerText = (
-            '[class$="-modal"] { z-index: 13456 ; position: absolute }' // to be click-draggable
-          + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
-          + '.chatgpt-modal button {'
-              + 'font-size: 0.77rem ; text-transform: uppercase ;' // shrink/uppercase labels
-              + 'border-radius: 0 !important ;' // square borders
-              + 'transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;' // smoothen hover fx
-              + 'cursor: pointer !important ;' // add finger cursor
-              + 'padding: 5px !important ; min-width: 102px }' // resize
-          + '.chatgpt-modal button:hover {' // add zoom, re-scheme
-              + 'transform: scale(1.055) ; color: black !important ;'
-              + `background-color: #${ chatgpt.isDarkMode() ? '00cfff' : '9cdaff' } !important }`
-          + ( !env.browser.isMobile ? '.modal-buttons { margin-left: -13px !important }' : '' )
-        )
-    }; // eslint-disable-line
+    await new Promise(resolve => setTimeout(resolve, 500)); // sleep .5s
 
-    // Add STARS styles for modals
-    ['black', 'white'].forEach(color => document.head.append(
+    // Add RISING PARTICLES styles for modals
+    ['gray', 'white'].forEach(color => document.head.append(
         dom.create.elem('link', { rel: 'stylesheet',
-            href: `https://assets.aiwebextensions.com/styles/css/${color}-rising-stars.min.css?v=542104c`
+            href: `https://assets.aiwebextensions.com/styles/rising-particles/dist/${color}.min.css?v=727feff`
     })))
 
     if (config.extensionDisabled) return
 
     if (!config.skipAlert) // alert to extension load
-        chatgpt.alert('≫ ChatGPT extension loaded! 🚀', // title
+        modals.alert('≫ ChatGPT extension loaded! 🚀', // title
             'Success! Press Ctrl+Shift+J to view all chatgpt.js methods.', // msg
             function getHelp() { // button
                 chrome.tabs.create({ url: `${app.urls.gitHub}/issues` }) },
@@ -120,6 +104,16 @@
                 settings.save('skipAlert', !config.skipAlert) }
         )
 
+    // Monitor SCHEME PREF CHANGES to update modal colors + env.ui.scheme for your use
+    new MutationObserver(handleSchemePrefChange).observe( // for site scheme pref changes
+        document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener( // for browser/system scheme pref changes
+        'change', () => requestAnimationFrame(handleSchemePrefChange))
+    function handleSchemePrefChange() {
+        const displayedScheme = getScheme()
+        if (env.ui.scheme != displayedScheme) { env.ui.scheme = displayedScheme ;  modals.stylize() }
+    }
+
     // Your code here...
     // Your code here...
     // Your code here...