@kudoai/chatgpt.js 3.4.0 → 3.5.0

package/docs/README.md

@@ -47,7 +47,7 @@
 
 [![](https://img.shields.io/github/stars/KudoAI/chatgpt.js?label=Stars&color=af68ff&logo=github&logoColor=white&labelColor=464646&style=for-the-badge)](https://github.com/KudoAI/chatgpt.js/stargazers)
 [![](https://img.shields.io/badge/License-MIT-green.svg?logo=internetarchive&logoColor=white&labelColor=464646&style=for-the-badge)](https://github.com/KudoAI/chatgpt.js/blob/main/LICENSE.md)
-[![](https://img.shields.io/github/size/KudoAI/chatgpt.js/dist/chatgpt.min.js?branch=v3.4.0&label=Minified%20Size&logo=databricks&logoColor=white&labelColor=464646&color=ff69b4&style=for-the-badge)](https://github.com/KudoAI/chatgpt.js/tree/v3.4.0/dist/chatgpt.min.js)
+[![](https://img.shields.io/github/size/KudoAI/chatgpt.js/dist/chatgpt.min.js?branch=v3.5.0&label=Minified%20Size&logo=databricks&logoColor=white&labelColor=464646&color=ff69b4&style=for-the-badge)](https://github.com/KudoAI/chatgpt.js/tree/v3.5.0/dist/chatgpt.min.js)
 [![](https://img.shields.io/codefactor/grade/github/kudoai/chatgpt.js?label=Code+Quality&logo=codefactor&logoColor=white&labelColor=464646&color=1acc6c&style=for-the-badge)](https://www.codefactor.io/repository/github/kudoai/chatgpt.js)
 [![](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fsonarcloud.io%2Fapi%2Fmeasures%2Fcomponent%3Fcomponent%3Dkudoai_chatgpt.js%26metricKeys%3Dvulnerabilities&query=%24.component.measures.0.value&style=for-the-badge&logo=sonarcloud&logoColor=white&labelColor=464646&label=Vulnerabilities&color=gold)](https://sonarcloud.io/component_measures?metric=new_vulnerabilities&id=kudoai_chatgpt.js)
 [![](https://img.shields.io/badge/Mentioned_in-Awesome-cca8c4?logo=awesomelists&logoColor=white&labelColor=464646&style=for-the-badge)](https://github.com/sindresorhus/awesome-chatgpt#javascript)
@@ -86,7 +86,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.5.0/dist/chatgpt.min.js');
     // Your code here...
 })();
 ```
@@ -95,7 +95,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.5.0/dist/chatgpt.min.js');
 xhr.onload = function () {
     if (xhr.status === 200) {
         var chatgptJS = document.createElement('script');
@@ -118,7 +118,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.5.0/dist/chatgpt.min.js
 // ==/UserScript==
 
 // Your code here...
@@ -188,7 +188,7 @@ chatgpt.get('reply', 'last');
 
 Each call equally fetches the last response. If you think it works, it probably will... so just type it!
 
-If it didn't, check out the extended [userguide](https://github.com/KudoAI/chatgpt.js/blob/v3.4.0/docs/USERGUIDE.md), or simply submit an [issue](https://github.com/KudoAI/chatgpt.js/issues) or [PR](https://github.com/KudoAI/chatgpt.js/pulls) and it will be integrated, ezpz!
+If it didn't, check out the extended [userguide](https://github.com/KudoAI/chatgpt.js/blob/v3.5.0/docs/USERGUIDE.md), or simply submit an [issue](https://github.com/KudoAI/chatgpt.js/issues) or [PR](https://github.com/KudoAI/chatgpt.js/pulls) and it will be integrated, ezpz!
 
 <img height=8px width="100%" src="https://media.chatgptjs.org/images/separators/gradient-aqua.png?78210a7">
 
@@ -336,6 +336,7 @@ This library exists thanks to code, translations, issues & ideas from the follow
 [![](https://images.weserv.nl/?url=https://avatars.githubusercontent.com/u/75193555?first-contrib=2024.10.28-fix-nepali-typo&h=47&w=47&mask=circle&maxage=7d "@samir-byte")](https://github.com/samir-byte)
 [![](https://images.weserv.nl/?url=https://avatars.githubusercontent.com/u/54546340?first-contrib=2024.10.28-fix-nepali-grammar&h=47&w=47&mask=circle&maxage=7d "@ghimirebibek")](https://github.com/ghimirebibek)
 [![](https://images.weserv.nl/?url=https://avatars.githubusercontent.com/u/82641474?first-contrib=2024.10.30-improve-hindi-readme&h=47&w=47&mask=circle&maxage=7d "@JanumalaAkhilendra")](https://github.com/JanumalaAkhilendra)
+[![](https://images.weserv.nl/?url=https://avatars.githubusercontent.com/u/130197125?first-contrib=2024.12.1-new-chat-selector-outdated-report&h=47&w=47&mask=circle&maxage=7d "@AliasUruz")](https://github.com/AliasUruz)
 [![](https://images.weserv.nl/?url=https://avatars.githubusercontent.com/in/29110&h=47&w=47&mask=circle&maxage=7d "Dependabot")](https://github.com/dependabot)
 <a href="https://chatgpt.com"><picture><source type="image/png" media="(prefers-color-scheme: dark)" srcset="https://images.weserv.nl/?url=https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@main/media/images/icons/platforms/chatgpt/black-on-white/icon189.png?h=46&w=46&mask=circle&maxage=7d"><img src="https://images.weserv.nl/?url=https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@main/media/images/icons/platforms/chatgpt/white-on-black/icon189.png?h=46&w=46&mask=circle&maxage=7d" title="ChatGPT"></picture></a>
 <a href="https://poe.com"><picture><source type="image/png" media="(prefers-color-scheme: dark)" srcset="https://images.weserv.nl/?url=https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@main/media/images/icons/platforms/poe/w-purple-blue-stripes/black-on-white/icon175.png?h=46&w=46&mask=circle&maxage=7d"><img src="https://images.weserv.nl/?url=https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js@main/media/images/icons/platforms/poe/w-purple-blue-stripes/white-on-black/icon175.png?h=46&w=46&mask=circle&maxage=7d" title="Poe"></picture></a>
@@ -367,7 +368,7 @@ This library exists thanks to code, translations, issues & ideas from the follow
 <div align="center">
 
 **[Releases](https://github.com/KudoAI/chatgpt.js/releases)** /
-[Userguide](https://github.com/KudoAI/chatgpt.js/blob/v3.4.0/docs/USERGUIDE.md) /
+[Userguide](https://github.com/KudoAI/chatgpt.js/blob/v3.5.0/docs/USERGUIDE.md) /
 [Discuss](https://github.com/KudoAI/chatgpt.js/discussions) /
 [Back to top ↑](#top)
 

package/docs/SECURITY.md

@@ -25,6 +25,4 @@
 
 # Security Policy
 
-If you find a vulnerability, please open a [draft security advisory](https://github.com/KudoAI/chatgpt.js/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/docs/USERGUIDE.md

@@ -159,7 +159,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.5.0/dist/chatgpt.min.js');
     // Your code here...
 })();
 ```
@@ -168,7 +168,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.5.0/dist/chatgpt.min.js');
 xhr.onload = function () {
     if (xhr.status === 200) {
         var chatgptJS = document.createElement('script');
@@ -190,7 +190,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.5.0/dist/chatgpt.min.js
 // ==/UserScript==
 
 // Your code here...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudoai/chatgpt.js",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Client-side JavaScript library for ChatGPT",
   "author": {
     "name": "KudoAI & contributors",

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,83 @@
 
 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 + starry 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(alert) // add classes + starry bg
         this.observeRemoval(modal, modalType) // to maintain stack for proper nav
     },
 
+    init(modal) {
+        if (!this.styles) this.stylize() // to init/append stylesheet
+        modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+        dom.fillStarryBG(modal) // add starry bg
+    },
+
+    stylize() {
+        if (!this.styles) {
+            this.styles = dom.create.elem('style') ; this.styles.id = `${this.class}-styles`
+            document.head.append(this.styles)
+        }
+        this.styles.innerText = (
+            `.${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 {`
+              + 'font-size: 14px ; 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
+              + `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 +90,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

@@ -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,13 +40,12 @@
         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 styledStateSpan = document.createElement('span')
+            const styledStateSpan = dom.create.elem('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' }`
@@ -50,13 +53,6 @@
         }
     }
 
-    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 +66,30 @@
         }
     }
 
+    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(
         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-stars/dist/${
+                color}.min.css?v=0cde30f9ae3ce99ae998141f6e7a36de9b0cc2e7`
     })))
 
     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 +97,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...