Choice between displaying examples inside and outside the chatinterface

[yvrjsharma]

Describe the bug

When additional_inputs are added to a gr.ChatInterface, they default to a gr.Examples style of display, which is positioned below the chatbot. This setup is logical for users who want to showcase individual examples with specific input values. However, if a user prefers to use the default values for the additional inputs and only wants the examples to display the prompts, there should be an option to choose between two styles of example displays: one inside the chatbot and the other below it.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

Please install the correct version and use the below code for repro:

import gradio as gr
def dummy(m, h, t, mt):
  return "hello"
  
gr.ChatInterface(
        fn=dummy,
        fill_height=True,
        additional_inputs_accordion=gr.Accordion(label="⚙️ Parameters", open=False, render=False),
        additional_inputs=[
            gr.Slider(
                minimum=0,
                maximum=1,
                step=0.1,
                value=0.3,
                label="Temperature",
                render=False,
            ),
            gr.Slider(
                minimum=128,
                maximum=8192,
                step=1,
                value=1024,
                label="Max new tokens",
                render=False,
            ),
        ],
        examples=[
            ["Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option."],
            ["What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter."],
            ["Tell me a random fun fact about the Roman Empire."],
            ["Show me a code snippet of a website's sticky header in CSS and JavaScript."],
        ],
    ).launch(debug=True)

Screenshot

Expected output:

Current behavior:

Logs

No response

System Info

I tested this both on Google Colab and locally on Windows 11. Python `3.12.3` for local.

Severity

I can work around it

[yvrjsharma]

Updated the Issue after a discussion with @dawoodkhan82 on Slack.

[yvrjsharma]

Also, related: Using a custom chatbot within the gr.ChatInterface can lead to examples being displayed both inside and outside the ChatInterface. For instance, this community Space showcases this behavior: https://huggingface.co/spaces/vilarin/Mistral-lab

Repro:

import gradio as gr

def dummy(m, h, t, mt):
    return "hello"

chatbot = gr.Chatbot(height=600, placeholder=PLACEHOLDER)

with gr.Blocks(theme="ocean") as demo:
    gr.HTML(TITLE)
    gr.DuplicateButton(value="Duplicate Space for private use", elem_classes="duplicate-button")
    gr.ChatInterface(
        fn=dummy,
        chatbot=chatbot,
        fill_height=True,
        additional_inputs_accordion=gr.Accordion(label="⚙️ Parameters", open=False, render=False),
        additional_inputs=[
            gr.Slider(
                minimum=0,
                maximum=1,
                step=0.1,
                value=0.3,
                label="Temperature",
                render=False,
            ),
            gr.Slider(
                minimum=128,
                maximum=8192,
                step=1,
                value=1024,
                label="Max new tokens",
                render=False,
            ),
        ],
        examples=[
            ["Help me study vocabulary: write a sentence for me to fill in the blank, and I'll try to pick the correct option."],
            ["What are 5 creative things I could do with my kids' art? I don't want to throw them away, but it's also so much clutter."],
            ["Tell me a random fun fact about the Roman Empire."],
            ["Show me a code snippet of a website's sticky header in CSS and JavaScript."],
        ],
        cache_examples=False,
    ) 

Screenshot of the app: