PreviewImage Component

• File: src/components/chat/previewImage.svelte

Overview

The PreviewImage component provides a modal interface for previewing images and files with zoom capabilities, download options, and send functionality. It supports two display modes: a large preview (lgPrev) and a compact notification-style preview.

Props

interface PreviewProps {
  open: boolean; // Controls visibility of the preview
  src: {
    // Source data for the preview
    content: string; // File/image content (base64 or URL)
    name?: string; // File name
  };
  lgPrev: boolean; // Toggle between large and compact preview modes
}

Features

1. Image Zoom Controls

function zoomin() {
  var myImg = document.getElementById("map");
  var currWidth = myImg.clientWidth;
  if (currWidth == 2500) return false;
  else {
    myImg.style.width = (currWidth + 100) + "px";
  }
}

function zoomout() {
  var myImg = document.getElementById("map");
  var currWidth = myImg.clientWidth;
  if (currWidth == 100) return false;
  else {
    myImg.style.width = (currWidth - 100) + "px";
  }
}

UI Modes

1. Large Preview Mode (lgPrev = true)

<div class="max-w-7xl mx-auto fixed inset-0 top-16">
  <!-- Header -->
  <div class="p-2 mx-4 flex justify-between">
    <span class="font-semiblod text-white">Hippo Virtual Care</span>
    <!-- Control buttons -->
    <div class="flex gap-4 text-white">
      <button on:click={zoomout}><Icon src={ZoomOut}/></button>
      <button on:click={zoomin}><Icon src={ZoomIn}/></button>
      <button><Icon src={Download2}/></button>
      <button on:click={() => open = false}>Close</button>
    </div>
  </div>

  <!-- Image preview -->
  <div class="flex items-center justify-center">
    <img id="map" src={src.content} style="width: 600px;"/>
  </div>
</div>

2. Compact Preview Mode (lgPrev = false)

<div class="pointer-events-none fixed inset-0 flex items-end">
  <!-- Preview container -->
  <div class="flex flex-col gap-10">
    <!-- Image/File preview -->
    {#if 'content' in src && src.content.substr(5,10).includes('image/')}
      <img src={src.content} class="object-cover"/>
    {:else}
      <img src={FileImg} class="object-cover"/>
    {/if}

    <!-- Action buttons -->
    <div class="flex gap-6">
      <button on:click={() => open = false}>
        <Icon src={X}/>
      </button>
      <button on:click={() => dispatch("getImage", src)}>
        <Icon src={SendPlane2}/>
      </button>
    </div>
  </div>
</div>

Animations

Uses Svelte's transition system for smooth animations:

import { fade } from "svelte/transition";
import { cubicIn, elasticInOut } from "svelte/easing";

// Fade in/out transitions
in:fade={{duration: 300, easing: cubicIn}}
out:fade={{duration: 200, easing: elasticInOut}}

Events

Dispatched Events

// When send button is clicked
dispatch("getImage", src)

Usage Examples

Large Preview Mode

<PreviewImage
  open={true}
  src={{
    content: "data:image/jpeg;base64,...",
    name: "example.jpg"
  }}
  lgPrev={true}
  on:getImage={(event) => {
    // Handle image send
    console.log(event.detail);
  }}
/>

Compact Preview Mode

<PreviewImage
  open={true}
  src={{
    content: "path/to/file.pdf",
    name: "document.pdf"
  }}
  lgPrev={false}
  on:getImage={(event) => {
    // Handle file send
    console.log(event.detail);
  }}
/>