chore: reduce bundle size

src/background/apis/chatgpt-web.mjs

@@ -2,7 +2,7 @@
 
 import { fetchSSE } from '../../utils/fetch-sse'
 import { isEmpty } from 'lodash-es'
-import { chatgptWebModelKeys, getUserConfig, Models } from '../../config'
+import { chatgptWebModelKeys, getUserConfig, Models } from '../../config/index.mjs'
 
 async function request(token, method, path, data) {
   const apiUrl = (await getUserConfig()).customChatGptWebApiUrl

src/background/apis/openai-api.mjs

@@ -1,6 +1,6 @@
 // api version
 
-import { maxResponseTokenLength, Models, getUserConfig } from '../../config'
+import { maxResponseTokenLength, Models, getUserConfig } from '../../config/index.mjs'
 import { fetchSSE } from '../../utils/fetch-sse'
 import { getConversationPairs } from '../../utils/get-conversation-pairs'
 import { isEmpty } from 'lodash-es'

src/background/index.mjs

@@ -9,12 +9,12 @@ import {
 import {
   chatgptApiModelKeys,
   chatgptWebModelKeys,
+  defaultConfig,
   getUserConfig,
   gptApiModelKeys,
   isUsingApiKey,
-} from '../config'
+} from '../config/index.mjs'
 import { isSafari } from '../utils/is-safari'
-import { config as toolsConfig } from '../content-script/selection-tools'
 
 const KEY_ACCESS_TOKEN = 'accessToken'
 const cache = new ExpiryMap(10 * 1000)
@@ -114,12 +114,13 @@ Browser.contextMenus.removeAll().then(() => {
     title: 'New Chat',
     contexts: ['selection'],
   })
-  for (const key in toolsConfig) {
-    const toolConfig = toolsConfig[key]
+  for (const index in defaultConfig.selectionTools) {
+    const key = defaultConfig.selectionTools[index]
+    const desc = defaultConfig.selectionToolsDesc[index]
     Browser.contextMenus.create({
       id: menuId + key,
       parentId: menuId,
-      title: toolConfig.label,
+      title: desc,
       contexts: ['selection'],
     })
   }

src/components/ConversationCard/index.jsx

@@ -10,7 +10,7 @@ import FileSaver from 'file-saver'
 import { render } from 'preact'
 import FloatingToolbar from '../FloatingToolbar'
 import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
-import { defaultConfig, getUserConfig } from '../../config'
+import { defaultConfig, getUserConfig } from '../../config/index.mjs'
 
 const logo = Browser.runtime.getURL('logo.png')
 

src/components/DecisionCard/index.jsx

@@ -2,7 +2,7 @@ import { LightBulbIcon, SearchIcon } from '@primer/octicons-react'
 import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import ConversationCard from '../ConversationCard'
-import { defaultConfig, getUserConfig } from '../../config'
+import { defaultConfig, getUserConfig } from '../../config/index.mjs'
 import Browser from 'webextension-polyfill'
 import { getPossibleElementByQuerySelector, endsWithQuestionMark } from '../../utils'
 

src/components/FloatingToolbar/index.jsx

@@ -2,7 +2,7 @@ import Browser from 'webextension-polyfill'
 import { cloneElement, useEffect, useState } from 'react'
 import ConversationCard from '../ConversationCard'
 import PropTypes from 'prop-types'
-import { defaultConfig, getUserConfig } from '../../config.mjs'
+import { defaultConfig, getUserConfig } from '../../config/index.mjs'
 import { config as toolsConfig } from '../../content-script/selection-tools'
 import { isMobile, setElementPositionInViewport } from '../../utils'
 import Draggable from 'react-draggable'

src/config/index.mjs

@@ -1,8 +1,6 @@
 import { defaults } from 'lodash-es'
 import Browser from 'webextension-polyfill'
-import { isMobile } from './utils/is-mobile'
-import { config as toolsConfig } from './content-script/selection-tools'
-import { languages } from 'countries-list'
+import { isMobile } from '../utils/is-mobile.mjs'
 
 /**
  * @typedef {object} Model
@@ -37,8 +35,6 @@ export const ThemeMode = {
   auto: 'Auto',
 }
 
-export const languageList = { auto: { name: 'Auto', native: 'Auto' }, ...languages }
-
 export const maxResponseTokenLength = 1000
 
 /**
@@ -71,7 +67,7 @@ export const defaultConfig = {
 
   // others
 
-  activeSelectionTools: Object.keys(toolsConfig).filter((i) => i !== 'translateBidi'),
+  activeSelectionTools: ['translate', 'summary', 'polish', 'sentiment', 'divide', 'code', 'ask'],
   activeSiteAdapters: [
     'bilibili',
     'github',
@@ -88,7 +84,26 @@ export const defaultConfig = {
   // unchangeable
 
   userLanguage: navigator.language.substring(0, 2),
-  selectionTools: Object.keys(toolsConfig),
+  selectionTools: [
+    'translate',
+    'translateBidi',
+    'summary',
+    'polish',
+    'sentiment',
+    'divide',
+    'code',
+    'ask',
+  ],
+  selectionToolsDesc: [
+    'Translate',
+    'Translate (Bidirectional)',
+    'Summary',
+    'Polish',
+    'Sentiment Analysis',
+    'Divide Paragraphs',
+    'Code Explain',
+    'Ask',
+  ],
   // importing configuration will result in gpt-3-encoder being packaged into the output file
   siteAdapters: [
     'bilibili',
@@ -102,26 +117,6 @@ export const defaultConfig = {
   ],
 }
 
-export async function getUserLanguage() {
-  return languageList[defaultConfig.userLanguage].name
-}
-
-export async function getUserLanguageNative() {
-  return languageList[defaultConfig.userLanguage].native
-}
-
-export async function getPreferredLanguage() {
-  const config = await getUserConfig()
-  if (config.preferredLanguage === 'auto') return await getUserLanguage()
-  return languageList[config.preferredLanguage].name
-}
-
-export async function getPreferredLanguageNative() {
-  const config = await getUserConfig()
-  if (config.preferredLanguage === 'auto') return await getUserLanguageNative()
-  return languageList[config.preferredLanguage].native
-}
-
 export function isUsingApiKey(config) {
   return (
     gptApiModelKeys.includes(config.modelName) || chatgptApiModelKeys.includes(config.modelName)

src/config/language.mjs

@@ -0,0 +1,24 @@
+import { languages } from 'countries-list'
+import { defaultConfig, getUserConfig } from './index.mjs'
+
+export const languageList = { auto: { name: 'Auto', native: 'Auto' }, ...languages }
+
+export async function getUserLanguage() {
+  return languageList[defaultConfig.userLanguage].name
+}
+
+export async function getUserLanguageNative() {
+  return languageList[defaultConfig.userLanguage].native
+}
+
+export async function getPreferredLanguage() {
+  const config = await getUserConfig()
+  if (config.preferredLanguage === 'auto') return await getUserLanguage()
+  return languageList[config.preferredLanguage].name
+}
+
+export async function getPreferredLanguageNative() {
+  const config = await getUserConfig()
+  if (config.preferredLanguage === 'auto') return await getUserLanguageNative()
+  return languageList[config.preferredLanguage].native
+}

src/content-script/index.jsx

@@ -4,7 +4,7 @@ import { render } from 'preact'
 import DecisionCard from '../components/DecisionCard'
 import { config as siteConfig } from './site-adapters'
 import { config as toolsConfig } from './selection-tools'
-import { clearOldAccessToken, getUserConfig, setAccessToken, getPreferredLanguage } from '../config'
+import { clearOldAccessToken, getUserConfig, setAccessToken } from '../config/index.mjs'
 import {
   createElementAtPosition,
   getPossibleElementByQuerySelector,
@@ -13,6 +13,7 @@ import {
 } from '../utils'
 import FloatingToolbar from '../components/FloatingToolbar'
 import Browser from 'webextension-polyfill'
+import { getPreferredLanguage } from '../config/language.mjs'
 
 /**
  * @param {SiteConfig} siteConfig

src/content-script/selection-tools/index.mjs

@@ -8,7 +8,7 @@ import {
   Braces,
   Globe,
 } from 'react-bootstrap-icons'
-import { getPreferredLanguage } from '../../config.mjs'
+import { getPreferredLanguage } from '../../config/language.mjs'
 
 export const config = {
   translate: {

src/popup/Popup.jsx

@@ -8,8 +8,7 @@ import {
   defaultConfig,
   Models,
   isUsingApiKey,
-  languageList,
-} from '../config'
+} from '../config/index.mjs'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 import 'react-tabs/style/react-tabs.css'
 import './styles.scss'
@@ -18,8 +17,9 @@ import Browser from 'webextension-polyfill'
 import PropTypes from 'prop-types'
 import { config as toolsConfig } from '../content-script/selection-tools'
 import wechatpay from './donation/wechatpay.jpg'
-import bugmeacoffee from './donation/bugmeacoffee.svg'
+import bugmeacoffee from './donation/bugmeacoffee.png'
 import { useWindowTheme } from '../hooks/use-window-theme.mjs'
+import { languageList } from '../config/language.mjs'
 
 function GeneralPart({ config, updateConfig }) {
   const [balance, setBalance] = useState(null)

src/utils/crop-text.mjs

@@ -20,7 +20,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { maxResponseTokenLength } from '../config.mjs'
+import { maxResponseTokenLength } from '../config/index.mjs'
 import { encode } from '@nem035/gpt-3-encoder'
 
 // TODO add model support