Allow supplying custom gr.Chatbot with events to gr.ChatInterface

.changeset/soft-months-behave.md

@@ -0,0 +1,5 @@
+---
+"gradio": patch
+---
+
+fix:Allow putting suppling custom `gr.Chatbot` with events to `gr.ChatInterface`

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_)}"

guides/05_chatbots/01_creating-a-chatbot-fast.md

@@ -136,6 +136,25 @@ gr.ChatInterface(
 
 The placeholder appears vertically and horizontally centered in the chatbot.
 
+If you would like to attach event listeners to your custom chatbot, wrap the chatbot as well as the `gr.ChatInterface` inside of a `gr.Blocks` like this:
+
+```py
+import gradio as gr
+
+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()
+    chatbot.like(vote, None, None)
+    gr.ChatInterface(fn=lambda x,y:x, chatbot=chatbot)
+
+demo.launch()
+```
+
 ## Add Multimodal Capability to your chatbot
 
 You may want to add multimodal capability to your chatbot. For example, you may want users to be able to easily upload images or files to your chatbot and ask questions about it. You can make your chatbot "multimodal" by passing in a single parameter (`multimodal=True`) to the `gr.ChatInterface` class.

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:

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):