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

…gradio-app#8677)

* allow chatbot.like

* changes

* add changeset

* add to docs

* add to docs

* fix

* fix

* add changeset

* add changeset

* move to chatinterface docs

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/soft-months-behave.md

@@ -0,0 +1,6 @@
+---
+"gradio": patch
+"website": patch
+---
+
+fix:Allow supplying 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/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:

js/_website/src/lib/templates/gradio/01_building-demos/02_chatinterface.svx

@@ -27,6 +27,9 @@ gradio.ChatInterface(fn, ···)
 <!-- Example Usage --> 
 
 ### 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="<strong>Your Personal Yes-Man</strong><br>Ask Me Anything")
+    chatbot.like(vote, None, None)
+    gr.ChatInterface(fn=yes, chatbot=chatbot)
+
+demo.launch()
+```
+
+
 <!--- Initialization -->
 ### Initialization
 <ParamTable parameters={obj.parameters} />

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