feat(MessageBar): added custom attach and additional actions #789
Conversation
|
Preview: https://chatbot-pr-chatbot-789.surge.sh A11y report: https://chatbot-pr-chatbot-789-a11y.surge.sh |
nicolethoen
left a comment
nicolethoen
left a comment
There was a problem hiding this comment.
I am so excited by how straightforward (sort of 😉 ) this was!
I feel as though the icon is incorrect - and I wonder if the icon should rotate 45 degress when it's in the expanded state? idk if that was just in the genie designs and not relevant here. @kaylachumley wdyt?
| You can position the attach button at the start of the message bar and customize it with a different icon (like a Plus icon). Additionally, you can use the `additionalActions` prop to add custom controls such as a model selector or dismissable labels. | ||
|
|
||
| This example shows two variations: | ||
|
|
||
| 1. A message bar with a custom attach menu using a Plus icon positioned at the start | ||
| 2. A message bar with the same attach menu plus additional actions including a model selector and a dismissable "Canvas" label |
There was a problem hiding this comment.
| You can position the attach button at the start of the message bar and customize it with a different icon (like a Plus icon). Additionally, you can use the `additionalActions` prop to add custom controls such as a model selector or dismissable labels. | |
| This example shows two variations: | |
| 1. A message bar with a custom attach menu using a Plus icon positioned at the start | |
| 2. A message bar with the same attach menu plus additional actions including a model selector and a dismissable "Canvas" label | |
| You can move the attach button to the start of the message bar and customize it with a different icon. To include additional actions in the message bar you can also use the `additionalActions` prop. | |
| This example shows two message bar variations: | |
| 1. A message bar with a custom attach menu where a `PlusIcon` is positioned at the start | |
| 2. The same custom attach menu with additional actions, including a model selector menu and a dismissable "Canvas" label |
are we opening message bar up to any custom actions, or is it restricted to the model menu and labels? If it's limited to those, then we can adjust this suggestion to explicitly call that out: "To add a model selector menu or a dismissible label in the message bar, you can use the additionalActions prop."
| {/* This is required for react-dropzone to work in Safari and Firefox */} | ||
| <input {...getInputProps()} hidden /> | ||
| <div style={{ marginBottom: '1rem' }}> | ||
| <h3 style={{ marginBottom: '0.5rem' }}>Custom attach menu with Plus icon</h3> |
There was a problem hiding this comment.
| <h3 style={{ marginBottom: '0.5rem' }}>Custom attach menu with Plus icon</h3> | |
| <h3 style={{ marginBottom: '0.5rem' }}>Custom attach menu with a PlusIcon at the start</h3> |
I would either do PlusIcon (like the React icon) or plus icon, rather than just capitalizing the Plus - but not sure which you'd prefer
4 participants
Closes #779
Note that I'm leveraging the existing AttachButton/AttachMenu logic. Because of this the placement of the menu for the new implementation is off due to how we render that menu. I can open a followup to tackle that separately if we want.