feat: Add native video support in markdown rendering (#2704)

## 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.

<img width="721" height="461" alt="image"
src="https://github.com/user-attachments/assets/7ba80009-2b80-482f-9de9-d3493b953eaf"
/>

## 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
```python
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()
```





<!-- This is an auto-generated description by cubic. -->
---
## 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.

<sup>Written for commit 83674db.
Summary will update automatically on new commits.</sup>

<!-- End of auto-generated description by cubic. -->

---------

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Co-authored-by: Josh Hayes <[email protected]>

Author: 3 people

frontend/src/components/Markdown.tsx

@@ -158,18 +158,39 @@ const Markdown = ({
           }
         },
         img: (image: any) => {
+          // Check if the image source is actually a video file
+          const src = image.src.startsWith('/public')
+            ? apiClient.buildEndpoint(image.src)
+            : image.src;
+          
+          const videoExtensions = ['.mp4', '.webm', '.mov', '.avi', '.ogv', '.m4v'];
+          const isVideo = videoExtensions.some(ext => 
+            src.toLowerCase().split(/[?#]/)[0].endsWith(ext)
+          );
+
+          if (isVideo) {
+            return (
+              <div className="sm:max-w-sm md:max-w-md">
+                <video
+                  src={src}
+                  controls
+                  className="w-full h-auto rounded-md"
+                  style={{ maxWidth: '100%' }}
+                >
+                  Your browser does not support the video tag.
+                </video>
+              </div>
+            );
+          }
+
           return (
             <div className="sm:max-w-sm md:max-w-md">
               <AspectRatio
                 ratio={16 / 9}
                 className="bg-muted rounded-md overflow-hidden"
               >
                 <img
-                  src={
-                    image.src.startsWith('/public')
-                      ? apiClient.buildEndpoint(image.src)
-                      : image.src
-                  }
+                  src={src}
                   alt={image.alt}
                   className="h-full w-full object-contain"
                 />