Chat Composer onChange Event

[gyasi-eco]

Hello,

I'm currently implementing the ChatComposer component to replace the TextArea component.

However, I'm running into an error (screenshot attached)

when trying to use the onChange prop.
We're also writing in js so maybe there's a typing issue since the prop is expecting a void callback.

Would be helpful if there are some examples you can point me to that show how the onChange prop should be implemented.

Best,
Gyasi

[TheSisb]

Hi @gyasi-eco,

It looks to me like an error in your implementation from the error message.

Cannot convert undefined or null to object at Function.keys ()

So it seems you aren't providing ChatComposer with everything it needs. Since you're on JS and not Typescript, you may have missed that there is a required prop called config. And so it's trying to use that prop as an object but it isn't passed so it is "null or undefined".

If that wasn't the issue, we can't really tell what else it could be from screenshots. If you can, provide a minimal reproduction on Codesandbox so we can help debug further.

[gyasi-eco]

Hello @TheSisb,

I've added all the props to the Component, and now my issue is with the execution of an onChange event handler.
When I type into the ChatComposer immediately throws an error saying that my event object value is undefined.

We're trying to re-create the ChatLog example in the Paste documentation ChatLog Example Ref:

The documentation doesn't explain the shape of the config object and it's not immediately clear how to derive it from the Lexical documentation. We'll look for a typescript object to reference, but this doesn't seem to be the blocker.

The bigger issue is that the example doesn't fully work either. The button doesn't submit and it appears to have a ChatComposer component and a Button Component but the connection between the two components is unclear. How does one access the data from the ChatComposer component?

Thank you for your help.

[ayyrickay]

To add on to what Gyasi said, it seems like maybe one pattern with the ChatComposer is to use the config to directly interface with the editor state and connect it to parent component state. The other would be to use the OnChange method to update the parent component's state from there (maybe with more limited functionality than in the config.)

Is this the correct way to think about it? And if so, that would mean that in the ChatLog example, we might see that the ChatComposer is updating some predefined component state, and then a Button component calls a function that performs whatever the sending action is using the existing component state?

[TheSisb]

Hey all,

ChatComposer works differently than a traditional Input or TextArea in that the event (and event.target.value) aren't passed as you'd expect in the onChange callback. We are missing an example on our website, so I'll make sure to add one soon, but in the meantime you can look at our onChange story here and review how we build the code here

The signature of the onChange function looks like this

[SiTaggart]

Hi @gyasi-eco, in coming update. Follow along #3426

[gyasi-eco]

Hi @SiTaggart Thank you for the update!

[SiTaggart]

Hi there @gyasi-eco

The docs have been published to the docsite. Hopefully we've explained it enough, because we totally accept that the Lexical docs are... well, terrible, honestly.

https://paste.twilio.design/components/chat-composer#with-chat-log

[gyasi-eco]

Hi @SiTaggart

Awesome! Thank you for sending this over I really appreciate your hard work on adding this plugin to the ChatComposer and creating an example for the docs.