ChatAttachment

Preview card for file, image, video, and audio attachments within chat messages, with download and preview actions.

View source Installation

Preview

File

quarterly-report.pdf2.4 MB

Image

Video

demo-recording.mp418.7 MB

Audio

voice-note.m4a1.2 MB

Import

import { ChatAttachment } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
variant	`'image' \| 'file' \| 'video' \| 'audio'`	`'file'`	Type of attachment to display.
src	`string`	—	URL for image/video/audio source.
fileName	`string`	—	Name of the file.
fileSize	`string`	—	Human-readable file size.
onDownload	`() => void`	—	Called when the download button is clicked.
onPreview	`() => void`	—	Called when an image is clicked for preview.

Examples

File Attachment

import { ChatAttachment } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <ChatAttachment
      variant="file"
      fileName="report.pdf"
      fileSize="2.4 MB"
      onDownload={() => {}}
    />
  )
}

Image Attachment

import { ChatAttachment } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <ChatAttachment
      variant="image"
      src="https://placehold.co/300x200"
      fileName="screenshot.png"
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */