feat: improve chatgpt website notification (go back button, hide button) (#270, #287)

src/components/MarkdownRender/Hyperlink.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types'
+import Browser from 'webextension-polyfill'
+
+export function Hyperlink({ href, children }) {
+  const linkProperties = {
+    target: '_blank',
+    style: 'color: #8ab4f8; cursor: pointer;',
+    rel: 'nofollow noopener noreferrer',
+  }
+
+  return href.includes('chat.openai.com') ? (
+    <span
+      {...linkProperties}
+      onClick={() => {
+        Browser.runtime.sendMessage({
+          type: 'NEW_URL',
+          data: {
+            url: href,
+            pinned: true,
+            saveAsChatgptConfig: true,
+          },
+        })
+      }}
+    >
+      {children}
+    </span>
+  ) : (
+    <a href={href} {...linkProperties}>
+      {children}
+    </a>
+  )
+}
+
+Hyperlink.propTypes = {
+  href: PropTypes.string.isRequired,
+  children: PropTypes.object.isRequired,
+}

src/components/MarkdownRender/markdown-without-katex.jsx

@@ -4,13 +4,9 @@ import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { Pre } from './Pre'
+import { Hyperlink } from './Hyperlink'
 
 export function MarkdownRender(props) {
-  const linkProperties = {
-    target: '_blank',
-    style: 'color: #8ab4f8;',
-    rel: 'nofollow noopener noreferrer',
-  }
   return (
     <div dir="auto">
       <ReactMarkdown
@@ -26,11 +22,7 @@ export function MarkdownRender(props) {
           ],
         ]}
         components={{
-          a: (props) => (
-            <a href={props.href} {...linkProperties}>
-              {props.children}
-            </a>
-          ),
+          a: Hyperlink,
           pre: Pre,
         }}
         {...props}

src/components/MarkdownRender/markdown.jsx

@@ -7,13 +7,9 @@ import remarkMath from 'remark-math'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { Pre } from './Pre'
+import { Hyperlink } from './Hyperlink'
 
 export function MarkdownRender(props) {
-  const linkProperties = {
-    target: '_blank',
-    style: 'color: #8ab4f8;',
-    rel: 'nofollow noopener noreferrer',
-  }
   return (
     <div dir="auto">
       <ReactMarkdown
@@ -30,11 +26,7 @@ export function MarkdownRender(props) {
           ],
         ]}
         components={{
-          a: (props) => (
-            <a href={props.href} {...linkProperties}>
-              {props.children}
-            </a>
-          ),
+          a: Hyperlink,
           pre: Pre,
         }}
         {...props}

src/components/NotificationForChatGPTWeb/index.jsx

@@ -0,0 +1,48 @@
+import { useTranslation } from 'react-i18next'
+import PropTypes from 'prop-types'
+import Browser from 'webextension-polyfill'
+import { useConfig } from '../../hooks/use-config.mjs'
+
+const NotificationForChatGPTWeb = (props) => {
+  const { t } = useTranslation()
+  const config = useConfig()
+  const buttonStyle = {
+    padding: '0 8px',
+    border: '1px solid',
+    borderRadius: '4px',
+    cursor: 'pointer',
+  }
+
+  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>
+  )
+}
+
+NotificationForChatGPTWeb.propTypes = {
+  container: PropTypes.object.isRequired,
+}
+
+export default NotificationForChatGPTWeb