feat: improve web mode notification (#309)

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}
+    />
   )
 }