Skip to Content
DocumentationComponentsAttachmentAgent X

AI Attachment

Loading...

Overview

Resources

Changelog

Loading...

Source code

Loading...

Ember

Loading...

Storybook

Loading...

Figma

Loading...

Install

yarn add @camp/ai-attachment

Variations

Default

The default AI Attachment component displays file attachments with standard styling and functionality.

import { AiAttachment } from '@camp/ai-attachment';
 
<AiAttachment
  title="Attachment 1"
  type="html"
  handleRemove={() => {
    console.log('handle remove');
  }}
/>;

In Grid Use

AI Attachment components can be arranged in a grid layout for displaying multiple attachments efficiently.

import { AiAttachment } from '@camp/ai-attachment';
 
// Grid layout example
<div
  style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(12, fit-content(128px))', //'repeat(auto-fit, minmax(54px, max-content))',
    gap: 8,
  }}
>
  <AiAttachment
    title="VeryLongTitleToShowEllipsis"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <AiAttachment
    title="Attachment 2"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <AiAttachment
    title="Attachment 3"
    type="image"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <AiAttachment
    title="Attachment 4"
    type="image"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <AiAttachment
    title="Attachment 5"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <AiAttachment
    title="Attachment 6"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <AiAttachment
    title="Attachment 7"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <AiAttachment
    title="Attachment 9"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
  <AiAttachment
    title="Attachment 10"
    type="html"
    handleRemove={() => {
      console.log('handle remove');
    }}
  />
</div>;

Generate Blob from Input

AI Attachment can generate blob data from user input, enabling dynamic file creation and management.

import { AiAttachment } from '@camp/ai-attachment';
import styled from 'styled-components';
 
const StyledAiAttachment = styled(AiAttachment)`
  min-width: 120px;
  max-width: 120px;
`;
 
// Generate blob from input example
export const GenerateBlobFromInput = {
  render: () => {
    const [url, setUrl] = (React.useState < string) | (null > null);
 
    return (
      <>
        <h3 style={{ color: 'white' }}>Select image to see image AIAttachment</h3>
        <input
          type="file"
          accept="image/*"
          onChange={(event) => {
            if (event?.target?.files) {
              const objUrl = URL.createObjectURL(event.target.files[0]);
              setUrl(objUrl);
            }
          }}
        />
        <div
          style={{
            marginTop: 12,
            display: 'flex',
            overflow: 'auto',
            gap: 8,
          }}
        >
          {url && (
            <AiAttachment
              {...{
                title: 'Attachment 1',
                type: 'image',
                handleRemove: () => {
                  setUrl(null);
                },
              }}
              img={{ url, alt: 'test' }}
            />
          )}
          <StyledAiAttachment
            title="Attachment 2"
            type="html"
            handleRemove={() => {
              console.log('handle remove');
            }}
          />
        </div>
      </>
    );
  },
};

Usage

Best practices

  • Use AI Attachment for file upload and management interfaces
  • Provide clear visual feedback for file processing states
  • Include appropriate file type validation and size limits
  • Use grid layouts when displaying multiple attachments
  • Implement proper error handling for failed uploads

Content guidelines

✅ DO

* Use descriptive file names that clearly indicate content

🚫 DON’T

* Don’t use generic or unclear file names like “document.pdf”

✅ DO

* Provide clear upload instructions and file requirements

🚫 DON’T

* Don’t leave users guessing about supported file types or size limits

✅ DO

* Show upload progress and processing status clearly

🚫 DON’T

* Don’t leave users wondering if their file is being processed

Accessibility

Keyboard support

  • Tab navigation to focus on attachment components
  • Enter or Space to activate file selection dialogs
  • Escape to close file selection dialogs
  • Arrow keys for navigation within grid layouts

Screen reader support

  • Proper ARIA labels for file input elements
  • Announcements for upload progress and status changes
  • Clear indication of file selection and removal actions
Last updated on