chore: Fix bugs - external CSS leaks, sending empty queries, CSSStylesheet constructor error on mobile

[mrderyk]

CONTEXT

We have a number of bugs that need to be addressed:

• external CSS leaking into the shadow DOM of the react-chatbot web component
• users able to send a query even if the text input field is empty
• the chatbot component breaking on mobile browsers since mounting it inside a web component

CHANGES

• Introduce :host selector styling to reset all styles in the web component's shadow host
• Short-circuit text input submit handler if the trimmed query is of length 0
• Rename QueryInput isDisabled prop to isButtonDisabled since only the button uses it i
• Set QueryInput isButtonDisabled prop to true if waiting for a chat response or trimmed query is of length 0
• When constructing web component styles, fall back to style element if CSSStylesheet constructor is not supported

[github-actions]

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-03-01 22:39 UTC

[cjcenizal]

Code looks good! Had one minor non-blocking suggestion. Didn't test locally.

[cjcenizal]

We can extract out a variable to indicate the coupling between the disabled appearance and the disabled behavior:

const isRequestDisabled = isLoading || query.trim().length === 0;

Is the useCallback saving any render cycles here?

[mrderyk]

Good callout! onSendQuery used to be a bit more complex, justifying the useCallback- but it doesn't need it anymore.

Addressed these comments here: a66a7f6