Add .previous_value to gr.EditData (#10323)

* changes * add changeset * changes --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Jan 9, 2025 · 391a4d0 · 391a4d0
1 parent 58b8391
commit 391a4d0
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 6 deletions.
diff --git a/.changeset/funny-pets-win.md b/.changeset/funny-pets-win.md
@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Add `.previous_value` to `gr.EditData`
diff --git a/demo/chatbot_editable/run.ipynb b/demo/chatbot_editable/run.ipynb
@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_editable"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        chatbot = gr.Chatbot(value=[], type=\"messages\", editable=\"user\")\n", "        chatbot2 = gr.Chatbot(value=[], type=\"tuples\", editable=\"user\")\n", "    add_message_btn = gr.Button(\"Add Message\")\n", "\n", "    with gr.Row():\n", "        concatenated_text1 = gr.Textbox(label=\"Concatenated Chat 1\")\n", "        concatenated_text2 = gr.Textbox(label=\"Concatenated Chat 2\")\n", "        edited_messages = gr.Textbox(label=\"Edited Message\")\n", "\n", "    def add_message(history: list, history2: list[list[str]]):\n", "        usr_msg = \"I'm a user\"\n", "        bot_msg = \"I'm a bot\"\n", "        history.append({\"role\": \"user\", \"content\": usr_msg})\n", "        history.append({\"role\": \"assistant\", \"content\": bot_msg})\n", "        history2.append([usr_msg, bot_msg])\n", "        return history, history2\n", "    \n", "    add_message_btn.click(add_message, [chatbot, chatbot2], [chatbot, chatbot2])\n", "    chatbot.change(lambda m: \"|\".join(m[\"content\"] for m in m), chatbot, concatenated_text1)\n", "    chatbot2.change(lambda m: \"|\".join(\"|\".join(m) for m in m), chatbot2, concatenated_text2)\n", "\n", "    def edit_message(edited_message: gr.EditData):\n", "        return f\"{edited_message.value} at {edited_message.index}\"\n", "    \n", "    chatbot.edit(edit_message, None, edited_messages)\n", "    chatbot2.edit(edit_message, None, edited_messages)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_editable"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        chatbot = gr.Chatbot(value=[], type=\"messages\", editable=\"user\")\n", "        chatbot2 = gr.Chatbot(value=[], type=\"tuples\", editable=\"user\")\n", "    add_message_btn = gr.Button(\"Add Message\")\n", "\n", "    with gr.Row():\n", "        concatenated_text1 = gr.Textbox(label=\"Concatenated Chat 1\")\n", "        concatenated_text2 = gr.Textbox(label=\"Concatenated Chat 2\")\n", "        edited_messages = gr.Textbox(label=\"Edited Message\")\n", "\n", "    def add_message(history: list, history2: list[list[str]]):\n", "        usr_msg = \"I'm a user\"\n", "        bot_msg = \"I'm a bot\"\n", "        history.append({\"role\": \"user\", \"content\": usr_msg})\n", "        history.append({\"role\": \"assistant\", \"content\": bot_msg})\n", "        history2.append([usr_msg, bot_msg])\n", "        return history, history2\n", "    \n", "    add_message_btn.click(add_message, [chatbot, chatbot2], [chatbot, chatbot2])\n", "    chatbot.change(lambda m: \"|\".join(m[\"content\"] for m in m), chatbot, concatenated_text1)\n", "    chatbot2.change(lambda m: \"|\".join(\"|\".join(m) for m in m), chatbot2, concatenated_text2)\n", "\n", "    def edit_message(edited_message: gr.EditData):\n", "        return f\"from {edited_message.previous_value} to {edited_message.value} at {edited_message.index}\"\n", "    \n", "    chatbot.edit(edit_message, None, edited_messages)\n", "    chatbot2.edit(edit_message, None, edited_messages)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
diff --git a/demo/chatbot_editable/run.py b/demo/chatbot_editable/run.py
@@ -24,7 +24,7 @@ def add_message(history: list, history2: list[list[str]]):
     chatbot2.change(lambda m: "|".join("|".join(m) for m in m), chatbot2, concatenated_text2)
 
     def edit_message(edited_message: gr.EditData):
-        return f"{edited_message.value} at {edited_message.index}"
+        return f"from {edited_message.previous_value} to {edited_message.value} at {edited_message.index}"
 
     chatbot.edit(edit_message, None, edited_messages)
     chatbot2.edit(edit_message, None, edited_messages)

diff --git a/gradio/events.py b/gradio/events.py
@@ -397,9 +397,13 @@ def __init__(self, target: Block | None, data: Any):
         """
         The index of the message that was edited.
         """
+        self.previous_value: Any = data["previous_value"]
+        """
+        The previous content of the message that was edited.
+        """
         self.value: Any = data["value"]
         """
-        The content of the message that was edited.
+        The new content of the message that was edited.
         """
 
 

diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
@@ -201,7 +201,8 @@
 			edit_index = null;
 			dispatch("edit", {
 				index: message.index,
-				value: edit_message
+				value: edit_message,
+				previous_value: message.content as string
 			});
 		} else {
 			let feedback =

diff --git a/js/chatbot/shared/utils.ts b/js/chatbot/shared/utils.ts
@@ -70,6 +70,7 @@ export interface UndoRetryData {
 export interface EditData {
 	index: number | [number, number];
 	value: string;
+	previous_value: string;
 }
 
 const redirect_src_url = (src: string, root: string): string =>

diff --git a/js/spa/test/chatbot_editable.spec.ts b/js/spa/test/chatbot_editable.spec.ts
@@ -12,15 +12,17 @@ test("test editing chatbot messages", async ({ page }) => {
 	await page.getByLabel("Edit").nth(0).click();
 	await page.locator("textarea").first().fill("GRADIO");
 	await page.getByLabel("Submit").click();
-	await expect(page.getByLabel("Edited Message")).toHaveValue("GRADIO at 0");
+	await expect(page.getByLabel("Edited Message")).toHaveValue(
+		"from I'm a user to GRADIO at 0"
+	);
 	await page.getByLabel("Edit").nth(2).click();
 	await page.locator("textarea").first().fill("FAIL");
 	await page.getByLabel("Cancel").click();
 	await page.getByLabel("Edit").nth(3).click();
 	await page.locator("textarea").first().fill("SUCCESS");
 	await page.getByLabel("Submit").click();
 	await expect(page.getByLabel("Edited Message")).toHaveValue(
-		"SUCCESS at [1, 0]"
+		"from I'm a user to SUCCESS at [1, 0]"
 	);
 	await expect(page.getByLabel("Concatenated Chat 1")).toHaveValue(
 		"GRADIO|I'm a bot|I'm a user|I'm a bot"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_editable"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " chatbot = gr.Chatbot(value=[], type=\"messages\", editable=\"user\")\n", " chatbot2 = gr.Chatbot(value=[], type=\"tuples\", editable=\"user\")\n", " add_message_btn = gr.Button(\"Add Message\")\n", "\n", " with gr.Row():\n", " concatenated_text1 = gr.Textbox(label=\"Concatenated Chat 1\")\n", " concatenated_text2 = gr.Textbox(label=\"Concatenated Chat 2\")\n", " edited_messages = gr.Textbox(label=\"Edited Message\")\n", "\n", " def add_message(history: list, history2: list[list[str]]):\n", " usr_msg = \"I'm a user\"\n", " bot_msg = \"I'm a bot\"\n", " history.append({\"role\": \"user\", \"content\": usr_msg})\n", " history.append({\"role\": \"assistant\", \"content\": bot_msg})\n", " history2.append([usr_msg, bot_msg])\n", " return history, history2\n", " \n", " add_message_btn.click(add_message, [chatbot, chatbot2], [chatbot, chatbot2])\n", " chatbot.change(lambda m: \"\|\".join(m[\"content\"] for m in m), chatbot, concatenated_text1)\n", " chatbot2.change(lambda m: \"\|\".join(\"\|\".join(m) for m in m), chatbot2, concatenated_text2)\n", "\n", " def edit_message(edited_message: gr.EditData):\n", " return f\"{edited_message.value} at {edited_message.index}\"\n", " \n", " chatbot.edit(edit_message, None, edited_messages)\n", " chatbot2.edit(edit_message, None, edited_messages)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
		{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: chatbot_editable"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", " with gr.Row():\n", " chatbot = gr.Chatbot(value=[], type=\"messages\", editable=\"user\")\n", " chatbot2 = gr.Chatbot(value=[], type=\"tuples\", editable=\"user\")\n", " add_message_btn = gr.Button(\"Add Message\")\n", "\n", " with gr.Row():\n", " concatenated_text1 = gr.Textbox(label=\"Concatenated Chat 1\")\n", " concatenated_text2 = gr.Textbox(label=\"Concatenated Chat 2\")\n", " edited_messages = gr.Textbox(label=\"Edited Message\")\n", "\n", " def add_message(history: list, history2: list[list[str]]):\n", " usr_msg = \"I'm a user\"\n", " bot_msg = \"I'm a bot\"\n", " history.append({\"role\": \"user\", \"content\": usr_msg})\n", " history.append({\"role\": \"assistant\", \"content\": bot_msg})\n", " history2.append([usr_msg, bot_msg])\n", " return history, history2\n", " \n", " add_message_btn.click(add_message, [chatbot, chatbot2], [chatbot, chatbot2])\n", " chatbot.change(lambda m: \"\|\".join(m[\"content\"] for m in m), chatbot, concatenated_text1)\n", " chatbot2.change(lambda m: \"\|\".join(\"\|\".join(m) for m in m), chatbot2, concatenated_text2)\n", "\n", " def edit_message(edited_message: gr.EditData):\n", " return f\"from {edited_message.previous_value} to {edited_message.value} at {edited_message.index}\"\n", " \n", " chatbot.edit(edit_message, None, edited_messages)\n", " chatbot2.edit(edit_message, None, edited_messages)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}