[`mgt-chat`] new chat design should be consistent

[musale]

Describe the bug Current

Expected

[gavinbarron]

@musale we should take care to test the new Chat component in the react-chat test application and work out how we should best provide a good story for embedding it in dialogs like this as an extension.

Perhaps we add a prop, that when set causes the container element to render without the current padding, background-color, and box-shadow CSS rules to make it embed in react-contoso better?

@sebastienlevert any thoughts on this?

[sebastienlevert]

In this case, I don't think the elevation is required here. I feel this is up to the design system of the developer to decide on how this gets elevated in their scenarios.

[gavinbarron]

So, no elevation at all? or just in the case where a developer wants to embed it?

I think that having elevation makes sense when the component is used with the title showing given the current design

[gavinbarron]

ping @sebastienlevert

[sebastienlevert]

Adding @yejuntak. I feel elevation is tricky around a component. I still think this is a developers job to make it fit with their design system... Peter, can you comment here on what should be the right behavior?

[yejuntak]

This seems to be very tricky because having shadows over the title and having no shadows are wrong behaviors. For alternative, I agree with Seb on removing the elevation for now.

[gavinbarron]

Ok I can make that fly.

[musale]

Also, I should've added that the title text left padding to be aligned with the elements below it and have a divider running between it and the "To" text in the expected image.

[gavinbarron]

We are now removing the header text, divider, padding, and elevation from the component