Chatbot: Message bar enhancements

[kaylachumley]

Pattern originates from Mark riggans genie designs - Genie requests that the pf chatbot team incorporates these enhancements including canvas mode.

Considerations:

• How does the message bar look in overlay vs desktop
• canvas mode label/switch location
• Remove attach icon for the + icon?
• placement of + icon?
• max height on message bar with multiple lines of text
• Can analytics tell us who is using the attach menu component?
• ability to add content above or below text input within bar

RHDH figma file with request feature designs

[nicolethoen]

Hopefully this is helpful - i think this can be broken up into three concepts/stories:

the first two are related to these figma designs: https://www.figma.com/design/lJ5s1z11E4Q2Bp6kD3TE0W/Red-Hat-Project-Genie?node-id=353-5202&p=f&m=dev

first is message bar layout updates:

• plus sign button/toggle to the left of the input opens a menu
• selected 'mode' appears in a dismissible label below the input - inline with the send and microphone buttons. input moves up and takes up 100% width of message bar

second is the including resources via tagging with a hashtag

• typing a '#' opens a menu of resources which could be selected
• selecting a resource adds an inline styled snippet representing the selection in the input

The third is related to this design: https://www.figma.com/design/lJ5s1z11E4Q2Bp6kD3TE0W/Red-Hat-Project-Genie?node-id=353-51254&m=dev
we will need a voice recording animation