feat: Add native video support in markdown rendering

[RoyBA]

Summary

Adds support for rendering video files directly in markdown when using image syntax (![](video.mp4)). The markdown parser now detects video file extensions and renders a native HTML5 video element instead of trying to display videos as images.

Changes

• Modified the img component handler in Markdown.tsx to detect video file extensions
• Renders native HTML5 <video> element with controls for video URLs
• Supports common video formats: .mp4, .webm, .mov, .avi, .ogv, .m4v
• Falls back to standard image rendering for non-video files

Motivation

Previously, when users included video URLs in markdown syntax like ![](http://example.com/video.mp4), the frontend was replacing them with <img> elements, which couldn't display the videos properly. This fix enables proper video playback directly within markdown content.

Example

from chainlit import AskUserMessage, Message, on_chat_start

@on_chat_start
async def main():
    res = await AskUserMessage(content="Please enter a video URL:", timeout=30).send()
    if res:
        video_url = res['output']
        await Message(
            content=f"Here's your video:\n\n![Video]({video_url})",
        ).send()

---

Summary by cubic

Add native video rendering in Markdown when users embed videos with image syntax. The renderer detects video URLs and shows an HTML5 video player with controls for inline playback.

• New Features
  • Detects common video extensions in Markdown image nodes.
  • Renders a responsive HTML5 video element with controls.
  • Supports .mp4, .webm, .mov, .avi, .ogv, .m4v.
  • Falls back to standard image rendering for non-video URLs.

^{Written for commit 83674db. Summary will update automatically on new commits.}

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (all 1 issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="frontend/src/components/Markdown.tsx">

<violation number="1" location="frontend/src/components/Markdown.tsx:168">
P2: `isVideo` should check the URL’s file extension (e.g., after stripping query/fragment) instead of any substring match; otherwise images from domains containing `.mp4` are misclassified and fail to render.</violation>
</file>

_{Reply to cubic to teach it or ask questions. Re-run a review with @cubic-dev-ai review this PR}