diff --git a/src/_locales/en/main.json b/src/_locales/en/main.json index 3742671..b853f46 100644 --- a/src/_locales/en/main.json +++ b/src/_locales/en/main.json @@ -106,5 +106,9 @@ "Export": "Export", "Always Create New Conversation Window": "Always Create New Conversation Window", "Please keep this tab open. You can now use the web mode of ChatGPTBox": "Please keep this tab open. You can now use the web mode of ChatGPTBox", - "Go Back": "Go Back" + "Go Back": "Go Back", + "Modules": "Modules", + "API Params": "API Params", + "API Url": "API Url", + "Others": "Others" } diff --git a/src/_locales/zh-hans/main.json b/src/_locales/zh-hans/main.json index fe0c8f8..7511fa7 100644 --- a/src/_locales/zh-hans/main.json +++ b/src/_locales/zh-hans/main.json @@ -106,5 +106,9 @@ "Export": "导出", "Always Create New Conversation Window": "总是创建新的对话窗口", "Please keep this tab open. You can now use the web mode of ChatGPTBox": "请保持这个页面打开, 现在你可以使用ChatGPTBox的网页版模式", - "Go Back": "返回" + "Go Back": "返回", + "Modules": "模块", + "API Params": "API参数", + "API Url": "API地址", + "Others": "其他" } diff --git a/src/_locales/zh-hant/main.json b/src/_locales/zh-hant/main.json index fd6b06e..5c9da2f 100644 --- a/src/_locales/zh-hant/main.json +++ b/src/_locales/zh-hant/main.json @@ -106,5 +106,9 @@ "Export": "匯出", "Always Create New Conversation Window": "總是建立新的對話視窗", "Please keep this tab open. You can now use the web mode of ChatGPTBox": "請保持這個頁面開啟, 現在妳可以使用ChatGPTBox的網頁版模式", - "Go Back": "返回" + "Go Back": "返回", + "Modules": "模組", + "API Params": "API參數", + "API Url": "API網址", + "Others": "其他" } diff --git a/src/popup/Popup.jsx b/src/popup/Popup.jsx index ab85d98..c09234d 100644 --- a/src/popup/Popup.jsx +++ b/src/popup/Popup.jsx @@ -4,627 +4,20 @@ import { defaultConfig, getPreferredLanguageKey, getUserConfig, - isUsingApiKey, - isUsingAzureOpenAi, - isUsingCustomModel, - isUsingCustomNameOnlyModel, - isUsingGithubThirdPartyApi, - isUsingMultiModeModel, - ModelMode, - Models, setUserConfig, - ThemeMode, - TriggerMode, } from '../config/index.mjs' import { Tab, TabList, TabPanel, Tabs } from 'react-tabs' import 'react-tabs/style/react-tabs.css' import './styles.scss' import { MarkGithubIcon } from '@primer/octicons-react' import Browser from 'webextension-polyfill' -import PropTypes from 'prop-types' -import { config as toolsConfig } from '../content-script/selection-tools' import { useWindowTheme } from '../hooks/use-window-theme.mjs' -import { languageList } from '../config/language.mjs' -import { - isEdge, - isFirefox, - isMobile, - isSafari, - openUrl, - parseFloatWithClamp, - parseIntWithClamp, -} from '../utils/index.mjs' +import { isMobile } from '../utils/index.mjs' import { useTranslation } from 'react-i18next' - -function GeneralPart({ config, updateConfig }) { - const { t, i18n } = useTranslation() - const [balance, setBalance] = useState(null) - - const getBalance = async () => { - const response = await fetch(`${config.customOpenAiApiUrl}/dashboard/billing/credit_grants`, { - headers: { - 'Content-Type': 'application/json', - Authorization: `Bearer ${config.apiKey}`, - }, - }) - if (response.ok) setBalance((await response.json()).total_available.toFixed(2)) - else openUrl('https://platform.openai.com/account/usage') - } - - return ( - <> - - - - - - - - -
- - ) -} - -GeneralPart.propTypes = { - config: PropTypes.object.isRequired, - updateConfig: PropTypes.func.isRequired, -} - -function FeaturePages({ config, updateConfig }) { - const { t } = useTranslation() - const [backgroundPermission, setBackgroundPermission] = useState(false) - - if (!isMobile() && !isFirefox() && !isSafari()) - Browser.permissions.contains({ permissions: ['background'] }).then((result) => { - setBackgroundPermission(result) - }) - - return ( -
- {!isMobile() && !isFirefox() && !isSafari() && ( - - )} - - {!isMobile() && ( - - )} - {!isMobile() && !isFirefox() && !isSafari() && ( - - )} - {!isMobile() && ( - - )} -
- ) -} - -FeaturePages.propTypes = { - config: PropTypes.object.isRequired, - updateConfig: PropTypes.func.isRequired, -} - -function AdvancedPart({ config, updateConfig }) { - const { t } = useTranslation() - - return ( - <> - - - - - - - - -
- - - - - ) -} - -AdvancedPart.propTypes = { - config: PropTypes.object.isRequired, - updateConfig: PropTypes.func.isRequired, -} - -function SelectionTools({ config, updateConfig }) { - const { t } = useTranslation() - - return ( - <> - {config.selectionTools.map((key) => ( - - ))} - - ) -} - -SelectionTools.propTypes = { - config: PropTypes.object.isRequired, - updateConfig: PropTypes.func.isRequired, -} - -function SiteAdapters({ config, updateConfig }) { - return ( - <> - {config.siteAdapters.map((key) => ( - - ))} - - ) -} - -SiteAdapters.propTypes = { - config: PropTypes.object.isRequired, - updateConfig: PropTypes.func.isRequired, -} +import { GeneralPart } from './sections/GeneralPart' +import { FeaturePages } from './sections/FeaturePages' +import { AdvancedPart } from './sections/AdvancedPart' +import { ModulesPart } from './sections/ModulesPart' // eslint-disable-next-line react/prop-types function Footer({ currentVersion, latestVersion }) { @@ -705,8 +98,7 @@ function Popup() { {t('General')} {t('Feature Pages')} - {t('Selection Tools')} - {t('Sites')} + {t('Modules')} {t('Advanced')} @@ -717,10 +109,7 @@ function Popup() { - - - - + diff --git a/src/popup/sections/AdvancedPart.jsx b/src/popup/sections/AdvancedPart.jsx new file mode 100644 index 0000000..34f9c58 --- /dev/null +++ b/src/popup/sections/AdvancedPart.jsx @@ -0,0 +1,208 @@ +import { useTranslation } from 'react-i18next' +import { parseFloatWithClamp, parseIntWithClamp } from '../../utils/index.mjs' +import PropTypes from 'prop-types' +import { Tab, TabList, TabPanel, Tabs } from 'react-tabs' + +ApiParams.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +function ApiParams({ config, updateConfig }) { + const { t } = useTranslation() + + return ( + <> + + + + + ) +} + +ApiUrl.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +function ApiUrl({ config, updateConfig }) { + const { t } = useTranslation() + + return ( + <> + + + + + ) +} + +Others.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +function Others({ config, updateConfig }) { + const { t } = useTranslation() + + return ( + <> + + +
+ + + + + ) +} + +AdvancedPart.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +export function AdvancedPart({ config, updateConfig }) { + const { t } = useTranslation() + + return ( + <> + + + {t('API Params')} + {t('API Url')} + {t('Others')} + + + + + + + + + + + + + + ) +} diff --git a/src/popup/sections/FeaturePages.jsx b/src/popup/sections/FeaturePages.jsx new file mode 100644 index 0000000..3a4878e --- /dev/null +++ b/src/popup/sections/FeaturePages.jsx @@ -0,0 +1,92 @@ +import { useTranslation } from 'react-i18next' +import { useState } from 'react' +import { isEdge, isFirefox, isMobile, isSafari, openUrl } from '../../utils/index.mjs' +import Browser from 'webextension-polyfill' +import PropTypes from 'prop-types' + +FeaturePages.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +export function FeaturePages({ config, updateConfig }) { + const { t } = useTranslation() + const [backgroundPermission, setBackgroundPermission] = useState(false) + + if (!isMobile() && !isFirefox() && !isSafari()) + Browser.permissions.contains({ permissions: ['background'] }).then((result) => { + setBackgroundPermission(result) + }) + + return ( +
+ {!isMobile() && !isFirefox() && !isSafari() && ( + + )} + + {!isMobile() && ( + + )} + {!isMobile() && !isFirefox() && !isSafari() && ( + + )} + {!isMobile() && ( + + )} +
+ ) +} diff --git a/src/popup/sections/GeneralPart.jsx b/src/popup/sections/GeneralPart.jsx new file mode 100644 index 0000000..03f2a5d --- /dev/null +++ b/src/popup/sections/GeneralPart.jsx @@ -0,0 +1,320 @@ +import { useTranslation } from 'react-i18next' +import { useState } from 'react' +import { openUrl } from '../../utils/index.mjs' +import { + isUsingApiKey, + isUsingAzureOpenAi, + isUsingCustomModel, + isUsingCustomNameOnlyModel, + isUsingGithubThirdPartyApi, + isUsingMultiModeModel, + ModelMode, + Models, + ThemeMode, + TriggerMode, +} from '../../config/index.mjs' +import Browser from 'webextension-polyfill' +import { languageList } from '../../config/language.mjs' +import PropTypes from 'prop-types' + +GeneralPart.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +export function GeneralPart({ config, updateConfig }) { + const { t, i18n } = useTranslation() + const [balance, setBalance] = useState(null) + + const getBalance = async () => { + const response = await fetch(`${config.customOpenAiApiUrl}/dashboard/billing/credit_grants`, { + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${config.apiKey}`, + }, + }) + if (response.ok) setBalance((await response.json()).total_available.toFixed(2)) + else openUrl('https://platform.openai.com/account/usage') + } + + return ( + <> + + + + + + + + +
+ + ) +} diff --git a/src/popup/sections/ModulesPart.jsx b/src/popup/sections/ModulesPart.jsx new file mode 100644 index 0000000..e22461c --- /dev/null +++ b/src/popup/sections/ModulesPart.jsx @@ -0,0 +1,32 @@ +import { useTranslation } from 'react-i18next' +import PropTypes from 'prop-types' +import { Tab, TabList, TabPanel, Tabs } from 'react-tabs' +import { SelectionTools } from './SelectionTools' +import { SiteAdapters } from './SiteAdapters' + +ModulesPart.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +export function ModulesPart({ config, updateConfig }) { + const { t } = useTranslation() + + return ( + <> + + + {t('Selection Tools')} + {t('Sites')} + + + + + + + + + + + ) +} diff --git a/src/popup/sections/SelectionTools.jsx b/src/popup/sections/SelectionTools.jsx new file mode 100644 index 0000000..589c2a2 --- /dev/null +++ b/src/popup/sections/SelectionTools.jsx @@ -0,0 +1,32 @@ +import { useTranslation } from 'react-i18next' +import { config as toolsConfig } from '../../content-script/selection-tools/index.mjs' +import PropTypes from 'prop-types' + +SelectionTools.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +export function SelectionTools({ config, updateConfig }) { + const { t } = useTranslation() + + return ( + <> + {config.selectionTools.map((key) => ( + + ))} + + ) +} diff --git a/src/popup/sections/SiteAdapters.jsx b/src/popup/sections/SiteAdapters.jsx new file mode 100644 index 0000000..c4ac25a --- /dev/null +++ b/src/popup/sections/SiteAdapters.jsx @@ -0,0 +1,28 @@ +import PropTypes from 'prop-types' + +SiteAdapters.propTypes = { + config: PropTypes.object.isRequired, + updateConfig: PropTypes.func.isRequired, +} + +export function SiteAdapters({ config, updateConfig }) { + return ( + <> + {config.siteAdapters.map((key) => ( + + ))} + + ) +} diff --git a/src/popup/styles.scss b/src/popup/styles.scss index b2a0b77..3658334 100644 --- a/src/popup/styles.scss +++ b/src/popup/styles.scss @@ -27,7 +27,7 @@ display: flex; flex-direction: column; align-items: center; - min-width: 440px; + min-width: 460px; min-height: 560px; width: 100%; height: 100%; @@ -39,7 +39,7 @@ display: flex; flex-direction: column; align-items: center; - width: 440px; + width: 460px; height: 560px; padding: 20px; overflow-y: auto;