diff --git a/.changeset/soft-months-behave.md b/.changeset/soft-months-behave.md
new file mode 100644
index 000000000000..21ccb51550dd
--- /dev/null
+++ b/.changeset/soft-months-behave.md
@@ -0,0 +1,6 @@
+---
+"gradio": patch
+"website": patch
+---
+
+fix:Allow supplying custom `gr.Chatbot` with events to `gr.ChatInterface`
diff --git a/gradio/chat_interface.py b/gradio/chat_interface.py
index 25c505f6e4af..ca487f503fdc 100644
--- a/gradio/chat_interface.py
+++ b/gradio/chat_interface.py
@@ -182,7 +182,7 @@ def __init__(
Markdown(description)
if chatbot:
- self.chatbot = chatbot.render()
+ self.chatbot = get_component_instance(chatbot, render=True)
else:
self.chatbot = Chatbot(
label="Chatbot", scale=1, height=200 if fill_height else None
@@ -211,7 +211,7 @@ def __init__(
else:
textbox.container = False
textbox.show_label = False
- textbox_ = textbox.render()
+ textbox_ = get_component_instance(textbox, render=True)
if not isinstance(textbox_, (Textbox, MultimodalTextbox)):
raise TypeError(
f"Expected a gr.Textbox or gr.MultimodalTextbox component, but got {type(textbox_)}"
diff --git a/guides/05_chatbots/02_creating-a-custom-chatbot-with-blocks.md b/guides/05_chatbots/02_creating-a-custom-chatbot-with-blocks.md
index e3974ff319fd..4a240a9c3668 100644
--- a/guides/05_chatbots/02_creating-a-custom-chatbot-with-blocks.md
+++ b/guides/05_chatbots/02_creating-a-custom-chatbot-with-blocks.md
@@ -66,9 +66,9 @@ def greet(history, input):
def vote(data: gr.LikeData):
if data.liked:
- print("You upvoted this response: " + data.value)
+ print("You upvoted this response: " + data.value["value"])
else:
- print("You downvoted this response: " + data.value)
+ print("You downvoted this response: " + data.value["value"])
with gr.Blocks() as demo:
diff --git a/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx b/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx
index 37317ed22a3f..82a345064160 100644
--- a/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx
+++ b/js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx
@@ -27,6 +27,9 @@ gradio.ChatInterface(fn, ยทยทยท)
### Example Usage
+
+**Basic Example**: A chatbot that echoes back the users's message
+
```python
import gradio as gr
@@ -37,6 +40,31 @@ demo = gr.ChatInterface(fn=echo, examples=["hello", "hola", "merhaba"], title="E
demo.launch()
```
+**Custom Chatbot**: A `gr.ChatInterface` with a custom `gr.Chatbot` that includes a placeholder as well as upvote/downvote buttons. The upvote/downvote buttons are automatically added when a `.like()` event is attached to a `gr.Chatbot`.
+
+In order to attach event listeners to your custom chatbot, wrap the `gr.Chatbot` as well as the `gr.ChatInterface` inside of a `gr.Blocks` like this:
+
+```py
+import gradio as gr
+
+def yes(message, history):
+ return "yes"
+
+def vote(data: gr.LikeData):
+ if data.liked:
+ print("You upvoted this response: " + data.value["value"])
+ else:
+ print("You downvoted this response: " + data.value["value"])
+
+with gr.Blocks() as demo:
+ chatbot = gr.Chatbot(placeholder="Your Personal Yes-Man
Ask Me Anything")
+ chatbot.like(vote, None, None)
+ gr.ChatInterface(fn=yes, chatbot=chatbot)
+
+demo.launch()
+```
+
+
### Initialization
diff --git a/test/test_chat_interface.py b/test/test_chat_interface.py
index 613604373168..919485c4a13f 100644
--- a/test/test_chat_interface.py
+++ b/test/test_chat_interface.py
@@ -227,6 +227,17 @@ def test_example_caching_with_additional_inputs_already_rendered(self, monkeypat
assert prediction_hello[0].root[0] == ("hello", "robot hello")
assert prediction_hi[0].root[0] == ("hi", "ro")
+ def test_custom_chatbot_with_events(self):
+ with gr.Blocks() as demo:
+ chatbot = gr.Chatbot()
+ chatbot.like(lambda: None, None, None)
+ gr.ChatInterface(fn=lambda x, y: x, chatbot=chatbot)
+ dependencies = demo.fns.values()
+ assert next(
+ (d for d in dependencies if d.targets == [(chatbot._id, "like")]),
+ None,
+ )
+
class TestAPI:
def test_get_api_info(self):