How to Maintain Input Focus After Sending a Message in AiChat Component?

[fermartz]

Hi,

I'm using the AiChat component from the @nlux/react library to build a chatbot interface in my React application. Everything is working great, but I've encountered an issue where the input field loses focus after sending a message. This forces the user to manually click on the input field each time they want to send another message, which disrupts the flow of conversation.

Here's a brief overview of my setup:

• I'm using AiChat with a custom stream adapter.
• I'm leveraging MUI for other UI components.

Problem:
After sending a message by either clicking the send button or pressing the Enter key, the input field loses focus. I'd like to keep the focus on the input field after each message is sent so that users can continue typing without needing to click on the input again.

Question:
Is there a recommended way to maintain focus on the input field after sending a message when using the AiChat component? If the library doesn't currently support this, is there a workaround or custom implementation you'd suggest?

Any guidance or examples would be greatly appreciated. Thanks for the great library!

[ademarco]

Use autoFocus: true like so:

    <AiChat
      composerOptions={{
        autoFocus: true,
      }}
    />

[fermartz]

@ademarco thank you!!!

I must have missed that one. It works like a charm.

[fermartz]

Closing this one since @ademarco gave me the solution!