Allow editing chatbot messages (#10203)

* changes

* add changeset

* changes

* changes

* changes

* changes

* changes

* changes

* changes

* Update gradio/events.py

Co-authored-by: Abubakar Abid <[email protected]>

* Update gradio/components/chatbot.py

Co-authored-by: Abubakar Abid <[email protected]>

* changes

---------

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

Author: 4 people

.changeset/angry-times-float.md

@@ -0,0 +1,6 @@
+---
+"@gradio/chatbot": minor
+"gradio": minor
+---
+
+feat:Allow editing chatbot messages

demo/chatbot_editable/run.ipynb

@@ -0,0 +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}

demo/chatbot_editable/run.py

@@ -0,0 +1,33 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        chatbot = gr.Chatbot(value=[], type="messages", editable="user")
+        chatbot2 = gr.Chatbot(value=[], type="tuples", editable="user")
+    add_message_btn = gr.Button("Add Message")
+
+    with gr.Row():
+        concatenated_text1 = gr.Textbox(label="Concatenated Chat 1")
+        concatenated_text2 = gr.Textbox(label="Concatenated Chat 2")
+        edited_messages = gr.Textbox(label="Edited Message")
+
+    def add_message(history: list, history2: list[list[str]]):
+        usr_msg = "I'm a user"
+        bot_msg = "I'm a bot"
+        history.append({"role": "user", "content": usr_msg})
+        history.append({"role": "assistant", "content": bot_msg})
+        history2.append([usr_msg, bot_msg])
+        return history, history2
+    
+    add_message_btn.click(add_message, [chatbot, chatbot2], [chatbot, chatbot2])
+    chatbot.change(lambda m: "|".join(m["content"] for m in m), chatbot, concatenated_text1)
+    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}"
+    
+    chatbot.edit(edit_message, None, edited_messages)
+    chatbot2.edit(edit_message, None, edited_messages)
+
+if __name__ == "__main__":
+    demo.launch()

gradio/__init__.py

@@ -68,6 +68,7 @@
     CopyData,
     DeletedFileData,
     DownloadData,
+    EditData,
     EventData,
     KeyUpData,
     LikeData,

gradio/components/chatbot.py

@@ -161,6 +161,7 @@ class Chatbot(Component):
         Events.option_select,
         Events.clear,
         Events.copy,
+        Events.edit,
     ]
 
     def __init__(
@@ -185,6 +186,7 @@ def __init__(
         resizeable: bool = False,
         max_height: int | str | None = None,
         min_height: int | str | None = None,
+        editable: Literal["user", "all"] | None = None,
         latex_delimiters: list[dict[str, str | bool]] | None = None,
         rtl: bool = False,
         show_share_button: bool | None = None,
@@ -222,6 +224,7 @@ def __init__(
             resizeable: If True, the component will be resizeable by the user.
             max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll. If messages are shorter than the height, the component will shrink to fit the content. Will not have any effect if `height` is set and is smaller than `max_height`.
             min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will expand to fit the content. Will not have any effect if `height` is set and is larger than `min_height`.
+            editable: Allows user to edit messages in the chatbot. If set to "user", allows editing of user messages. If set to "all", allows editing of assistant messages as well.
             latex_delimiters: A list of dicts of the form {"left": open delimiter (str), "right": close delimiter (str), "display": whether to display in newline (bool)} that will be used to render LaTeX expressions. If not provided, `latex_delimiters` is set to `[{ "left": "$$", "right": "$$", "display": True }]`, so only expressions enclosed in $$ delimiters will be rendered as LaTeX, and in a new line. Pass in an empty list to disable LaTeX rendering. For more information, see the [KaTeX documentation](https://katex.org/docs/autorender.html).
             rtl: If True, sets the direction of the rendered text to right-to-left. Default is False, which renders text left-to-right.
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
@@ -260,6 +263,7 @@ def __init__(
         self.resizeable = resizeable
         self.max_height = max_height
         self.min_height = min_height
+        self.editable = editable
         self.rtl = rtl
         self.group_consecutive_messages = group_consecutive_messages
         if latex_delimiters is None:

gradio/events.py

@@ -371,6 +371,38 @@ def __init__(self, target: Block | None, data: Any):
         """
 
 
+@document()
+class EditData(EventData):
+    """
+    The gr.EditData class is a subclass of gr.Event data that specifically carries information about the `.edit()` event. When gr.EditData
+    is added as a type hint to an argument of an event listener method, a gr.EditData object will automatically be passed as the value of that argument.
+    The attributes of this object contains information about the event that triggered the listener.
+    Example:
+        import gradio as gr
+
+        def edit(edit_data: gr.EditData, history: list[gr.MessageDict]):
+            history_up_to_edit = history[:edit_data.index]
+            history_up_to_edit[-1] = edit_data.value
+            return history_up_to_edit
+
+        with gr.Blocks() as demo:
+            chatbot = gr.Chatbot()
+            chatbot.undo(edit, chatbot, chatbot)
+        demo.launch()
+    """
+
+    def __init__(self, target: Block | None, data: Any):
+        super().__init__(target, data)
+        self.index: int | tuple[int, int] = data["index"]
+        """
+        The index of the message that was edited.
+        """
+        self.value: Any = data["value"]
+        """
+        The content of the message that was edited.
+        """
+
+
 @document()
 class DownloadData(EventData):
     """

guides/05_chatbots/05_chatbot-specific-events.md

@@ -105,7 +105,7 @@ def handle_retry(history, retry_data: gr.RetryData):
 
 ...
 
-chatbot.retry(handle_retry, chatbot, [chatbot])
+chatbot.retry(handle_retry, chatbot, chatbot)
 ```
 
 You'll see that the bot messages have a "retry" icon now -
@@ -133,6 +133,21 @@ def handle_like(data: gr.LikeData):
 chatbot.like(vote, None, None)
 ```
 
+## The Edit Event
+
+Same idea with the edit listener! with `gr.Chatbot(editable=True)`, you can capture user edits. The `gr.EditData` object tells us the index of the message edited and the new text of the mssage. Below, we use this object to edit the history, and delete any subsequent messages. 
+
+```python
+def handle_edit(history, edit_data: gr.EditData):
+    new_history = history[:edit_data.index]
+    new_history[-1]['content'] = edit_data.value
+    return new_history
+
+...
+
+chatbot.edit(handle_edit, chatbot, chatbot)
+```
+
 
 ## Conclusion
 

js/chatbot/Chatbot.test.ts

@@ -43,8 +43,8 @@ describe("Chatbot", () => {
 
 		const chatbot = getByRole("log");
 
-		const userButton = container.querySelector(".user button");
-		const botButton = container.querySelector(".bot button");
+		const userButton = container.querySelector(".user > div");
+		const botButton = container.querySelector(".bot > div");
 
 		assert.notExists(userButton);
 		assert.notExists(botButton);
@@ -60,8 +60,8 @@ describe("Chatbot", () => {
 			latex_delimiters: [{ left: "$$", right: "$$", display: true }]
 		});
 
-		const userButton = container.querySelector(".user button");
-		const botButton = container.querySelector(".bot button");
+		const userButton = container.querySelector(".user > div");
+		const botButton = container.querySelector(".bot > div");
 
 		assert.exists(userButton);
 		assert.exists(botButton);

js/chatbot/Index.svelte

@@ -59,6 +59,7 @@
 		clear_status: LoadingStatus;
 		example_select: SelectData;
 		option_select: SelectData;
+		edit: SelectData;
 		retry: UndoRetryData;
 		undo: UndoRetryData;
 		clear: null;
@@ -79,6 +80,7 @@
 	export let resizeable: boolean;
 	export let min_height: number | string | undefined;
 	export let max_height: number | string | undefined;
+	export let editable: "user" | "all" | null = null;
 	export let placeholder: string | null = null;
 	export let examples: ExampleMessage[] | null = null;
 	export let theme_mode: "system" | "light" | "dark";
@@ -131,6 +133,7 @@
 			display_consecutive_in_same_bubble={group_consecutive_messages}
 			{render_markdown}
 			{theme_mode}
+			{editable}
 			pending_message={loading_status?.status === "pending"}
 			generating={loading_status?.status === "generating"}
 			{rtl}
@@ -150,6 +153,18 @@
 				gradio.dispatch("clear");
 			}}
 			on:copy={(e) => gradio.dispatch("copy", e.detail)}
+			on:edit={(e) => {
+				if (value === null || value.length === 0) return;
+				if (type === "messages") {
+					//@ts-ignore
+					value[e.detail.index].content = e.detail.value;
+				} else {
+					//@ts-ignore
+					value[e.detail.index[0]][e.detail.index[1]] = e.detail.value;
+				}
+				value = value;
+				gradio.dispatch("edit", e.detail);
+			}}
 			{avatar_images}
 			{sanitize_html}
 			{line_breaks}

js/chatbot/shared/ButtonPanel.svelte

@@ -2,15 +2,14 @@
 	import LikeDislike from "./LikeDislike.svelte";
 	import Copy from "./Copy.svelte";
 	import type { FileData } from "@gradio/client";
-	import DownloadIcon from "./Download.svelte";
-	import { DownloadLink } from "@gradio/wasm/svelte";
 	import type { NormalisedMessage, TextMessage } from "../types";
-	import { is_component_message } from "./utils";
-	import { Retry, Undo } from "@gradio/icons";
+	import { Retry, Undo, Edit, Check, Clear } from "@gradio/icons";
 	import { IconButtonWrapper, IconButton } from "@gradio/atoms";
 	export let likeable: boolean;
 	export let show_retry: boolean;
 	export let show_undo: boolean;
+	export let show_edit: boolean;
+	export let in_edit_mode: boolean;
 	export let show_copy_button: boolean;
 	export let message: NormalisedMessage | NormalisedMessage[];
 	export let position: "right" | "left";
@@ -41,42 +40,61 @@
 	$: message_text = is_all_text(message) ? all_text(message) : "";
 
 	$: show_copy = show_copy_button && message && is_all_text(message);
-	$: show_download =
-		!Array.isArray(message) &&
-		is_component_message(message) &&
-		message.content.value?.url;
 </script>
 
-{#if show_copy || show_retry || show_undo || likeable}
+{#if show_copy || show_retry || show_undo || show_edit || likeable}
 	<div
 		class="message-buttons-{position} {layout} message-buttons {avatar !==
 			null && 'with-avatar'}"
 	>
 		<IconButtonWrapper top_panel={false}>
-			{#if show_copy}
-				<Copy
-					value={message_text}
-					on:copy={(e) => dispatch("copy", e.detail)}
-				/>
-			{/if}
-			{#if show_retry}
+			{#if in_edit_mode}
 				<IconButton
-					Icon={Retry}
-					label="Retry"
-					on:click={() => handle_action("retry")}
+					label="Submit"
+					Icon={Check}
+					on:click={() => handle_action("edit_submit")}
 					disabled={generating}
 				/>
-			{/if}
-			{#if show_undo}
 				<IconButton
-					label="Undo"
-					Icon={Undo}
-					on:click={() => handle_action("undo")}
+					label="Cancel"
+					Icon={Clear}
+					on:click={() => handle_action("edit_cancel")}
 					disabled={generating}
 				/>
-			{/if}
-			{#if likeable}
-				<LikeDislike {handle_action} />
+			{:else}
+				{#if show_copy}
+					<Copy
+						value={message_text}
+						on:copy={(e) => dispatch("copy", e.detail)}
+					/>
+				{/if}
+				{#if show_retry}
+					<IconButton
+						Icon={Retry}
+						label="Retry"
+						on:click={() => handle_action("retry")}
+						disabled={generating}
+					/>
+				{/if}
+				{#if show_undo}
+					<IconButton
+						label="Undo"
+						Icon={Undo}
+						on:click={() => handle_action("undo")}
+						disabled={generating}
+					/>
+				{/if}
+				{#if show_edit}
+					<IconButton
+						label="Edit"
+						Icon={Edit}
+						on:click={() => handle_action("edit")}
+						disabled={generating}
+					/>
+				{/if}
+				{#if likeable}
+					<LikeDislike {handle_action} />
+				{/if}
 			{/if}
 		</IconButtonWrapper>
 	</div>