Update Assistant Markdown styles

[derekblank]

Updates Markdown styles used by Assistant

Proposed Changes

• Updates Assistant messages and styles to use className instead of id (per discussion on #200)
• Updates Markdown CSS styles to differentiate between inline code blocks and fenced code blocks. (Previously, inline code blocks were difficult to read against a light background.)

Testing Instructions

• Start app with AI Assistant flag enabled: STUDIO_AI=true npm start
• Create a site and navigate to Assistant tab
• Ask Assistant to show examples of both inline code blocks and fenced code blocks
• Observe that inline code blocks are readable

Note

I was not able to find an actual example of an inline code block in the designs to reference the colors, but I could have missed it. However, it is technically possible for the Assistant API endpoint to return inline code blocks in Markdown, so we should account for inline code block styles. Open to modifying the color patterns proposed here.

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[derekblank]

@sejas Opening this PR as a follow-up to #200 to make any further updates to Markdown styles. If any further updates are noted, feel free to suggest or make them directly to this PR. 👍

[sejas]

The changes look good.
It's hard to tell the difference when the LLM returns code blocks inside code blocks.

Render from Studio:

Render from Obsidian. I grabbed it from localStorage and replaced \n with real enters.

[derekblank]

The changes look good. It's hard to tell the difference when the LLM returns code blocks inside code blocks.

Thanks for the review. 🚀 I've updated some further enhancements specifically for the dynamic code blocks as part of #214.