@widgetic/chat 0.1.4

package/dist/components/AttachmentDisplay.svelte

@@ -0,0 +1,547 @@
+<script lang="ts">
+  import type { ContentItemOutput } from '../types/message.js';
+  
+  // Props
+  interface Props {
+    attachments: ContentItemOutput[];
+    variant?: 'message' | 'preview' | 'compact';
+    showPreview?: boolean;
+    maxDisplayCount?: number;
+    onRemove?: (attachment: ContentItemOutput) => void;
+    onView?: (attachment: ContentItemOutput) => void;
+  }
+  
+  let { 
+    attachments, 
+    variant = 'message',
+    showPreview = true,
+    maxDisplayCount = 10,
+    onRemove,
+    onView
+  }: Props = $props();
+  
+  // Helper functions
+  function getFileIcon(fileType: string): string {
+    if (fileType.startsWith('image/')) return '🖼️';
+    if (fileType.startsWith('video/')) return '🎥';
+    if (fileType.startsWith('audio/')) return '🎵';
+    if (fileType.includes('pdf')) return '📄';
+    if (fileType.includes('text') || fileType.includes('markdown')) return '📝';
+    if (fileType.includes('mermaid')) return '📊';
+    return '📎';
+  }
+  
+  function formatFileSize(bytes: number | null | undefined): string {
+    if (!bytes || bytes === 0) return '';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+  
+  function isImageType(fileType: string): boolean {
+    return fileType.startsWith('image/');
+  }
+  
+  function isVideoType(fileType: string): boolean {
+    return fileType.startsWith('video/');
+  }
+  
+  let lightboxAttachment: ContentItemOutput | null = $state(null);
+
+  function isViewableInLightbox(fileType: string): boolean {
+    return fileType.startsWith('image/') || fileType.includes('pdf');
+  }
+
+  function handleView(attachment: ContentItemOutput) {
+    if (onView) {
+      onView(attachment);
+    } else if (isViewableInLightbox(attachment.file_type)) {
+      lightboxAttachment = attachment;
+    } else if (attachment.url) {
+      window.open(attachment.url, '_blank', 'noopener,noreferrer');
+    }
+  }
+
+  function closeLightbox() {
+    lightboxAttachment = null;
+  }
+  
+  function handleRemove(attachment: ContentItemOutput) {
+    if (onRemove) {
+      onRemove(attachment);
+    }
+  }
+  
+  // Limit displayed attachments if needed
+  let displayedAttachments = $derived(
+    maxDisplayCount && attachments.length > maxDisplayCount 
+      ? attachments.slice(0, maxDisplayCount)
+      : attachments
+  );
+  
+  let hiddenCount = $derived(
+    maxDisplayCount && attachments.length > maxDisplayCount 
+      ? attachments.length - maxDisplayCount
+      : 0
+  );
+</script>
+
+{#if attachments.length > 0}
+  <div class="attachment-display {variant}">
+    <!-- Message variant - inline in chat bubbles -->
+    {#if variant === 'message'}
+      <div class="message-attachments">
+        {#each displayedAttachments as attachment (attachment.id)}
+          <div class="message-attachment-item">
+                         {#if isImageType(attachment.file_type) && showPreview}
+               <!-- svelte-ignore a11y_click_events_have_key_events -->
+               <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+               <img 
+                 src={attachment.url} 
+                 alt={attachment.file_name || 'Attachment'}
+                 class="attachment-image"
+                 loading="lazy"
+                 onclick={() => handleView(attachment)}
+               />
+            {:else if isVideoType(attachment.file_type) && showPreview}
+              <video 
+                src={attachment.url}
+                class="attachment-video"
+                controls
+                preload="metadata"
+              >
+                <track kind="captions" />
+                Your browser does not support video playback.
+              </video>
+            {:else}
+              <button 
+                class="attachment-file"
+                onclick={() => handleView(attachment)}
+                title="Click to view {attachment.file_name || 'file'}"
+              >
+                <span class="file-icon">{getFileIcon(attachment.file_type)}</span>
+                <div class="file-info">
+                  <span class="file-name">{attachment.file_name || 'Untitled'}</span>
+                  {#if attachment.file_size}
+                    <span class="file-size">{formatFileSize(attachment.file_size)}</span>
+                  {/if}
+                </div>
+              </button>
+            {/if}
+          </div>
+        {/each}
+        
+        {#if hiddenCount > 0}
+          <div class="more-attachments">
+            +{hiddenCount} more file{hiddenCount !== 1 ? 's' : ''}
+          </div>
+        {/if}
+      </div>
+    
+    <!-- Preview variant - larger display with remove buttons -->
+    {:else if variant === 'preview'}
+      <div class="preview-attachments">
+        {#each displayedAttachments as attachment (attachment.id)}
+          <div class="preview-attachment-item">
+            {#if isImageType(attachment.file_type) && showPreview}
+              <div class="preview-image-container">
+                <img 
+                  src={attachment.url} 
+                  alt={attachment.file_name || 'Attachment'}
+                  class="preview-image"
+                  loading="lazy"
+                />
+                {#if onRemove}
+                  <button 
+                    class="remove-button"
+                    onclick={() => handleRemove(attachment)}
+                    title="Remove attachment"
+                  >
+                    ✕
+                  </button>
+                {/if}
+              </div>
+            {:else if isVideoType(attachment.file_type) && showPreview}
+              <div class="preview-video-container">
+                <video 
+                  src={attachment.url}
+                  class="preview-video"
+                  controls
+                  preload="metadata"
+                >
+                  <track kind="captions" />
+                  Your browser does not support video playback.
+                </video>
+                {#if onRemove}
+                  <button 
+                    class="remove-button"
+                    onclick={() => handleRemove(attachment)}
+                    title="Remove attachment"
+                  >
+                    ✕
+                  </button>
+                {/if}
+              </div>
+            {:else}
+              <div class="preview-file-container">
+                <div class="preview-file">
+                  <span class="file-icon">{getFileIcon(attachment.file_type)}</span>
+                  <div class="file-info">
+                    <span class="file-name">{attachment.file_name || 'Untitled'}</span>
+                    {#if attachment.file_size}
+                      <span class="file-size">{formatFileSize(attachment.file_size)}</span>
+                    {/if}
+                  </div>
+                </div>
+                {#if onRemove}
+                  <button 
+                    class="remove-button"
+                    onclick={() => handleRemove(attachment)}
+                    title="Remove attachment"
+                  >
+                    ✕
+                  </button>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    
+    <!-- Compact variant - minimal space usage -->
+    {:else if variant === 'compact'}
+      <div class="compact-attachments">
+        {#each displayedAttachments as attachment (attachment.id)}
+          <button 
+            class="compact-attachment-item"
+            onclick={() => handleView(attachment)}
+            title="{attachment.file_name || 'Untitled'} ({formatFileSize(attachment.file_size)})"
+          >
+            <span class="file-icon">{getFileIcon(attachment.file_type)}</span>
+            <span class="file-name">{attachment.file_name || 'File'}</span>
+          </button>
+        {/each}
+        
+        {#if hiddenCount > 0}
+          <span class="more-count">+{hiddenCount}</span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<!-- Lightbox overlay for images and PDFs -->
+{#if lightboxAttachment}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="lightbox-overlay" onclick={closeLightbox}>
+    <button class="lightbox-close" onclick={closeLightbox} title="Close">✕</button>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="lightbox-content" onclick={(e) => e.stopPropagation()}>
+      {#if isImageType(lightboxAttachment.file_type)}
+        <img 
+          src={lightboxAttachment.url} 
+          alt={lightboxAttachment.file_name || 'Attachment'}
+          class="lightbox-image"
+        />
+      {:else if lightboxAttachment.file_type.includes('pdf')}
+        <iframe 
+          src={lightboxAttachment.url}
+          class="lightbox-pdf"
+          title={lightboxAttachment.file_name || 'PDF Document'}
+        ></iframe>
+      {/if}
+      {#if lightboxAttachment.file_name}
+        <div class="lightbox-caption">{lightboxAttachment.file_name}</div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .attachment-display {
+    width: 100%;
+  }
+  
+  /* Message variant styles */
+  .message-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 0;
+    padding: 8px 12px 12px;
+  }
+  
+  .message-attachment-item {
+    margin: 0;
+    padding: 0;
+    flex: 0 0 auto;
+  }
+  
+  .message-attachment-item .attachment-image {
+    width: auto;
+    height: 120px;
+    max-width: 200px;
+    max-height: 120px;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    object-fit: cover;
+    transition: opacity 0.2s;
+    display: block;
+    margin: 0;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  
+  .message-attachment-item .attachment-image:hover {
+    opacity: 0.9;
+  }
+  
+  .message-attachment-item .attachment-video {
+    width: 175px;
+    height: auto;
+    border-radius: 0.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    margin: 0;
+    padding: 0;
+  }
+  
+  .message-attachment-item .attachment-file {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background: rgba(0, 0, 0, 0.1);
+    border: none;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    text-align: left;
+    width: 100%;
+    color: inherit;
+  }
+  
+  .message-attachment-item .attachment-file:hover {
+    background: rgba(0, 0, 0, 0.15);
+  }
+  
+  .more-attachments {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.7);
+    padding: 0.25rem 0.5rem;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 0.25rem;
+    text-align: center;
+  }
+  
+  /* Preview variant styles */
+  .preview-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+  
+  .preview-attachment-item {
+    position: relative;
+    flex: 0 0 auto;
+  }
+  
+  .preview-image-container,
+  .preview-video-container,
+  .preview-file-container {
+    position: relative;
+  }
+  
+  .preview-image {
+    width: 4rem;
+    height: 4rem;
+    object-fit: cover;
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+  }
+  
+  .preview-video {
+    width: 6rem;
+    height: 4rem;
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+  }
+  
+  .preview-file {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    min-width: 8rem;
+  }
+  
+  .remove-button {
+    position: absolute;
+    top: -0.25rem;
+    right: -0.25rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    background: #ef4444;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 0.75rem;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+  }
+  
+  .remove-button:hover {
+    background: #dc2626;
+  }
+  
+  /* Compact variant styles */
+  .compact-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    align-items: center;
+  }
+  
+  .compact-attachment-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    background: #f3f4f6;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    color: #374151;
+  }
+  
+  .compact-attachment-item:hover {
+    background: #e5e7eb;
+  }
+  
+  .more-count {
+    font-size: 0.75rem;
+    color: #6b7280;
+    padding: 0.25rem;
+  }
+  
+  /* Common styles */
+  .file-icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+  
+  .file-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+  
+  .file-name {
+    font-weight: 500;
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .file-size {
+    font-size: 0.75rem;
+    opacity: 0.7;
+  }
+  
+  /* Responsive adjustments */
+  @media (max-width: 640px) {
+    .preview-attachments {
+      gap: 0.5rem;
+    }
+    
+    .preview-image,
+    .preview-video {
+      width: 3rem;
+      height: 3rem;
+    }
+    
+    .preview-file {
+      min-width: 6rem;
+      padding: 0.5rem;
+    }
+  }
+
+  /* Lightbox overlay */
+  .lightbox-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(4px);
+  }
+
+  .lightbox-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.15);
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+    z-index: 10;
+  }
+  .lightbox-close:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  .lightbox-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+
+  .lightbox-image {
+    max-width: 90vw;
+    max-height: 85vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  }
+
+  .lightbox-pdf {
+    width: 80vw;
+    height: 85vh;
+    border: none;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    background: white;
+  }
+
+  .lightbox-caption {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.875rem;
+    text-align: center;
+  }
+</style> 

package/dist/components/AttachmentDisplay.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ContentItemOutput } from '../types/message.js';
+interface Props {
+    attachments: ContentItemOutput[];
+    variant?: 'message' | 'preview' | 'compact';
+    showPreview?: boolean;
+    maxDisplayCount?: number;
+    onRemove?: (attachment: ContentItemOutput) => void;
+    onView?: (attachment: ContentItemOutput) => void;
+}
+declare const AttachmentDisplay: import("svelte").Component<Props, {}, "">;
+type AttachmentDisplay = ReturnType<typeof AttachmentDisplay>;
+export default AttachmentDisplay;