fix(Message): Add block quotes and headings

[rebeccaalpert]

Added block quote and heading styling; also fixed small rendering bug with inline code styles.

This affects Bot and User messages:

• https://chatbot-pr-chatbot-420.surge.sh/patternfly-ai/chatbot/messages#bot-messages
• https://chatbot-pr-chatbot-420.surge.sh/patternfly-ai/chatbot/messages#user-messages

[patternfly-build]

Preview: https://chatbot-pr-chatbot-420.surge.sh

A11y report: https://chatbot-pr-chatbot-420-a11y.surge.sh

[kaylachumley]

left a few comments!

[rebeccaalpert]

All set - deprecated those aliased styles and adjusted the one that differed from Kayla's spec.

[edonehoo]

Just a little bit of fiddling. I like the change to radio controls 🎉

[edonehoo]

So sorry, I keep playing around lol -

Admittedly I'm not sure what the intended design is, so if these are intentional then that's cool! but it seems like there could be a little token funkiness?

1. Should the inline code in a user message have a "highlight" the same way that the bot message does?

vs

2. I also noticed that, in dark mode, the code block messages have the same color background as the rest of the chatbot window. Is that intended?:

[rebeccaalpert]

They're not new, but they're real issues.

I can stick var(--pf-t--global--background--color--secondary--default) on the code block (it'll make it darker), but I'm not sure what color we'd want for inline code.

@kaylachumley - would you be able to weigh in here?

[kaylachumley]

@rebeccaalpert @edonehoo Weighing in about the above conversation!

For the codeblock messages: It looks we need to be using pf-t--global--background--color--inverse--default for the background and the text color should be pf-t--global--text--color--inverse. Also another thing I just noticed is that the icon button is on the right side of the block in the figma designs and there is also a title line that displays the code type. Would it be possible to right align the icon button and add the title line? I can also see a case to make title line optional and if that's the case, then I would keep the copy icon button on the left!

For the inline code highlight on the user message: I'm not entirely sure yet. I was going to suggest --pf-t--global--background--color--tertiary--default but I am not sure how that will turn out in dark mode. I tried testing that with the inspect but it got really hacky. Let me get some insight from lucia on that

[rebeccaalpert]

This looks better:

We do have the title line in the code, but it's not getting triggered here (we are seeing the optional state). I did figure out a quick fix, so you should see it now! 🚀

[rebeccaalpert]

One issue I do want to raise is that we have no control over the code editor background itself, so it will look "interesting" with this color change:

PatternFly uses a third-party Monaco theme, as documented here: #149. It's a somewhat large lift, so we've been putting if off. Do you want to back this change out for now? Let me know.

[kaylachumley]

@rebeccaalpert Is it possible to get the code editor to look like the figma designs with the background extended around the button and title text? The tokens applied to the icon copy button was based off it sitting on top of that inverse code background, so it would need adjusted if we cant mimic the original layout

[rebeccaalpert]

Talked to Kayla. I was confused and was giving you the wrong facts here. We may be able to adjust the code block here a bit more, but we have less control over the other code editor (in the code modal one). This change would bring them out of alignment. It seems that these are 1 component in Figma and two separate PatternFly components in the code.

This is out of scope for this PR - we're going to back out the code message change here and address in #424 as time allows. I asked Kayla to take a look at #424 and make sure it correctly covers what we want to do here so we don't lose it.

I will keep the bug fix and the inline code style changes - just backing out the color change for the block code message.

[nicolethoen]

This looks great!

[github-actions]

🎉 This PR is included in version 2.2.0-prerelease.16 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀