[Blocks] State throws a js error

[aliabd]

Describe the bug

Using State with Chatbot throws an error.

Reproduction

import gradio as gr


def chat(message, history):
    history = history or []
    history.append((message, message))
    return history, history


block = gr.Blocks()


with block:
    chatbot = gr.outputs.Chatbot()
    message = gr.inputs.Textbox()
    submit = gr.Button("SEND")
    submit.click(chat, inputs=[message, gr.inputs.State()], outputs=[chatbot, gr.outputs.State()])


block.launch()

Throws this console error:

index.800943b3.js:14 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'component')
    at Array.uu (index.800943b3.js:14:7188)
    at kn (index.800943b3.js:14:9671)
    at du (index.800943b3.js:14:10040)
    at Qs (vendor.ba9f2ee9.js:1:6986)
    at new nt (index.800943b3.js:14:11214)
    at hu (index.800943b3.js:14:11379)
    at Qs (vendor.ba9f2ee9.js:1:6986)
    at new bu (index.800943b3.js:14:12689)
    at window.launchGradio (index.800943b3.js:14:15525)
    at index.800943b3.js:14:15863
uu @ index.800943b3.js:14
kn @ index.800943b3.js:14
du @ index.800943b3.js:14
Qs @ vendor.ba9f2ee9.js:1
nt @ index.800943b3.js:14
hu @ index.800943b3.js:14
Qs @ vendor.ba9f2ee9.js:1
bu @ index.800943b3.js:14
window.launchGradio @ index.800943b3.js:14
(anonymous) @ index.800943b3.js:14
Promise.then (async)
(anonymous) @ index.800943b3.js:14

Nothing is rendered on the page.

Replacing the block launch with

gr.Interface(chat, [message, gr.inputs.State()], [chatbot, gr.outputs.State()]).launch()

works as expected

Screenshot

No response

Logs

No response

System Info

gradio v2.8.0b20

Severity

blocker

[abidlabs]

Different error, but still an issue.

Try running demo/chatbot/run.py to reproduce

[abidlabs]

Closed via #977

[satpalsr]

Hey @abidlabs , There is still an issue. Reproduce with colab or check out this space. The space just keeps loading.

[omerXfaruq]

@aliabid94 could you take a look?

[abidlabs]

The default way to use state with Blocks is to use Variables. But imo this approach should be accepted as well since this is what users will be used to coming from Interface --> we can simply create a Variable if a user tries to use a "state" as an input or output.

Also we need to document all of this better, see #1739

[abidlabs]

I've been looking into this issue and can take it!

[abidlabs]

Thanks @aliabd for creating the issue, this should be fixed now, as long as State is used correctly, as follows:

import gradio as gr


def chat(message, history):
    history = history or []
    history.append((message, message))
    return history, history


block = gr.Blocks()


with block:
    chatbot = gr.Chatbot()
    message = gr.Textbox()
    state = gr.State()
    submit = gr.Button("SEND")
    submit.click(chat, inputs=[message, state], outputs=[chatbot, state])


block.launch()