frontend: adds preview to html code snippets

[tomtobac]

Description

Adds preview to Pre component to render HTML blocks using iframes

• Issue: OS-1985
• Dependencies: No dependencies

AI Description

This pull request introduces a new feature that allows users to preview code blocks within an iframe.

Changes include:

• New utility functions: addOnErrorToImg, getReconstructedHtml, and replaceCodeBlockWithIframe in preview.ts.
• New component: Iframe in Iframe.tsx.
• Updates to MessageContent.tsx:
  • Import isFulfilledMessage and replaceCodeBlockWithIframe.
  • Assign md based on isFulfilledMessage and replace code block with an iframe.
• Updates to Markdown.tsx:
  • Import rehypeRaw and Iframe.
  • Add rehypeRaw to rehypePlugins.
  • Add iframe: Iframe prop.
• Updates to package.json and package-lock.json:
  • Add rehype-raw dependency.

[CLAassistant]

All committers have signed the CLA.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Please upload report for BASE (main@d089057). Learn more about missing BASE report.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #160   +/-   ##
=======================================
  Coverage        ?   86.76%           
=======================================
  Files           ?      128           
  Lines           ?     4140           
  Branches        ?        0           
=======================================
  Hits            ?     3592           
  Misses          ?      548           
  Partials        ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[tianjing-li]

@misspia-cohere @wujessica would either of you have bandwidth to review this?

[wujessica]

neat!!

[tomtobac]

Closing in favor of #187