update

ts_web/elements/sio-conversation-view.ts

@@ -16,12 +16,22 @@ import { spacing, radius, shadows, transitions } from './00tokens.js';
 import { fontFamilies, typography } from './00fonts.js';
 
 // Types
+export interface IAttachment {
+  id: string;
+  name: string;
+  size: number;
+  type: string;
+  url: string;
+  thumbnailUrl?: string;
+}
+
 export interface IMessage {
   id: string;
   text: string;
   sender: 'user' | 'support';
   time: string;
   status?: 'sending' | 'sent' | 'delivered' | 'read';
+  attachments?: IAttachment[];
 }
 
 export interface IConversationData {
@@ -51,6 +61,15 @@ export class SioConversationView extends DeesElement {
   @state()
   private isTyping: boolean = false;
 
+  @state()
+  private isDragging: boolean = false;
+
+  @state()
+  private uploadingFiles: Map<string, { file: File; progress: number }> = new Map();
+
+  @state()
+  private pendingAttachments: IAttachment[] = [];
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -284,6 +303,165 @@ export class SioConversationView extends DeesElement {
       .messages-container::-webkit-scrollbar-thumb:hover {
         background: ${bdTheme('mutedForeground')};
       }
+
+      /* File drop zone */
+      .drop-overlay {
+        position: absolute;
+        inset: 0;
+        background: ${bdTheme('background')}95;
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 200ms ease;
+      }
+
+      .drop-overlay.active {
+        opacity: 1;
+        pointer-events: all;
+      }
+
+      .drop-zone {
+        padding: ${unsafeCSS(spacing["8"])};
+        border: 2px dashed ${bdTheme('border')};
+        border-radius: ${unsafeCSS(radius.xl)};
+        background: ${bdTheme('card')};
+        text-align: center;
+        transition: ${unsafeCSS(transitions.all)};
+      }
+
+      .drop-overlay.active .drop-zone {
+        border-color: ${bdTheme('primary')};
+        background: ${bdTheme('accent')};
+        transform: scale(1.02);
+      }
+
+      .drop-icon {
+        font-size: 48px;
+        color: ${bdTheme('primary')};
+        margin-bottom: ${unsafeCSS(spacing["4"])};
+      }
+
+      .drop-text {
+        font-size: 1.125rem;
+        font-weight: 500;
+        color: ${bdTheme('foreground')};
+        margin-bottom: ${unsafeCSS(spacing["2"])};
+      }
+
+      .drop-hint {
+        font-size: 0.875rem;
+        color: ${bdTheme('mutedForeground')};
+      }
+
+      /* File attachments */
+      .message-attachments {
+        margin-top: ${unsafeCSS(spacing["2"])};
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${unsafeCSS(spacing["2"])};
+      }
+
+      .attachment-image {
+        max-width: 200px;
+        max-height: 200px;
+        border-radius: ${unsafeCSS(radius.lg)};
+        overflow: hidden;
+        cursor: pointer;
+        transition: ${unsafeCSS(transitions.all)};
+        box-shadow: ${unsafeCSS(shadows.sm)};
+      }
+
+      .attachment-image:hover {
+        transform: scale(1.02);
+        box-shadow: ${unsafeCSS(shadows.md)};
+      }
+
+      .attachment-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .attachment-file {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(spacing["2"])};
+        padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
+        background: ${bdTheme('secondary')};
+        border: 1px solid ${bdTheme('border')};
+        border-radius: ${unsafeCSS(radius.md)};
+        font-size: 0.875rem;
+        cursor: pointer;
+        transition: ${unsafeCSS(transitions.all)};
+      }
+
+      .attachment-file:hover {
+        background: ${bdTheme('accent')};
+      }
+
+      .attachment-name {
+        font-weight: 500;
+        color: ${bdTheme('foreground')};
+      }
+
+      .attachment-size {
+        color: ${bdTheme('mutedForeground')};
+        font-size: 0.75rem;
+      }
+
+      /* Pending attachments */
+      .pending-attachments {
+        padding: ${unsafeCSS(spacing["2"])} ${unsafeCSS(spacing["3"])};
+        background: ${bdTheme('secondary')};
+        border-radius: ${unsafeCSS(radius.md)};
+        margin-bottom: ${unsafeCSS(spacing["2"])};
+      }
+
+      .pending-attachment {
+        display: flex;
+        align-items: center;
+        gap: ${unsafeCSS(spacing["2"])};
+        padding: ${unsafeCSS(spacing["1"])} 0;
+      }
+
+      .pending-attachment-info {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .pending-attachment-name {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: ${bdTheme('foreground')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .pending-attachment-size {
+        font-size: 0.75rem;
+        color: ${bdTheme('mutedForeground')};
+      }
+
+      .remove-attachment {
+        padding: ${unsafeCSS(spacing["1"])};
+        cursor: pointer;
+        color: ${bdTheme('mutedForeground')};
+        transition: ${unsafeCSS(transitions.all)};
+      }
+
+      .remove-attachment:hover {
+        color: ${bdTheme('destructive')};
+      }
+
+      .file-input {
+        display: none;
+      }
     `,
   ];
 
@@ -319,13 +497,44 @@ export class SioConversationView extends DeesElement {
         </div>
       </div>
 
-      <div class="messages-container" id="messages">
-        ${this.conversation.messages.map(msg => html`
-          <div class="message ${msg.sender}">
+      <div class="drop-overlay ${this.isDragging ? 'active' : ''}">
+        <div class="drop-zone">
+          <sio-icon class="drop-icon" icon="upload-cloud"></sio-icon>
+          <div class="drop-text">Drop files here</div>
+          <div class="drop-hint">Images and documents up to 10MB</div>
+        </div>
+      </div>
+
+      <div class="messages-container" id="messages"
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDrop}
+      >
+        ${this.conversation.messages.map((msg, index) => html`
+          <div class="message ${msg.sender}" style="animation-delay: ${index * 50}ms">
             <div class="message-content">
               <div class="message-bubble">
                 ${msg.text}
               </div>
+              ${msg.attachments && msg.attachments.length > 0 ? html`
+                <div class="message-attachments">
+                  ${msg.attachments.map(attachment => 
+                    this.isImage(attachment.type) ? html`
+                      <div class="attachment-image" @click=${() => this.openImage(attachment)}>
+                        <img src="${attachment.url}" alt="${attachment.name}" />
+                      </div>
+                    ` : html`
+                      <div class="attachment-file" @click=${() => this.downloadFile(attachment)}>
+                        <sio-icon icon="file" size="16"></sio-icon>
+                        <div>
+                          <div class="attachment-name">${attachment.name}</div>
+                          <div class="attachment-size">${this.formatFileSize(attachment.size)}</div>
+                        </div>
+                      </div>
+                    `
+                  )}
+                </div>
+              ` : ''}
               <div class="message-time">${msg.time}</div>
             </div>
           </div>
@@ -343,6 +552,22 @@ export class SioConversationView extends DeesElement {
       </div>
 
       <div class="input-container">
+        ${this.pendingAttachments.length > 0 ? html`
+          <div class="pending-attachments">
+            ${this.pendingAttachments.map(attachment => html`
+              <div class="pending-attachment">
+                <sio-icon icon="${this.getFileIcon(attachment.type)}" size="16"></sio-icon>
+                <div class="pending-attachment-info">
+                  <div class="pending-attachment-name">${attachment.name}</div>
+                  <div class="pending-attachment-size">${this.formatFileSize(attachment.size)}</div>
+                </div>
+                <div class="remove-attachment" @click=${() => this.removeAttachment(attachment.id)}>
+                  <sio-icon icon="x" size="16"></sio-icon>
+                </div>
+              </div>
+            `)}
+          </div>
+        ` : ''}
         <div class="input-wrapper">
           <textarea
             class="message-input"
@@ -353,13 +578,21 @@ export class SioConversationView extends DeesElement {
             rows="1"
           ></textarea>
           <div class="input-actions">
-            <sio-button type="ghost" size="sm">
+            <input
+              type="file"
+              class="file-input"
+              id="fileInput"
+              multiple
+              accept="image/*,.pdf,.doc,.docx,.txt"
+              @change=${this.handleFileSelect}
+            />
+            <sio-button type="ghost" size="sm" @click=${this.openFileSelector}>
               <sio-icon icon="paperclip" size="16"></sio-icon>
             </sio-button>
             <sio-button
               type="primary"
               size="sm"
-              ?disabled=${!this.messageText.trim()}
+              ?disabled=${!this.messageText.trim() && this.pendingAttachments.length === 0}
               @click=${this.sendMessage}
             >
               <sio-icon icon="send" size="16"></sio-icon>
@@ -394,14 +627,15 @@ export class SioConversationView extends DeesElement {
   }
 
   private sendMessage() {
-    if (!this.messageText.trim()) return;
+    if (!this.messageText.trim() && this.pendingAttachments.length === 0) return;
 
     const message: IMessage = {
       id: Date.now().toString(),
       text: this.messageText.trim(),
       sender: 'user',
       time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      status: 'sending'
+      status: 'sending',
+      attachments: [...this.pendingAttachments]
     };
 
     // Dispatch event for parent to handle
@@ -411,8 +645,9 @@ export class SioConversationView extends DeesElement {
       composed: true
     }));
 
-    // Clear input
+    // Clear input and attachments
     this.messageText = '';
+    this.pendingAttachments = [];
     const textarea = this.shadowRoot?.querySelector('.message-input') as HTMLTextAreaElement;
     if (textarea) {
       textarea.style.height = 'auto';
@@ -434,4 +669,125 @@ export class SioConversationView extends DeesElement {
       container.scrollTop = container.scrollHeight;
     }
   }
+
+  // File handling methods
+  private handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragging = true;
+  }
+
+  private handleDragLeave(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    // Check if we're leaving the container entirely
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    if (
+      e.clientX <= rect.left ||
+      e.clientX >= rect.right ||
+      e.clientY <= rect.top ||
+      e.clientY >= rect.bottom
+    ) {
+      this.isDragging = false;
+    }
+  }
+
+  private handleDrop(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragging = false;
+
+    const files = Array.from(e.dataTransfer?.files || []);
+    this.processFiles(files);
+  }
+
+  private openFileSelector() {
+    const fileInput = this.shadowRoot?.querySelector('#fileInput') as HTMLInputElement;
+    fileInput?.click();
+  }
+
+  private handleFileSelect(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const files = Array.from(input.files || []);
+    this.processFiles(files);
+    input.value = ''; // Clear input for re-selection
+  }
+
+  private async processFiles(files: File[]) {
+    const maxSize = 10 * 1024 * 1024; // 10MB
+    const validFiles = files.filter(file => {
+      if (file.size > maxSize) {
+        console.warn(`File ${file.name} exceeds 10MB limit`);
+        return false;
+      }
+      return true;
+    });
+
+    for (const file of validFiles) {
+      const id = `${Date.now()}-${Math.random()}`;
+      const url = await this.fileToDataUrl(file);
+      
+      const attachment: IAttachment = {
+        id,
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        url,
+        thumbnailUrl: this.isImage(file.type) ? url : undefined
+      };
+
+      this.pendingAttachments = [...this.pendingAttachments, attachment];
+    }
+  }
+
+  private fileToDataUrl(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }
+
+  private removeAttachment(id: string) {
+    this.pendingAttachments = this.pendingAttachments.filter(a => a.id !== id);
+  }
+
+  private isImage(type: string): boolean {
+    return type.startsWith('image/');
+  }
+
+  private formatFileSize(bytes: number): string {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  }
+
+  private getFileIcon(type: string): string {
+    if (this.isImage(type)) return 'image';
+    if (type.includes('pdf')) return 'file-text';
+    if (type.includes('doc')) return 'file-text';
+    if (type.includes('sheet') || type.includes('excel')) return 'table';
+    return 'file';
+  }
+
+  private openImage(attachment: IAttachment) {
+    this.dispatchEvent(new CustomEvent('open-image', {
+      detail: { attachment },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private downloadFile(attachment: IAttachment) {
+    const a = document.createElement('a');
+    a.href = attachment.url;
+    a.download = attachment.name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
 }