Add gr.Dialogue component

[freddyaboulton]

Description

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Testing and Formatting Your Code

1. PRs will only be merged if tests pass on CI. We recommend at least running the backend tests locally, please set up your Gradio environment locally and run the backed tests: bash scripts/run_backend_tests.sh

2. Please run these bash scripts to automatically format your code: bash scripts/format_backend.sh, and (if you made any changes to non-Python files) bash scripts/format_frontend.sh

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/ed79ab4bb17edf0649826bdd52924f9d7c4e997d/gradio-5.29.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@ed79ab4bb17edf0649826bdd52924f9d7c4e997d#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/ed79ab4bb17edf0649826bdd52924f9d7c4e997d/gradio-client-1.14.2.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/ed79ab4bb17edf0649826bdd52924f9d7c4e997d/dist/lite.js""></script>

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/dialogue	minor
@gradio/dropdown	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Add gr.Dialogue component

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[freddyaboulton]

Added a "plain text" mode for the dialogue component. Should be good for review!

[abidlabs]

Just wondering why do we have to exclude gr.Dialogue from this list?

[abidlabs]

And if we need to exlcude, should we just remove it from the io_components fixture? Seems more maintainable than adjusting the count by one manually

[abidlabs]

remove?

Suggested change

	if (distance_from_bottom > distance_from_top || from_top) {
	console.log("distance_from_top", distance_from_top);

[abidlabs]

Can you explain the change here?

[abidlabs]

What is the benefit of inherting from gr.Textbox? If there's not a strong benefit, consider keeping separate as it couples these components in way that we might need to change later.

[abidlabs]

as discussed in slack somewhere, consider a more general name for this parameter like completions or tags

Suggested change

	emotions: The different emotions and intonation allowed in the dialogue. Emotions are displayed in an autocomplete menu below the input textbox when the user starts typing `:`. Use the exact emotion name expected by the AI model or inference function.
	emotions: The different emotions and intonation allowed in the dialogue. Emotions are displayed in an autocomplete menu below the input textbox when the user starts typing `:`. Use the exact emotion name expected by the AI model or inference function.

[abidlabs]

Do we really want to have default values for info and placeholder? For consistency with other components, it may be better to leave as None

[abidlabs]

For some reason I'm not seeing spaces before and after the links:

Suggested change

	<h2 style='text-align: center; display: flex; align-items: center; justify-content: center;'>Model by <a href="https://huggingface.co/nari-labs/Dia-1.6B"> Nari Labs</a>. Powered by HF and <a href="https://fal.ai/">Fal AI</a> API.</h2>
	<h2 style='text-align: center; display: flex; align-items: center; justify-content: center;'>Model by &nbsp;<a href="https://huggingface.co/nari-labs/Dia-1.6B"> Nari Labs</a>. Powered by HF and &nbsp; <a href="https://fal.ai/">Fal AI</a>&nbsp; API.</h2>

[abidlabs]

Really great demo! Btw for some reason I'm getting some strange outputs. The output audio is always exactly 30 seconds long and has long periods of silence and other artifacts. Not sure if it's an issue with their API or something with our preprocessing:

[freddyaboulton]

I think it's the Fal API. The zero-gpu demo in their org is a lot better.

[abidlabs]

Very cool component @freddyaboulton! Just a couple of suggestions:

• I think it would be great if we could support the auto-complete tags in the textbox mode:

This would allow us to close #10865 as well

• It would be great if gr.Dialogue also worked as an output component for speaker diarization demos. Right now, it shows up, but doesn't work:

Screen.Recording.2025-05-14.at.1.47.36.PM.mov

import gradio as gr


emotions = [
    "(laughs)",
    "(clears throat)",
    "(sighs)",
    "(gasps)",
    "(coughs)",
    "(singing)",
    "(sings)",
    "(mumbles)",
    "(beep)",
    "(groans)",
    "(sniffs)",
    "(claps)",
    "(screams)",
    "(inhales)",
    "(exhales)",
    "(applause)",
    "(burps)",
    "(humming)",
    "(sneezes)",
    "(chuckle)",
    "(whistles)",
]
speakers = ["Speaker 1", "Speaker 2"]


def formatter(speaker, text):
    speaker = speaker.split(" ")[1]
    return f"[S{speaker}] {text}"


dialogue = gr.Dialogue(
    speakers=speakers, emotions=emotions, formatter=formatter
)
audio = gr.Dialogue(speakers=speakers, emotions=emotions, formatter=formatter)
examples=[
    [
        [
            {
                "speaker": "Speaker 1",
                "text": "Why did the chicken cross the road?",
            },
            {"speaker": "Speaker 2", "text": "I don't know!"},
            {
                "speaker": "Speaker 1",
                "text": "to get to the other side! (laughs)",
            },
        ]
    ],
    [
        [
            {
                "speaker": "Speaker 1",
                "text": "I am a little tired today (sighs).",
            },
            {"speaker": "Speaker 2", "text": "Hang in there!"},
        ]
    ],
]

demo = gr.Interface(lambda x: x, [dialogue], [audio], examples=examples)

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