@kudoai/chatgpt.js 3.8.0 → 3.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudoai/chatgpt.js",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "description": "Client-side JavaScript library for ChatGPT",
   "author": {
     "name": "KudoAI & contributors",
@@ -9,10 +9,16 @@
   },
   "homepage": "https://chatgpt.js.org",
   "license": "MIT",
-  "funding": {
-    "type": "github",
-    "url": "http://github.com/sponsors/KudoAI"
-  },
+  "funding": [
+    {
+      "type": "github",
+      "url": "http://github.com/sponsors/KudoAI"
+    },
+    {
+      "type": "paypal",
+      "url": "http://paypal.biz/kudoai"
+    }
+  ],
   "browser": "chatgpt.js",
   "files": [
     "chatgpt.js",
@@ -68,17 +74,16 @@
   "bugs": "https://github.com/KudoAI/chatgpt.js/issues",
   "devDependencies": {
     "@adamlui/minify.js": "^1.8.6",
-    "@adamlui/scss-to-css": "^1.10.32",
-    "@eslint/css": "^0.7.0",
-    "@eslint/json": "^0.12.0",
-    "@eslint/markdown": "^6.4.0",
-    "@html-eslint/eslint-plugin": "^0.39.0",
-    "@html-eslint/parser": "^0.39.0",
-    "@stylistic/eslint-plugin-js": "^4.2.0",
-    "docsify-cli": "^4.4.4",
-    "eslint": "^9.25.1",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-regexp": "^2.7.0",
+    "@adamlui/scss-to-css": "^1.10.36",
+    "@eslint/css": "^0.10.0",
+    "@eslint/json": "^0.13.1",
+    "@eslint/markdown": "^7.1.0",
+    "@html-eslint/eslint-plugin": "^0.43.1",
+    "@html-eslint/parser": "^0.43.0",
+    "@stylistic/eslint-plugin": "^5.2.2",
+    "eslint": "^9.32.0",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-regexp": "^2.9.0",
     "eslint-plugin-yml": "^1.18.0",
     "get-port": "^7.1.0",
     "husky": "^9.1.7"

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

@@ -1,34 +1,40 @@
-// Requires lib/dom.js + app
+// Requires lib/dom.js
 
 window.icons = {
-    import(deps) { Object.assign(this.imports ||= {}, deps) },
 
-    create(name, { size = 16, width, height, ...additionalAttrs } = {}) {
-        const iconData = icons[name],
-              iconAttrs = { width: width || size, height: height || size, ...additionalAttrs }
-        if (iconData.type == 'svg') {
-            const svg = dom.create.svgElem('svg', { viewBox: iconData.viewBox, ...iconAttrs  })
-            iconData.elems.forEach(([tag, attrs]) => svg.append(dom.create.svgElem(tag, attrs)))
-            return svg
-        } else // img w/ src
-            return dom.create.elem('img', { src: iconData.src, ...iconAttrs })
+    create({ key, size = 18, width, height, ...otherAttrs }) {
+        if (!key) return console.error('Option \'key\' required by icons.create()')
+        const icon = {
+            data: this[key], attrs: { width: width || size, height: height || size, class: key, ...otherAttrs }}
+        if (icon.data?.svg) { // return <svg>
+            icon.svg = dom.create.svgElem('svg', { ...icon.data.svg, ...icon.attrs })
+            ;(function create(elems) {
+                return elems.map(elem => {
+                    const [tag, attrs] = Object.entries(elem)[0], svgElem = dom.create.svgElem(tag, attrs)
+                    if (attrs.elems) svgElem.append(...create(attrs.elems)) // recursively create() sub-elems
+                    return svgElem
+                })
+            })(icon.data.elems).forEach(elem => icon.svg.append(elem))
+            return icon.svg
+        } else if (icon.data?.src) // return <img> w/ src
+            return dom.create.elem('img', { src: icon.data.src, ...icon.attrs })
+        else
+            return console.error(`No <svg|src> data found for key ${key}`)
     },
 
-    caretDown: {
-        type: 'svg', viewBox: '0 0 24 24',
-        elems: [[ 'path', { d: 'm0 6.4 12 12 12-12z' }]]
+    caretDown: { svg: { viewBox: '0 0 24 24' }, elems: [{ path: { d: 'm0 6.4 12 12 12-12z' }}]},
+
+    open: {
+        svg: { viewBox: '0 0 512 512' },
+        elems: [{ path: { transform: 'translate(85.333333, 64)',
+            d: 'M128,63.999444 L128,106.666444 L42.6666667,106.666667 L42.6666667,320 L256,320 L256,234.666444 L298.666,234.666444 L298.666667,362.666667 L4.26325641e-14,362.666667 L4.26325641e-14,64 L128,63.999444 Z M362.666667,1.42108547e-14 L362.666667,170.666667 L320,170.666667 L320,72.835 L143.084945,249.751611 L112.915055,219.581722 L289.83,42.666 L192,42.6666667 L192,1.42108547e-14 L362.666667,1.42108547e-14 Z' }}]
     },
 
     plus: {
-        type: 'svg',  viewBox: '0 0 1024 1024',
-        elems: [
-            [ 'path', { d: 'M899.901 600.38H600.728v299.173c0 74.383-179.503 74.383-179.503 0V600.38H122.051c-74.384 0-74.384-179.503 0-179.503h299.173V121.703c0-74.384 179.503-74.384 179.503 0v299.174H899.9c74.385 0 74.385 179.503.001 179.503z' }]
-        ]
+        svg: { viewBox: '0 0 1024 1024' },
+        elems: [{ path: { d: 'M899.901 600.38H600.728v299.173c0 74.383-179.503 74.383-179.503 0V600.38H122.051c-74.384 0-74.384-179.503 0-179.503h299.173V121.703c0-74.384 179.503-74.384 179.503 0v299.174H899.9c74.385 0 74.385 179.503.001 179.503z' }}]
     },
 
     questionMark: {
-        type: 'png',
-        get src() { return `${icons.imports.app.urls.assetHost.replace(
-            '@latest', '@00e245b')}/images/icons/question-mark/icon16.png` }
-    }
+        src: 'https://cdn.jsdelivr.net/gh/KudoAI/chatgpt.js-chrome-starter@8a59f80/images/icons/question-mark/icon16.png' }
 };

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

@@ -1,13 +1,12 @@
-// Requires lib/chatgpt.js + lib/dom.js + app + env
+// Requires lib/<chatgpt|dom>.js + app + env
 
 window.modals = {
-    import(deps) { Object.assign(this.imports ||= {}, deps) },
 
     stack: [], // of types of undismissed modals
-    get class() { return `${this.imports.app.cssPrefix}-modal` },
+    get class() { return `${app.cssPrefix}-modal` },
 
     about() {
-        const { app, env: { ui: { scheme }, browser: { isPortrait }}} = this.imports
+        const { ui: { scheme }, browser: { isPortrait }} = env
 
         // Show modal
         const labelStyles = 'text-transform: uppercase ; font-size: 17px ; font-weight: bold ;'
@@ -15,17 +14,20 @@ window.modals = {
         const aboutModal = this.alert(
             `${app.symbol} ${chrome.runtime.getManifest().name}`, // title
             `<span style="${labelStyles}">🧠 Author:</span> `
-            + `<a href="${app.author.url}">${this.imports.app.author.name}</a> `
+            + `<a href="${app.author.url}">${app.author.name}</a> `
                     + `& <a href="${app.urls.contributors}">contributors</a>\n`
             + `<span style="${labelStyles}">🏷️ Version:</span> `
                     + `<span class="about-em">${app.version}</span>\n`
             + `<span style="${labelStyles}">📜 Open source code:</span> `
                 + `<a href="${app.urls.gitHub}" target="_blank" rel="nopener">`
                     + app.urls.gitHub + '</a>\n'
+            + `<span style="${labelStyles}">🚀 Latest changes:</span> `
+                + `<a href="${app.urls.gitHub}/commits" target="_blank" rel="nopener">`
+                    + `${app.urls.gitHub}/commits</a>\n`
             + `<span style="${labelStyles}">⚡ Powered by:</span> `
-                + `<a href="${app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`,
+                + `<a href="${app.urls.chatgptjs}" target="_blank" rel="noopener">chatgpt.js</a>`,
             [ function getSupport(){}, function rateUs(){}, function moreAiExtensions(){} ], // button labels
-            '', 656 // modal width
+            '', 747 // modal width
         )
 
         // Format text
@@ -43,9 +45,9 @@ window.modals = {
             // Replace buttons w/ clones that don't dismiss modal
             btn.replaceWith(btn = btn.cloneNode(true))
             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
+                btn.textContent == 'Get Support' ? `${app.urls.gitHub}/issues`
+              : btn.textContent == 'Rate Us' ? `${app.urls.gitHub}/discussions`
+              : app.urls.relatedExtensions
             )
 
             // Prepend emoji
@@ -104,9 +106,9 @@ window.modals = {
     safeWinOpen(url) { open(url, '_blank', 'noopener') }, // to prevent backdoor vulnerabilities
 
     stylize() {
-        const { env: { ui: { scheme }, browser: { isMobile }}} = this.imports
+        const { ui: { scheme }, browser: { isMobile }} = env
         if (!this.styles) document.head.append(this.styles = dom.create.elem('style'))
-        this.styles.innerText = (
+        this.styles.textContent = (
             `.${this.class} {` // modals
               + 'user-select: none ; -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ;'
               + 'font-family: -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto,'

package/starters/chrome/extension/content.js

@@ -4,19 +4,15 @@
 (async () => {
 
     // Import JS resources
-    for (const resource of ['components/modals.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js'])
+    for (const resource of ['components/modals.js', 'lib/chatgpt.js', 'lib/dom.js', 'lib/settings.js', 'lib/ui.js'])
         await import(chrome.runtime.getURL(resource))
 
     // Init ENV context
-    const env = { browser: { isMobile: chatgpt.browser.isMobile() }, ui: { scheme: getScheme() }}
+    window.env = { browser: { isMobile: chatgpt.browser.isMobile() }, ui: { scheme: ui.getScheme() }}
     env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
 
     // Import APP data
-    const { app } = await chrome.storage.local.get('app')
-
-    // Export DEPENDENCIES to imported resources
-    dom.import({ env }) // for env.ui.scheme
-    modals.import({ app, env }) // for app data + env.<browser|ui> flags
+    ;({ app: window.app } = await chrome.storage.local.get('app'))
 
     chrome.runtime.onMessage.addListener(({ action, options }) => { // from service-worker.js + popup/index.html
         ({
@@ -24,7 +20,7 @@
             alert: () => modals.alert(...['title', 'msg', 'btns', 'checkbox', 'width'].map(arg => options[arg])),
             showAbout: () => { config.skipAlert = true ; chatgpt.isLoaded().then(() => modals.open('about')) },
             syncConfigToUI: () => syncConfigToUI(options)
-        }[action]?.())
+        }[action]?.() || console.warn(`Chome msg listener warning: "${action}"`))
     })
 
     // Init SETTINGS
@@ -40,7 +36,7 @@
         if (foundState) msg = msg.replace(foundState, '')
 
         // Show notification
-        chatgpt.notify(`${app.symbol} ${msg}`, pos, notifDuration, shadow || env.ui.scheme == 'dark' ? '' : 'shadow')
+        chatgpt.notify(`${app.symbol} ${msg}`, pos, notifDuration, shadow || env.ui.scheme == 'light')
         const notif = document.querySelector('.chatgpt-notif:last-child')
 
         // Append styled state word
@@ -74,23 +70,18 @@
         }
     }
 
-    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
+    await new Promise(resolve => setTimeout(resolve, 500)) // sleep .5s
 
     // Add RISING PARTICLES styles for modals
-    ['gray', 'white'].forEach(color => document.head.append(
+    ;['gray', 'white'].forEach(color => document.head.append(
         dom.create.elem('link', { rel: 'stylesheet',
-            href: `https://cdn.jsdelivr.net/gh/adamlui/ai-web-extensions@727feff/assets/styles/rising-particles/dist/${
+            href: `https://cdn.jsdelivr.net/gh/adamlui/ai-web-extensions@71695ca/assets/styles/rising-particles/dist/${
                 color}.min.css`
     })))
 
@@ -111,7 +102,7 @@
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener( // for browser/system scheme pref changes
         'change', () => requestAnimationFrame(handleSchemePrefChange))
     function handleSchemePrefChange() {
-        const displayedScheme = getScheme()
+        const displayedScheme = ui.getScheme()
         if (env.ui.scheme != displayedScheme) { env.ui.scheme = displayedScheme ;  modals.stylize() }
     }