Can't set resumedChatGroupId after initialization

[totally-free-checking]

When using voice-react, there is no way to add a resumedChatGroupId parameter after the control has been rendered.

Why this would be useful:
When a new chat is started without specifying a resumedChatGroupId but then the socket gets disconnected (due to an error or any other reason), we need to be able to gracefully reconnect. Currently, the only way to add the resumedChatGroupId parameter is by reloading the page, which is a bad user experience. The value that is set on the initialization is somehow frozen and immutable.

Potential workarounds we've explored:

1. Setting the VoiceProvider's property resumedChatGroupId dynamically. This does not take effect when reconnecting.
2. Getting a reference to the HumeConfig and mutating this. This also does not work.
3. We can use the HumeClient directly, and not use VoiceProvider. But, the VoiceProvider is a better fit for our use case and we'd prefer to use it if possible.

Would it be possible to expose the resumedChatGroupId so that it can be updated dynamically?

[twitchard]

Hi @totally-free-checking, thanks for writing in. We're going to look into making this updatable.

In the meantime, you should be able to achieve a similar effect by setting a key on the VoiceProvider component that uses your chat_group_id. That way when the chat_group_id changes, React will treat the VoiceProvider as a new component and fully reinitialize it

[totally-free-checking]

Thanks for the workaround. We tried this, but found that, on the initial load, it triggers a disconnect and reconnect when the component refreshes upon assignment of the key. We can handle this in code, but it means longer wait time until the socket is ready for conversation.

Here is the code:

<VoiceProvider
        key={chatGroupId}
        onMessage={(message) => {
          if (message.type === "chat_metadata") {
            console.log("chat_metadata", message);
            setChatGroupId(message.chatGroupId);
          }
        }}
        resumedChatGroupId={chatGroupId}
        ...
>
{children}
</VoiceProvider>