Fix UI stuck on Stop when request is slow or proxy disconnects

src/background/index.mjs

@@ -110,6 +110,7 @@ function setPortProxy(port, proxyTabId) {
         console.debug('[background] Main port closed; skipping proxy message.')
         return
       }
+      if (msg.done || msg.error) port._generating = false
       try {
         port.postMessage(msg)
       } catch (e) {
@@ -156,6 +157,16 @@ function setPortProxy(port, proxyTabId) {
       const proxyRef = port.proxy
       port.proxy = null
       port._proxyTabId = null
+      if (port._generating) {
+        port._generating = false
+        if (!port._isClosed) {
+          try {
+            port.postMessage({ done: true })
+          } catch (e) {
+            console.warn('[background] Error posting done on proxy disconnect:', e)
+          }
+        }
+      }
       if (port._reconnectTimerId) {
         clearTimeout(port._reconnectTimerId)
         port._reconnectTimerId = null
@@ -257,6 +268,7 @@ function setPortProxy(port, proxyTabId) {
         '[background] Main port disconnected (e.g. popup/sidebar closed). Cleaning up proxy connections and listeners.',
       )
       port._isClosed = true
+      port._generating = false
       if (port._reconnectTimerId) {
         clearTimeout(port._reconnectTimerId)
         port._reconnectTimerId = null
@@ -401,6 +413,7 @@ async function executeApi(session, port, config) {
           console.debug('[background] Posting message to proxy tab:', { session: redactedSession })
           try {
             port.proxy.postMessage({ session })
+            port._generating = true
           } catch (e) {
             console.warn(
               '[background] Error posting message to existing proxy tab in executeApi (ChatGPT Web Model):',
@@ -413,6 +426,7 @@ async function executeApi(session, port, config) {
               console.debug('[background] Proxy re-established. Attempting to post message again.')
               try {
                 port.proxy.postMessage({ session })
+                port._generating = true
                 console.info('[background] Successfully posted session after proxy reconnection.')
               } catch (e2) {
                 console.error(

src/components/ConversationCard/index.jsx

@@ -66,6 +66,7 @@ function ConversationCard(props) {
   const [session, setSession] = useState(props.session)
   const windowSize = useClampWindowSize([750, 1500], [250, 1100])
   const bodyRef = useRef(null)
+  const replacedPortRef = useRef(null)
   const [completeDraggable, setCompleteDraggable] = useState(false)
   const useForegroundFetch = isUsingBingWebModel(session)
   const [apiModes, setApiModes] = useState([])
@@ -118,7 +119,7 @@ function ConversationCard(props) {
 
   useEffect(() => {
     if (props.onUpdate) props.onUpdate(port, session, conversationItemData)
-  }, [session, conversationItemData])
+  }, [port, session, conversationItemData])
 
   useEffect(() => {
     const { offsetHeight, scrollHeight, scrollTop } = bodyRef.current
@@ -289,6 +290,10 @@ function ConversationCard(props) {
 
   useEffect(() => {
     const portListener = () => {
+      if (replacedPortRef.current === port) {
+        replacedPortRef.current = null
+        return
+      }
       setPort(Browser.runtime.connect())
       setIsReady(true)
     }
@@ -329,7 +334,7 @@ function ConversationCard(props) {
         port.onMessage.removeListener(portMessageListener)
       }
     }
-  }, [conversationItemData])
+  }, [port, conversationItemData])
 
   const getRetryFn = (session) => async () => {
     updateAnswer(`<p class="gpt-loading">${t('Waiting for response...')}</p>`, false, 'answer')
@@ -493,6 +498,11 @@ function ConversationCard(props) {
             text={t('Clear Conversation')}
             onConfirm={async () => {
               await postMessage({ stop: true })
+              if (!useForegroundFetch) {
+                replacedPortRef.current = port
+                port.disconnect()
+                setPort(Browser.runtime.connect())
+              }
               Browser.runtime.sendMessage({
                 type: 'DELETE_CONVERSATION',
                 data: {
@@ -507,6 +517,7 @@ function ConversationCard(props) {
               })
               newSession.sessionId = session.sessionId
               setSession(newSession)
+              setIsReady(true)
             }}
           />
           {!props.pageMode && (

src/services/apis/azure-openai-api.mjs

@@ -68,10 +68,15 @@ export async function generateAnswersWithAzureOpenaiApi(port, question, session)
         }
       },
       async onStart() {},
-      async onEnd() {
-        port.postMessage({ done: true })
-        port.onMessage.removeListener(messageListener)
-        port.onDisconnect.removeListener(disconnectListener)
+      async onEnd(aborted) {
+        try {
+          if (!aborted) {
+            port.postMessage({ done: true })
+          }
+        } finally {
+          port.onMessage.removeListener(messageListener)
+          port.onDisconnect.removeListener(disconnectListener)
+        }
       },
       async onError(resp) {
         port.onMessage.removeListener(messageListener)

src/services/apis/chatgpt-web.mjs

@@ -357,42 +357,51 @@ export async function generateAnswersWithChatgptWebApi(port, question, session,
     session.wsRequestId = wsRequestId
     port.postMessage({ session: session })
   } else {
-    await fetchSSE(url, {
-      ...options,
-      onMessage(message) {
-        console.debug('sse message', message)
-        if (message.trim() === '[DONE]') {
-          finishMessage()
-          return
-        }
-        let data
-        try {
-          data = JSON.parse(message)
-        } catch (error) {
-          console.debug('json error', error)
-          return
-        }
-        handleMessage(data)
-      },
-      async onStart() {
-        // sendModerations(accessToken, question, session.conversationId, session.messageId)
-      },
-      async onEnd() {
-        port.postMessage({ done: true })
-        cleanController()
-      },
-      async onError(resp) {
-        cleanController()
-        if (resp instanceof Error) throw resp
-        if (resp.status === 403) {
-          throw new Error('CLOUDFLARE')
-        }
-        const error = await resp.json().catch(() => ({}))
-        throw new Error(
-          !isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`,
-        )
-      },
-    })
+    try {
+      await fetchSSE(url, {
+        ...options,
+        onMessage(message) {
+          console.debug('sse message', message)
+          if (message.trim() === '[DONE]') {
+            finishMessage()
+            return
+          }
+          let data
+          try {
+            data = JSON.parse(message)
+          } catch (error) {
+            console.debug('json error', error)
+            return
+          }
+          handleMessage(data)
+        },
+        async onStart() {
+          // sendModerations(accessToken, question, session.conversationId, session.messageId)
+        },
+        async onEnd(aborted) {
+          try {
+            if (!aborted) {
+              port.postMessage({ done: true })
+            }
+          } finally {
+            cleanController()
+          }
+        },
+        async onError(resp) {
+          cleanController()
+          if (resp instanceof Error) throw resp
+          if (resp.status === 403) {
+            throw new Error('CLOUDFLARE')
+          }
+          const error = await resp.json().catch(() => ({}))
+          throw new Error(
+            !isEmpty(error) ? JSON.stringify(error) : `${resp.status} ${resp.statusText}`,
+          )
+        },
+      })
+    } finally {
+      cleanController()
+    }
   }
 
   function handleMessage(data) {

src/services/apis/claude-api.mjs

@@ -78,10 +78,15 @@ export async function generateAnswersWithClaudeApi(port, question, session) {
       }
     },
     async onStart() {},
-    async onEnd() {
-      port.postMessage({ done: true })
-      port.onMessage.removeListener(messageListener)
-      port.onDisconnect.removeListener(disconnectListener)
+    async onEnd(aborted) {
+      try {
+        if (!aborted) {
+          port.postMessage({ done: true })
+        }
+      } finally {
+        port.onMessage.removeListener(messageListener)
+        port.onDisconnect.removeListener(disconnectListener)
+      }
     },
     async onError(resp) {
       port.onMessage.removeListener(messageListener)

src/services/apis/moonshot-web.mjs

@@ -426,7 +426,11 @@ export class Conversation {
         }
       },
       async onStart() {},
-      async onEnd() {
+      async onEnd(aborted = false) {
+        if (aborted) {
+          reject(new DOMException('Aborted', 'AbortError'))
+          return
+        }
         resolve({
           completion: fullResponse,
         })

src/services/apis/openai-compatible-core.mjs

@@ -142,12 +142,30 @@ export async function generateAnswersWithOpenAICompatible({
       }
     },
     async onStart() {},
-    async onEnd() {
-      if (!finished) {
-        finish()
+    async onEnd(aborted = false) {
+      try {
+        if (!finished) {
+          if (aborted) {
+            const shouldPostSession = Boolean(answer) || session.isRetry
+            if (shouldPostSession) {
+              if (answer) {
+                pushRecord(session, question, answer)
+              }
+              session.isRetry = false
+              try {
+                port.postMessage({ session })
+              } catch (e) {
+                console.warn('[openai-compatible-core] Failed to post session on abort:', e)
+              }
+            }
+          } else {
+            finish()
+          }
+        }
+      } finally {
+        port.onMessage.removeListener(messageListener)
+        port.onDisconnect.removeListener(disconnectListener)
       }
-      port.onMessage.removeListener(messageListener)
-      port.onDisconnect.removeListener(disconnectListener)
     },
     async onError(resp) {
       port.onMessage.removeListener(messageListener)

src/services/apis/waylaidwanderer-api.mjs

@@ -63,10 +63,15 @@ export async function generateAnswersWithWaylaidwandererApi(port, question, sess
       }
     },
     async onStart() {},
-    async onEnd() {
-      port.postMessage({ done: true })
-      port.onMessage.removeListener(messageListener)
-      port.onDisconnect.removeListener(disconnectListener)
+    async onEnd(aborted) {
+      try {
+        if (!aborted) {
+          port.postMessage({ done: true })
+        }
+      } finally {
+        port.onMessage.removeListener(messageListener)
+        port.onDisconnect.removeListener(disconnectListener)
+      }
     },
     async onError(resp) {
       port.onMessage.removeListener(messageListener)

src/services/clients/claude/index.mjs

@@ -627,7 +627,11 @@ export class Conversation {
           }
         },
         async onStart() {},
-        async onEnd() {
+        async onEnd(aborted = false) {
+          if (aborted) {
+            reject(new DOMException('Aborted', 'AbortError'))
+            return
+          }
           resolve({
             completion: fullResponse,
           })

src/services/wrappers.mjs

@@ -66,45 +66,64 @@ function isAbortError(err) {
   return name === 'AbortError' || message.includes('aborted') || message.includes('aborterror')
 }
 
+function isDisconnectedPortError(err) {
+  if (!err || typeof err !== 'object') return false
+  const message = typeof err.message === 'string' ? err.message.toLowerCase() : ''
+  return (
+    message.includes('disconnected port') ||
+    message.includes('port closed') ||
+    message.includes('extension context invalidated')
+  )
+}
+
 export function handlePortError(session, port, err) {
   if (isAbortError(err)) return
+  if (isDisconnectedPortError(err)) {
+    console.warn('[handlePortError] Ignoring disconnected port error:', err.message)
+    return
+  }
   console.error(err)
+  const postError = (error) => {
+    try {
+      port.postMessage({ error })
+    } catch (postErr) {
+      console.warn('[handlePortError] Failed to post error:', postErr)
+    }
+  }
   const message = typeof err?.message === 'string' ? err.message : ''
   if (message) {
     if (
       ['message you submitted was too long', 'maximum context length'].some((m) =>
         message.includes(m),
       )
     )
-      port.postMessage({ error: t('Exceeded maximum context length') + '\n\n' + message })
+      postError(t('Exceeded maximum context length') + '\n\n' + message)
     else if (['CaptchaChallenge', 'CAPTCHA'].some((m) => message.includes(m)))
-      port.postMessage({ error: t('Bing CaptchaChallenge') + '\n\n' + message })
+      postError(t('Bing CaptchaChallenge') + '\n\n' + message)
     else if (['exceeded your current quota'].some((m) => message.includes(m)))
-      port.postMessage({ error: t('Exceeded quota') + '\n\n' + message })
+      postError(t('Exceeded quota') + '\n\n' + message)
     else if (['Rate limit reached'].some((m) => message.includes(m)))
-      port.postMessage({ error: t('Rate limit') + '\n\n' + message })
+      postError(t('Rate limit') + '\n\n' + message)
     else if (['authentication token has expired'].some((m) => message.includes(m)))
-      port.postMessage({ error: 'UNAUTHORIZED' })
+      postError('UNAUTHORIZED')
     else if (
       isUsingClaudeWebModel(session) &&
       ['Invalid authorization', 'Session key required'].some((m) => message.includes(m))
     )
-      port.postMessage({
-        error: t('Please login at https://claude.ai first, and then click the retry button'),
-      })
+      postError(t('Please login at https://claude.ai first, and then click the retry button'))
     else if (
       isUsingBingWebModel(session) &&
       ['/turing/conversation/create: failed to parse response body.'].some((m) =>
         message.includes(m),
       )
     )
-      port.postMessage({ error: t('Please login at https://bing.com first') })
-    else port.postMessage({ error: message })
+      postError(t('Please login at https://bing.com first'))
+    else postError(message)
   } else {
     const errMsg = JSON.stringify(err) ?? 'unknown error'
     if (isUsingBingWebModel(session) && errMsg.includes('isTrusted'))
-      port.postMessage({ error: t('Please login at https://bing.com first') })
-    else port.postMessage({ error: errMsg })
+      postError(t('Please login at https://bing.com first'))
+    else postError(errMsg)
   }
 }