feat: improve web mode notification (#309)

package-lock.json

@@ -30,6 +30,7 @@
         "react-i18next": "^12.2.0",
         "react-markdown": "^8.0.7",
         "react-tabs": "^4.2.1",
+        "react-toastify": "^9.1.2",
         "rehype-highlight": "^6.0.0",
         "rehype-katex": "^6.0.2",
         "rehype-raw": "^6.1.1",
@@ -7671,6 +7672,18 @@
         "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmmirror.com/react-toastify/-/react-toastify-9.1.2.tgz",
+      "integrity": "sha512-PBfzXO5jMGEtdYR5jxrORlNZZe/EuOkwvwKijMatsZZm8IZwLj01YvobeJYNjFcA6uy6CVrx2fzL9GWbhWPTDA==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/readable-stream/-/readable-stream-3.6.2.tgz",

package.json

@@ -43,6 +43,7 @@
     "react-i18next": "^12.2.0",
     "react-markdown": "^8.0.7",
     "react-tabs": "^4.2.1",
+    "react-toastify": "^9.1.2",
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.2",
     "rehype-raw": "^6.1.1",

src/_locales/en/main.json

@@ -107,6 +107,7 @@
   "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",
+  "Pin Tab": "Pin Tab",
   "Modules": "Modules",
   "API Params": "API Params",
   "API Url": "API Url",

src/_locales/zh-hans/main.json

@@ -107,6 +107,7 @@
   "Always Create New Conversation Window": "总是创建新的对话窗口",
   "Please keep this tab open. You can now use the web mode of ChatGPTBox": "请保持这个页面打开, 现在你可以使用ChatGPTBox的网页版模式",
   "Go Back": "返回",
+  "Pin Tab": "固定页面",
   "Modules": "模块",
   "API Params": "API参数",
   "API Url": "API地址",

src/_locales/zh-hant/main.json

@@ -107,6 +107,7 @@
   "Always Create New Conversation Window": "總是建立新的對話視窗",
   "Please keep this tab open. You can now use the web mode of ChatGPTBox": "請保持這個頁面開啟, 現在妳可以使用ChatGPTBox的網頁版模式",
   "Go Back": "返回",
+  "Pin Tab": "固定頁面",
   "Modules": "模組",
   "API Params": "API參數",
   "API Url": "API網址",

src/background/index.mjs

@@ -143,6 +143,12 @@ Browser.runtime.onMessage.addListener(async (message, sender) => {
       }
       break
     }
+    case 'SET_CHATGPT_TAB': {
+      await setUserConfig({
+        chatgptTabId: sender.tab.id,
+      })
+      break
+    }
     case 'ACTIVATE_URL':
       await Browser.tabs.update(message.data.tabId, { active: true })
       break

src/components/MarkdownRender/Hyperlink.jsx

@@ -16,7 +16,7 @@ export function Hyperlink({ href, children }) {
           type: 'NEW_URL',
           data: {
             url: href,
-            pinned: true,
+            pinned: false,
             saveAsChatgptConfig: true,
           },
         })

src/components/NotificationForChatGPTWeb/index.jsx

@@ -1,43 +1,84 @@
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import Browser from 'webextension-polyfill'
-import { useConfig } from '../../hooks/use-config.mjs'
+import { toast, ToastContainer } from 'react-toastify'
+import { useEffect } from 'react'
+import 'react-toastify/dist/ReactToastify.css'
+import { useTheme } from '../../hooks/use-theme.mjs'
 
-const NotificationForChatGPTWeb = (props) => {
+const NotificationForChatGPTWeb = () => {
   const { t } = useTranslation()
-  const config = useConfig()
+  const [theme, config] = useTheme()
+
   const buttonStyle = {
     padding: '0 8px',
     border: '1px solid',
     borderRadius: '4px',
+    whiteSpace: 'nowrap',
     cursor: 'pointer',
   }
 
+  useEffect(() => {
+    toast(
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: '4px',
+        }}
+      >
+        <div>{t('Please keep this tab open. You can now use the web mode of ChatGPTBox')}</div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+          <button
+            style={buttonStyle}
+            onClick={() => {
+              Browser.runtime.sendMessage({
+                type: 'PIN_TAB',
+                data: {
+                  saveAsChatgptConfig: true,
+                },
+              })
+            }}
+          >
+            {t('Pin Tab')}
+          </button>
+          <button
+            style={buttonStyle}
+            onClick={() => {
+              Browser.runtime.sendMessage({
+                type: 'ACTIVATE_URL',
+                data: {
+                  tabId: config.chatgptJumpBackTabId,
+                },
+              })
+            }}
+          >
+            {t('Go Back')}
+          </button>
+        </div>
+      </div>,
+      {
+        toastId: 0,
+        updateId: 0,
+      },
+    )
+  }, [config.themeMode, config.preferredLanguage])
+
   return (
-    <div className="chatgptbox-notification">
-      <div>{t('Please keep this tab open. You can now use the web mode of ChatGPTBox')}</div>
-      <button
-        style={buttonStyle}
-        onClick={() => {
-          Browser.runtime.sendMessage({
-            type: 'ACTIVATE_URL',
-            data: {
-              tabId: config.chatgptJumpBackTabId,
-            },
-          })
-        }}
-      >
-        {t('Go Back')}
-      </button>
-      <button
-        style={buttonStyle}
-        onClick={() => {
-          props.container.remove()
-        }}
-      >
-        X
-      </button>
-    </div>
+    <ToastContainer
+      style={{
+        width: '440px',
+      }}
+      position="top-right"
+      autoClose={7000}
+      newestOnTop={false}
+      closeOnClick={false}
+      rtl={false}
+      pauseOnFocusLoss={true}
+      draggable={false}
+      theme={theme}
+    />
   )
 }
 

src/content-script/index.jsx

@@ -302,7 +302,7 @@ async function overwriteAccessToken() {
 }
 
 async function prepareForForegroundRequests() {
-  if (location.hostname !== 'chat.openai.com') return
+  if (location.hostname !== 'chat.openai.com' || location.pathname === '/auth/login') return
 
   const userConfig = await getUserConfig()
 
@@ -313,10 +313,8 @@ async function prepareForForegroundRequests() {
   render(<NotificationForChatGPTWeb container={div} />, div)
 
   await Browser.runtime.sendMessage({
-    type: 'PIN_TAB',
-    data: {
-      saveAsChatgptConfig: true,
-    },
+    type: 'SET_CHATGPT_TAB',
+    data: {},
   })
 
   registerPortListener(async (session, port) => {

src/content-script/styles.scss

@@ -315,17 +315,3 @@
   background-color: var(--theme-color);
   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
 }
-
-.chatgptbox-notification {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 6px;
-  position: fixed;
-  top: 25px;
-  right: 25px;
-  z-index: 2147483647;
-  padding: 4px 10px;
-  border: 1px solid;
-  border-radius: 4px;
-}

src/hooks/use-theme.mjs

@@ -0,0 +1,8 @@
+import { useConfig } from './use-config.mjs'
+import { useWindowTheme } from './use-window-theme.mjs'
+
+export function useTheme() {
+  const config = useConfig()
+  const theme = useWindowTheme()
+  return [config.themeMode === 'auto' ? theme : config.themeMode, config]
+}

src/hooks/use-window-theme.mjs

@@ -2,8 +2,10 @@ import { useEffect, useState } from 'react'
 
 export function useWindowTheme() {
   const [theme, setTheme] = useState(
-    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
+    window.matchMedia
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
       : 'light',
   )
   useEffect(() => {