Fix reload mode by implementing close on the client (#8548)

* Fix reload mode

* add changeset

* reload test

* add changeset

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: freddyaboulton

.changeset/red-rice-build.md

@@ -0,0 +1,6 @@
+---
+"@gradio/client": patch
+"gradio": patch
+---
+
+fix:Fix reload mode by implementing `close` on the client

client/js/src/client.ts

@@ -31,7 +31,7 @@ import {
 	parse_and_set_cookies
 } from "./helpers/init_helpers";
 import { check_space_status } from "./helpers/spaces";
-import { open_stream, readable_stream } from "./utils/stream";
+import { open_stream, readable_stream, close_stream } from "./utils/stream";
 import { API_INFO_ERROR_MSG, CONFIG_ERROR_MSG } from "./constants";
 
 export class Client {
@@ -209,7 +209,7 @@ export class Client {
 	}
 
 	close(): void {
-		this.heartbeat_event?.close();
+		close_stream(this.stream_status, this.abort_controller);
 	}
 
 	static async duplicate(

js/app/test/test_chatinterface.reload.spec.ts

@@ -0,0 +1,81 @@
+import { test, expect } from "@playwright/test";
+import { spawnSync } from "node:child_process";
+import { launch_app_background, kill_process } from "./utils";
+import { join } from "path";
+
+let _process;
+
+const demo_file = "chat_demo.py";
+
+test.beforeAll(() => {
+	const demo = `
+import gradio as gr
+    
+def greet(msg, history):
+    return "Hello"
+
+demo = gr.ChatInterface(fn=greet)
+
+if __name__ == "__main__":
+    demo.launch()
+`;
+	spawnSync(`echo '${demo}' > ${join(process.cwd(), demo_file)}`, {
+		shell: true,
+		stdio: "pipe",
+		env: {
+			...process.env,
+			PYTHONUNBUFFERED: "true"
+		}
+	});
+});
+
+test.afterAll(() => {
+	if (_process) kill_process(_process);
+	spawnSync(`rm  ${join(process.cwd(), demo_file)}`, {
+		shell: true,
+		stdio: "pipe",
+		env: {
+			...process.env,
+			PYTHONUNBUFFERED: "true"
+		}
+	});
+});
+
+test("gradio dev mode correctly reloads a stateful ChatInterface demo", async ({
+	page
+}) => {
+	test.setTimeout(20 * 1000);
+
+	try {
+		const port = 7890;
+		const { _process: server_process } = await launch_app_background(
+			`GRADIO_SERVER_PORT=${port} gradio ${join(process.cwd(), demo_file)}`,
+			process.cwd()
+		);
+		_process = server_process;
+		console.log("Connected to port", port);
+		const demo = `
+import gradio as gr
+
+def greet(msg, history):
+    return "Hello"
+
+demo = gr.ChatInterface(fn=greet, textbox=gr.Textbox(label="foo"))
+
+if __name__ == "__main__":
+    demo.launch()
+`;
+		await page.goto(`http://localhost:${port}`);
+		spawnSync(`echo '${demo}' > ${join(process.cwd(), demo_file)}`, {
+			shell: true,
+			stdio: "pipe",
+			env: {
+				...process.env,
+				PYTHONUNBUFFERED: "true"
+			}
+		});
+		await expect(page.getByLabel("foo")).toBeVisible();
+	} finally {
+		if (_process) kill_process(_process);
+	}
+});