Select a conversation
Choose a conversation from the sidebar to start messaging
${this.conversation.title}
${this.conversation.messages.map((msg, index) => html`
`)}
${this.isTyping ? html`
` : ''}
${msg.attachments && msg.attachments.length > 0 ? html`
${msg.attachments.map(attachment =>
this.isImage(attachment.type) ? html`
` : ''}
this.openImage(attachment)}>
` : attachment.type?.includes('pdf') || attachment.name?.toLowerCase().endsWith('.pdf') ? html`
` : html`
`
)}
${this.pendingAttachments.length > 0 ? html`
` : ''}
`;
}
private handleBack() {
this.dispatchEvent(new CustomEvent('back', {
bubbles: true,
composed: true
}));
}
private handleMessageSend(event: CustomEvent) {
const { text, attachments } = event.detail;
if (!text.trim() && attachments.length === 0) return;
const message: IMessage = {
id: Date.now().toString(),
text: text.trim(),
sender: 'user',
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
status: 'sending',
attachments: [...this.pendingAttachments]
};
// Dispatch event for parent to handle
this.dispatchEvent(new CustomEvent('send-message', {
detail: { message },
bubbles: true,
composed: true
}));
// Clear pending attachments
this.pendingAttachments = [];
// Simulate typing indicator (remove in production)
setTimeout(() => {
this.isTyping = true;
setTimeout(() => {
this.isTyping = false;
}, 2000);
}, 1000);
}
private handleFilesSelected(event: CustomEvent) {
const { files } = event.detail;
// Handle files if needed
// For now, we're handling attachments separately in the parent component
}
public updated() {
// Scroll to bottom when new messages arrive
const container = this.shadowRoot?.querySelector('#messages');
if (container) {
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 actually leaving the messages container
const relatedTarget = e.relatedTarget as Node;
const container = e.currentTarget as HTMLElement;
if (!container.contains(relatedTarget)) {
this.isDragging = false;
}
}
private handleDrop(e: DragEvent) {
e.preventDefault();
e.stopPropagation();
this.isDragging = false;
const files = Array.from(e.dataTransfer?.files || []);
if (files.length > 0) {
this.processFiles(files);
}
}
private openFileSelector() {
const fileInput = this.shadowRoot?.querySelector('#fileInput') as HTMLInputElement;
if (fileInput) {
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