Chat Input loses focus

[damhack]

In order for the WebComponent to be useful as a chat interface, the user input field needs to gain focus automatically after each turn of the conversation. At the moment it needs a mouse click/touch. Especially if the parent page is already autofocusing another element.

I don't want to do a PR, because code quality (and not sure if anyone is actively maintaining this sub-project any more).

So here's how I resolved it on Node 18:

Insert after line 84 of src/chatWidget/chatWindow/index.tsx

const inputRef = useRef<HTMLInputElement>(null); 
const handleBlur = () => {
    if (inputRef.current) { inputRef.current.focus(); }
 };

Add the following attributes to the input tag inside the cl-input_container div

ref={inputRef}
onBlur={handleBlur}

This will give the chat input focus whenever the chat window is open, allowing continuous conversation without having to click on the input field.

Note, this probably only works with Node 18+. I believe inputRef.current can be changed to just inputRef for earlier versions of Node.

Hope this helps.

[anovazzi1]

nice, we will make this enhancement

[damhack]

Dropped a PR with a better solution.