断开连接提示

src/components/Body.tsx

@@ -39,6 +39,7 @@ import Ask from './Ask'
 import { v4 } from 'uuid'
 import RateExtension from '../components/RateExtension'
 import ApiKeyReminder from './ApiKeyReminder'
+import useMessaging from '@/messaging/layer2/useMessaging'
 
 const Body = () => {
   const dispatch = useAppDispatch()
@@ -65,6 +66,7 @@ const Body = () => {
   // const fontSize = useAppSelector(state => state.env.envData.fontSize)
   const searchText = useAppSelector(state => state.env.searchText)
   const asks = useAppSelector(state => state.env.asks)
+  const {disconnected} = useMessaging()
   // const recommendIdx = useMemo(() => random(0, 3), [])
   const showSearchInput = useMemo(() => {
     return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
@@ -262,6 +264,10 @@ const Body = () => {
       {searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle /></button>}
     </div>}
 
+    {disconnected && <div className='flex flex-col justify-center items-center gap-2 text-sm bg-red-400 rounded mx-2'>
+        <span className='flex items-center gap-1 text-white'><AiOutlineCloseCircle className='text-white' />已断开连接</span>
+      </div>}
+
     {/* auto scroll btn */}
     {!autoScroll && <div
       className='absolute z-[999] top-[96px] right-6 tooltip tooltip-left cursor-pointer rounded-full bg-primary/25 hover:bg-primary/75 text-primary-content p-1.5 text-xl'

src/messaging/layer1/Layer1Protocol.ts

@@ -25,6 +25,7 @@ class Layer1Protocol<L1Req = any, L1Res = any> {
   private timeout: number
   private requests: Map<string, { resolve: (value: L1Res) => void, reject: (reason?: any) => void, timer: number }>
   private handler: Handler<L1Req, L1Res>
+  public disconnected: boolean = false
 
   constructor(handler: Handler<L1Req, L1Res>, port: chrome.runtime.Port, autoDispose = true, timeout = 30000) {  // 默认超时 30 秒
     this.port = port;
@@ -82,6 +83,7 @@ class Layer1Protocol<L1Req = any, L1Res = any> {
   }
 
   dispose() {
+    this.disconnected = true
     this.port.onMessage.removeListener(this._messageListener);
     if (this.port.onDisconnect) {
       this.port.onDisconnect.removeListener(this.dispose);

src/messaging/layer2/useMessaging.ts

@@ -1,12 +1,18 @@
 import { msgWaiter } from './useMessagingService'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import Layer1Protocol from '../layer1/Layer1Protocol'
 import { L2ReqMsg, L2ResMsg, TAG_TARGET_INJECT } from '../const'
 
 const useMessaging = <AllExtensionMessagesType extends ExtensionMessage, AllInjectMessagesType extends InjectMessage>() => {
+    const [disconnected, setDisconnected] = useState(false)
+
     const sendExtension = useCallback(async <M extends AllExtensionMessagesType | MessagingExtensionMessages, K extends M['method']>(method: K, params?: Extract<M, { method: K }>['params']): Promise<Extract<M, { method: K }>['return']> => {
         // wait
         const pmh = await msgWaiter.wait() as Layer1Protocol<L2ReqMsg, L2ResMsg>
+        if (pmh.disconnected) {
+            setDisconnected(true)
+            throw new Error('disconnected')
+        }
         // send message
         const res = await pmh.sendMessage({
             from: 'app',
@@ -30,7 +36,8 @@ const useMessaging = <AllExtensionMessagesType extends ExtensionMessage, AllInje
 
     return {
         sendExtension,
-        sendInject
+        sendInject,
+        disconnected
     }
 }