Image Preview and Modal Display

Enhance user experience by enabling custom image preview functionality when users click on images within AI Agent messages. This feature allows you to create custom modal overlays, lightbox effects, or any other image display behavior.

Setup

Register callback

Important: The callback name "__agent_message_image_click" is required for image preview functionality.

copilot(
  "init",
  {},
  function () {
    copilot.callbacks.add({
      name: "__agent_message_image_click",
      handler: showImageModal
    });
  }
);

Handler function

function showImageModal(imageData) {
  // imageData contains: src, alt, title
  console.log('Image clicked:', imageData);

  // Implement your modal logic here
  const modal = document.createElement('div');
  modal.innerHTML = `
    <div class="image-modal">
      <img src="${imageData.src}" alt="${imageData.alt || 'Image'}" />
    </div>
  `;
  document.body.appendChild(modal);
}

How it works

1. User clicks image in AI Agent message
2. __agent_message_image_click callback triggers
3. Handler receives image data (src, alt, title)
4. Implement custom modal/preview logic

Custom image preview modal when clicking on images in AI Agent messages.

Image data structure

{
  src: "https://example.com/image.jpg",
  alt: "Image description",
  title: "Image title"
}

Usage

Basic implementation

Create a modal overlay when image is clicked:

function showImageModal(imageData) {
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    cursor: pointer;
  `;

  const img = document.createElement('img');
  img.src = imageData.src;
  img.style.cssText = 'max-width: 90%; max-height: 90%;';

  overlay.addEventListener('click', () => {
    document.body.removeChild(overlay);
  });

  overlay.appendChild(img);
  document.body.appendChild(overlay);
}

Troubleshooting

Common issues

• Modal not appearing: Check callback registration
• Images not loading: Verify image URLs
• Z-index conflicts: Ensure sufficient z-index value
• Event conflicts: Prevent event bubbling