Message Bar - Text Input

[asuwebdesign]

Design Specs:

• Short prompt
• Long prompt
• Overflow prompt

Message bar is the primary way users send prompts through the chatbot. Message bar can be configured to support additional features. When users type their message, the contents will stack once it runs out of room horizontally. Send action does not appear until a valid input has been given. A maximum of 8 lines are displayed. Prompts that exceed this limit will enable the message bar to be scrollable.

Supports:

• Text prompt
• Send action

[asuwebdesign]

TextArea component from PatternFly does not support auto-resizing width, which is required for the desired flexbox layout to shift properly as users type long values. Rather than attempting to use the contentEditable approach using non-native elements, I've imported an external NPM package to provide a resizable textarea element.

Will attempt to reconfigure styling to match design specs and properly test.

[asuwebdesign]

Added logic to submit user messages to the Messages component. Additional logic added to adjust the scroll position of the conversation so that new messages will always appear above the message bar.