Multiple response to ChatInterface/Chatbot

[sumitsahoo]

Describe the bug

I want to create a chatbot that can respond in multiple messages instead of just one bubble. Here is a sample code:

import time
import gradio as gr


def bot(message, history):
    return [
            (None, "Here is the image you requested:"),
            (None, ("lion.jpg",)),
            (None, "And here is an audio file:"),
            (None, ("cantina.wav",)),
        ]


demo = gr.ChatInterface(bot).queue()

if __name__ == "__main__":
    demo.launch()

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import time
import gradio as gr


def bot(message, history):
    return [
            (None, "Here is the image you requested:"),
            (None, ("lion.jpg",)),
            (None, "And here is an audio file:"),
            (None, ("cantina.wav",)),
        ]


demo = gr.ChatInterface(bot).queue()

if __name__ == "__main__":
    demo.launch()

Screenshot

No response

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 4.28.3
gradio_client version: 0.16.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.110.2
ffmpy: 0.3.2
gradio-client==0.16.0 is not installed.
httpx: 0.27.0
huggingface-hub: 0.22.2
importlib-resources: 6.4.0
jinja2: 3.1.3
markupsafe: 2.1.5
matplotlib: 3.8.4
numpy: 1.26.4
orjson: 3.10.1
packaging: 24.0
pandas: 2.2.2
pillow: 10.3.0
pydantic: 2.7.1
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.4.2
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.11.0
urllib3: 2.2.1
uvicorn: 0.29.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.3.1
httpx: 0.27.0
huggingface-hub: 0.22.2
packaging: 24.0
typing-extensions: 4.11.0
websockets: 11.0.3

Severity

I can work around it

[abidlabs]

Hi @sumitsahoo the gr.ChatInterface high-level class does not support sending multiple user messages back. You need to send a single message, although you could potentially include images or audio by rendering the HTML, e.g.

def bot(message, history):
    return "And here is the image <br> <img src=...> <br> and here is the audio: <br> <audio src="...">"

For more flexibility in creating demos, you would need to create a Chatbot component using the low-level Blocks class, as described here: https://www.gradio.app/guides/creating-a-custom-chatbot-with-blocks

[sumitsahoo]

Thanks, workaround works for now 👍🏻