fix lost port connect issue

src/background/index.ts

@@ -13,9 +13,16 @@ browser.commands.onCommand.addListener(function (command) {
 })
 
 browser.runtime.onConnect.addListener(function (port) {
-	port.onMessage.addListener(function (msg) {
-		handleStream(msg, port)
-	})
+	if (port.name === "stream") {
+		// console.log("Connected to the content script")
+		port.onMessage.addListener(function (msg) {
+			handleStream(msg, port)
+		})
+
+		// port.onDisconnect.addListener(() => {
+		// 	console.log("Content script disconnected")
+		// })
+	}
 })
 
 browser.runtime.onMessage.addListener(function (request, sender, sendResponse) {

src/components/combobox.tsx

@@ -26,7 +26,6 @@ import {
 } from "~/lib/state"
 import { PromptTypeEnum } from "~lib/enums"
 import ContextMenuComponent from "./context_menu"
-import { streamPort } from "~lib/runtime"
 import browser from "webextension-polyfill"
 
 export default function ComboxComponent() {
@@ -58,6 +57,16 @@ export default function ComboxComponent() {
 		}
 	}, [selectedPrompt])
 
+	const streamPort = browser.runtime.connect({ name: "stream" })
+
+	streamPort.onMessage.addListener(function (msg) {
+		if (msg === "[DONE]") {
+			setIsLoading(false)
+		} else {
+			setResponseMessage(msg)
+		}
+	})
+
 	const handleMessage = async (fouce: boolean) => {
 		if (!engine) {
 			handleToast("Please select an engine")

src/content.tsx

@@ -6,21 +6,17 @@ import Draggable from "react-draggable"
 import { useMessage } from "@plasmohq/messaging/hook"
 import {
 	contextAtom,
-	isLoadingAtom,
 	isShowElementAtom,
 	isShowIconAtom,
 	isShowToastAtom,
 	notificationAtom,
-	responseMessageAtom,
 	selectedElementAtom,
 } from "~/lib/state"
 import ComboxComponent from "~components/combobox"
 import DropdownMenuComponent from "~components/dropdown"
 import NotificationComponent from "~components/notification"
 import { OutputComponent } from "~components/output"
 import { ToolsComponent } from "~components/tools"
-import { streamPort } from "~lib/runtime"
-
 export const config: PlasmoCSConfig = {
 	matches: ["<all_urls>"],
 	all_frames: false,
@@ -37,8 +33,6 @@ const positionAtom = atom<{ x: number; y: number } | null>(null)
 const Index = () => {
 	const [screenWidth, setScreenWidth] = useState(window.innerWidth)
 	const setContext = useSetAtom(contextAtom)
-	const setResponseMessage = useSetAtom(responseMessageAtom)
-	const setIsLoading = useSetAtom(isLoadingAtom)
 	const [isShowElement, setIsShowElement] = useAtom(isShowElementAtom)
 	const [isShowIcon, setIsShowIcon] = useAtom(isShowIconAtom)
 	const notification = useAtomValue(notificationAtom)
@@ -61,14 +55,6 @@ const Index = () => {
 		// }
 	}
 
-	streamPort.onMessage.addListener(function (msg) {
-		if (msg === "[DONE]") {
-			setIsLoading(false)
-		} else {
-			setResponseMessage(msg)
-		}
-	})
-
 	const handleMouseUp = event => {
 		// do not update on shadowRoot
 		const shadowRoot = document.querySelector("plasmo-csui")?.shadowRoot