- ${this.conversation.messages.map(msg => html`
-
+
+
+
+ ${this.conversation.messages.map((msg, index) => html`
+
@@ -343,6 +552,22 @@ export class SioConversationView extends DeesElement {
+ ${msg.attachments && msg.attachments.length > 0 ? html`
+
+ ${msg.attachments.map(attachment =>
+ this.isImage(attachment.type) ? html`
+
+ ` : ''}
this.openImage(attachment)}>
+ 
+
+ ` : html`
+
+ `
+ )}
+
+ ${this.pendingAttachments.length > 0 ? html`
+
+ ` : ''}
-
+
+
{
+ 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);
+ }
}
\ No newline at end of file
diff --git a/ts_web/elements/sio-image-lightbox.ts b/ts_web/elements/sio-image-lightbox.ts
new file mode 100644
index 0000000..ab83603
--- /dev/null
+++ b/ts_web/elements/sio-image-lightbox.ts
@@ -0,0 +1,449 @@
+import {
+ DeesElement,
+ property,
+ html,
+ customElement,
+ type TemplateResult,
+ cssManager,
+ css,
+ unsafeCSS,
+ state,
+} from '@design.estate/dees-element';
+
+// Import design tokens
+import { colors, bdTheme } from './00colors.js';
+import { spacing, radius, shadows, transitions } from './00tokens.js';
+import { fontFamilies } from './00fonts.js';
+
+export interface ILightboxImage {
+ url: string;
+ name: string;
+ size?: number;
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'sio-image-lightbox': SioImageLightbox;
+ }
+}
+
+@customElement('sio-image-lightbox')
+export class SioImageLightbox extends DeesElement {
+ public static demo = () => html`
+
+ ${this.image ? html`
+
+ `;
+ }
+
+ public async open(image: ILightboxImage) {
+ this.image = image;
+ this.imageLoaded = false;
+ this.resetZoom();
+ this.isOpen = true;
+
+ // Add keyboard listener
+ document.addEventListener('keydown', this.handleKeyDown);
+ }
+
+ private close = () => {
+ this.isOpen = false;
+ document.removeEventListener('keydown', this.handleKeyDown);
+
+ // Dispatch close event
+ this.dispatchEvent(new CustomEvent('close', {
+ bubbles: true,
+ composed: true
+ }));
+
+ // Clean up after animation
+ setTimeout(() => {
+ this.image = null;
+ this.imageLoaded = false;
+ this.resetZoom();
+ }, 300);
+ }
+
+ private handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === 'Escape') {
+ this.close();
+ } else if (e.key === '+' || e.key === '=') {
+ this.zoomIn();
+ } else if (e.key === '-') {
+ this.zoomOut();
+ } else if (e.key === '0') {
+ this.resetZoom();
+ }
+ }
+
+ private zoomIn() {
+ this.scale = Math.min(this.scale * 1.2, 3);
+ }
+
+ private zoomOut() {
+ this.scale = Math.max(this.scale / 1.2, 0.5);
+ }
+
+ private resetZoom() {
+ this.scale = 1;
+ this.translateX = 0;
+ this.translateY = 0;
+ }
+
+ private handleWheel = (e: WheelEvent) => {
+ e.preventDefault();
+ if (e.ctrlKey || e.metaKey) {
+ // Zoom with ctrl/cmd + scroll
+ if (e.deltaY < 0) {
+ this.zoomIn();
+ } else {
+ this.zoomOut();
+ }
+ }
+ }
+
+ private startDrag = (e: MouseEvent) => {
+ if (this.scale > 1) {
+ this.isDragging = true;
+ this.startX = e.clientX - this.translateX;
+ this.startY = e.clientY - this.translateY;
+ e.preventDefault();
+ }
+ }
+
+ private drag = (e: MouseEvent) => {
+ if (this.isDragging && this.scale > 1) {
+ this.translateX = e.clientX - this.startX;
+ this.translateY = e.clientY - this.startY;
+ }
+ }
+
+ private endDrag = () => {
+ this.isDragging = false;
+ }
+
+ private download() {
+ if (!this.image) return;
+
+ const a = document.createElement('a');
+ a.href = this.image.url;
+ a.download = this.image.name;
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ }
+
+ private openInNewTab() {
+ if (!this.image) return;
+ window.open(this.image.url, '_blank');
+ }
+
+ public disconnectedCallback() {
+ super.disconnectedCallback();
+ document.removeEventListener('keydown', this.handleKeyDown);
+ }
+}
\ No newline at end of file
+
+
+
+
+
+
+
+ ${!this.imageLoaded ? html`
+ 
this.imageLoaded = true}
+ @error=${() => this.imageLoaded = false}
+ @click=${(e: Event) => e.stopPropagation()}
+ />
+
+
+
+
+ ` : ''}
+ this.imageLoaded = true}
+ @error=${() => this.imageLoaded = false}
+ @click=${(e: Event) => e.stopPropagation()}
+ />
+
+
+ ` : ''}
+ ${this.image.name}
+
+
+
+
+