Media Chat
Chat message component for displaying images and code snippets. Features responsive image grid, code syntax highlighting, and interactive image preview with hover effects.
Main Features of Media Chat
How to Use Media Chat in Next.js
Installation Guide for Media Chat
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | Array<{ url: string; alt?: string }> | [] | Array of image objects with URL and optional alt text. |
codeSnippet | { language: string; code: string; fileName: string } | undefined | Code snippet object with language, code, and filename. |
className | string | undefined | Additional CSS classes for custom styling. |
onImageClick | (index: number) => void | undefined | Callback function called when an image is clicked. |
showCode | boolean | true | Whether to display the code snippet. |